/* Animation Styles */

/* ─── Faro lighthouse sweep ──────────────────────────────────────
   Pivot: SVG coordinate (298, 218) — centre of the lantern housing
   Rotation simulates the beam sweeping clockwise:
     right beam visible → dark → left beam visible → dark → loop
   Period: 5s
─────────────────────────────────────────────────────────────── */

@keyframes faro-sweep {
  0% {
    transform: translateX(calc(-100vw - 100%));
    max-height: 50%;
  }
  50% {
    max-height: 100%;
  }
  100% {
    transform: translateX(calc(100vw + 100%));
    max-height: 50%;
  }
}

@keyframes question-mark-float {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  30% {
    transform: translateY(-8px) rotate(2deg);
  }
  70% {
    transform: translateY(-5px) rotate(-1.5deg);
  }
}

.question-mark {
  transform-box: fill-box;
  transform-origin: center;
  animation: question-mark-float 2s ease-in-out infinite;
}

/* ─── Faro beam — simulazione rotazione asse Y ───────────────────
   scaleX simula il foreshortening prospettico:
     scaleX(1)  = fascio punta a destra, piena larghezza
     scaleX(0)  = fascio "di taglio" (verso/lontano da noi)
     scaleX(-1) = fascio punta a sinistra (lato opposto)
   transform-origin: bordo sinistro del beam = perno sulla lanterna
─────────────────────────────────────────────────────────────── */
/* ─── Due keyframe separati: timing esplicito, nessun delay
   right: piena 0–20%, de taglio 25–75%, piena 80–100%
   left:  de taglio 0–25%, piena 30–70%, de taglio 75–100%
   → non si incontrano mai, relay preciso
─────────────────────────────────────────────────────────────── */
@keyframes faro-beam-right {
  0% {
    transform: scaleX(1);
    opacity: 0.75;
  } /* piena destra */
  20% {
    transform: scaleX(0.15);
    opacity: 0.15;
  }
  25% {
    transform: scaleX(0.02);
    opacity: 0.04;
  } /* de taglio */
  75% {
    transform: scaleX(0.02);
    opacity: 0.04;
  } /* de taglio */
  80% {
    transform: scaleX(0.15);
    opacity: 0.15;
  }
  100% {
    transform: scaleX(1);
    opacity: 0.75;
  } /* piena destra */
}

@keyframes faro-beam-left {
  0% {
    transform: scaleX(0.02);
    opacity: 0.04;
  } /* de taglio */
  25% {
    transform: scaleX(0.02);
    opacity: 0.04;
  } /* de taglio */
  30% {
    transform: scaleX(0.15);
    opacity: 0.15;
  }
  50% {
    transform: scaleX(1);
    opacity: 0.75;
  } /* piena sinistra */
  70% {
    transform: scaleX(0.15);
    opacity: 0.15;
  }
  75% {
    transform: scaleX(0.02);
    opacity: 0.04;
  } /* de taglio */
  100% {
    transform: scaleX(0.02);
    opacity: 0.04;
  } /* de taglio */
}

@keyframes faro-luce-center {
  0%,
  100% {
    filter: brightness(2.2) drop-shadow(0 0 14px rgba(248, 175, 60, 0.85));
  }
  20% {
    filter: brightness(1.4);
  }
  25% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(2.2) drop-shadow(0 0 14px rgba(248, 175, 60, 0.85));
  }
  70% {
    filter: brightness(1.4);
  }
  75% {
    filter: brightness(1);
  }
}

.luce--right {
  transform-box: view-box;
  transform-origin: 298px 218px;
  animation: faro-beam-right 5s linear infinite;
}

.luce--left {
  transform-box: view-box;
  transform-origin: 298px 218px;
  animation: faro-beam-left 5s linear infinite;
}

@keyframes braccino-mobile-wave {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(8px);
  }
}

@keyframes braccino-desktop-wave {
  0%,
  100% {
    transform: rotate(0deg);
  }
  40% {
    transform: rotate(-3deg);
  }
  70% {
    transform: rotate(3deg);
  }
}

.braccino--desktop {
  transform-box: fill-box;
  transform-origin: 0% 30%;
  animation: braccino-desktop-wave 4s ease-in-out infinite;
}

.braccino--mobile,
.manina--mobile {
  transform-box: fill-box;
  animation: braccino-mobile-wave 2.4s ease-in-out infinite;
}

.occhio {
  transform-box: fill-box;
  transform-origin: center center;
  animation: blinkEyesNatural 5.5s infinite ease-in-out;
}

@keyframes blinkEyesNatural {
  0%,
  42%,
  100% {
    transform: scaleY(1);
  }

  44% {
    transform: scaleY(0.08);
  }

  46% {
    transform: scaleY(1);
  }

  48% {
    transform: scaleY(0.08);
  }

  50% {
    transform: scaleY(1);
  }
}