/* Home: one screen. Headline and lede on top, the cast on the studio floor, the launch row gutter to gutter.
   The stage is a grid (header / intro / flexible cast row / launch row); js/home.js sizes the cast from the cast row. */

.home { display: flex; flex-direction: column; }
.home [hidden] { display: none; }

.stage {
  --rail: 44px;                      /* caption rail under the hero's feet */
  position: relative;
  overflow: hidden;
  margin-top: calc(-1 * var(--top)); /* the studio runs up behind the header */
  min-height: max(640px, 100vh);
  min-height: max(640px, 100svh);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--top) auto minmax(200px, 1fr) auto;
}

/* ---------- floor: a plane with a soft sweep up into the wall ---------- */
.floor {
  position: absolute; left: 0; right: 0; bottom: 0; top: var(--floor-top, 62%);
  pointer-events: none;
  /* the last stretch dissolves into the wall, so the stage meets the footer rule without a grey band edge */
  background:
    linear-gradient(to bottom, transparent 58%, var(--wall)),
    radial-gradient(38% 52% at 47% 30%, rgb(247 247 248 / .95), rgb(247 247 248 / 0) 100%),
    radial-gradient(120% 140% at 47% 0%, rgb(0 0 0 / 0) 55%, rgb(60 58 54 / .07) 100%),
    linear-gradient(to bottom, var(--floor-far) 0%, #dcdcdb 50%, var(--floor-near) 100%);
}
.floor::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--sweep, 140px);
  background: linear-gradient(to bottom, rgb(224 224 224 / 0), rgb(224 224 224 / .35) 45%, rgb(224 224 224 / .8) 80%, var(--floor-far));
}

/* ---------- intro: 12 columns, lede on the headline's last baseline ---------- */
.intro {
  grid-row: 2;
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s-6);
  align-items: last baseline;
  padding-top: calc(clamp(var(--s-6), 7vh - 16px, var(--s-16)) + var(--shift, 0px));
}
.headline { grid-column: 1 / 10; }
.lede { grid-column: 10 / 13; color: var(--ink-2); text-wrap: pretty; }
@media (max-width: 1199px) {
  .headline { grid-column: 1 / 9; }
  .lede { grid-column: 9 / 13; }
}

/* ---------- cast ---------- */
.cast-row { grid-row: 3; position: relative; z-index: 1; min-height: 0; }
.cast { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease-out; }
.cast.is-in { opacity: 1; }
.cast > li { position: absolute; }

.pet { position: relative; display: block; width: 100%; height: 100%; border-radius: 0; }
.pet canvas {
  position: relative; z-index: 1; display: block; width: 100%; height: 100%;
  image-rendering: pixelated; image-rendering: crisp-edges;
  transition: transform .15s var(--ease);
}
.pet.is-back canvas { filter: saturate(.85) contrast(.92); }

/* contact shadow: a tight core where the shell meets the floor, a wide soft falloff around it.
   Light comes from the upper left, so both sit a little right of centre. */
.pet::before, .pet::after { content: ''; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; }
.pet::after {
  left: 18%; right: 10%;
  bottom: calc(var(--foot) - var(--s) * 1.6px);
  height: calc(var(--s) * 3.2px);
  background: radial-gradient(closest-side, rgb(var(--shade) / .5), rgb(var(--shade) / .2) 60%, rgb(var(--shade) / 0));
  filter: blur(calc(var(--s) * .5px));
}
.pet::before {
  left: 6%; right: -2%;
  bottom: calc(var(--foot) - var(--s) * 5px);
  height: calc(var(--s) * 10px);
  background: radial-gradient(closest-side, rgb(var(--shade) / .16), rgb(var(--shade) / 0));
}

/* the screen before it powers on: blank glass, no dots */
.lcd { position: absolute; z-index: 2; background: var(--off); pointer-events: none; }
.cast.is-on .lcd { animation: power-on .34s step-end forwards; animation-delay: calc(var(--i) * 90ms); }
@keyframes power-on {
  0% { opacity: 1; }
  24% { opacity: 0; }
  42% { opacity: .75; }
  58% { opacity: 0; }
  100% { opacity: 0; }
}

.pet:focus-visible { outline: none; }
/* focus: a 3px ink ring on a white halo around the drawn shell; the focused pet comes in front of its neighbours */
.ring {
  position: absolute; z-index: 3; pointer-events: none; border-radius: 46% 46% 42% 42% / 50% 50% 46% 46%;
  outline: 3px solid var(--ink); outline-offset: 6px; box-shadow: 0 0 0 6px rgb(255 255 255 / .92); opacity: 0;
}
.pet:focus-visible .ring { opacity: 1; }
.cast > li:has(.pet:focus-visible) { z-index: 20 !important; }
@media (hover: hover) and (pointer: fine) {
  .pet:hover canvas { transform: translateY(calc(var(--s) * -1px)); }
}

