/* ============================================================
   FANCY — futuristic overlay effects
   Layered ON TOP of styles.css. Loads AFTER it.
   ============================================================ */

/* Page enter — opacity only (transform on body breaks position:fixed for cursor) */
@keyframes pageEnter {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body { animation: pageEnter .8s var(--ease) both; }

/* ============================================================
   SCROLL PROGRESS BAR
   ============================================================ */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #5B8EE8, #7BA8F0, #A8C5F5);
  z-index: 100;
  box-shadow: 0 0 12px rgba(91, 142, 232, 0.6);
  transition: width 0.05s linear;
}

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  body { cursor: none; }
  a, button, input, textarea, select, [role="tab"], [data-tab], [data-dtab], [data-billing], .faq-q { cursor: none; }
}
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.cursor-dot {
  width: 6px; height: 6px;
  background: #7BA8F0;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(91, 142, 232, 0.9);
  transition: transform 0.1s var(--ease), opacity 0.2s;
}
.cursor-ring {
  width: 36px; height: 36px;
  border: 1px solid rgba(91, 142, 232, 0.6);
  border-radius: 50%;
  transition: transform 0.18s var(--ease), width 0.25s var(--ease), height 0.25s var(--ease), border-color 0.25s var(--ease), opacity 0.2s;
}
.cursor-ring.hover {
  width: 60px; height: 60px;
  border-color: #7BA8F0;
  background: rgba(91, 142, 232, 0.08);
}
@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* ============================================================
   NOISE / GRAIN OVERLAY (very subtle)
   ============================================================ */
.noise-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.025;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
}

/* ============================================================
   HERO — particle canvas + orbs + glow
   ============================================================ */
.hero {
  isolation: isolate;
}
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.7;
}
.hero-orbs {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}
.hero-orbs .orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.45;
  animation: orbFloat 18s ease-in-out infinite;
}
.hero-orbs .orb-1 {
  width: 480px; height: 480px;
  background: radial-gradient(circle, #5B8EE8 0%, transparent 70%);
  top: 10%; right: -10%;
  animation-delay: 0s;
}
.hero-orbs .orb-2 {
  width: 380px; height: 380px;
  background: radial-gradient(circle, #3D6FCC 0%, transparent 70%);
  bottom: -20%; left: -8%;
  animation-delay: -6s;
}
.hero-orbs .orb-3 {
  width: 320px; height: 320px;
  background: radial-gradient(circle, #7BA8F0 0%, transparent 70%);
  top: 50%; left: 40%;
  animation-delay: -12s;
  opacity: 0.25;
}
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(40px, -30px) scale(1.08); }
  66%      { transform: translate(-30px, 40px) scale(0.94); }
}

/* ============================================================
   LIVE STATUS PILL (above headline)
   ============================================================ */
.live-status {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 8px 16px 8px 14px;
  background: rgba(91, 142, 232, 0.08);
  border: 1px solid rgba(91, 142, 232, 0.3);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream-100);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}
