/* MFZ_PA 2026-11-12 — cover/welcome motion + lighting layer ("Option B: Skyline", gold-wireframe
   dusk skyline). NEW FILE, scoped entirely to #deck.k-cover — a no-op (display:none) for every
   other scene, so it cannot touch stat/keypoints/gift/video/winner/thanks (deck-enrich's territory)
   or guest/mc. Loaded after deck.css + deck-enrich.css so these rules can safely extend the
   existing .d-kicker/.d-title/.d-sub/.d-tag/.dhead selectors without editing those files.
   GPU budget: transform + opacity only (no layout-affecting properties animated). */

.cover-stage { position: absolute; inset: 0; z-index: 0; display: none; overflow: hidden; pointer-events: none; }
#deck.k-cover .cover-stage { display: block; }
#deck.k-cover .dcontent { position: relative; z-index: 2; }
#deck.k-cover .dwrap { background: #060402; }

/* base image — slow Ken Burns (scale+pan, alternate = no jump at the loop seam) */
.cover-bg {
  position: absolute; inset: -3%; width: 106%; height: 106%;
  background-image: url("/static/assets/deck-bg/cover-skyline.webp");
  background-size: cover; background-position: center center;
  filter: saturate(1.04) brightness(0.98);
  transform-origin: 50% 55%;
}

/* warm sunrise lift at the horizon — breathing opacity, no layout cost */
.cover-horizon {
  position: absolute; left: -5%; right: -5%; bottom: 0; height: 46%;
  background: linear-gradient(0deg, rgba(230,168,74,.34) 0%, rgba(230,168,74,.16) 38%, rgba(230,168,74,0) 100%);
  mix-blend-mode: screen;
}

/* gold light sweep across the skyline — wide soft-feathered sheen, travels fully off-screen on
   BOTH ends (measured via the container's cqw unit, not %-of-own-width, so the exit distance is
   exact regardless of band width) so the loop never pops/resets mid-frame. */
.cover-sweep {
  position: absolute; top: -25%; bottom: -25%; left: -46cqw; width: 40cqw;
  background: linear-gradient(115deg,
    rgba(246,217,168,0) 0%,
    rgba(246,217,168,.10) 28%,
    rgba(246,217,168,.26) 44%,
    rgba(252,241,224,.46) 50%,
    rgba(246,217,168,.26) 56%,
    rgba(246,217,168,.10) 72%,
    rgba(246,217,168,0) 100%);
  mix-blend-mode: screen;
  transform: translateX(0);
  will-change: transform;
  backface-visibility: hidden;
}

/* window twinkle — small gold points over the mid-band (building silhouettes), each fades in on its own
   stagger so the skyline "lights up gradually" rather than all at once */
.cover-twinkle { position: absolute; inset: 0; }
.cover-twinkle span {
  position: absolute; width: .35cqh; height: .35cqh; border-radius: 50%;
  background: #ffe3a6; box-shadow: 0 0 .9cqh .25cqh rgba(255,210,130,.85);
  opacity: 0;
}

/* rising gold dust above the rooftops — pure CSS particles, transform+opacity only */
.cover-dust span {
  position: absolute; bottom: -4%; width: .22cqh; height: .22cqh; border-radius: 50%;
  background: radial-gradient(circle, #ffe9c2 0%, rgba(255,216,150,.0) 75%);
  opacity: 0;
}

/* soft glow pulse behind the title */
.cover-glow {
  position: absolute; left: 50%; top: 46%; width: 70cqw; height: 46cqh;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(246,217,168,.35) 0%, rgba(230,168,74,.14) 42%, rgba(230,168,74,0) 72%);
  filter: blur(1px);
}

/* MFZ_PA 2026-11-12 (welcome creative pass, MFZ: "keep the space behind the text calm so it stays
   readable"): the skyline's lit tower windows sit right under the tagline/date line (low contrast
   on review). This scrim darkens just the text column — sized/positioned to match .dcontent's own
   centered box — without touching the skyline art, Ken Burns, sweep or twinkle/dust layers. */
.cover-scrim {
  position: absolute; left: 50%; top: 50%; width: 84cqw; height: 68cqh;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(8,5,3,.58) 0%, rgba(8,5,3,.42) 42%, rgba(8,5,3,.16) 68%, rgba(8,5,3,0) 88%);
}

/* ── duplicate-date fix: cover already states the date once in its own .d-tag at the bottom;
   the persistent .dhead meta line at top repeated it — keep the logo, drop the repeated text. ── */
