/* emb3r — the scroll-driven home page.

   The brief was "modern, almost like Apple's site, but keep emb3r's design
   language." Those pull against each other only if you read Apple as a colour
   scheme. It is not: what that site actually does is pacing. One claim per
   viewport, type at a size that would be rude anywhere else, the product as
   the hero rather than a screenshot in a card, and the scroll position driving
   the story instead of just moving past it.

   None of that requires white. So the palette here is untouched - the same
   ember on the same near-black, the same monospace, the same scanlines. What
   changes is scale, air, and what the scroll does.

   The old home page put six things in the first viewport: the wordmark, a
   flame, a tagline, a subtitle, an animated face, a caption and a button. This
   holds one.

   Loaded after style.css, so it can lean on the tokens already defined there
   and override the handful of layout rules it needs to. */

/* ---------- type scale -------------------------------------------------
   Everything on the old page sat between 12px and 21px, so nothing could be
   emphatic. These are the only sizes on the page now, and the gap between
   them is the hierarchy. Monospace at poster scale is unusual and specific -
   a second family would have been the safe choice and would have broken the
   terminal the whole site is built on. */
:root{
  --step-claim: clamp(34px, 6.4vw, 86px);
  --step-section: clamp(26px, 4vw, 52px);
  --step-lead: clamp(17px, 1.9vw, 22px);
  --step-body: 16px;
  --step-note: 13px;

  /* one viewport of air between ideas, floored so short windows still breathe */
  --air: clamp(96px, 15vh, 190px);
}

/* ---------- layout ------------------------------------------------------
   The old .wrap capped everything at 880px, which is a readable measure for
   prose and a cage for anything meant to feel large. Prose keeps the measure;
   the page itself does not. */
.stage{
  max-width:1240px;
  margin:0 auto;
  padding:0 clamp(20px, 5vw, 56px);
}
.stage .measure{ max-width:62ch; }

.act{
  padding:var(--air) 0;
  border-bottom:1px solid var(--line);
}
.act:last-of-type{ border-bottom:0; }

/* ---------- the hero ----------------------------------------------------
   This was pinned for three viewports and driven by the scroll position: you
   had to scroll 340vh to watch five letters light. That was the wrong call.

   The application does not make you scroll to boot it. It boots when you open
   it, and the loading screen plays once while the model loads. Playing the
   same sequence on page load is not a retreat from the idea - it is the idea,
   done the way the product actually does it, and it costs the reader nothing.

   So the hero is one screen, the fire lights itself, and scrolling is for
   reading the rest of the page. */
.boot{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(18px, 3vh, 34px);
  text-align:center;
  padding:clamp(80px, 12vh, 140px) 0 clamp(40px, 8vh, 90px);
  position:relative;
}

.boot__mark{
  display:inline-block;
  text-align:left;
  white-space:pre;
  font-size:clamp(6px, 1.55vw, 15px);
  line-height:1.1;
  color:var(--ash);
}

/* Each letter is its own <pre> so the fire can arrive one at a time. Unlit
   letters are ash: cold, present, waiting - the same idea as the application's
   loading screen, which lights torches as the model loads. */
.boot__letters{ display:flex; gap:clamp(4px, .9vw, 12px); }
.boot__letter{
  margin:0;
  color:var(--ash);
  /* the catch is quick, the settle is slower - fire does not ease evenly */
  transition:color .32s cubic-bezier(.2,.7,.3,1),
             text-shadow .5s cubic-bezier(.2,.7,.3,1),
             transform .5s cubic-bezier(.2,.7,.3,1);
}
.boot__letter.lit{
  color:var(--ember);
  text-shadow:0 0 18px rgba(255,107,26,.5), 0 0 44px rgba(255,107,26,.22);
}
/* the letter currently catching flares and settles back, so the eye is drawn
   along the word rather than to all of it at once */
.boot__letter.hot{
  color:var(--ember-hot);
  text-shadow:0 0 26px rgba(255,179,71,.7), 0 0 70px rgba(255,107,26,.36);
  transform:translateY(-2px);
}

.boot__claim{
  font-size:var(--step-claim);
  line-height:1.04;
  letter-spacing:-.02em;
  font-weight:700;
  max-width:16ch;
  color:var(--fg);
}
.boot__claim em{ font-style:normal; color:var(--ember-hot); }

