/* =========================================
   ANIMATIONS.CSS — Classi animazione
   Giuseppe Arena — Luxury & Wine Brand Architect
   ========================================= */

/* -----------------------------------------
   STATO INIZIALE — elementi da animare
   Gli elementi partono invisibili/spostati
   JavaScript rimuove la classe 'is-animated'
   e aggiunge 'animated' per triggerare
   ----------------------------------------- */

/* FADE UP — titoli, testi principali, card */
.animate-fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.animate-fade-up.animated {
  opacity: 1;
  transform: translateY(0);
}

/* FADE IN — immagini, elementi secondari */
.animate-fade-in {
  opacity: 0;
  transition: opacity 0.9s ease;
}

.animate-fade-in.animated {
  opacity: 1;
}

/* FADE LEFT — entra da sinistra */
.animate-fade-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.animate-fade-left.animated {
  opacity: 1;
  transform: translateX(0);
}

/* FADE RIGHT — entra da destra */
.animate-fade-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.animate-fade-right.animated {
  opacity: 1;
  transform: translateX(0);
}

/* -----------------------------------------
   STAGGER CONTAINER — delay incrementale
   Il JS imposta --stagger-delay su ogni figlio
   ----------------------------------------- */
.stagger-container .animate-fade-up,
.stagger-container .animate-fade-in {
  /* Il delay viene impostato inline via JS */
  transition-delay: var(--stagger-delay, 0ms);
}

/* -----------------------------------------
   LINE REVEAL — headline con clip-path
   ----------------------------------------- */
.line-reveal {
  overflow: hidden;
  display: block;
}

.line-reveal__inner {
  display: block;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

.line-reveal.animated .line-reveal__inner {
  clip-path: inset(0 0% 0 0);
}

/* Versione per ogni riga con delay progressivo */
.line-reveal:nth-child(1) .line-reveal__inner {
  transition-delay: 0ms;
}
.line-reveal:nth-child(2) .line-reveal__inner {
  transition-delay: 150ms;
}
.line-reveal:nth-child(3) .line-reveal__inner {
  transition-delay: 300ms;
}
.line-reveal:nth-child(4) .line-reveal__inner {
  transition-delay: 450ms;
}

/* -----------------------------------------
   HERO ENTRANCE — animazione iniziale al load
   ----------------------------------------- */
.hero-enter {
  opacity: 0;
  transform: translateY(30px);
}

/* Applicato via JS con delay progressivo */
.hero-enter.is-entering {
  animation: heroEnter 0.8s ease forwards;
}

@keyframes heroEnter {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Delay per elemento hero (impostati via JS) */
.hero-enter:nth-child(1) { animation-delay: 200ms; }
.hero-enter:nth-child(2) { animation-delay: 400ms; }
.hero-enter:nth-child(3) { animation-delay: 600ms; }
.hero-enter:nth-child(4) { animation-delay: 800ms; }
.hero-enter:nth-child(5) { animation-delay: 1000ms; }

/* -----------------------------------------
   COUNT UP — numeri animati
   La classe viene gestita dal JS
   ----------------------------------------- */
.count-up {
  display: inline-block;
  /* Il numero viene aggiornato via JS */
}

/* -----------------------------------------
   PARALLAX HERO — sfondo hero
   Gestito via JS con requestAnimationFrame
   Disabilitato su mobile
   ----------------------------------------- */
.hero__bg {
  will-change: transform;
  /* La trasformazione viene applicata via JS */
}

@media (max-width: 767px) {
  /* Disabilita parallax su mobile per performance */
  .hero__bg {
    will-change: auto;
    transform: none !important;
  }
}

/* -----------------------------------------
   MARQUEE — logo strip collaborazioni
   ----------------------------------------- */
.marquee-wrapper {
  overflow: hidden;
  position: relative;
  /* Clip stretto: impedisce al marquee-track di espandere il body */
  max-width: 100%;
}

.marquee-wrapper::before,
.marquee-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}

.marquee-wrapper::before {
  left: 0;
  background: linear-gradient(
    to right,
    var(--color-background) 0%,
    transparent 100%
  );
}

.marquee-wrapper::after {
  right: 0;
  background: linear-gradient(
    to left,
    var(--color-background) 0%,
    transparent 100%
  );
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: 60px;
  animation: marquee 20s linear infinite;
  width: max-content;
}

.marquee-track:hover {
  animation-play-state: paused;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Su desktop: griglia statica invece di marquee */
@media (min-width: 768px) {
  .marquee-wrapper {
    overflow: visible;
  }

  .marquee-wrapper::before,
  .marquee-wrapper::after {
    display: none;
  }

  .marquee-track {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xl);
  }
}

/* -----------------------------------------
   LOGO COLLABORAZIONI — greyscale / hover
   ----------------------------------------- */
.collab-logo {
  filter: grayscale(100%);
  opacity: 0.5;
  transition: filter 0.4s ease, opacity 0.4s ease;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 300;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-primary);
  white-space: nowrap;
}

.collab-logo:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* -----------------------------------------
   PROGETTO SHOWCASE — hover overlay
   ----------------------------------------- */
.project-item {
  position: relative;
  overflow: hidden;
}

.project-item__overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 26, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.project-item:hover .project-item__overlay,
.project-item:focus-within .project-item__overlay {
  opacity: 1;
}

/* -----------------------------------------
   REDUCED MOTION — rispetta preferenze utente
   ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .animate-fade-up,
  .animate-fade-in,
  .animate-fade-left,
  .animate-fade-right {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .line-reveal__inner {
    clip-path: inset(0 0% 0 0);
    transition: none;
  }

  .hero__bg {
    transform: none !important;
  }

  .marquee-track {
    animation: none;
  }
}