/* ═══════════════════════════════════════════════════════════════
   GIANT TRADERS ACADEMY — premium.css  (design + motion layer)
   Loads LAST on every page. Overrides visuals only; markup, content,
   forms and scripts are untouched. Remove the <link> to roll back.
   Motion language: aurora glow, cursor spotlight, border beam, shimmer,
   edge-faded marquee. All of it respects prefers-reduced-motion.
═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;600;700;800&display=swap');

@property --beam { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root {
  --ink:      #070A12;
  --glass:    rgba(255,255,255,0.04);
  --glass-br: rgba(255,255,255,0.09);
  --glow-gold: rgba(245,166,35,0.16);
  --glow-teal: rgba(0,212,170,0.12);
  --ease-out: cubic-bezier(.22,1,.36,1);
  --font-h: 'Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;
  --fh: var(--font-h);
}

/* ── Base ─────────────────────────────────────────────────── */
body { background: var(--ink); }
h1, h2 { letter-spacing: -0.035em; text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

/* Scroll progress: gold→teal */
#scrollProg, #gta-scroll-bar { background: linear-gradient(90deg, var(--gold), var(--teal)) !important; height: 3px; }

/* ── Nav: floating glass ─────────────────────────────────── */
body #mainNav {
  background: rgba(7,10,18,0.55);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--glass-br);
  transition: background .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
body #mainNav.scrolled { background: rgba(7,10,18,0.86); box-shadow: 0 10px 40px rgba(0,0,0,.45); }
body .nav-links a { position: relative; }
body .nav-links a:not(.nav-cta)::after {
  content: ''; position: absolute; left: 50%; bottom: -6px; width: 0; height: 2px;
  background: var(--gold); border-radius: 2px; transform: translateX(-50%);
  transition: width .35s var(--ease-out);
}
body .nav-links a:not(.nav-cta):hover::after,
body .nav-links a.active::after { width: 18px; }

/* ── Hero: aurora + dotted grid ──────────────────────────── */
body .hero { position: relative; isolation: isolate; background: var(--ink); overflow: hidden; }
body .hero::before {            /* drifting aurora */
  content: ''; position: absolute; inset: -20% -10% auto -10%; height: 130%; z-index: -2;
  background:
    radial-gradient(40% 35% at 18% 28%, var(--glow-gold), transparent 70%),
    radial-gradient(38% 34% at 82% 22%, var(--glow-teal), transparent 70%),
    radial-gradient(45% 40% at 55% 85%, rgba(124,92,252,.10), transparent 70%);
  animation: aurora 22s ease-in-out infinite alternate;
  filter: blur(30px);
}
body .hero::after {             /* dotted glow grid, masked to centre */
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.2px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 40%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse 60% 55% at 50% 40%, #000 20%, transparent 75%);
}
@keyframes aurora { to { transform: translate3d(3%, 4%, 0) scale(1.08) rotate(2deg); } }
body .hero-orb1, body .hero-orb2, body .hero-grid { opacity: .35; }   /* grain keeps its original 2.5% */

/* Hero headline: one orchestrated word-by-word reveal (premium.js adds spans) */
.pw { display: inline-block; opacity: 0; filter: blur(10px); transform: translateY(14px);
      animation: pwIn .8s var(--ease-out) forwards; animation-delay: calc(var(--i) * 70ms + 150ms); }
@keyframes pwIn { to { opacity: 1; filter: blur(0); transform: none; } }

/* ── Buttons: shimmer sweep ──────────────────────────────── */
body .btn-gold, body .enroll-btn, body .nav-cta { position: relative; overflow: hidden; }
body .btn-gold::after, body .enroll-btn::after {
  content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg); animation: shimmer 4.5s ease-in-out infinite;
}
@keyframes shimmer { 0%,60% { left: -120%; } 100% { left: 160%; } }
body .btn-gold { animation: none; }   /* retire the old pulsing glow; shimmer replaces it */

/* ── Cards: cursor spotlight (vars set by premium.js) ────── */
.course-card, .change-card, .pnl-card, .how-step, .stat-cell, .faq-item, .testi-card {
  position: relative; isolation: isolate;
  background-color: var(--glass);
  border: 1px solid var(--glass-br);
  transition: border-color .4s var(--ease-out), transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.course-card::before, .change-card::before, .pnl-card::before, .how-step::before,
.stat-cell::before, .faq-item::before, .testi-card::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(245,166,35,.13), transparent 60%);
}
.course-card:hover::before, .change-card:hover::before, .pnl-card:hover::before,
.how-step:hover::before, .stat-cell:hover::before, .faq-item:hover::before, .testi-card:hover::before { opacity: 1; }
.course-card:hover, .change-card:hover, .how-step:hover { border-color: rgba(245,166,35,.35); }

/* Border beam on the featured (first) course card */
.courses-section .course-card:first-child { border-color: transparent; }
.courses-section .course-card:first-child::after {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--beam), transparent 0 70%, var(--gold) 85%, var(--teal) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: beam 6s linear infinite;
}
@keyframes beam { to { --beam: 360deg; } }

