/* Optional presentation layer. Content stays visible without JavaScript. */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > .eyebrow { animation: naija-enter .65s .04s both; }
  .hero-copy > h1 { animation: naija-enter .8s .13s both; }
  .hero-copy > p { animation: naija-enter .75s .23s both; }
  .hero-actions { animation: naija-enter .7s .33s both; }
  .hero-footnote { animation: naija-enter .7s .42s both; }
  .hero-art .portrait-card.front {
    animation: naija-card-enter .9s .2s both, naija-float 3.5s 1.1s ease-in-out;
  }
  .hero-art .portrait-card.back {
    animation: naija-card-enter 1s .32s both, naija-float 3.2s 1.35s ease-in-out reverse;
  }
  .hero-art .scribble { animation: naija-enter .9s .55s both; }
  .hero-art .time-sticker { animation: naija-sticker .85s .68s both; }
  .hero-art .floating-note { animation: naija-enter .8s .8s both; }
  .motion-ready .motion-reveal {
    opacity: 0;
    translate: 0 22px;
    transition: opacity .7s ease, translate .7s cubic-bezier(.2,.7,.25,1);
  }
  .motion-ready .motion-reveal.is-revealed { opacity: 1; translate: 0 0; }
  .motion-ready .story-grid > .motion-reveal:nth-child(2),
  .motion-ready .steps > .motion-reveal:nth-child(2) { transition-delay: 75ms; }
  .motion-ready .story-grid > .motion-reveal:nth-child(3),
  .motion-ready .steps > .motion-reveal:nth-child(3) { transition-delay: 150ms; }
  .motion-ready .story-grid > .motion-reveal:nth-child(4) { transition-delay: 225ms; }
  .motion-ready .about-copy.motion-reveal { transition-delay: 100ms; }
  .motion-ready .motion-reveal:focus-within { opacity: 1; translate: 0 0; transition-delay: 0s; }
  dialog[open] { animation: naija-dialog .24s cubic-bezier(.2,.7,.25,1) both; }
  dialog[open]::backdrop { animation: naija-backdrop .2s ease both; }
  .faq-list details[open] > p { animation: naija-faq .25s ease both; }
  .button { transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
  .button > span, .text-link > span:last-child {
    display: inline-block;
    transition: translate .22s ease;
  }
  .button:hover > span, .text-link:hover > span:last-child { translate: 2px -2px; }
  .button:active { transform: translateY(0) scale(.98); }
  .story-play { transition: background .25s ease, scale .25s ease; }
  .story:hover .story-play, .story:focus-visible .story-play { scale: 1.09; background: #173d2d; }
  .header nav a { position: relative; }
  .header nav a::after {
    content: ''; position: absolute; left: 0; bottom: -5px;
    width: 100%; height: 1px; background: currentColor;
    transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
  }
  .header nav a:hover::after, .header nav a:focus-visible::after { transform: scaleX(1); }
  @media (max-width: 800px) {
    #navigation.open { animation: naija-menu .2s ease both; }
  }
}
@keyframes naija-enter {
  from { opacity: 0; translate: 0 17px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes naija-card-enter {
  from { opacity: 0; translate: 0 25px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes naija-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -9px; }
}
@keyframes naija-sticker {
  from { opacity: 0; scale: .83; }
  65% { opacity: 1; scale: 1.035; }
  to { opacity: 1; scale: 1; }
}
@keyframes naija-dialog {
  from { opacity: 0; translate: 0 12px; scale: .985; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes naija-backdrop { from { opacity: 0; } to { opacity: 1; } }
@keyframes naija-faq { from { opacity: 0; translate: 0 -4px; } to { opacity: 1; translate: 0 0; } }
@keyframes naija-menu { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }
/* Stop promptly if the user changes their system preference mid-session. */
@media (prefers-reduced-motion: reduce) {
  .motion-reveal { opacity: 1 !important; translate: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}