/**
 * eve-logo-animate.css — progressive "E · v · e" reveal for the Eve wordmark.
 *
 * REUSABLE, DROP-IN. Given the standard Eve lockup SVG (aria-label
 * "Eve, by ev.energy", whose 4 top-level <g> groups are E, v, e, and the
 * "by ev.energy" tagline), add the class `eve-logo-anim` to the <svg> and the
 * letters pop in staggered on load. Add the class in markup for a flash-free
 * first paint, or let eve-logo-animate.js add it (finds the logo by aria-label).
 * Inert without this stylesheet — the class alone changes nothing, so the
 * static logo is unaffected.
 *
 * Timing is copied VERBATIM from the live platform.ev.energy wordmark
 * (captured 2026-07-25): each letter animates opacity 0 -> 1 and
 * transform scale(0.55) -> scale(1); 130ms stagger between letters;
 * transform 550ms cubic-bezier(0.34,1.56,0.64,1) (spring overshoot),
 * opacity 385ms ease-out; the tagline fades opacity over 700ms after 60ms.
 */

@keyframes eve-logo-pop-scale { from { transform: scale(0.55); } to { transform: scale(1); } }
@keyframes eve-logo-pop-fade  { from { opacity: 0; }            to { opacity: 1; } }

/* Each glyph scales about its own centre (matches platform: fill-box + centre). */
.eve-logo-anim > g { transform-box: fill-box; transform-origin: center; }

/* E, v, e — staggered 130ms; spring scale + ease-out fade. */
.eve-logo-anim > g:nth-of-type(1) {
  animation: eve-logo-pop-scale 550ms cubic-bezier(0.34, 1.56, 0.64, 1) 0ms both,
             eve-logo-pop-fade 385ms ease-out 0ms both;
}
.eve-logo-anim > g:nth-of-type(2) {
  animation: eve-logo-pop-scale 550ms cubic-bezier(0.34, 1.56, 0.64, 1) 130ms both,
             eve-logo-pop-fade 385ms ease-out 130ms both;
}
.eve-logo-anim > g:nth-of-type(3) {
  animation: eve-logo-pop-scale 550ms cubic-bezier(0.34, 1.56, 0.64, 1) 260ms both,
             eve-logo-pop-fade 385ms ease-out 260ms both;
}
/* "by ev.energy" tagline — opacity-only fade, matching platform (700ms, 60ms delay). */
.eve-logo-anim > g:nth-of-type(4) {
  animation: eve-logo-pop-fade 700ms ease 60ms both;
}

/* Respect reduced motion: no animation, show the final (static) state. */
@media (prefers-reduced-motion: reduce) {
  .eve-logo-anim > g { animation: none !important; }
}