/* =========================================================================
   Blue Horizon — Homepage sections + signature hero
   ========================================================================= */

/* ---------- Signature WebGL hero ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; isolation:isolate; overflow:hidden; }
.hero__poster, #hero-gl{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero__poster{ z-index:0; }
#hero-gl{ z-index:1; opacity:0; transition:opacity 1.2s ease; }
#hero-gl.ready{ opacity:1; }
.hero::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(8,21,38,.5) 0%, rgba(8,21,38,0) 30%, rgba(8,21,38,.35) 62%, rgba(8,21,38,.92) 100%),
    radial-gradient(80% 60% at 70% 18%, rgba(63,166,181,.14), transparent 70%); }
.hero__inner{ position:relative; z-index:3; padding-bottom:clamp(60px,11vh,130px); padding-top:calc(var(--header-h) + 30px); width:100%; }
.hero__eyebrow{ color:var(--gold-bright); }
.hero h1{ font-size:clamp(3rem, 8.5vw, 7rem); font-weight:500; max-width:15ch; margin-bottom:.5rem; line-height:1.02; }
.hero h1 .line{ display:block; overflow:hidden; }
.hero h1 em{ font-style:italic; color:var(--gold-bright); }
.hero__sub{ font-size:clamp(1.05rem,1.7vw,1.35rem); color:var(--ivory-dim); max-width:46ch; margin-bottom:2rem; }
.hero__actions{ display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }
.hero__scroll{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:.6rem; color:var(--ivory-faint); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; }
.hero__scroll .line-anim{ width:1px; height:46px; background:linear-gradient(var(--gold), transparent); position:relative; overflow:hidden; }
.hero__scroll .line-anim::after{ content:""; position:absolute; top:-50%; left:0; width:100%; height:50%; background:var(--gold); animation:scrolldrop 2.2s cubic-bezier(.7,0,.3,1) infinite; }
@keyframes scrolldrop{ to{ top:100%; } }

/* trust bar under hero */
.trustbar{ display:flex; flex-wrap:wrap; gap:clamp(1.4rem,3vw,3rem); align-items:center; padding:1.6rem 0; }
.trustbar .ts{ display:flex; align-items:center; gap:.7rem; font-size:.9rem; color:var(--ivory-dim); }
.trustbar .ts svg{ width:1.2rem; height:1.2rem; color:var(--gold); flex-shrink:0; }

/* ---------- Intro / statement ---------- */
.statement p{ font-family:var(--serif); font-size:clamp(1.5rem,3.2vw,2.4rem); line-height:1.35; color:var(--ivory); font-weight:400; max-width:22ch; }
.statement .lead{ font-family:var(--sans); font-size:1.1rem; }

/* ---------- Stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; }
.stat{ padding:2.2rem 1.4rem; text-align:center; border-right:1px solid var(--line); }
.stat:last-child{ border-right:0; }
.stat .num{ font-family:var(--serif); font-size:clamp(2.2rem,4vw,3.2rem); color:var(--gold); line-height:1; }
.stat .label{ font-size:.84rem; letter-spacing:.06em; color:var(--ivory-dim); margin-top:.6rem; }

/* ---------- Rooms preview ---------- */
.room-card{ display:flex; flex-direction:column; height:100%; }
.room-card .card__body{ display:flex; flex-direction:column; flex:1; }
.room-meta{ display:flex; gap:1rem; flex-wrap:wrap; font-size:.82rem; color:var(--ivory-faint); margin:.3rem 0 1rem; }
.room-meta span{ display:inline-flex; align-items:center; gap:.4rem; }
.room-price{ margin-top:auto; padding-top:1.1rem; border-top:1px solid var(--line); display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; }
.room-price .from{ font-size:.78rem; color:var(--ivory-faint); }
.room-price .amt{ font-family:var(--serif); font-size:1.5rem; color:var(--ivory); }

/* ---------- Feature split (alternating) ---------- */
.feature{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,80px); align-items:center; }
.feature + .feature{ margin-top:clamp(60px,9vh,120px); }
.feature__media{ border-radius:var(--r-img); overflow:hidden; position:relative; aspect-ratio:5/4; }
.feature__media img{ width:100%; height:100%; object-fit:cover; }
.feature--reverse .feature__media{ order:2; }
.feature__badge{ position:absolute; top:1rem; left:1rem; background:rgba(8,21,38,.7); backdrop-filter:blur(6px); border:1px solid var(--line); border-radius:var(--r-pill); padding:.45rem 1rem; font-size:.78rem; letter-spacing:.08em; color:var(--gold-bright); }

/* ---------- Experiences grid ---------- */
.exp-card{ position:relative; border-radius:var(--r-img); overflow:hidden; min-height:340px; display:flex; align-items:flex-end; isolation:isolate; }
.exp-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .9s cubic-bezier(.2,.8,.2,1); }
.exp-card::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, transparent 30%, rgba(8,21,38,.9)); }
.exp-card:hover img{ transform:scale(1.07); }
.exp-card__body{ padding:1.6rem; }
.exp-card__body h3{ margin-bottom:.3rem; }
.exp-card__body p{ margin:0; font-size:.95rem; }
.exp-card.tall{ grid-row:span 2; }

/* ---------- Dining band ---------- */
.dining{ position:relative; overflow:hidden; }
.dining__media{ border-radius:var(--r-img); overflow:hidden; aspect-ratio:16/10; }
.dining__media img{ width:100%; height:100%; object-fit:cover; }

/* ---------- Testimonials ---------- */
.quote-card{ background:var(--ink-3); border:1px solid var(--line); border-radius:var(--r-card); padding:2rem 1.8rem; position:relative; }
.quote-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(201,166,107,.55),transparent); }
.quote-card .stars{ color:var(--gold); letter-spacing:.18em; margin-bottom:1rem; font-size:.95rem; }
.quote-card blockquote{ margin:0 0 1.1rem; font-family:var(--serif); font-size:1.18rem; line-height:1.5; color:var(--ivory); font-style:italic; }
.quote-card cite{ font-style:normal; font-size:.85rem; color:var(--ivory-faint); letter-spacing:.04em; }

/* ---------- CTA band ---------- */
.cta-band{ position:relative; text-align:center; overflow:hidden; isolation:isolate; border-radius:clamp(16px,3vw,28px); padding:clamp(56px,9vw,110px) var(--gut); margin-inline:var(--gut); }
.cta-band img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.cta-band::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(8,21,38,.78), rgba(8,21,38,.9)); }
.cta-band h2{ font-size:clamp(2rem,5vw,3.6rem); max-width:18ch; margin-inline:auto; }
.cta-band p{ max-width:52ch; margin-inline:auto; }
.cta-actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:1.8rem; }

@media (max-width:860px){
  .feature, .feature--reverse{ grid-template-columns:1fr; }
  .feature--reverse .feature__media{ order:0; }
  .stats{ grid-template-columns:1fr 1fr; }
  .stat:nth-child(2){ border-right:0; }
  .stat:nth-child(1),.stat:nth-child(2){ border-bottom:1px solid var(--line); }
  .exp-card.tall{ grid-row:span 1; }
  .hero{ min-height:92svh; }
}