/* Us, After Dark — one committed dusk palette, no webfonts, no network calls. */

:root{
  --ink:      #120E1C;
  --ink-2:    #1B1529;
  --ink-3:    #251D38;
  --line:     rgba(201,191,219,.14);
  --line-2:   rgba(201,191,219,.28);
  --cream:    #FBF3E9;
  --haze:     #C4BAD8;
  --haze-dim: #8B81A4;
  --bloom:    #F0B27A;
  --rose:     #E8798F;
  --glow:     rgba(240,178,122,.30);

  --serif: "Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:  -apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",Roboto,system-ui,sans-serif;
  --mono:  ui-monospace,"Cascadia Mono","SF Mono","Segoe UI Mono",Consolas,monospace;
  --hand:  "Snell Roundhand","Bradley Hand","Segoe Script","Ink Free",cursive;

  --pad: clamp(1.25rem, 5vw, 4rem);
  --max: 68rem;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--ink);
  color:var(--haze);
  font-family:var(--sans);
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- atmosphere ---------- */
#sky{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:0;
  display:block;
}
.veil{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(240,178,122,.13), transparent 60%),
    radial-gradient(90% 60% at 85% 105%, rgba(232,121,143,.10), transparent 65%),
    radial-gradient(100% 100% at 50% 50%, transparent 35%, rgba(18,14,28,.82) 100%);
}

.page{ position:relative; z-index:2; }

.wrap{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--pad);
}

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--bloom);
  margin:0;
}
h1,h2,h3{ text-wrap:balance; color:var(--cream); font-weight:400; margin:0; }
em{ font-style:italic; color:var(--bloom); }

.section-head{
  display:flex; flex-direction:column; gap:.6rem;
  margin-bottom:clamp(2rem,5vw,3.25rem);
}
.section-head h2{
  font-family:var(--serif);
  font-size:clamp(1.6rem,1.1rem + 2.2vw,2.5rem);
  line-height:1.25;
  letter-spacing:-.01em;
}
.section-head p{ margin:0; max-width:46ch; color:var(--haze-dim); }

.band{ padding-block:clamp(3.5rem,9vw,6.5rem); }

/* ---------- hero ---------- */
.hero{
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:clamp(1.5rem,4vw,2.5rem);
  padding-block:clamp(4rem,12vh,7rem);
  text-align:center;
}
.hero h1{
  font-family:var(--serif);
  font-size:clamp(2rem,1.1rem + 5.4vw,4.4rem);
  line-height:1.12;
  letter-spacing:-.02em;
  max-width:17ch;
}
.names{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(.75rem,3vw,1.5rem);
  flex-wrap:wrap;
  margin:0;
  font-family:var(--mono);
  font-size:clamp(.8rem,.7rem + .5vw,1rem);
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--cream);
}
.names .amp{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.9em;
  letter-spacing:0;
  color:var(--bloom);
  text-transform:none;
  line-height:1;
  text-shadow:0 0 28px var(--glow);
}
.cue{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--haze-dim);
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  margin:0;
}
.cue::after{
  content:""; width:1px; height:2.2rem;
  background:linear-gradient(var(--line-2),transparent);
}

.hero > *{ animation:rise .9s cubic-bezier(.2,.7,.3,1) backwards; }
.hero > :nth-child(1){ animation-delay:.05s; }
.hero > :nth-child(2){ animation-delay:.20s; }
.hero > :nth-child(3){ animation-delay:.38s; }
.hero > :nth-child(4){ animation-delay:.56s; }
@keyframes rise{ from{ opacity:0; transform:translateY(1.25rem); } }

/* ---------- counter ---------- */
.ticker{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(.6rem,1.6vw,1rem);
}
.tile{
  background:linear-gradient(180deg,var(--ink-2),rgba(27,21,41,.55));
  border:1px solid var(--line);
  border-radius:2px;
  padding:clamp(1rem,3vw,1.75rem) clamp(.75rem,2vw,1.25rem);
  text-align:center;
  display:flex; flex-direction:column; gap:.4rem;
}
.tile b{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  font-size:clamp(1.75rem,1rem + 4vw,3.25rem);
  font-weight:500;
  line-height:1;
  color:var(--cream);
}
.tile span{
  font-family:var(--mono);
  font-size:.63rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--haze-dim);
}
.tile:nth-child(4) b{ color:var(--bloom); }
.since{
  margin:1.5rem 0 0;
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--haze-dim);
}

