/* =========================================================
   Corte dei Limoni — Motion & esperienza
   Animazioni, slideshow, lightbox, effetti di scorrimento.
   Tutto degrada in modo pulito se JS è disattivato.
   ========================================================= */

/* ---------- 1. Scroll reveal ----------
   Gli elementi con .reveal entrano in scena mentre si scorre.
   Senza JS restano visibili (vedi .no-js più sotto). */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1);
  will-change:opacity, transform;
}
.reveal.in{opacity:1;transform:none;}
/* ritardi a cascata per gruppi di card */
.reveal.d1{transition-delay:.08s;}
.reveal.d2{transition-delay:.16s;}
.reveal.d3{transition-delay:.24s;}
.reveal.d4{transition-delay:.32s;}
.reveal.d5{transition-delay:.40s;}
.reveal.d6{transition-delay:.48s;}

/* ---------- 2. Hero cinematografico ----------
   Più foto in dissolvenza + lento zoom (effetto Ken Burns):
   dà la sensazione del video senza il peso di un video. */
.hero-cinema{
  position:relative;
  overflow:hidden;
  background:var(--ink);
  /* fallback proporzioni 4:5 per browser senza aspect-ratio */
  height:0;
  padding-top:125%;
}
@supports (aspect-ratio: 4 / 5){
  .hero-cinema{height:auto;padding-top:0;aspect-ratio:4/5;}
}
.hero-cinema .slide{
  position:absolute;top:0;right:0;bottom:0;left:0;
  opacity:0;
  transition:opacity 1.6s ease-in-out;
}
.hero-cinema .slide.on{opacity:1;}
.hero-cinema .slide img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.02);
  animation:kenburns 14s ease-out forwards;
}
.hero-cinema .slide.on img{animation:kenburns 14s ease-out forwards;}
@keyframes kenburns{
  from{transform:scale(1.02) translate3d(0,0,0);}
  to{transform:scale(1.14) translate3d(-1.2%, -1.6%, 0);}
}
/* velo caldo per far respirare il testo se sovrapposto */
.hero-cinema::after{
  content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(43,42,22,0) 55%, rgba(43,42,22,.28) 100%);
}
/* pallini indicatori */
.hero-dots{
  position:absolute;left:0;right:0;bottom:16px;z-index:3;
  display:flex;gap:8px;justify-content:center;
}
.hero-dots button{
  width:7px;height:7px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,253,242,.9);
  background:transparent;transition:background .3s, transform .3s;
}
.hero-dots button[aria-current="true"]{background:var(--lemon);transform:scale(1.35);border-color:var(--lemon);}

/* ---------- 3. Foto che respirano ----------
   Micro-zoom all'hover: la pagina sembra viva senza essere invadente. */
.photo-block img,
.room-photo img,
.hero-photo img{
  transition:transform 1.1s cubic-bezier(.2,.7,.3,1);
}
.photo-block:hover img,
.room-photo:hover img,
.hero-photo:hover img{transform:scale(1.05);}

/* le card si sollevano appena */
.card{transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 30px -18px rgba(43,42,22,.55);
  border-color:var(--lemon);
}

/* bottoni con un accenno di spinta */
.btn{transition:background .2s, color .2s, border-color .2s, transform .18s ease;}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}

/* ---------- 4. Header che si compatta ----------- */
header.site{transition:padding .3s ease, box-shadow .3s ease, background .3s ease;}
header.site.shrunk{box-shadow:0 6px 24px -20px rgba(43,42,22,.9);}
header.site.shrunk .nav{padding-top:9px;padding-bottom:9px;}
header.site .nav{transition:padding .3s ease;}

/* ---------- 5. Numeri che salgono ----------- */
.badgebar strong{font-variant-numeric:tabular-nums;}

/* ---------- 6. Lightbox galleria ----------- */
.gallery-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
}
.gallery-grid .shot{
  overflow:hidden;cursor:zoom-in;position:relative;background:var(--stone-deep);
  height:0;padding-top:100%;                     /* fallback quadrato */
}
.gallery-grid .shot img{
  position:absolute;top:0;right:0;bottom:0;left:0;
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1s cubic-bezier(.2,.7,.3,1);
}
.gallery-grid .shot:hover img{transform:scale(1.08);}
.gallery-grid .shot.tall{grid-row:span 2;padding-top:200%;}
.gallery-grid .shot.wide{grid-column:span 2;padding-top:50%;}
@supports (aspect-ratio: 1 / 1){
  .gallery-grid .shot{height:auto;padding-top:0;aspect-ratio:1/1;}
  .gallery-grid .shot.tall{padding-top:0;aspect-ratio:1/2;}
  .gallery-grid .shot.wide{padding-top:0;aspect-ratio:2/1;}
}

