:root {
  --color-scale-black: #000000;
  --color-scale-gray-1: #cccccc;
  --color-scale-gray-2: #b3b3b3;
  --color-scale-gray-3: #8c8c8c;
  --color-scale-gray-4: #707070;
  --color-scale-gray-5: #4d4d4d;
  --color-scale-gray-6: #333333;
  --color-scale-gray-7: #262626;
  --color-scale-gray-9: #0d0d0d;
  --color-scale-blue-2: #79c0ff;
  --color-scale-blue-3: #58a6ff;
  --color-scale-blue-4: #388bfd;
  --color-scale-blue-9: #051d4d;
  --color-scale-red-4: #f85149;
  --color-scale-red-9: #490202;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Work Sans', sans-serif;
  background: var(--color-scale-black);
  color: var(--color-scale-gray-1);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 30px;
  overflow-x: hidden;
}

code {
  font-family: 'Spline Sans Mono', monospace;
}

body > .container {
  border-radius: 3px;
}

/* Hide UI when report is active */
body:has(.report-frame.active) {
  padding: 0;
}

body:has(.report-frame.active) .top-buttons,
body:has(.report-frame.active) .drop-zone,
body:has(.report-frame.active) #border-canvas,
body:has(.report-frame.active) #drag-overlay-canvas {
  display: none;
}

.container {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0;
  min-height: 0;
}

.input-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  flex: 1;
  min-height: 0;
}

.drop-zone {
  width: 100%;
  height: 100%;
  flex: 1;
  border: 1px dashed var(--color-scale-gray-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  transition: background 0.2s ease;
  background: var(--color-scale-black);
  position: relative;
}

.drop-zone.drag-over {
  background: var(--color-scale-blue-9);
  border-color: var(--color-scale-blue-4);
}

.drop-zone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 50px;
}

.main-title {
  width: 90vw;
  max-width: 1400px;
  height: auto;
}

.main-title .title-text {
  font-family: 'Spline Sans Mono', monospace;
  font-size: 64px;
  font-weight: 700;
  fill: var(--color-scale-gray-1);
  letter-spacing: -0.02em;
}

.main-title .subtitle-text {
  font-family: 'Work Sans', sans-serif;
  font-size: 10px;
  font-weight: 400;
  fill: var(--color-scale-gray-4);
}

.footer {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.75rem;
  color: var(--color-scale-gray-5);
}

.upload-btn {
  padding: 8px 16px;
  background: var(--color-scale-black);
  color: var(--color-scale-gray-3);
  border: 1px solid var(--color-scale-gray-7);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.upload-btn:hover {
  background:
    linear-gradient(var(--color-scale-gray-9), var(--color-scale-gray-9)) padding-box,
    linear-gradient(
        var(--glow-angle, 135deg),
        #0d9488,
        #14b8a6,
        #2dd4bf,
        #5eead4,
        #2dd4bf,
        #14b8a6,
        #0d9488
      )
      border-box;
  background-size:
    100% 100%,
    400% 400%;
  animation:
    rainbow-shift 3s ease infinite,
    glow-rotate-green 4s linear infinite;
  border: 1px solid transparent;
}

@keyframes glow-rotate-green {
  from {
    --glow-angle: 0deg;
    box-shadow:
      0 0 6px rgba(13, 148, 136, 0.4),
      0 0 12px rgba(45, 212, 191, 0.2);
  }
  25% {
    box-shadow:
      0 0 6px rgba(20, 184, 166, 0.4),
      0 0 12px rgba(94, 234, 212, 0.2);
  }
  50% {
    --glow-angle: 180deg;
    box-shadow:
      0 0 6px rgba(45, 212, 191, 0.4),
      0 0 12px rgba(13, 148, 136, 0.2);
  }
  75% {
    box-shadow:
      0 0 6px rgba(94, 234, 212, 0.4),
      0 0 12px rgba(20, 184, 166, 0.2);
  }
  to {
    --glow-angle: 360deg;
    box-shadow:
      0 0 6px rgba(13, 148, 136, 0.4),
      0 0 12px rgba(45, 212, 191, 0.2);
  }
}

.loading {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  position: absolute;
  inset: 0;
  background: var(--color-scale-black);
  z-index: 10;
}

.loading.active {
  display: flex;
}

.spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--color-scale-gray-6);
  border-top-color: var(--color-scale-blue-4);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

#loading-text {
  color: var(--color-scale-gray-3);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Error State */
.drop-zone.error-state {
  background: color(display-p3 0.72 0.07 0.03);
  border-color: color(display-p3 0.85 0.20 0.15);
  cursor: pointer;
}

.drop-zone.error-dismissing {
  transition: background 0.3s ease;
}

.main-title .title-text,
.main-title .subtitle-text,
.footer {
  transition: none;
}

.drop-zone.error-dismissing .main-title .title-text,
.drop-zone.error-dismissing .main-title .subtitle-text,
.drop-zone.error-dismissing .footer {
  transition: opacity 0.3s ease;
}

.drop-zone.error-state .main-title .title-text,
.drop-zone.error-state .main-title .subtitle-text,
.drop-zone.error-state .footer {
  opacity: 0;
}

.error-face {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  opacity: 0;
  pointer-events: none;
}

.drop-zone.error-dismissing .error-face {
  transition: opacity 0.3s ease;
}

.drop-zone.error-state .error-face {
  opacity: 1;
  animation: error-shake 0.5s ease;
}

