/* =====================================================================
   grainy — shared styles for every page
   Header/logo, carrots, headline letter effect, grain, page transitions.
   Change something here and it changes on all three pages.
   ===================================================================== */

:root{
  --bg:#0b0d0e;
  --surface:#121517;
  --surface-2:#171b1d;
  --border:#22282a;
  --line:#2b3234;
  --text:#ebe9e3;
  --text-dim:#8a8f91;
  --text-faint:#5c6264;
  --accent:#ff8000;
  --font:'Space Grotesk','Helvetica Neue',Arial,sans-serif;
}

*{ box-sizing:border-box; }
html,body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}

/* smooth fade between pages in browsers that support it; others just load normally */
@view-transition{ navigation:auto; }
::view-transition-old(root), ::view-transition-new(root){ animation-duration:.35s; }

/* ---------- film grain on the page chrome (never on covers or exports) ---------- */
.grain{
  position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.06;
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- header: identical on every page ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:5;
  padding-top:calc(clamp(14px, 3vmin, 40px) + env(safe-area-inset-top,0px));
  padding-bottom:clamp(10px, 1.6vmin, 20px);
  padding-left:calc(clamp(16px, 3.4vmin, 56px) + env(safe-area-inset-left,0px));
  padding-right:calc(clamp(16px, 3.4vmin, 56px) + env(safe-area-inset-right,0px));
  transition:background .25s ease, backdrop-filter .25s ease;
}
/* scrolling pages get a frosted header once content passes under it */
.site-header.scrolled{
  background:rgba(11,13,14,.72);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.brand{
  display:inline-flex; align-items:center; gap:clamp(12px, 2.16vmin, 26px);
  color:var(--text); text-decoration:none;
  view-transition-name:brand;            /* logo stays put while pages change */
}
.brand .emoji{
  font-size:clamp(24px, 4.08vmin, 53px); line-height:1;
  cursor:pointer; display:inline-block; transform-origin:50% 85%;
  -webkit-tap-highlight-color:transparent;
}
.brand .emoji:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:6px; }
.brand .emoji.toss{ animation:toss .38s cubic-bezier(.3,1.6,.5,1); }
@keyframes toss{ 0%{transform:scale(1)} 35%{transform:scale(.84) rotate(-8deg)} 100%{transform:scale(1) rotate(0)} }
.brand .div{ width:1px; height:clamp(22px, 3.6vmin, 46px); background:rgba(235,233,227,.28); }
.brand .name{ font-size:clamp(18px, 2.88vmin, 36px); font-weight:600; letter-spacing:.02em; }

/* ---------- carrots ---------- */
.carrots{ position:fixed; inset:0; z-index:60; pointer-events:none; overflow:hidden; contain:strict; }
.carrot{
  position:absolute; left:0; top:0; line-height:1;
  font-size:clamp(18px, 3vmin, 40px);
  opacity:0; will-change:transform, opacity;
}

/* ---------- interactive headline letters (add data-interactive to any heading) ---------- */
[data-interactive]{ user-select:none; -webkit-user-select:none; touch-action:none; -webkit-tap-highlight-color:transparent; }
[data-interactive] .word{ display:inline-block; white-space:nowrap; }
[data-interactive] .ch{
  display:inline-block; will-change:transform;
  transition:color .35s ease, transform .22s cubic-bezier(.2,.8,.3,1);
  transform:translateY(calc(var(--lift,0) * -0.22em)) scale(calc(1 + var(--lift,0) * .12));
}
[data-interactive] .ch.hot{ color:var(--accent); }
[data-interactive].wave .ch{ animation:wave .9s cubic-bezier(.3,.7,.3,1) both; animation-delay:calc(var(--i) * 28ms); }
@keyframes wave{
  0%  { transform:translateY(0) scale(1); color:var(--text); }
  35% { transform:translateY(-.26em) scale(1.12); color:var(--accent); }
  100%{ transform:translateY(0) scale(1); color:var(--text); }
}

@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root), ::view-transition-new(root){ animation:none; }
  [data-interactive] .ch{ transform:none !important; }
  [data-interactive].wave .ch{ animation:none; }
}