.live-status::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(90deg, transparent, rgba(91, 142, 232, 0.4), transparent);
  animation: shimmer 3s linear infinite;
}
@keyframes shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}
.live-status .pulse {
  position: relative;
  width: 8px; height: 8px;
  z-index: 1;
}
.live-status .pulse::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #5B8EE8;
  border-radius: 50%;
}
.live-status .pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #5B8EE8;
  border-radius: 50%;
  animation: pulseRing 1.8s ease-out infinite;
}
@keyframes pulseRing {
  0%   { transform: scale(1);   opacity: 0.8; }
  100% { transform: scale(3.5); opacity: 0; }
}
.live-status .txt { position: relative; z-index: 1; }
.live-status .txt em { color: #5B8EE8; font-style: normal; }

/* ============================================================
   HEADLINE GLOW + GRADIENT TEXT
   ============================================================ */
.display-xl em {
  background: linear-gradient(135deg, #5B8EE8 0%, #7BA8F0 50%, #A8C5F5 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-size: 200% 200%;
  animation: gradShift 6s ease-in-out infinite;
  position: relative;
}
@keyframes gradShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Glitch on hover for big serif italic spans */
.glitch:hover {
  animation: glitch 0.6s steps(2, end);
}
@keyframes glitch {
  0% { transform: translate(0); text-shadow: none; }
  20% { transform: translate(-2px, 1px); text-shadow: 2px 0 rgba(255,80,80,0.5), -2px 0 rgba(91,142,232,0.6); }
  40% { transform: translate(2px, -1px); text-shadow: -2px 0 rgba(255,80,80,0.5), 2px 0 rgba(91,142,232,0.6); }
  60% { transform: translate(-1px, 1px); text-shadow: 1px 0 rgba(91,142,232,0.5); }
  100% { transform: translate(0); text-shadow: none; }
}

/* ============================================================
   LIVE PRICE TICKER
   ============================================================ */
.price-ticker {
  position: relative;
  margin-top: 56px;
  padding: 18px 0;
  border-top: 1px solid rgba(91, 142, 232, 0.18);
  border-bottom: 1px solid rgba(91, 142, 232, 0.18);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}
.price-ticker .stream {
  display: flex;
  gap: 56px;
  animation: tickerScroll 50s linear infinite;
  white-space: nowrap;
  width: max-content;
}
.price-ticker .item {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
}
.price-ticker .item strong {
  color: var(--cream-100);
  font-weight: 600;
  margin-right: 4px;
}
.price-ticker .item .price {
  font-variant-numeric: tabular-nums;
  color: var(--cream-100);
}
.price-ticker .item .pct.up   { color: #5B8EE8; }
.price-ticker .item .pct.down { color: #C97676; }
.price-ticker .item .pct::before {
  content: "▲";
  font-size: 9px;
  margin-right: 3px;
}
.price-ticker .item .pct.down::before {
  content: "▼";
}
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   STATS — neon glow on numbers, animated counter
   ============================================================ */
.stats-band {
  position: relative;
  overflow: hidden;
}
.stats-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent,
    rgba(91, 142, 232, 0.06) 50%,
    transparent);
  animation: sweepBg 8s linear infinite;
}
@keyframes sweepBg {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}
.stat .n {
  position: relative;
  transition: text-shadow 0.4s var(--ease);
}
.stat:hover .n {
  text-shadow: 0 0 20px rgba(91, 142, 232, 0.6);
}

/* ============================================================
   SPOTLIGHT CARDS (mouse-tracking radial gradient)
   ============================================================ */
.method-card,
.why-card,
.discord-card,
.test-card,
.pkg {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform 0.4s var(--ease), border-color 0.3s var(--ease);
}
.method-card::before,
.why-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    400px circle at var(--mx, 50%) var(--my, 50%),
    rgba(91, 142, 232, 0.12),
    transparent 50%
  );
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
  z-index: -1;
}
.method-card:hover::before,
.why-card:hover::before {
  opacity: 1;
}
.method-card:hover,
.why-card:hover {
  border-color: rgba(91, 142, 232, 0.4);
}

/* Card 3D tilt */
.tilt {
  transform-style: preserve-3d;
  transition: transform 0.3s var(--ease);
}

/* ============================================================
   MAGNETIC BUTTONS + SHEEN
   ============================================================ */
.btn {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s var(--ease), box-shadow 0.3s var(--ease), background 0.25s var(--ease);
}
.btn::before {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 100%);
  transition: left 0.6s var(--ease);
  pointer-events: none;
}
.btn:hover::before { left: 100%; }
.btn-gold:hover {
  box-shadow: 0 8px 32px rgba(91, 142, 232, 0.45), 0 0 0 1px rgba(91, 142, 232, 0.4);
}

/* ============================================================
   CHARTS — entrance animation
   ============================================================ */