#deck.k-cover .dhead .dmeta { display: none; }

/* MFZ_PA 2026-11-14 (MFZ mid-task: cover logo → centered top, every other scene keeps it top-right).
   .dmeta is display:none above, so .dhead has exactly one visible flex child (.dlogo) on this scene —
   justify-content:center centers it alone, no absolute-positioning juggling needed. Vertical position
   (top:2.6cqh) and size (6.6cqh, deck.css) are untouched, so it still clears the title (.dcontent top
   inset 13cqh) by the same margin as every other scene. */
#deck.k-cover .dhead { justify-content: center; }

/* ── calm, staggered text entrance — fires every time deck.js re-renders .dcontent's innerHTML
   (fresh elements ⇒ animation restarts naturally, no JS needed) ── */
#deck.k-cover .d-kicker, #deck.k-cover .d-title, #deck.k-cover .d-welcome-ar, #deck.k-cover .d-sub, #deck.k-cover .d-tag {
  opacity: 0; transform: translateY(.9cqh);
  animation: coverIn .9s cubic-bezier(.19,1,.22,1) both;
}
#deck.k-cover .d-kicker { animation-delay: .05s; }
#deck.k-cover .d-title  { animation-delay: .28s; }
/* MFZ_PA 2026-11-12: "Welcome / أهلاً بكم" bilingual pairing — sits right under the English title,
   same gold family as d-tag but a touch larger, between the title's weight and the Arabic sub. */
#deck.k-cover .d-welcome-ar { animation-delay: .42s; font-size: 4.6cqh; font-weight: 600; color: var(--gold2); letter-spacing: .01em; margin-top: -.6cqh; }
#deck.k-cover .d-sub    { animation-delay: .55s; }
#deck.k-cover .d-tag    { animation-delay: .85s; }

@keyframes coverIn { to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: no-preference) {
  .cover-bg      { animation: kCoverKenBurns 42s ease-in-out infinite alternate; }
  .cover-horizon { animation: kCoverHorizon 14s ease-in-out infinite; }
  .cover-sweep   { animation: kCoverSweep 10s cubic-bezier(.4,0,.2,1) infinite; animation-delay: 2s; }
  .cover-glow    { animation: kCoverGlow 7s ease-in-out infinite; }
}

@keyframes kCoverKenBurns {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.07) translate(-1.2%, -0.6%); }
}
@keyframes kCoverHorizon { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
/* travel is in cqw (container width units) so it's exact: start left -46cqw, band 40cqw wide.
   0%→38% is the actual pass (eased by the animation's own cubic-bezier, so it reads as a calm
   ease-in-out sheen, not a constant-speed wipe); 38%→100% HOLDS the band fully off-screen right
   (left ends at 150cqw ⇒ right edge at 190cqw, i.e. 90cqw clear past the 100cqw viewport edge) —
   that hold is the "calm pause between passes" and, since both the start and end position sit
   fully transparent off-screen, the infinite loop restart is seamless with no jump/pop. */
@keyframes kCoverSweep   { 0% { transform: translateX(0); } 38% { transform: translateX(150cqw); } 100% { transform: translateX(150cqw); } }
@keyframes kCoverGlow    { 0%, 100% { opacity: .75; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } }

@keyframes kCoverTwinkleIn  { 0% { opacity: 0; } 55% { opacity: 0; } 70% { opacity: 1; } 85% { opacity: .55; } 100% { opacity: .85; } }
@keyframes kCoverDustRise   { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: .9; } 85% { opacity: .5; } 100% { opacity: 0; transform: translate(var(--dx, 2cqw), -62cqh); } }

@media (prefers-reduced-motion: no-preference) {
  .cover-twinkle span { animation: kCoverTwinkleIn 1.6s ease-out forwards; }
  .cover-dust span { animation: kCoverDustRise var(--dur, 14s) ease-in var(--delay, 0s) infinite; }
}

@media (prefers-reduced-motion: reduce) {
  .cover-bg, .cover-horizon, .cover-sweep, .cover-glow, .cover-twinkle span, .cover-dust span { animation: none !important; }
  .cover-twinkle span { opacity: .75; }
  #deck.k-cover .d-kicker, #deck.k-cover .d-title, #deck.k-cover .d-welcome-ar, #deck.k-cover .d-sub, #deck.k-cover .d-tag { animation: none; opacity: 1; transform: none; }
}