/* ═══════════════════════════════════════════════════════════════
   KINGDOM VISION FILMS — Cinematic Landing Page
   The logo is always the dominant visual. Effects serve the logo.
═══════════════════════════════════════════════════════════════ */

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #000;
  font-family: 'Cinzel', serif;
  -webkit-font-smoothing: antialiased;
  cursor: default;
  user-select: none;
}

/* ═══════════════════════════════════════════════════════════════
   0 — VOID  (deep dark, slightly warm base)
═══════════════════════════════════════════════════════════════ */
.void {
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 80% 65% at 50% 44%,
      #100602 0%, #080301 32%, #040200 60%, #000 100%);
}

/* ═══════════════════════════════════════════════════════════════
   1 — SMOKE BACK CANVAS
═══════════════════════════════════════════════════════════════ */
#smokeBackCanvas {
  position: fixed; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   2 — CINEMATIC LIGHT RAY
   Dramatic shaft from upper-right → lion head.
   Reveals the logo through the rising smoke.
═══════════════════════════════════════════════════════════════ */
.ray-wrap {
  position: fixed; inset: 0; z-index: 2;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
}

.rb {
  position: absolute;
  top: -10px; right: -10px;
  transform-origin: top right;
  pointer-events: none;
}

/* Wide atmospheric haze */
.rb-haze {
  width: 720px; height: 280vh;
  transform: rotate(218deg);
  background: linear-gradient(to bottom,
    rgba(200,152,58, 0.000)  0%,
    rgba(200,152,58, 0.052)  5%,
    rgba(175,128,42, 0.030) 24%,
    rgba(145, 96,28, 0.012) 52%,
    transparent 78%);
  filter: blur(58px);
  animation: rbDrift 26s ease-in-out infinite;
}

/* Primary shaft — main visible beam */
.rb-primary {
  width: 240px; height: 280vh;
  transform: rotate(215deg);
  background: linear-gradient(to bottom,
    rgba(245,195,85, 0.000)  0%,
    rgba(245,195,85, 0.150)  3%,
    rgba(220,165,62, 0.100) 14%,
    rgba(190,128,40, 0.052) 35%,
    rgba(155, 92,22, 0.020) 58%,
    transparent 80%);
  filter: blur(16px);
  animation: rbDrift 18s 1s ease-in-out infinite;
}

/* Hot core — bright thin spine */
.rb-core {
  width: 72px; height: 280vh;
  transform: rotate(215deg);
  background: linear-gradient(to bottom,
    rgba(255,245,185, 0.000)  0%,
    rgba(255,245,185, 0.180)  2%,
    rgba(248,218,128, 0.115) 10%,
    rgba(232,182, 78, 0.055) 28%,
    rgba(195,138, 44, 0.018) 52%,
    transparent 72%);
  filter: blur(6px);
  animation: rbDriftCore 18s 1s ease-in-out infinite;
}

/* Secondary companion shaft */
.rb-secondary {
  width: 175px; height: 280vh;
  transform: rotate(222deg);
  background: linear-gradient(to bottom,
    rgba(215,168,65, 0.000)  0%,
    rgba(215,168,65, 0.075)  4%,
    rgba(188,138,48, 0.045) 20%,
    rgba(158,108,30, 0.018) 46%,
    transparent 72%);
  filter: blur(25px);
  animation: rbDrift 22s 3.5s ease-in-out infinite;
}

/* Far edge diffusion */
.rb-edge {
  width: 500px; height: 280vh;
  transform: rotate(210deg);
  background: linear-gradient(to bottom,
    rgba(170,125,46, 0.000)  0%,
    rgba(170,125,46, 0.028)  7%,
    rgba(145,102,34, 0.015) 28%,
    transparent 62%);
  filter: blur(80px);
  animation: rbDrift 32s 2s ease-in-out infinite;
}