.chart .candle {
  opacity: 0;
  transform: translateY(8px);
  transform-origin: center;
}
.chart.animate .candle {
  animation: candleIn 0.6s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 25ms);
}
@keyframes candleIn {
  from { opacity: 0; transform: translateY(8px) scaleY(0.5); }
  to   { opacity: 1; transform: translateY(0) scaleY(1); }
}
.chart .anno {
  opacity: 0;
}
.chart.animate .anno {
  animation: fadeIn 0.6s var(--ease) forwards;
  animation-delay: 1.1s;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Bias dial — needle rotate animation */
.bias-chart .needle {
  transform-origin: var(--cx, 240px) var(--cy, 250px);
  transform: rotate(-90deg);
}
.bias-chart.animate .needle {
  animation: needleSwing 1.4s cubic-bezier(.34,1.56,.64,1) forwards;
  animation-delay: 0.3s;
}
@keyframes needleSwing {
  from { transform: rotate(-90deg); }
  to   { transform: rotate(var(--angle, 39.6deg)); }
}
.bias-chart .arc-fg {
  stroke-dasharray: var(--arc-len, 471);
  stroke-dashoffset: var(--arc-len, 471);
}
.bias-chart.animate .arc-fg {
  animation: arcDraw 1.4s cubic-bezier(.34,1.56,.64,1) forwards;
  animation-delay: 0.3s;
}
@keyframes arcDraw {
  to { stroke-dashoffset: var(--arc-final, 264); }
}
.bias-chart .score-text,
.bias-chart .status-text,
.bias-chart .tick-label,
.bias-chart .tick {
  opacity: 0;
}
.bias-chart.animate .score-text,
.bias-chart.animate .status-text {
  animation: fadeIn 0.5s var(--ease) forwards;
  animation-delay: 1.2s;
}
.bias-chart.animate .tick-label,
.bias-chart.animate .tick {
  animation: fadeIn 0.4s var(--ease) forwards;
  animation-delay: 0.5s;
}

/* ============================================================
   DISCORD CARD — animated border + glow
   ============================================================ */
.discord-card {
  position: relative;
  background: rgba(26, 34, 54, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.discord-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(
    var(--angle, 0deg),
    rgba(91, 142, 232, 0.7) 0%,
    transparent 30%,
    transparent 70%,
    rgba(91, 142, 232, 0.7) 100%
  );
  z-index: -1;
  animation: rotateBorder 8s linear infinite;
}
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotateBorder {
  to { --angle: 360deg; }
}

/* ============================================================
   PRODUCT BLOCKS — chart hover glow
   ============================================================ */
.product-block .pb-visual {
  position: relative;
  transition: transform 0.5s var(--ease);
}
.product-block:hover .pb-visual {
  transform: translateY(-4px);
}
.product-block .pb-visual::before {
  content: "";
  position: absolute;
  inset: -40px;
  background: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(91, 142, 232, 0.08), transparent 60%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
  z-index: -1;
}
.product-block:hover .pb-visual::before {
  opacity: 1;
}

/* ============================================================
   SECTION DIVIDER WITH ANIMATED LINE
   ============================================================ */
.section + .section,
.section + .motif-band,
.motif-band + .section,
.stats-band + .compat,
.section.products-section {
  position: relative;
}
.section + .section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 60px;
  background: linear-gradient(180deg, transparent, var(--champagne), transparent);
  opacity: 0.3;
}

/* ============================================================
   GALLERY TABS — hover/active enhancements
   ============================================================ */
.tab {
  transition: color 0.2s var(--ease), background 0.2s var(--ease), letter-spacing 0.3s var(--ease);
}
.tab:hover {
  letter-spacing: 0.22em;
}
.tab.active {
  box-shadow: inset 0 -2px 0 var(--champagne);
}

/* ============================================================
   FAQ — hover background gradient
   ============================================================ */
.faq-item:hover {
  background: linear-gradient(90deg, rgba(91, 142, 232, 0.04), transparent 70%);
}

/* ============================================================
   FORM INPUTS — focus glow
   ============================================================ */
.field input:focus,
.field textarea:focus,
.field select:focus {
  box-shadow: 0 0 0 3px rgba(91, 142, 232, 0.18), 0 0 30px rgba(91, 142, 232, 0.12);
}

/* ============================================================
   NAV — animated underline accent
   ============================================================ */
.nav-links a {
  position: relative;
}
.nav-links a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 16px;
  width: 3px; height: 3px;
  background: var(--champagne);
  border-radius: 50%;
  transform: translate(-12px, -50%);
  opacity: 0;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.nav-links a:hover::before {
  opacity: 1;
  transform: translate(-12px, -50%) scale(1.4);
}

/* ============================================================
   VIDEO container — glow accent
   ============================================================ */
.hero-video {
  position: relative;
  box-shadow:
    0 0 0 1px rgba(91, 142, 232, 0.25),
    0 20px 60px -20px rgba(91, 142, 232, 0.3),
    0 0 80px -20px rgba(91, 142, 232, 0.2);
  transition: box-shadow 0.5s var(--ease);
}
.hero-video::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 1px solid transparent;
  background: linear-gradient(
    var(--vangle, 0deg),
    transparent 0%,
    rgba(91, 142, 232, 0.6) 25%,
    transparent 50%,
    transparent 75%,
    rgba(91, 142, 232, 0.6) 100%
  ) border-box;
  -webkit-mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  animation: rotateVangle 6s linear infinite;
  opacity: 0.7;
}
@property --vangle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotateVangle {
  to { --vangle: 360deg; }
}

