/* ═══════════════════════════════════════════════════════════════════════════
   Stylight — L'Arte di Vestire  |  Animations & Scroll Reveals
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Scroll reveal base ───────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Delay modifiers */
.reveal-delay-1  { transition-delay: 0.1s; }
.reveal-delay-2  { transition-delay: 0.2s; }
.reveal-delay-3  { transition-delay: 0.3s; }
.reveal-delay-4  { transition-delay: 0.4s; }
.reveal-delay-5  { transition-delay: 0.5s; }
.reveal-delay-6  { transition-delay: 0.6s; }

/* Direction variants */
.reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.reveal-left.is-visible { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.reveal-right.is-visible { opacity: 1; transform: translateX(0); }

.reveal-scale {
  opacity: 0;
  transform: scale(0.93);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal-scale.is-visible { opacity: 1; transform: scale(1); }

/* ─── Hero entrance ────────────────────────────────────────────────────────── */
.hero-animate {
  opacity: 0;
  animation: fadeInUp 0.85s ease-out forwards;
}

.hero-animate-1 { animation-delay: 0.1s; }
.hero-animate-2 { animation-delay: 0.25s; }
.hero-animate-3 { animation-delay: 0.4s; }
.hero-animate-4 { animation-delay: 0.55s; }
.hero-animate-5 { animation-delay: 0.7s; }

.hero-animate-img {
  opacity: 0;
  animation: fadeInRight 1s ease-out 0.3s forwards;
}

/* ─── Named keyframes ──────────────────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes drawUnderline {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}

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

@keyframes floatLeftRight {
  0%, 100% { transform: translateX(0); }
  50%       { transform: translateX(8px); }
}

@keyframes scrollLineDown {
  0%   { top: -100%; }
  100% { top: 100%; }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.2); opacity: 0.7; }
}

@keyframes wobble {
  0%   { transform: rotate(-1.5deg); }
  25%  { transform: rotate(2deg); }
  50%  { transform: rotate(-1.5deg); }
  75%  { transform: rotate(1deg); }
  100% { transform: rotate(0deg); }
}

@keyframes cartPulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.45); }
  70%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}

@keyframes slideInRight {
  from { transform: translateX(calc(100% + 2rem)); }
  to   { transform: translateX(0); }
}

@keyframes slideOutRight {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(100% + 2rem)); }
}

@keyframes shimmer {
  from { background-position: -600px 0; }
  to   { background-position: 600px 0; }
}

/* ─── SVG stroke draw-in ───────────────────────────────────────────────────── */
.svg-draw {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 1.5s ease;
}

.svg-draw.is-visible { stroke-dashoffset: 0; }

/* ─── Skeleton loading state ───────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--color-bg-secondary) 25%, var(--color-border) 50%, var(--color-bg-secondary) 75%);
  background-size: 600px;
  animation: shimmer 1.5s infinite;
}

/* ─── Reduced motion override ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .reveal.is-visible,
  .reveal-left.is-visible,
  .reveal-right.is-visible,
  .reveal-scale.is-visible {
    opacity: 1;
    transform: none;
  }

  .hero-animate,
  .hero-animate-img {
    opacity: 1;
    animation: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}