/* =====================================================================
   SparkMotiv home hero - animated layer stack
   Background/scene image layers only. Your logo, headline and stats
   stay as the live HTML you already have on the page; they just get
   the .l-topcontent fade hook applied to their wrapper.

   Layer z-order, delays, durations and effects come straight from
   01-Home Layer Order.xlsx.

   Keep this in a real .css file (NOT inside a .cshtml <style> block),
   because Razor would try to parse @keyframes / @media as directives.
   ===================================================================== */

.sm-panel {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;        /* gives the panel height; layers are absolute */
  overflow: hidden;
  background: #1a0b2e;          /* fallback behind the gradient base */
  container-type: size;         /* lets any cqw-based content scale with panel */
}

/* Each scene layer is a full-canvas image filling the panel. */
.sm-panel .sm-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  will-change: opacity;
}

/* Static base layers - always visible. */
.sm-panel .sm-layer.base { opacity: 1; }

/* Animated layers start hidden until the panel is in view. */
.sm-panel .sm-layer.anim { opacity: 0; }

/* Your existing content wrapper (logo + headline + stats) becomes the
   topContent layer. Add classes: "sm-content anim l-topcontent".
   It sits above every image layer and fades in on its cue.
   The existing hero content was laid out in normal flow, so it is
   overlaid on the panel here as a full-canvas absolute layer. */
.sm-panel .sm-content {
  position: absolute;
  inset: 0;
  z-index: 12;
}

/* Keep the headline clear of the fixed topbar/logo (70px bar) so the
   hero text always starts below the logo. */
.sm-panel .sm-content .hero-content {
  padding-top: 100px;
}

/* When the panel scrolls into view, run each cue.
   fill-mode:both holds opacity:0 through the delay, opacity:1 after.
   Removing .playing resets everything so it can replay. */
.sm-panel.playing .sm-layer.anim,
.sm-panel.playing .sm-content.anim {
  animation-name: smFadeIn;
  animation-timing-function: ease;
  animation-fill-mode: both;
}

/* z-index + delay + duration per the spreadsheet */
.sm-panel .l-tablepeeps { z-index: 2;  animation-delay: .7s;   animation-duration: .5s; }
.sm-panel .l-bolt       { z-index: 3;  animation-delay: 1.2s;  animation-duration: .8s; }
.sm-panel .l-kyler      { z-index: 4;  animation-delay: 6.25s; animation-duration: 1.25s; }
.sm-panel .l-edisa      { z-index: 5;  animation-delay: 5s;    animation-duration: 1.25s; }
.sm-panel .l-doug       { z-index: 6;  animation-delay: 4.25s; animation-duration: 1.25s; }
.sm-panel .l-charlie    { z-index: 7;  animation-delay: 3s;    animation-duration: 1.25s; }
.sm-panel .l-minh       { z-index: 8;  animation-delay: 1.5s;  animation-duration: 1.25s; }
.sm-panel .l-wisp       { z-index: 9;  animation-delay: 7s;    animation-duration: 2s; }
.sm-panel .l-botbar     { z-index: 10; animation-delay: .2s;   animation-duration: .5s; }
.sm-panel .l-current    { z-index: 11; animation-delay: .5s;   animation-duration: .4s; }
.sm-panel .l-topcontent { animation-delay: .5s;  animation-duration: .5s; }

/* Static base */
.sm-panel .l-abyss { z-index: 0; }
.sm-panel .l-grad  { z-index: 1; }

/* The bolt must not show on load, then flickers on like lightning. */
.sm-panel.playing .sm-layer.l-bolt {
  animation-name: smBoltFlicker;
  animation-timing-function: linear;
}

@keyframes smFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes smBoltFlicker {
  0%   { opacity: 0; }
  8%   { opacity: .7; }
  14%  { opacity: .05; }
  24%  { opacity: .9; }
  30%  { opacity: .15; }
  44%  { opacity: 1; }
  52%  { opacity: .35; }
  66%  { opacity: 1; }
  78%  { opacity: .6; }
  100% { opacity: 1; }
}

/* Honour reduced-motion: show the finished scene, no animation. */
@media (prefers-reduced-motion: reduce) {
  .sm-panel .sm-layer.anim,
  .sm-panel .sm-content.anim { opacity: 1 !important; animation: none !important; }
}