/*
 * Hero entrance choreography + low-power safeguards.
 * Loaded after style.css. Kept separate so the core layout stylesheet
 * stays readable and this file can be tweaked independently.
 */

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

.js-reveal-ready .hero-eyebrow { animation: hero-rise var(--dur-slow) var(--ease) both; animation-delay: 60ms; }
.js-reveal-ready .hero-copy h1 { animation: hero-rise var(--dur-slow) var(--ease) both; animation-delay: 160ms; }
.js-reveal-ready .hero-lede { animation: hero-rise var(--dur-slow) var(--ease) both; animation-delay: 320ms; }
.js-reveal-ready .hero-actions { animation: hero-rise var(--dur-slow) var(--ease) both; animation-delay: 460ms; }
.js-reveal-ready .hero-meta { animation: hero-rise var(--dur-slow) var(--ease) both; animation-delay: 580ms; }
.js-reveal-ready .hero-visual { animation: hero-rise var(--dur-slow) var(--ease) both; animation-delay: 260ms; }

/* Subtle floating/parallax idle motion for the hero visual (transform is
   also nudged by scroll via JS; this adds a gentle idle drift at rest). */
.js-reveal-ready .hero-portrait { animation: hero-float 6s ease-in-out infinite; animation-delay: 900ms; }
@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Reduce/disable non-essential motion when the OS asks for it, and when
   JS flags the device as low-power (see main.js: adds .low-power to body). */
@media (prefers-reduced-motion: reduce) {
  .js-reveal-ready .hero-eyebrow,
  .js-reveal-ready .hero-copy h1,
  .js-reveal-ready .hero-lede,
  .js-reveal-ready .hero-actions,
  .js-reveal-ready .hero-meta,
  .js-reveal-ready .hero-visual,
  .js-reveal-ready .hero-portrait {
    animation: none;
  }
}

body.low-power .hero-portrait { animation: none; }
body.low-power .hero-scan .sweep,
body.low-power .hero-scan .node { animation-duration: 0.001ms; }
body.low-power [data-reveal] { transition-duration: 220ms !important; }