/* ============================================================
   ENTRY — the gate
   A pinned, scroll-driven sequence over the live tile field.
   Everything is centred on one axis: the brief asked for
   symmetry, and the gate is where it reads loudest.
   ============================================================ */

html.is-gated, body.is-gated{ overflow:hidden; }
body.is-gated .masthead,
body.is-gated .dock,
body.is-gated .progress{ opacity:0; pointer-events:none; }

.entry{
  position:fixed; inset:0; z-index:var(--z-entry);
  background:#05100D;
  opacity:0;
  transition:opacity .9s var(--ease);
  overflow:hidden;
  --entry-veil:0;
}
.entry.is-live{ opacity:1; }

/* ---- Field ------------------------------------------------- */
.entry__canvas{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; opacity:0;
  transition:opacity .7s var(--ease);
}
.entry__canvas.is-on{ opacity:1; }

.entry__atmos{
  position:absolute; inset:0; pointer-events:none;
  background:
    /* soft plate behind the copy band */
    radial-gradient(52% 26% at 50% 47%, rgba(4,11,9,.80) 0%, rgba(4,11,9,.42) 58%, transparent 82%),
    /* vignette */
    radial-gradient(74% 58% at 50% 46%, rgba(9,24,19,0) 0%, rgba(5,14,11,.52) 70%, rgba(4,10,8,.94) 100%),
    /* a little light from above */
    radial-gradient(110% 80% at 50% 0%, rgba(52,104,84,.24) 0%, transparent 58%);
}
.entry__flash{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 50% at 50% 50%, rgba(226,214,191,.95), rgba(226,214,191,0) 70%);
  opacity:var(--entry-veil);
  transition:opacity .5s var(--ease);
}

/* ---- Scroll mechanics -------------------------------------- */
.entry__scroller{
  position:absolute; inset:0;
  overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-width:none;
}
.entry__scroller::-webkit-scrollbar{ display:none; }
/* 260vh leaves 160vh of travel across three stages — roughly half a screen
   each. 400vh made reaching the gate feel like work. */
.entry__track{ height:180vh; position:relative; }
.entry__stage{
  position:sticky; top:0;
  height:100vh; height:100svh;
  display:grid; grid-template-rows:auto 1fr auto;
  align-items:center; justify-items:center;
  padding:clamp(20px,4vh,44px) var(--gutter);
  pointer-events:none;
}
.entry__stage > *{ pointer-events:auto; }

/* ---- Masthead line ----------------------------------------- */
.entry__mark{
  display:flex; align-items:center; gap:12px;
  color:var(--ink);
  justify-self:center;
}
.entry__mark span{
  width:30px; height:30px; border:1px solid var(--glass-edge-2);
  display:grid; place-items:center;
  font:300 14px/1 var(--serif);
}
.entry__mark strong{
  font-size:11px; letter-spacing:.3em; text-transform:uppercase; font-weight:500;
}

/* Panels and gate share one cell: whichever is hidden must not reserve
   space, or the visible one sits off the optical centre. */
.entry__middle{
  display:grid; place-items:center;
  width:100%; height:100%;
}
.entry__panels,.entry__gate{ grid-area:1/1; }

/* ---- Stage copy -------------------------------------------- */
.entry__panels{
  position:relative;
  display:grid; place-items:center;
  width:min(940px,100%);
  text-align:center;
}
.entry__panel{
  grid-area:1/1;
  display:grid; justify-items:center; gap:clamp(14px,2.2vh,24px);
  opacity:0; visibility:hidden;
  transform:translateY(18px);
  transition:opacity .75s var(--ease), transform .95s var(--ease), visibility .75s;
}
.entry__panel.is-on{ opacity:1; visibility:visible; transform:none; }

.entry__eyebrow{
  font-size:var(--t-micro); letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-on-dark-65); font-weight:500;
}
.entry__title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.7rem,8.2vw,7.4rem);
  line-height:.92; letter-spacing:-.04em;
  text-transform:uppercase;
  color:var(--ink);
  text-wrap:balance;
}
.entry__title em{ font-style:italic; text-transform:none; color:var(--sand); }
.entry__sub{
  font:300 clamp(1rem,1.5vw,1.3rem)/1.55 var(--serif);
  color:rgba(239,234,223,.88);
  max-width:46ch;
}

/* ---- The gate ---------------------------------------------- */
.entry__gate{
  justify-self:center;
  width:min(560px,100%);
  margin-inline:auto;
  opacity:0; transform:translateY(22px);
  visibility:hidden;
  transition:opacity .8s var(--ease), transform .8s var(--ease), visibility .8s;
}
.entry__gate.is-on{ opacity:1; transform:none; visibility:visible; }

