/* ═══════════════════════════════════════════
   ABSTRA STUDIO — animations.css
   Tutte le animazioni, transizioni, hover
═══════════════════════════════════════════ */


/* ─────────────────────────────────────────
   PREFERS-REDUCED-MOTION
───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:       0.01ms !important;
    animation-iteration-count: 1     !important;
    transition-duration:      0.01ms !important;
    scroll-behavior:          auto   !important;
  }
}


/* ─────────────────────────────────────────
   SISTEMA SCROLL — .anim-hidden → .anim-visible
   Aggiunto da IntersectionObserver (animations.js)
───────────────────────────────────────── */
.anim-hidden {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity   500ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.anim-hidden.anim-visible {
  opacity:   1;
  transform: translateY(0);
}

.anim-delay-1 { transition-delay: 100ms; }
.anim-delay-2 { transition-delay: 200ms; }
.anim-delay-3 { transition-delay: 300ms; }
.anim-delay-4 { transition-delay: 400ms; }
.anim-delay-5 { transition-delay: 500ms; }
.anim-delay-6 { transition-delay: 600ms; }


/* ─────────────────────────────────────────
   HEADER — entrata al page load (CSS keyframe)
───────────────────────────────────────── */
@keyframes header-slide-in {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes header-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.logo-link {
  animation: header-slide-in 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.search-wrap {
  animation: header-fade-in 400ms 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.hamburger {
  animation: header-fade-in 400ms 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}


/* ─────────────────────────────────────────
   HEADER NAV MOBILE — underline accento su hover
───────────────────────────────────────── */
.mobile-nav a {
  position: relative;
}

.mobile-nav a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mobile-nav a:hover::after,
.mobile-nav a:focus-visible::after {
  transform: scaleX(1);
}


/* ─────────────────────────────────────────
   HERO — PAROLE H1 (stagger via JS)
───────────────────────────────────────── */
.hero-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity   600ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero-word.anim-visible {
  opacity:   1;
  transform: translateY(0);
}


/* ─────────────────────────────────────────
   HERO — SCRIB (Indie Flower)
───────────────────────────────────────── */
.hero-scrib {
  opacity: 0;
  transition: opacity 400ms ease;
}

.hero-scrib.anim-visible {
  opacity: 1;
}


/* ─────────────────────────────────────────
   HERO — "rallenta" (testo barrato animato)
───────────────────────────────────────── */

/* Override text-decoration statico da style.css — la linea è animata via ::after */
.hero-struck {
  text-decoration: none !important;
  position: relative;
  opacity: 0;
  transition: opacity 300ms ease;
}

.hero-struck.anim-visible {
  opacity: 1;
}

/* Linea strike: cresce da sinistra a destra */
.hero-struck::after {
  content: '';
  position: absolute;
  left: 0;
  top: 52%;
  transform: translateY(-50%);
  width: 0;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
}

.hero-struck.strike-active::after {
  width: 100%;
  transition: width 500ms ease-in-out;
}


/* ─────────────────────────────────────────
   HERO — "il tuo business?" (slideIn da destra)
───────────────────────────────────────── */
.hero-rest {
  opacity: 0;
  transform: translateX(30px);
  transition:
    opacity   400ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero-rest.anim-visible {
  opacity:   1;
  transform: translateX(0);
}


/* ─────────────────────────────────────────
   HERO — Sottotitolo, Tagline, CTA, Slider
   (fadeIn + translateY via JS)
───────────────────────────────────────── */
.hero-subtitle,
.hero-tagline,
.hero-cta,
.hero-slider {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity   500ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero-subtitle.anim-visible,
.hero-tagline.anim-visible,
.hero-cta.anim-visible,
.hero-slider.anim-visible {
  opacity:   1;
  transform: translateY(0);
}

/* Hover CTA — override stato .anim-visible (specificità 0-3-0 > 0-2-0) */
.hero-cta.anim-visible:hover {
  transform: translateY(-2px);
}


/* ─────────────────────────────────────────
   CTA BUTTON — pulse loop
───────────────────────────────────────── */
@keyframes cta-pulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(255, 32, 78, 0.30); }
  50%       { box-shadow: 0 0 0 10px rgba(255, 32, 78, 0); }
}

.cta-pulse {
  animation: cta-pulse 2s ease-in-out infinite;
}


/* ─────────────────────────────────────────
   CARD — hover lift
───────────────────────────────────────── */
.trap-card,
.offer-card,
.past-card {
  transition:
    transform    250ms ease-out,
    box-shadow   250ms ease-out,
    border-color 250ms ease-out;
}

.trap-card:hover,
.offer-card:hover,
.past-card:hover {
  transform:   translateY(-4px);
  box-shadow:  0 8px 32px rgba(0, 0, 0, 0.08);
  
}