/* ==================================================
   IVANIAGENCY — SITO UFFICIALE
   animations.css
   ================================================== */

/* --------------------------------------------------
   1. SCROLL REVEAL
   -------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--t-slow) var(--ease-soft), transform var(--t-slow) var(--ease-soft); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* --------------------------------------------------
   2. HERO — ingresso
   -------------------------------------------------- */
.hero-copy .eyebrow, .hero-copy h1, .hero-copy .hero-sub, .hero-copy .hero-actions {
  opacity: 0; transform: translateY(22px);
  animation: heroIn 800ms var(--ease-soft) forwards;
}
.hero-copy .eyebrow { animation-delay: 80ms; }
.hero-copy h1 { animation-delay: 180ms; }
.hero-copy .hero-sub { animation-delay: 320ms; }
.hero-copy .hero-actions { animation-delay: 440ms; }
.hero-media { opacity: 0; transform: scale(0.97); animation: heroMediaIn 900ms var(--ease-soft) 300ms forwards; }
@keyframes heroIn { to { opacity: 1; transform: translateY(0); } }
@keyframes heroMediaIn { to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .hero-copy .eyebrow, .hero-copy h1, .hero-copy .hero-sub, .hero-copy .hero-actions, .hero-media { animation: none; opacity: 1; transform: none; }
}

/* --------------------------------------------------
   3. IMAGE MASK REVEAL — usato su Chi sono / Concept
   -------------------------------------------------- */
.mask-reveal { position: relative; overflow: hidden; }
.mask-reveal::before {
  content: ''; position: absolute; inset: 0; background: var(--color-navy); z-index: 2;
  transform: scaleX(1); transform-origin: right; transition: transform 850ms var(--ease-soft);
}
.mask-reveal.is-revealed::before { transform: scaleX(0); }
.mask-reveal img, .mask-reveal .img-placeholder, .mask-reveal .founder-mark { transform: scale(1.06); transition: transform 1000ms var(--ease-soft); }
.mask-reveal.is-revealed img, .mask-reveal.is-revealed .img-placeholder { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .mask-reveal::before { display: none; }
  .mask-reveal img, .mask-reveal .img-placeholder, .mask-reveal .founder-mark { transform: none; transition: none; }
}

/* --------------------------------------------------
   4. HOVER ZOOM leggero (immagini secondarie)
   -------------------------------------------------- */
.hover-zoom { overflow: hidden; }
.hover-zoom img, .hover-zoom .img-placeholder { transition: transform var(--t-slow) var(--ease-soft); }
.hover-zoom:hover img, .hover-zoom:hover .img-placeholder { transform: scale(1.035); }

/* --------------------------------------------------
   5. CURSORE PERSONALIZZATO — discreto, contestuale
   -------------------------------------------------- */
.custom-cursor {
  position: fixed; top: 0; left: 0; width: 9px; height: 9px; border-radius: 50%;
  background: var(--color-orange); pointer-events: none; z-index: 400;
  transform: translate(-50%, -50%);
  transition: width 200ms var(--ease-soft), height 200ms var(--ease-soft), background 200ms var(--ease-soft), opacity 180ms var(--ease);
  opacity: 0;
}
.custom-cursor.is-active { opacity: 0.9; }
.custom-cursor.is-ring { width: 32px; height: 32px; background: transparent; border: 1.5px solid var(--color-orange); }
@media (hover: none), (pointer: coarse) { .custom-cursor { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .custom-cursor { display: none !important; } }

/* --------------------------------------------------
   6. GLOW leggero sui CTA orange (già gestito via box-shadow
   in components.css); qui il glow decorativo di sfondo hero
   -------------------------------------------------- */
.glow-dot {
  position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--color-gold);
  box-shadow: 0 0 12px 2px rgba(255, 193, 7, 0.6);
  animation: floatDot 5s ease-in-out infinite;
}
@keyframes floatDot { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .glow-dot { animation: none; } }

/* --------------------------------------------------
   7. TRANSIZIONE PAGINA — dissolvenza leggera all'ingresso
   -------------------------------------------------- */
.page-transition-veil {
  position: fixed; inset: 0; z-index: 500; background: var(--color-navy);
  pointer-events: none; opacity: 1; animation: pageIn 480ms var(--ease-soft) forwards;
}
@keyframes pageIn { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .page-transition-veil { display: none; } }

/* --------------------------------------------------
   8. BILANCIA HERO — si assesta in equilibrio una sola volta.
   La trave oscilla attorno al perno (300,214); ogni piatto ruota
   in senso opposto attorno al proprio punto di aggancio, così
   resta sempre dritto come in una bilancia vera.
   -------------------------------------------------- */
.hero-scale .scale-beam { transform-origin: 300px 214px; animation: beamSettle 3.8s ease-in-out 0.8s both; }
.hero-scale .scale-pan-left { transform-origin: 110px 214px; animation: panSettle 3.8s ease-in-out 0.8s both; }
.hero-scale .scale-pan-right { transform-origin: 490px 214px; animation: panSettle 3.8s ease-in-out 0.8s both; }

@keyframes beamSettle {
  0%   { transform: rotate(5deg); }
  28%  { transform: rotate(-2.4deg); }
  52%  { transform: rotate(1.2deg); }
  74%  { transform: rotate(-0.5deg); }
  100% { transform: rotate(0deg); }
}
@keyframes panSettle {
  0%   { transform: rotate(-5deg); }
  28%  { transform: rotate(2.4deg); }
  52%  { transform: rotate(-1.2deg); }
  74%  { transform: rotate(0.5deg); }
  100% { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scale .scale-beam, .hero-scale .scale-pan-left, .hero-scale .scale-pan-right { animation: none; }
}