/* ============================================================
   COASTAL BLOOM v3 — image-free graphic scenes, light theme
   Loads after styles.css + styles-v2.css and overrides them.
   ============================================================ */

/* ---------- light theme overrides ---------- */
.stage{ background:var(--paper); }

.topbar{
  background:color-mix(in srgb, var(--paper) 78%, transparent);
  backdrop-filter:blur(10px) saturate(1.1);
  border-bottom:1px solid var(--line);
}
.brand{ color:var(--ink); text-shadow:none; }
.lang{ color:var(--ink-soft); text-shadow:none; }
.lang .a, .lang .b{ color:var(--ink); }
.lang .off{ opacity:.4; }

.layer .cap{ color:var(--ink); }
.layer .cap h2{ text-shadow:none; }
.layer .cap h2 em{ color:var(--clay); }
.layer .cap p{ color:var(--ink-soft); text-shadow:none; }
.layer .cap .kicker{ color:var(--clay); opacity:1; }
.layer .cap .num{ color:var(--ink-soft); opacity:1; }

.cap--hero .eyebrow{ color:var(--ink-soft); }
.cap--hero h1{ color:var(--ink); text-shadow:none; }
.cap--hero .lede{ color:var(--ink-soft); text-shadow:none; }

.scroll-cue{ color:var(--ink); opacity:.8; }
.scroll-cue .chev{ border-color:color-mix(in srgb, var(--ink) 55%, transparent); }
.scroll-cue .chev::after{ background:var(--ink); }

.ghost{
  -webkit-text-stroke:1.5px color-mix(in srgb, var(--ink) 30%, transparent);
}

.mote{ background:color-mix(in srgb, var(--clay) 70%, white); }

/* ---------- art layers ---------- */
.art{ position:absolute; inset:0; overflow:hidden; }
.art .d{ position:absolute; inset:0; pointer-events:none; will-change:transform; }
.art .d > *{ position:absolute; }

