/* RMSR — Homepage hero, scroll story, marquee, RIDE button, and Yeti easter egg.
   Extracted from the approved concept page (rmsr-concept-page-v3.html).
   Depends on tokens.css being loaded first (uses --rmsr-* variables and
   .rmsr-grain-overlay from that file — don't redefine either here). */

/* Integration notes (site integration, not part of the concept):
   - The concept's global resets (*, html, body) and its `footer{}` rule are
     removed: css/style.css already sets box-sizing, body colors/fonts, and smooth
     scroll, and a bare `footer{}` rule restyled the site footer.
   - Grain comes from style.css's single body::before, not a second overlay div.
   - style.css gives every <section> 64px vertical padding; the hero and scroll
     story reset it so the pinned frame's timing math stays exact.
   - The hero and pinned story frame sit below the sticky site header
     (--site-header-h, defined in style.css).
   - Initial hidden states moved here from inline style="" (blocked by the CSP).
   - Reduced-motion block at the end. */

  /* The tilted marquee is scaled 1.02, so it pokes past the viewport edges.
     `clip` (unlike `hidden`) doesn't create a scroll container, so the sticky
     header and the pinned story frame keep working. */
  main{ overflow-x:clip; }

  /* ================= HERO ================= */
  .hero{ position:relative; min-height:calc(100vh - var(--site-header-h)); min-height:calc(100svh - var(--site-header-h)); padding:0; display:flex; flex-direction:column; justify-content:center; overflow:hidden; border-bottom:1px solid var(--rmsr-line); }
  .hero-content{ position:relative; z-index:2; padding:0 6vw; }

  /* Background video (triptych on landscape, vertical clip on portrait). The
     poster image shows first; the video fades in only once it's playing, and
     never loads for reduced-motion or data-saver visitors (see hero-story.js). */
  .hero-media{ position:absolute; inset:0; z-index:0; }
  .hero-poster, .hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .hero-video{ opacity:0; transition:opacity 0.6s ease; }
  .hero-video.is-playing{ opacity:1; }
  /* Solid-ink scrim weighted to the left, where the headline sits — keeps the
     type readable over bright snow without a frosted panel. */
  .hero-media::after{
    content:""; position:absolute; inset:0;
    background:
      linear-gradient(90deg, rgba(10,20,32,0.88) 0%, rgba(10,20,32,0.62) 45%, rgba(10,20,32,0.18) 100%),
      linear-gradient(0deg, rgba(10,20,32,0.55) 0%, rgba(10,20,32,0) 35%);
  }
  @media (orientation: portrait){
    .hero-media::after{ background:linear-gradient(0deg, rgba(10,20,32,0.9) 0%, rgba(10,20,32,0.55) 55%, rgba(10,20,32,0.25) 100%); }
  }

  /* Pause control (WCAG 2.2.2) — top right, clear of the scroll cue */
  .hero-video-toggle{
    position:absolute; z-index:3; top:clamp(16px,3vw,32px); right:clamp(16px,3vw,32px);
    width:44px; height:44px; display:grid; place-items:center;
    background:var(--rmsr-ink); border:var(--rmsr-border-width) solid var(--rmsr-line); border-radius:var(--rmsr-radius);
    color:var(--rmsr-snow); cursor:pointer;
  }
  .hero-video-toggle:hover, .hero-video-toggle:focus-visible{ border-color:var(--rmsr-orange); color:var(--rmsr-orange); }
  .hero-video-icon{ width:12px; height:14px; border-left:4px solid currentColor; border-right:4px solid currentColor; }
  .hero-video-toggle.is-paused .hero-video-icon{ width:0; height:0; border-style:solid; border-width:7px 0 7px 12px; border-color:transparent transparent transparent currentColor; }
  .kicker{ font-family:var(--rmsr-font-display); font-weight:700; font-size:15px; letter-spacing:0.22em; color:var(--rmsr-ice); margin-bottom:18px; display:inline-block; border:1px solid var(--rmsr-line); padding:6px 14px; text-transform:uppercase; line-height:1.4; max-width:100%; }
  .hero .kicker{ background:rgba(10,20,32,0.6); }
  @media (max-width: 600px){ .hero .kicker{ font-size:13px; letter-spacing:0.12em; } }
  .hero .hero-headline{ font-family:var(--rmsr-font-display); font-weight:700; text-transform:uppercase; color:var(--rmsr-snow); font-size:clamp(52px,11vw,168px); line-height:0.86; letter-spacing:-0.01em; max-width:1100px; }
  .hero .hero-headline .accent{ color:var(--rmsr-orange); }
  .hero .hero-headline .offset{ display:block; margin-left:8vw; }
  .hero-sub{ margin-top:32px; max-width:480px; font-size:18px; color:var(--rmsr-frost); }
  .cta-wrap{ margin-top:48px; }
  .scroll-cue{ position:absolute; bottom:32px; right:6vw; z-index:2; font-family:var(--rmsr-font-display); font-size:13px; letter-spacing:0.15em; color:var(--rmsr-frost); opacity:0.6; display:flex; align-items:center; gap:10px; }
  .scroll-cue .line{ width:40px; height:1px; background:var(--rmsr-frost); animation:scrollpulse 2s ease-in-out infinite; }
  @keyframes scrollpulse{ 0%,100%{opacity:0.3;} 50%{opacity:1;} }

  /* ================= RIDE BUTTON — solid orange CTA, snow kicks up on click ================= */
  .braap-btn{
    position:relative; display:inline-flex; align-items:center; gap:14px;
    background:var(--rmsr-orange); border:2px solid var(--rmsr-orange); color:var(--rmsr-snow);
    font-family:var(--rmsr-font-display); font-weight:700; font-size:22px; letter-spacing:0.06em;
    text-transform:uppercase; text-decoration:none; /* it's a link now */
    padding:20px 36px; cursor:pointer; overflow:visible; isolation:isolate;
    box-shadow:0 10px 28px rgba(255,90,31,0.35), 0 2px 0 rgba(0,0,0,0.25);
    transition:background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  }
  .braap-btn:hover, .braap-btn:focus-visible{
    filter:brightness(1.08); transform:translateY(-2px);
    box-shadow:0 14px 34px rgba(255,90,31,0.5), 0 2px 0 rgba(0,0,0,0.25);
  }
  .braap-btn:focus-visible{ outline:2px solid var(--rmsr-snow); outline-offset:4px; }
  .braap-btn:active{ transform:translateY(0); }
  .btn-arrow{ display:inline-block; transition:transform 0.2s ease; }
  .braap-btn:hover .btn-arrow, .braap-btn:focus-visible .btn-arrow{ transform:translateX(5px); }
  @media (max-width: 420px){ .braap-btn{ font-size:19px; padding:18px 24px; gap:10px; } }
  .particle-field{ position:absolute; left:26px; bottom:14px; width:1px; height:1px; pointer-events:none; z-index:5; }
  .snow-bit{ position:absolute; left:0; top:0; width:var(--size); height:var(--size); background:var(--rmsr-snow); opacity:0.95; animation: flyOut 0.7s cubic-bezier(.15,.6,.25,1) forwards; }
  @keyframes flyOut{
    0%{ transform:translate(0,0) rotate(0deg) scale(1); opacity:1; }
    55%{ transform:translate(var(--txMid),var(--tyPeak)) rotate(calc(var(--rot) * 0.6)) scale(0.85); opacity:1; }
    100%{ transform:translate(var(--txEnd),var(--tyEnd)) rotate(var(--rot)) scale(0.35); opacity:0; }
  }
  .btn-status{ margin-top:14px; font-family:var(--rmsr-font-display); font-size:13px; letter-spacing:0.08em; color:var(--rmsr-frost); opacity:0.6; height:18px; }


  /* ================= MARQUEE ================= */
  .marquee-band{ background:var(--rmsr-orange); overflow:hidden; white-space:nowrap; border-bottom:1px solid var(--rmsr-line); padding:22px 0; transform:rotate(-1.2deg) scale(1.02); margin:-1px 0; position:relative; z-index:3; }
  .marquee-track{ display:inline-block; animation: marquee 26s linear infinite; font-family:var(--rmsr-font-display); font-weight:700; font-size:clamp(26px,4vw,44px); text-transform:uppercase; color:var(--rmsr-ink); letter-spacing:0.02em; }
  .marquee-track span{ margin-right:40px; }
  .marquee-track span.dim{ opacity:0.35; }
  @keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

  /* ================= SCROLL STORY ================= */
  /* 260vh (was 380vh with the BRAAAP beat) — timeline constants live in hero-story.js */
  .scroll-story{ position:relative; height:260vh; padding:0; }
  .story-stage{ position:sticky; top:var(--site-header-h); height:calc(100vh - var(--site-header-h)); height:calc(100svh - var(--site-header-h)); overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--rmsr-ink); border-bottom:1px solid var(--rmsr-line); }
  .snowfall{ position:absolute; inset:0; pointer-events:none; z-index:1; }
  .flake{ position:absolute; top:-5%; color:var(--rmsr-snow); animation: fall var(--fdur) linear infinite; animation-delay:var(--fdelay); opacity:var(--fop); }
  .flake svg{ display:block; width:var(--fsize); height:var(--fsize); animation: tumble var(--tdur) linear infinite; }
  @keyframes fall{ from{ transform:translateY(-10vh) translateX(0);} to{ transform:translateY(110vh) translateX(var(--fdrift)); } }
  @keyframes tumble{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }

  .act{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; z-index:2; padding:0 6vw; }
  .act-kicker{ font-family:var(--rmsr-font-display); font-weight:700; font-size:14px; letter-spacing:0.18em; text-transform:uppercase; color:var(--rmsr-ice); margin-bottom:8px; }
  .big-number{ font-family:var(--rmsr-font-display); font-weight:700; line-height:0.9; font-size:clamp(64px,15vw,220px); font-variant-numeric:tabular-nums; }
  .act-acres .big-number{ color:var(--rmsr-orange); }
  .big-number-label{ margin-top:14px; font-family:var(--rmsr-font-display); font-weight:600; font-size:clamp(16px,2.2vw,26px); text-transform:uppercase; letter-spacing:0.06em; color:var(--rmsr-snow); }

  .act-group .group-copy{ position:relative; z-index:2; }

  /* Initial states (were inline style="" in the concept markup; JS takes over on scroll) */
  .act-group, #groupKicker, #groupNumber, #groupLabel{ opacity:0; }
  .act-group .big-number{ color:var(--rmsr-ice); }

  /* the singular "1" gets a discrete pop + ring, not a gradual fade like the counted number */
  .solo-wrap{ position:relative; display:inline-block; }
  .solo-ring{
    position:absolute; left:50%; top:50%; width:1px; height:1px; border-radius:50%;
    border:3px solid var(--rmsr-ice); opacity:0; pointer-events:none; transform:translate(-50%,-50%) scale(0.3);
  }
  .group-copy.reveal .solo-ring{ animation: ringPulse 0.8s ease-out both; }
  @keyframes ringPulse{
    0%{ transform:translate(-50%,-50%) scale(0.3); opacity:0.9; }
    100%{ transform:translate(-50%,-50%) scale(60); opacity:0; }
  }
  .group-copy.reveal #groupNumber{ animation: soloPop 0.5s cubic-bezier(.34,1.56,.64,1) both; }
  @keyframes soloPop{
    0%{ transform:scale(0.15); opacity:0; }
    65%{ transform:scale(1.18); opacity:1; }
    100%{ transform:scale(1); opacity:1; }
  }

  /* interrupt shake — applied to the whole stage right as BRAAAP slams in */
  .story-stage.interrupt{ animation: interruptShake 0.28s linear; }
  @keyframes interruptShake{
    0%,100%{ transform:translate(0,0); } 15%{ transform:translate(-6px,2px); } 30%{ transform:translate(6px,-3px); }
    45%{ transform:translate(-5px,-2px); } 60%{ transform:translate(5px,3px); } 75%{ transform:translate(-3px,0); } 90%{ transform:translate(3px,0); }
  }

  /* ================= ANGLED SECTION ================= */
  .angled-section{ position:relative; background:var(--rmsr-deep-steel); padding:140px 6vw 120px; clip-path:polygon(0 40px, 100% 0, 100% 100%, 0 100%); margin-top:-40px; z-index:2; }
  /* Cursor-reactive background wordmark — moved here from the hero, which now
     carries the video. clip-path on the section crops it to the angled shape. */
  .angled-section{ overflow:hidden; }
  /* base .bg-wordmark styles live in style.css (shared with the Resources hero) */
  .angled-section .bg-wordmark{ width:120vw; opacity:0.14; filter:saturate(1.3); }
  .angled-section h2, .angled-section .lead, .angled-section .guide-points{ position:relative; z-index:1; }
  .angled-section h2{ font-family:var(--rmsr-font-display); font-weight:700; text-transform:uppercase; color:var(--rmsr-snow); font-size:clamp(34px,5vw,64px); line-height:1; max-width:800px; }
  .guide-points{ list-style:none; padding:0; margin:32px 0 0; max-width:620px; border-top:1px solid var(--rmsr-line); }
  .guide-points li{
    position:relative; padding:14px 0 14px 26px; border-bottom:1px solid var(--rmsr-line);
    font-family:var(--rmsr-font-display); font-weight:600; font-size:clamp(16px,1.6vw,19px);
    text-transform:uppercase; letter-spacing:0.04em; color:var(--rmsr-snow);
  }
  .guide-points li::before{ content:""; position:absolute; left:0; top:50%; width:10px; height:10px; background:var(--rmsr-orange); transform:translateY(-50%); }
  .angled-section .lead{ margin-top:24px; max-width:560px; font-size:17px; color:var(--rmsr-frost); }

  /* ================= YETI EASTER EGG ================= */
  .yeti{ position:fixed; right:calc(4vw - 14px); bottom:-260px; z-index:399; transition:bottom 0.55s cubic-bezier(.3,1.4,.4,1); pointer-events:none; }
  .yeti.active{ bottom:-20px; }

  /* ================= REDUCED MOTION ================= */
  /* Stop the looping/ambient motion; the scroll-driven story still works
     (it only moves when the visitor scrolls). */
  @media (prefers-reduced-motion: reduce){
    .marquee-track, .scroll-cue .line, .flake, .flake svg{ animation:none; }
    .snowfall{ display:none; }
    .story-stage.interrupt{ animation:none; }
    .braap-btn, .btn-arrow{ transition:none; transform:none !important; }
  }