.boot__sub{
  font-size:var(--step-lead);
  color:var(--dim);
  max-width:46ch;
}

.boot__state{
  font-size:var(--step-note);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ember);
  min-height:1.4em;
}

/* The hero's own copy arrives after the fire, in the order it is read. Held
   back by JS rather than by a CSS delay so it cannot start before the mark is
   built. */
.boot .lag{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),
             transform .6s cubic-bezier(.22,.61,.36,1);
}
.boot.done .lag{ opacity:1; transform:none; }
.boot.done .lag[data-lag="1"]{ transition-delay:.10s; }
.boot.done .lag[data-lag="2"]{ transition-delay:.20s; }

/* the way down, once there is a reason to go */
.boot__more{
  position:absolute;
  bottom:clamp(16px, 4vh, 40px);
  font-size:var(--step-note);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ash);
  text-decoration:none;
  opacity:0;
  transition:opacity .5s ease .5s, color .2s ease;
}
.boot.done .boot__more{ opacity:1; }
.boot__more:hover{ color:var(--ember); }
.boot__more span{
  display:block;
  margin-top:6px;
  animation:nudge 2.4s ease-in-out infinite;
}
@keyframes nudge{
  0%,100%{ transform:translateY(0); opacity:.55 }
  50%{ transform:translateY(4px); opacity:1 }
}

/* ---------- sections ----------------------------------------------------- */
.act__kicker{
  font-size:var(--step-note);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ember);
  margin-bottom:clamp(14px, 2vh, 24px);
}
.act__kicker::before{ content:"// "; }

/* style.css styles a bare h2 as a small orange uppercase label with a "// "
   pseudo-element - which is right for the section labels it was written for
   and wrong for a claim set at 52px. A class beats an element selector only
   for the properties the class actually declares, so the three this rule was
   silent about came straight through: the claim rendered uppercase, orange,
   and prefixed with slashes. Each is turned off by name rather than with
   !important, so the original h2 rule still works everywhere it is used. */
.act__claim{
  font-size:var(--step-section);
  line-height:1.1;
  letter-spacing:-.01em;
  font-weight:700;
  max-width:20ch;
  color:var(--fg);
  text-transform:none;
}
.act__claim::before{ content:none; }
.act__claim em{ font-style:normal; color:var(--ember-hot); }

.act__lead{
  margin-top:clamp(16px, 2.4vh, 28px);
  font-size:var(--step-lead);
  color:var(--dim);
  max-width:56ch;
}

/* ---------- reveal ------------------------------------------------------
   Deliberately small. A page where everything slides in from somewhere is a
   page that announces it was generated; 14px and a fade is enough to say
   "this arrived" without performing. */
.rise{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .55s cubic-bezier(.22,.61,.36,1),
             transform .55s cubic-bezier(.22,.61,.36,1);
}
.rise.in{ opacity:1; transform:none; }
/* children stagger by their position, so a group arrives as a group */
.rise[data-i="1"]{ transition-delay:.07s; }
.rise[data-i="2"]{ transition-delay:.14s; }
.rise[data-i="3"]{ transition-delay:.21s; }

/* ---------- the three claims ------------------------------------------- */
.claims{
  display:grid;
  gap:clamp(28px, 4vw, 56px);
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  margin-top:clamp(40px, 6vh, 76px);
}
.claim__n{
  font-size:var(--step-note);
  color:var(--ash);
  letter-spacing:.2em;
}
.claim h3{
  margin-top:10px;
  font-size:calc(var(--step-body) * 1.25);
  font-weight:700;
  color:var(--fg);
  text-transform:none;
}
.claim h3::before{ content:none; }
.claim p{
  margin-top:10px;
  color:var(--dim);
  font-size:var(--step-body);
}

/* ---------- closing ------------------------------------------------------ */
.close{ text-align:center; }
.close .btn{ margin-top:clamp(24px, 4vh, 44px); }

/* ---------- quality floor ------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  /* the sequence still tells its story, it just does not play: every letter
     is lit from the start and nothing is waiting on a timer */
  .boot__letter{ color:var(--ember); transition:none; }
  .boot .lag{ opacity:1; transform:none; transition:none; }
  .rise{ opacity:1; transform:none; transition:none; }
  .boot__more span{ animation:none; }
}

@media (max-width:640px){
  .boot__claim{ max-width:14ch; }
}