@keyframes rbDrift {
  0%, 100% { transform: rotate(var(--ra, 215deg)) scaleX(1.00); opacity: 1;    }
  30%       { transform: rotate(calc(var(--ra, 215deg) - 1.6deg)) scaleX(1.04); opacity: 0.90; }
  65%       { transform: rotate(calc(var(--ra, 215deg) + 1.2deg)) scaleX(0.96); opacity: 1.00; }
}
@keyframes rbDriftCore {
  0%, 100% { transform: rotate(215deg) scaleX(1.00); filter: blur(6px)  brightness(1.00); }
  28%      { transform: rotate(213deg) scaleX(1.10); filter: blur(4px)  brightness(1.42); }
  60%      { transform: rotate(217deg) scaleX(0.90); filter: blur(8px)  brightness(0.85); }
}
.rb-haze      { --ra: 218deg; }
.rb-secondary { --ra: 222deg; }
.rb-edge      { --ra: 210deg; }

/* ═══════════════════════════════════════════════════════════════
   3 — LION GLOW LAYERS
   Concentric warm fire halo behind the lion (~50% x, 43% y).
═══════════════════════════════════════════════════════════════ */
.lg {
  position: fixed;
  left: 50%; top: 43%;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  will-change: opacity, transform;
}

.lg-foundation {
  z-index: 3;
  width: min(1100px, 130vw); height: min(1100px, 130vw);
  background: radial-gradient(ellipse,
    rgba(88, 32, 4, 0.18) 0%,
    rgba(55, 18, 1, 0.07) 35%,
    rgba(28,  8, 0, 0.03) 58%,
    transparent 72%);
  filter: blur(88px);
  animation: lgBreathe 14s ease-in-out infinite;
}
.lg-outer {
  z-index: 4;
  width: min(640px, 82vw); height: min(640px, 82vw);
  background: radial-gradient(ellipse,
    rgba(165, 62, 8, 0.20) 0%,
    rgba(120, 44, 4, 0.09) 36%,
    rgba( 75, 26, 2, 0.03) 60%,
    transparent 76%);
  filter: blur(42px);
  animation: lgBreathe 9s 1.4s ease-in-out infinite;
}
.lg-mid {
  z-index: 5;
  width: min(340px, 52vw); height: min(340px, 52vw);
  background: radial-gradient(ellipse,
    rgba(215, 88, 12, 0.28) 0%,
    rgba(175, 62,  6, 0.14) 34%,
    rgba(120, 42,  3, 0.05) 58%,
    transparent 74%);
  filter: blur(22px);
  animation: lgBreathe 6.2s 0.7s ease-in-out infinite reverse;
}
.lg-inner {
  z-index: 6;
  width: min(180px, 28vw); height: min(180px, 28vw);
  background: radial-gradient(ellipse,
    rgba(245,138, 28, 0.38) 0%,
    rgba(220, 98, 14, 0.20) 38%,
    rgba(180, 64,  6, 0.07) 62%,
    transparent 80%);
  filter: blur(12px);
  animation: lgBreathe 4.0s 0.3s ease-in-out infinite;
}
.lg-core {
  z-index: 7;
  width: min(72px, 12vw); height: min(72px, 12vw);
  background: radial-gradient(ellipse,
    rgba(255,225,145, 0.62) 0%,
    rgba(255,168, 52, 0.34) 34%,
    rgba(235,108, 18, 0.10) 60%,
    transparent 82%);
  filter: blur(5px);
  animation: lgCore 2.8s 0.1s ease-in-out infinite;
}

@keyframes lgBreathe {
  0%, 100% { opacity: 1.00; transform: translate(-50%,-50%) scale(1.00); }
  50%       { opacity: 0.52; transform: translate(-50%,-50%) scale(1.08); }
}
@keyframes lgCore {
  0%, 100% { opacity: 0.72; transform: translate(-50%,-50%) scale(0.88); }
  40%       { opacity: 1.00; transform: translate(-50%,-50%) scale(1.20); }
  75%       { opacity: 0.60; transform: translate(-50%,-50%) scale(0.92); }
}

