/* =====================================================================
   HOOT — Shared Design System
   Used by all pages: index, features, business, partners, media,
   community, about, trust
   ===================================================================== */

:root {
  /* Nubien-dark base: near-black with the tiniest indigo undertone */
  --bg-0: #060608;
  --bg-1: #0b0b10;
  --bg-2: #111118;
  --bg-3: #181821;

  --v-200: #DDD6FE;
  --v-300: #C4B5FD;
  --v-400: #A78BFA;
  --v-500: #8B5CF6;
  --v-600: #7C3AED;
  --v-700: #6D28D9;

  --indigo: #6366F1;
  --blue:   #4F8FF7;
  --cyan:   #67E8F9;
  --pink:   #D946EF;
  --pink-l: #F0ABFC;
  --rose:   #FB7185;

  --text-0: #F6F3FF;
  --text-1: #D7D2EC;
  --text-2: #B0AAC9;
  --text-3: #7A7398;
  --text-4: #4F4866;

  --line-1: rgba(255,255,255,0.06);
  --line-2: rgba(255,255,255,0.10);
  --line-v: rgba(139, 92, 246, 0.35);
  --line-v-strong: rgba(139, 92, 246, 0.55);

  --glow-1: 0 0 60px rgba(139, 92, 246, 0.35);
  --glow-2: 0 0 100px rgba(139, 92, 246, 0.55);
  --glow-pink: 0 0 80px rgba(217, 70, 239, 0.35);

  /* Accent — Nubien-style deep violet for primary CTAs.
     --accent-1 is the singular brand purple at full strength;
     --accent-1-glow is the soft halo color used in shadows. */
  --accent-1: #8B5CF6;
  --accent-1-glow: rgba(79,26,214,0.45);
  --accent-2: #D946EF;
  --accent-3: #4F8FF7;
  --accent-intensity: 1;

  --grad-v:   linear-gradient(135deg, var(--accent-1) 0%, #6366F1 100%);
  --grad-iri: linear-gradient(135deg, var(--accent-1) 0%, var(--accent-3) 45%, var(--accent-2) 100%);
  --grad-hot: linear-gradient(135deg, var(--accent-2) 0%, var(--accent-1) 50%, var(--accent-3) 100%);

  --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 32px; --r-2xl: 40px; --r-pill: 999px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --container: 1320px;

  --pad-sec: clamp(80px, 10vw, 160px);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}

/* =====================================================================
   VIEWPORT BOTTOM BLUR — fixed band at the bottom of the screen.
   Anything sitting under this band gets a soft frosted blur that fades
   out as content scrolls upward through it. Stacked two layers with
   different blur radii + offset masks for a smoother gradient (single
   backdrop-filter + mask gives a hard cutoff in Safari/Firefox). */
.viewport-blur{
  position:fixed;
  left:0;right:0;bottom:0;
  height:clamp(120px,14vh,200px);
  pointer-events:none;
  z-index:40;
  opacity:1;
  transition:opacity 280ms var(--ease, ease);
}
/* Toggled by JS when the footer enters the blur band — so the user can
   read the last part of the footer without it being frosted over. */
.viewport-blur--hidden{ opacity:0; }
.viewport-blur::before,
.viewport-blur::after{
  content:"";
  position:absolute;
  inset:0;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
/* Bottom half — stronger blur, masked to lower 60% */
.viewport-blur::before{
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  mask-image:linear-gradient(to top, #000 0%, #000 30%, transparent 80%);
  -webkit-mask-image:linear-gradient(to top, #000 0%, #000 30%, transparent 80%);
}
/* Upper half — lighter blur, masked higher so the transition tapers */
.viewport-blur::after{
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  mask-image:linear-gradient(to top, #000 0%, #000 60%, transparent 100%);
  -webkit-mask-image:linear-gradient(to top, #000 0%, #000 60%, transparent 100%);
}
/* Mobile — keep the band smaller so it doesn't obscure too much */
@media (max-width:680px){
  .viewport-blur{ height:clamp(80px,10vh,140px); }
}
body{
  font-family:'DM Sans',system-ui,-apple-system,sans-serif;
  background:var(--bg-0);
  color:var(--text-1);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  line-height:1.5;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4{font-family:'DM Sans',system-ui,sans-serif;font-weight:700;letter-spacing:-0.025em;color:var(--text-0);margin:0;line-height:1.02}
h1{font-size:clamp(48px,7vw,116px);letter-spacing:-0.045em;font-weight:900;line-height:1.1}
h2{font-size:clamp(36px,4.8vw,72px);letter-spacing:-0.035em;font-weight:900;line-height:1.1}
h3{font-size:clamp(22px,2vw,28px);letter-spacing:-0.02em;font-weight:700}
h4{font-size:18px;letter-spacing:-0.01em;font-weight:700}
p{margin:0;text-wrap:pretty}

.container{max-width:var(--container);margin:0 auto;padding:0 28px}
@media (max-width:600px){.container{padding:0 18px}}
@media (max-width:380px){.container{padding:0 14px}}
.eyebrow{font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;letter-spacing:0.24em;text-transform:uppercase;color:var(--v-400)}
.muted{color:var(--text-2)}
.grad-text{background:var(--grad-iri);-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-text-hot{background:var(--grad-hot);-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-text-v{background:var(--grad-v);-webkit-background-clip:text;background-clip:text;color:transparent}

/* live pulse dot */
.pulse{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--rose);box-shadow:0 0 0 0 rgba(251,113,133,0.7);animation:pulse 1.8s var(--ease) infinite;vertical-align:middle;margin-right:8px;flex:none}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(251,113,133,0.7)}
  70%{box-shadow:0 0 0 14px rgba(251,113,133,0)}
  100%{box-shadow:0 0 0 0 rgba(251,113,133,0)}
}
.pulse--v{background:var(--accent-1);box-shadow:0 0 0 0 rgba(139,92,246,0.7);animation:pulse-v 1.8s var(--ease) infinite}
@keyframes pulse-v{
  0%{box-shadow:0 0 0 0 rgba(139,92,246,0.7)}
  70%{box-shadow:0 0 0 14px rgba(139,92,246,0)}
  100%{box-shadow:0 0 0 0 rgba(139,92,246,0)}
}

/* =====================================================================
   Buttons — Nubien style (30px pill, hairline border, sheen-on-hover)
   ===================================================================== */
.btn{
  position:relative;
  isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 20px;
  border-radius:10px;
  font-family:'DM Sans',sans-serif;
  font-weight:500;font-size:15px;letter-spacing:-0.01em;
  transition:all 220ms var(--ease);
  white-space:nowrap;line-height:1;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.06);
}
/* Sheen overlay — white gradient top→bottom that appears on hover */
.btn::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0) 65%);
  opacity:0;transition:opacity 220ms var(--ease);
  z-index:1;
}
.btn:hover::after{opacity:1}
.btn>*{position:relative;z-index:2}

/* Primary — Nubien-style vertical gradient: bright violet top → deep purple bottom */
.btn--p{
  background:linear-gradient(180deg, #8B6BFF 0%, #6D3DFF 45%, #4F1AD6 100%);
  color:#fff;
  border-color:rgba(255,255,255,0.16);
  box-shadow:
    0 8px 28px rgba(79,26,214,0.45),
    inset 0 1px 0 rgba(255,255,255,0.30),
    inset 0 -1px 0 rgba(0,0,0,0.18);
}
.btn--p:hover{
  transform:translateY(-1px);
  background:linear-gradient(180deg, #9B7CFF 0%, #7C50FF 45%, #5A23E6 100%);
  box-shadow:
    0 12px 36px rgba(79,26,214,0.65),
    inset 0 1px 0 rgba(255,255,255,0.36),
    inset 0 -1px 0 rgba(0,0,0,0.20);
}

/* Secondary — dark grey card with hairline */
.btn--g{
  background:rgb(19,19,19);
  color:var(--text-0);
  border-color:rgba(255,255,255,0.08);
  backdrop-filter:blur(10px);
}
.btn--g:hover{background:rgb(28,28,28);border-color:rgba(255,255,255,0.15);transform:translateY(-1px)}

/* Outlined */
.btn--o{background:transparent;color:var(--text-0);border-color:rgba(79,26,214,0.55)}
.btn--o:hover{background:rgba(79,26,214,0.10);border-color:var(--accent-1)}

/* Form submit status + success confirmation (Web3Forms handler) */
.form-status{display:block;width:100%;margin-top:10px;font-size:13.5px;color:var(--text-3);letter-spacing:-0.01em}
.form-status.is-error{color:#FB7185}
.form-success{display:inline-flex;align-items:center;gap:10px;color:#4ade80;font-family:'DM Sans',sans-serif;font-weight:600;font-size:15px;letter-spacing:-0.01em}
.form-success svg{width:20px;height:20px;flex:none}

/* Legal documents (privacy / terms) — readable prose on the dark theme */
.legal-page{padding:clamp(104px,14vw,160px) 0 clamp(64px,8vw,100px)}
.legal-doc{max-width:760px;margin:0 auto;color:rgba(255,255,255,0.74);font-size:16px;line-height:1.75;letter-spacing:-0.005em}
.legal-doc h1{font-family:'DM Sans',sans-serif;font-weight:900;letter-spacing:-0.03em;font-size:clamp(34px,6vw,52px);line-height:1.08;color:#fff;margin:0 0 6px}
.legal-doc h1 + p{color:var(--text-3);font-size:14px;margin:0 0 36px}
.legal-doc h2{font-family:'DM Sans',sans-serif;font-weight:700;letter-spacing:-0.02em;font-size:clamp(20px,3vw,24px);color:#fff;margin:40px 0 12px}
.legal-doc h3{font-family:'DM Sans',sans-serif;font-weight:700;font-size:18px;color:#fff;margin:28px 0 10px}
.legal-doc p{margin:0 0 16px}
.legal-doc ul{margin:0 0 18px;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.legal-doc li{line-height:1.6}
.legal-doc strong{color:#fff;font-weight:600}
.legal-doc a{color:var(--accent-1);text-decoration:underline;text-underline-offset:2px}
.legal-doc a:hover{color:#fff}
.legal-doc hr{border:0;border-top:1px solid var(--line-1);margin:32px 0}

/* Ghost (text-only) */
.btn--ghost{background:transparent;color:var(--text-2);border-color:transparent}
.btn--ghost::after{display:none}
.btn--ghost:hover{color:#0099FF}

/* Ghost variant — purple-on-hover (matches brand). Used by Explore for Business. */
.btn--ghost-purple{color:var(--text-2)}
.btn--ghost-purple:hover{color:#A78BFA}
.btn--ghost-purple:hover svg{color:#A78BFA}

.btn--lg{padding:17px 30px;font-size:15px}
.btn--xs{padding:9px 16px;font-size:13px;font-weight:600}

/* chip */
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--r-pill);background:rgba(139,92,246,0.10);border:1px solid var(--line-v);font-size:12px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--v-300)}

/* sections */
section{position:relative;padding:var(--pad-sec) 0}
.sec-head{max-width:820px;margin:0 auto 64px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}
/* Tighter vertical rhythm on phones so sections aren't over-tall */
@media (max-width:600px){
  :root{--pad-sec:clamp(48px,9vw,80px)}
  .sec-head{margin-bottom:36px}
}
.sec-head .eyebrow{display:inline-block;margin-bottom:8px}
/* Nubien services-spec H2 — two stacked lines, white + muted */
/* =====================================================================
   PAGE HERO H1 — match the home hero (.hero h1 in home.css) exactly so
   every interior page's hero feels like a natural extension of the
   home page. Targets any section ending in "-hero": .a-hero, .f-hero,
   .b-hero, .p-hero, .m-hero, .c-hero, .t-hero, etc. Higher specificity
   (section[class$="-hero"] h1 = 0,1,2) overrides the per-page rules
   (.X-hero h1 = 0,1,1) so individual page <style> blocks don't fight.
   ===================================================================== */
/* Interior hero blocks LEFT-aligned (different from home which centers).
   Force the whole hero column left so pill, H1, and subtext stack flush
   to the left edge of the container regardless of any per-page inline
   text-align:center the agents/I previously added. */
section[class$="-hero"]{ text-align:left; }
section[class$="-hero"] .sec-pill{ margin-left:0; margin-right:auto; }
section[class$="-hero"] p{ margin-left:0; margin-right:0; max-width:680px; }

section[class$="-hero"] h1{
  font-family:'DM Sans',sans-serif;
  font-size:clamp(48px, 6vw, 86px);
  line-height:1.04;
  letter-spacing:-0.045em;
  font-weight:400;              /* REGULAR — same as home hero */
  margin:0 0 20px;              /* flush left, no auto-centering */
  padding:0.08em 0;
  overflow:visible;
  text-align:left;
}
section[class$="-hero"] h1 .l1,
section[class$="-hero"] h1 .l2{
  display:block;
  text-align:left;
  font-weight:400;
  padding:0.02em 0;
  overflow:visible;
  line-height:1.06;
}
/* .l1 — soft white horizontal fade (same as home hero) */
section[class$="-hero"] h1 .l1{
  background:linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,0.55) 380%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
/* .l2 — animated purple↔white shimmer (same as home hero) */
section[class$="-hero"] h1 .l2{
  background:linear-gradient(
    90deg,
    #8B6BFF 0%,
    #ffffff 25%,
    #8B6BFF 50%,
    #ffffff 75%,
    #8B6BFF 100%
  );
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  animation:l2Shimmer 4s linear infinite;
  /* Descender safety for "g" / "p" / "y" */
  line-height:1.18;
  padding-bottom:0.08em;
}
@media (prefers-reduced-motion: reduce){
  section[class$="-hero"] h1 .l2{ animation:none; background-position:50% center; }
}
@media (max-width:1200px){
  section[class$="-hero"] h1{ font-size:clamp(48px, 6.5vw, 66px); line-height:1.06; letter-spacing:-0.045em; }
}
@media (max-width:810px){
  section[class$="-hero"] h1{ font-size:56px; line-height:1.0; letter-spacing:-0.06em; }
}

.sec-head h2{
  font-family:'DM Sans',sans-serif;
  font-weight:400;
  font-size:clamp(34px, 4vw, 54px);
  line-height:1.05;
  letter-spacing:-0.038em;
  margin:0;
}
.sec-head h2 .l1{display:block;color:#fff}
/* Muted second line — animated shimmer.
   High-contrast purple ↔ white gradient + repeating tile guarantees the
   text is always rendered with at least the medium-purple base color,
   while the bright white bands sweep through for the shimmer effect. */
.sec-head h2 .l2{
  display:block;
  line-height:1.18;
  padding-bottom:0.08em;
  background:linear-gradient(
    90deg,
    #8B6BFF 0%,
    #ffffff 25%,
    #8B6BFF 50%,
    #ffffff 75%,
    #8B6BFF 100%
  );
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  animation:l2Shimmer 4s linear infinite;
}
/* Shimmer travels LEFT → RIGHT: gradient image slides leftward relative
   to the element, which makes the bright bands appear to move right. */
@keyframes l2Shimmer{
  0%  {background-position:100% center}
  100%{background-position:0% center}
}
@media (prefers-reduced-motion: reduce){
  .sec-head h2 .l2{animation:none;background-position:50% center}
}

/* Two-tone H2 treatment for sections that DON'T use .sec-head (e.g. the
   HootMe Messaging spotlight, Hoot for Business teaser, and the final
   Join-the-movement CTA). Same Nubien light treatment as .sec-head h2. */
.hm h2,
.biz-teaser h2,
.cta h2{
  font-family:'DM Sans',sans-serif;
  font-weight:400;
  font-size:clamp(34px, 4vw, 56px);
  line-height:1.06;
  letter-spacing:-0.038em;
}
.hm h2 .l1,
.biz-teaser h2 .l1,
.cta h2 .l1{display:block;color:#fff}
/* Same animated shimmer treatment as .sec-head h2 .l2 — purple ↔ white
   high-contrast gradient so text is always visibly rendered, with the
   bright white bands sweeping through for shimmer. */
.hm h2 .l2,
.biz-teaser h2 .l2,
.cta h2 .l2{
  display:block;
  line-height:1.18;
  padding-bottom:0.08em;
  background:linear-gradient(
    90deg,
    #8B6BFF 0%,
    #ffffff 25%,
    #8B6BFF 50%,
    #ffffff 75%,
    #8B6BFF 100%
  );
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  animation:l2Shimmer 4s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  .hm h2 .l2,
  .biz-teaser h2 .l2,
  .cta h2 .l2{animation:none;background-position:50% center}
}
/* CTA section is centered, so center its sec-pill + h2 too.
   The H2 stays on a SINGLE line — .l1 and .l2 sit side-by-side instead
   of stacking, so it reads "Join the Hoot movement." in one row with
   the two-tone color split mid-sentence. */
.cta .sec-pill{margin-bottom:18px}
.cta h2{text-align:center;margin:0 auto 14px}
/* CTA H2 stays on a SINGLE line — both spans are inline so the natural
   whitespace between them in the HTML renders as one word-space. */
.cta h2 .l1{display:inline;color:#fff}
.cta h2 .l2{display:inline}
.sec-head p{
  color:rgba(255,255,255,0.6);
  font-size:16px;line-height:1.625;letter-spacing:-0.012em;
  max-width:580px;margin:0;
}
.sec-head__cta{margin-top:14px}

/* Section eyebrow pill — same two-tone treatment as the hero LIVE chip.
   [purple inner chip] [label text on dark glass outer pill]
   Polish: top-center purple stroke baked into the BORDER (radial gradient
   over background-clip:border-box) + drifting white ember particles. */
.sec-pill{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  display:inline-flex;align-items:center;gap:10px;
  padding:5px 16px 5px 5px;
  border-radius:999px;
  /* Two stacked backgrounds:
     1. Solid dark fill inside the padding-box (the pill body)
     2. Radial gradient inside the border-box → purple at top-center,
        grey on the sides/bottom. With border:1px transparent, only the
        1px border ring shows this gradient, so the purple stroke IS the
        top portion of the border itself — same layer as the grey. */
  background:
    linear-gradient(rgba(20,18,30,0.65), rgba(20,18,30,0.65)) padding-box,
    radial-gradient(ellipse 36% 90% at 50% 0%,
      rgba(139,107,255,0.95) 0%,
      rgba(139,107,255,0.55) 25%,
      rgba(255,255,255,0.18) 55%,
      rgba(255,255,255,0.08) 85%,
      rgba(255,255,255,0.08) 100%
    ) border-box;
  border:1px solid transparent;
  backdrop-filter:saturate(160%) blur(16px);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  font-family:'DM Sans',sans-serif;
  font-size:13px;font-weight:500;letter-spacing:-0.005em;
  color:rgba(255,255,255,0.85);
  box-shadow:0 4px 16px rgba(0,0,0,0.35);
}
/* Pill contents sit above the background-clip border gradient */
.sec-pill > *{ position:relative; z-index:2; }
.sec-pill__chip{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;
  border-radius:999px;
  background:linear-gradient(180deg, #8B6BFF 0%, #6D3DFF 45%, #4F1AD6 100%);
  color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    inset 0 -1px 0 rgba(0,0,0,0.15),
    0 2px 8px rgba(79,26,214,0.45);
}
.sec-pill__chip svg{display:block;width:14px;height:14px}

.glow-line{position:absolute;top:0;left:50%;transform:translateX(-50%);width:55%;height:1px;background:linear-gradient(90deg,transparent,rgba(139,92,246,0.7),transparent)}

/* =====================================================================
   LIGHT RAYS — WebGL volumetric light beams (see initLightRays in
   shared.js). Canvas sits at the top of a section as a living backdrop.
   ===================================================================== */
.light-rays{
  position:absolute;
  top:0;left:0;
  width:100%;
  height:clamp(560px, 42vw, 820px);
  pointer-events:none;
  z-index:0;
  display:block;
  /* CSS fallback: subtle radial wash if WebGL fails / shader doesn't init */
  background:radial-gradient(
    ellipse 60% 100% at 50% 0%,
    rgba(109,61,255,0.28) 0%,
    rgba(79,26,214,0.10) 40%,
    transparent 75%
  );
}
/* Keep section content above the rays */
section > .container,
section > .culture__arc-wrap,
section > .live-fan{position:relative;z-index:2}
@media (max-width:780px){
  .light-rays{height:480px}
}

/* =====================================================================
   HERO LIGHT FX — WebGL canvas with diagonal rays from upper-right
   + twinkling stars. Sits behind hero content but above .hero__arc.
   ===================================================================== */
.hero-light-fx{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:2;
  display:block;
  /* Fallback if WebGL fails — soft diagonal purple wash from upper-right */
  background:radial-gradient(
    ellipse 80% 100% at 100% 0%,
    rgba(109,61,255,0.20) 0%,
    rgba(79,26,214,0.08) 40%,
    transparent 70%
  );
}

/* =====================================================================
   TUBE LIGHT FX — Horizontal glowing bar with downward conical light
   wash. Used above the "How Hoot Works" section header. WebGL shader
   in brand purple, with subtle pulse + dust motes drifting in the beam.
   ===================================================================== */
/* IMPORTANT: no overflow:hidden — it breaks position:sticky on the
   step cards below. Tube-light canvas has a fixed height so it won't
   overflow naturally. Minimal padding-bottom so the next section drags
   into view immediately after Step 4 unpins (sticky range is provided
   by .steps__spacer inside, not by section padding). */
section#how{
  position:relative;
  padding-top:clamp(320px,32vw,500px);
  padding-bottom:0;
}
.tube-light-fx{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  /* Tall enough for the trapezoid cone to fully bloom + fade naturally */
  height:clamp(900px,85vw,1300px);
  pointer-events:none;
  z-index:0;
  display:block;
  /* Fallback wash if WebGL fails — indigo/periwinkle to match the
     ecosystem section's palette (same as the shader colors). */
  background:
    radial-gradient(
      ellipse 60% 75% at 50% 13%,
      rgba(119,102,217,0.28) 0%,
      rgba(46,31,133,0.14) 45%,
      transparent 78%
    );
}
section#how .container{position:relative;z-index:1}

/* Horizontal divider — center-bright, edges faded.
   Matches the divider used under .eco card titles. */
.hr{
  height:1px;margin:0;border:0;
  background:linear-gradient(90deg,
    rgba(255,255,255,0)    0%,
    rgba(255,255,255,0.14) 35%,
    rgba(255,255,255,0.14) 65%,
    rgba(255,255,255,0)    100%);
}

/* ============================================================
   GLOBAL SECTION DIVIDERS — faded-edge shimmer line
   Sections across the site use `border-top/bottom: 1px solid
   var(--line-1)` to separate themselves from neighbors. That
   renders as a flat solid line edge-to-edge. This rule swaps
   the border color for a 90° gradient that fades to transparent
   at both ends and brightens in the center — the same look as
   the divider under the .eco card titles.

   `border-image-slice: 1` discards the middle of the source
   image (we only want the gradient on the edge strips), so a
   1px linear-gradient renders cleanly along the top/bottom edge
   wherever a `border-*-width` is set. `!important` is needed
   because each interior page (community, media, business, about,
   trust, features) defines its own `border-top/bottom: 1px
   solid var(--line-1)` in an inline `<style>` block that loads
   AFTER styles.css and would otherwise override this rule by
   source order.
   ============================================================ */
.hm, .live-section, .biz-teaser, .culture, .trust-strip, .cta,
.scene-section, .c-cta, .c-hero,
.newsroom, .m-hero,
.pricing-sec, .biz-cta,
.story, .careers-sec, .a-hero,
.t-cta, .t-hero,
.f-hero,
.foot__bottom{
  border-image: linear-gradient(90deg,
    rgba(255,255,255,0)    0%,
    rgba(255,255,255,0.14) 35%,
    rgba(255,255,255,0.14) 65%,
    rgba(255,255,255,0)    100%) 1 !important;
}

/* Any inline `<section style="border-top:1px solid var(--line-1)">`
   blocks (e.g. trust.html's #privacy section) — same treatment via
   an attribute selector so the global rule reaches them too. */
section[style*="border-top:1px solid var(--line-1)"],
section[style*="border-bottom:1px solid var(--line-1)"]{
  border-image: linear-gradient(90deg,
    rgba(255,255,255,0)    0%,
    rgba(255,255,255,0.14) 35%,
    rgba(255,255,255,0.14) 65%,
    rgba(255,255,255,0)    100%) 1 !important;
}

/* =====================================================================
   AMBIENT BACKGROUND — Aurora gradient that loops forever
   ===================================================================== */
.aurora{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none}
.aurora::before{
  content:"";position:absolute;inset:-20%;
  background:
    radial-gradient(40% 30% at 20% 30%, rgba(139,92,246,0.18) 0%, transparent 60%),
    radial-gradient(35% 30% at 80% 20%, rgba(217,70,239,0.14) 0%, transparent 60%),
    radial-gradient(40% 35% at 70% 75%, rgba(79,143,247,0.12) 0%, transparent 60%),
    radial-gradient(30% 25% at 30% 80%, rgba(167,139,250,0.14) 0%, transparent 60%);
  filter:blur(60px);
  animation:auroraDrift 32s ease-in-out infinite alternate;
  opacity:calc(var(--accent-intensity) * 0.6);
}
@keyframes auroraDrift{
  0%{transform:translate3d(0,0,0) rotate(0deg) scale(1)}
  33%{transform:translate3d(3%,-2%,0) rotate(8deg) scale(1.1)}
  66%{transform:translate3d(-2%,3%,0) rotate(-6deg) scale(1.05)}
  100%{transform:translate3d(2%,2%,0) rotate(4deg) scale(1.08)}
}
.aurora::after{
  /* particles */
  content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 22%, rgba(255,255,255,0.5) 0%, transparent 60%),
    radial-gradient(2px 2px at 18% 78%, rgba(196,181,253,0.65) 0%, transparent 60%),
    radial-gradient(1.5px 1.5px at 32% 18%, rgba(255,255,255,0.6) 0%, transparent 60%),
    radial-gradient(2px 2px at 48% 64%, rgba(240,171,252,0.5) 0%, transparent 60%),
    radial-gradient(1.5px 1.5px at 60% 30%, rgba(255,255,255,0.55) 0%, transparent 60%),
    radial-gradient(2.5px 2.5px at 72% 82%, rgba(167,139,250,0.55) 0%, transparent 60%),
    radial-gradient(1.5px 1.5px at 85% 24%, rgba(255,255,255,0.55) 0%, transparent 60%),
    radial-gradient(2px 2px at 92% 60%, rgba(79,143,247,0.5) 0%, transparent 60%),
    radial-gradient(1.2px 1.2px at 12% 50%, rgba(255,255,255,0.4) 0%, transparent 60%),
    radial-gradient(1.4px 1.4px at 38% 88%, rgba(255,255,255,0.45) 0%, transparent 60%),
    radial-gradient(1.6px 1.6px at 55% 14%, rgba(255,255,255,0.5) 0%, transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 46%, rgba(255,255,255,0.45) 0%, transparent 60%);
  animation:twinkle 6s linear infinite alternate;
}
@keyframes twinkle{
  0%{opacity:0.4}
  100%{opacity:1}
}

/* Crowd silhouette band — for hero & CTA */
.crowd-band{position:absolute;left:0;right:0;bottom:0;height:30%;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 28px 22px at 5% 88%, #03020a 70%, transparent 71%),
    radial-gradient(ellipse 32px 26px at 11% 92%, #050310 70%, transparent 71%),
    radial-gradient(ellipse 26px 21px at 17% 86%, #03020a 70%, transparent 71%),
    radial-gradient(ellipse 30px 25px at 23% 91%, #06041a 70%, transparent 71%),
    radial-gradient(ellipse 34px 28px at 29% 95%, #050310 70%, transparent 71%),
    radial-gradient(ellipse 28px 22px at 35% 87%, #03020a 70%, transparent 71%),
    radial-gradient(ellipse 30px 25px at 41% 92%, #050310 70%, transparent 71%),
    radial-gradient(ellipse 26px 21px at 47% 88%, #03020a 70%, transparent 71%),
    radial-gradient(ellipse 32px 26px at 53% 93%, #06041a 70%, transparent 71%),
    radial-gradient(ellipse 28px 22px at 59% 86%, #050310 70%, transparent 71%),
    radial-gradient(ellipse 30px 25px at 65% 91%, #03020a 70%, transparent 71%),
    radial-gradient(ellipse 26px 21px at 71% 87%, #050310 70%, transparent 71%),
    radial-gradient(ellipse 34px 28px at 77% 94%, #06041a 70%, transparent 71%),
    radial-gradient(ellipse 28px 22px at 83% 88%, #03020a 70%, transparent 71%),
    radial-gradient(ellipse 30px 25px at 89% 92%, #050310 70%, transparent 71%),
    radial-gradient(ellipse 28px 22px at 95% 87%, #03020a 70%, transparent 71%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.8) 60%, var(--bg-0) 100%);
}
/* hovering phone lights inside crowd band */
.crowd-band::before{
  content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(1.5px 1.5px at 10% 60%, rgba(255,255,255,0.9) 0%, transparent 60%),
    radial-gradient(1.5px 1.5px at 22% 55%, rgba(196,181,253,0.9) 0%, transparent 60%),
    radial-gradient(1.5px 1.5px at 31% 62%, rgba(240,171,252,0.8) 0%, transparent 60%),
    radial-gradient(1.5px 1.5px at 44% 50%, rgba(255,255,255,0.9) 0%, transparent 60%),
    radial-gradient(1.5px 1.5px at 56% 58%, rgba(167,139,250,0.85) 0%, transparent 60%),
    radial-gradient(1.5px 1.5px at 65% 52%, rgba(255,255,255,0.85) 0%, transparent 60%),
    radial-gradient(1.5px 1.5px at 76% 60%, rgba(196,181,253,0.9) 0%, transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 55%, rgba(255,255,255,0.85) 0%, transparent 60%);
  animation:flashlights 2.6s ease-in-out infinite;
}
@keyframes flashlights{
  0%,100%{opacity:.55}
  50%{opacity:1}
}

/* =====================================================================
   NAV — Borderless at top, glassy blur on scroll (Nubien behavior)
   The .nav--scrolled class is toggled by shared.js once the user has
   scrolled past ~20px; until then the nav is fully transparent.
   ===================================================================== */
.nav{
  position:sticky;top:0;z-index:60;
  /* Fixed vertical padding both states so the nav height never jumps. */
  padding:18px 40px;
  pointer-events:none;
  /* Blur is always-on so there's no sudden "filter switching on" flash
     when the user starts scrolling. At the very top, the background is
     a very faint tint so the nav still feels seamless with the dark page;
     on scroll, the tint and border simply deepen. */
  background:rgba(5,3,16,0.25);
  backdrop-filter:saturate(160%) blur(18px);
  -webkit-backdrop-filter:saturate(160%) blur(18px);
  border-bottom:1px solid transparent;
  transition:
    background 520ms cubic-bezier(0.22,1,0.36,1),
    border-color 520ms cubic-bezier(0.22,1,0.36,1),
    backdrop-filter 520ms cubic-bezier(0.22,1,0.36,1);
}
.nav--scrolled{
  background:rgba(5,3,16,0.62);
  backdrop-filter:saturate(180%) blur(24px);
  -webkit-backdrop-filter:saturate(180%) blur(24px);
  border-bottom:1px solid rgba(255,255,255,0.07);
}
.nav__shell{
  pointer-events:auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:40px;
  max-width:var(--container);
  margin:0 auto;
}
.nav__logo{display:inline-flex;align-items:center;gap:10px;font-family:'DM Sans',sans-serif;font-weight:700;color:var(--text-0);font-size:20px;letter-spacing:-0.03em;justify-self:start}
.nav__logo svg{width:32px;height:32px;filter:drop-shadow(0 0 10px rgba(167,139,250,0.5))}
.nav__logo .hoot-mark{width:34px;height:34px;object-fit:contain;display:block;filter:drop-shadow(0 0 12px rgba(167,139,250,0.55));transition:filter 250ms var(--ease)}
.nav__logo:hover .hoot-mark{filter:drop-shadow(0 0 18px rgba(167,139,250,0.85))}
/* Trademark mark on the HOOT wordmark — small superscript ™ (nav + footer). */
.nav__logo .hoot-tm{font-size:0.5em;font-weight:600;letter-spacing:normal;vertical-align:super;margin-left:1px}
.nav__links{display:flex;align-items:center;gap:38px;justify-self:center}
.nav__links a{position:relative;color:var(--text-2);font-size:15px;font-weight:500;letter-spacing:-0.01em;transition:color 180ms var(--ease)}
.nav__links a:hover{color:var(--text-0)}
.nav__links a.active{color:var(--text-0);font-weight:500}
.nav__cta{display:inline-flex;align-items:center;gap:10px;justify-self:end}

/* Nav CTA sizing — inherits the gradient from .btn--p, just tweaks padding */
.nav__cta .btn--p,
.nav__cta .btn--xs{
  padding:11px 18px;
  font-size:14px;
  font-weight:500;
  border-radius:10px;
}

/* ---------- Mobile hamburger + drawer ---------- */
/* Hidden on desktop — only appears below 980px. The button itself is
   absolutely simple: 3 horizontal bars that morph into an X via two of
   them rotating and the middle one fading out when .nav--open is set. */
.nav__menu{
  display:none;
  width:42px;height:42px;
  align-items:center;justify-content:center;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  cursor:pointer;
  justify-self:end;
  position:relative;
  transition:background 180ms var(--ease),border-color 180ms var(--ease);
}
.nav__menu:hover{background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.14)}
.nav__menu-bar{
  position:absolute;left:11px;right:11px;height:2px;
  background:var(--text-0);border-radius:2px;
  transition:transform 280ms cubic-bezier(0.22,1,0.36,1),opacity 200ms var(--ease),top 280ms cubic-bezier(0.22,1,0.36,1);
}
.nav__menu-bar:nth-child(1){top:13px}
.nav__menu-bar:nth-child(2){top:20px}
.nav__menu-bar:nth-child(3){top:27px}
.nav--open .nav__menu-bar:nth-child(1){top:20px;transform:rotate(45deg)}
.nav--open .nav__menu-bar:nth-child(2){opacity:0}
.nav--open .nav__menu-bar:nth-child(3){top:20px;transform:rotate(-45deg)}

/* Drawer — slide-down panel that sits flush against the bottom of the
   nav. Off-screen via translateY(-12px) + opacity 0 by default; the
   .nav--open class on the parent slides + fades it in. */
.nav__drawer{
  display:none;
  position:absolute;left:16px;right:16px;top:calc(100% + 8px);
  background:rgba(8,5,22,0.96);
  backdrop-filter:saturate(180%) blur(28px);
  -webkit-backdrop-filter:saturate(180%) blur(28px);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:18px;
  padding:18px;
  box-shadow:0 30px 80px rgba(0,0,0,0.55);
  pointer-events:auto;
  opacity:0;transform:translateY(-12px);
  pointer-events:none;
  transition:opacity 240ms var(--ease),transform 240ms cubic-bezier(0.22,1,0.36,1);
}
.nav--open .nav__drawer{opacity:1;transform:translateY(0);pointer-events:auto}
.nav__drawer-links{display:flex;flex-direction:column;gap:2px;margin-bottom:14px}
.nav__drawer-links a{
  display:block;
  padding:14px 14px;
  color:var(--text-1);
  font-size:16px;font-weight:500;letter-spacing:-0.01em;
  border-radius:10px;
  transition:background 160ms var(--ease),color 160ms var(--ease);
}
.nav__drawer-links a:hover{background:rgba(255,255,255,0.04);color:var(--text-0)}
.nav__drawer-links a.active{color:var(--text-0);background:rgba(167,139,250,0.10)}
.nav__drawer-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:100%;
  padding:14px 18px;
  font-size:15px;font-weight:600;
  border-radius:12px;
}

@media (max-width:980px){
  .nav{padding:14px 18px}
  .nav__shell{grid-template-columns:auto 1fr auto;gap:12px}
  .nav__links{display:none}
  .nav__cta{display:none}
  .nav__menu{display:inline-flex}
  .nav__drawer{display:block}
}

/* =====================================================================
   PHONE MOCKUP shell
   ===================================================================== */
.phone{
  position:relative;width:100%;max-width:340px;aspect-ratio:9/19;
  margin:0 auto;border-radius:46px;padding:10px;
  background:linear-gradient(180deg,#1f1648 0%,#0b0820 100%);
  border:1px solid var(--line-v);
  box-shadow:0 40px 100px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.04) inset,var(--glow-2);
}
.phone::before{content:"";position:absolute;top:14px;left:50%;transform:translateX(-50%);width:90px;height:24px;background:#04020c;border-radius:14px;z-index:3}
.phone__screen{
  position:relative;width:100%;height:100%;
  border-radius:38px;overflow:hidden;
  background:linear-gradient(180deg,#0a0822 0%,#06041a 100%);
}
.phone--sm{max-width:220px}
.phone--sm{border-radius:32px;padding:6px}
.phone--sm .phone__screen{border-radius:26px}
.phone--sm::before{width:64px;height:18px;top:10px}

.ph-status{display:flex;justify-content:space-between;align-items:center;padding:14px 22px 6px;color:var(--text-0);font-size:13px;font-weight:600;position:relative;z-index:4}
.ph-status .icons{display:flex;gap:4px;align-items:center}
.ph-status .icons svg{width:14px;height:14px}

/* =====================================================================
   FOOTER
   ===================================================================== */
footer{background:#03020c;padding:80px 0 36px;border-top:1px solid var(--line-1);position:relative;overflow:hidden}
footer::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:55%;height:1px;background:linear-gradient(90deg,transparent,rgba(139,92,246,0.7),transparent)}
.foot__top{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:40px}
@media (max-width:900px){.foot__top{grid-template-columns:1fr 1fr}}
.foot__brand p{color:var(--text-2);font-size:14px;max-width:340px;margin-top:16px;line-height:1.6}
.foot__col h4{font-family:'DM Sans',sans-serif;font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-3);margin-bottom:18px;font-weight:600}
.foot__col a{display:block;padding:6px 0;color:var(--text-2);font-size:14px;transition:color 150ms var(--ease)}
.foot__col a:hover{color:var(--text-0)}
.foot__bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;margin-top:0;padding-top:28px;border-top:1px solid var(--line-1);font-size:13px;color:var(--text-3);position:relative;z-index:2}

/* Giant HOOT watermark — full-opacity at top, fades to 0 at bottom,
   merging visually into the foot__bottom divider line. */
.foot__brand-giant{
  font-family:'DM Sans','DM Sans',sans-serif;
  font-weight:700;
  font-size:clamp(120px, 28vw, 460px);
  line-height:0.82;
  letter-spacing:-0.05em;
  text-align:center;
  /* negative bottom margin pulls the text down so the bottom of the letters
     overlaps the foot__bottom divider; the gradient + mask keep the overlap
     fading cleanly into / through the divider line. */
  margin:60px 0 -6vw;
  padding:0 2vw;
  user-select:none;
  pointer-events:none;
  white-space:nowrap;
  overflow:hidden;
  /* Smooth color fade — 2-stop ease from soft purple at top to transparent. */
  background:linear-gradient(180deg,
    rgba(167,139,250,0.14) 0%,
    rgba(139,92,246,0) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  /* Mask kills everything below ~72% — that's the region that visually
     crosses / sits below the foot__bottom divider, so the bottom of HOOT
     is fully invisible past the line. */
  -webkit-mask-image:linear-gradient(180deg, #000 20%, transparent 72%);
  mask-image:linear-gradient(180deg, #000 20%, transparent 72%);
}
.foot__social-label{margin-top:24px;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-3)}
.foot__social{display:flex;gap:10px}
.foot__social a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,0.04);border:1px solid var(--line-1);display:grid;place-items:center;color:var(--text-2);padding:0;transition:all 200ms var(--ease)}
.foot__social a:hover{color:var(--text-0);border-color:var(--line-v);transform:translateY(-2px)}
.foot__legal{display:flex;gap:18px;flex-wrap:wrap}
.foot__legal a{font-size:13px;color:var(--text-3);display:inline-block;padding:6px 0}
.foot__legal a:hover{color:var(--text-1)}

/* utility */
.spread{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.stack{display:flex;flex-direction:column}
.gap-sm{gap:8px} .gap-md{gap:14px} .gap-lg{gap:24px} .gap-xl{gap:40px}
.mt-sm{margin-top:8px} .mt-md{margin-top:18px} .mt-lg{margin-top:32px} .mt-xl{margin-top:48px}
.center{text-align:center}

/* live pulse for nav */
.nav-live{display:none;align-items:center;gap:6px;padding:4px 11px;border-radius:var(--r-pill);background:rgba(0,0,0,0.4);border:1px solid var(--line-v);font-size:11px;font-weight:600;letter-spacing:0.06em;color:var(--v-200);text-transform:uppercase}
@media (min-width:1100px){.nav-live{display:inline-flex}}

/* link arrow */
.lk{display:inline-flex;align-items:center;gap:6px;color:var(--v-300);font-weight:600;font-size:14px;transition:all 200ms var(--ease)}
.lk:hover{color:var(--text-0);gap:10px}

/* =====================================================================
   Nubien-style glassmorphism — applied across all card surfaces.
   Adds backdrop-filter blur(20px) over rgba(255,255,255,0.02) with
   hairline borders, regardless of where the card was originally defined.
   ===================================================================== */
/* Global glass for non-eco cards (eco is bespoke — see home.css).
   `.press-item` removed from this list — those cards use the flat-dark
   `rgb(10,10,12)` background defined inline in media.html and don't want
   the white-alpha tint that brightens on hover (which read as an
   unwanted "white layer" overlay). */
.venue, .case, .why, .partner-card, .kpi, .dash-card, .p-stat{
  background:rgba(255,255,255,0.025) !important;
  border:1px solid rgba(255,255,255,0.06) !important;
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  transition:background 250ms var(--ease), border-color 250ms var(--ease), transform 250ms var(--ease), box-shadow 250ms var(--ease);
}
.venue:hover, .case:hover, .why:hover, .partner-card:hover{
  background:rgba(255,255,255,0.04) !important;
  border-color:rgba(255,255,255,0.14) !important;
}

/* Hairline shimmer divider — drop-in replacement for solid 1px hr */
.hr-shimmer{height:1px;background:linear-gradient(90deg, transparent, rgba(255,255,255,0.15) 50%, transparent);border:0;margin:0}

/* =====================================================================
   Card cursor glow — bright dot pattern that lights up in a radial
   spotlight around the mouse position. JS (initCardCursorGlow in
   shared.js) injects the element + updates --mx / --my on mousemove.
   Selectors below are scoped to .eco / .trust-tile so specificity wins
   over the home.css `.eco > *{position:relative}` rule.
   ===================================================================== */
.eco > .card-cursor-glow,
.trust-tile > .card-cursor-glow,
.why > .card-cursor-glow,
.three-card > .card-cursor-glow{
  position:absolute !important;
  inset:0 !important;
  pointer-events:none;
  /* z-index:0 keeps the glow BEHIND text/icons (which sit at z-index:1)
     but in front of the card background and ::after orb. */
  z-index:0 !important;
  opacity:0;
  transition:opacity 280ms var(--ease);
  background-image:
    radial-gradient(circle, rgba(196,181,253,0.55) 1px, transparent 1.6px);
  background-size:24px 24px;
  background-position:0 0;
  background-repeat:repeat;
  /* Tighter radial spotlight — smaller area, sharper fall-off */
  -webkit-mask-image:radial-gradient(
    circle 110px at var(--mx, 50%) var(--my, 50%),
    #000 0%,
    rgba(0,0,0,0.45) 50%,
    transparent 100%
  );
  mask-image:radial-gradient(
    circle 110px at var(--mx, 50%) var(--my, 50%),
    #000 0%,
    rgba(0,0,0,0.45) 50%,
    transparent 100%
  );
}
.eco:hover > .card-cursor-glow,
.trust-tile:hover > .card-cursor-glow,
.why:hover > .card-cursor-glow,
.three-card:hover > .card-cursor-glow{opacity:1}

/* Reduced-motion: disable the glow */
@media (prefers-reduced-motion: reduce){
  .card-cursor-glow{display:none}
}

/* generic card */
.card{padding:28px;border-radius:var(--r-xl);background:linear-gradient(180deg,rgba(139,92,246,0.06) 0%,rgba(255,255,255,0.01) 100%);border:1px solid var(--line-1);transition:all 250ms var(--ease)}
.card:hover{border-color:var(--line-v);transform:translateY(-3px);box-shadow:var(--glow-1)}

/* =====================================================================
   MOTION UPGRADES — additive, guarded by prefers-reduced-motion /
   @supports / body[data-motion="off"]. Sections:
   (1) cross-page View Transitions   (2) mobile ambient hero drift
   (3) button + drawer micro-interactions   (4) stat-counter slot settle
   (5) scroll-driven hero + mockup depth   (6) live-fan fan-out
   (7) touch reveal card bloom
   ===================================================================== */

/* (1) Cross-document page transitions -------------------------------- */
@view-transition{ navigation:auto; }
@keyframes vtOut{ to{ opacity:0; } }
@keyframes vtIn{ from{ opacity:0; transform:translateY(10px); } }
::view-transition-old(root){ animation:vtOut 160ms ease both; }
::view-transition-new(root){ animation:vtIn 300ms cubic-bezier(0.22,1,0.36,1) both; }
/* persist + morph the header logo across navigations (header only — the
   footer .nav__logo is intentionally left without a name) */
.nav .nav__logo{ view-transition-name:hoot-logo; }
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){ animation:none; }
}

/* (3) Button micro-interactions -------------------------------------- */
.btn svg{ transition:transform 220ms var(--ease); }
.btn:hover svg{ transform:translateX(3px); }            /* arrow nudge */
.btn:active,.btn--p:active,.btn--g:active,.btn--o:active{ transform:scale(0.96); }
/* shine sweep across the button on hover (uses the free ::before) */
.btn::before{
  content:"";position:absolute;top:0;bottom:0;left:-70%;width:55%;z-index:1;
  pointer-events:none;transform:skewX(-18deg);opacity:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,0.28),transparent);
}
.btn:hover::before{ animation:btnSheen 720ms var(--ease); }
@keyframes btnSheen{ 0%{left:-70%;opacity:0} 12%{opacity:1} 100%{left:130%;opacity:0} }

/* (3) Hamburger drawer link stagger ---------------------------------- */
.nav__drawer-links a,.nav__drawer-cta{ opacity:0; }
.nav--open .nav__drawer-links a{ animation:drawerIn 380ms cubic-bezier(0.22,1,0.36,1) both; }
.nav--open .nav__drawer-links a:nth-child(1){animation-delay:60ms}
.nav--open .nav__drawer-links a:nth-child(2){animation-delay:100ms}
.nav--open .nav__drawer-links a:nth-child(3){animation-delay:140ms}
.nav--open .nav__drawer-links a:nth-child(4){animation-delay:180ms}
.nav--open .nav__drawer-links a:nth-child(5){animation-delay:220ms}
.nav--open .nav__drawer-links a:nth-child(6){animation-delay:260ms}
.nav--open .nav__drawer-links a:nth-child(7){animation-delay:300ms}
.nav--open .nav__drawer-cta{ animation:drawerIn 380ms cubic-bezier(0.22,1,0.36,1) 340ms both; }
@keyframes drawerIn{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
@media (prefers-reduced-motion:reduce){
  .nav__drawer-links a,.nav__drawer-cta{ opacity:1; animation:none; }
}

/* (4) Stat-counter slot settle (class added by initStatCounters) ------ */
@keyframes statSlot{ 0%{opacity:0;transform:translateY(0.55em)} 55%{opacity:1} 100%{opacity:1;transform:translateY(0)} }
.hero-stats__n.stat-in{ animation:statSlot 640ms cubic-bezier(0.16,1,0.3,1) both; }
@media (prefers-reduced-motion:reduce){ .hero-stats__n.stat-in{ animation:none; } }

/* (7) Touch reveal card bloom — mobile gets the desktop hover glow ---- */
@media (hover:none),(pointer:coarse){
  @keyframes cardBloom{
    0%{box-shadow:0 0 0 0 rgba(139,107,255,0)}
    45%{box-shadow:0 12px 42px -8px rgba(139,107,255,0.42)}
    100%{box-shadow:0 0 0 0 rgba(139,107,255,0)}
  }
  .eco.reveal--in,.why.reveal--in,.case.reveal--in,
  .partner-card.reveal--in,.venue.reveal--in,.press-item.reveal--in{
    animation:cardBloom 1100ms var(--ease) var(--rev-delay,0ms) both;
  }
}

/* (5) Scroll-driven depth — parallax on product mockups -------------- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    img[src*="mockup"]{
      animation:floatParallax linear both;
      animation-timeline:view();
      animation-range:cover;
    }
    @keyframes floatParallax{ from{translate:0 16px} to{translate:0 -16px} }
  }
}
/* (5) Desktop hero-glow parallax (depth as you scroll the first screen) */
@supports (animation-timeline: scroll()){
  @media (hover:hover) and (pointer:fine) and (min-width:768px) and (prefers-reduced-motion:no-preference){
    .hero__arc{
      animation:arcParallax linear both;
      animation-timeline:scroll(root);
      animation-range:0 90vh;
    }
    @keyframes arcParallax{ to{ translate:0 -14%; } }
  }
}

/* (6) Live-fan fan-out on scroll — touch only (desktop keeps hover) --- */
@supports (animation-timeline: view()){
  @media (hover:none),(pointer:coarse){
    .live-fan .live-fan__card{
      animation:fanRiseIn linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 30%;
    }
    @keyframes fanRiseIn{ from{translate:0 54px;opacity:0} to{translate:0 0;opacity:1} }
  }
}

/* (2) Mobile ambient hero drift — fills the gap where WebGL is off ---- */
@media (pointer:coarse){
  @media (prefers-reduced-motion:no-preference){
    .hero__arc{
      animation:arcDrift 16s ease-in-out infinite;
      will-change:translate,opacity;
    }
    @keyframes arcDrift{
      0%,100%{ translate:0 0; scale:1; opacity:0.82; }
      50%{ translate:0 -4%; scale:1.08; opacity:1; }
    }
  }
}
/* (2b) Interior-page heroes — injected .hero-ambient glow (initHeroAmbient).
   The hero is clipped (overflow:hidden) so the drifting/scaling glow can
   never spill out and re-introduce horizontal scroll. */
@media (pointer:coarse),(max-width:767px){
  @media (prefers-reduced-motion:no-preference){
    section[class$="-hero"]{ isolation:isolate; overflow:hidden; }
    section[class$="-hero"] > .hero-ambient{
      position:absolute; inset:0; z-index:-1; pointer-events:none;
      background:
        radial-gradient(40% 46% at 26% 28%, rgba(139,107,255,0.22), transparent 70%),
        radial-gradient(44% 50% at 78% 70%, rgba(217,70,239,0.13), transparent 72%);
      animation:heroAmbientDrift 20s ease-in-out infinite;
      will-change:transform,opacity;
    }
    @keyframes heroAmbientDrift{
      0%,100%{ transform:translate3d(-2%,-1%,0) scale(1.04); opacity:0.7; }
      50%{ transform:translate3d(3%,2%,0) scale(1.12); opacity:1; }
    }
  }
}