/* T1K0 landing - three doors. Loaded after site.css, which supplies the
   colours, the glossy black, the top bar and the social badges. */
body.landing{ min-height:100vh; min-height:100svh; display:flex; flex-direction:column; }
.landing .top{ position:relative; }
.landing .day{ margin-left:auto; display:flex; }
.landing .strip{ justify-content:center; }
.landing .strip .social{ margin:0; }

/* ── the three doors ──────────────────────────────────────────────────── */
.doors{ flex:1; display:flex; min-height:0; }

.door{
  position:relative; flex:1 1 0; min-width:0; overflow:hidden;
  display:flex; align-items:flex-end;
  color:inherit; text-decoration:none; outline:none; cursor:pointer;
  border-right:3px solid var(--ink);
  transition:flex-grow .7s cubic-bezier(.2,.7,.2,1);
  container-type:inline-size;   /* lets the title scale with the door's width */
}
.door:last-child{ border-right:0; }

/* The clip sits greyed and dimmed until the door is woken. */
.door .bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(.55) brightness(.4) saturate(.9);
  transform:scale(1.04);
  transition:filter .8s ease, transform 1.6s ease;
}
/* Black floor under the text, so it stays readable over any frame. */
.door::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.6) 36%, rgba(0,0,0,0) 68%), rgba(0,0,0,.5);
  transition:background .6s;
}
.door.on::after{ background:linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.6) 36%, rgba(0,0,0,0) 68%), rgba(0,0,0,.15); }
/* Glossy black band that draws across the top of the woken door. */
.door::before{
  content:""; position:absolute; left:0; right:0; top:0; height:6px; z-index:2;
  background:var(--gloss); box-shadow:var(--rim);
  transform:scaleX(0); transform-origin:left; transition:transform .6s ease;
}

.door .content{ position:relative; z-index:1; width:100%; padding:0 34px 40px; }
.door .num{ display:block; margin-bottom:14px; font:900 13px/1 var(--mono); letter-spacing:.2em; color:var(--muted); transition:color .4s; }
.door .kicker{ margin-bottom:12px; }
.door h2{
  margin:0; line-height:1.02; font-family:var(--display); font-weight:900;
  letter-spacing:-.02em; text-transform:uppercase; color:var(--text);
  /* A narrowed door shrinks its title instead of breaking it onto two lines,
     so the text block does not jump as the mouse moves between doors. */
  font-size:clamp(20px, calc((100cqi - 68px) / 9.6), 40px); white-space:nowrap;
}

/* Room for the description is reserved up front, so nothing jumps as it types. */
.door .desc{
  margin:16px 0 0; max-width:30em; min-height:4.9em;
  font:400 clamp(15px,1.2vw,18px)/1.6 var(--sans); color:var(--soft);
  opacity:0; transition:opacity .35s ease;
}
.cursor{
  display:inline-block; width:.5em; height:1.05em; margin-left:2px; vertical-align:-.16em;
  background:var(--accent); animation:blink 1s steps(1) infinite;
}
.door.done .cursor{ opacity:0; animation:none; transition:opacity .6s ease 1.2s; }
.door .cta{
  display:inline-block; margin-top:14px; padding:10px 15px; border-radius:9px;
  background:var(--gloss); box-shadow:var(--rim), 0 6px 18px rgba(0,0,0,.7);
  font:700 11px/1 var(--mono); letter-spacing:.14em; color:#fff;
  opacity:0; transform:translateY(8px);
  transition:opacity .4s ease .15s, transform .4s ease .15s;
}
.soon{ cursor:default; }
/* the game door goes nowhere yet: an outline, not a button */
.soon .cta{ background:transparent; box-shadow:inset 0 0 0 1px #555; color:var(--soft); }
.soon .cta.nudge{ animation:nudge .5s ease; }
@keyframes nudge{ 20%{ transform:translateX(-6px); } 40%{ transform:translateX(6px); } 60%{ transform:translateX(-3px); } 80%{ transform:translateX(3px); } }

/* ── a woken door ─────────────────────────────────────────────────────── */
.door.on{ flex-grow:1.75; }
.door.on .bg{ filter:brightness(.66); transform:scale(1); }
.door.on::before{ transform:scaleX(1); }
.door.on .num{ color:var(--accent); }
.door.on .desc{ opacity:1; }
.door.on .cta{ opacity:1; transform:none; }
.door:focus-visible{ outline:none; box-shadow:inset 0 0 0 2px var(--text); }

/* Text without screen space: still read by screen readers and search engines. */
.sr{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

.lfoot{
  flex:none; padding:13px 28px;
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  border-top:1px solid var(--line);
  font:700 10px/1.6 var(--mono); letter-spacing:.1em; color:var(--dim);
}

/* ── phone: the doors stack ───────────────────────────────────────────── */
@media (max-width:760px){
  .landing .day{ display:flex; }
  .landing .strip{ flex-direction:row; padding:10px 16px; }
  .landing .strip .social{ width:100%; justify-content:space-between; }
  /* all three doors on the first screen: the page is one screen tall and they share it */
  body.landing{ height:100vh; height:100svh; min-height:0; overflow:hidden; }
  .doors{ flex-direction:column; }
  .door{ flex:1 1 0; min-height:0; border-right:0; border-bottom:3px solid var(--ink); }
  .door:last-child{ border-bottom:0; }
  .door.on{ flex-grow:1.9; }
  .door .content{ padding:0 20px 16px; }
  .door .num{ display:none; }
  .door .kicker{ margin-bottom:6px; font-size:9.5px; }
  .door h2{ font-size:clamp(22px, 7.4vw, 30px); }
  .door .desc{ min-height:0; margin-top:8px; font-size:14px; line-height:1.5; }
  .door:not(.on) .desc, .door:not(.on) .cta{ display:none; }
  .door .cta{ margin-top:10px; padding:8px 12px; font-size:10px; }
  .lfoot{ padding:8px 20px; font-size:9px; justify-content:center; }
  .lfoot span:first-child{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .cursor{ animation:none; }
}