/* ============================================================
   COASTAL BLOOM v2 — cinematic scroll journey
   Adds on top of styles.css
   ============================================================ */

/* ---------- progress hairline ---------- */
.progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:55; pointer-events:none; }
.progress i{ display:block; height:100%; background:var(--clay); transform-origin:0 50%; transform:scaleX(0); }

/* ---------- journey / stage / layers ---------- */
.journey{ position:relative; }
.stage{
  position:sticky; top:0; height:100svh; min-height:560px;
  overflow:hidden; background:#14100a;
}
.layer{
  position:absolute; inset:0;
  display:flex; align-items:flex-end;
  visibility:hidden;
}
.layer:nth-child(1){ z-index:4; }
.layer:nth-child(2){ z-index:3; }
.layer:nth-child(3){ z-index:2; }
.layer:nth-child(4){ z-index:1; }

.layer .bgwrap{
  position:absolute; inset:0;
  will-change:transform, opacity, filter;
  transform-origin:50% 42%;
}
.layer .scene-bg{
  position:absolute; inset:0; top:0; height:100%;
  transform:none;
  background-size:cover; background-position:center;
}
.layer .cap{
  will-change:transform, opacity;
  opacity:0;
}

/* hero layer */
.layer.hero{ align-items:center; justify-content:center; }
.cap--hero{
  width:auto; max-width:none; text-align:center;
  padding:0 24px; color:#fff;
}
.cap--hero .num::before{ display:none; }

/* ---------- ghost room numbers ---------- */
.ghost{
  position:absolute; z-index:2; top:4%;
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(170px,30vw,460px); line-height:1;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.28);
  pointer-events:none; user-select:none;
  opacity:0; will-change:transform, opacity;
}
.ghost.gl{ left:clamp(8px,3vw,48px); }
.ghost.gr{ right:clamp(8px,3vw,48px); }

/* ---------- floating motes (hero) ---------- */
.motes{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.mote{
  position:absolute; width:5px; height:5px; border-radius:50%;
  background:rgba(255,248,230,.8);
  filter:blur(.5px);
  animation:moteFloat 11s linear infinite;
  opacity:0;
}
.mote:nth-child(1){ left:12%; top:74%; animation-delay:0s;   animation-duration:12s; }
.mote:nth-child(2){ left:26%; top:86%; animation-delay:2.2s; width:3px; height:3px; }
.mote:nth-child(3){ left:43%; top:80%; animation-delay:5s;   animation-duration:14s; }
.mote:nth-child(4){ left:58%; top:88%; animation-delay:1.2s; width:4px; height:4px; }
.mote:nth-child(5){ left:71%; top:78%; animation-delay:3.6s; animation-duration:13s; }
.mote:nth-child(6){ left:84%; top:84%; animation-delay:6.4s; width:3px; height:3px; }
.mote:nth-child(7){ left:34%; top:92%; animation-delay:8s;   animation-duration:16s; }
.mote:nth-child(8){ left:90%; top:90%; animation-delay:4.4s; width:4px; height:4px; }
@keyframes moteFloat{
  0%{ transform:translate3d(0,0,0); opacity:0; }
  12%{ opacity:.85; }
  80%{ opacity:.4; }
  100%{ transform:translate3d(34px,-72vh,0); opacity:0; }
}

/* ---------- water shimmer (pool) ---------- */
.shimmer{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    repeating-linear-gradient(115deg,
      rgba(255,255,255,0) 0px,
      rgba(255,255,255,.10) 10px,
      rgba(255,255,255,0) 22px,
      rgba(255,255,255,.05) 36px,
      rgba(255,255,255,0) 52px);
  background-size:260px 100%;
  mix-blend-mode:soft-light;
  animation:shimmerDrift 9s linear infinite;
  opacity:.85;
}
@keyframes shimmerDrift{
  from{ background-position:0 0; }
  to{ background-position:260px 0; }
}

/* ---------- heat-haze light leak (balcony) ---------- */
.leak{
  position:absolute; inset:-20%; z-index:1; pointer-events:none;
  background:radial-gradient(40% 34% at 78% 18%, rgba(255,214,150,.34), transparent 70%);
  mix-blend-mode:screen;
  animation:leakDrift 13s ease-in-out infinite alternate;
}
@keyframes leakDrift{
  from{ transform:translate3d(0,0,0) scale(1); opacity:.7; }
  to{ transform:translate3d(-4%,3%,0) scale(1.12); opacity:1; }
}

/* ---------- reduced motion fallback: simple stacked scenes ---------- */
@media (prefers-reduced-motion:reduce){
  .journey{ height:auto !important; }
  .stage{ position:static; height:auto; overflow:visible; background:none; }
  .layer{ position:relative; height:100svh; visibility:visible !important; }
  .layer .bgwrap{ transform:none !important; opacity:1 !important; filter:none !important; }
  .layer .cap{ opacity:1 !important; transform:none !important; }
  .ghost{ opacity:.5 !important; transform:none !important; }
  .mote, .shimmer, .leak{ animation:none; }
}

@media (max-width:720px){
  .ghost{ font-size:clamp(120px,38vw,220px); top:10%; }
}