/* Stats: bigger, calmer numbers */
.stat-num { font-family: var(--font-h); font-weight: 800; letter-spacing: -0.04em;
  background: linear-gradient(180deg,#fff 30%, var(--gold) 140%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ── Marquees: edge fade + pause on hover ────────────────── */
.marquee-bar, .ticker-bar {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-bar:hover .marquee-track, .ticker-bar:hover .ticker-track { animation-play-state: paused; }

/* Hero ticker holds static sample numbers — label it honestly */
.ticker-bar { position: relative; }
.ticker-bar::before {
  content: 'Sample data · not live'; position: absolute; z-index: 2; top: 50%; left: 14px; transform: translateY(-50%);
  font: 600 10px/1 var(--font-m); color: var(--muted); background: rgba(7,10,18,.9); padding: 5px 9px; border-radius: 99px; border: 1px solid var(--glass-br);
}

/* ── Risk disclosure strip (injected by premium.js) ───────── */
.gta-risk { background: #05070D; border-top: 1px solid var(--glass-br); padding: 28px 0; }
.gta-risk .container { display: grid; gap: 8px; }
.gta-risk strong { color: var(--muted2); font-size: 13px; font-family: var(--font-h); }
.gta-risk p { font-size: 12px; line-height: 1.7; color: var(--muted); max-width: 980px; }

/* ── Responsive / motion safety ──────────────────────────── */
@media (max-width: 720px) {
  body .hero::before { animation: none; }
  .ticker-bar::before { display: none; }
  .courses-section .course-card:first-child::after { animation-duration: 10s; }
}
@media (prefers-reduced-motion: reduce) {
  body .hero::before, .courses-section .course-card:first-child::after,
  body .btn-gold::after, body .enroll-btn::after { animation: none !important; }
  .pw { animation: none; opacity: 1; filter: none; transform: none; }
  .course-card::before, .change-card::before, .pnl-card::before { display: none; }
}


/* ═══════════════════════════════════════════════════════════════
   TEXT MOTION PACK  (v2)
   1 hero headline: flowing gradient on accent words
   2 hero sequence: tagline decode → sub → rotator → CTAs → trust
   3 section titles: masked word-by-word rise on scroll
   4 paragraphs: words light up as you scroll
   5 eyebrow labels: number-decode scramble
═══════════════════════════════════════════════════════════════ */
@keyframes gradFlow { to { background-position: -250% 0; } }
@keyframes riseBlur { from { opacity: 0; filter: blur(8px); transform: translateY(18px); } to { opacity: 1; filter: none; transform: none; } }

/* 1 · Accent words flow like a live price line */
.hero h1 .accent-gold .pw, .hero h1 .accent-teal .pw {
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  background-size: 250% 100%;
  animation: pwIn .8s var(--ease-out) calc(var(--i) * 70ms + 150ms) forwards, gradFlow 6s linear infinite;
}
.hero h1 .accent-gold .pw { background-image: linear-gradient(100deg, #E8901A, #FFE39A, #F5A623, #E8901A); }
.hero h1 .accent-teal .pw { background-image: linear-gradient(100deg, #00B894, #9CFFE9, #00D4AA, #00B894); }

/* 2 · Hero supporting copy arrives in sequence after the headline */
.js-motion .hero-tagline  { animation: riseBlur .9s var(--ease-out) .85s both; }
.js-motion .hero-sub      { animation: riseBlur .9s var(--ease-out) 1.05s both; }
.js-motion .hero-rotator  { animation: riseBlur .9s var(--ease-out) 1.2s both; }
.js-motion .hero-cta-group{ animation: riseBlur .9s var(--ease-out) 1.35s both; }
.js-motion .hero-trust    { animation: riseBlur .9s var(--ease-out) 1.55s both; }

/* Rotating keyword line */
.hero-rotator { font: 600 clamp(18px, 2.2vw, 24px)/1.4 var(--font-h); color: var(--muted2); margin: -8px auto 34px; text-align: center; }
.rot { display: inline-grid; vertical-align: bottom; overflow: hidden; height: 1.4em; padding: 0 .15em; }
.rot > span { grid-area: 1 / 1; opacity: 0; transform: translateY(100%); transition: transform .6s var(--ease-out), opacity .6s var(--ease-out);
  color: var(--gold); white-space: nowrap; }
.rot > span.on  { opacity: 1; transform: none; }
.rot > span.off { opacity: 0; transform: translateY(-100%); }
.rot > span:nth-child(even) { color: var(--teal); }

/* 3 · Masked word rise (premium.js wraps words) */
.sw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .16em; margin-bottom: -.16em; }
.sw > .swi { display: inline-block; transform: translateY(115%) rotate(5deg); transform-origin: 0 100%;
  transition: transform 1s var(--ease-out); transition-delay: calc(var(--i) * 55ms); }
.tm-in .sw > .swi { transform: none; }

/* 4 · Scroll-linked word fill */
.sf { transition: opacity .25s linear; will-change: opacity; }

/* 5 · Decode labels keep their width while scrambling */
.decode { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .hero h1 .accent-gold .pw, .hero h1 .accent-teal .pw { animation: none; }
  .js-motion .hero-tagline, .js-motion .hero-sub, .js-motion .hero-rotator,
  .js-motion .hero-cta-group, .js-motion .hero-trust { animation: none; }
  .sw > .swi { transform: none; transition: none; }
  .sf { opacity: 1 !important; }
  .rot > span { transition: none; }
}

/* Hero headline: slightly smaller cap + wider measure so it sets in 3 lines even on the fallback font */
body .hero h1 { font-size: clamp(40px, 6.2vw, 84px); max-width: 1040px; letter-spacing: -0.035em; line-height: 1; }
@media (max-width: 720px) { body .hero h1 { font-size: clamp(34px, 10.5vw, 52px); } }