/* ---------- chapters ---------- */
.rail{
  display:flex; flex-direction:column;
  gap:clamp(2rem,5vw,3rem);
  border-left:1px solid var(--line);
  padding-left:clamp(1.25rem,4vw,2.5rem);
}
.chapter{ position:relative; display:flex; flex-direction:column; gap:.55rem; }
.chapter::before{
  content:"";
  position:absolute;
  left:calc(-1 * clamp(1.25rem,4vw,2.5rem) - 4px);
  top:.5rem;
  width:7px; height:7px;
  border-radius:50%;
  background:var(--bloom);
  box-shadow:0 0 0 4px var(--ink), 0 0 18px var(--glow);
}
.chapter .marker{
  margin:0;
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--rose);
}
.chapter h3{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.2rem,1rem + 1vw,1.6rem);
  line-height:1.3;
}
.chapter p{ margin:0; max-width:54ch; }

/* ---------- little things ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
  gap:clamp(.7rem,2vw,1.1rem);
}
.card{
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:2px;
  padding:clamp(1.1rem,3vw,1.5rem);
  display:flex; flex-direction:column; gap:.5rem;
  transition:border-color .3s ease, transform .3s ease, background .3s ease;
}
.card:hover{ border-color:var(--line-2); background:var(--ink-3); transform:translateY(-2px); }
.card b{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:1.15rem;
  color:var(--cream);
}
.card p{ margin:0; font-size:.94rem; color:var(--haze-dim); line-height:1.6; }

/* ---------- the letter ---------- */
.letter{ text-align:center; }
.letter .section-head{ align-items:center; text-align:center; }
.envelope{
  max-width:40rem; margin-inline:auto;
  background:linear-gradient(165deg,var(--ink-3),var(--ink-2));
  border:1px solid var(--line-2);
  border-radius:3px;
  padding:clamp(1.75rem,5vw,3rem);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.75);
}
.seal{
  appearance:none;
  display:inline-flex; align-items:center; gap:.8rem;
  background:transparent;
  border:1px solid var(--bloom);
  color:var(--bloom);
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  padding:.85rem 1.5rem;
  border-radius:999px;
  cursor:pointer;
  transition:background .3s ease, color .3s ease, box-shadow .3s ease;
}
.seal:hover, .seal:focus-visible{
  background:var(--bloom);
  color:var(--ink);
  box-shadow:0 0 34px var(--glow);
}
.seal .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }

.note{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .7s cubic-bezier(.2,.7,.3,1), opacity .5s ease .15s;
  opacity:0;
  text-align:left;
}
.envelope.open .note{ grid-template-rows:1fr; opacity:1; }
.envelope.open .seal{ display:none; }
.note > div{ overflow:hidden; }
.note p{
  font-family:var(--serif);
  font-size:clamp(1.05rem,1rem + .5vw,1.3rem);
  line-height:1.85;
  color:var(--haze);
}
.note p:first-child{ margin-top:0; }
.sign{
  font-family:var(--hand);
  font-size:clamp(2rem,1.4rem + 3vw,3rem);
  color:var(--bloom);
  margin:1.5rem 0 0;
  line-height:1.2;
}

/* ---------- footer ---------- */
.foot{
  border-top:1px solid var(--line);
  padding-block:2.5rem 3.5rem;
  display:flex; flex-wrap:wrap; gap:.75rem 2rem;
  justify-content:space-between; align-items:baseline;
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--haze-dim);
}
.foot p{ margin:0; }
.foot .heart{ color:var(--rose); }

:focus-visible{ outline:2px solid var(--bloom); outline-offset:3px; }

@media (min-width:40rem){
  .ticker{ grid-template-columns:repeat(4,1fr); }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ---------- the song ---------- */
.record{
  margin:0;
  display:flex; flex-direction:column; align-items:flex-start;
  gap:clamp(.9rem,2.5vw,1.4rem);
}
.lyric{
  margin:0;
  border-left:2px solid var(--rose);
  padding-left:clamp(1rem,3vw,1.75rem);
}
.lyric p{
  margin:0;
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.5rem,1rem + 3.4vw,3rem);
  line-height:1.25;
  color:var(--cream);
  text-wrap:balance;
}
.lyric em{ color:var(--rose); font-style:italic; }
.gloss{
  margin:0;
  color:var(--haze-dim);
  font-size:.95rem;
  max-width:42ch;
}

.player{
  display:flex; align-items:center;
  width:100%;
  padding:.55rem 1.1rem;
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:999px;
}
.player[hidden]{ display:none; }

.wave{
  flex:1 1 auto;
  min-width:0;
  height:2.6rem;
  display:block;
}

.track{
  margin:0;
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--haze-dim);
}

/* ---------- photographs ---------- */
.gallery[hidden]{ display:none; }