/* Ember bloom ring — fires every 8–12s */
.ember-bloom {
  position: fixed;
  left: 50%; top: 43%;
  z-index: 8;
  width: min(300px, 48vw); height: min(300px, 48vw);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.52);
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at center,
    transparent 0%, transparent 36%,
    rgba(255,108,16, 0.00) 40%,
    rgba(255,108,16, 0.48) 46%,
    rgba(225, 78,  6, 0.28) 56%,
    rgba(180, 48,  3, 0.10) 68%,
    transparent 80%);
  filter: blur(10px);
  will-change: transform, opacity;
}
@keyframes bloomFire {
  0%   { opacity: 0;    transform: translate(-50%,-50%) scale(0.52); filter: blur(10px) brightness(1.0); }
  8%   { opacity: 0.85; filter: blur(6px) brightness(1.55); }
  24%  { opacity: 0.65; }
  62%  { opacity: 0.08; transform: translate(-50%,-50%) scale(1.75); filter: blur(18px) brightness(0.9); }
  100% { opacity: 0;    transform: translate(-50%,-50%) scale(2.50); filter: blur(28px) brightness(0.7); }
}
.ember-bloom.firing {
  animation: bloomFire 3.8s cubic-bezier(0.2, 0.6, 0.35, 1) forwards;
}

/* ═══════════════════════════════════════════════════════════════
   4 — LOGO WORLD
═══════════════════════════════════════════════════════════════ */
.world-stage {
  position: fixed; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.logo-world {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  will-change: transform, opacity, filter;
  flex-shrink: 0;
}
.logo-img {
  display: block;
  width:  min(920px, 95vw);
  height: min(518px, 53.5vw);
  object-fit: contain;
  position: relative; z-index: 1;
  -webkit-user-drag: none;
  mix-blend-mode: screen;
  filter: contrast(1.08) brightness(1.10);
}

/* Warm fire glow behind KINGDOM VISION FILMS text */
.text-glow-layer {
  position: absolute;
  left: 6%; right: 6%;
  bottom: 4%; top: 44%;
  z-index: 2;
  pointer-events: none;
  border-radius: 6px;
  background: radial-gradient(ellipse at 50% 68%,
    rgba(210,122,20, 0.14) 0%,
    rgba(180, 88,10, 0.07) 38%,
    rgba(140, 62,  5, 0.03) 64%,
    transparent 84%);
  filter: blur(12px);
  animation: textFlicker 4.2s ease-in-out infinite;
  will-change: opacity, filter;
}
@keyframes textFlicker {
  0%   { opacity: 0.65; filter: blur(12px) brightness(1.00); }
  8%   { opacity: 0.40; filter: blur(15px) brightness(0.72); }
  18%  { opacity: 0.88; filter: blur(10px) brightness(1.35); }
  29%  { opacity: 0.52; filter: blur(14px) brightness(0.80); }
  42%  { opacity: 0.92; filter: blur( 9px) brightness(1.50); }
  54%  { opacity: 0.58; filter: blur(14px) brightness(0.78); }
  66%  { opacity: 0.82; filter: blur(11px) brightness(1.18); }
  78%  { opacity: 0.45; filter: blur(15px) brightness(0.70); }
  90%  { opacity: 0.88; filter: blur(10px) brightness(1.28); }
  100% { opacity: 0.65; filter: blur(12px) brightness(1.00); }
}

/* Edge dissolve masks */
.diss { position: absolute; pointer-events: none; z-index: 3; }
.diss-top {
  inset: -6% -6% 28% -6%;
  background: linear-gradient(to bottom,
    rgba(0,0,0,1.00) 0%, rgba(0,0,0,0.88) 12%,
    rgba(0,0,0,0.52) 32%, rgba(0,0,0,0.10) 58%, transparent 100%);
}
.diss-bottom {
  inset: 34% -6% -6% -6%;
  background: linear-gradient(to top,
    rgba(0,0,0,1.00) 0%, rgba(0,0,0,0.90) 10%,
    rgba(0,0,0,0.58) 28%, rgba(0,0,0,0.12) 54%, transparent 100%);
}
.diss-left {
  inset: -6% 24% -6% -6%;
  background: linear-gradient(to right,
    rgba(0,0,0,1.00) 0%, rgba(0,0,0,0.85) 12%,
    rgba(0,0,0,0.50) 30%, rgba(0,0,0,0.08) 56%, transparent 100%);
}
.diss-right {
  inset: -6% -6% -6% 24%;
  background: linear-gradient(to left,
    rgba(0,0,0,1.00) 0%, rgba(0,0,0,0.85) 12%,
    rgba(0,0,0,0.50) 30%, rgba(0,0,0,0.08) 56%, transparent 100%);
}
.diss-radial {
  inset: -6%;
  background: radial-gradient(ellipse 72% 64% at 50% 46%,
    transparent 22%,
    rgba(0,0,0,0.03) 36%, rgba(0,0,0,0.18) 50%,
    rgba(0,0,0,0.52) 64%, rgba(0,0,0,0.84) 78%,
    rgba(0,0,0,1.00) 92%);
}

/* ═══════════════════════════════════════════════════════════════
   5 — SMOKE FRONT CANVAS
═══════════════════════════════════════════════════════════════ */
#smokeFrontCanvas {
  position: fixed; inset: 0; z-index: 12;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   6 — EMBER CANVAS
═══════════════════════════════════════════════════════════════ */
#emberCanvas {
  position: fixed; inset: 0; z-index: 14;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   7 — CINEMATIC OVERLAYS
═══════════════════════════════════════════════════════════════ */
.vignette {
  position: fixed; inset: 0; z-index: 15;
  pointer-events: none;
  background: radial-gradient(ellipse 85% 78% at 50% 46%,
    transparent 12%, rgba(0,0,0,0.22) 46%,
    rgba(0,0,0,0.62) 74%, rgba(0,0,0,0.95) 100%);
}
.film-grain {
  position: fixed; inset: -200%; width: 400%; height: 400%;
  z-index: 16; pointer-events: none; opacity: 0.016;
  animation: grainShift 0.09s steps(1) infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}
@keyframes grainShift {
  0%  { transform:translate(0,0);}      16%{ transform:translate(-4%,-5%);}
  33% { transform:translate(5%,4%);}    50%{ transform:translate(-5%,6%);}
  66% { transform:translate(4%,-4%);}   83%{ transform:translate(-3%,3%);}
  100%{ transform:translate(2%,-2%);}
}
.scanlines {
  position: fixed; inset: 0; z-index: 16; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom, transparent 0, transparent 3px,
    rgba(0,0,0,0.018) 3px, rgba(0,0,0,0.018) 4px);
  opacity: 0.25;
}

