/**
 * LoreMarkets — Cinematic Animations
 * Carl (UX/UI) · Yosuf (Dev) — Season I
 *
 * The Exchange has stood for three thousand years.
 * The website should feel that old and that alive.
 *
 * Index:
 *   1.  Core keyframes
 *   2.  Hero cinematic entrance
 *   3.  Floating / levitation effects
 *   4.  Oracle section glow effects
 *   5.  Asset card hover magic
 *   6.  Feature card hover
 *   7.  Section header reveal
 *   8.  Scroll-triggered stagger utility
 *   9.  Leaderboard pulse
 *  10.  Button interaction effects
 *  11.  Timeline pulse
 *  12.  Page transition
 *  13.  Reduced motion overrides
 */


/* ════════════════════════════════════════════════════════
   1. CORE KEYFRAMES
   ════════════════════════════════════════════════════════ */

/* Fade up — standard reveal */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Fade in — opacity only */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Scale in from centre */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1);    }
}

/* Slide in from left */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0);     }
}

/* Slide in from right */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0);    }
}

/* Slow float — perpetual levitation */
@keyframes float {
  0%, 100% { transform: translateY(0px);   }
  50%       { transform: translateY(-10px); }
}

/* Float with slight rotation */
@keyframes floatRotate {
  0%   { transform: translateY(0px)    rotate(-1deg); }
  50%  { transform: translateY(-12px)  rotate(1deg);  }
  100% { transform: translateY(0px)    rotate(-1deg); }
}

/* Pulsing glow */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(245, 192, 48, 0.10); }
  50%       { box-shadow: 0 0 50px rgba(245, 192, 48, 0.30); }
}

/* Teal glow pulse */
@keyframes tealGlowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(0, 236, 214, 0.08); }
  50%       { box-shadow: 0 0 50px rgba(0, 236, 214, 0.28); }
}

/* Text shimmer — gold highlight sweep */
@keyframes goldShimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

/* Border rotate — magical border */
@keyframes borderRotate {
  from { --border-angle: 0deg; }
  to   { --border-angle: 360deg; }
}

/* Rune glow — for watermark icons */
@keyframes runeBreath {
  0%, 100% { opacity: 0.06; filter: blur(0px); }
  50%       { opacity: 0.12; filter: blur(1px); }
}

/* Crack / lightning flash — for dramatic reveals */
@keyframes lightningFlash {
  0%   { opacity: 0;    }
  5%   { opacity: 0.8;  }
  10%  { opacity: 0.2;  }
  15%  { opacity: 0.9;  }
  20%  { opacity: 0;    }
  100% { opacity: 0;    }
}

/* Typing cursor blink */
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Ticker reveal */
@keyframes tickerReveal {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: translateY(0);     }
}

/* Number count up (CSS only version for non-JS fallback) */
@keyframes countSwell {
  0%   { transform: scale(1);    }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1);    }
}

/* Oracle whisper ripple */
@keyframes oracleRipple {
  0%   { transform: scale(1);   opacity: 0.4; }
  100% { transform: scale(2.4); opacity: 0;   }
}


/* ════════════════════════════════════════════════════════
   2. HERO CINEMATIC ENTRANCE
   Staggered — each element arrives with a delay.
   The logo leads. The eyebrow follows. Then the title.
   Then subtitle. Then CTAs. Then stats last.
   ════════════════════════════════════════════════════════ */

.hero__logo {
  animation: scaleIn 1.0s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
  filter: drop-shadow(0 0 48px rgba(245, 192, 48, 0.18));
}

.hero__eyebrow {
  animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}

.hero__title {
  animation: fadeUp 1.0s cubic-bezier(0.16, 1, 0.3, 1) 0.65s both;
}

