/* ============================================================
   REALM FORGE ACADEMY — Shared Theme
   Two visual languages unified by a deep-dark foundation.
   ============================================================ */

/* ---- INFO SITE PALETTE (Gold) ---- */
:root {
  --rf-gold: #F59E0B;
  --rf-gold-dark: #D97706;
  --rf-gold-light: #FBBF24;
  --rf-gold-faint: #F59E0B33;

  --rf-bg-deep: #050510;
  --rf-bg-mid: #0a0a1a;
  --rf-bg-card: #0f0f1a;
  --rf-bg-card-hover: #1a1a2e;
  --rf-bg-card-active: #16213e;

  --rf-border-dim: #2a2a3e;
  --rf-border-faint: #1a1a30;

  --rf-text-bright: #F1F1F1;
  --rf-text-main: #E8E8F0;
  --rf-text-body: #B8B8CC;
  --rf-text-secondary: #9999AA;
  --rf-text-muted: #8888AA;
  --rf-text-dim: #777790;
  --rf-text-ghost: #666680;
  --rf-text-faint: #444460;

  /* ---- PLATFORM PALETTE (Blue Cyberpunk) ---- */
  --rf-blue: #2196f3;
  --rf-blue-dark: #1976d2;
  --rf-cyan: #00bcd4;
  --rf-pink: #ff4081;
  --rf-green: #00ff9a;
  --rf-platform-bg: #0a0a0f;
  --rf-platform-card: rgba(20, 20, 35, 0.8);
  --rf-platform-border: rgba(33, 150, 243, 0.3);

  /* ---- EMBER PALETTE (Warm Orange) ---- */
  --rf-ember-core: #F97316;
  --rf-ember-glow: #FB923C;
  --rf-ember-deep: #C2410C;
  --rf-ember-warm-bg: #FFF7ED;
  --rf-ember-light-bg: #FFEDD5;
}

/* ---- TYPOGRAPHY ---- */
.rf-font-display { font-family: 'Cinzel', 'Playfair Display', Georgia, serif; }
.rf-font-body    { font-family: 'Crimson Text', 'Libre Baskerville', Georgia, serif; }
.rf-font-mono    { font-family: 'JetBrains Mono', 'Fira Code', monospace; }

/* ---- INFO SITE BASE ---- */
.rf-info-page {
  min-height: 100vh;
  background: linear-gradient(180deg, var(--rf-bg-deep) 0%, var(--rf-bg-mid) 30%, #0f0f20 100%);
  color: var(--rf-text-main);
  font-family: 'Crimson Text', 'Libre Baskerville', Georgia, serif;
  overflow-x: hidden;
}

/* ---- AMBIENT ORBS (Info Site Background) ---- */
.rf-ambient-bg { position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 0; }
.rf-ambient-bg .orb { position: absolute; border-radius: 50%; }
.rf-ambient-bg .orb:nth-child(1) { width: 300px; height: 300px; background: radial-gradient(circle, #4F46E520 0%, transparent 70%); top: 10%; left: -5%; animation: rfFloat0 20s ease-in-out infinite; }
.rf-ambient-bg .orb:nth-child(2) { width: 400px; height: 400px; background: radial-gradient(circle, #7C3AED18 0%, transparent 70%); top: 25%; left: 13%; animation: rfFloat1 25s ease-in-out infinite; }
.rf-ambient-bg .orb:nth-child(3) { width: 500px; height: 500px; background: radial-gradient(circle, #D9770615 0%, transparent 70%); top: 40%; left: 31%; animation: rfFloat2 30s ease-in-out infinite; }
.rf-ambient-bg .orb:nth-child(4) { width: 600px; height: 600px; background: radial-gradient(circle, #05966912 0%, transparent 70%); top: 55%; left: 49%; animation: rfFloat3 35s ease-in-out infinite; }
.rf-ambient-bg .orb:nth-child(5) { width: 700px; height: 700px; background: radial-gradient(circle, #DC262610 0%, transparent 70%); top: 70%; left: 67%; animation: rfFloat4 40s ease-in-out infinite; }
.rf-ambient-bg .orb:nth-child(6) { width: 800px; height: 800px; background: radial-gradient(circle, #BE185D10 0%, transparent 70%); top: 85%; left: 85%; animation: rfFloat5 45s ease-in-out infinite; }

@keyframes rfFloat0 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(30px, -20px); } }
@keyframes rfFloat1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-20px, 30px); } }
@keyframes rfFloat2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(25px, 15px); } }
@keyframes rfFloat3 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-15px, -25px); } }
@keyframes rfFloat4 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(20px, 20px); } }
@keyframes rfFloat5 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-25px, 10px); } }

@keyframes rfShimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes rfFadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- SHARED NAVIGATION (Info Site) ---- */
.rf-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(5, 5, 16, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rf-border-faint);
}