/* ═══════════════════════════════════════════════════════════════
   8 — UI ELEMENTS
═══════════════════════════════════════════════════════════════ */

/* ── "The Kingdom Is Building" — BOTTOM CENTER ─────────────── */
/* Metallic gold, elegant, sits above the smoke                  */
.kingdom-tag {
  position: fixed;
  bottom: 38px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 14px;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}

/* Flanking rules */
.kt-rule {
  display: inline-block;
  width: 28px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(198,152,52,0.55), transparent);
  flex-shrink: 0;
}
.kt-rule:first-child {
  background: linear-gradient(90deg, transparent, rgba(198,152,52,0.55));
}
.kt-rule:last-child {
  background: linear-gradient(270deg, transparent, rgba(198,152,52,0.55));
}

/* Main text — metallic gold, small, elegant */
.kt-text {
  font-family: 'Cinzel', serif;
  font-size: clamp(0.52rem, 1.05vw, 0.74rem);
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  /* Metallic gold gradient text */
  background: linear-gradient(
    180deg,
    rgba(232,185, 68, 1.00)  0%,
    rgba(210,158, 42, 1.00) 35%,
    rgba(255,215,100, 1.00) 52%,
    rgba(200,148, 36, 1.00) 68%,
    rgba(185,132, 28, 1.00) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* Warm fire glow behind the text */
  filter: drop-shadow(0 0 12px rgba(205,142,28,0.55))
          drop-shadow(0 0 28px rgba(185,108,12,0.30));
  animation: ktBreath 7s ease-in-out infinite paused;
  position: relative;
}
.kingdom-tag.live .kt-text { animation-play-state: running; }

/* Subtle warm ember halo behind the entire text block */
.kingdom-tag::before {
  content: '';
  position: absolute;
  inset: -18px -32px;
  border-radius: 4px;
  background: radial-gradient(ellipse at 50% 60%,
    rgba(195,115,18, 0.12) 0%,
    rgba(165, 85,10, 0.06) 45%,
    transparent 75%);
  filter: blur(8px);
  pointer-events: none;
  animation: tagGlow 4.5s ease-in-out infinite;
}

@keyframes ktBreath {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(205,142,28,0.48)) drop-shadow(0 0 24px rgba(185,108,12,0.24)); }
  40%       { filter: drop-shadow(0 0 18px rgba(235,172,48,0.72)) drop-shadow(0 0 40px rgba(205,128,18,0.42)); }
  70%       { filter: drop-shadow(0 0  8px rgba(195,132,22,0.38)) drop-shadow(0 0 20px rgba(175, 98,10,0.20)); }
}
@keyframes tagGlow {
  0%, 100% { opacity: 0.75; }
  50%       { opacity: 1.00; }
}

