/* ══════════════════════════════════════════════════════════════════════════
   alt.style — animations.css  ·  slim keyframes for the light editorial system
   Reveal states live in style.css; this adds reusable motion utilities.
══════════════════════════════════════════════════════════════════════════ */

@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp  { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes scaleIn  { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@keyframes floaty   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes drift    { 0%,100% { transform: translate(0,0); } 50% { transform: translate(14px,-18px); } }
@keyframes marquee  { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pulseSoft{ 0%,100% { opacity: .45; } 50% { opacity: .7; } }

/* Utility classes */
.anim-fade   { animation: fadeIn  1s var(--ease) both; }
.anim-up     { animation: slideUp 1s var(--ease) both; }
.anim-scale  { animation: scaleIn 1s var(--ease) both; }
.float       { animation: floaty 7s ease-in-out infinite; }
.float-slow  { animation: drift 12s ease-in-out infinite; }

.stagger-1 { animation-delay: .08s; }
.stagger-2 { animation-delay: .16s; }
.stagger-3 { animation-delay: .24s; }
.stagger-4 { animation-delay: .32s; }
.stagger-5 { animation-delay: .40s; }
.stagger-6 { animation-delay: .48s; }

/* Hover lift / image zoom helpers */
.hover-lift { transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.hover-lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }

.img-zoom { overflow: hidden; }
.img-zoom img { transition: transform 1.1s var(--ease); }
.img-zoom:hover img { transform: scale(1.06); }

/* Marquee track (press strip / lookbook) */
.marquee { overflow: hidden; }
.marquee__track { display: inline-flex; white-space: nowrap; animation: marquee 38s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .float, .float-slow, .marquee__track { animation: none !important; }
}