/* ============================================================
   DOMUS MARINA — Animazioni
   Regola non negoziabile: si animano solo transform e opacity.
   Mai width/height/top/left → niente reflow, niente CLS.
   ============================================================ */

/* ============ KEYFRAMES ============ */

@keyframes kenburns {
  from { transform: scale(1.18) translate3d(0, 0, 0); }
  to   { transform: scale(1.3) translate3d(-1.5%, -1.5%, 0); }
}

@keyframes cue-drop {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

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

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes shimmer {
  from { transform: translate3d(-100%, 0, 0); }
  to   { transform: translate3d(100%, 0, 0); }
}

/* ============ REVEAL — stato iniziale ============ */
/* Applicati da JS solo se IntersectionObserver esiste, così senza
   JS il contenuto resta visibile (vedi .no-js più sotto). */

[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: transform, opacity;
}
[data-reveal].is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
/* Finita l'animazione, libera la GPU */
[data-reveal].is-settled { will-change: auto; }

/* Varianti direzionali — il movimento esprime gerarchia */
[data-reveal="left"]  { transform: translate3d(-36px, 0, 0); }
[data-reveal="right"] { transform: translate3d(36px, 0, 0); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="fade"]  { transform: none; }

[data-reveal="left"].is-in,
[data-reveal="right"].is-in { transform: translate3d(0, 0, 0); }
[data-reveal="scale"].is-in { transform: scale(1); }

/* Reveal a tendina: l'immagine si scopre dal basso mentre
   recupera la sua scala.

   REGOLA DA NON VIOLARE: l'elemento con [data-reveal] è quello che
   l'IntersectionObserver misura, e NON deve mai nascondersi con
   clip-path. Prima il clip stava qui, sul contenitore: area visibile
   zero → l'observer non lo vedeva mai entrare → non aggiungeva .is-in
   → la tendina non si apriva mai. Uno stallo: l'elemento si nascondeva
   in un modo che impediva di accorgersi che andava mostrato.
   Tre sezioni sono rimaste invisibili per questo.

   opacity e transform non hanno il problema: non toccano il riquadro
   misurato. Il clip-path sì. Quindi il clip va sul CONTENUTO. */
[data-reveal="curtain"] {
  opacity: 1;
  transform: none;
  clip-path: none;   /* mai clippare ciò che viene osservato */
}
[data-reveal="curtain"] > img,
[data-reveal="curtain"] > picture > img {
  clip-path: inset(100% 0 0 0);
  transform: scale(1.28);
  transition: clip-path var(--dur-cinema) var(--ease-out),
              transform var(--dur-cinema) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="curtain"].is-in > img,
[data-reveal="curtain"].is-in > picture > img {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
}

/* ============ SPLIT TEXT ============ */
/* Ogni riga è una maschera; dentro, la riga sale in posizione. */
.split__line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;   /* salva i discendenti dal taglio */
  margin-bottom: -0.08em;
}
.split__inner {
  display: block;
  transform: translate3d(0, 110%, 0);
  transition: transform var(--dur-cinema) var(--ease-out);
  transition-delay: var(--line-delay, 0ms);
  will-change: transform;
}
.split.is-in .split__inner { transform: translate3d(0, 0, 0); }
.split.is-settled .split__inner { will-change: auto; }

/* ============ PARALLASSE ============ */
/* JS scrive --py; il CSS lo applica. Nessuno stile inline. */
[data-parallax] {
  transform: translate3d(0, var(--py, 0px), 0) scale(var(--pscale, 1.12));
  will-change: transform;
}

/* ============ MAGNETIC ============ */
[data-magnetic] {
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
  transition: transform var(--dur-slow) var(--ease-out);
}
[data-magnetic].is-pulling { transition: transform 90ms linear; }

/* ============ SKELETON ============ */
.skel {
  position: relative;
  overflow: hidden;
  background: var(--sand-200);
}
.skel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  animation: shimmer 1.4s var(--ease-in-out) infinite;
}
/* Le immagini partono in fade e arrivano a 1 al load */
.img-fade { opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); }
.img-fade.is-loaded { opacity: 1; }

/* ============ NO-JS ============ */
/* Senza JS niente animazioni, ma tutto il contenuto è leggibile. */
.no-js [data-reveal],
.no-js .split__inner {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
}
.no-js [data-reveal="curtain"] > img,
.no-js [data-reveal="curtain"] > picture > img {
  transform: none !important;
  clip-path: none !important;   /* il clip ora vive qui: va tolto qui */
}
.no-js .img-fade { opacity: 1 !important; }
.no-js .loader { display: none; }

/* ============================================================
   PREFERS-REDUCED-MOTION
   Non è un ripiego: è la stessa pagina, senza movimento.
   Tutto resta visibile e utilizzabile.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal],
  [data-reveal="left"],
  [data-reveal="right"],
  [data-reveal="scale"],
  [data-reveal="curtain"] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    will-change: auto !important;
  }
  [data-reveal="curtain"] > img,
  [data-reveal="curtain"] > picture > img {
    transform: none !important;
    clip-path: none !important;
  }

  .split__inner { transform: none !important; }

  [data-parallax] { transform: none !important; }
  [data-magnetic] { transform: none !important; }

  .hero.is-ready .hero__img { animation: none; transform: scale(1.02); }
  .marquee__track { animation: none; transform: none; }
  .scroll-cue__line::after { animation: none; opacity: 0.5; }
  .skel::after { animation: none; }
  .img-fade { opacity: 1 !important; }

  /* Il rail orizzontale diventa una griglia: senza scroll-jack */
  .rail-pin { height: auto !important; }
  .rail-sticky { position: static !important; height: auto !important; display: block !important; }
  .rail {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    transform: none !important;
    justify-content: center;
  }
  .room { height: auto !important; width: min(30rem, 100%) !important; }

  .loader { display: none; }
  .cursor { display: none; }
}