/* ==========================================================================
   LIUminate — motion
   Kept deliberately quiet: content fades in as it scrolls into view, the
   header gains a shadow on scroll, and the LIUminate flame in the home hero
   is animated. Everything is scoped under html.motion, which motion.js only
   adds when the visitor has NOT asked for reduced motion.
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------- Header ---------- */
.site-header { transition: box-shadow 0.3s ease; }
.site-header.is-scrolled { box-shadow: 0 4px 18px rgba(11, 42, 79, 0.08); }

/* ---------- Hero: soft static light ---------- */
.hero > .container { position: relative; z-index: 1; }
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 70% at 85% 10%, rgba(42, 123, 214, 0.55), transparent 70%);
}

/* ---------- Gentle entrance ---------- */
.motion .hero h1,
.motion .hero .hero-sub,
.motion .hero .hero-tagline,
.motion .hero .date-chips,
.motion .hero .hero-actions,
.motion .hero .winner,
.motion .hero .hero-visual { animation: fade-in 0.7s var(--ease-out) both; }
.motion .hero .hero-sub { animation-delay: 0.08s; }
.motion .hero .hero-tagline { animation-delay: 0.14s; }
.motion .hero .date-chips { animation-delay: 0.2s; }
.motion .hero .hero-actions { animation-delay: 0.26s; }
@keyframes fade-in { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Scroll reveals ----------
   Base state is visible; elements are only hidden while waiting to be revealed,
   so removing the classes afterwards (motion.js does) never hides anything. */
.motion .reveal:not(.is-in) { opacity: 0; transform: translateY(12px); }
.motion .reveal {
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 60ms);
}

/* ---------- Section headings: a short, static accent rule ---------- */
.section-head .section-title::after {
  content: ''; display: block; width: 40px; height: 3px; margin-top: 16px; background: var(--orange);
}
.section-head.center .section-title::after { margin-inline: auto; }

/* ---------- Hover: understated ---------- */
.card, .talk-card { transition: box-shadow 0.25s ease, border-color 0.25s ease; }
.steps .card:hover, .grid-3 > .card:hover, .talk-card:hover { box-shadow: 0 10px 28px rgba(11, 42, 79, 0.1); }

/* LIUminate flame (SVG): rises in, then each tongue flickers, it glows and throws off embers */
.motion .hero-flame { animation: flame-rise 1.3s var(--ease-out) 0.7s both; }
.motion .flame-svg { animation: flame-glow 3s ease-in-out infinite; }
.motion .flame-big { transform-origin: 50% 100%; animation: flicker 2.2s ease-in-out infinite; }
.motion .flame-small { transform-origin: 50% 100%; animation: flicker 1.7s ease-in-out -0.6s infinite reverse; }
.motion .flame-dot { transform-origin: 50% 50%; animation: dot-pulse 2.8s ease-in-out infinite; }
@keyframes dot-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.motion .flame-halo { animation: halo 2.2s ease-in-out infinite; }
.motion .ember { animation: ember var(--t, 2.8s) ease-out var(--d, 0s) infinite; }
@keyframes flame-rise { from { opacity: 0; transform: translateY(40px) scale(0.6); filter: blur(6px); } }
@keyframes flicker {
  0%, 100% { transform: scale(1, 1) skewX(0deg); }
  20% { transform: scale(0.97, 1.05) skewX(-2deg); }
  40% { transform: scale(1.03, 0.97) skewX(1.5deg); }
  60% { transform: scale(0.98, 1.04) skewX(-1deg); }
  80% { transform: scale(1.02, 0.98) skewX(2deg); }
}
@keyframes flame-glow {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(247, 147, 30, 0.5)); }
  50% { filter: drop-shadow(0 0 22px rgba(247, 147, 30, 0.95)) drop-shadow(0 0 4px rgba(255, 220, 160, 0.8)); }
}
@keyframes halo { 0%, 100% { transform: scale(0.92); opacity: 0.75; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes ember {
  0% { opacity: 0; transform: translate(0, 0) scale(1); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x, 0), -95px) scale(0.3); }
}