/* ============================================================
   N&V Immobiliare — motion editoriale
   Solo CSS + IntersectionObserver. Proprietà animate: transform,
   opacity, clip-path. Tutto spento con prefers-reduced-motion.
   ============================================================ */

/* ---------- grana fotografica su tutta la pagina ---------- */
.grana {
  position: fixed;
  inset: -50%;
  z-index: 30;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grana 0.6s steps(3) infinite;
}
@keyframes grana {
  0% { transform: translate(0, 0); }
  34% { transform: translate(-3%, 2%); }
  67% { transform: translate(2%, -3%); }
  100% { transform: translate(0, 0); }
}

/* ---------- filo di ottone che misura lo scroll ---------- */
.progresso {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 25;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--ottone), var(--ottone-chiaro));
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  pointer-events: none;
}

/* ---------- hero: ingresso a cascata, Ken Burns, parallasse ---------- */
.hero-img {
  scale: 1.12;
  translate: 0 var(--parallasse, 0px);
  animation: kenburns 9s var(--ease-out) forwards;
  will-change: scale, translate;
}
@keyframes kenburns {
  to { scale: 1; }
}

.hero .eyebrow,
.hero h1,
.hero-sub,
.hero-actions,
.hero-foot {
  opacity: 0;
  translate: 0 34px;
  animation: entra 1.4s var(--ease-out) forwards;
}
.hero .eyebrow { animation-delay: 0.35s; }
.hero h1 { animation-delay: 0.55s; }
.hero-sub { animation-delay: 0.85s; }
.hero-actions { animation-delay: 1.05s; }
.hero-foot { animation-delay: 1.5s; }
@keyframes entra {
  to { opacity: 1; translate: 0 0; }
}

/* il corsivo in ottone del titolo prende luce come metallo */
.hero h1 em {
  background: linear-gradient(100deg, var(--ottone-chiaro) 0%, #F3E4C0 30%, var(--ottone-chiaro) 45%, var(--ottone) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: luccichio 6s ease-in-out 2s infinite;
}
@keyframes luccichio {
  0%, 60%, 100% { background-position: 100% 0; }
  30% { background-position: 0 0; }
}

/* freccia di scroll: un filo che scende e si spegne */
.hero-cue {
  position: absolute;
  right: var(--gutter);
  bottom: 7.5rem;
  width: 1px;
  height: 4.5rem;
  overflow: hidden;
  opacity: 0;
  animation: entra 1.4s var(--ease-out) 1.8s forwards;
}
.hero-cue::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent, var(--ottone-chiaro), transparent);
  animation: cue 2.4s var(--ease-out) infinite;
}
@keyframes cue {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}

/* nastro dei servizi che scorre lento sotto l'hero */
.hero-foot {
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.nastro {
  display: flex;
  flex: none;
  gap: 0;
  animation: nastro 38s linear infinite;
}
.hero-foot:hover .nastro { animation-play-state: paused; }
.nastro span {
  display: inline-flex;
  align-items: center;
  gap: 2.4rem;
  padding-right: 2.4rem;
  white-space: nowrap;
}
.nastro span::after {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ottone);
}
@keyframes nastro {
  to { transform: translateX(-50%); }
}

/* ---------- titoli: le righe salgono da sotto una a una ---------- */
.riga { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.riga-in {
  display: block;
  transform: translateY(110%);
  transition: transform 1.1s var(--ease-out);
  transition-delay: calc(var(--i) * 140ms);
}
.is-visible .riga-in { transform: none; }

/* ---------- manifesto: la frase si compone parola per parola ---------- */
.parola {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.35em);
  filter: blur(4px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out), filter 0.7s var(--ease-out);
  transition-delay: calc(var(--i) * 45ms);
}
.is-visible .parola { opacity: 1; transform: none; filter: none; }

/* ---------- servizi: la cornice in ottone si disegna, la foto si svela ---------- */
.foto-frame::before {
  transition: transform 1.3s var(--ease-out) 0.35s, opacity 0.4s;
  transform: scale(0.94);
  opacity: 0;
}
.is-visible .foto-frame::before { transform: none; opacity: 1; }
.foto-frame img {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.3s var(--ease-out), filter 900ms, transform 1.6s var(--ease-out);
}
.servizio-row:nth-child(odd) .foto-frame img { clip-path: inset(0 0 0 100%); }
/* .servizio-row.is-visible: deve battere la regola :nth-child(odd) qui sopra */
.servizio-row.is-visible .foto-frame img { clip-path: inset(0 0 0 0); }
.servizio-row:hover .foto-frame img { transform: scale(1.04); }
/* al passaggio del mouse la cornice scivola sotto la foto */
.foto-frame::before { transition-property: transform, opacity, inset; }
.servizio-row:hover .foto-frame::before { inset: 0.6rem -0.6rem -0.6rem 0.6rem; }
.servizio-row:nth-child(odd):hover .foto-frame::before { inset: 0.6rem 0.6rem -0.6rem -0.6rem; }

.servizio-testo > * ,
.servizio-punti li {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.servizio-testo > *:nth-child(1) { transition-delay: 0.25s; }
.servizio-testo > *:nth-child(2) { transition-delay: 0.35s; }
.servizio-testo > *:nth-child(3) { transition-delay: 0.45s; }
.servizio-punti { transition-delay: 0.5s; }
.servizio-punti li:nth-child(1) { transition-delay: 0.6s; }
.servizio-punti li:nth-child(2) { transition-delay: 0.7s; }
.servizio-punti li:nth-child(3) { transition-delay: 0.8s; }
.is-visible .servizio-testo > *, .is-visible .servizio-punti li { opacity: 1; transform: none; }
.servizio-punti li { position: relative; padding-left: 0; transition-property: opacity, transform, padding-left, color; }
.servizio-punti li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 1px;
  background: var(--ottone-chiaro);
  transition: width 0.45s var(--ease-out);
}
.servizio-punti li:hover { padding-left: 1.6rem; color: var(--ottone-chiaro); }
.servizio-punti li:hover::before { width: 1rem; }

