/* ==========================================================================
   FinX Polymers — shared motion & visual layer
   Declarative hooks driven by assets/finx-motion.js:
     [data-split]      word-mask headline reveal
     .img-reveal       clip-path wipe + zoom-out on scroll
     [data-parallax]   scrubbed vertical drift inside an overflow-hidden frame
     .spotlight        cursor-follow glow + border highlight
     .magnetic         buttons that lean toward the pointer
     [data-count]      number count-up
     [data-embers]     ambient ember canvas
     [data-marquee]    scroll-velocity ticker
   Everything degrades to a static, fully visible page without JS or with
   prefers-reduced-motion.
   ========================================================================== */

/* ---- Scroll progress ---- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, #E86800, #F48C06 60%, #FFC56B);
  box-shadow: 0 0 12px rgba(244,140,6,.6);
  pointer-events: none;
}

/* ---- Nav active link ---- */
.nav-link { position: relative; }
.nav-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px;
  background: #F48C06; transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }
.nav-link.is-active { color: #fff; }

/* ---- Split headline (words slide up from a mask) ---- */
.split-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.split-word > .split-inner { display: inline-block; will-change: transform; }
.js-motion [data-split] .split-inner { transform: translateY(110%); }

/* ---- Animated gradient accent ---- */
.text-grad-anim {
  background: linear-gradient(100deg, #E86800 0%, #F48C06 30%, #FFD08A 45%, #F48C06 60%, #E86800 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: grad-sheen 6s ease-in-out infinite;
}
@keyframes grad-sheen { 0%,100% { background-position: 100% 50%; } 50% { background-position: 0% 50%; } }

/* ---- Image reveal / parallax frames ---- */
.img-reveal { will-change: clip-path; }
.js-motion .img-reveal { clip-path: inset(14% 10% 14% 10% round 2rem); }
[data-parallax] { will-change: transform; }

/* ---- Primary button shine sweep ---- */
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg); transition: left .7s cubic-bezier(.16,1,.3,1);
}
.btn-primary:hover::before { left: 120%; }
.magnetic { will-change: transform; }

/* ---- Spotlight cards ---- */
.spotlight { --mx: 50%; --my: 50%; position: relative; isolation: isolate; }
.spotlight::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 0; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(244,140,6,.14), transparent 45%);
  opacity: 0; transition: opacity .4s ease;
}
.spotlight::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; z-index: 0; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(244,140,6,.85), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .4s ease;
}
.spotlight:hover::before, .spotlight:hover::after,
.spotlight:focus-visible::before, .spotlight:focus-visible::after { opacity: 1; }
.spotlight > * { position: relative; z-index: 1; }

/* ---- Self-drawing icons ---- */
.draw-icon path, .draw-icon circle { stroke-dasharray: 80; stroke-dashoffset: 0; }
.js-motion .draw-icon path, .js-motion .draw-icon circle { stroke-dashoffset: 80; }
.draw-icon.is-drawn path, .draw-icon.is-drawn circle { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.65,0,.35,1); }

/* ---- Ember canvas ---- */
[data-embers] { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---- Marquee ticker ---- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; will-change: transform; }
.marquee-group { display: flex; align-items: center; flex-shrink: 0; }
.marquee-item { display: inline-flex; align-items: center; gap: 2.5rem; padding-right: 2.5rem; white-space: nowrap; }
.marquee-item .x-sep { color: #F48C06; font-weight: 900; }
.marquee-outline { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.35); }

/* ---- Scroll cue ---- */
.scroll-cue { width: 22px; height: 36px; border: 1.5px solid rgba(255,255,255,.28); border-radius: 12px; position: relative; }
.scroll-cue::after {
  content: ''; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px;
  border-radius: 2px; background: #F48C06; animation: cue 1.8s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes cue { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(12px); opacity: 0; } }

/* ---- Slow ambient float for hero glows ---- */
.float-slow { animation: float-slow 14s ease-in-out infinite; }
@keyframes float-slow { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-4%,5%,0) scale(1.08); } }

/* ---- Giant footer wordmark ---- */
.wordmark {
  font-family: 'Montserrat', sans-serif; font-weight: 900; line-height: .8; letter-spacing: -.04em;
  font-size: clamp(5rem, 22vw, 22rem); white-space: nowrap; user-select: none;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(244,140,6,.55), rgba(232,104,0,.08) 75%);
  -webkit-background-clip: text; background-clip: text;
}

@media (prefers-reduced-motion: reduce) {
  .js-motion [data-split] .split-inner { transform: none !important; }
  .js-motion .img-reveal { clip-path: none !important; }
  .js-motion .draw-icon path, .js-motion .draw-icon circle { stroke-dashoffset: 0 !important; }
  .text-grad-anim, .float-slow, .scroll-cue::after { animation: none !important; }
  [data-embers] { display: none; }
}