/* ---------- rail: the demo tag under the hero, captions under any pet ---------- */
.rail { position: absolute; left: 0; right: 0; bottom: 0; height: var(--rail); pointer-events: none; }
.tag, .cap {
  position: absolute; left: var(--cx, 50%); top: 50%;
  translate: -50% -50%;
  font-size: var(--t-small); line-height: 1.2; white-space: nowrap;
  opacity: 0;
  transition: opacity .15s ease-out, transform .22s var(--ease-out);
  transform: translateY(4px);
}
.tag { color: var(--ink); }
.tag .up { color: var(--up); }
.tag .down { color: var(--down); }
.tag .demo, .cap .meta { color: var(--ink-2); }
.cap b { font-weight: 500; }
.tag.is-in { opacity: 1; transform: none; }
.rail.is-cap .tag { opacity: 0; transform: none; }
.rail.is-cap .cap { opacity: 1; transform: none; }
/* leader from the caption up to a back-row pet's feet */
.lead {
  position: absolute; left: var(--lx, 50%); bottom: calc(50% + 12px); width: 1px; height: var(--lh, 0px);
  background: linear-gradient(to top, var(--line-2), rgb(128 131 137 / 0));
  opacity: 0; transition: opacity .15s ease-out;
}
.rail.is-cap .lead.is-on { opacity: 1; }

/* ---------- launch row: countdown left, actions right ---------- */
.launch {
  grid-row: 4;
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-6) var(--s-8);
  padding-top: var(--s-3);
  padding-bottom: clamp(var(--s-6), 5vh - 8px, var(--s-12));
}
.clock { display: flex; align-items: baseline; gap: var(--s-6); }
.clock > span { display: inline-flex; align-items: baseline; gap: var(--s-1); }
.clock .num { font-size: 30px; line-height: 1; }
.clock .unit { font-size: var(--t-small); color: var(--ink-2); }
.when-date { margin-top: var(--s-2); font-size: var(--t-small); color: var(--ink-2); }
.actions { display: flex; align-items: center; gap: var(--s-3); }
.launch.is-live .clock { display: none; }
.launch.is-live .when-date { margin-top: 0; font-size: var(--t-body); color: var(--ink); }

/* ---------- mobile band: hidden on larger screens ---------- */
.band { display: none; }

/* ---------- tablet ---------- */
@media (max-width: 999px) {
  .headline { grid-column: 1 / -1; }
  .lede { grid-column: 1 / 9; margin-top: var(--s-4); }
}

/* ---------- phone ---------- */
@media (max-width: 759px) {
  .stage { --rail: 40px; min-height: max(600px, 100svh); }
  .intro { padding-top: calc(var(--s-2) + var(--shift, 0px)); }
  .lede { grid-column: 1 / -1; margin-top: var(--s-3); max-width: 36ch; }
  .launch { flex-direction: column; align-items: stretch; gap: var(--s-6); padding-top: var(--s-2); padding-bottom: calc(var(--s-6) + env(safe-area-inset-bottom)); }
  .clock { display: grid; grid-template-columns: repeat(4, max-content); gap: var(--s-6); }
  .actions { flex-direction: column; align-items: stretch; }
  .actions > * { width: 100%; }

  /* the floor fades to --floor-near at its very bottom and the band starts on that same colour: no seam */
  .floor { background:
      linear-gradient(to bottom, transparent 72%, var(--floor-near)),
      radial-gradient(38% 52% at 47% 30%, rgb(247 247 248 / .95), rgb(247 247 248 / 0) 100%),
      radial-gradient(120% 140% at 47% 0%, rgb(0 0 0 / 0) 55%, rgb(60 58 54 / .07) 100%),
      linear-gradient(to bottom, var(--floor-far) 0%, #dcdcdb 50%, var(--floor-near) 100%); }
  .band { display: block; padding: var(--s-12) 0; background: linear-gradient(to bottom, var(--floor-near), var(--wall) var(--s-24)); }
  .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6); }
  .steps li { display: grid; gap: var(--s-1); }
  .steps b { font-weight: 500; }
  .steps span { font-size: var(--t-small); color: var(--ink-2); }
  .trust { display: grid; justify-items: start; gap: var(--s-2); margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--line); font-size: var(--t-small); color: var(--ink-2); }
  .trust .link { color: var(--ink); display: inline-flex; align-items: center; min-height: 44px; background-position: 0 calc(50% + 0.75em); padding-bottom: 0; }
}
/* short phones: drop the lede so the hero keeps its size (the band below says the same), tighten the launch row */
@media (max-width: 759px) and (max-height: 760px) {
  .lede { display: none; }
  .stage { --rail: 36px; }
  .launch { gap: var(--s-4); padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom)); }
  .actions { gap: var(--s-2); }
}
/* 320 px phones (320x568): the stage fits the screen exactly so "See the collection" is never cut, the hero steps
   down one size to make the room, the clock digits one size smaller */
@media (max-width: 359px) and (max-height: 760px) {
  .stage { min-height: max(520px, 100svh); }
  .clock .num { font-size: 26px; }
  /* "Mint opens 21 Oct, 20:00 UTC+5" on one line, "(15:00 UTC)" under it (pretty wrapping would leave "Mint opens" alone) */
  .when-date { text-wrap: wrap; }
}
@media (min-width: 560px) and (max-width: 759px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .lcd { display: none; }
  .cast, .tag, .cap, .lead { transition: opacity .15s linear; }
  .tag, .cap, .tag.is-in { transform: none; }
  .pet:hover canvas { transform: none; }
}

/* a time keeps its zone on one line: "20:00 UTC+5", "(15:00 UTC)" */
.nw { white-space: nowrap; }

/* first paint: the stage's contents wait for js/home.js to place the intro and the floor (one frame), so nothing
   jumps (CLS). If the script never runs they appear after 1.5 s anyway. */
.stage:not(.is-ready) > * { visibility: hidden; animation: stage-reveal 0s 1.5s forwards; }
@keyframes stage-reveal { to { visibility: visible; } }