/* =============================================================
   L2LegacyWorld — Theme Layer
   Source: L2LegacyWorld _ Interlude x10.html
   Contains: CSS custom properties, gradients, shadows,
             transitions, and all @keyframe animations.
   ============================================================= */

/* -------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------- */

:root {
  /* Backgrounds */
  --bg:           #07070b;
  --bg-soft:      #101019;

  /* Surface panels */
  --panel:        rgba(255, 255, 255, 0.05);
  --panel-strong: rgba(255, 255, 255, 0.08);

  /* Typography */
  --text:         #f2f2f2;
  --muted:        #b8b8c2;

  /* Accent palette */
  --accent:       #ff9d2f;   /* Legacy Orange Glow  */
  --accent-2:     #ffd18a;   /* Warm Gold           */
  --accent-rgb:   255, 157, 47;

  /* Borders */
  --border:       rgba(255, 255, 255, 0.09);

  /* Status */
  --live:         #46d369;
  --live-rgb:     70, 211, 105;

  /* Elevation */
  --shadow:       0 20px 60px rgba(0, 0, 0, 0.35);
  --shadow-accent:0 10px 24px rgba(255, 157, 47, 0.18);
  --shadow-sm:    0 4px 16px  rgba(0, 0, 0, 0.28);

  /* Typography */
  --font-base:    Arial, Helvetica, sans-serif;

  /* Transitions */
  --ease:         0.25s ease;
  --ease-fast:    0.15s ease;

  /* CTA conversion layer — tight dark drop + centered halo (no smeared offset blur) */
  --cta-glow:         rgba(255, 138, 26, 0.48);
  --shadow-cta:       0 4px 14px rgba(0, 0, 0, 0.45), 0 0 16px rgba(255, 157, 47, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  --shadow-cta-hover: 0 6px 20px rgba(0, 0, 0, 0.50), 0 0 30px var(--cta-glow),          inset 0 1px 0 rgba(255, 255, 255, 0.40);
  --border-accent:    rgba(255, 157, 47, 0.32);
}


/* -------------------------------------------------------------
   2. GRADIENT DEFINITIONS
   Extracted from every gradient rule in the source.
   ------------------------------------------------------------- */

:root {
  /*
   * Body page background
   * Subtle deep-red radial bloom at top + dark linear base
   */
  --grad-body:
    radial-gradient(circle at top, rgba(150, 70, 15, 0.28), transparent 35%),
    linear-gradient(180deg, #06060a 0%, #090910 45%, #06060a 100%);

  /*
   * Primary CTA / btn-primary / nav-cta
   * Orange → Warm Gold diagonal
   */
  --grad-accent:      linear-gradient(135deg, var(--accent), var(--accent-2));

  /*
   * Hero section overlay (::before pseudo-element)
   * Horizontal darkening + vertical vignette
   */
  --grad-hero-h:
    linear-gradient(
      90deg,
      rgba(5, 5, 8, 0.86)  0%,
      rgba(5, 5, 8, 0.72)  36%,
      rgba(5, 5, 8, 0.48)  70%,
      rgba(5, 5, 8, 0.76)  100%
    );
  --grad-hero-v:      linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.70));

  /*
   * Hero launch panel (glass card surface)
   */
  --grad-panel:       linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));

  /*
   * CTA section box background
   * Warm orange tint + frosted glass
   */
  --grad-cta:         linear-gradient(135deg, rgba(255, 157, 47, 0.20), rgba(255, 157, 47, 0.04));

  /*
   * Gallery card base overlay (under the image)
   */
  --grad-gallery-base:linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.70));

  /*
   * Gallery card ::after overlay (text readability vignette)
   */
  --grad-gallery-vignette: linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.78));

  /*
   * Accent glow tint — used for section backgrounds, hover borders
   */
  --grad-accent-tint: rgba(255, 157, 47, 0.12);
}


/* -------------------------------------------------------------
   3. KEYFRAME ANIMATIONS
   ------------------------------------------------------------- */

/*
 * dot-pulse
 * Pulsing live-status indicator (the green .dot in .eyebrow).
 * The source has only a static box-shadow; this enhances it.
 */