@keyframes error-shake {
  0%, 100% { transform: translate(-50%, -50%); }
  10%, 30%, 50%, 70%, 90% { transform: translate(calc(-50% - 8px), -50%); }
  20%, 40%, 60%, 80% { transform: translate(calc(-50% + 8px), -50%); }
}

.error-face-emoji {
  font-family: 'Spline Sans Mono', monospace;
  font-size: clamp(48px, 10vw, 80px);
  font-weight: 700;
  color: white;
  line-height: 1;
}

.error-face-message {
  margin-top: 40px;
  font-family: 'Work Sans', sans-serif;
  font-size: clamp(16px, 3vw, 20px);
  color: white;
  max-width: 500px;
}

.report-frame {
  display: none;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: white;
}

.report-frame.active {
  display: block;
}

input[type='file'] {
  display: none;
}

/* Top Buttons */
.top-buttons {
  position: fixed;
  top: 40px;
  right: 40px;
  z-index: 100;
  display: flex;
  gap: 8px;
}

.why-button {
  padding: 8px 16px;
  background: var(--color-scale-black);
  color: var(--color-scale-gray-3);
  border: 1px solid var(--color-scale-gray-7);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.why-button:hover {
  background:
    linear-gradient(var(--color-scale-gray-9), var(--color-scale-gray-9)) padding-box,
    linear-gradient(
        var(--glow-angle, 135deg),
        #a5d8ff,
        #74c0fc,
        #4dabf7,
        #339af0,
        #228be6,
        #4dabf7,
        #74c0fc,
        #a5d8ff
      )
      border-box;
  background-size:
    100% 100%,
    400% 400%;
  animation:
    rainbow-shift 3s ease infinite,
    glow-rotate 4s linear infinite;
  border: 1px solid transparent;
  box-shadow:
    0 0 6px rgba(116, 192, 252, 0.3),
    0 0 12px rgba(77, 171, 247, 0.15);
}

@keyframes rainbow-shift {
  0% {
    background-position:
      0% 50%,
      0% 50%;
  }
  50% {
    background-position:
      0% 50%,
      100% 50%;
  }
  100% {
    background-position:
      0% 50%,
      0% 50%;
  }
}

@property --glow-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes glow-rotate {
  from {
    --glow-angle: 0deg;
    box-shadow:
      0 0 6px rgba(165, 216, 255, 0.4),
      0 0 12px rgba(51, 154, 240, 0.2);
  }
  25% {
    box-shadow:
      0 0 6px rgba(116, 192, 252, 0.4),
      0 0 12px rgba(34, 139, 230, 0.2);
  }
  50% {
    --glow-angle: 180deg;
    box-shadow:
      0 0 6px rgba(77, 171, 247, 0.4),
      0 0 12px rgba(165, 216, 255, 0.2);
  }
  75% {
    box-shadow:
      0 0 6px rgba(51, 154, 240, 0.4),
      0 0 12px rgba(116, 192, 252, 0.2);
  }
  to {
    --glow-angle: 360deg;
    box-shadow:
      0 0 6px rgba(165, 216, 255, 0.4),
      0 0 12px rgba(51, 154, 240, 0.2);
  }
}

/* Why Popover */
#why-popover {
  position: fixed;
  inset: unset;
  top: 86px;
  right: 40px;
  margin: 0;
  padding: 20px 24px;
  background: rgba(13, 13, 13, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--color-scale-gray-2);
  font-size: 0.85rem;
  max-width: 320px;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.1),
    0 2px 2px rgba(0, 0, 0, 0.1),
    0 4px 4px rgba(0, 0, 0, 0.1),
    0 8px 8px rgba(0, 0, 0, 0.1),
    0 16px 16px rgba(0, 0, 0, 0.1),
    0 32px 32px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translateY(-10px) scale(0.95);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    overlay 0.2s ease allow-discrete,
    display 0.2s ease allow-discrete;
}

#why-popover:popover-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@starting-style {
  #why-popover:popover-open {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
}

#why-popover::backdrop {
  background: transparent;
}

#why-popover p {
  margin: 0;
  line-height: 1.6;
}

#why-popover strong {
  color: var(--color-scale-gray-1);
  font-size: 1rem;
}

#why-popover .popover-options {
  margin-top: 12px;
  color: var(--color-scale-gray-3);
}

#why-popover .popover-features {
  margin-top: 8px;
  color: var(--color-scale-gray-4);
  font-size: 0.8rem;
}

#why-popover .popover-features code {
  background: var(--color-scale-gray-7);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.75rem;
}

#why-popover .popover-privacy {
  margin-top: 12px;
  color: var(--color-scale-gray-4);
  font-size: 0.75rem;
  font-style: italic;
}

#why-popover .popover-link {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--color-scale-gray-6);
}

#why-popover .popover-link a {
  color: var(--color-scale-blue-3);
  text-decoration: none;
  font-size: 0.8rem;
}

#why-popover .popover-link a:hover {
  color: var(--color-scale-blue-2);
  text-decoration: underline;
}

/* Animated Border - WebGL Canvas */
#border-canvas {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}

/* Drag Overlay - WebGL Canvas */
#drag-overlay-canvas {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: none;
  pointer-events: none;
}

#drag-overlay-canvas.active {
  display: block !important;
}

/* Mobile responsiveness */
@media (max-width: 480px) {
  .drop-zone {
    padding: 20px;
  }

  .drop-zone-content {
    padding: 20px 10px;
  }

  .main-title {
    width: 100%;
  }

  .top-buttons {
    top: 38px;
    right: 38px;
  }

  #why-popover {
    right: 10px;
    left: 10px;
    max-width: none;
  }
}