.reel{
  margin:0 0 clamp(.7rem,2vw,1.1rem);
  display:flex; flex-direction:column; gap:.75rem;
}
.reel[hidden]{ display:none; }
.reel video{
  width:100%; height:auto;
  display:block;
  border:1px solid var(--line-2);
  border-radius:3px;
  background:#000;
  box-shadow:0 30px 70px -35px rgba(0,0,0,.8);
}
.reel figcaption{
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--haze-dim);
}

/* masonry: five 9:16 phone photos and one 16:9 - let each keep its own shape */
.frames{
  columns:1;
  column-gap:clamp(.7rem,2vw,1.1rem);
}
.frame{
  margin:0 0 clamp(.7rem,2vw,1.1rem);
  break-inside:avoid;
  position:relative;
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
  background:var(--ink-2);
  cursor:zoom-in;
  transition:border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}
.frame img{
  width:100%; height:auto;
  display:block;
  /* the dusk grade, lifted on hover so the real colour is the reward */
  filter:saturate(.88) contrast(1.02);
  transition:filter .45s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}
.frame::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(18,14,28,0) 55%,rgba(18,14,28,.45));
  opacity:.9;
  transition:opacity .35s ease;
}
.frame:hover, .frame:focus-within{
  border-color:var(--line-2);
  transform:translateY(-3px);
  box-shadow:0 26px 50px -30px rgba(0,0,0,.85);
}
.frame:hover img{ filter:saturate(1) contrast(1); transform:scale(1.02); }
.frame:hover::after{ opacity:.35; }

@media (min-width:40rem){ .frames{ columns:2; } }
@media (min-width:64rem){ .frames{ columns:3; } }

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:50;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:clamp(.5rem,2vw,1.5rem);
  padding:clamp(.75rem,3vw,2.5rem);
  background:rgba(9,7,15,.94);
  backdrop-filter:blur(6px);
  animation:fade .25s ease;
}
.lightbox[hidden]{ display:none; }
@keyframes fade{ from{ opacity:0; } }

.lb-img{
  grid-column:2;
  justify-self:center;
  max-width:100%;
  max-height:88vh;
  width:auto; height:auto;
  display:block;
  border-radius:3px;
  box-shadow:0 40px 90px -40px #000;
}
.lb-btn{
  appearance:none;
  display:grid; place-items:center;
  width:2.75rem; height:2.75rem;
  border-radius:50%;
  border:1px solid var(--line-2);
  background:rgba(27,21,41,.8);
  color:var(--cream);
  font-size:1.5rem;
  line-height:1;
  cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.lb-btn:hover, .lb-btn:focus-visible{
  background:var(--bloom); color:var(--ink); border-color:var(--bloom);
}
.lb-prev{ grid-column:1; }
.lb-next{ grid-column:3; }
.lb-close{
  position:absolute;
  top:clamp(.75rem,3vw,2rem);
  right:clamp(.75rem,3vw,2rem);
  font-size:1.35rem;
}

/* ---------- now playing: pinned top-right, always one tap from silence ---------- */
.np{
  position:fixed;
  z-index:40;
  top:calc(env(safe-area-inset-top, 0px) + clamp(.6rem, 2vw, 1.25rem));
  right:clamp(.6rem, 2vw, 1.25rem);
  display:flex; align-items:center;
  gap:.55rem;
  padding:.3rem .95rem .3rem .3rem;
  border:1px solid var(--line-2);
  border-radius:999px;
  background:rgba(27,21,41,.72);
  backdrop-filter:blur(10px);
  box-shadow:0 14px 34px -18px rgba(0,0,0,.9);
}
.np[hidden]{ display:none; }

.np-btn{
  flex:none;
  display:grid; place-items:center;
  width:2.25rem; height:2.25rem;
  border-radius:50%;
  border:1px solid var(--bloom);
  background:transparent;
  color:var(--bloom);
  cursor:pointer;
  position:relative;
  transition:background .3s ease, color .3s ease, box-shadow .3s ease;
}
.np-btn:hover, .np-btn:focus-visible{
  background:var(--bloom); color:var(--ink);
  box-shadow:0 0 26px var(--glow);
}
.np-btn .ico{
  width:0; height:0;
  margin-left:2px;
  border-left:9px solid currentColor;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
}
.np.playing .np-btn .ico{
  width:9px; height:11px;
  margin-left:0;
  border:0;
  background:
    linear-gradient(currentColor,currentColor) left  / 3px 100% no-repeat,
    linear-gradient(currentColor,currentColor) right / 3px 100% no-repeat;
}

/* the browser refused to autoplay - a pulse says "this is tappable" */
.np.waiting .np-btn::after{
  content:"";
  position:absolute; inset:-1px;
  border-radius:50%;
  border:1px solid var(--bloom);
  animation:ping 2s ease-out infinite;
}
@keyframes ping{
  0%   { transform:scale(1);    opacity:.75; }
  70%  { transform:scale(1.75); opacity:0; }
  100% { transform:scale(1.75); opacity:0; }
}

.np-eq{
  display:flex; align-items:flex-end; gap:2px;
  height:.85rem;
}
.np-eq i{
  width:2px;
  height:100%;
  background:var(--rose);
  transform-origin:bottom;
  transform:scaleY(.22);
  animation:eq .9s ease-in-out infinite alternate;
  animation-play-state:paused;
}
.np-eq i:nth-child(2){ animation-duration:.65s; background:var(--bloom); }
.np-eq i:nth-child(3){ animation-duration:1.1s; }
.np.playing .np-eq i{ animation-play-state:running; }
@keyframes eq{ from{ transform:scaleY(.22); } to{ transform:scaleY(1); } }

.np-title{
  font-family:var(--mono);
  font-size:.6rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--haze);
  white-space:nowrap;
}