@keyframes dot-pulse {
  0%, 100% {
    box-shadow: 0 0 0   0   rgba(var(--live-rgb), 0.6),
                0 0 14px 0   rgba(var(--live-rgb), 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0   5px rgba(var(--live-rgb), 0),
                0 0 22px 4px rgba(var(--live-rgb), 0.25);
    transform: scale(1.15);
  }
}

/*
 * accent-glow-pulse
 * Subtle orange aura breathe — applies to .nav-cta, .btn-primary, hero H1.
 */
@keyframes accent-glow-pulse {
  0%, 100% {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), 0 0 16px rgba(var(--accent-rgb), 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  }
  50% {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), 0 0 26px rgba(var(--accent-rgb), 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  }
}

/*
 * text-glow-pulse
 * Low-intensity text-shadow breathe for the hero H1.
 */
@keyframes text-glow-pulse {
  0%, 100% {
    text-shadow: 0 0 22px rgba(var(--accent-rgb), 0.16);
  }
  50% {
    text-shadow: 0 0 40px rgba(var(--accent-rgb), 0.30);
  }
}

/*
 * fade-up
 * Entrance animation for cards, section headers, hero content.
 */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*
 * count-tick
 * Quick scale pop on countdown number change.
 * Trigger by toggling .tick class via JS on each second.
 */
@keyframes count-tick {
  0%   { transform: scale(1.0); }
  40%  { transform: scale(1.12); }
  100% { transform: scale(1.0); }
}

/*
 * border-shimmer
 * Glowing border sweep — optional class .shimmer on .card.
 */
@keyframes border-shimmer {
  0%   { border-color: var(--border); }
  50%  { border-color: rgba(255, 157, 47, 0.35); }
  100% { border-color: var(--border); }
}


/* -------------------------------------------------------------
   4. ANIMATION UTILITY CLASSES
   Apply to elements that need motion.
   ------------------------------------------------------------- */

.dot {
  animation: dot-pulse 2.4s ease-in-out infinite;
}

/* Only THE main conversion CTA pulses — everything else stays calm */
.btn.btn-primary.hero-cta {
  animation: accent-glow-pulse 3s ease-in-out infinite;
}

/* Nav login: short attention nudge on load, then stops */
.nav-login {
  animation: accent-glow-pulse 2.6s ease-in-out 3;
}

.hero h1 {
  animation: text-glow-pulse 4s ease-in-out infinite;
}

/* Entrance — add .animate-in via IntersectionObserver in JS */
.animate-in {
  animation: fade-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Countdown digit tick — toggled each second by countdown.js */
.count-item strong.tick {
  animation: count-tick 0.22s ease-out;
}

/* Optional shimmer card hover enhancement */
.card.shimmer {
  animation: border-shimmer 2s ease-in-out infinite;
}


/* -------------------------------------------------------------
   4b. SHARED BUTTON INTERACTION LAYER
   Doubled-class specificity so these win over the per-page
   inline <style> blocks that load after this sheet.
   ------------------------------------------------------------- */

.btn.btn-primary,
.sf-btn.sf-btn--primary {
  position: relative;
  overflow: hidden;
  border-color: rgba(255, 209, 138, 0.55);
  box-shadow: var(--shadow-cta);
}

.btn.btn-primary:hover,
.sf-btn.sf-btn--primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--shadow-cta-hover);
  filter: brightness(1.06);
}

.btn.btn-primary:active,
.sf-btn.sf-btn--primary:active {
  transform: translateY(0) scale(0.98);
  filter: brightness(0.95);
  transition-duration: 0.08s;
}

/* Sheen sweep — light streak crosses the button on hover */
.btn.btn-primary::after,
.sf-btn.sf-btn--primary::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -75%;
  width: 50%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg);
  transition: left 0.5s ease;
  pointer-events: none;
}

.btn.btn-primary:hover::after,
.sf-btn.sf-btn--primary:hover::after {
  left: 125%;
}

/* Keyboard focus ring (a11y) */
.btn:focus-visible,
.sf-btn:focus-visible,
.nav-login:focus-visible,
.nav-cta:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
}

/* Secondary tier — orange-tinted instead of flat white */
.btn.btn-secondary,
.sf-btn.sf-btn--secondary {
  background: rgba(255, 157, 47, 0.07);
  border-color: var(--border-accent);
  color: #f1f1f5;
}