/* ── Heat-pulse ring — fires every 10s via JS class toggle ─── */
/* A wide elliptical warm wash that expands outward from the   */
/* text, peaks, then fades — like heat rising off embers.      */
.kt-heat-ring {
  position: absolute;
  /* Centred on the text block; generous spread */
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.60);
  width: 420px; height: 90px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(215,138,22, 0.00)  0%,
    rgba(215,138,22, 0.46) 28%,
    rgba(185,105,10, 0.28) 52%,
    rgba(155, 75,  5, 0.10) 72%,
    transparent 90%);
  filter: blur(14px);
  will-change: transform, opacity, filter;
  z-index: -1;   /* sits behind the text */
}

/* Triggered by JS: expand outward, brighten, then dissolve */ 
@keyframes heatPulse {
  0%   {
    opacity: 0;
    transform: translate(-50%,-50%) scale(0.60);
    filter: blur(14px) brightness(1.0);
  }
  12%  {
    opacity: 0.90;
    filter: blur(10px) brightness(1.55);
  }
  30%  {
    opacity: 0.70;
    transform: translate(-50%,-50%) scale(1.10);
    filter: blur(12px) brightness(1.20);
  }
  65%  {
    opacity: 0.22;
    transform: translate(-50%,-50%) scale(1.55);
    filter: blur(18px) brightness(0.90);
  }
  100% {
    opacity: 0;
    transform: translate(-50%,-50%) scale(2.00);
    filter: blur(26px) brightness(0.70);
  }
}
.kt-heat-ring.pulsing {
  animation: heatPulse 3.4s cubic-bezier(0.22, 0.62, 0.36, 1) forwards;
}

/* ── Mute button (bottom-right) ─────────────────────────────── */
.mute-btn {
  position: fixed; bottom: 30px; right: 32px; z-index: 50;
  width: 38px; height: 38px;
  background: transparent;
  border: 1px solid rgba(180,130,36,0.16);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0;
  transition: opacity 0.5s, border-color 0.3s, background 0.3s;
  color: rgba(180,130,36,0.48); padding: 0;
}
.mute-btn:hover {
  background: rgba(180,130,36,0.08);
  border-color: rgba(180,130,36,0.46);
  color: rgba(220,170,58,0.92);
}
.mute-btn svg { width: 15px; height: 15px; }
.mute-btn.live { opacity: 0.72; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .logo-img      { width: 100vw; height: auto; }
  .kingdom-tag   { bottom: 24px; gap: 10px; }
  .kt-text       { font-size: 0.50rem; letter-spacing: 0.28em; }
  .kt-rule       { width: 18px; }
  .mute-btn      { bottom: 18px; right: 14px; width: 34px; height: 34px; }
}
@media (max-height: 560px) {
  .logo-img      { width: min(640px, 90vw); height: auto; }
  .kingdom-tag   { bottom: 16px; }
}