/* =========================================================
   Barco Hotel · Efectos de movimiento de la portada
   (ver demo/efectos.html). Todo se desactiva con
   prefers-reduced-motion al final del archivo.
   ========================================================= */

/* ---------- 6. Portada cinematográfica + cabecera transparente ---------- */
.home .hdr { position: fixed; left: 0; right: 0; background: transparent; transition: background-color .35s, box-shadow .35s; }
.home .hdr::before { content: ""; position: absolute; inset: 0 0 -40px; background: linear-gradient(180deg, rgba(6, 18, 38, .55), rgba(6, 18, 38, 0)); pointer-events: none; transition: opacity .35s; z-index: -1; }
.home .hdr .rings { opacity: 0; transition: opacity .35s; }
.home .hdr.scrolled { background: var(--navy-deep); }
.home .hdr.scrolled::before { opacity: 0; }
.home .hdr.scrolled .rings { opacity: 1; }

.home .hero { min-height: max(640px, 100svh); }
.home .hero h1 { max-width: 1120px; font-size: clamp(44px, 6.6vw, 88px); }
.hero { contain: paint; }
.hero-media { will-change: transform; }
.hero-media img { object-position: 50% 58%; }
/* Zoom inicial suave de la foto de portada */
.hero-zoom { position: absolute; inset: 0; animation: heroZoom 14s var(--ease) both; }
.hero-media .hero-zoom img { animation: none; }
.hero-content { will-change: transform, opacity; }

/* ---------- 5. Titulares por líneas ---------- */
.lines > span { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.lines > span > i { display: block; font-style: normal; transform: translateY(105%); animation: lineUp 1.1s cubic-bezier(.2, .8, .2, 1) forwards; }
.lines > span:nth-child(2) > i { animation-delay: .16s; }
.hero .eyebrow, .hero .lead, .hero-ctas { opacity: 0; animation: fadeRise .9s var(--ease) forwards; }
.hero .eyebrow { animation-delay: .05s; }
.hero .lead { animation-delay: .45s; }
.hero-ctas { animation-delay: .6s; }
@keyframes lineUp { to { transform: none; } }
@keyframes fadeRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Títulos de sección: la línea emerge de una máscara */
.js .mask-title .mask { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.js .mask-title .mask > span { display: block; transform: translateY(105%); transition: transform 1.05s cubic-bezier(.2, .8, .2, 1) .1s; }
.js .in .mask-title .mask > span, .js .mask-title.in .mask > span { transform: none; }

/* ---------- 8. Texto que se ilumina ---------- */
.glow-text .w { color: rgba(11, 35, 71, .18); transition: color .35s; }
.glow-text .w.on { color: var(--ink-2); }
.glow-text .w.gold.on { color: var(--gold-text); font-weight: 600; }

/* ---------- 3. Cascada de tarjetas ---------- */
.js .rooms > .room:not(.room-skeleton) { opacity: 0; }
.js .rooms.in > .room:not(.room-skeleton) { animation: cardIn .8s var(--ease) forwards; animation-delay: calc(var(--i, 0) * .13s); }
@keyframes cardIn { from { opacity: 0; transform: translateY(40px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- 11. Hover elegante ---------- */
.room { position: relative; }
.room::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.room:hover::after, .room:focus-within::after { transform: scaleX(1); }
.room-skeleton::after { display: none; }
.tile h3::after { content: ""; display: block; width: 32px; height: 2px; margin-top: 14px; background: var(--gold); transition: width .7s var(--ease); }
.tile:hover h3::after { width: 100%; }
.tile .tile-more { max-height: 0; opacity: 0; overflow: hidden; margin: 0; color: var(--on-dark-2); transition: max-height .55s var(--ease), opacity .4s, margin .55s var(--ease); }
.tile:hover .tile-more, .tile:focus-within .tile-more { max-height: 90px; opacity: 1; margin-top: 10px; }
@media (hover: none) { .tile .tile-more { max-height: none; opacity: 1; margin-top: 10px; } }

/* ---------- 4. Cortina de revelado ---------- */
.curtain { position: relative; overflow: hidden; }
.js .curtain::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--navy-deep); transform-origin: right; transition: transform 1.15s cubic-bezier(.77, 0, .18, 1) .15s; }
.js .curtain img { transform: scale(1.18); transition: transform 1.8s var(--ease) .15s; }
.js .in .curtain::after, .js .curtain.in::after { transform: scaleX(0); }
.js .in .curtain img, .js .curtain.in img { transform: scale(1); }
.tile.curtain .tile-body { z-index: 2; }
.tile.curtain:hover img { transform: scale(1.04); }

/* ---------- 7. Imagen que se expande ---------- */
.expand { position: relative; height: 150vh; background: var(--bg); }
.expand-stick { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; overflow: hidden; }
.expand-media { position: absolute; inset: 0; overflow: hidden; will-change: clip-path; clip-path: inset(18% 22% 18% 22% round 28px); }
.expand-media img { width: 100%; height: 100%; object-fit: cover; }
.expand-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 35, 71, .1) 30%, rgba(11, 35, 71, .88)); }
.expand-copy { position: absolute; left: 0; right: 0; bottom: 12%; z-index: 2; text-align: center; color: var(--on-dark); opacity: 0; will-change: opacity, transform; }
.expand-copy .h2 em { color: var(--gold); }
.expand-copy .btn { margin-top: 26px; }

/* ---------- 9. Cifras animadas ---------- */
[data-count] { font-variant-numeric: tabular-nums; }

/* ---------- 10. Esqueletos en la carta ---------- */
.menu-skel { pointer-events: none; }
.menu-skel .sk-img { display: block; aspect-ratio: 4 / 3; width: 100%; border-radius: 0; }
.menu-skel > div { display: grid; gap: 10px; padding: 16px; }

@media (max-width: 860px) {
  .expand { height: 140vh; }
  .expand-media { clip-path: inset(14% 8% 14% 8% round 22px); }
}

/* ---------- Movimiento reducido: todo visible y quieto ---------- */
@media (prefers-reduced-motion: reduce) {
  .lines > span > i, .hero .eyebrow, .hero .lead, .hero-ctas, .js .rooms > .room:not(.room-skeleton) { opacity: 1 !important; transform: none !important; animation: none !important; }
  .js .mask-title .mask > span, .js .curtain img { transform: none !important; }
  .js .curtain::after { display: none; }
  .expand { height: auto; }
  .expand-stick { position: relative; height: 80svh; }
  .expand-media { clip-path: none !important; }
  .expand-copy { opacity: 1 !important; transform: none !important; }
  .glow-text .w { color: var(--ink-2); }
  .hero-media, .hero-content { transform: none !important; opacity: 1 !important; }
}