/* The gold text in hero title gets a shimmer after appearing */
.hero__title .gold {
  background: linear-gradient(
    90deg,
    #f5c030 0%, #ffe085 40%, #f5c030 60%, #c8960a 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation:
    fadeUp 1.0s cubic-bezier(0.16, 1, 0.3, 1) 0.65s both,
    goldShimmer 3.5s linear 1.8s infinite;
}

.hero__subtitle {
  animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.95s both;
}

.hero__actions {
  animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.15s both;
}

.hero__stats {
  animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.4s both;
}

/* Stat values swell when the counter finishes */
.hero__stat-value {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hero__stat-value.counted {
  animation: countSwell 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Oracle ticker entrance */
.oracle-ticker {
  animation: tickerReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}


/* ════════════════════════════════════════════════════════
   3. FLOATING / LEVITATION EFFECTS
   The Exchange is ancient and arcane. Elements should
   breathe, drift, and levitate as if alive.
   ════════════════════════════════════════════════════════ */

/* Hero logo levitates */
.hero__logo {
  animation:
    scaleIn 1.0s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both,
    float 7s ease-in-out 1.2s infinite;
}

/* Oracle watermark breathes */
.oracle__watermark {
  animation: runeBreath 5s ease-in-out infinite;
}

/* Assets section watermark breathes slower */
.assets__watermark {
  animation: runeBreath 8s ease-in-out 1s infinite;
}

/* Oracle feed dot pulses in its own rhythm */
.oracle__feed-dot {
  position: relative;
}
.oracle__feed-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--color-brand-teal, #00ecd6);
  animation: oracleRipple 2s ease-out infinite;
}


/* ════════════════════════════════════════════════════════
   4. ORACLE SECTION — CHAMBER ATMOSPHERE
   When the Oracle section comes into view, the whole
   section feels like entering a different, deeper room.
   ════════════════════════════════════════════════════════ */

/* Oracle section entrance */
.oracle__text.reveal.revealed {
  animation: slideInLeft 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.oracle__feed.reveal.revealed {
  animation: slideInRight 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

/* Oracle feed glow */
.oracle__feed {
  transition: box-shadow 0.4s ease;
}
.oracle__feed:hover {
  box-shadow:
    0 0 60px rgba(245, 192, 48, 0.10),
    0 4px 32px rgba(0, 0, 0, 0.4);
}

/* Oracle event cards — hover brightens them */
.oracle__event {
  transition: transform 0.25s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
              box-shadow 0.25s ease,
              border-left-color 0.25s ease;
}
.oracle__event:hover {
  transform: translateX(4px);
}

/* Phase labels get a subtle glow on their respective colours */
.oracle__event-phase--whisper {
  transition: text-shadow 0.3s ease;
}
.oracle__event:hover .oracle__event-phase--whisper {
  text-shadow: 0 0 12px rgba(245, 192, 48, 0.6);
}
.oracle__event:hover .oracle__event-phase--word {
  text-shadow: 0 0 16px rgba(245, 192, 48, 1.0);
}
.oracle__event:hover .oracle__event-phase--settling {
  text-shadow: 0 0 12px rgba(0, 236, 214, 0.6);
}


/* ════════════════════════════════════════════════════════
   5. ASSET CARD HOVER MAGIC
   Each card responds to hover with a glow that matches
   its volatility colour identity.
   ════════════════════════════════════════════════════════ */

.asset-card {
  transition:
    transform 0.30s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.30s ease,
    border-color 0.30s ease;
}

/* Extreme — violet lightning glow */
.asset-card--extreme:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow:
    0 0 0 1px rgba(139, 92, 246, 0.5),
    0 0 40px rgba(139, 92, 246, 0.22),
    0 16px 48px rgba(0, 0, 0, 0.5);
}

/* Very High — gold spellbook glow */
.asset-card--very-high:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow:
    0 0 0 1px rgba(245, 192, 48, 0.5),
    0 0 40px rgba(245, 192, 48, 0.18),
    0 16px 48px rgba(0, 0, 0, 0.5);
}

/* High — amber dragon glow */
.asset-card--high:hover {
  transform: translateY(-5px) scale(1.01);
  box-shadow:
    0 0 0 1px rgba(251, 146, 60, 0.45),
    0 0 35px rgba(251, 146, 60, 0.18),
    0 16px 40px rgba(0, 0, 0, 0.4);
}

/* Medium-High — teal crystal glow */
.asset-card--medium-high:hover {
  transform: translateY(-5px) scale(1.01);
  box-shadow:
    0 0 0 1px rgba(0, 236, 214, 0.4),
    0 0 35px rgba(0, 236, 214, 0.18),
    0 16px 40px rgba(0, 0, 0, 0.4);
}

/* Medium + Low — standard lift */
.asset-card--medium:hover,
.asset-card--prestige:hover,
.asset-card--low:hover,
.asset-card--very-low:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px rgba(128, 80, 208, 0.35),
    0 0 24px rgba(128, 80, 208, 0.12),
    0 12px 32px rgba(0, 0, 0, 0.35);
}

/* Prestige (PHLX Philosopher's Dust) — quiet gold */
.asset-card--prestige:hover {
  box-shadow:
    0 0 0 1px rgba(245, 192, 48, 0.30),
    0 0 28px rgba(245, 192, 48, 0.10),
    0 12px 32px rgba(0, 0, 0, 0.35);
}

/* Price number flashes on change */
.asset-card__price.flash-up {
  animation: priceFlashUp 0.6s ease;
}
.asset-card__price.flash-down {
  animation: priceFlashDown 0.6s ease;
}

@keyframes priceFlashUp {
  0%   { color: inherit; }
  30%  { color: #22c55e; text-shadow: 0 0 10px rgba(34, 197, 94, 0.7); }
  100% { color: inherit; text-shadow: none; }
}
@keyframes priceFlashDown {
  0%   { color: inherit; }
  30%  { color: #ef4444; text-shadow: 0 0 10px rgba(239, 68, 68, 0.7); }
  100% { color: inherit; text-shadow: none; }
}


/* ════════════════════════════════════════════════════════
   6. FEATURE CARD HOVER
   Cards feel like ancient codex pages that open to you.
   ════════════════════════════════════════════════════════ */

.feature-card {
  transition:
    transform  0.30s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.30s ease,
    border-color 0.30s ease,
    background  0.30s ease;
}

.feature-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 0 0 1px rgba(128, 80, 208, 0.40),
    0 0 40px rgba(128, 80, 208, 0.14),
    0 20px 50px rgba(0, 0, 0, 0.45);
}

/* Oracle feature card — gold glow */
.feature-card--oracle {
  animation: glowPulse 5s ease-in-out infinite;
}

.feature-card--oracle:hover {
  transform: translateY(-5px);
  box-shadow:
    0 0 0 1px rgba(245, 192, 48, 0.50),
    0 0 60px rgba(245, 192, 48, 0.20),
    0 20px 60px rgba(0, 0, 0, 0.50);
  animation: none; /* stop pulse on hover — it's already glowing */
}

/* Feature card icon — spin + glow on hover */
.feature-card__icon {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
}
.feature-card:hover .feature-card__icon {
  transform: scale(1.15) rotate(5deg);
  filter: drop-shadow(0 0 8px currentColor);
}


/* ════════════════════════════════════════════════════════
   7. SECTION HEADER REVEAL
   Each section heading "arrives" like an ancient proclamation.
   ════════════════════════════════════════════════════════ */

.section-header.reveal.revealed h2 {
  animation: fadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
.section-header.reveal.revealed .eyebrow {
  animation: fadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.0s both;
}
.section-header.reveal.revealed p {
  animation: fadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

/* Eyebrow — an underline grows from left on reveal */
.eyebrow {
  position: relative;
  display: inline-block;
}


/* ════════════════════════════════════════════════════════
   8. STAGGER UTILITY CLASSES
   Applied to grid containers so each child arrives with
   increasing delay. JS adds .revealed to each child.
   ════════════════════════════════════════════════════════ */

/* Base hidden state (before reveal) */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity  0.70s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.70s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for nth-child in .stagger containers */
.stagger > .reveal:nth-child(1)  { transition-delay: 0.00s; }
.stagger > .reveal:nth-child(2)  { transition-delay: 0.08s; }
.stagger > .reveal:nth-child(3)  { transition-delay: 0.16s; }
.stagger > .reveal:nth-child(4)  { transition-delay: 0.24s; }
.stagger > .reveal:nth-child(5)  { transition-delay: 0.32s; }
.stagger > .reveal:nth-child(6)  { transition-delay: 0.40s; }
.stagger > .reveal:nth-child(7)  { transition-delay: 0.48s; }
.stagger > .reveal:nth-child(8)  { transition-delay: 0.56s; }


/* ════════════════════════════════════════════════════════
   9. LEADERBOARD PULSE
   Position changes on the leaderboard flash dramatically.
   ════════════════════════════════════════════════════════ */

.leaderboard__row {
  transition: background 0.3s ease;
}

.leaderboard__row--top {
  animation: tealGlowPulse 4s ease-in-out infinite;
}

@keyframes rankFlash {
  0%   { background: rgba(245, 192, 48, 0.00); }
  20%  { background: rgba(245, 192, 48, 0.12); }
  100% { background: rgba(245, 192, 48, 0.00); }
}

.leaderboard__row.rank-changed {
  animation: rankFlash 1.2s ease;
}

/* PnL up/down colouring with transition */
.lb-pnl {
  transition: color 0.4s ease;
}


/* ════════════════════════════════════════════════════════
  10. BUTTON INTERACTIONS
   Buttons are the gates to the Exchange. They should
   feel weighty and responsive.
   ════════════════════════════════════════════════════════ */

.btn-primary {
  position: relative;
  overflow: hidden;
  transition:
    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.25s ease;
}

/* Ripple effect on click */
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--click-x, 50%) var(--click-y, 50%), rgba(255,255,255,0.25) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 32px rgba(245, 192, 48, 0.35);
}

.btn-primary:active {
  transform: translateY(0) scale(0.98);
}

.btn-secondary {
  transition:
    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 236, 214, 0.20);
  border-color: rgba(0, 236, 214, 0.7);
}


/* ════════════════════════════════════════════════════════
  11. UNIVERSE TIMELINE PULSE
   Active season pulses. Upcoming seasons are dim and waiting.
   ════════════════════════════════════════════════════════ */

.timeline-item--active .timeline-item__dot {
  animation: glowPulse 3s ease-in-out infinite;
}

.timeline-item {
  transition: transform 0.25s ease;
}
.timeline-item:hover {
  transform: translateX(6px);
}

.timeline-item--upcoming {
  transition: transform 0.25s ease, opacity 0.3s ease;
}
.timeline-item--upcoming:hover {
  opacity: 1 !important;
}


/* ════════════════════════════════════════════════════════
  12. PAGE ENTRANCE TRANSITION
   Whole page fades in cleanly — no flash of unstyled content.
   ════════════════════════════════════════════════════════ */

body {
  animation: fadeIn 0.4s ease 0s both;
}

/* Section dividers — subtle entrance */
section {
  position: relative;
}


/* ════════════════════════════════════════════════════════
  13. NAV — Magic underline on active link
   ════════════════════════════════════════════════════════ */

.nav__links a {
  position: relative;
}

.nav__links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-brand-gold, #f5c030);
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav__links a:hover::after,
.nav__links a.nav__link--active::after {
  width: 100%;
}


/* ════════════════════════════════════════════════════════
  14. CODE BLOCK — Terminal glow
   ════════════════════════════════════════════════════════ */

.code-block {
  transition: box-shadow 0.4s ease;
}

.code-block:hover {
  box-shadow:
    0 0 0 1px rgba(0, 236, 214, 0.30),
    0 0 40px rgba(0, 236, 214, 0.10),
    0 20px 60px rgba(0, 0, 0, 0.5);
}


/* ════════════════════════════════════════════════════════
  15. REDUCED MOTION — Respect the user
   All motion turns off for users who prefer it.
   ════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {

  /* Kill all animations and transitions */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    animation-delay: 0.01ms !important;
  }

  /* But still do reveals — just instantly */
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero__title .gold {
    background: none;
    -webkit-text-fill-color: var(--color-brand-gold, #f5c030);
    color: var(--color-brand-gold, #f5c030);
    animation: none;
  }

  .hero__logo {
    animation: none;
    filter: none;
  }
}