/* ============================================================
   TERAMERGE — shared presentation FX layer (fx.css)
   Additive, theme-agnostic, reduced-motion aware. Adds premium
   motion WITHOUT touching each page's existing reveal system.
   Effects: cursor light · magnetic CTAs · 3D tilt · parallax
   depth · count-up · text-line reveal · Mont-Fort arrow-reader.
   ============================================================ */

/* ---------- cursor light (soft glow that follows the pointer) ---------- */
.fx-cursor{ position:fixed; top:0; left:0; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%;
  pointer-events:none; z-index:60; mix-blend-mode:screen; opacity:0; transition:opacity .5s ease, width .3s ease, height .3s ease;
  background:radial-gradient(circle, rgba(210,225,255,0.9) 0%, rgba(150,185,255,0.35) 38%, rgba(120,160,255,0) 70%); will-change:transform; }
.fx-cursor.on{ opacity:0.55; }
.fx-cursor.hot{ width:64px; height:64px; opacity:0.8; }
@media (hover:none),(pointer:coarse){ .fx-cursor{ display:none; } }

/* ---------- scroll reveal (opt-in via [data-fxr]; own attr to avoid clashes) ---------- */
[data-fxr]{ opacity:0; transform:translateY(28px); will-change:opacity,transform;
  transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
[data-fxr="left"]{ transform:translateX(-46px); }
[data-fxr="right"]{ transform:translateX(46px); }
[data-fxr="scale"]{ transform:scale(.92); }
[data-fxr="blur"]{ filter:blur(14px); transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1), filter .9s ease; }
[data-fxr].fx-in{ opacity:1; transform:none; filter:none; }

/* ---------- text-line reveal (opt-in via [data-split]) ---------- */
.fx-line{ display:block; overflow:hidden; }
.fx-line > span{ display:block; transform:translateY(115%); transition:transform .95s cubic-bezier(.22,1,.36,1); will-change:transform; }
.fx-line.fx-in > span{ transform:none; }

/* ---------- 3D tilt wrapper (opt-in via [data-tilt]) ---------- */
[data-tilt]{ transform-style:preserve-3d; will-change:transform; }
[data-tilt] > *{ transform:translateZ(0.01px); }

/* ---------- Mont-Fort arrow reader (opt-in via [data-reader]) ---------- */
[data-reader]{ position:relative; }
[data-reader-track]{ display:flex !important; gap:clamp(1rem,2vw,1.6rem); overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; -ms-overflow-style:none; scrollbar-width:none; padding-bottom:0.5rem; }
[data-reader-track]::-webkit-scrollbar{ display:none; }
[data-reader-track] > *{ flex:0 0 min(360px,82%); scroll-snap-align:start; }
.fx-reader__ctrl{ display:flex; align-items:center; gap:1rem; margin-top:clamp(1.4rem,3vh,2.4rem); }
.fx-reader__arrow{ width:48px; height:48px; flex:0 0 auto; border-radius:50%; border:1px solid currentColor; background:transparent;
  color:inherit; font-size:1.05rem; line-height:1; cursor:pointer; opacity:0.75;
  transition:opacity .3s ease, transform .3s ease, background .3s ease, color .3s ease; }
.fx-reader__arrow:hover{ opacity:1; transform:translateY(-2px); }
.fx-reader__arrow[disabled]{ opacity:0.22; cursor:default; transform:none; }
.fx-reader__bar{ position:relative; flex:1 1 auto; height:1px; background:currentColor; opacity:0.2; overflow:hidden; }
.fx-reader__bar i{ position:absolute; left:0; top:0; height:100%; width:30%; background:currentColor; opacity:1;
  transition:transform .4s cubic-bezier(.22,1,.36,1), width .4s ease; }
.fx-reader__count{ flex:0 0 auto; font-size:0.72rem; letter-spacing:0.18em; opacity:0.7; font-variant-numeric:tabular-nums; min-width:3.4em; text-align:right; }

@media (prefers-reduced-motion:reduce){
  [data-fxr]{ opacity:1 !important; transform:none !important; filter:none !important; transition:none; }
  .fx-line > span{ transform:none !important; }
  .fx-cursor{ display:none; }
  [data-reader-track]{ scroll-behavior:auto; }
}
@media (max-width:760px){
  [data-reader-track] > *{ flex-basis:86%; }
  .fx-reader__arrow{ width:44px; height:44px; }
}

/* ============================================================
   SHARED MOBILE NAVIGATION (hamburger) — additive, desktop untouched.
   All .nav pages (Canopy/Aurora/Wild/Investors/Buyers/Company) load
   fx.css, so one definition covers them. Everything lives inside the
   ≤940px query, so desktop keeps the full horizontal nav exactly.
   ============================================================ */
.nav__burger{ display:none; }
@media (max-width:940px){
  .nav{ z-index:40; padding-top:calc(env(safe-area-inset-top, 0px) + 0.9rem); }
  /* scrim behind the fixed nav — extends BELOW the bar so scrolling content fully fades
     out under the logo/name (nothing overlaps the top-left brand) */
  .nav::before{ content:""; position:absolute; left:0; right:0; top:0; height:calc(100% + 64px);
    z-index:-1; pointer-events:none;
    background:linear-gradient(180deg, rgba(8,10,12,0.98) 0%, rgba(8,10,12,0.96) 42%, rgba(8,10,12,0.75) 68%, rgba(8,10,12,0) 100%); }
  .nav.is-open::before{ opacity:0; }
  .nav__brand{ position:relative; z-index:42; }
  /* hamburger button (sits at the right of the bar) */
  .nav__burger{ display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:46px; height:46px; padding:12px; margin:-6px -8px -6px 0; box-sizing:border-box;
    pointer-events:auto; background:transparent; border:0; cursor:pointer; z-index:42; }
  .nav__burger span{ display:block; width:100%; height:2px; border-radius:2px;
    background:rgba(246,242,234,0.94); box-shadow:0 1px 4px rgba(0,0,0,0.6);
    transition:transform .35s cubic-bezier(.22,1,.36,1), opacity .25s ease; }
  .nav.is-open .nav__burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav.is-open .nav__burger span:nth-child(2){ opacity:0; }
  .nav.is-open .nav__burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  /* the links become a slide-down panel */
  .nav__links{ position:fixed; inset:0 0 auto 0; z-index:41;
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    padding:clamp(4.6rem,13vh,6rem) clamp(1.4rem,6vw,2.6rem) clamp(1.6rem,5vh,2.4rem);
    background:linear-gradient(180deg, rgba(8,10,12,0.985), rgba(8,10,12,0.95));
    -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
    box-shadow:0 24px 54px rgba(0,0,0,0.55);
    transform:translateY(-102%); opacity:0; visibility:hidden;
    transition:transform .5s cubic-bezier(.22,1,.36,1), opacity .35s ease, visibility .5s; }
  .nav.is-open .nav__links{ transform:translateY(0); opacity:1; visibility:visible; }
  .nav__links .nav__link{ width:100%; padding:1rem 0.2rem; font-size:1.02rem; letter-spacing:0.2em;
    color:rgba(246,242,234,0.92); border-bottom:1px solid rgba(255,255,255,0.09); }
  .nav__links .nav__link:last-child{ border-bottom:0; }
  .nav__links .nav__link.is-active{ color:#fff; }
  .nav__links .nav__link.is-active::after{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .nav__links{ transition:opacity .2s ease, visibility .2s !important; }
  .nav__burger span{ transition:none; }
}