/* ---------- galleria: cascata, svelamento, tilt 3D con riflesso ---------- */
.griglia-realizzazioni .scatto { transition-delay: calc(var(--i, 0) * 110ms); }
.scatto-foto img {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.2s var(--ease-out) calc(var(--i, 0) * 110ms + 0.15s), transform 1.2s var(--ease-out), filter 1.2s;
}
.is-visible .scatto-foto img { clip-path: inset(0 0 0 0); }
.scatto figcaption {
  opacity: 0;
  transition: opacity 0.9s var(--ease-out) calc(var(--i, 0) * 110ms + 0.55s);
}
.is-visible.scatto figcaption { opacity: 1; }

.tilt {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.5s var(--ease-out);
  will-change: transform;
}
.tilt .scatto-foto::before,
.targa.tilt::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.28), transparent 45%);
  opacity: 0;
  transition: opacity 0.5s;
}
.tilt.attivo .scatto-foto::before,
.targa.tilt.attivo::before { opacity: 1; }
.scatto.tilt { transform-origin: center; }
.scatto.tilt.attivo .scatto-foto { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.45); }
.scatto-foto { transition: box-shadow 0.5s; }

/* ---------- chi siamo / contatti: righe a cascata ---------- */
.valori li,
.recapiti p {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.valori li:nth-child(1), .recapiti p:nth-child(1) { transition-delay: 0.3s; }
.valori li:nth-child(2), .recapiti p:nth-child(2) { transition-delay: 0.42s; }
.valori li:nth-child(3), .recapiti p:nth-child(3) { transition-delay: 0.54s; }
.recapiti p:nth-child(4) { transition-delay: 0.66s; }
.is-visible .valori li, .is-visible .recapiti p { opacity: 1; transform: none; }

/* ---------- targa in ottone: alone che gira, tilt col mouse ---------- */
.targa { position: relative; overflow: hidden; }
.targa::after {
  content: "";
  position: absolute;
  inset: -60%;
  z-index: 1;
  pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 70%, rgba(255, 255, 255, 0.35) 78%, transparent 86%);
  animation: alone 7s linear infinite;
  mix-blend-mode: soft-light;
}
.targa > * { position: relative; z-index: 3; }
@keyframes alone {
  to { transform: rotate(360deg); }
}
.contatti-targa .targa {
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s;
}
.contatti-targa:hover .targa { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 8px rgba(45, 30, 10, 0.4), 0 60px 110px -34px rgba(176, 141, 87, 0.5); }

/* la sezione contatti respira: due luci calde che si spostano */
.contatti { position: relative; overflow: hidden; }
.contatti::before,
.contatti::after {
  content: "";
  position: absolute;
  width: 46rem;
  height: 46rem;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  opacity: 0.35;
}
.contatti::before {
  left: -14rem;
  bottom: -18rem;
  background: radial-gradient(circle, rgba(176, 141, 87, 0.55), transparent 60%);
  animation: luce-a 18s ease-in-out infinite alternate;
}
.contatti::after {
  right: -16rem;
  top: -16rem;
  background: radial-gradient(circle, rgba(46, 86, 110, 0.6), transparent 60%);
  animation: luce-b 22s ease-in-out infinite alternate;
}
.contatti-inner { position: relative; z-index: 1; }
@keyframes luce-a { to { transform: translate(12rem, -8rem); } }
@keyframes luce-b { to { transform: translate(-10rem, 10rem); } }

/* ---------- bottoni: riempimento che scorre ---------- */
.btn { position: relative; overflow: hidden; z-index: 0; }
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translateX(-101%);
  transition: transform 0.55s var(--ease-out);
}
.btn-solid::before { background: var(--ottone-chiaro); }
.btn-ghost::before { background: var(--ottone); }
.btn:hover::before { transform: none; }
.btn-solid:hover { background: var(--ottone); }
.btn-ghost:hover { color: var(--notte-2); border-color: var(--ottone); }
.nav-cta { overflow: hidden; }

/* ---------- reduced motion: tutto fermo e visibile ---------- */
@media (prefers-reduced-motion: reduce) {
  .grana, .hero-cue { display: none; }
  .hero-img { scale: 1; translate: 0 0; animation: none; }
  .hero .eyebrow, .hero h1, .hero-sub, .hero-actions, .hero-foot { opacity: 1; translate: 0 0; animation: none; }
  .hero h1 em { animation: none; }
  .nastro { animation: none; }
  .riga-in, .parola, .foto-frame::before, .foto-frame img, .scatto-foto img, .scatto figcaption,
  .servizio-testo > *, .servizio-punti li, .valori li, .recapiti p {
    opacity: 1; transform: none; filter: none; clip-path: none; transition: none;
  }
  .tilt { transform: none; }
  .targa::after, .contatti::before, .contatti::after { animation: none; }
  .btn::before { display: none; }
}

@media (max-width: 860px) {
  .hero-cue { display: none; }
  .hero-foot { margin-top: 2.5rem; }
}
@media (hover: none) {
  .tilt { transform: none; }
}