/* Animated hero backdrop — markup in shared/components/hero-scene.php.
   Everything moves with transform/opacity only, so it stays smooth on
   phones; readers who ask for reduced motion get the still picture. */

.kn-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.kn-scene svg { display: block; width: 100%; height: 100%; }
.kn-scene .kns-parallax { transition: transform 0.6s ease-out; will-change: transform; }

/* Sky: the ember wash deepens and fades like a slow sunset. */
.kns-ember { animation: knsEmber 16s ease-in-out infinite alternate; }
@keyframes knsEmber { from { opacity: 0.25; } to { opacity: 1; } }

/* Stars twinkle. */
.kns-star { animation: knsTwinkle 4s ease-in-out infinite; }
@keyframes knsTwinkle { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.9; } }

/* Sun: rays turn very slowly, the glow breathes. */
.kns-rays { transform-box: fill-box; transform-origin: center; animation: knsSpin 120s linear infinite; }
@keyframes knsSpin { to { transform: rotate(360deg); } }
.kns-sun { transform-box: fill-box; transform-origin: center; animation: knsBreath 7s ease-in-out infinite; }
@keyframes knsBreath { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.08); opacity: 1; } }
.kns-rim { animation: knsRim 7s ease-in-out infinite; }
@keyframes knsRim { 0%, 100% { opacity: 0.22; } 50% { opacity: 0.42; } }

/* Clouds drift across the whole sky and come round again. */
.kns-drift { animation: knsDrift 100s linear infinite; }
@keyframes knsDrift { from { transform: translateX(0); } to { transform: translateX(var(--w)); } }

/* Light streaks: a bright stretch runs along each line. */
.kns-streak { stroke-dasharray: 220 1400; animation: knsStreak 9s linear infinite; }
@keyframes knsStreak { from { stroke-dashoffset: 1620; } to { stroke-dashoffset: 0; } }

/* A flock crosses every 40 s, rising and dipping a little. */
.kns-flock { animation: knsFlock 40s linear infinite; }
@keyframes knsFlock {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(calc(var(--w) * 0.25), -18px); }
  50%  { transform: translate(calc(var(--w) * 0.5), 6px); }
  75%  { transform: translate(calc(var(--w) * 0.75), -12px); }
  100% { transform: translate(var(--w), 0); }
}
.kns-bird { transform-box: fill-box; transform-origin: center; animation: knsFlap 0.9s ease-in-out infinite; }
@keyframes knsFlap { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.45); } }

/* City: windows switch on and off, mast lights blink. */
.kns-window { animation: knsWindow 8s steps(1, end) infinite; }
@keyframes knsWindow { 0%, 100% { opacity: 0.85; } 40% { opacity: 0.2; } 70% { opacity: 1; } }
.kns-beacon { animation: knsBeacon 1.6s ease-in-out infinite; }
@keyframes knsBeacon { 0%, 60%, 100% { opacity: 0.15; } 30% { opacity: 1; } }

/* Pages carried up on the wind, turning as they rise. */
.kns-page { transform-box: fill-box; transform-origin: center; opacity: 0; animation: knsRise 18s linear infinite; }
@keyframes knsRise {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.95; }
  50%  { transform: translate(40px, calc(var(--rise) * -0.5)) rotate(calc(var(--turn) * 0.5)); }
  85%  { opacity: 0.85; }
  100% { transform: translate(-10px, calc(var(--rise) * -1)) rotate(var(--turn)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .kn-scene *, .kn-scene .kns-parallax { animation: none !important; transition: none !important; }
  .kns-page { opacity: 0.9; transform: translateY(-240px); }
}

/* Coming-soon hero: the scene replaces the old background video. */
.kn-hero--scene { background: #070d1a; }
.kn-hero--scene::before {
  /* Lighter than the video's scrim: the scene is already dark at the top,
     keep just enough at the centre for the glass card's text. */
  background: radial-gradient(ellipse at 50% 45%, rgba(3, 7, 18, 0.35) 0%, rgba(3, 7, 18, 0.1) 60%, rgba(3, 7, 18, 0.45) 100%) !important;
}