/*
 * Monolith — an obsidian slab in a 3D vault: a perspective grid floor runs
 * toward a glowing horizon behind the card while light motes rise through the
 * dark. Extruded brass digits and a fuse bar that burns down with the time
 * window; the accent heats up gold → orange → red as the code nears expiry.
 */
body {
  font-family: 'Sora', system-ui, sans-serif;
  color: #a9adbf;
  background-color: #0a0c14;
  overflow: hidden;
}

/* ------------------------------------------------------- the 3D backdrop */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  perspective: 620px;
  perspective-origin: 50% 42%;
  background:
    radial-gradient(70% 60% at 50% 46%, rgba(38, 46, 76, 0.45), transparent 75%),
    radial-gradient(130% 130% at 50% 0%, transparent 50%, rgba(0, 0, 0, 0.65) 100%);
}

/* Warm light seeping up from behind the horizon line. */
.bg__horizon {
  position: absolute;
  left: -10%;
  right: -10%;
  top: 42%;
  height: 24%;
  background: radial-gradient(70% 100% at 50% 100%, rgba(230, 180, 80, 0.11), transparent 75%);
  transform: translateY(-100%);
  filter: blur(12px);
}

/* The floor: a steel grid receding toward the horizon, slowly running at the
   viewer, dissolving into fog in the distance. */
.bg__floor {
  position: absolute;
  left: -60%;
  right: -60%;
  top: 42%;
  bottom: -45%;
  transform: rotateX(62deg);
  transform-origin: 50% 0;
  background-image:
    linear-gradient(rgba(150, 160, 200, 0.16) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(150, 160, 200, 0.13) 1.5px, transparent 1.5px);
  background-size: 64px 64px;
  animation: floor-run 7s linear infinite;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 32%, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 32%, #000 78%, transparent);
}
@keyframes floor-run {
  to {
    background-position-y: 64px;
  }
}

/* Light motes drifting up at different depths — nearer ones bigger, softer. */
.bg__motes {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.bg__motes i {
  position: absolute;
  bottom: -6%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 210, 130, 0.85), rgba(240, 210, 130, 0) 70%);
  animation: mote-rise 16s linear infinite;
  opacity: 0;
}
.bg__motes i:nth-child(1) { left: 12%; animation-duration: 19s; }
.bg__motes i:nth-child(2) { left: 28%; width: 9px; height: 9px; filter: blur(1px); animation-duration: 14s; animation-delay: -6s; }
.bg__motes i:nth-child(3) { left: 46%; animation-delay: -11s; }
.bg__motes i:nth-child(4) { left: 64%; width: 12px; height: 12px; filter: blur(2px); animation-duration: 12s; animation-delay: -3s; }
.bg__motes i:nth-child(5) { left: 79%; animation-duration: 21s; animation-delay: -14s; }
.bg__motes i:nth-child(6) { left: 91%; width: 8px; height: 8px; filter: blur(1px); animation-duration: 15s; animation-delay: -9s; }
@keyframes mote-rise {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  12% {
    opacity: 0.7;
  }
  85% {
    opacity: 0.35;
  }
  100% {
    transform: translateY(-108vh);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bg__floor,
  .bg__motes i {
    animation: none;
  }
  .bg__motes {
    display: none;
  }
}

.stage {
  --accent: #e6c268;
  --accent-deep: #8a6a24;
  --glow: rgba(230, 194, 104, 0.35);
  --ink: #f2ead6;
  perspective: 1100px;
}
.stage[data-tier='warn'] {
  --accent: #ff8c3a;
  --accent-deep: #97430e;
  --glow: rgba(255, 140, 58, 0.35);
}
.stage[data-tier='expire'] {
  --accent: #ff4d63;
  --accent-deep: #8e1626;
  --glow: rgba(255, 77, 99, 0.38);
}

.scene {
  position: relative;
  transform-style: preserve-3d;
}

/* ---------------------------------------------------------------- the slab */
.slab {
  position: relative;
  padding: 34px 32px 30px;
  border-radius: 26px;
  transform-style: preserve-3d;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 42%),
    linear-gradient(200deg, #1b1f2e, #10131e 70%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top-color: rgba(255, 255, 255, 0.16);
  box-shadow:
    0 40px 80px -24px rgba(0, 0, 0, 0.85),
    0 2px 0 rgba(255, 255, 255, 0.05) inset;
}

/* A fixed specular highlight on the upper glass. */
.slab__sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(46% 38% at 50% 22%, rgba(255, 255, 255, 0.08), transparent 70%);
}

/* Grounding: soft contact shadow + warm spill under the slab. */
.floor {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -52px;
  height: 60px;
  transform: rotateX(70deg);
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.7), transparent 70%);
  filter: blur(14px);
}
.floor::after {
  content: '';
  position: absolute;
  inset: 10% 20%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, var(--glow), transparent 70%);
  filter: blur(18px);
  opacity: 0.5;
  transition: background 500ms ease;
}

