/* ============================================================
   animations.css — Animazioni fade-in via IntersectionObserver
   TiramisuCode — 2025
   ============================================================ */

/* ============================================================
   STATO INIZIALE — elementi da animare
   Gli elementi ricevono la classe .fade-in dal JS tramite
   IntersectionObserver quando entrano nel viewport.
   ============================================================ */

/* Classe base applicata in main.js agli elementi osservati */
.anim-item {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Stato visibile: aggiunto da IntersectionObserver */
.anim-item.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Varianti di delay per animazioni staggered (es. griglia di card) */
.anim-delay-1 { transition-delay: 0.1s; }
.anim-delay-2 { transition-delay: 0.2s; }
.anim-delay-3 { transition-delay: 0.3s; }
.anim-delay-4 { transition-delay: 0.4s; }
.anim-delay-5 { transition-delay: 0.5s; }
.anim-delay-6 { transition-delay: 0.6s; }

/* Variante: slide da sinistra */
.anim-slide-left {
  opacity: 0;
  transform: translateX(-24px);
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.anim-slide-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Variante: slide da destra */
.anim-slide-right {
  opacity: 0;
  transform: translateX(24px);
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.anim-slide-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Variante: solo fade (senza traslazione) */
.anim-fade {
  opacity: 0;
  transition: opacity 0.8s ease;
}

.anim-fade.visible {
  opacity: 1;
}

/* Variante: scala (per elementi di enfasi) */
.anim-scale {
  opacity: 0;
  transform: scale(0.92);
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.anim-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* ============================================================
   ANIMAZIONE COSTRUZIONE TIRAMISÙ
   I layer del tiramisù si costruiscono dal basso verso l'alto
   quando la sezione entra nel viewport.
   ============================================================ */

/* Stato iniziale dei layer (prima dell'animazione) */
.tiramisu-layer {
  opacity: 0;
  transform: scaleY(0);
  transform-origin: bottom center;
}

/* Stato animato: la classe .tiramisu-animated viene aggiunta
   dal JS quando la sezione tiramisù entra nel viewport */
.tiramisu-visual.tiramisu-animated .tiramisu-layer {
  animation: layerBuild 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: var(--build-delay, 0s);
}

@keyframes layerBuild {
  from {
    opacity: 0;
    transform: scaleY(0);
  }
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

/* ============================================================
   ANIMAZIONI GLOBALI RIUTILIZZABILI (CSS keyframes)
   ============================================================ */

/* Pulse sottile per elementi di enfasi */
@keyframes softPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Spin per loading states */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Bounce verticale (usato per scroll indicator) */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

/* Ripple per form submit button */
@keyframes ripple {
  from {
    opacity: 0.6;
    transform: scale(0);
  }
  to {
    opacity: 0;
    transform: scale(2.5);
  }
}

/* ============================================================
   SUCCESS MESSAGE — animazione messaggio form inviato
   ============================================================ */

.form-success {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-md);
}

.form-success.show {
  display: flex;
  animation: successAppear 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes successAppear {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(16px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Check circle animato */
.success-check {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  animation: checkPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}

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

/* ============================================================
   CLICK EFFECT — 4 linee ortogonali che si espandono dal punto di click
   ============================================================ */

/* Contenitore posizionato al punto di click */
.click-effect {
  position: fixed;
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
}

/* Stile comune delle 4 linee */
.click-effect .l-top,
.click-effect .l-bottom,
.click-effect .l-left,
.click-effect .l-right {
  position: absolute;
  background: var(--accent);
  border-radius: 2px;
  opacity: 0;
}

/* Linee verticali (su e giù) — larghezza fissa, altezza animata */
.click-effect .l-top,
.click-effect .l-bottom {
  width: 2px;
  left: -1px; /* centratura orizzontale */
}

/* Linee orizzontali (sinistra e destra) — altezza fissa, larghezza animata */
.click-effect .l-left,
.click-effect .l-right {
  height: 2px;
  top: -1px; /* centratura verticale */
}

/* Linea verso l'alto: ancorata in basso, cresce verso l'alto */
.click-effect .l-top {
  bottom: 0;
  animation: clickLineUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Linea verso il basso */
.click-effect .l-bottom {
  top: 0;
  animation: clickLineDown 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Linea verso sinistra: ancorata a destra */
.click-effect .l-left {
  right: 0;
  animation: clickLineLeft 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Linea verso destra */
.click-effect .l-right {
  left: 0;
  animation: clickLineRight 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Keyframes per ogni direzione */
@keyframes clickLineUp {
  0%   { height: 0;    opacity: 0.75; }
  60%  { height: 18px; opacity: 0.5; }
  100% { height: 22px; opacity: 0; }
}

@keyframes clickLineDown {
  0%   { height: 0;    opacity: 0.75; }
  60%  { height: 18px; opacity: 0.5; }
  100% { height: 22px; opacity: 0; }
}

@keyframes clickLineLeft {
  0%   { width: 0;    opacity: 0.75; }
  60%  { width: 18px; opacity: 0.5; }
  100% { width: 22px; opacity: 0; }
}

@keyframes clickLineRight {
  0%   { width: 0;    opacity: 0.75; }
  60%  { width: 18px; opacity: 0.5; }
  100% { width: 22px; opacity: 0; }
}

/* ============================================================
   PREFER REDUCED MOTION — rispetta le preferenze di sistema
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .anim-item,
  .anim-slide-left,
  .anim-slide-right,
  .anim-fade,
  .anim-scale {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .tiramisu-layer {
    opacity: 1;
    transform: scaleY(1);
    animation: none;
  }

  .hero-word {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .scroll-indicator {
    animation: none;
  }
}

/* ===== HERO WORD DINAMICA ===== */

.hero-word-wrapper {
  display: block;
  overflow: visible;
  margin-top: -0.85em;
  line-height: 1;
  padding-bottom: 4px;
}

.hero-word {
  display: inline-block;
  color: var(--accent);
  font-style: italic;
  padding-right: 6px;
  padding-bottom: 2px;
  will-change: opacity, transform;
  opacity: 0;                    /* nascosta di default — mai un frame libero */
  transform: translateY(10px);
}

.hero-word--exit {
  animation: heroWordOut 0.32s ease forwards;
}

.hero-word--enter {
  animation: heroWordIn 0.32s ease forwards;
}

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

@keyframes heroWordOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-10px); }
}

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