/* on a phone the pill shrinks to just the button and the meter */
@media (max-width:34rem){
  .np-title{ display:none; }
  .np{ padding:.3rem .7rem .3rem .3rem; }
}

@media (prefers-reduced-motion:reduce){
  .np-eq i, .np.waiting .np-btn::after{ animation:none; }
}

/* ---------- the first letter ---------- */
.note-meta{
  margin:0 0 1.5rem;
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--rose);
}
.scan{
  margin:0 0 1.75rem;
  display:flex; flex-direction:column; gap:.6rem;
  align-items:flex-start;
}
.scan img{
  width:100%;
  max-width:22rem;
  height:auto;
  display:block;
  border:1px solid var(--line-2);
  border-radius:2px;
  cursor:zoom-in;
  /* this scan is already dim and slightly cool - warm it into the palette
     without darkening it further, or the ink stops being readable */
  filter:brightness(1.04) contrast(1.06) sepia(.14) saturate(.95);
  box-shadow:0 24px 50px -28px rgba(0,0,0,.9);
  transition:filter .4s ease, transform .4s ease;
}
.scan img:hover{ filter:none; transform:translateY(-2px); }
.scan figcaption{
  font-family:var(--mono);
  font-size:.6rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--haze-dim);
}

/* ---------- the opening ----------------------------------------------------
   Sits over everything until she taps. Two jobs: say the thing, and turn her
   first touch into real user activation so the song can start with sound.
   The ground is translucent, so the starfield keeps drifting behind it.
   -------------------------------------------------------------------------- */
.intro{
  position:fixed; inset:0; z-index:60;
  display:grid; place-items:center;
  padding:clamp(1.5rem,6vw,4rem);
  text-align:center;
  cursor:pointer;
  background:
    radial-gradient(120% 90% at 50% 28%, rgba(35,26,54,.90), rgba(11,8,19,.97) 70%);
  backdrop-filter:blur(2px);
  transition:opacity .9s ease, transform .9s cubic-bezier(.4,0,.2,1), visibility .9s;
}
/* .intro sets display:grid, which outranks the UA rule for [hidden] */
.intro[hidden]{ display:none; }
.intro.gone{
  opacity:0;
  transform:scale(1.07);
  visibility:hidden;
  pointer-events:none;
}
.intro-inner{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(.6rem,2vw,1rem);
}
.intro-inner > *{
  animation:introRise 1s cubic-bezier(.2,.7,.3,1) backwards;
}
.intro-eyebrow{
  margin:0;
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--haze-dim);
  animation-delay:.25s;
}
.intro-line{
  margin:0;
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.5rem,1rem + 3.4vw,2.75rem);
  line-height:1.15;
  color:var(--cream);
  animation-delay:.6s;
}
.intro-name{
  margin:-.1em 0 0;
  font-family:var(--hand);
  font-size:clamp(3.75rem,2rem + 15vw,9rem);
  line-height:1.05;
  color:var(--bloom);
  text-shadow:0 0 44px var(--glow), 0 0 90px rgba(240,178,122,.18);
  animation:nameIn 1.5s cubic-bezier(.2,.7,.3,1) backwards;
  animation-delay:1s;
}
.intro-rule{
  width:clamp(4rem,18vw,9rem);
  height:1px;
  background:linear-gradient(90deg,transparent,var(--rose),transparent);
  animation:ruleIn 1.1s ease backwards;
  animation-delay:1.9s;
}
.intro-go{
  appearance:none;
  margin-top:clamp(1rem,3vw,1.75rem);
  background:transparent;
  border:0;
  border-bottom:1px solid rgba(240,178,122,.4);
  padding:.35rem .2rem;
  color:var(--bloom);
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  cursor:pointer;
  animation:introRise 1s cubic-bezier(.2,.7,.3,1) 2.3s backwards,
            breathe 2.6s ease-in-out 3.3s infinite;
}
.intro-go:hover, .intro-go:focus-visible{
  color:var(--cream);
  border-bottom-color:var(--cream);
}

