/* ============================================================
   SHOE HAVEN — ENTRANCE & SCROLL ANIMATIONS
   Plain CSS fallbacks; GSAP-driven reveals layered on top.
   ============================================================ */

.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }

.stagger > * { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.stagger.in > * { opacity: 1; transform: translateY(0); }
.stagger.in > *:nth-child(1) { transition-delay: .05s; }
.stagger.in > *:nth-child(2) { transition-delay: .12s; }
.stagger.in > *:nth-child(3) { transition-delay: .19s; }
.stagger.in > *:nth-child(4) { transition-delay: .26s; }
.stagger.in > *:nth-child(5) { transition-delay: .33s; }
.stagger.in > *:nth-child(6) { transition-delay: .4s; }
.stagger.in > *:nth-child(7) { transition-delay: .47s; }
.stagger.in > *:nth-child(8) { transition-delay: .54s; }

.float { animation: float 6s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-12px) } }

/* Hero title animated gradient */
.hero h1 em { background-size: 200% 200%; animation: shift 6s ease infinite; }
@keyframes shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Fade-up for page content on load */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
main > section { animation: fadeUp .7s var(--ease) both; }
main > section:nth-child(2) { animation-delay: .08s; }
main > section:nth-child(3) { animation-delay: .16s; }

/* View Transitions (where supported) */
@supports (view-transition-name: x) {
  ::view-transition-old(root) { animation: fadeOut .22s ease forwards; }
  ::view-transition-new(root) { animation: fadeUp .32s var(--ease) forwards; }
  @keyframes fadeOut { to { opacity: 0; } }
}

/* Ripple on buttons */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at var(--rx,50%) var(--ry,50%), rgba(255,255,255,.3) 0%, transparent 50%);
  opacity: 0; transition: opacity .4s;
}
.btn:active::after { opacity: 1; transition: opacity 0s; }