.coast, .coast-nav { color-scheme: light; color: #192c37; }
.coast-nav {
  position: absolute;
  top: clamp(12px, 2.5vh, 28px);
  left: var(--margin);
  right: var(--margin);
  height: 62px;
  padding: 0 clamp(14px, 2vw, 34px);
  z-index: 3;
  border: 1px solid #ffffffaf;
  border-radius: 16px;
  background: #eff6fadb;
  box-shadow: 0 4px 20px #30536d12, inset 0 1px #fff9;
}
.coast-nav .brand img { filter: brightness(.23) saturate(.65); }
.coast-nav nav a, .coast-nav nav a:hover { color: #243b4a; }
.coast-nav nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.scene-motion {
  justify-self: end; min-height: 40px; padding: 5px 12px;
  border: 1px solid #38495a52; border-radius: 9px;
  background: #ffffff75; color: #203645; font-size: 13px;
}
.coast {
  --px: 0px; --py: 0px;
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: center;
  min-height: clamp(485px, 82svh, 800px);
  background: #b2d9ef;
}
.coast-view { position: absolute; inset: 0; container-type: size; overflow: hidden; pointer-events: none; }
.coast-board {
  width: max(100cqw, 177.778cqh); aspect-ratio: 16 / 9;
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
}
.coast-world, .coast-scenery, .sky-type { position: absolute; inset: 0; }
.coast-world { container-type: inline-size; }
.coast-scenery { background: url("./assets/coast.webp") center / 100% 100%; }
.sky-type {
  mask-image: linear-gradient(#000,#000),url("./assets/coast-bmw.webp");
  mask-size: 100% 100%, 51.40625% 48.88889%; mask-repeat: no-repeat;
  mask-position: center, left 78.80435%; mask-composite: exclude;
}
.sky-type span {
  position: absolute; left: 3%; top: 25%; color: #5888a9; opacity: .48;
  font: 800 23cqw/.86 Print, sans-serif; letter-spacing: -.045em;
}
.coast-car { position: absolute; left: 0; top: 40.27778%; width: 51.40625%; aspect-ratio: 987 / 528; }
.coast-person { position: absolute; left: 44%; bottom: 4%; transform: translateX(-50%);
  height: min(75cqh, calc(96cqh - 110px)); aspect-ratio: 267 / 781; }
.coast-person img { width: 100%; height: 100%; display: block; }
.sakura-branch { position: absolute; top: 0; left: -2%; width: clamp(220px, 39%, 670px); height: auto; transform-origin: 0 0; transform: translate(calc(var(--px) * 2.2), var(--py)); }
.coast-petals { position: absolute; inset: 0; overflow: hidden; }
.coast-petals i {
  position: absolute; left: var(--start); top: -3%; height: clamp(9px, 1vw, 15px); width: clamp(16px, 1.6vw, 26px); border-radius: 80% 15% 80% 22%;
  background: #fbc6d4; box-shadow: inset -2px -1px 1px #d68da5;
  animation: petal-fall var(--duration) linear var(--delay) infinite;
}
@keyframes petal-fall {
  0% { opacity: 0; transform: translate(0, 0) rotate(18deg); }
  12%, 85% { opacity: .85; }
  52% { transform: translate(10vw, 48cqh) rotate(157deg) scaleX(.5); }
  100% { opacity: 0; transform: translate(24vw, 102cqh) rotate(325deg); }
}
@media (prefers-reduced-motion: reduce) {
  .coast * { animation: none !important; }
  .coast-petals, .scene-motion { display: none; }
}
.coast[data-still] *, .coast[data-still] *::after { animation-play-state: paused !important; }
.coast-nav { backdrop-filter: blur(15px); background: #eaf4fbc9; }
.bmw-lamp {
  position: absolute; width: 4.7%; height: 8.8%; border-radius: 50%;
  transform: translate(-50%,-50%); opacity: var(--lit,0);
  background: radial-gradient(ellipse,#fff 30%,#fffbe2 58%,#ffedb599 78%,transparent);
  box-shadow: 0 0 7px 3px #ffffe6,0 0 20px 9px #ffe995ce,0 0 42px 14px #ffd38077;
  transition: opacity .12s; pointer-events: none;
}
.orbit-case {
  position: relative; justify-self: end; margin: 65px 2vw 0 0; width: 47vw;
  height: min(69svh, 51vw); min-height: 320px; max-height: 720px;
  isolation: isolate; touch-action: pan-y pinch-zoom; user-select: none; cursor: grab;
}
.orbit-case::before {
  content: ""; position: absolute; inset: 10% 1% 10%;
  background: linear-gradient(135deg,#ffffff55,#f2f8fb26 55%,#ffffff42);
  border: 1px solid #ffffff9c; border-radius: clamp(22px,2.7vw,45px);
  backdrop-filter: blur(8px); box-shadow: inset 0 1px 1px #fffd,0 12px 32px #314b6312;
}
.orbit-case::after {
  content: ""; position: absolute; left: 14%; right: 14%; bottom: 12%; height: 8%; z-index: -1;
  background: radial-gradient(ellipse,#47647d45,transparent 70%); filter: blur(6px);
}
.orbit, .orbit-rotor { position: absolute; inset: 0; }
.orbit-case { z-index: 1; }
.scene-theme {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid #20384a52; background: #f8fcffdf; color: #203645;
  font: 25px/1 Arial,sans-serif; cursor: pointer;
}
.scene-theme:hover { filter: brightness(1.13); }
.scene-tools { justify-self: end; display: flex; align-items: center; gap: 8px; }
.scene-theme { font-size: 20px; }

.orbit-card {
  position: absolute; top: 50%; left: 50%; width: min(45%, 37svh); aspect-ratio: 4 / 4.95;
  background: var(--wood-side); border: 0; border-radius: 1px; padding: 0;
  transform: translate(-50%,-50%); --ratio: 512/1300; --paper: #e6deca; --poster-ink:#20231d; cursor: grab; color: var(--poster-ink); text-align: left;
  box-shadow: 3px 4px 0 var(--wood-side), 5px 7px 0 var(--wood-side), 5px 13px 16px #1b252e38;
  will-change: transform; -webkit-user-select: none;
}
.orbit-card:nth-child(even) {
  --wood-hi: #f3f0e6; --wood-mid: #ded9cd; --wood-dark: #b1aea6;
  --wood-side: #8f8c85; --trim: #c7c4b9; --lip: #d4d0c5; --edge: #97958c;
}
.orbit-case[data-dragging], .orbit-case[data-dragging] * { cursor: grabbing; }
.orbit-card:focus-visible { outline: 3px solid #285476; outline-offset: 6px; }
.orbit-card .wood, .orbit-card .recess, .orbit-card .art { display: block; }
.orbit-card .reflection { --light: 38%; }
.poster-car {
  position: absolute; height: 63%; aspect-ratio: var(--ratio); left: 52%; top: 52%;
  transform: translate(-50%, -50%) rotate(16deg); filter: drop-shadow(2px 4px 2px #342a1c66);
}
.poster-car img, .door-panel, .door-interior { position: absolute; inset: 0; width: 100%; height: 100%; }
.door-panel, .door-interior { clip-path: var(--door); }
.door-panel { background: var(--car-image) center / 100% 100%; transform-origin: var(--hinge); transition: transform .56s cubic-bezier(.23,.7,.24,1); }
.door-interior { background: linear-gradient(95deg,#171b1e 42%,#474c50 47%,#282d32 52%,#10161c 65%); opacity: 0; transition: opacity .24s; }
.orbit-card[data-open] .door-panel { transform: rotate(42deg); }
.orbit-card[data-open] .door-interior { opacity: 1; }
.model-lamp { position: absolute; width: 10%; height: 1.3%; border-radius: 50%; transform: translate(-50%,-50%) rotate(var(--angle)); }
.model-lamp.head { background: #fff9cf; box-shadow: 0 0 3px 1px #fff2a8,0 0 8px #fff4c5c9; }
.model-lamp.brake { background: #ff3c27; box-shadow: 0 0 4px 1px #ff341a; animation: brake-glow 3.8s ease-in-out infinite alternate; }
@keyframes brake-glow { from { opacity: .38; } to { opacity: .98; } }
@media(max-width: 720px) {
  .coast { display: flex; flex-direction: column; min-height: 0; background: #f4eee6; }
  .coast-view { position: relative; width: 100%; height: clamp(340px,52svh,520px); }
  .coast-board { left: calc((100cqw - max(100cqw,177.778cqh)) * .34); transform: none; }
  .coast-nav { height: 50px; }
  .orbit-case { width: min(96%,560px); height: clamp(250px,36svh,385px); min-height: 0; margin: -16px auto 12px; }
  .orbit-card { width: min(44%,24svh); }
  .coast-person { left: 60%; height: min(74cqh, calc(96cqh - 80px)); }
  .orbit-case::before { inset: 1% 1% 3%; }
}
@media(prefers-reduced-motion:reduce) {
  .door-panel,.door-interior,.bmw-lamp { transition: none; }
}

.night-view { position: absolute; inset: 0 12% 0 0; overflow: hidden; pointer-events: none; container-type: size;
  mask-image: linear-gradient(90deg,#000 0 75%,transparent); }
.night-board {
  position: absolute; width: max(104cqw,184cqh); aspect-ratio: 1672/941;
  left: calc((100cqw - max(104cqw,184cqh)) * .38); top: 50%;
  transform: translate(var(--far-x,0px),calc(-50% + var(--far-y,0px)));
  background: url("./assets/night-street.webp") center / 100% 100%;
  transition: transform .45s ease-out;
}
.night-board::after {
  content: ""; position:absolute; inset:0; background:inherit;
  clip-path: polygon(2.7% 48.2%,30% 49%,30% 64%,2.7% 64%);
  filter: brightness(1.52) saturate(1.18); animation: shop-light 7.3s linear infinite;
}
@keyframes shop-light {
  0%,57%,65%,100% { opacity:.18; }
  59%,63% { opacity:.54; }
  61% { opacity:.25; }
  85% { opacity:.38; }
}
.night-mount {
  position:absolute; left:1%; bottom:6%; width:min(65%,105cqh); aspect-ratio:2;
  transform: translate(var(--near-x,0px),var(--near-y,0px)); transition:transform .4s ease-out;
}
.night-mount::before {
  content:""; position:absolute; left:4%; right:3%; bottom:6%; height:16%; border-radius:50%;
  background:#100e0cd9; filter:blur(7px);
}
.night-silvia, .night-lamps { position:absolute; inset:0; width:100%; height:100%; }
.night-rider {
  position:absolute; width:31.5%; height:auto; left:45%; top:-13%;
  filter:drop-shadow(1px 2px 1px #2c1b1355);
}
.night-lamps .bmw-lamp { width:2%; height:4.5%; }
.night-flock { position:absolute; left:41%; top:14%; width:18%; height:17%; }
.night-flock i {
  position:absolute; left:var(--bx,12%); top:var(--by,34%); width:var(--span,11%); aspect-ratio:2.8;
  animation: bat-flight var(--flight,9s) ease-in-out var(--delay,-3s) infinite alternate;
}
.night-flock i:nth-child(2) { --bx:37%; --by:58%; --span:8%; --delay:-5s; --flight:8s; }
.night-flock i:nth-child(3) { --bx:65%; --by:20%; --span:12%; --delay:-1s; --flight:10s; }
.night-flock i:nth-child(4) { --bx:77%; --by:72%; --span:7%; --delay:-4s; --flight:7s; }
.night-flock i::before,.night-flock i::after {
  position:absolute; content:""; inset:0 48% 0 0; background:#191718; transform-origin: right 68%;
  clip-path:polygon(0 8%,34% 17%,66% 38%,88% 54%,92% 28%,100% 47%,100% 100%,79% 76%,60% 71%,52% 83%,44% 63%,29% 54%,23% 59%,19% 37%);
  animation: flap .45s ease-in-out var(--delay,-3s) infinite alternate;
}
.night-flock i::after { inset:0 0 0 48%; scale:-1 1; transform-origin:center; }
@keyframes flap { from{transform:scaleY(.42)} to{transform:scaleY(1)} }
@keyframes bat-flight { from{transform:translate(-110%,50%) rotate(-12deg)} to{transform:translate(150%,-90%) rotate(8deg)} }
[data-theme="dark"] .coast-view, [data-theme="light"] .night-view { display: none; }
[data-theme="dark"] .coast { background: radial-gradient(ellipse at 78% 41%,#342c26,#1c1a19 46%,#121312 87%); }
[data-theme="dark"] .coast-nav { color: #f4eee3; background: #191918b3; border-color: #f6d6af32;
  box-shadow: inset 0 1px #fff2,0 5px 25px #0002; }
[data-theme="dark"] .coast-nav .brand img { filter: none; }
[data-theme="dark"] .coast-nav nav a { color: #f0e6d9; }
[data-theme="dark"] :is(.scene-motion,.scene-theme) {
  background: #292622e8; color: #ffefd9; border-color: #e5c9a14d;
}
[data-theme="dark"] .orbit-case::before {
  background: linear-gradient(130deg,#ffdaaf0e,#29272448 60%,#edd5b60a);
  border-color: #e3c3a139; box-shadow: inset 0 1px #fff2,0 14px 48px #0002;
}
@media(min-width: 1000px) { [data-theme="dark"] .orbit-case { width: 45vw; } }
[data-theme="light"] .study { color:#213440; background:#f2efe8; }
[data-theme="light"] .study-lead p { color:#49565f; }
[data-theme="light"] .material-copy { background:#e2ded3; color:#253540; }
[data-theme="light"] .material-copy p,[data-theme="light"] .layer-options button { color:#39444a; }
[data-theme="light"] .layer-options button[aria-pressed=true] { background:#c2cace; }
[data-theme="light"] footer { background:#e3dfd6; color:#24343c; }
[data-theme="light"] footer>span { color:#4b5558; }
@media(max-width:720px) {
  .night-view { position: relative; inset:auto; width: 100%; height:clamp(255px,46svh,420px);
    mask-image: linear-gradient(#000 0 87%,transparent); }
  .night-board { left:calc((100cqw - max(104cqw,184cqh)) * .35); }
  .night-mount { left:1.5%; width:96%; bottom:3%; }
  [data-theme="dark"] .orbit-case { height:clamp(205px,32svh,310px); }
  .scene-tools { gap:4px; }
  .scene-theme { width:36px;height:36px; }
  .scene-motion { padding:4px 8px; font-size:12px; }
}

@media(prefers-reduced-motion:reduce) { .night-view *, .night-view *::before, .night-view *::after { animation:none; transition:none; } }
.coast[data-still] .night-flock i::before { animation-play-state:paused; }
.orbit-case::before,.orbit-case::after { display:none; }
.night-rider { aspect-ratio:2/3; }
.night-rider img { display:block; position:absolute; inset:0; width:100%; height:100%; }
.rider-body { mask-image:linear-gradient(transparent 0 19%,#000 23%); }
.rider-head { clip-path:polygon(25% 0,70% 0,75% 15%,63% 21%,55% 23%,40% 21%,24% 18%); transform-origin:49% 22%; transition:transform .3s ease-out; }
.night-lamps { opacity:var(--lamp-power,1); transition:opacity .12s linear; }
.night-lamps .bmw-lamp { opacity:1; }
.night-wheels {
  mask-image:radial-gradient(ellipse 7.3% 21% at 9.3% 67%,#000 96%,transparent 100%),
    radial-gradient(ellipse 8.4% 23% at 40.5% 70%,#000 96%,transparent 100%);
}
.night-chassis {
  mask-image:radial-gradient(ellipse 7.2% 20% at 9.3% 67%,transparent 93%,#000 100%),
    radial-gradient(ellipse 8.2% 22% at 40.5% 70%,transparent 93%,#000 100%);
  mask-composite:intersect; animation:suspension 4.8s ease-in-out infinite;
}
@keyframes suspension { 0%,100% { transform:translateY(0); } 50% { transform:translateY(2px); } }
[data-theme="dark"] .coast { min-height: min(800px,92svh); }
@media(max-width:720px) {
  [data-theme="dark"] .coast { display:grid; min-height:92svh; }
  .night-view { position:absolute; inset:0; width:100%; height:100%; mask-image:none; }
  .night-board { width:max(100cqw,150cqh); left:calc((100cqw - max(100cqw,150cqh)) * .31); }
  .night-mount { width:78%; left:-8%; bottom:28%; }
  [data-theme="dark"] .orbit-case { position:absolute; right:0; top:36%; width:47%; height:37%; min-height:0; margin:0; }
  .orbit-card { width:65%; }
}
@media(prefers-reduced-motion:reduce) { .night-chassis{animation:none} .rider-head{transition:none} }
/* Foreground composition, shared by the illustration and shop. */
.night-view { z-index:2; mask-image:linear-gradient(#000 0 76%,transparent 99%); }
.night-board { pointer-events:none; }
.orbit-case { z-index:1; }
.night-petals { position:absolute; inset:0; z-index:3; overflow:hidden; pointer-events:none; }
.night-petals i { position:absolute; left:var(--start); top:-5%; width:15px; height:9px;
  background:linear-gradient(120deg,#f7b2af,#b95955); border-radius:80% 15% 70% 20%;
  box-shadow:inset -1px -1px #953c3d; animation:night-fall var(--duration) linear var(--delay) infinite; }
.night-petals i:nth-child(3n) { width:19px; height:14px; background:#d67c40; clip-path:polygon(50% 0,60% 30%,85% 15%,72% 45%,100% 50%,70% 65%,80% 90%,52% 77%,30% 100%,35% 68%,0 60%,30% 44%,15% 20%,42% 32%); }
@keyframes night-fall { 0%{opacity:0;transform:translate(0,0) rotate(0)} 9%,80%{opacity:.85} 50%{transform:translate(24px,36vh) rotate(160deg) scaleX(.6)} 100%{opacity:0;transform:translate(-65px,75vh) rotate(300deg)} }
.exhaust { position:absolute; left:0; bottom:17%; width:16%; height:27%; z-index:-1; }
.exhaust i { position:absolute; bottom:0; right:50%; width:48%; aspect-ratio:1;
  background:radial-gradient(ellipse,#cbc2b15e,transparent 68%); filter:blur(4px);
  animation:exhaust-drift 4.5s ease-out infinite; }
.exhaust i:nth-child(2){animation-delay:-1.1s}.exhaust i:nth-child(3){animation-delay:-2.2s}.exhaust i:nth-child(4){animation-delay:-3.3s}
@keyframes exhaust-drift { from{opacity:0;transform:translate(0,0) scale(.3)} 20%{opacity:.7} to{opacity:0;transform:translate(-90px,-55px) scale(2.6)} }
.cart-toggle { justify-self:end; border:1px solid #c3ad823b; border-radius:24px; background:#272420b3;color:#f8ecda;padding:10px 14px; font:inherit; font-size:13px; min-height:42px; cursor:pointer; }
.cart-toggle span { display:inline-grid;place-items:center;background:#dec49a;color:#25221e;width:20px;height:20px;margin-left:6px;border-radius:50%;font-size:11px; }
@media(max-width:720px) {
  [data-theme="dark"] .coast { min-height:0; height:clamp(410px,68svh,580px); }
  .night-board { width:max(130cqw,190cqh); left:calc((100cqw - max(130cqw,190cqh)) * .26); top:39%; }
  .night-mount { width:119%;left:-36%;bottom:6%; }
  .night-rider { width:33%; }
  [data-theme="dark"] .orbit-case { right:0;top:15%;width:45%;height:55%; }
  .orbit-card { width:69%; }
  .night-view { mask-image:linear-gradient(#000 0 80%,transparent 100%); }
  .night-petals i { width:12px;height:8px; }
}
@media(prefers-reduced-motion:reduce) { .night-petals i,.exhaust i { animation:none; } .exhaust{display:none} }
.night-view { z-index:0; }
.night-mount { z-index:2; pointer-events:none; width:min(58%,105vh); }
@media(max-width:720px) { .night-mount { width:119%; } }
@media(prefers-reduced-motion:reduce) { .night-mount *, .night-mount *::before,.night-mount *::after{animation:none;transition:none} }
.product-visual>img{max-height:80%;max-width:62%;height:70%;transform:rotate(18deg)}
.exhaust {left:23%;bottom:7%;width:21%;height:32%}
.exhaust i {background:radial-gradient(ellipse,#d5cfc48a,transparent 68%);filter:blur(3px)}
@keyframes exhaust-drift {from{opacity:0;transform:translate(-35px,0) scale(.3)}20%{opacity:.65}to{opacity:0;transform:translate(40px,-45px) scale(3.3)}}