/* ════════════════════════════════════════════════════════════
   Long Beach Chalets — scroll-driven sea & sky background (home only)
   Loaded after site.css on index.html.

   SCOPE: adds the background animation (sun / water / sky) behind the
   page, reveals it from the CHALETS section down, and — because the
   sky darkens toward the bottom — switches the page text from dark to
   light for the lower half (driven by the `sky-dark` class that
   scene.js toggles past golden hour). Front page only; no other page
   loads this file.
   ════════════════════════════════════════════════════════════ */

/* ── the canvas + film grain (the animation itself) ────────── */
#scene{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none}
/* film grain keeps the gradients from looking digitally clean */
#grain{position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:.06;mix-blend-mode:overlay;will-change:transform;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation:grain .55s steps(3) infinite}
@keyframes grain{0%{transform:translate(0,0)}50%{transform:translate(-3%,2%)}100%{transform:translate(2%,-2%)}}

/* lift the existing page above the canvas (z0) + grain (z1) */
main,footer{position:relative;z-index:2}

/* ── gate the start: everything ABOVE chalets keeps its current opaque
   look so the sea only begins at the CHALETS section. (.intro relied on
   the body colour, which now sits below the canvas — restore its fill.) ── */
.intro{background:var(--foam)}
/* .intro is width-constrained (.wrap), so extend a full-bleed foam backdrop
   behind it — otherwise the fixed canvas peeks through the side gutters on
   wide screens, above where the scene should start (CHALETS). */
.intro::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;background:var(--foam);z-index:-1}
/* the estate palm fronds reach in from the corners and were hard-clipped by the
   layer's overflow:hidden (straight cuts through the leaves on every edge).
   fade all four edges (intersect of a horizontal + vertical gradient mask) so the
   leaves dissolve into the foam instead of being cut off. */
.psil-layer{
  mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 9%,#000 85%,transparent);
  mask-composite:intersect;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 9%,#000 85%,transparent);
  -webkit-mask-composite:source-in;
}

/* ── reveal the animation from CHALETS down: drop the opaque section
   fills only. No content layout is changed. ── */
.rooms.section.tint{background:transparent;backdrop-filter:none;position:relative}
/* ease the hand-off from the foam estate section into the sea: fade foam to
   transparent across the top of CHALETS so the sky reveals gradually instead
   of as a hard seam. full-bleed so it spans the whole width. */
.rooms.section.tint::before{content:"";position:absolute;top:0;left:calc(50% - 50vw);width:100vw;height:clamp(460px,66vh,840px);background:linear-gradient(to bottom,var(--foam) 0%,var(--foam) 10%,rgba(253,252,248,.72) 38%,rgba(253,252,248,0) 100%);pointer-events:none;z-index:-1}
.book{background:transparent}
/* the book's radial glow is clipped at its bottom edge, drawing a seam where
   it meets the footer. both now sit over the same continuous night sky, so drop
   it here for a seamless last-section→footer transition (front page only). */
.book .glow{display:none}

/* chalet carousel images read as framed photographs sitting on the sea:
   a small white border, directly on the background (no card behind) */
#chalets .room .ph{border:6px solid #fff;border-radius:14px;box-shadow:0 22px 44px -26px rgba(18,38,28,.5);height:clamp(300px,30vw,380px)}
@media(max-width:900px){#chalets .room .ph{height:260px}}

/* smooth the dark→light text hand-off as the sky changes */
.shore .head .kicker,.shore .head h2,.shore-hint,.shore-hint a,
#day .sticky .kicker,#day .sticky h2,#day .sticky p,#day .sticky .btn,
#day .moment .t,#day .moment h4,#day .moment p,#day .moment a,
#day .moments .moment{transition:color .6s ease,border-color .6s ease}

/* ════════════════════════════════════════════════════════════
   DARK SKY (past golden hour) — switch the lower-half text to light
   ════════════════════════════════════════════════════════════ */

/* SHORE (pinned while the sky moves midday → dusk) */
body.sky-dark .shore .head .kicker{color:#A9D2C7}
body.sky-dark .shore .head h2{color:#F4FBF7;text-shadow:0 2px 22px rgba(8,16,26,.45)}
body.sky-dark .shore .head h2 em.sea{color:var(--seaglass)}
body.sky-dark .shore-hint{color:#E4EFEA;text-shadow:0 1px 14px rgba(8,16,26,.5)}
body.sky-dark .shore-hint a{color:#BFE0D6 !important}

/* DAY (dusk → night) */
body.sky-dark #day .sticky .kicker{color:#A9D2C7}
body.sky-dark #day .sticky h2{color:#F4FBF7;text-shadow:0 2px 22px rgba(8,16,26,.5)}
body.sky-dark #day .sticky h2 em.sea{color:var(--seaglass)}
body.sky-dark #day .sticky p{color:#DCEAE6;text-shadow:0 1px 14px rgba(8,16,26,.5)}
body.sky-dark #day .sticky .btn.shell{border-color:rgba(255,255,255,.6);color:#F4FBF7}
body.sky-dark #day .sticky .btn.shell:hover{background:rgba(255,255,255,.14);color:#fff}

body.sky-dark #day .moment{border-bottom-color:rgba(255,255,255,.16)}
body.sky-dark #day .moment:first-child{border-top-color:rgba(255,255,255,.16)}
body.sky-dark #day .moment::before{background:#1a3a42;border-color:var(--seaglass)}
body.sky-dark #day .moment .t{color:#CDEBE0;text-shadow:0 1px 12px rgba(8,16,26,.55)}
body.sky-dark #day .moment h4{color:#F4FBF7;text-shadow:0 1px 12px rgba(8,16,26,.5)}
body.sky-dark #day .moment p{color:#D4E4DF;text-shadow:0 1px 12px rgba(8,16,26,.5)}
body.sky-dark #day .moment a{color:#9FD4C7 !important}
body.sky-dark #day .moment .tag{color:#F0A98E}
/* keep the tide-rail visible on the dark sky */
body.sky-dark #day .tide-rail{background:rgba(255,255,255,.14)}

/* ════════════════════════════════════════════════════════════
   FOOTER — part of the scene: transparent like the other sections so
   the night sky (stars, moon, sea) shows straight through it, with
   light text. (Front page only — other pages keep the light footer.)
   ════════════════════════════════════════════════════════════ */
footer{background:transparent}
/* override the (partly inline) cream-era footer text for the night base */
footer,footer p,footer a,footer span,footer small{color:#C2D5CF !important}
footer .wordmark{color:#F2F8F5 !important}
footer .wordmark small{color:#9FC0B8 !important}
footer h5{color:#88A39B !important}
footer a:hover{color:#fff !important}
footer .fbase{border-top:0}   /* drop the copyright divider line — front page only */
footer .lang-sw>button{color:#E7F1ED !important;border-color:rgba(255,255,255,.3) !important}
footer .lang-sw .drop{background:#13243f;border-color:rgba(255,255,255,.14)}
footer .lang-sw .drop a{color:#C2D5CF !important}
footer .lang-sw .drop a:hover,footer .lang-sw .drop a[aria-current]{color:#fff !important}

/* reduced motion: no film grain */
@media(prefers-reduced-motion:reduce){#grain{display:none}}