/* ═══════════════════════════════════════════════════════════════════════
   EVERYOPS · PREMIUM MOTION LAYER  ·  premium.css
   ─────────────────────────────────────────────────────────────────────
   ADDITIVE ONLY. This file never redefines existing components, colours,
   type or layout. It only adds a loading screen, scroll progress, custom
   cursor, and the polish hooks the engine (premium.js) drives.

   Every effect:
     • uses the existing design tokens (--accent, --bg, --ease …)
     • is gated behind html.eo-motion (set by JS only when motion is allowed)
     • collapses to nothing under prefers-reduced-motion / touch / mobile
   Zero external dependencies.
   ═══════════════════════════════════════════════════════════════════════ */

/* Local token fallbacks so this file is correct even if loaded before
   shared.css defines them (they match shared.css exactly). */
:root {
  --eo-accent:      var(--accent, #9459FF);
  --eo-accent-2:    var(--accent-2, #AB80FF);
  --eo-amber:       var(--amber, #FFC74E);
  --eo-ease:        var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
  --eo-loader-ms:   2000ms;
}

/* ───────────────────────────────────────────────────────────
   0 · MOTION GATE
   The engine adds html.eo-motion when smooth motion is allowed.
   Anything richer than a plain fade lives under that class so a
   reduced-motion / mobile / no-JS visitor is never affected.
   ─────────────────────────────────────────────────────────── */

/* ───────────────────────────────────────────────────────────
   1 · CINEMATIC LOADING SCREEN
   ─────────────────────────────────────────────────────────── */
#eo-loader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  background: var(--bg, #000);
  opacity: 1;
  transition: opacity 0.7s var(--eo-ease), visibility 0.7s var(--eo-ease);
  will-change: opacity;
  overflow: hidden;
}
#eo-loader.eo-hide { opacity: 0; visibility: hidden; pointer-events: none; }

/* ambient particle canvas behind the mark */
#eo-loader-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0.42; pointer-events: none;
}

.eo-loader-core {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  z-index: 2;
}
.eo-loader-mark {
  width: 84px; height: 64px;
  background-image: var(--eo-mark-url);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  animation: eoLoaderMark 2.1s var(--eo-ease) infinite;
}
@keyframes eoLoaderMark {
  0%, 100% { transform: scale(1);    }
  50%      { transform: scale(1.06); }
}

.eo-loader-wordmark {
  font-family: var(--font, 'Figtree', sans-serif);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text, #fff);
}
.eo-wm-ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  animation: eoWmCh 0.42s var(--eo-ease) forwards;
}
@keyframes eoWmCh { to { opacity: 0.92; transform: none; } }

.eo-loader-track {
  width: 190px; height: 2px;
  border-radius: 2px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.eo-loader-fill {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--eo-accent), var(--eo-accent-2), var(--eo-amber));
  transition: width 0.2s linear;
}
.eo-loader-meta {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono, 'Figtree', sans-serif);
  font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--text-3, #8B7AB0);
}
.eo-loader-meta b { color: var(--eo-accent-2); font-weight: 600; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  #eo-loader { transition: opacity 0.3s linear; }
  .eo-loader-mark, .eo-loader-mark::after, .eo-loader-wordmark { animation: none; opacity: 1; }
  .eo-wm-ch { animation: none; opacity: 0.92; transform: none; }
}

/* ───────────────────────────────────────────────────────────
   2 · SCROLL PROGRESS  (top hairline + optional reading ring)
   ─────────────────────────────────────────────────────────── */
#eo-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px; width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--eo-accent), var(--eo-accent-2) 55%, var(--eo-amber));
  box-shadow: 0 0 7px rgba(148,89,255,0.32);
  z-index: 100001;
  pointer-events: none;
  will-change: transform;
}

/* ───────────────────────────────────────────────────────────
   3 · CUSTOM CURSOR  (desktop / fine-pointer only)
   Enabled only when JS adds html.eo-cursor.
   ─────────────────────────────────────────────────────────── */