/* ------------------------------------------------------------------ brand */
.brand {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 26px;
  transform: translateZ(18px);
}
.brand__mark {
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.brand__sub {
  margin-left: auto;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #6d7288;
}

/* -------------------------------------------------- the floating code plate */
.plate {
  transform: translateZ(46px);
  margin-bottom: 20px;
  padding: 26px 12px 22px;
  border-radius: 18px;
  background: linear-gradient(180deg, #10141f, #0b0e17);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom-color: rgba(0, 0, 0, 0.6);
  box-shadow:
    0 24px 40px -18px rgba(0, 0, 0, 0.9),
    0 0 44px -12px var(--glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: box-shadow 500ms ease;
}

.code {
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 9vw, 2.7rem);
  color: var(--accent);
  transition: color 500ms ease;
}
.code__digit {
  width: 0.82em;
  text-align: center;
  /* Extrusion: stacked hard shadows fall away beneath each digit. */
  text-shadow:
    0 1px 0 var(--accent-deep),
    0 2px 0 var(--accent-deep),
    0 3px 0 var(--accent-deep),
    0 4px 0 rgba(0, 0, 0, 0.55),
    0 9px 14px rgba(0, 0, 0, 0.6);
}
.code__gap {
  width: 0.5em;
}

/* --------------------------------------------------------- fuse + countdown */
.fuse {
  transform: translateZ(30px);
  height: 5px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
}
.fuse__bar {
  height: 100%;
  border-radius: inherit;
  transform: scaleX(var(--progress));
  transform-origin: left center;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  box-shadow: 0 0 10px var(--glow);
  transition: background 500ms ease;
}
.countdown {
  transform: translateZ(30px);
  margin-top: 8px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6d7288;
  text-align: right;
}
.countdown [data-countdown] {
  color: var(--accent);
  font-weight: 700;
  transition: color 500ms ease;
}

.meta {
  transform: translateZ(24px);
  margin: 14px 0 18px;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: #8a8fa6;
  min-height: 1em;
}

/* ------------------------------------------------------------------ entry */
.entry {
  display: grid;
  gap: 14px;
  transform: translateZ(12px);
  transform-style: preserve-3d;
}
/* The key slot: a machined intake for the secret. The key glyph is the status
   light — dim brass when idle, lit accent once a key is accepted, red on a
   bad key. */
.entry__slot {
  position: relative;
  display: block;
}
.entry__key {
  position: absolute;
  left: 16px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  color: #4c5166;
  transition: color 300ms ease, filter 300ms ease;
  pointer-events: none;
}
.stage[data-state='active'] .entry__key {
  color: var(--accent);
  filter: drop-shadow(0 0 5px var(--glow));
}
.stage[data-state='error'] .entry__key {
  color: #ff4d63;
}
.entry__input {
  width: 100%;
  font-family: 'Spline Sans Mono', monospace;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  caret-color: var(--accent);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.28) 30%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-top-color: rgba(0, 0, 0, 0.55);
  border-bottom-color: rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 15px 16px 15px 46px;
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.6);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.entry__input::placeholder {
  color: #5f6478;
  letter-spacing: 0.08em;
}
.entry__input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow:
    inset 0 3px 10px rgba(0, 0, 0, 0.6),
    0 0 0 1px var(--accent),
    0 0 18px -4px var(--glow);
}

/* A physical keycap: raised on a hard bottom edge, sinks when pressed. */
.copy {
  transform: translateZ(20px);
  font-family: 'Unbounded', sans-serif;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #14100a;
  background: linear-gradient(180deg, var(--accent), var(--accent-deep) 160%);
  border: none;
  border-radius: 14px;
  padding: 15px;
  cursor: pointer;
  box-shadow:
    0 5px 0 var(--accent-deep),
    0 14px 24px -8px var(--glow);
  transition: background 500ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.copy:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.copy:active {
  transform: translateZ(20px) translateY(4px);
  box-shadow:
    0 1px 0 var(--accent-deep),
    0 8px 16px -8px var(--glow);
}

.hint {
  margin: 2px 0 0;
  text-align: center;
  font-size: 0.74rem;
  color: #6d7288;
}

/* ------------------------------------------------------------------ states */
.stage:not([data-state='active']) .plate,
.stage:not([data-state='active']) .fuse,
.stage:not([data-state='active']) .countdown,
.stage:not([data-state='active']) .copy,
.stage:not([data-state='active']) .meta {
  display: none;
}
.stage[data-state='error'] .hint {
  color: #ff4d63;
}

@media (max-width: 480px) {
  .slab {
    padding: 26px 20px 24px;
  }
}