#lightbox{
  position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;
  background:rgba(31,30,16,.94);
  display:none;align-items:center;justify-content:center;
  padding:32px;
}
#lightbox.on{display:flex;animation:lbfade .3s ease;}
@keyframes lbfade{from{opacity:0}to{opacity:1}}
#lightbox img{max-width:92vw;max-height:84vh;object-fit:contain;box-shadow:0 30px 80px -30px #000;}
#lightbox .lb-close,
#lightbox .lb-prev,
#lightbox .lb-next{
  position:absolute;background:none;border:1px solid rgba(255,253,242,.5);color:var(--white);
  cursor:pointer;font-size:1.2rem;line-height:1;padding:10px 14px;border-radius:2px;
  transition:background .2s, border-color .2s;
}
#lightbox .lb-close:hover,
#lightbox .lb-prev:hover,
#lightbox .lb-next:hover{background:var(--lemon);color:var(--ink);border-color:var(--lemon);}
#lightbox .lb-close{top:22px;right:22px;}
#lightbox .lb-prev{left:22px;top:50%;transform:translateY(-50%);}
#lightbox .lb-next{right:22px;top:50%;transform:translateY(-50%);}
#lightbox .lb-caption{
  position:absolute;bottom:24px;left:0;right:0;text-align:center;
  color:rgba(255,253,242,.85);font-size:.82rem;letter-spacing:.03em;
}

/* ---------- 7. Blocco video (pronto per un file reale) ---------- */
.video-frame{
  position:relative;width:100%;overflow:hidden;background:var(--ink);
  border:1px solid var(--line);
  height:0;padding-top:56.25%;          /* fallback 16:9 */
}
@supports (aspect-ratio: 16 / 9){
  .video-frame{height:auto;padding-top:0;aspect-ratio:16/9;}
}
.video-frame video,
.video-frame > img{
  position:absolute;top:0;right:0;bottom:0;left:0;
  width:100%;height:100%;object-fit:cover;display:block;
}
.video-frame .video-placeholder{
  position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;text-align:center;padding:28px;
  color:var(--stone);
}
.video-frame .video-placeholder .ring{
  width:64px;height:64px;border-radius:50%;border:2px solid var(--lemon);
  display:flex;align-items:center;justify-content:center;
  animation:pulse 2.6s ease-in-out infinite;
}
.video-frame .video-placeholder .ring::after{
  content:"";border-left:14px solid var(--lemon);
  border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(196,210,44,.45);}
  50%{box-shadow:0 0 0 16px rgba(196,210,44,0);}
}

/* ---------- 8. Separatore ad archi animato ---------- */
.arches svg path{transition:stroke .4s ease;}
.arches:hover svg path{stroke:var(--lemon-deep);}

/* ---------- 9. Rispetto delle preferenze utente ----------
   Chi ha attivato "riduci animazioni" nel sistema operativo
   (spesso per motivi di salute) vede il sito fermo. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none;}
  .hero-cinema .slide img{animation:none;transform:none;}
}

/* ---------- 10. Fallback senza JavaScript ----------
   Se il JS non parte, .no-js resta sull'<html> e tutto è visibile. */
.no-js .reveal{opacity:1;transform:none;}
.no-js .hero-cinema .slide:first-child{opacity:1;}
.no-js .hero-dots{display:none;}

/* Doppia rete di sicurezza, senza JavaScript:
   dopo 3 secondi i contenuti compaiono comunque, qualunque cosa
   sia successa allo script. Un sito bianco non è mai accettabile. */
@keyframes failsafe-in{to{opacity:1;transform:none;}}
.reveal{animation:failsafe-in .6s ease 3s forwards;}
.reveal.in{animation:none;}

/* La prima immagine dell'hero è sempre visibile a prescindere */
.hero-cinema .slide:first-child{opacity:1;}
.hero-cinema .slide.on{opacity:1;}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .gallery-grid .shot.wide{grid-column:span 2;}
  .gallery-grid .shot.tall{grid-row:span 1;padding-top:100%;}
  @supports (aspect-ratio: 1 / 1){ .gallery-grid .shot.tall{padding-top:0;aspect-ratio:1/1;} }
  #lightbox .lb-prev{left:10px;}
  #lightbox .lb-next{right:10px;}
}

/* ---------- 11. Accessibilità ----------
   Chi naviga con la tastiera deve sempre vedere dov'è.
   :focus-visible mostra il contorno solo a chi usa Tab,
   non a chi clicca col mouse. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--lemon-deep);
  outline-offset:2px;
  border-radius:2px;
}

/* Link "salta al contenuto": invisibile finché non lo si raggiunge con Tab */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--ink);color:var(--white);
  padding:12px 20px;text-decoration:none;font-weight:600;font-size:.9rem;
}
.skip-link:focus{left:8px;top:8px;}

/* Migliora la leggibilità dei campi del modulo */
input,textarea{color:var(--ink);font-size:1rem;}
input::placeholder,textarea::placeholder{color:#8A855F;opacity:1;}