/* Stili che Tailwind non esprime comodamente: componenti riutilizzabili ed effetti. */

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* --- Grana di sfondo --- */
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* --- Bottoni --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .95rem 1.8rem; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), background-color .3s, color .3s, border-color .3s;
}
.btn:hover { transform: translateY(-3px); }
.btn-lemon { background: #f2c230; color: #08243b; }
.btn-lemon:hover { background: #fff; }
.btn-ghost { border: 1px solid rgb(245 236 220 / .5); color: #f5ecdc; }
.btn-ghost:hover { background: #f5ecdc; color: #08243b; }
.btn-sea { background: #0f3a5c; color: #f5ecdc; }
.btn-sea:hover { background: #c4572e; }

/* --- Link sottolineato animato --- */
.link-u { position: relative; }
.link-u::after {
  content: ""; position: absolute; left: 0; bottom: -4px; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.link-u:hover::after { transform: scaleX(1); transform-origin: left; }

/* --- Camere --- */
.chip { border: 1px solid rgb(245 236 220 / .25); border-radius: 999px; padding: .7rem 1rem; text-align: center; font-size: 11px; }
.room-card { overflow: hidden; border-radius: 1.25rem; aspect-ratio: 4 / 3; }
.room-card img { height: 120%; width: 100%; object-fit: cover; }

/* --- Galleria --- */
.gallery-item { height: clamp(260px, 52vh, 480px); aspect-ratio: 3 / 2; border-radius: 1rem; overflow: hidden; flex: none; }
.gallery-item img { height: 100%; width: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.gallery-item:hover img { transform: scale(1.06); }

/* --- Come arrivare --- */
.how dt { font-family: Fraunces, serif; font-size: 1.6rem; font-style: italic; color: #c4572e; }
.how dd { margin-top: .4rem; color: rgb(8 36 59 / .8); }

/* --- Sole decorativo nella CTA --- */
.sun {
  position: absolute; left: 50%; top: 50%; width: 70vmin; height: 70vmin; translate: -50% -50%;
  border-radius: 50%; background: radial-gradient(circle, rgb(242 194 48 / .35), transparent 65%);
  filter: blur(10px);
}

/* Stati iniziali per le animazioni (evitano il flash prima di GSAP) */
.js [data-reveal], .js [data-hero="in"] { opacity: 0; }
.js .split-word { display: inline-block; overflow: hidden; vertical-align: top; }
.js .split-word > span { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-hero="in"] { opacity: 1; }
  }