html.eo-cursor, html.eo-cursor * { cursor: none !important; }
#eo-cursor, #eo-cursor-dot {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 100002;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform, width, height;
}
#eo-cursor {
  width: 34px; height: 34px;
  border: 1px solid rgba(171,128,255,0.55);
  background: rgba(148,89,255,0.05);
  transition: width 0.25s var(--eo-ease), height 0.25s var(--eo-ease),
              background 0.25s var(--eo-ease), border-color 0.25s var(--eo-ease),
              opacity 0.25s var(--eo-ease);
}
#eo-cursor-dot {
  width: 5px; height: 5px;
  background: var(--eo-accent-2);
  box-shadow: 0 0 6px rgba(148,89,255,0.5);
}
/* hover states set by JS */
html.eo-cursor.eo-cur-hover #eo-cursor {
  width: 56px; height: 56px;
  background: rgba(148,89,255,0.10);
  border-color: rgba(171,128,255,0.9);
}
html.eo-cursor.eo-cur-down #eo-cursor { width: 26px; height: 26px; }
html.eo-cursor.eo-cur-hidden #eo-cursor,
html.eo-cursor.eo-cur-hidden #eo-cursor-dot { opacity: 0; }

/* ───────────────────────────────────────────────────────────
   4 · MAGNETIC / PRESSABLE  (engine sets the translate vars)
   ─────────────────────────────────────────────────────────── */
html.eo-motion .eo-magnetic {
  transition: transform 0.35s var(--eo-ease);
  will-change: transform;
}

/* ───────────────────────────────────────────────────────────
   5 · ENGINE REVEALS  (only for elements the engine opts in;
       never touches existing .reveal so no double-animation)
   ─────────────────────────────────────────────────────────── */
html.eo-motion .eo-rv {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.85s var(--eo-ease),
    transform 0.85s var(--eo-ease),
    filter 0.85s var(--eo-ease);
  transition-delay: var(--eo-d, 0ms);
  will-change: opacity, transform;
}
html.eo-motion .eo-rv.eo-in { opacity: 1; transform: none; }
/* variants */
html.eo-motion .eo-rv-blur { filter: blur(9px); }
html.eo-motion .eo-rv-blur.eo-in { filter: blur(0); }
html.eo-motion .eo-rv-left  { transform: translateX(-30px); }
html.eo-motion .eo-rv-right { transform: translateX(30px); }
html.eo-motion .eo-rv-left.eo-in,
html.eo-motion .eo-rv-right.eo-in { transform: none; }
html.eo-motion .eo-rv-scale { transform: scale(0.94); }
html.eo-motion .eo-rv-scale.eo-in { transform: none; }

/* word-by-word headline reveal (engine wraps words in .eo-word) */
html.eo-motion .eo-split .eo-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.42em);
  transition: opacity 0.7s var(--eo-ease), transform 0.7s var(--eo-ease);
  transition-delay: var(--eo-d, 0ms);
  will-change: opacity, transform;
}
html.eo-motion .eo-split.eo-in .eo-word { opacity: 1; transform: none; }
.eo-word-wrap { display: inline-block; overflow: hidden; vertical-align: top; }

/* ───────────────────────────────────────────────────────────
   6 · TILT  (subtle 3D on curated showcase elements only)
   ─────────────────────────────────────────────────────────── */
html.eo-motion .eo-tilt {
  transform: perspective(1100px)
             rotateX(var(--eo-rx, 0deg))
             rotateY(var(--eo-ry, 0deg))
             translateZ(0);
  transition: transform 0.4s var(--eo-ease);
  transform-style: preserve-3d;
  will-change: transform;
}

/* ───────────────────────────────────────────────────────────
   7 · PARALLAX  (engine writes --eo-px/--eo-py in px)
   ─────────────────────────────────────────────────────────── */
html.eo-motion .eo-parallax {
  transform: translate3d(var(--eo-px, 0px), var(--eo-py, 0px), 0);
  transition: transform 0.5s var(--eo-ease);
  will-change: transform;
}

/* ───────────────────────────────────────────────────────────
   8 · PAGE-TRANSITION VEIL  (fade on internal navigation)
   ─────────────────────────────────────────────────────────── */
#eo-veil {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background:
    radial-gradient(ellipse 900px 700px at 50% 45%, rgba(148,89,255,0.10), transparent 62%),
    var(--bg, #000);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.42s var(--eo-ease), visibility 0.42s var(--eo-ease);
  pointer-events: none;
}
#eo-veil.eo-veil-in { opacity: 1; visibility: visible; }

