/* ==========================================================================
   Phantom standard: motion effects (pairs with motion-fx.js)
   Use in every site, demo and Shopify theme. Approved by Daniel 2026-10-26
   on the Phantom Football comparison (phantom-football-fundraiser/fx-compare/).
   Plain CSS + JS only, so every effect ports to a Shopify section or snippet.

   Setup:
   1. Map the 3 tokens below to the project's colors IN THIS FILE (the build's copy).
      Setting them in the site's own stylesheet does NOT work if that loads first: this :root wins.
   2. In <head>, before this file:
        <script>document.documentElement.classList.add('fx-js')</script>
      (hides reveal content only when JS is running, so nothing stays hidden if JS fails)
   3. Before </body>: <script src="motion-fx.js"></script>
   4. Opt elements in with the hooks below. The scroll progress bar is automatic.

   Hooks:
     .fx-shine            animated sheen on accent words (Magic UI: Animated Shiny Text)
     .fx-shimmer          light sweep across a button, usually the primary CTA (Magic UI: Shimmer Button)
     .fx-beam             light circling a card's border (Magic UI: Border Beam)
     .fx-dots             drifting dot grid behind a dark section (Magic UI: Dot Pattern)
     .fx-marquee          edge fade + pause on hover, on the marquee wrapper (Magic UI: Marquee)
     data-fx="blur-text"  headline blurs in word by word (React Bits: Blur Text)
     data-fx="ticker"     number counts up when in view; keeps $ , + K around it (Magic UI: Number Ticker)
     data-fx="stagger"    children fade in one after another (Magic UI: Blur Fade)
     data-fx="tilt"       card tilts toward cursor with a glow, desktop only (React Bits: Tilted Card)
     data-fx="parallax"   image moves slower than the page; put on the <img> (value: data-fx-speed, default .2)

   Rules:
   - Progress bar sits on the BOTTOM edge (Daniel's pick over top and side).
   - NO smooth-scroll libraries (Lenis etc). Daniel prefers native scrolling.
   - Everything stops for prefers-reduced-motion (the WCAG deploy gate checks this).
   - Don't stack every effect on one page section. One or two per section.
   ========================================================================== */
:root {
  --fx-accent: #b3a4f0;     /* glow, beam, bar (Phantom lavender) */
  --fx-accent-2: #8e7ae0;   /* bar start, deeper lavender */
  --fx-ease: cubic-bezier(.22,.61,.36,1);
}

/* Scroll progress (bottom edge) */
/* 5px, solid accent (no fade to white: it vanished on light sections), thin dark edge so it reads on any background */
.fx-progress{position:fixed;left:0;right:0;bottom:0;height:5px;z-index:200;pointer-events:none;
  background:linear-gradient(90deg,var(--fx-accent-2),var(--fx-accent));
  box-shadow:0 -1px 0 rgba(0,0,0,.25);
  transform-origin:0 50%;transform:scaleX(0)}

/* Blur text */
.fx-word{display:inline-block;opacity:0;filter:blur(12px);transform:translateY(18px);
  transition:opacity .7s var(--fx-ease),filter .7s var(--fx-ease),transform .7s var(--fx-ease)}
.fx-word.in{opacity:1;filter:none;transform:none}

/* Shiny accent text */
.fx-shine{background:linear-gradient(110deg,var(--fx-accent) 35%,#fff 50%,var(--fx-accent) 65%);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:fx-sheen 5s linear infinite}
@keyframes fx-sheen{from{background-position:100% 0}to{background-position:-150% 0}}

/* Shimmer button */
.fx-shimmer{position:relative;overflow:hidden;isolation:isolate}
.fx-shimmer::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);
  transform:skewX(-20deg);animation:fx-shimmer 3.2s var(--fx-ease) infinite}
@keyframes fx-shimmer{0%{left:-60%}55%,100%{left:130%}}

/* Marquee */
.fx-marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.fx-marquee:hover *{animation-play-state:paused}

/* Tilt + glow card (card needs an image wrapper; glow goes on [data-fx-glow] or the card itself) */
[data-fx="tilt"]{transform-style:preserve-3d;will-change:transform;position:relative}
[data-fx="tilt"].fx-tilting{transition:transform .08s linear}
[data-fx="tilt"]::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--fx-accent) 28%,transparent),transparent 45%)}
[data-fx="tilt"]:hover::after{opacity:1}

/* Border beam */
@property --fx-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
.fx-beam{position:relative}
.fx-beam::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:2px;pointer-events:none;
  background:conic-gradient(from var(--fx-angle),transparent 0 70%,var(--fx-accent) 85%,#fff 90%,transparent 95%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;animation:fx-beam 6s linear infinite}
@keyframes fx-beam{to{--fx-angle:360deg}}

/* Staggered blur fade */
html.fx-js [data-fx="stagger"] > *{opacity:0;transform:translateY(22px);filter:blur(6px);
  transition:opacity .7s var(--fx-ease),transform .7s var(--fx-ease),filter .7s var(--fx-ease);
  transition-delay:calc(var(--i,0) * 90ms)}
html.fx-js [data-fx="stagger"].in > *{opacity:1;transform:none;filter:none}

/* Drifting dot grid (section gets position + overflow; content sits above) */
.fx-dots{position:relative;isolation:isolate;overflow:hidden}
.fx-dots::before{content:"";position:absolute;inset:-40px;z-index:-1;pointer-events:none;opacity:1;background-color:transparent;
  /* resets: sites often style section::before already (watermarks etc) */
  
  background-image:radial-gradient(color-mix(in srgb,var(--fx-accent) 35%,transparent) 1px,transparent 1.5px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 30% 40%,#000,transparent 75%);
  mask-image:radial-gradient(ellipse 70% 60% at 30% 40%,#000,transparent 75%);
  animation:fx-drift 18s linear infinite}
@keyframes fx-drift{to{transform:translate(26px,26px)}}

/* Parallax: give the image room to move inside an overflow:hidden parent */
img[data-fx="parallax"]{will-change:transform}

@media (prefers-reduced-motion:reduce){
  .fx-word{opacity:1;filter:none;transform:none;transition:none}
  .fx-shine,.fx-shimmer::after,.fx-beam::before,.fx-dots::before{animation:none}
  .fx-shimmer::after{display:none}
  html.fx-js [data-fx="stagger"] > *{opacity:1;transform:none;filter:none;transition:none}
}

@media print{.fx-progress{display:none}}