/* ==============================
   ANIMATIONS.CSS
   Tutte le animazioni del sito
   ============================== */

/* ------------------------------
   HERO — stati iniziali
   ------------------------------ */

/* kicker + titolo: partono nascosti, entrano da sotto */
.hero-kicker,
.hero-title {
  opacity: 0;
  transform: translateY(10px);
}

/* testo e CTA sotto la hero: partono nascosti */
.hero p,
.hero a[href="#works-id"] {
  opacity: 0;
  transform: translateY(10px);
}

/* orbite (swirl + stelline + faccina)
   — di base trasparenti e pronte al parallax */
.hero-orbit {
  opacity: 0;
  --mx: 0px;
  --my: 0px;
  transform: translate3d(var(--mx), var(--my), 0);
  transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ------------------------------
   HERO — animazioni di ingresso
   (triggerate quando il body ha .loaded)
   ------------------------------ */

body.loaded .hero-kicker {
  animation: hero-fadeUp 0.5s ease-out 0.1s forwards;
}

body.loaded .hero-title {
  animation: hero-fadeUp 0.6s ease-out 0.35s forwards;
}

body.loaded .hero-orbit--swirl {
  animation: hero-orbitFadeIn 0.6s ease-out 0.7s forwards;
}

body.loaded .hero-orbit--star-left,
body.loaded .hero-orbit--star-right,
body.loaded .hero-orbit--smile {
  animation: hero-orbitFadeIn 0.6s ease-out 0.9s forwards;
}

/* dopo decorazioni: entra il paragrafo */
body.loaded .hero p {
  animation: hero-fadeUp 0.6s ease-out 1.15s forwards;
}

/* infine la CTA "Guarda i nostri progetti" */
body.loaded .hero a[href="#works-id"] {
  animation: hero-fadeUp 0.6s ease-out 1.35s forwards;
}

/* ------------------------------
   HERO — fluttuazione loop
   (sempre attivi, molto leggeri)
   ------------------------------ */

.hero-swirl {
  animation: hero-swirlFloat 14s ease-in-out infinite;
  transform-origin: center center;
}

.hero-star {
  animation: hero-starFloat 9s ease-in-out infinite;
}

.hero-smile {
  animation: hero-smileFloat 11s ease-in-out infinite;
}

/* ------------------------------
   KEYFRAMES
   ------------------------------ */

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

@keyframes hero-orbitFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* fluttuazione swirl (leggerissima) */
@keyframes hero-swirlFloat {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-6px) rotate(3deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}

/* fluttuazione stelline */
@keyframes hero-starFloat {
  0% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-4px) scale(1.03);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

/* fluttuazione faccina */
@keyframes hero-smileFloat {
  0% {
    transform: translateY(0) rotate(-3deg);
  }
  50% {
    transform: translateY(-5px) rotate(0deg);
  }
  100% {
    transform: translateY(0) rotate(-3deg);
  }
}

/* ------------------------------
   SERVICE — reveal on scroll
   ------------------------------ */

.service {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.7s ease-out, transform 1.7s ease-out;
}

/* Quando entra nel viewport */
.service.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ------------------------------
   ABOUT — reveal on scroll
   ------------------------------ */

/* Stato iniziale: testi + immagini nascosti */
.about h2,
.about p,
.about .flex-center {
  opacity: 0;
  transform: translateY(20px);
}

/* Stato iniziale: stelle nascoste */
/* Stato iniziale: stelle nascoste + pronte al parallax */
.star-about-1,
.star-about-2 {
  opacity: 0;
  --sx: 0px;
  --sy: 0px;
  transform: translate3d(var(--sx), var(--sy), 0);
  transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Quando la sezione entra nel viewport */
.about.is-visible h2,
.about.is-visible p,
.about.is-visible .flex-center {
  animation: about-fadeUp 0.9s ease-out forwards;
}

/* Stelle dopo 2s */
.about.is-visible .star-about-1,
.about.is-visible .star-about-2 {
  animation: about-starsIn 0.6s ease-out forwards;
  animation-delay: 2s;
}

.about.is-visible .star-about-1 {
  animation-delay: 2s;
}

.about.is-visible .star-about-2 {
  animation-delay: 2.2s;
}

/* Keyframes about */
@keyframes about-fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes about-starsIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ------------------------------
   VALUES — "I nostri valori"
   Reveal on scroll
   ------------------------------ */

/* Stato iniziale: card/immagini nascoste */
.values .grid-item {
  opacity: 0;
  transform: translateY(20px) scale(0.96);
}

/* Quando la sezione entra nel viewport */
.values.is-visible .grid-item {
  animation: values-cardIn 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

/* Stagger: entrano una dopo l'altra */
.values.is-visible .grid-item:nth-child(1) {
  animation-delay: 0.1s;
}

.values.is-visible .grid-item:nth-child(2) {
  animation-delay: 0.25s;
}

.values.is-visible .grid-item:nth-child(3) {
  animation-delay: 0.4s;
}

.values.is-visible .grid-item:nth-child(4) {
  animation-delay: 0.55s;
}

/* Keyframe */
@keyframes values-cardIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}