.fade-in { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: 0.12s; }
.delay-2 { transition-delay: 0.24s; }
.delay-3 { transition-delay: 0.36s; }

@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

html.js .hero-content > * { opacity: 0; transform: translateY(20px); }
html.js body.entered .hero-content > * { animation: rise 0.9s cubic-bezier(.2,.7,.3,1) forwards; }
body.entered .hero-content > *:nth-child(1) { animation-delay: 0.15s; }
body.entered .hero-content > *:nth-child(2) { animation-delay: 0.30s; }
body.entered .hero-content > *:nth-child(3) { animation-delay: 0.45s; }
body.entered .hero-content > *:nth-child(4) { animation-delay: 0.60s; }
@keyframes rise { to { opacity: 1; transform: translateY(0); } }

html.js .hero-motif .tile,
html.js .hero-motif .motif-dot { opacity: 0; transform: scale(0.3); }
html.js body.entered .hero-motif .tile,
html.js body.entered .hero-motif .motif-dot { animation: tilepop 0.85s cubic-bezier(.2,.9,.3,1.4) forwards; }
@keyframes tilepop { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: no-preference) {
  body.entered .hero-motif .tile.circle::before { animation: breathe 8s ease-in-out infinite; }
  body.entered .hero-motif .tile.circle:nth-child(even)::before { animation-duration: 11s; animation-delay: -4s; }
  body.entered .hero-motif .motif-dot::before { animation: breathe 10s ease-in-out infinite; animation-delay: -2s; }
}
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(0.9); } }

@media (prefers-reduced-motion: reduce) {
  html.js .hero-content > *, html.js .hero-motif .tile, html.js .hero-motif .motif-dot { opacity: 1 !important; transform: none !important; animation: none !important; }
  .intro-logo { animation: none !important; }
}