/* =============================================================================
   CINESTAR EVENTS -- Storm Core (shared inner-page foundation)
   theme/cinestar-child/assets/css/storm-core.css
   Depends on: assets/css/main.css (design tokens)
   Loaded on every inner Storm page (NOT the homepage -- homepage uses home.css,
   which still carries its own copy of these primitives). Keep visually in sync
   with home.css sections 8/9/11 until a future dedupe folds both onto this file.
   ============================================================================= */


/* =============================================================================
   8. SCROLL FADE-UP ANIMATIONS
   (copied verbatim from home.css §8, lines 1377-1394)
   ============================================================================= */

.ce-fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.ce-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays via data-delay attribute (set inline in HTML) */
.ce-fade-up[data-delay="100"] { transition-delay: 100ms; }
.ce-fade-up[data-delay="200"] { transition-delay: 200ms; }
.ce-fade-up[data-delay="300"] { transition-delay: 300ms; }
.ce-fade-up[data-delay="400"] { transition-delay: 400ms; }


/* =============================================================================
   9. SHARED SECTION HEADINGS
   (base rules only -- no homepage-section-scoped overrides)
   (copied verbatim from home.css §6/§9, lines 1049-1052 + 1402-1419)
   ============================================================================= */

.ce-section-heading {
  font-size: clamp(var(--ce-text-2xl), 4vw, var(--ce-text-4xl));
  margin-block-end: 2.5rem;
}

/* Section eyebrow — gold uppercase label above section headings */
.ce-section-eyebrow {
  font-family: var(--ce-font-body);
  font-size: var(--ce-text-sm);
  font-weight: 600;
  color: var(--ce-gold);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin: 0 0 0.75rem;
}

/* Generic section sub-heading */
.ce-section-sub {
  font-size: var(--ce-text-base);
  color: var(--ce-text-muted);
  max-width: 52ch;
  margin-inline: auto;
  margin-block-start: 0.75rem;
}


/* =============================================================================
   SHIMMER KEYFRAME
   (copied verbatim from home.css line 1918-1920)
   ============================================================================= */

@keyframes ce-shimmer-smooth {
  to { background-position: 200% center; }
}


/* =============================================================================
   11. STORM FUSION FOUNDATION — inner-page design language
   Chosen direction: "Storm of Light" (B) + A's divider light-pulse + E's
   gold-foil shimmer titles. These are the harmony devices shared by EVERY
   Storm page section; per-section treatments build on top of them.
   (copied verbatim from home.css §11, lines 1999-2136)
   ============================================================================= */

/* ── Shimmer headings (E) — one treatment for every section heading.
   Same champagne gold + smooth seamless shimmer as the approved hero accent
   (identical gradient ends keep the 4s loop continuous; no dark bronze). */