@keyframes introRise{ from{ opacity:0; transform:translateY(1.1rem); } }
@keyframes nameIn{
  from{ opacity:0; transform:translateY(1.5rem) scale(.94); filter:blur(6px); }
  to  { opacity:1; transform:none; filter:none; }
}
@keyframes ruleIn{ from{ opacity:0; transform:scaleX(0); } }
@keyframes breathe{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }

@media (prefers-reduced-motion:reduce){
  .intro-inner > *, .intro-name, .intro-rule, .intro-go{ animation:none; }
}

/* ---------- the lock ---------- */
.intro.asking .intro-inner{
  animation:introOut .5s ease forwards;
  pointer-events:none;
}
@keyframes introOut{
  to{ opacity:0; transform:translateY(-1.5rem) scale(.97); }
}

.gate{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(.5rem,2vw,.85rem);
  width:100%;
  padding-inline:clamp(1rem,5vw,2rem);
  animation:gateIn .8s cubic-bezier(.2,.7,.3,1) .35s backwards;
}
.gate[hidden]{ display:none; }
@keyframes gateIn{ from{ opacity:0; transform:translate(-50%,-44%); } }

.gate-label{
  margin:0;
  font-family:var(--mono);
  font-size:.64rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--haze-dim);
}
.gate-hint{
  margin:0 0 clamp(.75rem,2vw,1.25rem);
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.15rem,1rem + 1.4vw,1.7rem);
  color:var(--cream);
  text-wrap:balance;
}

.code{
  position:relative;
  display:flex;
  gap:clamp(.3rem,1.5vw,.55rem);
}
.code span{
  width:clamp(2.1rem,11vw,2.9rem);
  height:clamp(2.8rem,14vw,3.7rem);
  display:grid; place-items:center;
  border:1px solid var(--line-2);
  border-radius:3px;
  background:rgba(27,21,41,.65);
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  font-size:clamp(1.1rem,4vw,1.5rem);
  color:var(--cream);
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.code span.filled{
  border-color:var(--bloom);
  box-shadow:0 0 22px var(--glow);
  animation:pop .28s cubic-bezier(.2,.7,.3,1);
}
.code span.next{ border-color:var(--rose); }
@keyframes pop{ 50%{ transform:scale(1.09); } }

/* the real field sits invisibly over the boxes so a tap opens her keyboard.
   16px minimum, or iOS zooms the whole page in when it focuses. */
.code input{
  position:absolute; inset:0;
  width:100%; height:100%;
  margin:0; padding:0; border:0;
  background:transparent;
  color:transparent;
  caret-color:transparent;
  font-size:16px;
  cursor:pointer;
  outline:none;
}
.code input:focus-visible + span,
.code:focus-within span.next{ border-color:var(--rose); }

.code.wrong{ animation:shake .45s cubic-bezier(.36,.07,.19,.97); }
.code.wrong span{ border-color:var(--rose); box-shadow:0 0 20px rgba(232,121,143,.35); }
@keyframes shake{
  10%,90%{ transform:translateX(-2px); }
  20%,80%{ transform:translateX(4px); }
  30%,50%,70%{ transform:translateX(-7px); }
  40%,60%{ transform:translateX(7px); }
}

.code.right span{
  border-color:var(--bloom);
  animation:lightUp .5s ease backwards;
}
.code.right span:nth-child(1){ animation-delay:0s; }
.code.right span:nth-child(2){ animation-delay:.07s; }
.code.right span:nth-child(3){ animation-delay:.14s; }
.code.right span:nth-child(4){ animation-delay:.21s; }
.code.right span:nth-child(5){ animation-delay:.28s; }
.code.right span:nth-child(6){ animation-delay:.35s; }
@keyframes lightUp{
  50%{ transform:translateY(-8px); box-shadow:0 0 34px var(--glow); }
}

.gate-msg{
  margin:.35rem 0 0;
  min-height:1.2em;
  font-family:var(--mono);
  font-size:.64rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--rose);
}

@media (prefers-reduced-motion:reduce){
  .gate, .code span, .code.wrong, .code.right span, .intro.asking .intro-inner{
    animation:none;
  }
}