/* ===== 01 · ARRIVAL — sun, Montgó, arcade ===== */
.s-arrival{ background:linear-gradient(180deg, #f8f3e7 0%, #f2e9d6 100%); }
.s-arrival .sun{
  width:24vmin; height:24vmin; border-radius:50%;
  right:16%; top:13%;
  background:var(--clay);
  box-shadow:0 0 0 3.2vmin color-mix(in srgb, var(--clay) 14%, transparent);
}
.s-arrival .ridge1{
  left:-12%; bottom:24%; width:75%; height:38%;
  background:color-mix(in srgb, var(--olive) 34%, var(--paper));
  border-radius:100% 100% 0 0 / 200% 170% 0 0;
}
.s-arrival .ridge2{
  right:-18%; bottom:24%; width:85%; height:30%;
  background:color-mix(in srgb, var(--olive) 20%, var(--paper));
  border-radius:100% 100% 0 0 / 180% 200% 0 0;
}
.s-arrival .band{
  left:0; right:0; bottom:0; height:26%;
  background:#faf6ec;
  border-top:1px solid var(--line);
}
.s-arrival .arch{
  bottom:0; width:13vmin; height:21vmin;
  border-radius:6.5vmin 6.5vmin 0 0;
  background:linear-gradient(180deg, #e8ddc6, #ddcfb2);
}
.s-arrival .a1{ left:16%; } .s-arrival .a2{ left:44%; } .s-arrival .a3{ left:72%; }

/* ===== 02 · LIVING — light shaft, doorway arches, floor ===== */
.s-living{ background:linear-gradient(180deg, #f7f0e1 0%, #f0e6d0 100%); }
.s-living .shaft{
  left:-14%; top:-24%; width:58%; height:150%;
  background:linear-gradient(100deg, transparent 12%, rgba(255,219,160,.5) 48%, transparent 84%);
  transform:rotate(9deg);
}
.s-living .door{
  left:11%; bottom:0; width:32vmin; height:58vmin;
  border-radius:16vmin 16vmin 0 0;
  background:linear-gradient(180deg, #ecdfc6, #e2d2b3);
  box-shadow:inset 0 0 0 1.4vmin #f6efe0;
}
.s-living .door2{
  left:46%; bottom:0; width:22vmin; height:42vmin;
  border-radius:11vmin 11vmin 0 0;
  background:linear-gradient(180deg, #eee2cb, #e5d6ba);
  box-shadow:inset 0 0 0 1.1vmin #f6efe0;
}
.s-living .floor{
  left:0; right:0; bottom:0; height:12%;
  background:
    repeating-linear-gradient(90deg, rgba(44,40,32,.05) 0 1px, transparent 1px 12vmin),
    #e3d4b4;
}

/* ===== 03 · BALCONY — sky, sun, ridge, railing ===== */
.s-balcony{ background:linear-gradient(180deg, #dfecec 0%, #f3ecda 72%); }
.s-balcony .sun{
  width:18vmin; height:18vmin; border-radius:50%;
  left:20%; top:24%;
  background:color-mix(in srgb, var(--clay) 86%, white);
  box-shadow:0 0 0 2.6vmin color-mix(in srgb, var(--clay) 12%, transparent);
}
.s-balcony .ridge1{
  left:-10%; bottom:30%; width:80%; height:26%;
  background:color-mix(in srgb, var(--olive) 30%, #f3ecda);
  border-radius:100% 100% 0 0 / 190% 160% 0 0;
}
.s-balcony .ridge2{
  right:-14%; bottom:30%; width:78%; height:20%;
  background:color-mix(in srgb, var(--olive) 16%, #f3ecda);
  border-radius:100% 100% 0 0 / 170% 190% 0 0;
}
.s-balcony .railbar{
  left:0; right:0; bottom:31%; height:1.6vmin;
  background:color-mix(in srgb, var(--ink) 72%, transparent);
  border-radius:2px;
  mask:linear-gradient(90deg, rgba(0,0,0,.12) 0 34%, black 60%);
  -webkit-mask:linear-gradient(90deg, rgba(0,0,0,.12) 0 34%, black 60%);
}
.s-balcony .rails{
  left:0; right:0; bottom:0; height:31%;
  background:repeating-linear-gradient(90deg,
    color-mix(in srgb, var(--ink) 62%, transparent) 0 0.9vmin,
    transparent 0.9vmin 9vmin);
  mask:linear-gradient(90deg, rgba(0,0,0,.10) 0 34%, black 60%);
  -webkit-mask:linear-gradient(90deg, rgba(0,0,0,.10) 0 34%, black 60%);
}
.s-balcony .table{
  right:18%; bottom:8%; width:20vmin; height:1.4vmin;
  background:color-mix(in srgb, var(--ink) 70%, transparent); border-radius:2px;
}
.s-balcony .table::after{
  content:''; position:absolute; left:50%; top:100%; transform:translateX(-50%);
  width:1.2vmin; height:14vmin;
  background:color-mix(in srgb, var(--ink) 70%, transparent);
}

/* ===== 04 · POOL — water field, shimmer, float ring ===== */
.s-pool{ background:linear-gradient(180deg, #cfe7e2 0%, #a3d4cc 60%, #8fcac1 100%); }
.s-pool .glow1{
  left:8%; top:18%; width:55vmin; height:30vmin; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,255,255,.4), transparent);
}
.s-pool .glow2{
  right:4%; bottom:24%; width:70vmin; height:36vmin; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,255,255,.3), transparent);
}
.s-pool .lane{
  left:0; right:0; top:58%; height:0.8vmin;
  background:rgba(255,255,255,.5); border-radius:4px;
  transform:rotate(-2deg);
}
.s-pool .ring{
  right:22%; bottom:30%; width:17vmin; height:17vmin; border-radius:50%;
  border:4.2vmin solid var(--clay);
  box-shadow:0 2.4vmin 3vmin -1.4vmin rgba(20,40,36,.4);
  animation:ringBob 5.5s ease-in-out infinite alternate;
}
.s-pool .ring::after{
  content:''; position:absolute; inset:-4.2vmin; border-radius:50%;
  background:conic-gradient(transparent 0 25%, rgba(255,255,255,.4) 25% 50%, transparent 50% 75%, rgba(255,255,255,.4) 75%);
  mask:radial-gradient(closest-side, transparent 58%, black 60%);
  -webkit-mask:radial-gradient(closest-side, transparent 58%, black 60%);
}
@keyframes ringBob{
  from{ transform:translate3d(0,0,0) rotate(-4deg); }
  to{ transform:translate3d(0,2.4vmin,0) rotate(5deg); }
}
.s-pool .edge{
  left:-6%; bottom:-10vmin; width:112%; height:16vmin;
  background:var(--paper);
  border-radius:50% 50% 0 0 / 90% 90% 0 0;
}

@media (prefers-reduced-motion:reduce){
  .s-pool .ring{ animation:none; }
  .art .d{ transform:none !important; }
}