.btn.btn-secondary:hover,
.sf-btn.sf-btn--secondary:hover {
  background: rgba(255, 157, 47, 0.13);
  border-color: rgba(255, 157, 47, 0.55);
  color: #fff;
}

/* Ghost tier — placeholder / low-priority actions */
.btn.btn-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--muted);
}

.btn.btn-ghost:hover {
  color: #f1f1f5;
  border-color: rgba(255, 255, 255, 0.26);
  transform: translateY(-1px);
}


/* -------------------------------------------------------------
   5. SHADOWS & GLOW TOKENS (applied via custom properties)
   ------------------------------------------------------------- */

:root {
  /* Used on: .card, .hero-panel, .news-card, .gallery-card, .cta-box */
  --shadow:            0 20px 60px rgba(0, 0, 0, 0.35);

  /* Used on: .nav-cta, .btn-primary */
  --shadow-accent:     0 10px 24px rgba(255, 157, 47, 0.18);
  --shadow-accent-lg:  0 10px 36px rgba(255, 157, 47, 0.38);

  /* Used on: .dot */
  --shadow-live:       0 0 14px rgba(70, 211, 105, 0.60);
  --shadow-live-lg:    0 0 22px rgba(70, 211, 105, 0.35);

  /* Used on: .hero h1 */
  --text-shadow-h1:    0 0 22px rgba(255, 157, 47, 0.16);
  --text-shadow-h1-lg: 0 0 40px rgba(255, 157, 47, 0.30);
}


/* -------------------------------------------------------------
   4c. TOPBAR ANIMATION LAYER
   Entrance drop, animated nav underlines, brand shimmer,
   login sheen, social icon pop. Shared by index + features.
   ------------------------------------------------------------- */

@keyframes topbar-drop {
  from { transform: translateY(-14px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

.topbar {
  animation: topbar-drop 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Nav links — gradient underline slides in from the left */
.nav a:not(.nav-cta):not(.nav-login) {
  position: relative;
  transition: color var(--ease), transform var(--ease-fast);
}

.nav a:not(.nav-cta):not(.nav-login)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-accent);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.5);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav a:not(.nav-cta):not(.nav-login):hover {
  transform: translateY(-1px);
}

.nav a:not(.nav-cta):not(.nav-login):hover::after,
.nav a.nav--active::after {
  transform: scaleX(1);
}

.nav a.nav--active {
  color: var(--accent-2);
  opacity: 1;
}

/* Brand — gold shimmer sweep on hover */
@keyframes brand-shimmer {
  from { background-position: 200% center; }
  to   { background-position: 0% center; }
}

.brand .brand-title {
  transition: var(--ease);
}

.brand:hover .brand-title {
  background: linear-gradient(90deg, #fff 0%, var(--accent-2) 50%, #fff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: brand-shimmer 1.4s linear infinite;
}

/* Login button — sheen sweep like primary CTAs */
.nav-login {
  position: relative;
  overflow: hidden;
}

.nav-login::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -75%;
  width: 50%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg);
  transition: left 0.5s ease;
  pointer-events: none;
}

.nav-login:hover::after {
  left: 125%;
}

/* Download ghost — warm border wake-up */
.nav-cta {
  transition: var(--ease);
}

.nav-cta:hover {
  border-color: var(--border-accent);
  transform: translateY(-1px);
}

/* Social icons — lift & pop */
.nav-social {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background var(--ease), color var(--ease), border-color var(--ease);
}

.nav-social:hover {
  transform: translateY(-2px) scale(1.12);
}


/* -------------------------------------------------------------
   5b. GLOBAL POLISH — selection, scrollbar, smooth scroll
   ------------------------------------------------------------- */

::selection {
  background: rgba(255, 157, 47, 0.35);
  color: #fff;
}

::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: #0a0a10; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255, 157, 47, 0.55), rgba(255, 209, 138, 0.40));
  border-radius: 8px;
  border: 3px solid #0a0a10;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(255, 157, 47, 0.75), rgba(255, 209, 138, 0.55));
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}


/* -------------------------------------------------------------
   6. REDUCED MOTION OVERRIDE
   Disables all animations for users who prefer it.
   ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:   0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.01ms !important;
  }
}