/* Pure-CSS illustrated coastal scenes — one per day */

.scene { position: relative; }
.scene * { pointer-events: none; }

/* Shared sky + sun base */
.scene::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* ========= COVER — Big sunset over PCH ========= */
.scene-cover {
  background: linear-gradient(180deg,
    #f4b87a 0%,
    #ee9264 30%,
    #d9695a 55%,
    #8d4a66 80%,
    #3e3a5c 100%
  );
}
.scene-cover .sun {
  position: absolute;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, #fde28a 0%, #f9bf5f 50%, rgba(249,191,95,0) 70%);
  top: 48%; left: 50%; transform: translate(-50%, -50%);
  filter: blur(0.5px);
}
.scene-cover .sun-disc {
  position: absolute;
  width: 90px; height: 90px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff4cc, #f9cf6a);
  top: 48%; left: 50%; transform: translate(-50%, -50%);
  box-shadow: 0 0 40px rgba(253, 226, 138, 0.8);
}
.scene-cover .horizon {
  position: absolute;
  bottom: 42%; left: 0; right: 0;
  height: 1px;
  background: rgba(255,255,255,0.35);
}
.scene-cover .cliff-l, .scene-cover .cliff-r {
  position: absolute;
  bottom: 0;
  width: 40%;
  height: 55%;
}
.scene-cover .cliff-l {
  left: 0;
  background: linear-gradient(180deg, #3e2a1f 0%, #1f1410 100%);
  clip-path: polygon(0 60%, 10% 55%, 25% 62%, 40% 50%, 55% 58%, 70% 52%, 100% 60%, 100% 100%, 0 100%);
}
.scene-cover .cliff-r {
  right: 0;
  background: linear-gradient(180deg, #4a3524 0%, #241710 100%);
  clip-path: polygon(0 70%, 15% 55%, 35% 68%, 55% 55%, 75% 62%, 90% 58%, 100% 65%, 100% 100%, 0 100%);
}
.scene-cover .ocean {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 42%;
  background: linear-gradient(180deg, #d9695a 0%, #8d4a66 60%, #3e3a5c 100%);
  opacity: 0.85;
}
.scene-cover .shimmer {
  position: absolute;
  bottom: 38%;
  left: 45%;
  width: 10%;
  height: 2px;
  background: rgba(255, 239, 190, 0.9);
  box-shadow:
    0 3px 0 rgba(255, 239, 190, 0.6),
    0 6px 0 rgba(255, 239, 190, 0.4),
    0 9px 0 rgba(255, 239, 190, 0.2);
}
.scene-cover .bird {
  position: absolute;
  width: 20px; height: 6px;
  border-top: 1.5px solid rgba(0,0,0,0.6);
  border-radius: 50%;
  border-left: transparent; border-right: transparent; border-bottom: transparent;
}
.scene-cover .bird.b1 { top: 25%; left: 25%; transform: rotate(-8deg); }
.scene-cover .bird.b2 { top: 20%; left: 68%; transform: rotate(5deg) scale(0.7); }
.scene-cover .bird.b3 { top: 32%; left: 55%; transform: rotate(-3deg) scale(0.8); }

/* ========= DAY 1 — SF Bay + Golden Gate ========= */
.scene-d1 {
  background: linear-gradient(180deg, #a9c8d5 0%, #d9c8a8 70%, #b99668 100%);
}
.scene-d1 .sky-fog {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 55%;
  background: linear-gradient(180deg, rgba(255,255,255,0.5), transparent);
}
.scene-d1 .sun {
  position: absolute;
  width: 60px; height: 60px;
  top: 20%; right: 18%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6d9, #f9cf6a 60%, rgba(249,207,106,0) 75%);
}
/* Golden Gate suggestion — two towers + cable curve */
.scene-d1 .tower-l, .scene-d1 .tower-r {
  position: absolute;
  width: 10px;
  height: 45%;
  background: #c04a2e;
  bottom: 35%;
}
.scene-d1 .tower-l { left: 20%; }
.scene-d1 .tower-r { left: 68%; }
.scene-d1 .tower-l::after, .scene-d1 .tower-r::after {
  content: ''; position: absolute;
  width: 16px; height: 6px;
  left: -3px; top: 0;
  background: #c04a2e;
}
.scene-d1 .cable {
  position: absolute;
  left: 20%; right: 22%;
  top: 22%;
  height: 30%;
  border-top: 2px solid #8a2e1a;
  border-radius: 50%/100% 100% 0 0;
  border-left: transparent;
  border-right: transparent;
  border-bottom: transparent;
}
.scene-d1 .deck {
  position: absolute;
  left: 14%; right: 16%;
  top: 48%;
  height: 3px;
  background: #c04a2e;
}
.scene-d1 .water {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 38%;
  background: linear-gradient(180deg, #6a9a98 0%, #3f6c6c 100%);
}
.scene-d1 .wave {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: rgba(255,255,255,0.35);
}
.scene-d1 .wave.w1 { bottom: 30%; }
.scene-d1 .wave.w2 { bottom: 22%; opacity: 0.6; }
.scene-d1 .wave.w3 { bottom: 12%; opacity: 0.4; }
.scene-d1 .sealion {
  position: absolute;
  bottom: 34%;
  left: 75%;
  width: 14px; height: 7px;
  background: #3a2a1a;
  border-radius: 50% 50% 40% 40%;
}
.scene-d1 .sealion::before {
  content: ''; position: absolute;
  width: 6px; height: 4px;
  background: #3a2a1a;
  border-radius: 50%;
  left: -4px; top: -1px;
}

/* ========= DAY 2 — Monterey / cypress / kelp ========= */
.scene-d2 {
  background: linear-gradient(180deg, #cfd9c6 0%, #a9c1b4 40%, #6a8a8a 100%);
}
.scene-d2 .mist {
  position: absolute;
  top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.6), transparent);
}
.scene-d2 .cliff {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  height: 60%;
  background: linear-gradient(180deg, #4a3a2a 0%, #2a1f14 100%);
  clip-path: polygon(0 45%, 12% 40%, 24% 48%, 38% 35%, 52% 42%, 68% 38%, 82% 44%, 100% 40%, 100% 100%, 0 100%);
}
/* Lone cypress */
.scene-d2 .trunk {
  position: absolute;
  bottom: 42%;
  left: 55%;
  width: 3px;
  height: 28%;
  background: #1a1008;
  transform: rotate(-5deg);
}
.scene-d2 .canopy {
  position: absolute;
  bottom: 62%;
  left: 40%;
  width: 80px;
  height: 30px;
  background: #1f2a1a;
  border-radius: 50% 40% 50% 40% / 100% 100% 0 0;
  transform: rotate(-3deg);
}
.scene-d2 .canopy::before {
  content: ''; position: absolute;
  top: -6px; left: 20%;
  width: 50%; height: 15px;
  background: #253a28;
  border-radius: 50% 50% 0 0;
}
.scene-d2 .water {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(180deg, #6a9a98 0%, #23434a 100%);
}
.scene-d2 .otter {
  position: absolute;
  bottom: 22%;
  left: 20%;
  width: 16px; height: 6px;
  background: #5a3a22;
  border-radius: 50%;
}

/* ========= DAY 3 — Big Sur Bixby Bridge ========= */
.scene-d3 {
  background: linear-gradient(180deg, #b8c9d5 0%, #d8bc88 60%, #8a6a48 100%);
}
.scene-d3 .sky {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 55%;
  background: linear-gradient(180deg, #c8d9e5, #e8cfa8);
}
.scene-d3 .mountain-bg {
  position: absolute;
  bottom: 30%; left: 0;
  width: 60%;
  height: 40%;
  background: linear-gradient(180deg, #7a6a58, #5a4a3a);
  clip-path: polygon(0 50%, 30% 20%, 60% 35%, 100% 25%, 100% 100%, 0 100%);
  opacity: 0.8;
}
.scene-d3 .mountain {
  position: absolute;
  bottom: 28%; left: 0; right: 0;
  height: 45%;
  background: linear-gradient(180deg, #5a4a35, #3a2a1f);
  clip-path: polygon(0 60%, 18% 35%, 32% 50%, 48% 25%, 65% 45%, 82% 32%, 100% 50%, 100% 100%, 0 100%);
}
/* Bixby bridge — arch */
.scene-d3 .bridge-deck {
  position: absolute;
  left: 22%; right: 22%;
  bottom: 42%;
  height: 4px;
  background: #d9c8a8;
  box-shadow: 0 1px 0 rgba(0,0,0,0.3);
}
.scene-d3 .arch {
  position: absolute;
  left: 32%; right: 32%;
  bottom: 30%;
  height: 14%;
  border: 2.5px solid #d9c8a8;
  border-bottom: transparent;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.scene-d3 .pillar-l, .scene-d3 .pillar-r {
  position: absolute;
  bottom: 28%;
  width: 3px; height: 14%;
  background: #d9c8a8;
}
.scene-d3 .pillar-l { left: 28%; }
.scene-d3 .pillar-r { right: 28%; }
.scene-d3 .water {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 30%;
  background: linear-gradient(180deg, #3a6a78 0%, #1a2f3a 100%);
}
.scene-d3 .road {
  position: absolute;
  bottom: 42%;
  left: 0; width: 22%;
  height: 2px;
  background: #c4a574;
}
.scene-d3 .road.r2 {
  left: auto; right: 0;
}

/* ========= DAY 4 — Hearst Castle + Solvang hills ========= */
.scene-d4 {
  background: linear-gradient(180deg, #e8c98a 0%, #d9a870 50%, #8a6a48 100%);
}
.scene-d4 .hill-bg {
  position: absolute;
  bottom: 25%; left: 0; right: 0;
  height: 40%;
  background: #b89060;
  clip-path: polygon(0 50%, 25% 20%, 55% 40%, 80% 15%, 100% 35%, 100% 100%, 0 100%);
}
.scene-d4 .hill {
  position: absolute;
  bottom: 15%; left: 0; right: 0;
  height: 45%;
  background: linear-gradient(180deg, #9a7848, #6a4a28);
  clip-path: polygon(0 60%, 20% 30%, 45% 48%, 70% 25%, 100% 45%, 100% 100%, 0 100%);
}
/* Castle silhouette */
.scene-d4 .castle {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  top: 30%;
  width: 70px; height: 35px;
}
.scene-d4 .castle .tower1,
.scene-d4 .castle .tower2,
.scene-d4 .castle .main {
  position: absolute;
  background: #f5ebd9;
  bottom: 0;
}
.scene-d4 .castle .main {
  left: 20%; width: 60%; height: 100%;
}
.scene-d4 .castle .tower1 {
  left: 0; width: 22%; height: 80%;
  border-radius: 4px 4px 0 0;
}
.scene-d4 .castle .tower2 {
  right: 0; width: 22%; height: 90%;
  border-radius: 4px 4px 0 0;
}
.scene-d4 .castle .dome {
  position: absolute;
  left: 35%; top: -10px;
  width: 30%; height: 14px;
  background: #f5ebd9;
  border-radius: 50% 50% 0 0;
}
.scene-d4 .windmill {
  position: absolute;
  bottom: 15%;
  right: 18%;
  width: 4px; height: 40px;
  background: #5a3a1f;
}
.scene-d4 .windmill::before {
  content: ''; position: absolute;
  width: 36px; height: 36px;
  top: -8px; left: -16px;
  background:
    linear-gradient(45deg, transparent 46%, #f5ebd9 46% 54%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, #f5ebd9 46% 54%, transparent 54%);
}
.scene-d4 .ground {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 18%;
  background: linear-gradient(180deg, #8a6a38, #5a4020);
}

/* ========= DAY 5 — Santa Barbara palms / Malibu ========= */
.scene-d5 {
  background: linear-gradient(180deg, #f4b87a 0%, #e8a076 40%, #c48870 75%, #6a4a5a 100%);
}
.scene-d5 .sun {
  position: absolute;
  width: 70px; height: 70px;
  top: 22%; right: 18%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff4cc, #f9bf5f 60%, rgba(249,191,95,0) 75%);
}
.scene-d5 .water {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 45%;
  background: linear-gradient(180deg, #d4755a 0%, #6a4a5a 100%);
}
.scene-d5 .shimmer {
  position: absolute;
  bottom: 30%; left: 60%;
  width: 18%; height: 1.5px;
  background: rgba(255,240,200,0.8);
  box-shadow: 0 4px 0 rgba(255,240,200,0.5), 0 8px 0 rgba(255,240,200,0.3);
}
/* Palm trees */
.scene-d5 .palm {
  position: absolute;
  bottom: 40%;
  width: 3px;
  height: 42%;
  background: #2a1f10;
}
.scene-d5 .palm.p1 { left: 12%; }
.scene-d5 .palm.p2 { left: 22%; height: 48%; bottom: 40%; }
.scene-d5 .palm.p3 { left: 80%; height: 44%; }
.scene-d5 .palm::before, .scene-d5 .palm::after {
  content: '';
  position: absolute;
  top: -4px;
  width: 22px;
  height: 4px;
  background: #2a3a1f;
  border-radius: 50%;
}
.scene-d5 .palm::before { left: -20px; transform: rotate(-20deg); transform-origin: right center; }
.scene-d5 .palm::after { left: 1px; transform: rotate(20deg); transform-origin: left center; }
.scene-d5 .palm .l2, .scene-d5 .palm .l3 {
  position: absolute;
  width: 20px;
  height: 4px;
  background: #2a3a1f;
  border-radius: 50%;
  top: -2px;
}
.scene-d5 .palm .l2 { left: -18px; transform: rotate(-40deg); transform-origin: right center; }
.scene-d5 .palm .l3 { left: 1px; transform: rotate(40deg); transform-origin: left center; }

/* ========= DAY 6 — LA palms + Hollywood hills ========= */
.scene-d6 {
  background: linear-gradient(180deg, #d9c8a8 0%, #c48870 40%, #8d4a66 75%, #3e3a5c 100%);
}
.scene-d6 .sun {
  position: absolute;
  width: 80px; height: 80px;
  top: 35%; left: 40%;
  border-radius: 50%;
  background: radial-gradient(circle, #fde28a, #f9bf5f 60%, rgba(249,191,95,0) 75%);
}
.scene-d6 .hills {
  position: absolute;
  bottom: 28%; left: 0; right: 0;
  height: 35%;
  background: linear-gradient(180deg, #5a4a58, #2a2030);
  clip-path: polygon(0 60%, 20% 35%, 42% 50%, 60% 30%, 78% 45%, 100% 35%, 100% 100%, 0 100%);
}
.scene-d6 .skyline {
  position: absolute;
  bottom: 25%; left: 15%;
  width: 70%; height: 12%;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
}
.scene-d6 .bldg {
  background: #1a1418;
  width: 8%;
}
.scene-d6 .bldg.b1 { height: 60%; }
.scene-d6 .bldg.b2 { height: 100%; }
.scene-d6 .bldg.b3 { height: 75%; }
.scene-d6 .bldg.b4 { height: 90%; }
.scene-d6 .bldg.b5 { height: 65%; }
.scene-d6 .bldg.b6 { height: 85%; }
.scene-d6 .palm {
  position: absolute;
  bottom: 20%;
  width: 3px;
  height: 38%;
  background: #1a0f08;
}
.scene-d6 .palm.p1 { left: 8%; }
.scene-d6 .palm.p2 { right: 6%; height: 42%; bottom: 22%; }
.scene-d6 .palm::before, .scene-d6 .palm::after {
  content: '';
  position: absolute;
  top: -3px;
  width: 20px;
  height: 4px;
  background: #1a0f08;
  border-radius: 50%;
}
.scene-d6 .palm::before { left: -18px; transform: rotate(-20deg); transform-origin: right center; }
.scene-d6 .palm::after { left: 0; transform: rotate(20deg); transform-origin: left center; }
.scene-d6 .ground {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 22%;
  background: linear-gradient(180deg, #1a1015 0%, #0a0508 100%);
}

/* ========= DAY 7 — Manhattan Beach Pier ========= */
.scene-d7 {
  background: linear-gradient(180deg, #e0d8c4 0%, #d9c5a0 40%, #c4a878 100%);
}
.scene-d7 .sky {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 55%;
  background: linear-gradient(180deg, #c8d9dd, #e8d9b8);
}
.scene-d7 .water {
  position: absolute;
  bottom: 22%; left: 0; right: 0;
  height: 35%;
  background: linear-gradient(180deg, #6a9a98 0%, #4a7878 100%);
}
.scene-d7 .beach {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 25%;
  background: linear-gradient(180deg, #e8d4a0 0%, #c4a474 100%);
}
/* Pier */
.scene-d7 .pier {
  position: absolute;
  left: 10%; right: 40%;
  bottom: 20%;
  height: 4px;
  background: #5a3a22;
}
.scene-d7 .pier-end {
  position: absolute;
  right: 36%;
  bottom: 20%;
  width: 24px; height: 18px;
  background: #5a3a22;
  border-radius: 2px;
}
.scene-d7 .piling {
  position: absolute;
  bottom: 0;
  width: 3px; height: 30%;
  background: #3a2418;
}
.scene-d7 .piling.p1 { left: 15%; }
.scene-d7 .piling.p2 { left: 25%; }
.scene-d7 .piling.p3 { left: 35%; }
.scene-d7 .piling.p4 { left: 45%; }
.scene-d7 .piling.p5 { left: 55%; }
.scene-d7 .wave {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: rgba(255,255,255,0.4);
}
.scene-d7 .wave.w1 { bottom: 48%; }
.scene-d7 .wave.w2 { bottom: 38%; opacity: 0.6; }
.scene-d7 .wave.w3 { bottom: 30%; opacity: 0.4; }

/* ========= Small hotel illustrations (inline) ========= */
.h-illust {
  width: 72px; height: 54px;
  border-radius: 10px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #c8dde2 0%, #e9d5a8 60%, #b98868 100%);
}
.h-illust .roof {
  position: absolute;
  bottom: 20%;
  left: 20%; right: 20%;
  height: 35%;
  background: var(--terra-700);
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}
.h-illust .body {
  position: absolute;
  bottom: 0;
  left: 25%; right: 25%;
  height: 30%;
  background: var(--sand-100);
}
.h-illust .window {
  position: absolute;
  bottom: 8%;
  left: 35%;
  width: 10%; height: 10%;
  background: var(--sun-300);
}