.entry__card{
  background:rgba(233,242,238,.055);
  border:1px solid var(--glass-edge);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:0 1px 0 0 rgba(255,255,255,.18) inset, 0 30px 80px -32px rgba(0,0,0,.85);
  padding:clamp(24px,3.4vw,38px);
  display:grid; gap:clamp(16px,2vw,22px); justify-items:center;
  text-align:center;
}
.entry__cardTitle{
  font:300 clamp(1.15rem,2vw,1.6rem)/1.24 var(--serif);
  letter-spacing:-.02em; color:var(--ink); max-width:26ch;
}
.entry__cardTitle em{ font-style:italic; color:var(--sand); }
.entry__card h2{
  font:400 var(--t-micro)/1.9 var(--sans);
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-on-dark-65);
}
.entry__card p{
  font-size:var(--t-small); line-height:1.7; color:var(--ink-on-dark-65);
  max-width:44ch;
}
.entry__facts{
  display:grid; grid-template-columns:repeat(3,1fr);
  width:100%; gap:12px;
  padding:16px 0; margin-top:2px;
  border-top:1px solid var(--glass-edge);
  border-bottom:1px solid var(--glass-edge);
}
.entry__facts div{ display:grid; gap:6px; }
.entry__facts strong{ font:300 clamp(1.15rem,1.8vw,1.55rem)/1 var(--serif); color:var(--ink); }
.entry__facts span{
  font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-on-dark-40);
}

.entry__enter{
  width:100%;
  display:flex; align-items:center; justify-content:center; gap:14px;
  padding:19px 26px;
  background:var(--sand); color:#0A1411;
  border:1px solid var(--sand);
  font-size:var(--t-micro); letter-spacing:.24em; text-transform:uppercase; font-weight:600;
  cursor:pointer;
  transition:background-color .35s var(--ease), transform .35s var(--ease), letter-spacing .45s var(--ease);
}
.entry__enter:hover{ background:#F3EAD8; letter-spacing:.3em; }
.entry__enter:active{ transform:scale(.985); }

/* ---- Foot: rail + hint ------------------------------------- */
.entry__foot{
  justify-self:center;
  display:grid; justify-items:center; gap:14px;
}
.entry__rail{ display:flex; align-items:center; gap:10px; }
.entry__rail i{
  width:34px; height:2px; background:var(--glass-edge-2);
  display:block; position:relative; overflow:hidden;
}
.entry__rail i::after{
  content:""; position:absolute; inset:0; background:var(--sand);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .55s var(--ease);
}
.entry__rail i.is-on::after{ transform:none; }

.entry__hint{
  display:flex; align-items:center; gap:10px;
  font-size:9px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-on-dark-40);
  transition:opacity .5s var(--ease);
}
.entry__hint.is-off{ opacity:0; }
.entry__hint::after{
  content:""; width:1px; height:22px; background:var(--glass-edge-2);
  animation:entry-drip 2.1s var(--ease) infinite;
}
@keyframes entry-drip{
  0%{ transform:scaleY(0); transform-origin:50% 0; }
  45%{ transform:scaleY(1); transform-origin:50% 0; }
  46%{ transform:scaleY(1); transform-origin:50% 100%; }
  100%{ transform:scaleY(0); transform-origin:50% 100%; }
}

.entry__skip{
  position:absolute; right:var(--gutter); top:clamp(20px,4vh,44px);
  font-size:9px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-on-dark-40);
  padding:8px 0;
  transition:color .3s var(--ease);
  pointer-events:auto;
}
.entry__skip:hover{ color:var(--ink); }
.entry.is-final .entry__skip{ opacity:0; pointer-events:none; }

/* ---- Launch ------------------------------------------------ */
.entry.is-launching{ --entry-veil:.55; }
.entry.is-launching .entry__panels,
.entry.is-launching .entry__foot,
.entry.is-launching .entry__mark{
  opacity:0; transform:translateY(-14px);
  transition:opacity .45s var(--ease), transform .7s var(--ease);
}
.entry.is-launching .entry__gate{
  opacity:0; transform:scale(1.06) translateY(-10px);
  transition:opacity .4s var(--ease), transform .8s var(--ease);
}
.entry.is-open{
  opacity:0; pointer-events:none;
  transition:opacity .75s var(--ease);
}

/* ---- Responsive -------------------------------------------- */
@media (max-width:768px){
  .entry__stage{ padding:clamp(16px,3vh,28px) var(--gutter); }
  .entry__facts{ grid-template-columns:1fr; gap:14px; }
  .entry__facts div{
    display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  }
  .entry__skip{ top:auto; bottom:clamp(16px,3vh,28px); right:var(--gutter); }
  .entry__card{ padding:24px 20px; }
}

@media (prefers-reduced-motion: reduce){
  .entry__hint::after{ animation:none; }
  .entry__panel,.entry__gate{ transition:opacity .01s; transform:none !important; }
}