/* ============================================
   FX 3D · Particles, Tilt, Parallax, Counters
   ============================================ */

/* Hero canvas particles */
.hero { perspective: 1400px; transform-style: preserve-3d; }
.hero-particles {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
}

/* 3D parallax title */
.hero-title {
  transform-style: preserve-3d;
  will-change: transform;
}
.hero-title .layer {
  display: inline-block;
  transition: transform .15s linear;
  transform-style: preserve-3d;
}

/* Tilt cards (case + flow + founder + scen) */
.tilt {
  transform-style: preserve-3d;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  will-change: transform;
}
.tilt-inner { transform-style: preserve-3d; }
.tilt:hover {
  box-shadow: 0 30px 60px -20px rgba(212,175,55,0.18), 0 18px 30px -15px rgba(0,0,0,0.6);
}
.tilt .lift { transition: transform .3s var(--ease); }
.tilt:hover .lift { transform: translateZ(40px); }

/* Number explode */
.explode {
  display: inline-flex;
  font-variant-numeric: tabular-nums;
}
.explode .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(80px) rotateX(-90deg) scale(0.6);
  transform-origin: 50% 100%;
  transition: opacity .8s var(--ease-out), transform .9s var(--ease-out);
  will-change: transform, opacity;
}
.explode.in .ch { opacity: 1; transform: translateY(0) rotateX(0) scale(1); }

/* Re-paint the gold gradient on each character span — parent's
   -webkit-text-fill-color: transparent is inherited but background isn't,
   so children render invisible without this. */
.gold-grad .explode .ch,
.figure-3d.gold-grad .ch {
  background: linear-gradient(135deg, #d4af37 0%, #f4d03f 50%, #b8941f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Counter spin reel */
.reel {
  display: inline-flex;
  font-variant-numeric: tabular-nums;
  perspective: 600px;
}
.reel .digit {
  display: inline-block;
  position: relative;
  transform-style: preserve-3d;
  height: 1em;
  overflow: hidden;
}
.reel .digit::after {
  content: attr(data-final);
  display: block;
  transform: translateY(0);
}

/* Floating 3D orbs in section bg */
.orbs {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.6;
  animation: orbFloat 16s ease-in-out infinite;
}
.orb.o1 { width: 480px; height: 480px; top: -120px; left: -120px; background: radial-gradient(circle, rgba(212,175,55,0.30), transparent 60%); animation-delay: 0s; }
.orb.o2 { width: 380px; height: 380px; bottom: -120px; right: -80px; background: radial-gradient(circle, rgba(244,208,63,0.22), transparent 60%); animation-delay: -6s; }
.orb.o3 { width: 320px; height: 320px; top: 40%; right: 30%; background: radial-gradient(circle, rgba(212,175,55,0.18), transparent 60%); animation-delay: -10s; }
@keyframes orbFloat {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  33% { transform: translate3d(40px, -30px, 0) scale(1.1); }
  66% { transform: translate3d(-30px, 40px, 0) scale(0.95); }
}

/* Big number 3D depth */
.figure-3d {
  transform-style: preserve-3d;
  position: relative;
  display: inline-block;
}
.figure-3d::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(212,175,55,0.18), transparent 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  transform: translateZ(-30px) translateY(8px);
  filter: blur(8px);
  z-index: -1;
}

/* Marquee speed up on hover */
.strip:hover .strip-track { animation-duration: 20s; }

/* Scroll-driven peaks line draw */
.peaks-svg path[stroke="#d4af37"] {
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
  transition: stroke-dashoffset 2.4s var(--ease-out);
}
.peaks-chart.in .peaks-svg path[stroke="#d4af37"] { stroke-dashoffset: 0; }

/* Cursor glow follower */
.cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,55,0.10), transparent 60%);
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  transition: opacity .3s ease;
  opacity: 0;
}
body:hover .cursor-glow { opacity: 1; }
@media (max-width: 900px) { .cursor-glow { display: none; } }

/* Rotate gold rings (decorative) */
.gold-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--gold-line);
  pointer-events: none;
  animation: spin 30s linear infinite;
}
.gold-ring.r2 { animation-direction: reverse; animation-duration: 50s; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Section divider line draw */
.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-line), transparent);
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform 1.2s var(--ease-out);
}
.divider.in { transform: scaleX(1); }

/* Number slide enhanced */
.number-slide { perspective: 1200px; position: relative; }
.number-slide .figure { transform-style: preserve-3d; }
.number-slide .ring-bg {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  width: min(900px, 80vw);
  height: min(900px, 80vw);
}
.number-slide .ring-bg .gr {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--gold-line);
  opacity: 0.4;
}
.number-slide .ring-bg .gr.b { inset: 14%; opacity: 0.25; }
.number-slide .ring-bg .gr.c { inset: 28%; opacity: 0.15; }

/* Case card depth */
.case-figure {
  transform-style: preserve-3d;
}
.case-figure .figmark span {
  transition: transform .4s var(--ease), text-shadow .4s var(--ease);
  display: inline-block;
}
.case-figure:hover .figmark span {
  transform: scale(1.06);
  text-shadow: 0 0 60px rgba(212,175,55,0.5);
}

/* Magnetic CTA */
.magnetic { transition: transform .2s var(--ease); will-change: transform; }