.rf-nav-brand {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--rf-gold);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.rf-nav-brand:hover { color: var(--rf-gold-light); }

.rf-nav-brand svg { flex-shrink: 0; }

.rf-nav-links {
  display: flex;
  gap: 32px;
  align-items: center;
}

.rf-nav-links a {
  color: var(--rf-text-ghost);
  text-decoration: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  transition: color 0.2s;
}

.rf-nav-links a:hover,
.rf-nav-links a.active { color: var(--rf-gold); }

@media (max-width: 600px) {
  .rf-nav-links { gap: 16px; }
  .rf-nav-links a { font-size: 11px; letter-spacing: 0.1em; }
}

/* ---- GOLD BUTTON ---- */
.rf-btn-gold {
  display: inline-block;
  padding: 16px 48px;
  background: linear-gradient(135deg, var(--rf-gold), var(--rf-gold-dark));
  border-radius: 12px;
  font-size: 16px;
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 700;
  color: #0a0a15;
  letter-spacing: 0.05em;
  cursor: pointer;
  box-shadow: 0 0 30px var(--rf-gold-faint);
  border: none;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}

.rf-btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 40px #F59E0B55;
  color: #0a0a15;
}

/* ---- GOLD CARD ---- */
.rf-card {
  background: linear-gradient(135deg, var(--rf-bg-card) 0%, var(--rf-bg-card-hover) 100%);
  border: 1px solid var(--rf-border-dim);
  border-radius: 20px;
  padding: clamp(28px, 5vw, 48px);
}

/* ---- GOLD SECTION TITLE ---- */
.rf-section-title {
  font-family: 'Cinzel', Georgia, serif;
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 700;
  color: var(--rf-text-bright);
  text-align: center;
  margin: 0 0 8px;
}

.rf-section-title.gold {
  color: var(--rf-gold);
}

.rf-section-subtitle {
  text-align: center;
  color: var(--rf-text-ghost);
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  letter-spacing: 0.05em;
  margin: 0 0 40px;
}

/* ---- LABEL / TAG ---- */
.rf-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--rf-gold);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
}

/* ---- FOOTER (Info Site) ---- */
.rf-footer {
  text-align: center;
  padding: 40px 24px;
  font-size: 12px;
  color: var(--rf-text-faint);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.05em;
  border-top: 1px solid var(--rf-border-faint);
}

.rf-footer a {
  color: var(--rf-text-ghost);
  text-decoration: none;
  transition: color 0.2s;
}

.rf-footer a:hover { color: var(--rf-gold); }

/* ---- ANVIL SVG (Reusable) ---- */
.rf-anvil-icon { display: inline-block; }

/* ---- EMBER ZONE ---- */
.rf-ember-zone {
  --accent: var(--rf-ember-core);
  --accent-glow: var(--rf-ember-glow);
}

.rf-ember-zone .rf-card {
  border-color: #F9731633;
  background: linear-gradient(135deg, #1a1520 0%, #1a1a2e 100%);
}

/* ---- FLOATING EMBER PARTICLES ---- */
.rf-embers-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.rf-ember {
  position: absolute;
  bottom: -4px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, var(--rf-ember-glow), var(--rf-ember-core) 55%, var(--rf-ember-deep) 100%);
  box-shadow: 0 0 6px 2px var(--rf-ember-core), 0 0 14px 4px rgba(249,115,22,0.25);
  opacity: 0;
  will-change: transform, opacity;
  animation:
    rfEmberRise var(--ember-dur, 8s) var(--ember-delay, 0ms) ease-out forwards;
}

.rf-ember--pulse {
  animation:
    rfEmberRise var(--ember-dur, 8s) var(--ember-delay, 0ms) ease-out forwards,
    rfEmberPulse var(--ember-pulse, 1.4s) var(--ember-delay, 0ms) ease-in-out infinite;
}

@keyframes rfEmberRise {
  0%   { opacity: 0;   transform: translate(0, 0) scale(0.4); }
  8%   { opacity: 0.9; transform: translate(0, -2vh) scale(1); }
  70%  { opacity: 0.7; transform: translate(var(--ember-drift, 40px), calc(var(--ember-travel, -60vh) * 0.7)) scale(0.85); }
  100% { opacity: 0;   transform: translate(var(--ember-drift, 40px), var(--ember-travel, -60vh)) scale(0.3); }
}

@keyframes rfEmberPulse {
  0%, 100% { box-shadow: 0 0 6px 2px var(--rf-ember-core), 0 0 14px 4px rgba(249,115,22,0.25); }
  50%      { box-shadow: 0 0 10px 4px var(--rf-ember-glow), 0 0 22px 8px rgba(251,146,60,0.35); }
}