/* =====================================================================
   intro.css — the "Found & Chosen" title sequence, lifted out of the
   live index.html so it can be worked on in isolation.

   Sequence (see intro.js for the clock):
     1. paper background, "Found & Chosen." stacked huge, words fade in
     2. FLIP the words down to a single small line
     3. background turns to ink, the daud wordmark pops in
     4. wordmark + line leave, the globe takes the screen
   ===================================================================== */

:root{
  --ink:#0A0A0A; --ink-2:#141414;
  --paper:#F4F3F1;
  --hi:#F4F3F1;
  --mid:rgba(244,243,241,0.58);
  --low:rgba(244,243,241,0.34);
  --line:rgba(244,243,241,0.12);
  --line-2:rgba(244,243,241,0.22);
  --accent:oklch(0.64 0.21 27);
  --ease:cubic-bezier(.2,.9,.3,1);
  --edge: max(30px, 5vw, calc((100% - 1600px) / 2));
}

*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
/* Same link reset as site/index.html. It was dropped when this file was
   extracted, because the title card on its own has no links — the header and
   the takeover brought them back, complete with default underlines. */
a{ color:var(--accent); text-decoration:none; }
a:hover{ color:var(--hi); }
html,body{ height:100%; }
body{
  background:var(--ink); color:var(--hi);
  font-family:'Manrope',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;               /* the stage is exactly one screen */
}

/* ------------------------------------------------------------------
   stage
   ------------------------------------------------------------------ */
.stage{
  position:relative; height:100vh; height:100dvh; width:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:0 var(--edge);
  background:var(--ink);
  transition:background-color 1s var(--ease);
}
.stage.light{ background:var(--paper); }

/* ------------------------------------------------------------------
   wordmark
   ------------------------------------------------------------------ */
.logo{
  width:min(56vw,240px); height:auto; display:block; color:var(--hi);
  opacity:0; position:relative; z-index:3;
  transition:opacity .6s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
}
.logo.in{ opacity:1; animation:logopop .32s var(--ease); }
@keyframes logopop{ from{ transform:scale(0.8); } }

/* step 4 — the wordmark leaves: lifts, blurs out, hands the screen over */
.logo.out{ opacity:0; transform:scale(1.14); filter:blur(7px); animation:none; }

/* ------------------------------------------------------------------
   tagline
   ------------------------------------------------------------------ */
.tag{
  margin-top:26px; display:flex; align-items:baseline; gap:11px;
  font-weight:300; font-size:21px; letter-spacing:-0.01em; color:var(--hi);
  position:relative; z-index:3;
  transition:opacity .6s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
}
.tag b{ font-weight:600; }
.tag .amp{ color:var(--accent); }
.tag .w{ opacity:0; transition:opacity .9s ease; }
.tag .w.on{ opacity:1; }

/* step 1 — the huge left-aligned stack that owns the whole screen */
.tag.stacked{
  position:absolute; inset:0; margin:0; z-index:5;
  flex-direction:column; align-items:flex-start; justify-content:center;
  padding:0 var(--edge); gap:0; font-size:88px; line-height:1.04;
}
.stage.light .tag{ color:var(--ink); }

.tag.out{ opacity:0; transform:scale(1.14); filter:blur(7px); }

/* ------------------------------------------------------------------
   nav pills
   Positioned entirely from JS transforms — the layer itself never lays
   anything out, so moving a pill costs no reflow. Opacity is CSS's job,
   not the frame loop's: each pill fades itself in on a stagger and then
   stays put at full strength.
   ------------------------------------------------------------------ */
.orbit{ position:fixed; inset:0; z-index:2; pointer-events:none; }

.orb{
  position:absolute; top:0; left:0;
  display:flex; align-items:center; gap:10px;
  white-space:nowrap; text-decoration:none;
  padding:13px 22px;
  border-radius:999px;
  /* Same glass as the v2 pill header: it genuinely sits OVER something, which
     is the case that rule allows. The 0.72 ground is doing real work here —
     it keeps the globe's bloom and limb glow from washing the pill out, so
     the light reads on the earth and not on the navigation. */
  background:rgba(17,17,17,0.72);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--line-2);
  box-shadow:inset 0 1px 0 rgba(244,243,241,0.10), 0 10px 30px rgba(0,0,0,0.35);
  color:var(--hi);
  font-family:'Fjalla One',sans-serif; text-transform:uppercase; font-weight:400;
  font-size:13px; letter-spacing:.16em;
  opacity:0; pointer-events:none; transform-origin:50% 50%;
  will-change:transform, opacity;
  transition:opacity .7s var(--ease), background-color .25s var(--ease),
             border-color .25s var(--ease), color .25s var(--ease);
}
/* added one at a time by labels.js once the globe is up */
.orb.in{ opacity:1; pointer-events:auto; }
.orb i{
  width:6px; height:6px; border-radius:50%; flex:none;
  background:var(--accent);
  transition:background-color .25s var(--ease), transform .3s var(--ease);
}
/* hover is a vermilion pill with white type: the pills are buttons, and a
   vermilion ground carries white. One element at a time. */
.orb:hover{ background:var(--accent); border-color:var(--accent); color:#FFFFFF; }
.orb:hover i{ background:var(--ink); transform:scale(1.25); }
.orb:focus-visible{ outline:1px solid var(--accent); outline-offset:4px; }

/* ------------------------------------------------------------------
   responsive — sizing only, the sequence is identical everywhere
   ------------------------------------------------------------------ */
/* Phones: the pills have to be small enough that two still sit side by side
   on the globe's shoulders, otherwise labels.js has to drop them into a
   centred column — which is the one arrangement that reads as a mistake. */
@media (max-width:520px){
  .orb{ font-size:10.5px; letter-spacing:.12em; padding:9px 15px; gap:8px; }
  .orb i{ width:5px; height:5px; }
}

@media (min-width:700px){
  .orb{ font-size:14px; padding:14px 26px; }
  .logo{ width:min(44vw,300px); }
  .tag{ font-size:26px; }
  .tag.stacked{ font-size:108px; }
}
@media (min-width:1024px){
  .logo{ width:min(34vw,460px); }
  .tag{ font-size:32px; }
  .tag.stacked{ font-size:150px; }
}

@media (prefers-reduced-motion: reduce){
  .stage{ transition:none; }
  .orb{ transition:none; }
  .logo, .tag, .tag .w{ transition:none !important; }
  .logo.in{ animation:none; }
}