.ce-section-heading,
.ce-reel-header__heading {
  background: linear-gradient(100deg, #FFEFA0 0%, #FFDF4F 26%, #FFFEF5 50%, #FFDF4F 74%, #FFEFA0 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  animation: ce-shimmer-smooth 4s linear infinite;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.55)) drop-shadow(0 0 16px rgba(255, 215, 0, 0.15));
}

/* ── Footlight rule — the glowing bar from the event page, ignites on reveal. */
.ce-storm-footlight {
  display: block;
  width: 84px;
  height: 2px;
  border-radius: 2px;
  margin: 18px auto 0;
  background: radial-gradient(60% 100% at 50% 0%, #FFD700, rgba(255, 215, 0, 0));
  box-shadow: 0 0 14px 1px rgba(255, 215, 0, 0.5);
  transform: scaleX(0);
  transform-origin: center;
}

@keyframes ce-ignite {
  0%   { transform: scaleX(0); opacity: 0; }
  55%  { transform: scaleX(1); opacity: 1; }
  68%  { opacity: 0.45; }
  78%  { opacity: 1; }
  88%  { opacity: 0.7; }
  100% { transform: scaleX(1); opacity: 1; }
}

/* Hero footlight ignites on load; section footlights ignite when their
   .ce-fade-up lockup becomes .is-visible (observer already in home.js). */
.ce-hero .ce-storm-footlight,
.ce-fade-up.is-visible .ce-storm-footlight {
  animation: ce-ignite 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

/* ── Storm field (B) — one fixed atmospheric layer behind the whole page so
   the light flows continuously between sections instead of restarting. */
.ce-storm-page { position: relative; }
.ce-storm-page > section,
.ce-storm-page > .ce-storm-rule { position: relative; z-index: 1; }

.ce-storm-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.ce-storm-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform;
}
.ce-storm-blob--p { width: 560px; height: 430px; left: 2%;  top: 6%;     background: rgba(123, 47, 190, 0.26); animation: ce-drift-p 26s ease-in-out infinite alternate; }
.ce-storm-blob--m { width: 520px; height: 420px; right: 0;  top: 32%;    background: rgba(255, 20, 147, 0.18); animation: ce-drift-m 21s ease-in-out infinite alternate; }
.ce-storm-blob--g { width: 640px; height: 380px; left: 28%; bottom: -4%; background: rgba(255, 215, 0, 0.11);  animation: ce-drift-g 30s ease-in-out infinite alternate; }
@keyframes ce-drift-p { from { transform: translate(0, 0) scale(1); }    to { transform: translate(60px, 40px) scale(1.08); } }
@keyframes ce-drift-m { from { transform: translate(0, 0) scale(1.05); } to { transform: translate(-70px, 30px) scale(0.96); } }
@keyframes ce-drift-g { from { transform: translate(0, 0); }             to { transform: translate(50px, -30px) scale(1.1); } }

/* Rising gold embers — spans spawned by home.js (skipped for reduced-motion) */
.ce-storm-embers { position: absolute; inset: 0; overflow: hidden; }
.ce-storm-ember {
  position: absolute;
  bottom: -8px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #FFD700;
  box-shadow: 0 0 6px 1px rgba(255, 215, 0, 0.7);
  opacity: 0;
  animation: ce-ember-rise linear infinite;
}
@keyframes ce-ember-rise {
  0%   { transform: translate(0, 0); opacity: 0; }
  8%   { opacity: 0.75; }
  55%  { opacity: 0.45; }
  100% { transform: translate(26px, -82vh); opacity: 0; }
}

/* ── Divider light-pulse (A) — hairline gold rule with a travelling glint.
   Stagger the sweep per divider via --rule-delay (inline). */
.ce-storm-rule {
  height: 1px;
  max-width: 1280px;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.28) 18%, rgba(255, 215, 0, 0.28) 82%, transparent);
  position: relative;
  overflow: hidden;
}
.ce-storm-rule::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 140px;
  left: -15%;
  background: linear-gradient(90deg, transparent, rgba(255, 246, 200, 0.7), transparent);
  animation: ce-rule-sweep 8s ease-in-out infinite;
  animation-delay: var(--rule-delay, 0s);
}
@keyframes ce-rule-sweep {
  0%        { left: -15%; }
  60%, 100% { left: 108%; }
}

/* ── Mobile tuning — cheaper atmosphere on small screens */
@media (max-width: 767px) {
  .ce-storm-blob { filter: blur(50px); }
  .ce-storm-blob--m { display: none; }
}

/* ── Reduced motion: static foil + static glows, no embers/sweeps/ignites */
@media (prefers-reduced-motion: reduce) {
  .ce-section-heading,
  .ce-reel-header__heading,
  .ce-hero--atmosphere .ce-hero__headline-accent { animation: none; background-position: 50% center; }
  .ce-storm-blob { animation: none; }
  .ce-storm-rule::after { animation: none; opacity: 0; }
  .ce-storm-ember { display: none; }
  .ce-storm-footlight { transform: scaleX(1); }
  .ce-hero .ce-storm-footlight,
  .ce-fade-up.is-visible .ce-storm-footlight { animation: none; }
}


/* ── Footlight as its own reveal element ──
   For headings whose lockup elements each carry .ce-fade-up individually
   (stats, testimonials, sponsors), the footlight rides its own .ce-fade-up.
   Neutralise the fade-up's opacity/translate so the ignite owns the show.
   (copied verbatim from home.css lines 2338-2354) */
.ce-storm-footlight.ce-fade-up {
  opacity: 1;
  transform: scaleX(0);
  transition: none;
}

.ce-storm-footlight.ce-fade-up.is-visible {
  animation: ce-ignite 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

@media (prefers-reduced-motion: reduce) {
  .ce-storm-footlight.ce-fade-up,
  .ce-storm-footlight.ce-fade-up.is-visible {
    animation: none;
    transform: scaleX(1);
  }
}


/* =============================================================================
   INNER-PAGE ATMOSPHERE DIAL-DOWN
   Inner pages carry more body copy than the homepage -- calm the field so text
   stays legible while the atmosphere still reads.
   ============================================================================= */
.ce-storm-page .ce-storm-blob--p { opacity: 0.7; }
.ce-storm-page .ce-storm-blob--m { opacity: 0.6; }
.ce-storm-page .ce-storm-blob--g { opacity: 0.7; }