/* Motion Anything: selected reveal and hover recipes, plus a single hero entrance. */
html:not(.motion-ready) .fade-content { opacity: 1; transform: none; }
.fade-content { transition-duration: .5s; transition-timing-function: cubic-bezier(.16,1,.3,1); will-change: auto; }
@media (prefers-reduced-motion: no-preference) {
  .hero-copy h1 { animation: motion-title .8s cubic-bezier(.16,1,.3,1) both; }
  .hero-portrait picture { animation: motion-image .8s cubic-bezier(.16,1,.3,1) both; }
  .hero-actions { animation: motion-actions .5s cubic-bezier(.16,1,.3,1) .2s both; }
  @keyframes motion-title { from { opacity:0; transform:translateY(32px); } to { opacity:1; transform:translateY(0); } }
  @keyframes motion-image { from { opacity:0; transform:translateY(24px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
  @keyframes motion-actions { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
}
@media (prefers-reduced-motion: reduce) { .hero-copy h1,.hero-portrait picture,.hero-actions { animation:none !important; } }

/* An editorial motion system: one composed entrance, then motion tied to the visitor's actions. */
@media (prefers-reduced-motion: no-preference) {
  .hero { isolation:isolate; }
  .hero::before { content:""; position:absolute; z-index:-1; pointer-events:none; right:2%; top:4%; width:48%; aspect-ratio:1; border:1px solid #a9bcb0; border-radius:50%; animation:ma-orbit-in .8s cubic-bezier(.16,1,.3,1) both; }
  .hero::after { content:""; position:absolute; z-index:-1; pointer-events:none; right:5%; top:9%; width:43%; aspect-ratio:1; border:1px solid #d0b39f; border-radius:50%; animation:ma-orbit-in .8s cubic-bezier(.16,1,.3,1) .08s both; }
  .hero-copy h1 { animation:ma-hero-title .8s cubic-bezier(.16,1,.3,1) both; }
  .hero-portrait picture { animation:ma-hero-image .8s cubic-bezier(.16,1,.3,1) both; }
  .hero-actions { animation:motion-actions .5s cubic-bezier(.16,1,.3,1) .24s both; }
  .case-tab,.journey-stop,.quiz-option,.button { transition:transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease, background-color .2s ease, color .2s ease; }
  .case-tab:hover,.journey-stop:hover,.quiz-option:hover { transform:translateY(-4px); }
  .button:active,.case-tab:active,.journey-stop:active { transform:scale(.97); }
  @keyframes ma-hero-title { from { opacity:0; transform:translateY(55px); } to { opacity:1; transform:translateY(0); } }
  @keyframes ma-hero-image { from { opacity:0; transform:translateY(50px) scale(.93); } to { opacity:1; transform:translateY(0) scale(1); } }
  @keyframes ma-orbit-in { from { opacity:0; transform:scale(.65) rotate(-35deg); } to { opacity:1; transform:scale(1) rotate(0); } }
}
@media (max-width:600px) { .hero::before,.hero::after { top:48%; width:80%; right:0; } }