/* ───────────────────────────────────────────────────────────
   9 · MARQUEE  (opt-in via [data-eo-marquee]; safe no-op otherwise)
   ─────────────────────────────────────────────────────────── */
html.eo-motion [data-eo-marquee] { overflow: hidden; }
html.eo-motion .eo-marquee-track {
  display: inline-flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  will-change: transform;
  animation: eoMarquee var(--eo-mq-dur, 30s) linear infinite;
}
html.eo-motion [data-eo-marquee]:hover .eo-marquee-track { animation-play-state: paused; }
@keyframes eoMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ───────────────────────────────────────────────────────────
   10 · GLASS / HOVER POLISH  (gentle, token-bound, additive)
        A soft moving sheen on the big showcase cards only.
   ─────────────────────────────────────────────────────────── */
html.eo-motion .eo-sheen { position: relative; overflow: hidden; }
html.eo-motion .eo-sheen::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.06), transparent);
  transform: skewX(-18deg);
  transition: left 0.75s var(--eo-ease);
  pointer-events: none;
}
html.eo-motion .eo-sheen:hover::after { left: 130%; }

/* ───────────────────────────────────────────────────────────
   11 · FULL REDUCED-MOTION / TOUCH DISABLE
   Anything not under .eo-motion is already static. Under motion,
   still honour the OS setting as a hard override.
   ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html.eo-motion .eo-rv,
  html.eo-motion .eo-split .eo-word,
  html.eo-motion .eo-tilt,
  html.eo-motion .eo-parallax,
  html.eo-motion .eo-magnetic,
  html.eo-motion .eo-marquee-track,
  html.eo-motion .eo-sheen::after {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  #eo-cursor, #eo-cursor-dot { display: none !important; }
}

/* ───────────────────────────────────────────────────────────
   12 · ACCESSIBILITY · consistent keyboard focus (production QA)
   Visible, on-brand focus ring for keyboard users on every page.
   Pointer users are unaffected (:focus-visible only).
   ─────────────────────────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="switch"]:focus-visible {
  outline: 2px solid var(--eo-accent-2);
  outline-offset: 3px;
  border-radius: 7px;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible) { outline: none; }

/* ───────────────────────────────────────────────────────────
   13 · SITE-WIDE CRAFT LAYER  (added for cross-page consistency)
   Texture, typography, living headline, CTA sheen, card lift.
   Applies on every page. Static texture is always on; motion
   pieces are gated / disabled under prefers-reduced-motion.
   ─────────────────────────────────────────────────────────── */

/* — Texture & depth: whisper-fine film grain over the whole canvas — */
html::after {
  content: '';
  position: fixed; inset: 0;
  z-index: 9997;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

/* — Typography craft: balanced headlines, pretty paragraphs — */
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

/* — Signature: living gradient on hero headline emphases (all pages) — */
.hero h1 em,
.dh-h1 em, .coh-h1 em, .ch-h1 em, .ct-h1 em, .sh-h1 em {
  background: linear-gradient(115deg, var(--eo-accent-2) 0%, var(--eo-amber) 44%, var(--eo-accent-2) 88%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: eoHeroGrad 9s ease-in-out infinite;
}
@keyframes eoHeroGrad {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* — Micro-interaction: light sheen sweeping across primary CTAs — */
html.eo-motion .btn-primary { position: relative; overflow: hidden; isolation: isolate; }
html.eo-motion .btn-primary::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 34%, rgba(255,255,255,0.28) 50%, transparent 66%);
  transform: translateX(-130%);
  transition: transform 0.7s var(--eo-ease);
  pointer-events: none;
}
html.eo-motion .btn-primary:hover::after { transform: translateX(130%); }

/* — Refined card lift on shared content cards — */
.tax-card, .buyer-tile, .sov-card {
  transition: transform 0.3s var(--eo-ease), border-color 0.3s var(--eo-ease), box-shadow 0.3s var(--eo-ease);
}
.tax-card:hover, .buyer-tile:hover, .sov-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 38px -14px rgba(148,89,255,0.30);
}

/* — Respect reduced motion: keep gradient static, drop the sheen — */
@media (prefers-reduced-motion: reduce) {
  .hero h1 em,
  .dh-h1 em, .coh-h1 em, .ch-h1 em, .ct-h1 em, .sh-h1 em { animation: none; }
  html.eo-motion .btn-primary::after { display: none; }
}