/* ============================================================
   BRAND MARK — subtle pulse
   ============================================================ */
.brand-mark {
  position: relative;
}
.brand-mark::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--champagne);
  opacity: 0;
  animation: brandPulse 3s ease-out infinite;
  pointer-events: none;
}
@keyframes brandPulse {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* ============================================================
   REVEAL — enhanced with stagger
   ============================================================ */
.reveal {
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.in > * {
  opacity: 1;
  transform: translateY(0);
}
.reveal.in > *:nth-child(1) { transition-delay: 0s; }
.reveal.in > *:nth-child(2) { transition-delay: 0.1s; }
.reveal.in > *:nth-child(3) { transition-delay: 0.2s; }
.reveal.in > *:nth-child(4) { transition-delay: 0.3s; }
.reveal.in > *:nth-child(5) { transition-delay: 0.4s; }

/* ============================================================
   GRID BACKDROP (subtle moving grid)
   ============================================================ */
.grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(91, 142, 232, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 142, 232, 0.06) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 0%, transparent 80%);
  animation: gridScroll 25s linear infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes gridScroll {
  from { background-position: 0 0; }
  to   { background-position: 60px 60px; }
}

/* ============================================================
   MOTIF BAND — animated background
   ============================================================ */
.motif-band {
  position: relative;
  overflow: hidden;
}
.motif-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 40% 60% at 50% 50%, rgba(91, 142, 232, 0.08), transparent 70%);
  animation: motifGlow 8s ease-in-out infinite;
}
@keyframes motifGlow {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.1); }
}

/* ============================================================
   BANNER — animated mesh background
   ============================================================ */
.banner {
  position: relative;
  overflow: hidden;
}
.banner::before {
  background:
    radial-gradient(ellipse 50% 70% at 30% 0%, rgba(91, 142, 232, 0.18), transparent 70%),
    radial-gradient(ellipse 60% 80% at 70% 100%, rgba(125, 168, 240, 0.12), transparent 70%),
    var(--noir-900);
  animation: meshShift 12s ease-in-out infinite;
}
@keyframes meshShift {
  0%, 100% { background-position: 0% 0%, 100% 100%, 0 0; }
  50%      { background-position: 100% 0%, 0% 100%, 0 0; }
}