:root {
--cream: #f2dfb6;
--muted: rgba(242, 223, 182, .68);
--amber: #ff9a43;
--red: #ff291c;
--blue: #73bfff;
--black: #020100;
--hub-image-aspect: 1.7778958565;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #000; color: var(--cream); }
body { font-family: Georgia, 'Times New Roman', serif; }
button { font: inherit; color: inherit; }
.noscript { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: #000; color: var(--cream); padding: 24px; }
.app { position: fixed; inset: 0; overflow: hidden; background: #000; isolation: isolate; }
/* ------------------- BOOT ------------------- */
.boot { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: #000; transition: opacity 1050ms ease, visibility 1050ms ease; overflow: hidden; }
.boot-black {
position: absolute; inset: 0;
background: radial-gradient(circle at 50% 44%, rgba(20,7,3,.22), rgba(0,0,0,.94) 42%, rgba(0,0,0,1) 73%);
}
.boot-world-glimpse {
position: absolute; inset: 0; opacity: 0;
background: center / cover no-repeat url('assets/img/intro-hub-transition.webp');
filter: blur(10px) brightness(.25) saturate(1.06);
transform: scale(1.12);
mix-blend-mode: normal;
}
.app.is-booting .boot-world-glimpse { animation: worldWake 7600ms cubic-bezier(.18,.82,.22,1) forwards; }
.boot-red-air {
position: absolute; inset: -16%; opacity: 0;
background:
radial-gradient(circle at 50% 36%, rgba(255, 38, 22, .40), transparent 13%),
radial-gradient(circle at 50% 44%, rgba(255, 122, 44, .16), transparent 27%),
radial-gradient(circle at 50% 56%, rgba(255, 62, 30, .18), transparent 38%);
filter: blur(20px);
mix-blend-mode: screen;
}
.app.is-booting .boot-red-air { animation: redAir 6400ms ease forwards; }
.master-sign {
position: fixed;
z-index: 84;
left: 50%;
top: 44%;
width: min(1180px, 92vw);
aspect-ratio: 1200 / 260;
transform: translate(-50%, -50%) scale(1.18);
opacity: 0;
pointer-events: none;
filter: saturate(1.16);
transform-origin: center center;
}
.master-sign__svg { width: 100%; height: 100%; overflow: visible; }
.sign-text {
font-family: Georgia, 'Times New Roman', serif;
font-weight: 700;
letter-spacing: .02em;
text-transform: uppercase;
}
.sign-text--outer {
fill: rgba(255,138,93,.22);
stroke: rgba(255,170,118,.58);
stroke-width: 10;
paint-order: stroke fill;
}
.sign-text--tube {
fill: rgba(255,205,176,.90);
stroke: rgba(255,162,114,.92);
stroke-width: 3;
filter: url(#redNeonGlow);
}
.sign-text--hot {
fill: rgba(255,245,227,.96);
stroke: rgba(255,195,160,.30);
stroke-width: 1.3;
filter: url(#redNeonGlow);
}
.app.is-booting .master-sign { animation: codedSignBoot 7600ms cubic-bezier(.18,.82,.22,1) forwards; }
.app.is-live .boot { opacity: 0; visibility: hidden; pointer-events: none; }
.press-start {
position: relative;
z-index: 86;
margin-top: min(54vh, 420px);
padding: 14px 16px 13px;
border: 1px solid rgba(255, 148, 76, .35);
background: rgba(7,3,1,.62);
color: rgba(242,223,182,.95);
display: flex;
flex-direction: column;
gap: 4px;
align-items: center;
justify-content: center;
min-width: 174px;
cursor: pointer;
text-transform: uppercase;
letter-spacing: .18em;
backdrop-filter: blur(8px);
transition: opacity 300ms ease, transform 300ms ease, border-color 220ms ease;
}
.press-start span { font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.press-start small { font: 400 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: rgba(242,223,182,.68); }
.press-start:hover { border-color: rgba(255, 188, 108, .70); transform: translateY(-2px); }
.app.is-booting .press-start, .app.is-live .press-start { opacity: 0; pointer-events: none; }
@keyframes codedSignBoot {
0%, 8% {
opacity: 0;
top: 44%;
width: min(1180px, 92vw);
transform: translate(-50%, -50%) scale(1.22);
filter: saturate(1.18) blur(.4px);
}
9%, 12% { opacity: .92; }
13%, 18% { opacity: .08; }
19%, 23% { opacity: .82; }
24%, 29% { opacity: .20; }
30%, 40% {
opacity: 1;
top: 43%;
width: min(1120px, 88vw);
transform: translate(-50%, -50%) scale(1.08);
filter: saturate(1.2) blur(0);
}
41%, 50% { opacity: .96; }
51%, 62% {
opacity: .98;
top: 31%;
width: min(1040px, 78vw);
transform: translate(-50%, -50%) scale(1.00);
}
63%, 74% {
opacity: .96;
top: 25.4%;
width: min(930px, 65vw);
transform: translate(-50%, -50%) scale(.96);
}
75%, 88% {
opacity: .74;
top: 22.1%;
width: min(860px, 61vw);
transform: translate(-50%, -50%) scale(.92);
}
89%, 100% {
opacity: 0;
top: 20.8%;
width: min(820px, 58vw);
transform: translate(-50%, -50%) scale(.90);
}
}
@keyframes worldWake {
0%, 22% { opacity: 0; transform: scale(1.12); filter: blur(12px) brightness(.16); }
33% { opacity: .18; transform: scale(1.09); filter: blur(9px) brightness(.26); }
50% { opacity: .34; transform: scale(1.06); filter: blur(8px) brightness(.36); }
72% { opacity: .56; transform: scale(1.03); filter: blur(4px) brightness(.62); }
100% { opacity: .72; transform: scale(1); filter: blur(2px) brightness(.86); }
}
@keyframes redAir {
0%, 15% { opacity: 0; }
22% { opacity: .36; }
38% { opacity: .68; }
60% { opacity: .44; }
100% { opacity: .16; }
}
/* ------------------- HUB ------------------- */
.hub { position: fixed; inset: 0; z-index: 10; opacity: 0; transform: scale(1.028); filter: blur(6px) brightness(.46); transition: opacity 1900ms ease, transform 2200ms cubic-bezier(.18,.85,.15,1), filter 2200ms ease; }
.app.is-revealing .hub, .app.is-live .hub { opacity: 1; transform: scale(1); filter: blur(0) brightness(1); }
.app[data-mode="ride"] .hub { opacity: 0; pointer-events: none; filter: blur(14px) brightness(.42); transform: scale(1.06); transition-duration: 520ms; }
.hub-world { position: absolute; inset: 0; overflow: hidden; background: #050201; }
.hub-frame { position: absolute; left: 50%; top: 50%; width: max(100vw, calc(100vh * var(--hub-image-aspect))); aspect-ratio: 1672 / 941; transform: translate(-50%, -50%); overflow: visible; }
.hub-base { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; object-position: 50% 50%; transform: scale(1.002); }
.hub-light { position: absolute; z-index: 4; pointer-events: none; transform: translate(-50%, -50%); opacity: var(--idle, .18); mix-blend-mode: screen; filter: blur(var(--blur, 18px)) brightness(1); transition: opacity 250ms ease, filter 250ms ease, transform 400ms cubic-bezier(.16,.82,.24,1); animation: slowPulse var(--pulse, 5400ms) ease-in-out infinite alternate; }
.hub-light::before, .hub-light::after { content:""; position:absolute; inset:0; border-radius: 999px; background: var(--bg); }
.hub-light::after { filter: blur(24px); opacity: .66; }
.hub-light--heartland { left:50%; top:18.3%; width:42%; height:12%; --idle:.44; --blur:13px; --pulse:2650ms; --bg:radial-gradient(ellipse at center, rgba(255,45,25,.95), rgba(255,74,26,.38) 31%, rgba(255,42,18,.18) 52%, transparent 78%); }
.hub-light--heartland-bulbs { left:50%; top:14.4%; width:53%; height:13%; --idle:.24; --blur:10px; --pulse:1900ms; --bg:radial-gradient(circle at 3% 49%, rgba(255,215,142,.82), transparent 6%), radial-gradient(circle at 17% 44%, rgba(255,171,78,.72), transparent 5%), radial-gradient(circle at 34% 47%, rgba(255,215,142,.74), transparent 5%), radial-gradient(circle at 50% 44%, rgba(255,174,75,.76), transparent 5%), radial-gradient(circle at 65% 48%, rgba(255,220,148,.76), transparent 5%), radial-gradient(circle at 82% 46%, rgba(255,164,79,.70), transparent 5%), radial-gradient(circle at 96% 48%, rgba(255,220,148,.75), transparent 6%); }
.hub-light--donut { left:13%; top:39%; width:25%; height:30%; --idle:.22; --blur:18px; --pulse:4300ms; --bg:radial-gradient(ellipse at 45% 38%, rgba(255,189,106,.88), rgba(255,128,48,.28) 42%, transparent 75%); }
.hub-light--donut-bulbs { left:12%; top:29%; width:27%; height:14%; --idle:.24; --blur:11px; --pulse:2100ms; --bg:radial-gradient(circle at 18% 50%, rgba(255,216,148,.88), transparent 9%), radial-gradient(circle at 38% 48%, rgba(255,164,84,.76), transparent 9%), radial-gradient(circle at 58% 51%, rgba(255,225,157,.78), transparent 8%), radial-gradient(circle at 78% 49%, rgba(255,130,61,.72), transparent 9%); }
.hub-light--list { left:84%; top:40%; width:24%; height:33%; --idle:.24; --blur:18px; --pulse:3700ms; --bg:radial-gradient(ellipse at 55% 38%, rgba(255,138,54,.84), rgba(255,48,22,.28) 41%, transparent 76%); }
.hub-light--list-bulbs { left:84%; top:32%; width:24%; height:16%; --idle:.24; --blur:10px; --pulse:2300ms; --bg:radial-gradient(circle at 12% 51%, rgba(255,225,147,.75), transparent 9%), radial-gradient(circle at 28% 46%, rgba(255,167,80,.72), transparent 8%), radial-gradient(circle at 47% 50%, rgba(255,228,153,.80), transparent 8%), radial-gradient(circle at 68% 50%, rgba(255,139,62,.70), transparent 9%), radial-gradient(circle at 86% 49%, rgba(255,220,146,.76), transparent 8%); }
.hub-light--love { left:58%; top:54%; width:20%; height:28%; --idle:.30; --blur:15px; --pulse:1900ms; --bg:radial-gradient(ellipse at 55% 57%, rgba(255,45,49,.86), rgba(255,91,126,.30) 36%, transparent 73%); }
.hub-light--mountains { left:31%; top:28%; width:18%; height:22%; --idle:.10; --blur:18px; --pulse:6100ms; --bg:radial-gradient(ellipse at center, rgba(255,164,82,.45), rgba(255,130,62,.14) 43%, transparent 76%); }
.hub-light--getaway { left:41%; top:52%; width:19%; height:21%; --idle:.14; --blur:15px; --pulse:5700ms; --bg:radial-gradient(ellipse at center, rgba(101,189,255,.58), rgba(41,115,199,.16) 43%, transparent 75%); }
.hub-light--butterflies { left:82%; top:24%; width:23%; height:26%; --idle:.12; --blur:16px; --pulse:5800ms; --bg:radial-gradient(ellipse at center, rgba(255,182,111,.50), rgba(255,105,59,.13) 43%, transparent 78%); }
.hub-light--choose { left:69%; top:47%; width:15%; height:23%; --idle:.12; --blur:14px; --pulse:6400ms; --bg:radial-gradient(ellipse at center, rgba(214,255,187,.34), rgba(255,189,93,.14) 42%, transparent 77%); }
.hub-light--game { left:89%; top:77%; width:18%; height:24%; --idle:.18; --blur:12px; --pulse:2400ms; --bg:radial-gradient(ellipse at center, rgba(112,190,255,.60), rgba(131,112,255,.18) 40%, transparent 76%); }
.hub-light--map { left:34%; top:83%; width:49%; height:25%; --idle:.18; --blur:14px; --pulse:5200ms; --bg:radial-gradient(ellipse at center, rgba(255,184,93,.62), rgba(255,118,43,.14) 42%, transparent 78%); }
@keyframes slowPulse { from { opacity: calc(var(--idle) * .68); } to { opacity: var(--idle); } }
.app[data-hover="heartland"] .hub-light--heartland, .app[data-hover="heartland"] .hub-light--heartland-bulbs,
.app[data-hover="donut"] .hub-light--donut, .app[data-hover="donut"] .hub-light--donut-bulbs,
.app[data-hover="list"] .hub-light--list, .app[data-hover="list"] .hub-light--list-bulbs,
.app[data-hover="love"] .hub-light--love,
.app[data-hover="mountains"] .hub-light--mountains,
.app[data-hover="getaway"] .hub-light--getaway,
.app[data-hover="butterflies"] .hub-light--butterflies,
.app[data-hover="choose"] .hub-light--choose,
.app[data-hover="game"] .hub-light--game,
.app[data-hover="map"] .hub-light--map,
.app[data-hover="radio"] .hub-light--map { opacity: .98; filter: blur(calc(var(--blur, 18px) * .82)) brightness(1.42); transform: translate(-50%, -50%) scale(1.11); }
.app[data-hover="love"] .hub-light--love { opacity: 1; filter: blur(12px) brightness(1.58); }
/* individual glowing bulbs based on user markup */
.practicals { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.practical {
position: absolute;
width: var(--size, 10px);
height: var(--size, 10px);
left: var(--x);
top: var(--y);
border-radius: 50%;
transform: translate(-50%, -50%);
background: radial-gradient(circle at center, rgba(255,248,222,.95) 0 25%, rgba(255,190,87,.92) 45%, rgba(255,157,55,.55) 65%, rgba(255,144,44,0) 100%);
box-shadow: 0 0 12px rgba(255,180,83,.72), 0 0 24px rgba(255,146,51,.48), 0 0 48px rgba(255,132,44,.24);
opacity: .72;
animation: practicalFlicker var(--dur, 3.6s) steps(3, end) infinite alternate;
}
.practical::after {
content: "";
position: absolute;
inset: -10px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,166,68,.36), transparent 68%);
filter: blur(8px);
}
.practical--blue {
background: radial-gradient(circle at center, rgba(214,244,255,.95) 0 28%, rgba(104,190,255,.92) 45%, rgba(69,141,255,.55) 65%, rgba(69,141,255,0) 100%);
box-shadow: 0 0 12px rgba(125,201,255,.85), 0 0 26px rgba(66,143,255,.56), 0 0 50px rgba(58,119,255,.28);
}
@keyframes practicalFlicker {
0%, 100% { opacity: .58; transform: translate(-50%, -50%) scale(.96); }
18% { opacity: .86; }
32% { opacity: .68; }
51% { opacity: .95; transform: translate(-50%, -50%) scale(1.08); }
73% { opacity: .74; }
}
.practical--1 { --x: 4.1%; --y: 6.2%; --size: 12px; --dur: 4.8s; }
.practical--2 { --x: 15.7%; --y: 18.0%; --size: 11px; --dur: 4.2s; }
.practical--3 { --x: 33.1%; --y: 12.7%; --size: 12px; --dur: 4.5s; }
.practical--4 { --x: 39.4%; --y: 28.4%; --size: 11px; --dur: 3.1s; }
.practical--5 { --x: 73.8%; --y: 16.8%; --size: 11px; --dur: 3.8s; }
.practical--6 { --x: 79.0%; --y: 25.9%; --size: 11px; --dur: 3.7s; }
.practical--7 { --x: 94.9%; --y: 25.4%; --size: 12px; --dur: 4.0s; }
.practical--8 { --x: 5.7%; --y: 42.9%; --size: 12px; --dur: 3.0s; }
.practical--9 { --x: 10.8%; --y: 46.3%; --size: 12px; --dur: 3.4s; }
.practical--10 { --x: 14.8%; --y: 46.4%; --size: 11px; --dur: 3.9s; }
.practical--11 { --x: 17.2%; --y: 46.9%; --size: 12px; --dur: 3.3s; }
.practical--12 { --x: 12.4%; --y: 54.7%; --size: 10px; --dur: 4.2s; }
.practical--13 { --x: 15.9%; --y: 54.5%; --size: 10px; --dur: 4.4s; }
.practical--14 { --x: 22.0%; --y: 58.0%; --size: 11px; --dur: 4.6s; }
.practical--15 { --x: 40.9%; --y: 57.5%; --size: 12px; --dur: 5.0s; }
.practical--16 { --x: 51.5%; --y: 58.4%; --size: 10px; --dur: 3.3s; }
.practical--17 { --x: 52.9%; --y: 53.1%; --size: 10px; --dur: 3.5s; }
.practical--18 { --x: 54.0%; --y: 55.0%; --size: 10px; --dur: 3.9s; }
.practical--19 { --x: 58.0%; --y: 44.0%; --size: 11px; --dur: 2.9s; }
.practical--20 { --x: 69.5%; --y: 50.4%; --size: 11px; --dur: 3.2s; }
.practical--21 { --x: 71.4%; --y: 50.2%; --size: 11px; --dur: 3.9s; }
.practical--22 { --x: 73.3%; --y: 50.3%; --size: 11px; --dur: 3.1s; }
.practical--23 { --x: 81.5%; --y: 30.3%; --size: 12px; --dur: 4.5s; }
.practical--24 { --x: 79.2%; --y: 39.8%; --size: 11px; --dur: 4.2s; }
.practical--25 { --x: 82.7%; --y: 40.9%; --size: 11px; --dur: 3.8s; }
.practical--26 { --x: 84.7%; --y: 42.0%; --size: 11px; --dur: 3.5s; }
.practical--27 { --x: 89.0%; --y: 49.8%; --size: 12px; --dur: 3.4s; }
.practical--28 { --x: 91.0%; --y: 54.3%; --size: 12px; --dur: 3.7s; }
.practical--29 { --x: 4.8%; --y: 78.2%; --size: 20px; --dur: 5.2s; }
.practical--30 { --x: 53.0%; --y: 89.3%; --size: 18px; --dur: 4.1s; opacity: .20; box-shadow: none; background: radial-gradient(circle, rgba(255,210,98,.20), transparent 75%); }
.practical--31 { --x: 41.1%; --y: 52.1%; --size: 13px; --dur: 2.8s; }
/* bbq smoke and tv life */
.bbq-smoke {
position: absolute; inset: 0; z-index: 8; pointer-events: none;
}
.smoke {
position: absolute;
left: var(--x);
bottom: var(--y);
width: var(--w);
height: var(--h);
transform: translate(-50%, 0) scale(.85);
background:
radial-gradient(ellipse at center, rgba(232,235,240,.16) 0 16%, rgba(206,210,218,.12) 26%, rgba(176,180,186,.08) 45%, rgba(145,150,158,0) 72%);
filter: blur(18px);
opacity: 0;
animation: smokeRise var(--smokeDur, 6.4s) ease-in-out infinite;
}
.smoke--1 { --x: 86.6%; --y: 33.2%; --w: 80px; --h: 140px; --smokeDur: 6.2s; animation-delay: 0s; }
.smoke--2 { --x: 88.2%; --y: 32.8%; --w: 110px; --h: 180px; --smokeDur: 7.0s; animation-delay: 1.5s; }
.smoke--3 { --x: 90.0%; --y: 34.0%; --w: 95px; --h: 160px; --smokeDur: 6.8s; animation-delay: .8s; }
.smoke--4 { --x: 83.9%; --y: 31.5%; --w: 76px; --h: 135px; --smokeDur: 5.8s; animation-delay: 2.4s; }
@keyframes smokeRise {
0% { opacity: 0; transform: translate(-50%, 18px) scale(.78); }
18% { opacity: .22; }
44% { opacity: .30; }
70% { opacity: .14; }
100% { opacity: 0; transform: translate(-50%, -105px) scale(1.24); }
}
.tv-flicker {
position: absolute; z-index: 8; pointer-events: none;
left: 90.8%; top: 77.4%; width: 8.1%; height: 11.2%;
transform: translate(-50%, -50%);
background:
linear-gradient(180deg, rgba(173,215,255,.20), rgba(108,165,255,.10)),
linear-gradient(rgba(255,255,255,.06) 0 1px, transparent 1px 4px);
background-size: 100% 100%, 100% 4px;
border-radius: 2px;
box-shadow: 0 0 16px rgba(85,163,255,.42), 0 0 36px rgba(85,163,255,.22);
opacity: .45;
mix-blend-mode: screen;
animation: tvPulse 2.8s steps(4,end) infinite;
}
@keyframes tvPulse {
0%,100% { opacity: .24; filter: brightness(.9); }
10% { opacity: .46; }
14% { opacity: .18; }
32% { opacity: .54; filter: brightness(1.3); }
61% { opacity: .30; }
74% { opacity: .62; }
}
.hotspot { position: absolute; z-index: 16; border: 0; padding: 0; background: transparent; cursor: pointer; transform: translate(-50%, -50%); outline: none; }
.hotspot:focus-visible { outline: 1px solid rgba(255,190,112,.54); outline-offset: 4px; }
.hotspot--donut { left:13%; top:39%; width:26%; height:34%; }
.hotspot--list { left:84%; top:41%; width:24%; height:34%; }
.hotspot--love { left:58%; top:54%; width:19%; height:30%; }
.hotspot--mountains { left:31%; top:30%; width:19%; height:28%; }
.hotspot--getaway { left:41%; top:53%; width:18%; height:22%; }
.hotspot--butterflies { left:82%; top:25%; width:20%; height:24%; }
.hotspot--choose { left:69%; top:48%; width:13%; height:24%; }
.hotspot--game { left:88.5%; top:77%; width:19%; height:27%; }
.hotspot--map { left:31%; top:84%; width:48%; height:24%; }
.radio-object {
position: absolute;
z-index: 17;
left: 49.8%;
top: 83.4%;
width: clamp(170px, 15vw, 270px);
aspect-ratio: 1;
border: 0;
padding: 0;
background: transparent;
transform: translate(-50%, -50%) rotate(-9deg);
cursor: pointer;
opacity: .98;
filter: drop-shadow(0 18px 22px rgba(0,0,0,.84)) drop-shadow(0 0 16px rgba(255,135,62,.36));
transition: transform 260ms ease, filter 260ms ease;
}
.radio-object img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.radio-object:hover, .radio-object:focus-visible, .app[data-hover="radio"] .radio-object { transform: translate(-50%, -50%) rotate(-6deg) scale(1.08); filter: drop-shadow(0 22px 28px rgba(0,0,0,.86)) drop-shadow(0 0 31px rgba(255,73,32,.56)); }
.radio-led { position: absolute; left: 62.5%; top: 13%; width: 8px; height: 8px; border-radius: 50%; background: #ff2a18; box-shadow: 0 0 15px #ff2a18, 0 0 30px rgba(255,42,24,.7); animation: radioLed 1450ms steps(1, end) infinite; }
@keyframes radioLed { 0%, 54%, 100% { opacity: .14; } 55%, 66% { opacity: 1; } 67%, 72% { opacity: .26; } 73%, 81% { opacity: .86; } }
/* ------------------- RIDE / SCENE CAROUSEL ------------------- */
.ride-stage { position: fixed; inset: 0; z-index: 20; opacity: 0; visibility: hidden; pointer-events: none; background: #050201; transition: opacity 520ms ease, visibility 520ms ease; }
.app[data-mode="ride"] .ride-stage { opacity: 1; visibility: visible; pointer-events: auto; }
.scene-img { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.045); filter: blur(10px) brightness(.62); transition: opacity 640ms ease, transform 900ms cubic-bezier(.16,.84,.21,1), filter 900ms ease; will-change: transform, opacity, filter; }
.scene-img.is-active { opacity: 1; transform: scale(1); filter: blur(0) brightness(1); }
.scene-img.is-leaving-left { opacity: 0; transform: translateX(-5vw) scale(1.09); filter: blur(16px) brightness(.54); }
.scene-img.is-leaving-right { opacity: 0; transform: translateX(5vw) scale(1.09); filter: blur(16px) brightness(.54); }
.scene-img.is-entering-left { transform: translateX(5vw) scale(1.07); filter: blur(16px) brightness(.65); }
.scene-img.is-entering-right { transform: translateX(-5vw) scale(1.07); filter: blur(16px) brightness(.65); }
.scene-overlay { position: absolute; inset: 0; pointer-events: none; }
.scene-overlay--blur { z-index: 4; opacity: 0; background: radial-gradient(circle at 50% 48%, rgba(255,185,101,.09), transparent 37%), rgba(0,0,0,.16); backdrop-filter: blur(0); transition: opacity 220ms ease, backdrop-filter 220ms ease; }
.app.is-traveling .scene-overlay--blur { opacity: 1; backdrop-filter: blur(5px); }
.scene-overlay--vignette { z-index: 5; background: radial-gradient(circle at 50% 46%, transparent 0 48%, rgba(0,0,0,.52) 82%, rgba(0,0,0,.88) 100%); }
.scene-card { position: fixed; z-index: 31; left: max(18px, env(safe-area-inset-left)); bottom: max(72px, calc(env(safe-area-inset-bottom) + 72px)); width: min(470px, calc(100vw - 36px)); padding: 14px 17px 15px; border-left: 1px solid rgba(255, 160, 82, .46); background: linear-gradient(90deg, rgba(0,0,0,.52), rgba(0,0,0,.20), transparent); text-shadow: 0 2px 18px #000; transform: translateY(12px); opacity: 0; transition: opacity 420ms ease 160ms, transform 420ms ease 160ms; pointer-events: none; }
.app[data-mode="ride"] .scene-card { opacity: 1; transform: translateY(0); }
.scene-card__status { margin-bottom: 7px; color: rgba(255, 160, 82, .92); font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .25em; text-transform: uppercase; }
.scene-card h1 { margin: 0 0 7px; font-size: clamp(30px, 6vw, 72px); line-height: .88; letter-spacing: -.035em; text-transform: uppercase; }
.scene-card p { margin: 0; color: rgba(242,223,182,.72); max-width: 36em; font-size: 13px; line-height: 1.44; }
.back-btn { position: fixed; z-index: 32; top: max(16px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left)); border: 1px solid rgba(255, 157, 79, .32); background: rgba(9,4,2,.56); color: rgba(242,223,182,.78); padding: 10px 13px; font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .17em; text-transform: uppercase; cursor: pointer; backdrop-filter: blur(8px); transition: border-color 200ms ease, color 200ms ease, background 200ms ease; }
.back-btn:hover { border-color: rgba(255, 193, 107, .70); color: #fff1ce; background: rgba(40,12,4,.64); }
/* ------------------- GLOBAL ATMOSPHERE/HUD ------------------- */
.atmosphere { position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: 0; transition: opacity 900ms ease; }
.app.is-live .atmosphere { opacity: 1; }
.atmosphere--dust { mix-blend-mode: screen; opacity: .16 !important; background: radial-gradient(circle at 15% 22%, rgba(255,255,255,.09) 0 1px, transparent 2px), radial-gradient(circle at 62% 50%, rgba(255,255,255,.06) 0 1px, transparent 2px), radial-gradient(circle at 82% 36%, rgba(255,255,255,.07) 0 1px, transparent 2px), linear-gradient(115deg, transparent 0%, rgba(255,184,105,.12) 24%, transparent 49%); background-size: 140px 110px, 190px 160px, 240px 170px, 100% 100%; animation: dustFloat 9500ms linear infinite alternate; }
.atmosphere--film { z-index: 51; opacity: .05 !important; mix-blend-mode: soft-light; background: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size: 100% 4px; }
.atmosphere--vignette { z-index: 52; opacity: 1 !important; background: radial-gradient(circle at 50% 47%, transparent 0%, transparent 50%, rgba(0,0,0,.50) 78%, rgba(0,0,0,.90) 100%); }
@keyframes dustFloat { from { transform: translate3d(-1%, .4%, 0); } to { transform: translate3d(1%, -1%, 0); } }
.mini-brand, .sound-btn, .controls, .hub-card, .toast { position: fixed; z-index: 60; }
.mini-brand { top: max(15px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left)); display: flex; gap: 11px; align-items: center; color: rgba(242,223,182,.72); font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .26em; text-transform: uppercase; text-shadow: 0 2px 10px #000; opacity: 0; transform: translateY(-8px); transition: opacity 600ms ease 900ms, transform 600ms ease 900ms; }
.app.is-live .mini-brand { opacity: 1; transform: translateY(0); }
.app[data-mode="ride"] .mini-brand { opacity: 0; pointer-events: none; }
.mini-brand i { width: 1px; height: 12px; background: rgba(242,223,182,.36); display: inline-block; }
.sound-btn { top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); padding: 10px 12px; border: 1px solid rgba(255,157,79,.28); background: rgba(9,4,2,.50); color: rgba(242,223,182,.76); font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; backdrop-filter: blur(8px); opacity: 0; transition: opacity 600ms ease 900ms, border-color 220ms ease, color 220ms ease, background 220ms ease; }
.app.is-live .sound-btn { opacity: 1; }
.app.is-live[data-mode="hub"] .hub-light { filter: blur(var(--blur, 18px)) brightness(1.04); }
.sound-btn.is-muted { color: rgba(242,223,182,.45); }
.hub-card { left: max(18px, env(safe-area-inset-left)); bottom: max(58px, calc(env(safe-area-inset-bottom) + 58px)); width: min(390px, calc(100vw - 36px)); padding: 13px 16px 14px; border-left: 1px solid rgba(255,157,79,.42); background: linear-gradient(90deg, rgba(0,0,0,.42), rgba(0,0,0,.14), transparent); text-shadow: 0 2px 16px #000; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity 220ms ease, transform 220ms ease; }
.app.is-live[data-mode="hub"]:not([data-hover="none"]) .hub-card { opacity: 1; transform: translateY(0); }
.hub-card__status { margin-bottom: 6px; color: rgba(255,157,79,.90); font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .24em; text-transform: uppercase; }
.hub-card h1 { margin: 0 0 6px; font-size: clamp(28px, 5.2vw, 58px); line-height: .9; letter-spacing: -.035em; text-transform: uppercase; }
.hub-card p { margin: 0; color: rgba(242,223,182,.70); font-size: 13px; line-height: 1.42; }
.controls { left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right)); bottom: max(13px, env(safe-area-inset-bottom)); display: flex; align-items: center; flex-wrap: wrap; gap: 10px clamp(16px, 3vw, 36px); color: rgba(242,223,182,.58); font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .17em; text-transform: uppercase; text-shadow: 0 2px 12px #000; opacity: 0; transform: translateY(8px); transition: opacity 600ms ease 1100ms, transform 600ms ease 1100ms; }
.app.is-live .controls { opacity: 1; transform: translateY(0); }
.toast { left: 50%; bottom: 18vh; transform: translateX(-50%) translateY(12px); max-width: min(560px, calc(100vw - 32px)); padding: 10px 13px; border: 1px solid rgba(255,157,79,.31); background: rgba(7,3,1,.70); backdrop-filter: blur(8px); color: rgba(242,223,182,.84); font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .18em; text-transform: uppercase; text-align: center; opacity: 0; pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; }
.toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 780px) {
.master-sign { width: min(1180px, 98vw); }
@keyframes codedSignBoot {
0%,8% { opacity:0; top:44%; width:96vw; transform:translate(-50%,-50%) scale(1.18); }
9%,12% { opacity:.92; }
13%,18% { opacity:.08; }
19%,23% { opacity:.82; }
24%,29% { opacity:.20; }
30%,40% { opacity:1; top:43%; width:90vw; transform:translate(-50%,-50%) scale(1.05); }
41%,50% { opacity:.96; }
51%,62% { opacity:.98; top:31%; width:82vw; transform:translate(-50%,-50%) scale(.98); }
63%,74% { opacity:.96; top:25.2%; width:76vw; transform:translate(-50%,-50%) scale(.93); }
75%,88% { opacity:.74; top:22%; width:72vw; transform:translate(-50%,-50%) scale(.90); }
89%,100% { opacity:0; top:20.7%; width:68vw; transform:translate(-50%,-50%) scale(.88); }
}
.radio-object { left: 50.3%; top: 84.1%; width: clamp(122px, 25vw, 190px); }
.scene-card { bottom: max(72px, calc(env(safe-area-inset-bottom) + 72px)); }
.scene-card h1 { font-size: clamp(32px, 11vw, 54px); }
.scene-card p { font-size: 12px; }
.controls { font-size: 9px; gap: 9px 17px; }
.mini-brand { letter-spacing: .18em; max-width: 70vw; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; } }
/* ------------------- V14 RETRO BOOT + SOFT LIVING GLOWS ------------------- */
/* Keep the boot simple: big retro HEARTLAND title, then reveal the hub. */
.boot {
background: #000 !important;
}
.boot-black {
background:
radial-gradient(circle at 50% 49%, rgba(55, 8, 3, .26), rgba(0,0,0,.86) 37%, #000 72%) !important;
}
.boot-glow {
position: absolute;
inset: -15%;
opacity: 0;
background:
radial-gradient(circle at 50% 46%, rgba(255, 38, 18, .32), transparent 20%),
radial-gradient(circle at 50% 62%, rgba(255, 138, 48, .10), transparent 44%);
filter: blur(18px);
mix-blend-mode: screen;
}
.app.is-booting .boot-glow {
animation: v14BootGlow 5200ms ease forwards;
}
.boot-scanlines {
position: absolute;
inset: 0;
opacity: .16;
background:
linear-gradient(rgba(255, 232, 192, .08) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 43, 24, .035), transparent 18%, rgba(255, 142, 56, .025) 50%, transparent 82%);
background-size: 100% 5px, 100% 100%;
mix-blend-mode: screen;
}
.boot-noise {
position: absolute;
inset: 0;
opacity: .045;
background:
radial-gradient(circle at 17% 12%, rgba(255,255,255,.18) 0 1px, transparent 2px),
radial-gradient(circle at 73% 42%, rgba(255,255,255,.10) 0 1px, transparent 2px),
radial-gradient(circle at 35% 68%, rgba(255,255,255,.14) 0 1px, transparent 2px);
background-size: 110px 90px, 170px 130px, 210px 160px;
animation: dustFloat 5200ms linear infinite alternate;
}
.retro-title {
position: relative;
z-index: 84;
display: flex;
flex-direction: column;
align-items: center;
gap: 13px;
opacity: 0;
transform: translateY(5px) scale(.96);
text-align: center;
pointer-events: none;
}
.retro-title__word {
font-family: Georgia, 'Times New Roman', serif;
font-size: clamp(52px, 12vw, 192px);
line-height: .82;
font-weight: 800;
letter-spacing: .055em;
color: rgba(255, 226, 190, .97);
text-transform: uppercase;
text-shadow:
0 0 5px rgba(255,255,255,.74),
0 0 16px rgba(255,74,42,.92),
0 0 42px rgba(255,36,20,.66),
0 0 82px rgba(255,37,18,.34);
-webkit-text-stroke: 1px rgba(255, 112, 66, .55);
}
.retro-title__sub {
font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: .46em;
color: rgba(242,223,182,.67);
text-transform: uppercase;
}
.app.is-booting .retro-title {
animation: v14RetroBoot 5150ms steps(1, end) forwards;
}
.app.is-revealing .retro-title {
animation: v14RetroExit 900ms ease forwards;
}
@keyframes v14RetroBoot {
0%, 8% { opacity: 0; transform: translateY(5px) scale(.96); filter: brightness(.45) blur(2px); }
9%, 13% { opacity: .96; transform: translateY(0) scale(1.01); filter: brightness(1.35) blur(.2px); }
14%, 18% { opacity: .14; filter: brightness(.5) blur(1.5px); }
19%, 25% { opacity: .92; transform: translateY(0) scale(1); filter: brightness(1.18) blur(.1px); }
26%, 31% { opacity: .28; }
32%, 45% { opacity: 1; transform: translateY(0) scale(1.015); filter: brightness(1.45) blur(0); }
46%, 54% { opacity: .72; filter: brightness(.9); }
55%, 78% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1.25); }
79%, 100% { opacity: .92; transform: translateY(0) scale(1); filter: brightness(1.06); }
}
@keyframes v14RetroExit {
from { opacity: .92; transform: scale(1); filter: blur(0) brightness(1); }
to { opacity: 0; transform: scale(1.08); filter: blur(8px) brightness(1.45); }
}
@keyframes v14BootGlow {
0%, 15% { opacity: 0; }
20% { opacity: .20; }
33% { opacity: .44; }
52% { opacity: .32; }
70% { opacity: .18; }
100% { opacity: 0; }
}
/* Hide old precision dots and use soft zone glows instead. */
.practicals,
.practical {
display: none !important;
}
.living-glows {
position: absolute;
inset: 0;
z-index: 7;
pointer-events: none;
}
.live-glow {
position: absolute;
left: var(--x);
top: var(--y);
width: var(--w);
height: var(--h);
transform: translate(-50%, -50%);
border-radius: 999px;
opacity: var(--o, .35);
filter: blur(var(--b, 18px)) brightness(1);
background: var(--g);
mix-blend-mode: screen;
animation: liveGlowPulse var(--d, 4.8s) ease-in-out infinite alternate;
}
.live-glow::after {
content: "";
position: absolute;
inset: -20%;
border-radius: inherit;
background: inherit;
filter: blur(22px);
opacity: .46;
}
.live-glow--donut-strip {
--x: 12.2%; --y: 42.4%; --w: 24%; --h: 20%; --o: .30; --b: 16px; --d: 4.2s;
--g: radial-gradient(ellipse at center, rgba(255,216,135,.72), rgba(255,145,54,.26) 48%, transparent 78%);
}
.live-glow--donut-window {
--x: 10.4%; --y: 50.8%; --w: 15%; --h: 17%; --o: .28; --b: 14px; --d: 3.6s;
--g: radial-gradient(ellipse at center, rgba(255,206,126,.64), rgba(255,126,46,.21) 48%, transparent 78%);
}
.live-glow--heartland-red {
--x: 50%; --y: 17.2%; --w: 39%; --h: 11%; --o: .46; --b: 13px; --d: 3.2s;
--g: radial-gradient(ellipse at center, rgba(255,42,24,.82), rgba(255,33,18,.34) 48%, transparent 78%);
}
.live-glow--heartland-bulbs {
--x: 50.3%; --y: 11.6%; --w: 49%; --h: 12%; --o: .20; --b: 12px; --d: 2.5s;
--g:
radial-gradient(circle at 8% 64%, rgba(255,212,135,.65), transparent 8%),
radial-gradient(circle at 29% 36%, rgba(255,196,107,.58), transparent 7%),
radial-gradient(circle at 50% 24%, rgba(255,216,139,.54), transparent 7%),
radial-gradient(circle at 70% 35%, rgba(255,170,84,.50), transparent 8%),
radial-gradient(circle at 91% 58%, rgba(255,217,139,.60), transparent 8%);
}
.live-glow--love {
--x: 59%; --y: 52.4%; --w: 20%; --h: 28%; --o: .36; --b: 14px; --d: 2.9s;
--g: radial-gradient(ellipse at center, rgba(255,56,63,.76), rgba(255,55,111,.26) 42%, transparent 76%);
}
.live-glow--getaway-blue {
--x: 41.5%; --y: 50.5%; --w: 13%; --h: 13%; --o: .26; --b: 12px; --d: 2.2s;
--g: radial-gradient(ellipse at center, rgba(130,213,255,.72), rgba(45,130,255,.22) 46%, transparent 78%);
}
.live-glow--bbq-canopy {
--x: 86.0%; --y: 39.5%; --w: 23%; --h: 26%; --o: .30; --b: 15px; --d: 3.7s;
--g: radial-gradient(ellipse at center, rgba(255,181,85,.60), rgba(255,75,34,.23) 46%, transparent 79%);
}
.live-glow--bbq-smoker {
--x: 88.3%; --y: 50.2%; --w: 16%; --h: 15%; --o: .26; --b: 13px; --d: 2.8s;
--g: radial-gradient(ellipse at center, rgba(255,183,95,.58), rgba(255,92,43,.19) 45%, transparent 76%);
}
.live-glow--butterflies {
--x: 83%; --y: 26%; --w: 18%; --h: 22%; --o: .16; --b: 17px; --d: 5.6s;
--g: radial-gradient(ellipse at center, rgba(255,186,110,.48), rgba(255,125,62,.13) 45%, transparent 78%);
}
.live-glow--choose {
--x: 70.6%; --y: 47.2%; --w: 12%; --h: 18%; --o: .14; --b: 14px; --d: 5.2s;
--g: radial-gradient(ellipse at center, rgba(222,255,196,.30), rgba(255,192,106,.12) 45%, transparent 78%);
}
.live-glow--crt {
--x: 90.8%; --y: 77.4%; --w: 10%; --h: 13%; --o: .32; --b: 11px; --d: 2.3s;
--g: radial-gradient(ellipse at center, rgba(126,199,255,.62), rgba(70,116,255,.18) 46%, transparent 80%);
}
.live-glow--map-lantern {
--x: 4.7%; --y: 78%; --w: 10%; --h: 15%; --o: .28; --b: 16px; --d: 4.8s;
--g: radial-gradient(ellipse at center, rgba(255,198,111,.70), rgba(255,116,47,.16) 44%, transparent 78%);
}
@keyframes liveGlowPulse {
0% { opacity: calc(var(--o, .35) * .68); filter: blur(var(--b, 18px)) brightness(.92); transform: translate(-50%, -50%) scale(.98); }
100% { opacity: var(--o, .35); filter: blur(var(--b, 18px)) brightness(1.12); transform: translate(-50%, -50%) scale(1.04); }
}
/* Re-tune smoke and CRT to feel more like air in the room, less like pasted effects. */
.bbq-smoke { z-index: 8; }
.smoke { filter: blur(22px) !important; opacity: 0; mix-blend-mode: screen; }
.smoke--1 { --x: 86.2%; --y: 33.4%; --w: 95px; --h: 155px; --smokeDur: 7.4s; }
.smoke--2 { --x: 88.5%; --y: 33.8%; --w: 140px; --h: 205px; --smokeDur: 8.2s; }
.smoke--3 { --x: 90.5%; --y: 35.4%; --w: 110px; --h: 178px; --smokeDur: 7.8s; }
.smoke--4 { --x: 83.8%; --y: 32.6%; --w: 90px; --h: 145px; --smokeDur: 6.8s; }
@keyframes smokeRise {
0% { opacity: 0; transform: translate(-50%, 22px) scale(.78); }
18% { opacity: .16; }
44% { opacity: .24; }
70% { opacity: .11; }
100% { opacity: 0; transform: translate(-50%, -115px) scale(1.36); }
}
.tv-flicker {
left: 90.8% !important;
top: 77.5% !important;
width: 7.2% !important;
height: 10.0% !important;
opacity: .34;
transform: translate(-50%, -50%) skew(-3deg);
}
/* User-marked radio corner position */
.radio-object {
left: 52.1% !important;
top: 84.5% !important;
width: clamp(176px, 15.8vw, 286px) !important;
transform: translate(-50%, -50%) rotate(-7deg) !important;
}
.radio-object:hover, .radio-object:focus-visible, .app[data-hover="radio"] .radio-object {
transform: translate(-50%, -50%) rotate(-5deg) scale(1.07) !important;
}
@media (max-width: 780px) {
.retro-title__word { font-size: clamp(50px, 16vw, 108px); letter-spacing: .035em; }
.retro-title__sub { font-size: 8px; letter-spacing: .30em; }
.radio-object { left: 52.5% !important; top: 85.2% !important; width: clamp(128px, 27vw, 196px) !important; }
}
/* ------------------- V15 POLISH PASS ------------------- */
/* Subtle camera drift so the hub breathes a little. */
.app.is-live[data-mode="hub"] .hub-frame {
animation: hubIdleFloat 18s ease-in-out infinite alternate;
will-change: transform;
}
@keyframes hubIdleFloat {
0% { transform: translate(-50.2%, -49.8%) scale(1.004); }
22% { transform: translate(-49.9%, -50.15%) scale(1.008); }
48% { transform: translate(-50.05%, -50.28%) scale(1.01); }
74% { transform: translate(-50.22%, -49.92%) scale(1.007); }
100% { transform: translate(-49.95%, -50.08%) scale(1.006); }
}
/* Raise the TV life effect and give it CRT personality. */
.live-glow--crt {
--x: 90.8%; --y: 76.2%; --w: 10%; --h: 11.8%; --o: .30; --b: 10px; --d: 2.1s;
}
.tv-flicker {
left: 90.85% !important;
top: 76.15% !important;
width: 7.45% !important;
height: 9.45% !important;
opacity: .40;
overflow: hidden;
background:
linear-gradient(180deg, rgba(182,225,255,.20), rgba(110,170,255,.08)),
linear-gradient(rgba(255,255,255,.06) 0 1px, transparent 1px 4px),
radial-gradient(circle at 45% 40%, rgba(164,214,255,.16), transparent 62%);
background-size: 100% 100%, 100% 4px, 100% 100%;
box-shadow: 0 0 18px rgba(85,163,255,.34), 0 0 34px rgba(85,163,255,.18);
animation: tvPulse 2.1s steps(4,end) infinite;
}
.tv-flicker::before,
.tv-flicker::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
}
.tv-flicker::before {
background:
repeating-linear-gradient(
to bottom,
rgba(255,255,255,.12) 0px,
rgba(255,255,255,.12) 1px,
rgba(0,0,0,0) 2px,
rgba(0,0,0,0) 4px
);
mix-blend-mode: screen;
opacity: .22;
animation: crtScan 6s linear infinite;
}
.tv-flicker::after {
background:
linear-gradient(180deg,
transparent 0%,
rgba(255,255,255,.20) 16%,
transparent 33%,
transparent 62%,
rgba(120,180,255,.16) 76%,
transparent 100%
);
opacity: .18;
mix-blend-mode: screen;
animation: crtGlitch 7.8s steps(1,end) infinite;
}
@keyframes crtScan {
from { transform: translateY(-4px); }
to { transform: translateY(4px); }
}
@keyframes crtGlitch {
0%, 76%, 100% { transform: translateX(0); opacity: .06; }
77% { transform: translateX(-1px); opacity: .18; }
78% { transform: translateX(1px); opacity: .24; }
79% { transform: translateX(-2px); opacity: .12; }
80% { transform: translateX(0); opacity: .08; }
92% { transform: translateX(0); opacity: .10; }
93% { transform: translateX(1px); opacity: .20; }
94% { transform: translateX(-1px); opacity: .12; }
95% { transform: translateX(0); opacity: .08; }
}
@keyframes liveFlickerSoft {
0%, 100% { opacity: var(--o, .35); }
7% { opacity: calc(var(--o, .35) * .84); }
8% { opacity: calc(var(--o, .35) * 1.08); }
21% { opacity: calc(var(--o, .35) * .90); }
22% { opacity: calc(var(--o, .35) * 1.12); }
56% { opacity: calc(var(--o, .35) * .82); }
57% { opacity: calc(var(--o, .35) * 1.06); }
78% { opacity: calc(var(--o, .35) * .92); }
79% { opacity: calc(var(--o, .35) * 1.15); }
}
@keyframes signElectric {
0%, 100% { opacity: .46; filter: blur(13px) brightness(1.02); }
11% { opacity: .40; }
12% { opacity: .56; filter: blur(12px) brightness(1.18); }
13% { opacity: .44; }
33% { opacity: .50; }
34% { opacity: .58; }
69% { opacity: .41; }
70% { opacity: .52; filter: blur(12px) brightness(1.22); }
}
@keyframes practicalZoneFlicker {
0%, 100% { opacity: var(--idle, .2); }
18% { opacity: calc(var(--idle, .2) * .92); }
19% { opacity: calc(var(--idle, .2) * 1.18); }
47% { opacity: calc(var(--idle, .2) * .88); }
48% { opacity: calc(var(--idle, .2) * 1.12); }
73% { opacity: calc(var(--idle, .2) * .94); }
74% { opacity: calc(var(--idle, .2) * 1.16); }
}
.live-glow--heartland-red { animation: liveGlowPulse 3.2s ease-in-out infinite alternate, signElectric 6.7s steps(1,end) infinite; }
.live-glow--heartland-bulbs,
.live-glow--donut-strip,
.live-glow--bbq-canopy,
.live-glow--love,
.live-glow--getaway-blue,
.live-glow--crt { animation: liveGlowPulse var(--d, 4.8s) ease-in-out infinite alternate, liveFlickerSoft calc(var(--d, 4.8s) * 2.1) steps(1,end) infinite; }
.hub-light--heartland,
.hub-light--donut,
.hub-light--list,
.hub-light--love,
.hub-light--getaway,
.hub-light--game { animation: slowPulse var(--pulse, 5400ms) ease-in-out infinite alternate, practicalZoneFlicker calc(var(--pulse, 5400ms) * 2.2) steps(1,end) infinite; }
/* Slightly softer smoke so it feels present, not pasted. */
.bbq-smoke { opacity: .92; }
.smoke { filter: blur(26px) !important; }
.smoke--1 { --x: 86.1%; --y: 33.4%; --w: 110px; --h: 168px; }
.smoke--2 { --x: 88.6%; --y: 33.7%; --w: 150px; --h: 216px; }
.smoke--3 { --x: 90.2%; --y: 35.0%; --w: 118px; --h: 182px; }
.smoke--4 { --x: 84.0%; --y: 32.4%; --w: 94px; --h: 148px; }
@media (max-width: 780px) {
.tv-flicker {
left: 90.7% !important;
top: 76.35% !important;
width: 8.1% !important;
height: 8.6% !important;
}
.live-glow--crt { --x: 90.7%; --y: 76.5%; --w: 10.8%; --h: 10.2%; }
.app.is-live[data-mode="hub"] .hub-frame { animation-duration: 20s; }
}
.radio-object.is-bursting { filter: drop-shadow(0 22px 28px rgba(0,0,0,.86)) drop-shadow(0 0 26px rgba(255,73,32,.42)); }
/* ------------------- V16 STAGE MENU SYSTEM ------------------- */
.stage-menu {
position: fixed;
z-index: 33;
top: max(78px, calc(env(safe-area-inset-top) + 78px));
right: max(18px, env(safe-area-inset-right));
width: min(380px, calc(100vw - 36px));
padding: 16px 16px 15px;
border: 1px solid rgba(255,157,79,.34);
border-left: 3px solid rgba(255,157,79,.72);
background:
linear-gradient(135deg, rgba(7,3,1,.72), rgba(24,7,2,.48) 62%, rgba(0,0,0,.25)),
repeating-linear-gradient(180deg, rgba(255,255,255,.028) 0 1px, transparent 1px 4px);
color: rgba(242,223,182,.92);
backdrop-filter: blur(10px);
box-shadow: 0 22px 55px rgba(0,0,0,.42);
text-shadow: 0 2px 16px #000;
opacity: 0;
transform: translateX(18px);
pointer-events: none;
transition: opacity 420ms ease 180ms, transform 420ms cubic-bezier(.16,.84,.21,1) 180ms;
}
.app[data-mode="ride"] .stage-menu {
opacity: 1;
transform: translateX(0);
pointer-events: auto;
}
.stage-menu__eyebrow {
color: rgba(255,160,82,.92);
font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: .22em;
text-transform: uppercase;
margin-bottom: 9px;
}
.stage-menu h2 {
margin: 0 0 7px;
font-size: clamp(30px, 4.4vw, 54px);
line-height: .86;
letter-spacing: -.035em;
text-transform: uppercase;
}
.stage-menu p {
margin: 0 0 13px;
color: rgba(242,223,182,.70);
font-size: 13px;
line-height: 1.42;
}
.stage-actions {
display: grid;
gap: 8px;
}
.stage-action {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 42px;
padding: 11px 12px;
border: 1px solid rgba(255,157,79,.28);
background: linear-gradient(90deg, rgba(255,157,79,.10), rgba(255,157,79,.03));
color: rgba(242,223,182,.92);
text-decoration: none;
font: 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: .20em;
text-transform: uppercase;
cursor: pointer;
transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease;
}
.stage-action::after {
content: "›";
color: rgba(255,188,106,.72);
font-size: 18px;
line-height: 0;
}
.stage-action:hover,
.stage-action:focus-visible {
transform: translateX(-4px);
border-color: rgba(255,196,119,.74);
background: linear-gradient(90deg, rgba(255,157,79,.24), rgba(255,45,24,.10));
color: #fff4d8;
outline: none;
}
.stage-action--locked {
opacity: .62;
cursor: not-allowed;
color: rgba(255,98,76,.86);
border-color: rgba(255,68,45,.36);
background: linear-gradient(90deg, rgba(255,35,22,.14), rgba(255,35,22,.03));
}
.stage-action--locked::after { content: "×"; color: rgba(255,76,55,.86); }
.stage-action--back {
margin-top: 5px;
background: rgba(0,0,0,.32);
}
.stage-audio {
margin: 11px 0 12px;
padding: 11px;
border: 1px solid rgba(255,157,79,.24);
background: rgba(0,0,0,.28);
}
.stage-audio__label {
margin-bottom: 8px;
color: rgba(255,160,82,.85);
font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: .24em;
text-transform: uppercase;
}
.stage-audio audio {
display: block;
width: 100%;
max-width: 100%;
filter: sepia(.22) saturate(1.2);
}
.app[data-stage-mode="locked"] .stage-menu {
border-color: rgba(255,64,43,.35);
border-left-color: rgba(255,64,43,.72);
background:
linear-gradient(135deg, rgba(10,2,1,.78), rgba(36,4,2,.46) 62%, rgba(0,0,0,.28)),
repeating-linear-gradient(180deg, rgba(255,50,35,.035) 0 1px, transparent 1px 4px);
}
.app[data-stage-mode="preview"] .stage-menu {
border-color: rgba(255,84,99,.40);
border-left-color: rgba(255,84,99,.78);
box-shadow: 0 22px 55px rgba(0,0,0,.42), 0 0 45px rgba(255,45,80,.10);
}
.app[data-stage-mode="archive"] .stage-menu {
border-color: rgba(255,205,116,.34);
}
@media (max-width: 780px) {
.stage-menu {
top: auto;
left: max(12px, env(safe-area-inset-left));
right: max(12px, env(safe-area-inset-right));
bottom: max(64px, calc(env(safe-area-inset-bottom) + 64px));
width: auto;
padding: 13px;
}
.stage-menu h2 { font-size: clamp(28px, 9vw, 46px); }
.stage-menu p { font-size: 12px; }
.stage-action { min-height: 40px; font-size: 10px; letter-spacing: .16em; }
.scene-card { opacity: 0 !important; }
}
/* ------------------- V17 CLEAN STAGE OPTIONS ------------------- */
/* The scene title already lives bottom-left, so the right menu focuses only on status, description, and options. */
.stage-menu h2 {
display: none !important;
}
.stage-menu {
width: min(342px, calc(100vw - 36px));
padding: 15px 15px 14px;
}
.stage-menu__eyebrow {
margin-bottom: 8px;
color: rgba(255,175,92,.95);
}
.stage-menu p {
margin-bottom: 14px;
font-size: 13px;
}
.stage-actions {
gap: 7px;
}
.stage-action {
min-height: 40px;
}
@media (max-width: 780px) {
.stage-menu {
width: auto;
}
}
/* === V18: The List BBQ atmosphere pass === */
.stage-fx--list {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0;
transition: opacity 420ms ease;
z-index: 6;
overflow: hidden;
}
.stage-fx--list::before,
.stage-fx--list::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
}
.stage-fx--list::before {
left: 49%;
top: 56%;
width: 28%;
height: 24%;
transform: translate(-50%, -50%);
background: radial-gradient(ellipse at center, rgba(255, 220, 186, .16) 0%, rgba(212, 191, 170, .12) 34%, rgba(255, 136, 82, .10) 56%, rgba(0,0,0,0) 76%);
filter: blur(26px);
opacity: .72;
mix-blend-mode: screen;
animation: listHazeBreathe 8.6s ease-in-out infinite;
}
.stage-fx--list::after {
left: 58.5%;
top: 46%;
width: 22%;
height: 28%;
transform: translate(-50%, -50%);
background: radial-gradient(ellipse at center, rgba(255, 225, 200, .12) 0%, rgba(235, 222, 212, .10) 34%, rgba(255, 150, 99, .08) 58%, rgba(0,0,0,0) 78%);
filter: blur(24px);
opacity: .56;
mix-blend-mode: screen;
animation: listHazeDrift 10.5s ease-in-out infinite alternate;
}
.app[data-mode="ride"][data-scene="list"] .stage-fx--list { opacity: 1; }
.app[data-mode="ride"][data-scene="list"] .scene-img.is-active {
animation: listIdleCamera 16s ease-in-out infinite alternate;
transform-origin: 57% 54%;
}
@keyframes listIdleCamera {
0% { transform: scale(1.012) translate3d(-0.4vw, -0.2vh, 0); }
50% { transform: scale(1.02) translate3d(0.15vw, 0.25vh, 0); }
100% { transform: scale(1.015) translate3d(0.5vw, -0.12vh, 0); }
}
.app[data-mode="ride"][data-scene="list"] .scene-overlay--vignette {
background:
radial-gradient(circle at 72% 42%, rgba(255,148,64,.06), rgba(0,0,0,0) 19%),
radial-gradient(circle at 62% 60%, rgba(255,116,32,.08), rgba(0,0,0,0) 16%),
linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.42));
}
.list-sign-glow,
.list-grill-glow,
.list-reflection,
.list-bulb,
.list-smoke,
.list-ember {
position: absolute;
display: block;
}
.list-sign-glow {
left: 53.5%;
top: 22%;
width: 29%;
height: 24%;
transform: translate(-50%, -50%) rotate(-4deg);
background: radial-gradient(circle, rgba(255,150,64,.22) 0%, rgba(255,120,34,.14) 36%, rgba(255,120,34,.06) 58%, rgba(255,120,34,0) 74%);
filter: blur(26px);
mix-blend-mode: screen;
animation: listSignPulse 4.8s ease-in-out infinite;
}
.list-grill-glow {
left: 58.5%;
top: 62%;
width: 18%;
height: 18%;
transform: translate(-50%, -50%);
background: radial-gradient(circle, rgba(255,150,48,.25) 0%, rgba(255,96,24,.12) 38%, rgba(255,96,24,0) 72%);
filter: blur(18px);
mix-blend-mode: screen;
animation: grillPulse 2.7s ease-in-out infinite alternate;
}
.list-reflection--1 {
left: 56%;
bottom: 7%;
width: 28%;
height: 15%;
transform: translateX(-50%);
background: radial-gradient(ellipse at center, rgba(255,132,44,.22), rgba(255,132,44,.08) 45%, rgba(255,132,44,0) 72%);
filter: blur(22px);
opacity: .65;
mix-blend-mode: screen;
animation: reflectionShimmer 7s ease-in-out infinite;
}
.list-reflection--2 {
right: 8%;
bottom: 4%;
width: 19%;
height: 11%;
background: radial-gradient(ellipse at center, rgba(255,173,88,.18), rgba(255,173,88,.06) 44%, rgba(255,173,88,0) 70%);
filter: blur(18px);
opacity: .48;
mix-blend-mode: screen;
animation: reflectionShimmer 6.2s ease-in-out infinite reverse;
}
.list-bulb {
width: 22px;
height: 22px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,236,190,.98) 0%, rgba(255,191,98,.88) 26%, rgba(255,146,52,.48) 56%, rgba(255,146,52,0) 74%);
filter: blur(1px);
box-shadow: 0 0 18px rgba(255,186,92,.7), 0 0 34px rgba(255,132,42,.32);
opacity: .94;
animation: houseBulbFlicker 9s linear infinite;
}
.list-bulb--1 { left: 49.5%; top: 35.8%; animation-delay: .2s; }
.list-bulb--2 { left: 57.4%; top: 36.6%; animation-delay: 1.5s; }
.list-bulb--3 { left: 65.1%; top: 37.6%; animation-delay: 3.1s; }
.list-bulb--4 { left: 73.5%; top: 37.3%; animation-delay: 4.9s; }
.list-bulb--5 { left: 79.9%; top: 44.8%; width: 18px; height: 18px; animation-delay: 2.7s; }
.list-smoke {
border-radius: 50%;
background:
radial-gradient(circle at 44% 34%, rgba(255,255,255,.44) 0%, rgba(255,245,236,.36) 18%, rgba(244,231,220,.28) 34%, rgba(202,194,188,.18) 52%, rgba(255,163,104,.10) 66%, rgba(0,0,0,0) 82%);
filter: blur(20px);
mix-blend-mode: screen;
opacity: 0;
animation: bbqSmokeLift var(--dur, 9s) ease-in-out infinite;
}
.list-smoke--1 { left: 51.8%; top: 52.2%; width: 156px; height: 214px; --dur: 8.6s; animation-delay: 0s; }
.list-smoke--2 { left: 54.9%; top: 50.2%; width: 198px; height: 254px; --dur: 9.8s; animation-delay: 1.2s; }
.list-smoke--3 { left: 57.9%; top: 49.2%; width: 168px; height: 222px; --dur: 9.0s; animation-delay: 2.8s; }
.list-smoke--4 { left: 56.1%; top: 54.1%; width: 246px; height: 286px; --dur: 10.6s; animation-delay: 4.0s; }
.list-smoke--5 { left: 59.0%; top: 51.7%; width: 144px; height: 198px; --dur: 8.2s; animation-delay: 2.0s; }
.list-ember {
width: 4px;
height: 4px;
border-radius: 50%;
background: rgba(255,188,88,.92);
box-shadow: 0 0 10px rgba(255,157,48,.62), 0 0 18px rgba(255,116,32,.25);
opacity: 0;
animation: emberFloat var(--eDur, 5.8s) linear infinite;
}
.list-ember--1 { left: 54.5%; top: 64%; --eDur: 5.4s; animation-delay: .4s; }
.list-ember--2 { left: 57.5%; top: 62%; --eDur: 6.3s; animation-delay: 2.1s; }
.list-ember--3 { left: 60.4%; top: 61%; --eDur: 5.9s; animation-delay: 3.5s; }
.list-ember--4 { left: 62.2%; top: 64%; --eDur: 6.7s; animation-delay: 1.4s; }
@keyframes listSignPulse {
0%, 100% { opacity: .76; transform: translate(-50%, -50%) rotate(-4deg) scale(1); }
50% { opacity: .96; transform: translate(-50%, -50%) rotate(-4deg) scale(1.03); }
}
@keyframes grillPulse {
0% { opacity: .45; transform: translate(-50%, -50%) scale(.96); }
100% { opacity: .78; transform: translate(-50%, -50%) scale(1.08); }
}
@keyframes reflectionShimmer {
0%, 100% { opacity: .42; transform: translateX(-50%) scaleX(.96); }
50% { opacity: .72; transform: translateX(-50%) scaleX(1.03); }
}
@keyframes houseBulbFlicker {
0%, 8%, 15%, 22%, 38%, 55%, 77%, 100% { opacity: .94; transform: scale(1); }
10% { opacity: .82; }
11% { opacity: .93; }
42% { opacity: .74; transform: scale(.98); }
43% { opacity: .93; transform: scale(1); }
79% { opacity: .68; }
80% { opacity: .94; }
}
@keyframes bbqSmokeLift {
0% { opacity: 0; transform: translate3d(0, 28px, 0) scale(.68); }
12% { opacity: .26; }
28% { opacity: .52; }
48% { opacity: .62; }
72% { opacity: .34; }
100% { opacity: 0; transform: translate3d(18px, -132px, 0) scale(1.28); }
}
@keyframes listHazeBreathe {
0%, 100% { opacity: .58; transform: translate(-50%, -50%) scale(.96); }
50% { opacity: .82; transform: translate(-50%, -50%) scale(1.06); }
}
@keyframes listHazeDrift {
0% { opacity: .42; transform: translate(-50%, -50%) translate3d(-8px, 8px, 0) scale(.96); }
100% { opacity: .64; transform: translate(-50%, -50%) translate3d(10px, -10px, 0) scale(1.05); }
}
@keyframes emberFloat {
0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.85); }
18% { opacity: .88; }
55% { opacity: .5; }
100% { opacity: 0; transform: translate3d(16px, -44px, 0) scale(.2); }
}
@media (max-width: 900px) {
.list-sign-glow { left: 58%; top: 23.5%; width: 42%; height: 21%; }
.list-grill-glow { left: 61%; top: 60%; width: 28%; height: 20%; }
.list-reflection--1 { left: 60%; width: 42%; }
.list-reflection--2 { width: 30%; }
.list-bulb { width: 16px; height: 16px; }
.list-bulb--1 { left: 48.3%; top: 36.1%; }
.list-bulb--2 { left: 57.6%; top: 37.1%; }
.list-bulb--3 { left: 66.2%; top: 38%; }
.list-bulb--4 { left: 75.7%; top: 38.5%; }
.list-bulb--5 { left: 84.8%; top: 46.6%; }
.stage-fx--list::before { left: 57%; top: 57%; width: 34%; height: 24%; }
.stage-fx--list::after { left: 63%; top: 48%; width: 30%; height: 24%; }
.list-smoke--1 { left: 55%; top: 54%; width: 118px; height: 164px; }
.list-smoke--2 { left: 58.2%; top: 51.8%; width: 150px; height: 196px; }
.list-smoke--3 { left: 61.2%; top: 49.6%; width: 126px; height: 168px; }
.list-smoke--4 { left: 59.3%; top: 54.8%; width: 184px; height: 222px; }
.list-smoke--5 { left: 63.2%; top: 52.0%; width: 110px; height: 148px; }
}
/* === V20: Love Is Bond water / tunnel pass === */
.stage-fx--love {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0;
transition: opacity 520ms ease;
z-index: 6;
overflow: hidden;
}
.app[data-mode="ride"][data-scene="love"] .stage-fx--love { opacity: 1; }
.app[data-mode="ride"][data-scene="love"] .scene-img.is-active {
animation: loveIdleCamera 18s ease-in-out infinite alternate;
transform-origin: 63% 54%;
}
.app[data-mode="ride"][data-scene="love"] .scene-overlay--vignette {
background:
radial-gradient(circle at 67% 47%, rgba(255, 82, 105, .10), rgba(0,0,0,0) 25%),
radial-gradient(circle at 61% 73%, rgba(255, 142, 73, .10), rgba(0,0,0,0) 18%),
linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.39));
}
.app[data-mode="ride"][data-scene="love"] .stage-menu {
border-color: rgba(255, 100, 124, .46);
border-left-color: rgba(255, 92, 118, .88);
background:
linear-gradient(135deg, rgba(10,2,5,.74), rgba(38,6,12,.48) 62%, rgba(0,0,0,.25)),
repeating-linear-gradient(180deg, rgba(255,180,190,.035) 0 1px, transparent 1px 4px);
box-shadow: 0 22px 55px rgba(0,0,0,.42), 0 0 48px rgba(255,62,92,.13);
}
.app[data-mode="ride"][data-scene="love"] .stage-menu__eyebrow { color: rgba(255, 126, 145, .96); }
.app[data-mode="ride"][data-scene="love"] .stage-action {
border-color: rgba(255, 116, 136, .30);
background: linear-gradient(90deg, rgba(255,78,108,.12), rgba(255,174,99,.035));
}
.app[data-mode="ride"][data-scene="love"] .stage-action:hover,
.app[data-mode="ride"][data-scene="love"] .stage-action:focus-visible {
border-color: rgba(255,160,174,.76);
background: linear-gradient(90deg, rgba(255,89,118,.25), rgba(255,160,82,.10));
}
.love-tunnel-glow,
.love-heart-glow,
.love-water-shimmer,
.love-ripple,
.love-mist,
.love-particle {
position: absolute;
display: block;
}
.love-tunnel-glow {
left: 65.6%;
top: 51.2%;
width: 36%;
height: 44%;
transform: translate(-50%, -50%);
border-radius: 50%;
background:
radial-gradient(ellipse at center, rgba(255, 64, 96, .30) 0%, rgba(255, 92, 112, .18) 31%, rgba(255, 154, 88, .10) 55%, rgba(0,0,0,0) 76%);
filter: blur(25px);
mix-blend-mode: screen;
animation: loveTunnelPulse 4.8s ease-in-out infinite alternate;
}
.love-heart-glow {
width: 13%;
height: 14%;
border-radius: 999px;
background: radial-gradient(ellipse at center, rgba(255, 56, 86, .34), rgba(255, 104, 126, .15) 48%, rgba(0,0,0,0) 74%);
filter: blur(18px);
mix-blend-mode: screen;
animation: loveHeartPulse 3.7s ease-in-out infinite alternate;
}
.love-heart-glow--left { left: 49.2%; top: 40.8%; transform: translate(-50%, -50%); animation-delay: .2s; }
.love-heart-glow--right { left: 73.2%; top: 39.8%; transform: translate(-50%, -50%); animation-delay: 1.1s; }
.love-water-shimmer {
left: 62%;
bottom: 4%;
width: 40%;
height: 30%;
transform: translateX(-50%);
opacity: .62;
filter: blur(9px);
mix-blend-mode: screen;
background:
repeating-linear-gradient(90deg,
rgba(255, 70, 105, .00) 0%,
rgba(255, 70, 105, .15) 4%,
rgba(255, 184, 102, .10) 7%,
rgba(255, 70, 105, .00) 12%),
radial-gradient(ellipse at 56% 28%, rgba(255, 112, 133, .20), rgba(255, 112, 133, 0) 60%);
animation: loveShimmerDrift 7.4s ease-in-out infinite alternate;
}
.love-water-shimmer--2 {
left: 69%;
bottom: 10%;
width: 28%;
height: 22%;
opacity: .40;
filter: blur(13px);
animation-duration: 9.8s;
animation-direction: alternate-reverse;
}
.love-ripple {
left: 61.8%;
top: 76.6%;
width: 120px;
height: 36px;
border-radius: 50%;
border: 1px solid rgba(255, 186, 168, .50);
background: radial-gradient(ellipse at center, rgba(255, 98, 124, .09), rgba(255, 160, 100, .06) 42%, rgba(0,0,0,0) 68%);
filter: blur(.5px);
opacity: 0;
mix-blend-mode: screen;
transform: translate(-50%, -50%) scale(.28);
animation: loveRipple 6.8s ease-out infinite;
}
.love-ripple--2 { left: 68.3%; top: 74.6%; width: 100px; height: 30px; animation-delay: 1.7s; animation-duration: 7.2s; }
.love-ripple--3 { left: 56.2%; top: 79.7%; width: 150px; height: 40px; animation-delay: 3.4s; animation-duration: 8s; }
.love-ripple--4 { left: 72.7%; top: 80.5%; width: 128px; height: 34px; animation-delay: 5.2s; animation-duration: 7.6s; }
.love-mist {
left: 58%;
bottom: 5%;
width: 56%;
height: 22%;
transform: translateX(-50%);
border-radius: 999px;
background: radial-gradient(ellipse at center, rgba(255, 222, 224, .13), rgba(244, 187, 196, .09) 35%, rgba(255, 146, 111, .06) 58%, rgba(0,0,0,0) 78%);
filter: blur(24px);
opacity: .52;
mix-blend-mode: screen;
animation: loveMistDrift 12s ease-in-out infinite alternate;
}
.love-mist--2 {
left: 71%;
bottom: 20%;
width: 36%;
height: 18%;
opacity: .34;
animation-duration: 15s;
animation-direction: alternate-reverse;
}
.love-particle {
width: 3px;
height: 3px;
border-radius: 50%;
background: rgba(255, 188, 196, .92);
box-shadow: 0 0 9px rgba(255, 92, 118, .64), 0 0 16px rgba(255, 156, 88, .28);
opacity: 0;
mix-blend-mode: screen;
animation: loveParticleFloat var(--pDur, 7.8s) ease-in-out infinite;
}
.love-particle--1 { left: 56%; top: 47%; --pDur: 7.2s; animation-delay: .3s; }
.love-particle--2 { left: 61%; top: 41%; --pDur: 8.1s; animation-delay: 1.5s; }
.love-particle--3 { left: 67%; top: 44%; --pDur: 7.8s; animation-delay: 2.6s; }
.love-particle--4 { left: 72%; top: 50%; --pDur: 8.6s; animation-delay: 3.8s; }
.love-particle--5 { left: 76%; top: 38%; --pDur: 9.2s; animation-delay: 4.8s; }
.love-particle--6 { left: 51%; top: 55%; --pDur: 8.4s; animation-delay: 5.7s; }
@keyframes loveIdleCamera {
0% { transform: scale(1.01) translate3d(-0.22vw, -0.12vh, 0); }
50% { transform: scale(1.018) translate3d(0.12vw, 0.18vh, 0); }
100% { transform: scale(1.013) translate3d(0.42vw, -0.10vh, 0); }
}
@keyframes loveTunnelPulse {
0% { opacity: .56; transform: translate(-50%, -50%) scale(.98); }
100% { opacity: .88; transform: translate(-50%, -50%) scale(1.04); }
}
@keyframes loveHeartPulse {
0% { opacity: .42; transform: translate(-50%, -50%) scale(.94); }
100% { opacity: .86; transform: translate(-50%, -50%) scale(1.08); }
}
@keyframes loveShimmerDrift {
0% { opacity: .38; transform: translateX(-50%) translate3d(-12px, 8px, 0) skewX(-2deg); }
50% { opacity: .70; }
100% { opacity: .50; transform: translateX(-50%) translate3d(16px, -8px, 0) skewX(2deg); }
}
@keyframes loveRipple {
0% { opacity: 0; transform: translate(-50%, -50%) scale(.32); }
18% { opacity: .58; }
58% { opacity: .30; }
100% { opacity: 0; transform: translate(-50%, -50%) scale(2.6); }
}
@keyframes loveMistDrift {
0% { opacity: .34; transform: translateX(-50%) translate3d(-2.5%, 6px, 0) scale(.96); }
100% { opacity: .58; transform: translateX(-50%) translate3d(2.8%, -5px, 0) scale(1.04); }
}
@keyframes loveParticleFloat {
0% { opacity: 0; transform: translate3d(0, 18px, 0) scale(.6); }
18% { opacity: .72; }
52% { opacity: .44; }
100% { opacity: 0; transform: translate3d(18px, -48px, 0) scale(.15); }
}
@media (max-width: 900px) {
.love-tunnel-glow { left: 67%; top: 50%; width: 48%; height: 43%; }
.love-heart-glow--left { left: 48.2%; top: 42%; }
.love-heart-glow--right { left: 75.5%; top: 40.7%; }
.love-water-shimmer { left: 65%; bottom: 7%; width: 50%; height: 28%; }
.love-ripple--1 { left: 63%; top: 76%; width: 92px; height: 28px; }
.love-ripple--2 { left: 70%; top: 74%; width: 82px; height: 24px; }
.love-ripple--3 { left: 58%; top: 79%; width: 112px; height: 31px; }
.love-ripple--4 { left: 75%; top: 80%; width: 98px; height: 27px; }
.love-mist { left: 65%; width: 66%; height: 20%; }
}
/* === V21: Love Is Bond visible water/ripple pass + cache-bust === */
/* The last pass was too subtle, so this pass intentionally reads stronger on first glance. */
.app[data-mode="ride"][data-scene="love"] .atmosphere--vignette {
opacity: .62 !important;
background:
radial-gradient(circle at 64% 45%, transparent 0 36%, rgba(0,0,0,.18) 62%, rgba(0,0,0,.58) 100%) !important;
}
.app[data-mode="ride"][data-scene="love"] .stage-fx--love {
z-index: 30;
opacity: 1;
}
/* Big romantic tunnel glow that should visibly breathe behind the sign/entrance. */
.app[data-mode="ride"][data-scene="love"] .love-tunnel-glow {
left: 66%;
top: 49%;
width: 44%;
height: 52%;
background:
radial-gradient(ellipse at center,
rgba(255, 65, 104, .46) 0%,
rgba(255, 88, 120, .32) 24%,
rgba(255, 142, 82, .18) 48%,
rgba(255, 142, 82, .06) 67%,
rgba(0,0,0,0) 82%);
filter: blur(22px);
opacity: .92;
}
/* Stronger heart/sign glow so the page immediately feels different from the other attractions. */
.app[data-mode="ride"][data-scene="love"] .love-heart-glow {
width: 17%;
height: 17%;
background:
radial-gradient(ellipse at center,
rgba(255, 42, 84, .58),
rgba(255, 98, 126, .34) 35%,
rgba(255, 165, 102, .13) 58%,
rgba(0,0,0,0) 78%);
filter: blur(16px);
opacity: .9;
}
/* Visible water glow/reflections — wider and brighter than V20. */
.app[data-mode="ride"][data-scene="love"] .love-water-shimmer {
left: 63.5%;
bottom: 0%;
width: 52%;
height: 36%;
opacity: .95;
filter: blur(6px);
background:
repeating-linear-gradient(90deg,
rgba(255, 55, 100, 0) 0%,
rgba(255, 55, 100, .30) 3%,
rgba(255, 186, 106, .22) 6%,
rgba(255, 55, 100, .06) 9%,
rgba(255, 55, 100, 0) 13%),
repeating-linear-gradient(0deg,
rgba(255, 144, 116, 0) 0px,
rgba(255, 150, 118, .16) 2px,
rgba(255, 95, 122, 0) 7px),
radial-gradient(ellipse at 55% 32%, rgba(255, 92, 126, .30), rgba(255, 151, 92, .12) 42%, rgba(255, 92, 126, 0) 70%);
animation: loveShimmerDrift 4.8s ease-in-out infinite alternate;
}
.app[data-mode="ride"][data-scene="love"] .love-water-shimmer--2 {
left: 69%;
bottom: 8%;
width: 42%;
height: 28%;
opacity: .72;
filter: blur(8px);
}
/* Make ripple rings obvious enough to verify in screenshots. */
.app[data-mode="ride"][data-scene="love"] .love-ripple {
border: 2px solid rgba(255, 222, 202, .78);
background:
radial-gradient(ellipse at center,
rgba(255, 92, 132, .18),
rgba(255, 178, 102, .14) 38%,
rgba(255, 92, 132, .04) 62%,
rgba(0,0,0,0) 78%);
box-shadow:
0 0 12px rgba(255, 92, 128, .42),
inset 0 0 16px rgba(255, 199, 160, .18);
filter: blur(.2px);
}
.app[data-mode="ride"][data-scene="love"] .love-ripple--1 { left: 62%; top: 75.8%; width: 190px; height: 56px; animation-duration: 5.8s; }
.app[data-mode="ride"][data-scene="love"] .love-ripple--2 { left: 68%; top: 74%; width: 160px; height: 48px; animation-duration: 6.2s; }
.app[data-mode="ride"][data-scene="love"] .love-ripple--3 { left: 56.5%; top: 79.4%; width: 230px; height: 62px; animation-duration: 6.8s; }
.app[data-mode="ride"][data-scene="love"] .love-ripple--4 { left: 73%; top: 80.2%; width: 200px; height: 56px; animation-duration: 6.5s; }
/* More visible mist on top of the wet floor/water without becoming BBQ smoke. */
.app[data-mode="ride"][data-scene="love"] .love-mist {
left: 61%;
bottom: 0%;
width: 64%;
height: 26%;
opacity: .72;
filter: blur(18px);
background:
radial-gradient(ellipse at center,
rgba(255, 228, 232, .20),
rgba(244, 187, 202, .16) 32%,
rgba(255, 146, 120, .10) 56%,
rgba(0,0,0,0) 78%);
}
.app[data-mode="ride"][data-scene="love"] .love-mist--2 {
left: 70%;
bottom: 18%;
width: 42%;
height: 22%;
opacity: .54;
}
/* Particles bigger/brighter so the tunnel feels alive. */
.app[data-mode="ride"][data-scene="love"] .love-particle {
width: 5px;
height: 5px;
background: rgba(255, 208, 214, .98);
box-shadow:
0 0 10px rgba(255, 78, 116, .85),
0 0 22px rgba(255, 160, 88, .48);
}
/* Stronger ripple opacity curve. */
@keyframes loveRipple {
0% { opacity: 0; transform: translate(-50%, -50%) scale(.24); }
13% { opacity: .92; }
50% { opacity: .58; }
78% { opacity: .24; }
100% { opacity: 0; transform: translate(-50%, -50%) scale(2.85); }
}
@media (max-width: 900px) {
.app[data-mode="ride"][data-scene="love"] .love-tunnel-glow { left: 67%; top: 49%; width: 54%; height: 48%; }
.app[data-mode="ride"][data-scene="love"] .love-water-shimmer { left: 66%; bottom: 0%; width: 62%; height: 36%; }
.app[data-mode="ride"][data-scene="love"] .love-ripple--1 { left: 63%; top: 76%; width: 150px; height: 44px; }
.app[data-mode="ride"][data-scene="love"] .love-ripple--2 { left: 70%; top: 74%; width: 130px; height: 38px; }
.app[data-mode="ride"][data-scene="love"] .love-ripple--3 { left: 58%; top: 79%; width: 180px; height: 50px; }
.app[data-mode="ride"][data-scene="love"] .love-ripple--4 { left: 75%; top: 80%; width: 155px; height: 44px; }
}
/* === V22: Love Is Bond refined water pass === */
/* Pulls back the obvious pink fog and big white rings from V21. */
.app[data-mode="ride"][data-scene="love"] .stage-fx--love {
z-index: 6;
opacity: 1;
}
/* Keep the global darkness consistent instead of washing the whole page red. */
.app[data-mode="ride"][data-scene="love"] .atmosphere--vignette {
opacity: .92 !important;
background: radial-gradient(circle at 58% 48%, transparent 0%, transparent 47%, rgba(0,0,0,.44) 77%, rgba(0,0,0,.88) 100%) !important;
}
/* Make the tunnel glow feel like light from the sign, not a red smoke cloud. */
.app[data-mode="ride"][data-scene="love"] .love-tunnel-glow {
left: 65.5%;
top: 47.8%;
width: 31%;
height: 37%;
opacity: .58;
filter: blur(28px);
background:
radial-gradient(ellipse at center,
rgba(255, 72, 103, .28) 0%,
rgba(255, 92, 115, .16) 30%,
rgba(255, 156, 92, .08) 54%,
rgba(0,0,0,0) 78%);
}
/* Softer sign hearts, less aggressive overlay. */
.app[data-mode="ride"][data-scene="love"] .love-heart-glow {
width: 11%;
height: 12%;
opacity: .54;
filter: blur(20px);
background:
radial-gradient(ellipse at center,
rgba(255, 64, 98, .31),
rgba(255, 108, 130, .13) 44%,
rgba(0,0,0,0) 74%);
}
/* Replace the big pink fog with believable wet-floor shimmer. */
.app[data-mode="ride"][data-scene="love"] .love-water-shimmer {
left: 63%;
bottom: 2%;
width: 43%;
height: 25%;
opacity: .42;
filter: blur(8px);
background:
repeating-linear-gradient(90deg,
rgba(255, 66, 105, 0) 0%,
rgba(255, 66, 105, .12) 3%,
rgba(255, 180, 105, .10) 5.5%,
rgba(255, 66, 105, 0) 10%),
repeating-linear-gradient(0deg,
rgba(255, 150, 120, 0) 0px,
rgba(255, 150, 120, .08) 1px,
rgba(255, 95, 122, 0) 6px),
radial-gradient(ellipse at 55% 36%, rgba(255, 91, 122, .16), rgba(255, 157, 93, .07) 40%, rgba(255, 92, 126, 0) 68%);
animation: loveShimmerDrift 8.5s ease-in-out infinite alternate;
}
.app[data-mode="ride"][data-scene="love"] .love-water-shimmer--2 {
left: 68%;
bottom: 8%;
width: 31%;
height: 18%;
opacity: .28;
filter: blur(12px);
}
/* Ripples should read as water movement, not drawn white circles. */
.app[data-mode="ride"][data-scene="love"] .love-ripple {
border: 1px solid rgba(255, 211, 188, .26);
background: transparent;
box-shadow: 0 0 8px rgba(255, 107, 132, .16);
filter: blur(.7px);
mix-blend-mode: screen;
}
.app[data-mode="ride"][data-scene="love"] .love-ripple--1 { left: 61.5%; top: 76.6%; width: 92px; height: 22px; animation-duration: 8.8s; }
.app[data-mode="ride"][data-scene="love"] .love-ripple--2 { left: 68%; top: 74.9%; width: 76px; height: 18px; animation-duration: 9.4s; }
.app[data-mode="ride"][data-scene="love"] .love-ripple--3 { left: 57.5%; top: 79.6%; width: 118px; height: 26px; animation-duration: 10s; }
.app[data-mode="ride"][data-scene="love"] .love-ripple--4 { left: 72%; top: 80.4%; width: 96px; height: 22px; animation-duration: 9.6s; }
/* Low mist only, not a heavy pink cloud. */
.app[data-mode="ride"][data-scene="love"] .love-mist {
left: 62%;
bottom: 2%;
width: 44%;
height: 16%;
opacity: .24;
filter: blur(25px);
background:
radial-gradient(ellipse at center,
rgba(255, 226, 228, .09),
rgba(245, 188, 198, .06) 35%,
rgba(255, 146, 120, .04) 58%,
rgba(0,0,0,0) 78%);
}
.app[data-mode="ride"][data-scene="love"] .love-mist--2 {
left: 71%;
bottom: 18%;
width: 30%;
height: 13%;
opacity: .18;
}
/* Particles should feel like dust/light catching, not glitter. */
.app[data-mode="ride"][data-scene="love"] .love-particle {
width: 2.5px;
height: 2.5px;
background: rgba(255, 199, 205, .70);
box-shadow: 0 0 8px rgba(255, 94, 124, .34), 0 0 14px rgba(255, 160, 88, .18);
}
/* Slower, softer ripple curve. */
@keyframes loveRipple {
0% { opacity: 0; transform: translate(-50%, -50%) scale(.58); }
22% { opacity: .34; }
62% { opacity: .18; }
100% { opacity: 0; transform: translate(-50%, -50%) scale(1.65); }
}
@media (max-width: 900px) {
.app[data-mode="ride"][data-scene="love"] .love-tunnel-glow { left: 67%; top: 48.5%; width: 38%; height: 35%; }
.app[data-mode="ride"][data-scene="love"] .love-water-shimmer { left: 66%; bottom: 3%; width: 48%; height: 22%; }
.app[data-mode="ride"][data-scene="love"] .love-ripple--1 { left: 63%; top: 76%; width: 78px; height: 18px; }
.app[data-mode="ride"][data-scene="love"] .love-ripple--2 { left: 70%; top: 74%; width: 68px; height: 16px; }
.app[data-mode="ride"][data-scene="love"] .love-ripple--3 { left: 58%; top: 79%; width: 96px; height: 22px; }
.app[data-mode="ride"][data-scene="love"] .love-ripple--4 { left: 75%; top: 80%; width: 82px; height: 18px; }
}
/* === V23: Love Is Bond cleaner glow + cleaner water movement === */
/* Clean goal: keep the soft pink glow, remove the pasted-circle ripple look. */
.app[data-mode="ride"][data-scene="love"] .stage-fx--love {
z-index: 6;
opacity: 1;
}
/* Keep the glow fitted to the actual Swan Tunnel instead of spreading across the floor. */
.app[data-mode="ride"][data-scene="love"] .love-tunnel-glow {
left: 66.2%;
top: 48.6%;
width: 25%;
height: 31%;
opacity: .52;
filter: blur(24px);
background:
radial-gradient(ellipse at center,
rgba(255, 74, 108, .30) 0%,
rgba(255, 92, 118, .17) 34%,
rgba(255, 154, 88, .07) 58%,
rgba(0,0,0,0) 80%);
}
/* Soft sign/heart glow only — not a giant red wash. */
.app[data-mode="ride"][data-scene="love"] .love-heart-glow {
width: 9.5%;
height: 10%;
opacity: .46;
filter: blur(18px);
background:
radial-gradient(ellipse at center,
rgba(255, 62, 100, .30),
rgba(255, 104, 128, .12) 44%,
rgba(0,0,0,0) 76%);
}
/* Cleaner water shimmer: thin reflection bands, no fog blanket. */
.app[data-mode="ride"][data-scene="love"] .love-water-shimmer {
left: 64.5%;
bottom: 5.5%;
width: 36%;
height: 18%;
opacity: .28;
filter: blur(5px);
background:
repeating-linear-gradient(90deg,
rgba(255, 74, 108, 0) 0%,
rgba(255, 74, 108, .10) 3%,
rgba(255, 175, 102, .08) 5.5%,
rgba(255, 74, 108, 0) 11%),
linear-gradient(180deg,
rgba(255, 105, 130, 0) 0%,
rgba(255, 105, 130, .10) 38%,
rgba(255, 170, 105, .06) 62%,
rgba(255, 105, 130, 0) 100%);
animation: loveShimmerDrift 11s ease-in-out infinite alternate;
}
.app[data-mode="ride"][data-scene="love"] .love-water-shimmer--2 {
left: 71%;
bottom: 9%;
width: 24%;
height: 12%;
opacity: .18;
filter: blur(7px);
}
/* Replace full rings with clean, perspective water glints. */
.app[data-mode="ride"][data-scene="love"] .love-ripple {
border: 0 !important;
box-shadow: none !important;
height: 1px !important;
border-radius: 999px;
background:
linear-gradient(90deg,
rgba(255, 220, 198, 0) 0%,
rgba(255, 220, 198, .18) 19%,
rgba(255, 116, 140, .20) 50%,
rgba(255, 190, 150, .14) 74%,
rgba(255, 220, 198, 0) 100%);
filter: blur(.45px);
opacity: 0;
mix-blend-mode: screen;
transform: translate(-50%, -50%) scaleX(.42);
animation: loveCleanRipple var(--cleanDur, 7.8s) ease-in-out infinite;
}
.app[data-mode="ride"][data-scene="love"] .love-ripple--1 { left: 60.5%; top: 77.4%; width: 155px; --cleanDur: 8.4s; animation-delay: .2s; }
.app[data-mode="ride"][data-scene="love"] .love-ripple--2 { left: 67.5%; top: 75.4%; width: 128px; --cleanDur: 9.1s; animation-delay: 1.9s; }
.app[data-mode="ride"][data-scene="love"] .love-ripple--3 { left: 56.6%; top: 80.2%; width: 190px; --cleanDur: 9.8s; animation-delay: 3.5s; }
.app[data-mode="ride"][data-scene="love"] .love-ripple--4 { left: 72.6%; top: 80.8%; width: 165px; --cleanDur: 8.9s; animation-delay: 5.1s; }
/* Mist becomes almost invisible — just a slight atmosphere at water level. */
.app[data-mode="ride"][data-scene="love"] .love-mist {
left: 64%;
bottom: 3.5%;
width: 36%;
height: 12%;
opacity: .13;
filter: blur(24px);
background:
radial-gradient(ellipse at center,
rgba(255, 228, 232, .07),
rgba(245, 188, 198, .04) 42%,
rgba(0,0,0,0) 78%);
}
.app[data-mode="ride"][data-scene="love"] .love-mist--2 {
left: 71%;
bottom: 18%;
width: 24%;
height: 10%;
opacity: .10;
}
/* Particles stay barely-there. */
.app[data-mode="ride"][data-scene="love"] .love-particle {
width: 2px;
height: 2px;
opacity: 0;
background: rgba(255, 200, 205, .58);
box-shadow: 0 0 7px rgba(255, 94, 124, .24), 0 0 12px rgba(255, 160, 88, .12);
}
/* Cleaner ripple movement: appears like reflection lines, not drawn circles. */
@keyframes loveCleanRipple {
0% { opacity: 0; transform: translate(-50%, -50%) scaleX(.42) translateY(0); }
20% { opacity: .42; }
56% { opacity: .24; transform: translate(-50%, -50%) scaleX(1.06) translateY(-2px); }
100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.52) translateY(-4px); }
}
/* Prevent older V21/V22 loveRipple keyframe from visually controlling the new pass. */
.app[data-mode="ride"][data-scene="love"] .love-ripple::before,
.app[data-mode="ride"][data-scene="love"] .love-ripple::after {
display: none !important;
}
@media (max-width: 900px) {
.app[data-mode="ride"][data-scene="love"] .love-tunnel-glow { left: 67%; top: 49%; width: 32%; height: 29%; }
.app[data-mode="ride"][data-scene="love"] .love-water-shimmer { left: 66%; bottom: 5%; width: 42%; height: 16%; }
.app[data-mode="ride"][data-scene="love"] .love-ripple--1 { left: 62%; top: 77%; width: 118px; }
.app[data-mode="ride"][data-scene="love"] .love-ripple--2 { left: 69%; top: 75%; width: 102px; }
.app[data-mode="ride"][data-scene="love"] .love-ripple--3 { left: 58%; top: 80%; width: 145px; }
.app[data-mode="ride"][data-scene="love"] .love-ripple--4 { left: 75%; top: 81%; width: 128px; }
}
/* === V24: Love Is Bond sign breathing glow === */
/* Adds a clean pulsing pink glow around the actual Love Is Bond sign area. */
.app[data-mode="ride"][data-scene="love"] .stage-fx--love::before,
.app[data-mode="ride"][data-scene="love"] .stage-fx--love::after {
content: "";
position: absolute;
display: block;
pointer-events: none;
mix-blend-mode: screen;
}
/* Wide soft halo behind the full sign and hearts. */
.app[data-mode="ride"][data-scene="love"] .stage-fx--love::before {
left: 63.7%;
top: 37.2%;
width: 34%;
height: 18%;
transform: translate(-50%, -50%) rotate(-1.8deg);
border-radius: 999px;
background:
radial-gradient(ellipse at center,
rgba(255, 54, 98, .32) 0%,
rgba(255, 82, 118, .22) 28%,
rgba(255, 145, 96, .10) 52%,
rgba(0,0,0,0) 78%);
filter: blur(20px);
opacity: .58;
animation: loveSignBreath 4.6s ease-in-out infinite;
}
/* Narrower neon-tube glow right over the lettering. */
.app[data-mode="ride"][data-scene="love"] .stage-fx--love::after {
left: 63.9%;
top: 36.3%;
width: 27%;
height: 8.2%;
transform: translate(-50%, -50%) rotate(-1.8deg);
border-radius: 999px;
background:
radial-gradient(ellipse at 50% 50%,
rgba(255, 220, 225, .30) 0%,
rgba(255, 70, 112, .34) 24%,
rgba(255, 48, 96, .18) 48%,
rgba(0,0,0,0) 76%);
filter: blur(9px);
opacity: .46;
animation: loveSignTubeFlicker 6.8s ease-in-out infinite;
}
/* The left/right heart glow now breathes with the sign instead of sitting static. */
.app[data-mode="ride"][data-scene="love"] .love-heart-glow {
animation: loveHeartPulse 3.7s ease-in-out infinite alternate, loveHeartNeonBlink 7.4s steps(1,end) infinite;
}
@keyframes loveSignBreath {
0%, 100% {
opacity: .42;
filter: blur(22px) brightness(.92);
transform: translate(-50%, -50%) rotate(-1.8deg) scale(.96);
}
45% {
opacity: .80;
filter: blur(20px) brightness(1.22);
transform: translate(-50%, -50%) rotate(-1.8deg) scale(1.035);
}
58% {
opacity: .68;
filter: blur(21px) brightness(1.10);
}
}
@keyframes loveSignTubeFlicker {
0%, 100% { opacity: .40; filter: blur(9px) brightness(1); }
22% { opacity: .62; filter: blur(8px) brightness(1.26); }
24% { opacity: .44; }
25% { opacity: .66; }
48% { opacity: .50; }
67% { opacity: .72; filter: blur(8px) brightness(1.35); }
69% { opacity: .46; }
70% { opacity: .64; }
}
@keyframes loveHeartNeonBlink {
0%, 100% { opacity: .46; }
36% { opacity: .62; }
37% { opacity: .38; }
38% { opacity: .64; }
72% { opacity: .55; }
73% { opacity: .42; }
74% { opacity: .60; }
}
@media (max-width: 900px) {
.app[data-mode="ride"][data-scene="love"] .stage-fx--love::before {
left: 64.5%;
top: 37.8%;
width: 40%;
height: 16%;
}
.app[data-mode="ride"][data-scene="love"] .stage-fx--love::after {
left: 64.5%;
top: 36.8%;
width: 32%;
height: 7.5%;
}
}
/* === V25: Love Is Bond subtle rose petals === */
/* Small ambient petals from the floral arch. They fade before touching the floor. */
.love-petal {
position: absolute;
display: block;
width: var(--petalW, 11px);
height: var(--petalH, 7px);
left: var(--petalX);
top: var(--petalY);
border-radius: 70% 30% 70% 30%;
background:
radial-gradient(ellipse at 38% 35%,
rgba(255, 214, 222, .82) 0%,
rgba(255, 133, 158, .62) 35%,
rgba(170, 38, 70, .36) 72%,
rgba(110, 12, 34, 0) 100%);
box-shadow:
0 0 5px rgba(255, 88, 124, .20),
0 0 12px rgba(255, 128, 148, .10);
filter: blur(.15px);
opacity: 0;
mix-blend-mode: screen;
pointer-events: none;
transform-origin: center;
animation: lovePetalFall var(--petalDur, 11s) ease-in-out infinite;
animation-delay: var(--petalDelay, 0s);
}
/* Spawn mostly from the flowers above/around the sign. Sparse, not a petal shower. */
.love-petal--1 { --petalX: 52%; --petalY: 31%; --petalW: 10px; --petalH: 7px; --petalDur: 12.2s; --petalDelay: .2s; }
.love-petal--2 { --petalX: 57%; --petalY: 29%; --petalW: 9px; --petalH: 6px; --petalDur: 13.4s; --petalDelay: 2.6s; }
.love-petal--3 { --petalX: 63%; --petalY: 27%; --petalW: 12px; --petalH: 7px; --petalDur: 12.8s; --petalDelay: 4.1s; }
.love-petal--4 { --petalX: 68%; --petalY: 29%; --petalW: 10px; --petalH: 6px; --petalDur: 14s; --petalDelay: 6.5s; }
.love-petal--5 { --petalX: 73%; --petalY: 31%; --petalW: 11px; --petalH: 7px; --petalDur: 12.6s; --petalDelay: 8.4s; }
.love-petal--6 { --petalX: 59%; --petalY: 36%; --petalW: 8px; --petalH: 5px; --petalDur: 15s; --petalDelay: 10.2s; }
.love-petal--7 { --petalX: 70%; --petalY: 35%; --petalW: 9px; --petalH: 6px; --petalDur: 13.8s; --petalDelay: 12.1s; }
.love-petal--8 { --petalX: 65%; --petalY: 33%; --petalW: 10px; --petalH: 6px; --petalDur: 16s; --petalDelay: 14.6s; }
.app[data-mode="ride"][data-scene="love"] .love-petal {
animation-play-state: running;
}
@keyframes lovePetalFall {
0% {
opacity: 0;
transform: translate3d(0, 0, 0) rotate(0deg) scale(.72);
}
8% {
opacity: .52;
}
34% {
opacity: .42;
transform: translate3d(-18px, 82px, 0) rotate(78deg) scale(.92);
}
66% {
opacity: .28;
transform: translate3d(18px, 178px, 0) rotate(158deg) scale(.82);
}
84% {
opacity: .09;
transform: translate3d(-8px, 238px, 0) rotate(224deg) scale(.62);
}
100% {
opacity: 0;
transform: translate3d(10px, 280px, 0) rotate(290deg) scale(.42);
}
}
@media (max-width: 900px) {
.love-petal {
width: calc(var(--petalW, 11px) * .82);
height: calc(var(--petalH, 7px) * .82);
}
.love-petal--1 { --petalX: 51%; --petalY: 32%; }
.love-petal--2 { --petalX: 56%; --petalY: 30%; }
.love-petal--3 { --petalX: 63%; --petalY: 28%; }
.love-petal--4 { --petalX: 69%; --petalY: 30%; }
.love-petal--5 { --petalX: 75%; --petalY: 32%; }
}
/* === V26: Mobile look-around and swipe control pass === */
.app {
--hub-pan-x: 0px;
--hub-pan-y: 0px;
}
@media (max-width: 900px) {
/* Clearer phone instructions instead of keyboard instructions. */
.controls {
justify-content: center;
text-align: center;
gap: 0;
left: 10px;
right: 10px;
bottom: max(10px, env(safe-area-inset-bottom));
letter-spacing: .13em;
}
.controls span { display: none; }
.controls::before {
content: "DRAG TO LOOK • SWIPE RIDES • TAP TO ENTER";
color: rgba(242,223,182,.64);
}
.app[data-mode="ride"] .controls::before {
content: "SWIPE RIDES • TAP OPTIONS • B BACK";
}
/* Mobile hub becomes a look-around view: centered by default, draggable with a finger. */
.app.is-live[data-mode="hub"] .hub-frame {
animation: none !important;
transform:
translate(calc(-50% + var(--hub-pan-x, 0px)), calc(-50% + var(--hub-pan-y, 0px)))
scale(1.006) !important;
transition: transform 180ms ease-out;
touch-action: none;
will-change: transform;
}
.app.is-mobile-panning .hub-frame {
transition: none !important;
}
.hub-world {
touch-action: none;
cursor: grab;
}
.app.is-mobile-panning .hub-world {
cursor: grabbing;
}
/* Keep the boot/start screen visually centered on mobile; slight left nudge for the start control. */
.retro-title {
margin-left: -1.6vw;
}
.press-start {
margin-left: -1.6vw;
}
}
@media (max-width: 520px) {
.controls::before {
content: "DRAG LOOK • SWIPE RIDES • TAP";
font-size: 9px;
letter-spacing: .11em;
}
.app[data-mode="ride"] .controls::before {
content: "SWIPE RIDES • TAP OPTIONS";
}
}
/* === V27: Mobile boot title fit pass === */
/* Fixes HEARTLAND being too wide/cropped on phone during boot. */
@media (max-width: 900px) {
.retro-title {
width: 100vw;
max-width: 100vw;
margin-left: 0 !important;
padding: 0 18px;
overflow: visible;
}
.retro-title__word {
font-size: clamp(39px, 12.2vw, 58px) !important;
letter-spacing: .012em !important;
line-height: .88;
max-width: calc(100vw - 36px);
white-space: nowrap;
transform: scaleX(.92);
transform-origin: center;
}
.retro-title__sub {
font-size: 8px !important;
letter-spacing: .28em !important;
max-width: calc(100vw - 40px);
white-space: nowrap;
}
.press-start {
margin-left: 0 !important;
}
}
@media (max-width: 430px) {
.retro-title__word {
font-size: clamp(37px, 11.4vw, 51px) !important;
letter-spacing: .004em !important;
transform: scaleX(.90);
}
.retro-title__sub {
font-size: 7px !important;
letter-spacing: .24em !important;
}
}
@media (max-width: 375px) {
.retro-title__word {
font-size: 40px !important;
transform: scaleX(.88);
}
}
/* === V29: Heartland Return Man arcade prototype === */
.stage-action--arcade {
border-color: rgba(255, 210, 115, .58) !important;
color: rgba(255, 233, 176, .96) !important;
background: linear-gradient(90deg, rgba(88, 26, 8, .58), rgba(13, 7, 4, .78)) !important;
box-shadow: 0 0 22px rgba(255, 157, 62, .16);
}
.stage-menu.is-arcade-hidden,
.back-btn.is-arcade-hidden {
opacity: 0 !important;
pointer-events: none !important;
}
.return-game {
position: fixed;
inset: 0;
z-index: 68;
display: grid;
place-items: center;
padding: max(14px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
background:
radial-gradient(circle at 50% 40%, rgba(255, 72, 34, .18), transparent 36%),
radial-gradient(circle at 50% 70%, rgba(0, 130, 115, .10), transparent 44%),
rgba(0,0,0,.72);
opacity: 0;
transform: scale(.985);
transition: opacity 220ms ease, transform 220ms ease;
pointer-events: none;
}
.return-game.is-open { opacity: 1; transform: scale(1); pointer-events: auto; }
.return-game[hidden] { display: none !important; }
.return-game__cabinet {
width: min(1120px, calc(100vw - 28px));
max-height: calc(100vh - 28px);
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
gap: 10px;
padding: 14px;
border: 1px solid rgba(255, 169, 82, .34);
border-radius: 21px;
background:
linear-gradient(145deg, rgba(47, 12, 4, .88), rgba(4, 2, 1, .95) 45%, rgba(0, 24, 20, .88)),
#050201;
box-shadow:
0 32px 90px rgba(0,0,0,.68),
inset 0 0 0 1px rgba(255,255,255,.04),
inset 0 0 60px rgba(255, 78, 34, .08);
overflow: hidden;
}
.return-game__topbar {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 15px;
color: rgba(242,223,182,.82);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.return-game__eyebrow { display: block; margin-bottom: 4px; font-size: 9px; letter-spacing: .24em; color: rgba(255, 170, 82, .80); }
.return-game__topbar h2 {
margin: 0;
font: 800 clamp(28px, 4.5vw, 68px)/.82 Georgia, 'Times New Roman', serif;
letter-spacing: .02em;
text-transform: uppercase;
color: rgba(255,230,188,.98);
text-shadow: 0 0 12px rgba(255,82,42,.8), 0 0 38px rgba(255,82,42,.32);
}
.return-game__scoreboard { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; font-size: 10px; letter-spacing: .12em; }
.return-game__scoreboard span { padding: 8px 10px; border: 1px solid rgba(255, 169, 82, .22); background: rgba(0,0,0,.36); border-radius: 999px; }
.return-game__screen {
position: relative;
min-height: 0;
border: 12px solid rgba(9,8,8,.95);
border-radius: 22px;
overflow: hidden;
background: #020201;
box-shadow: inset 0 0 42px rgba(0,0,0,.72), 0 0 40px rgba(255, 103, 42, .12);
}
.return-game__screen::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 3;
background:
linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
radial-gradient(circle at 50% 40%, transparent 0 55%, rgba(0,0,0,.35) 90%);
background-size: 100% 5px, 100% 100%;
mix-blend-mode: soft-light;
}
#returnCanvas {
display: block;
width: 100%;
height: min(56vh, 610px);
max-height: calc(100vh - 245px);
min-height: 360px;
touch-action: none;
cursor: crosshair;
filter: saturate(.92) contrast(1.05);
}
.return-game__overlay {
position: absolute;
inset: 0;
z-index: 5;
display: grid;
place-content: center;
gap: 12px;
text-align: center;
background: radial-gradient(circle at 50% 45%, rgba(0,0,0,.36), rgba(0,0,0,.78));
color: rgba(242,223,182,.88);
padding: 24px;
transition: opacity 180ms ease, visibility 180ms ease;
}
.return-game__overlay.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.return-game__insert { color: rgba(255, 169, 82, .90); font: 11px/1 ui-monospace, monospace; letter-spacing: .32em; animation: arcadeBlink 1s steps(1,end) infinite; }
.return-game__title { font: 800 clamp(32px, 7vw, 86px)/.82 Georgia, serif; text-transform: uppercase; color: rgba(255,232,196,.98); text-shadow: 0 0 12px rgba(255,88,42,.84), 0 0 42px rgba(255,58,29,.40); }
.return-game__overlay p { margin: 0 auto; max-width: 420px; font: 12px/1.45 ui-monospace, monospace; letter-spacing: .07em; color: rgba(242,223,182,.72); }
.return-game__start, .return-game__close, .return-game__mobile-actions button {
border: 1px solid rgba(255, 169, 82, .38);
background: rgba(9,4,2,.70);
color: rgba(242,223,182,.86);
font: 10px/1 ui-monospace, monospace;
letter-spacing: .16em;
text-transform: uppercase;
border-radius: 999px;
cursor: pointer;
transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}
.return-game__start { justify-self: center; padding: 12px 20px; background: rgba(83, 26, 8, .75); color: #ffe4aa; }
.return-game__start:hover, .return-game__close:hover, .return-game__mobile-actions button:hover { transform: translateY(-1px); border-color: rgba(255, 217, 144, .72); background: rgba(69, 21, 7, .82); }
.break-prompt {
--break-progress: 1;
position: absolute;
z-index: 6;
left: 50%; top: 50%;
transform: translate(-50%,-50%);
display: grid;
gap: 6px;
text-align: center;
min-width: min(340px, 82vw);
padding: 18px 20px 16px;
border: 1px solid rgba(255, 225, 152, .68);
background: rgba(20, 5, 2, .80);
color: #fff1c8;
box-shadow: 0 0 46px rgba(255, 79, 34, .30);
backdrop-filter: blur(8px);
}
.break-prompt::after {
content: "";
height: 5px;
width: calc(var(--break-progress) * 100%);
background: linear-gradient(90deg, #ff4c31, #ffe29d);
justify-self: stretch;
border-radius: 999px;
}
.break-prompt span { font: 800 clamp(25px, 6vw, 58px)/.86 Georgia, serif; text-transform: uppercase; text-shadow: 0 0 16px rgba(255,71,40,.8); }
.break-prompt strong { font: 14px/1 ui-monospace, monospace; letter-spacing: .24em; }
.break-prompt small { font: 10px/1 ui-monospace, monospace; letter-spacing: .30em; color: rgba(242,223,182,.66); }
.announcer-text {
position: absolute;
z-index: 4;
left: 50%; top: 15px;
transform: translateX(-50%);
max-width: min(640px, calc(100% - 24px));
padding: 9px 12px;
border: 1px solid rgba(255, 169, 82, .22);
background: rgba(0,0,0,.52);
color: rgba(255, 229, 177, .86);
text-align: center;
font: 10px/1 ui-monospace, monospace;
letter-spacing: .20em;
text-transform: uppercase;
text-shadow: 0 0 13px rgba(255,88,42,.55);
transition: transform 120ms ease, color 120ms ease;
}
.announcer-text.is-hot { transform: translateX(-50%) scale(1.035); color: #fff4c9; }
.return-game__controls { display: grid; gap: 10px; align-items: center; grid-template-columns: 1fr auto; color: rgba(242,223,182,.62); font: 10px/1.35 ui-monospace, monospace; letter-spacing: .08em; }
.return-game__mobile-actions { display: none; gap: 6px; justify-content: center; }
.return-game__mobile-actions button { padding: 11px 12px; min-width: 64px; }
.return-game__close { padding: 11px 14px; }
@keyframes arcadeBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .28; } }
.app[data-scene="game"] .scene-card { opacity: 0 !important; }
.app[data-scene="game"] .stage-menu { border-color: rgba(255, 169, 82, .40); box-shadow: 0 0 30px rgba(255, 103, 42, .13); }
@media (max-width: 900px) {
.return-game { padding: max(8px, env(safe-area-inset-top)) 7px max(7px, env(safe-area-inset-bottom)); }
.return-game__cabinet { width: calc(100vw - 14px); max-height: calc(100vh - 14px); padding: 8px; border-radius: 15px; gap: 7px; }
.return-game__topbar { align-items: flex-start; gap: 8px; }
.return-game__topbar h2 { font-size: clamp(26px, 8vw, 44px); }
.return-game__eyebrow { font-size: 7px; letter-spacing: .18em; }
.return-game__scoreboard { gap: 5px; font-size: 8px; letter-spacing: .06em; }
.return-game__scoreboard span { padding: 6px 7px; }
.return-game__screen { border-width: 7px; border-radius: 15px; }
#returnCanvas { height: min(58vh, 480px); min-height: 330px; max-height: calc(100vh - 220px); }
.return-game__controls { grid-template-columns: 1fr; gap: 8px; }
.return-game__help { font-size: 8px; text-align: center; opacity: .78; }
.return-game__mobile-actions { display: flex; flex-wrap: wrap; }
.return-game__close { justify-self: center; padding: 9px 12px; }
.return-game__title { font-size: clamp(34px, 12vw, 58px); }
.return-game__overlay p { font-size: 10px; }
.announcer-text { top: 9px; font-size: 8px; letter-spacing: .13em; padding: 7px 9px; }
}
@media (max-width: 520px) {
.return-game__mobile-actions button { min-width: 58px; padding: 10px 8px; font-size: 8px; letter-spacing: .10em; }
#returnCanvas { min-height: 305px; height: 53vh; }
}
/* === V30 Return Man core fix === */
.return-game__screen {
background:
radial-gradient(circle at 50% 65%, rgba(255, 115, 44, .08), transparent 45%),
#020201;
}
#returnCanvas {
min-height: 405px;
height: min(62vh, 660px);
cursor: crosshair;
}
.return-game__help::before {
content: "V30 CORE FIX — ";
color: rgba(255, 183, 94, .88);
}
.break-prompt small {
color: rgba(255, 224, 160, .82);
}
.break-prompt small::after {
content: " / SPACE";
}
.return-game__mobile-actions button[data-arcade-action="spin"] {
display: none !important;
}
@media (max-width: 900px) {
#returnCanvas {
height: min(61vh, 520px);
min-height: 350px;
}
.return-game__help {
font-size: 8px;
}
}
@media (max-width: 520px) {
#returnCanvas {
height: 56vh;
min-height: 330px;
}
}
/* === V31 Return Man no-early-tackle pass === */
#returnCanvas:focus {
outline: 1px solid rgba(255, 210, 130, .42);
outline-offset: -5px;
}
.return-game__help::before {
content: "V31 NO EARLY TACKLE — " !important;
}
.break-prompt {
pointer-events: auto;
}
/* === V32 Break prompt visibility fix === */
/* Hidden attribute was being overridden by .break-prompt { display:grid; } */
.break-prompt[hidden],
#breakPrompt[hidden] {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
.break-prompt:not([hidden]),
#breakPrompt:not([hidden]) {
display: grid !important;
opacity: 1;
visibility: visible;
}
/* === V33 Return Man gameplay feel pass === */
.return-game__help::before {
content: "V33 GAMEPLAY FEEL — " !important;
color: rgba(255, 183, 94, .88);
}
#returnCanvas:focus {
outline: 1px solid rgba(255, 210, 130, .42);
outline-offset: -5px;
}
.break-prompt[hidden],
#breakPrompt[hidden] {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
.break-prompt:not([hidden]),
#breakPrompt:not([hidden]) {
display: grid !important;
opacity: 1;
visibility: visible;
}
.return-game__screen {
background:
radial-gradient(circle at 50% 65%, rgba(255, 115, 44, .08), transparent 45%),
#020201;
}
#returnCanvas {
min-height: 405px;
height: min(62vh, 660px);
}
/* === V34 Mobile first-time hint overlay === */
.mobile-hint {
position: fixed;
z-index: 76;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(.96);
display: none;
align-items: center;
gap: 14px;
max-width: min(330px, calc(100vw - 44px));
padding: 14px 16px;
border: 1px solid rgba(255, 211, 142, .34);
border-radius: 18px;
background:
radial-gradient(circle at 18% 24%, rgba(255, 120, 55, .20), transparent 44%),
rgba(6, 3, 1, .72);
color: rgba(242, 223, 182, .92);
box-shadow:
0 20px 58px rgba(0,0,0,.52),
inset 0 0 0 1px rgba(255,255,255,.045),
0 0 34px rgba(255, 82, 34, .16);
backdrop-filter: blur(9px);
opacity: 0;
pointer-events: none;
transition: opacity 420ms ease, transform 420ms ease;
}
.mobile-hint.is-visible {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.mobile-hint__pad {
position: relative;
flex: 0 0 72px;
width: 72px;
height: 72px;
border: 1px solid rgba(255, 211, 142, .22);
border-radius: 18px;
background: rgba(0,0,0,.22);
box-shadow: inset 0 0 18px rgba(255, 108, 48, .08);
}
.mobile-hint__arrow,
.mobile-hint__dot {
position: absolute;
display: grid;
place-items: center;
color: rgba(255, 222, 160, .88);
font: 12px/1 ui-monospace, monospace;
text-shadow: 0 0 10px rgba(255, 128, 58, .58);
}
.mobile-hint__arrow--up { left: 50%; top: 8px; transform: translateX(-50%); }
.mobile-hint__arrow--left { left: 9px; top: 50%; transform: translateY(-50%); }
.mobile-hint__arrow--right { right: 9px; top: 50%; transform: translateY(-50%); }
.mobile-hint__arrow--down { left: 50%; bottom: 8px; transform: translateX(-50%); }
.mobile-hint__dot {
left: 50%;
top: 50%;
width: 14px;
height: 14px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: rgba(255, 209, 137, .72);
box-shadow: 0 0 13px rgba(255, 123, 55, .58);
}
.mobile-hint__copy {
display: grid;
gap: 5px;
min-width: 0;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
text-transform: uppercase;
}
.mobile-hint__copy strong {
font-size: 10px;
letter-spacing: .16em;
color: rgba(255, 232, 183, .96);
}
.mobile-hint__copy span {
font-size: 8px;
line-height: 1.35;
letter-spacing: .13em;
color: rgba(242, 223, 182, .66);
}
@media (max-width: 900px) {
.mobile-hint {
display: flex;
}
}
@media (max-width: 430px) {
.mobile-hint {
top: 47%;
gap: 11px;
padding: 12px 13px;
}
.mobile-hint__pad {
flex-basis: 62px;
width: 62px;
height: 62px;
border-radius: 15px;
}
.mobile-hint__copy strong { font-size: 9px; letter-spacing: .13em; }
.mobile-hint__copy span { font-size: 7px; letter-spacing: .10em; }
}
/* === V35 STAFF ACCESS BACK HUB === */
.back-hub {
position: fixed;
inset: 0;
z-index: 28;
opacity: 0;
visibility: hidden;
pointer-events: none;
overflow: hidden;
background: #040201;
transform: scale(1.018);
filter: blur(10px) brightness(.62);
transition: opacity 760ms ease, visibility 760ms ease, transform 950ms cubic-bezier(.18,.82,.22,1), filter 950ms ease;
}
.app.is-live[data-mode="backhub"] .back-hub {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: scale(1);
filter: blur(0) brightness(1);
}
.app[data-mode="backhub"] .hub {
opacity: 0;
pointer-events: none;
filter: blur(14px) brightness(.42);
transform: scale(1.045);
transition-duration: 560ms;
}
.app[data-mode="backhub"] .ride-stage {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.app[data-mode="backhub"] .controls { opacity: 0; pointer-events: none; }
.app[data-mode="backhub"] .hub-card { opacity: 0 !important; pointer-events: none; }
.back-hub__frame {
position: absolute;
left: 50%;
top: 50%;
width: max(100vw, calc(100vh * 1.7778958565));
aspect-ratio: 1672 / 941;
transform: translate(-50%, -50%);
overflow: hidden;
}
.back-hub__base,
.back-hub__afterglow {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: fill;
object-position: 50% 50%;
pointer-events: none;
user-select: none;
}
.back-hub__afterglow {
mix-blend-mode: screen;
opacity: .18;
animation: backHubAfterglow 7.8s steps(1,end) infinite;
}
.back-hub__frame::before {
content:"";
position: absolute;
inset: -4%;
z-index: 5;
pointer-events: none;
background:
radial-gradient(ellipse at 50% 42%, transparent 0 42%, rgba(0,0,0,.20) 74%, rgba(0,0,0,.72) 100%),
linear-gradient(180deg, rgba(0,0,0,.10), transparent 38%, rgba(0,0,0,.24));
}
.back-hub__frame::after {
content:"";
position:absolute;
inset:0;
z-index: 6;
pointer-events:none;
background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px);
opacity:.18;
mix-blend-mode: overlay;
}
.back-hub__atmosphere { position:absolute; inset:0; z-index:7; pointer-events:none; }
.back-hub-glow {
position:absolute;
transform: translate(-50%, -50%);
border-radius: 999px;
mix-blend-mode: screen;
filter: blur(22px);
opacity: .22;
animation: backHubPulse 4.8s ease-in-out infinite alternate;
}
.back-hub-glow--office {
left: 49.8%;
top: 46.5%;
width: 14%;
height: 27%;
background: radial-gradient(ellipse at center, rgba(255,189,99,.85), rgba(255,123,45,.28) 44%, transparent 76%);
animation-duration: 3.6s;
}
.back-hub-glow--outpost {
left: 82.2%;
top: 20.5%;
width: 30%;
height: 20%;
background: radial-gradient(ellipse at center, rgba(255,190,93,.90), rgba(255,102,39,.24) 46%, transparent 78%);
opacity: .24;
animation: backHubSignFlicker 5.9s steps(1,end) infinite;
}
.back-hub-glow--summer {
left: 13%;
top: 55%;
width: 25%;
height: 44%;
background: radial-gradient(ellipse at center, rgba(92,214,255,.62), rgba(29,134,211,.20) 44%, transparent 80%);
filter: blur(28px);
opacity: .20;
animation-duration: 6.6s;
}
.back-hub-spark {
position:absolute;
width: 9px;
height: 9px;
border-radius: 50%;
background: rgba(255,235,168,.96);
box-shadow: 0 0 18px rgba(255,143,48,.95), 0 0 42px rgba(255,81,27,.48);
opacity: 0;
transform: translate(-50%, -50%);
animation: backHubSpark 9.5s steps(1,end) infinite;
}
.back-hub-spark--one { left: 24.4%; top: 14%; }
.back-zone {
position:absolute;
z-index: 18;
border: 0;
padding: 0;
margin: 0;
background: transparent;
color: rgba(255,230,190,.98);
cursor: pointer;
outline: none;
-webkit-tap-highlight-color: transparent;
}
.back-zone span {
position:absolute;
left: 50%;
bottom: 10%;
transform: translate(-50%, 10px);
opacity: 0;
white-space: nowrap;
padding: 9px 12px;
border: 1px solid rgba(255,172,88,.38);
border-radius: 999px;
background: rgba(5,2,1,.62);
box-shadow: 0 18px 34px rgba(0,0,0,.45), inset 0 0 18px rgba(255,129,45,.12);
color: rgba(255,230,192,.92);
font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: .22em;
text-transform: uppercase;
transition: opacity 180ms ease, transform 220ms ease, border-color 180ms ease;
}
.back-zone:hover span,
.back-zone:focus-visible span,
.back-hub[data-hover="summer"] .back-zone--summer span,
.back-hub[data-hover="office"] .back-zone--office span,
.back-hub[data-hover="outpost"] .back-zone--outpost span {
opacity: 1;
transform: translate(-50%, 0);
border-color: rgba(255,195,111,.65);
}
.back-zone::before {
content:"";
position:absolute;
inset: 0;
border-radius: 18px;
border: 1px solid rgba(255,172,88,0);
background: radial-gradient(ellipse at center, rgba(255,168,72,0), transparent 60%);
transition: border-color 180ms ease, background 240ms ease, box-shadow 240ms ease;
}
.back-zone:hover::before,
.back-zone:focus-visible::before {
border-color: rgba(255,184,92,.20);
background: radial-gradient(ellipse at center, rgba(255,168,72,.10), transparent 66%);
box-shadow: inset 0 0 55px rgba(255,125,45,.08);
}
.back-zone--summer { left: 0%; top: 8%; width: 35%; height: 84%; }
.back-zone--office { left: 37.5%; top: 14%; width: 24%; height: 75%; }
.back-zone--outpost { left: 66%; top: 8%; width: 33%; height: 84%; }
.back-zone--summer:hover::before,
.back-zone--summer:focus-visible::before { background: radial-gradient(ellipse at center, rgba(81,203,255,.13), transparent 66%); border-color: rgba(113,218,255,.22); }
.back-zone--outpost:hover::before,
.back-zone--outpost:focus-visible::before { background: radial-gradient(ellipse at center, rgba(255,148,61,.14), transparent 66%); }
.back-zone--office:hover::before,
.back-zone--office:focus-visible::before { background: radial-gradient(ellipse at center, rgba(255,194,109,.14), transparent 66%); }
.back-hub-card {
position: fixed;
z-index: 45;
left: max(18px, env(safe-area-inset-left));
bottom: max(70px, calc(env(safe-area-inset-bottom) + 70px));
width: min(420px, calc(100vw - 36px));
padding: 13px 16px 14px;
border-left: 1px solid rgba(255,157,79,.42);
background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.22), transparent);
text-shadow: 0 2px 16px #000;
opacity: 0;
transform: translateY(10px);
pointer-events: none;
transition: opacity 320ms ease 220ms, transform 360ms ease 220ms;
}
.app.is-live[data-mode="backhub"] .back-hub-card { opacity: 1; transform: translateY(0); }
.back-hub-card__status {
margin-bottom: 6px;
color: rgba(255,157,79,.92);
font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: .24em;
text-transform: uppercase;
}
.back-hub-card h1 {
margin: 0 0 6px;
font-size: clamp(28px, 5.2vw, 58px);
line-height: .9;
letter-spacing: -.035em;
text-transform: uppercase;
}
.back-hub-card p {
margin: 0;
color: rgba(242,223,182,.74);
font-size: 13px;
line-height: 1.42;
}
.back-hub__back {
position: fixed;
z-index: 52;
right: max(18px, env(safe-area-inset-right));
bottom: max(22px, calc(env(safe-area-inset-bottom) + 22px));
border: 1px solid rgba(255,185,98,.42);
background: rgba(7,3,1,.46);
color: rgba(255,233,196,.84);
border-radius: 999px;
padding: 10px 14px;
font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: .22em;
text-transform: uppercase;
cursor: pointer;
opacity: 0;
transform: translateY(8px);
transition: opacity 260ms ease 280ms, transform 260ms ease 280ms, background 160ms ease, border-color 160ms ease;
}
.app.is-live[data-mode="backhub"] .back-hub__back { opacity: 1; transform: translateY(0); }
.back-hub__back:hover,
.back-hub__back:focus-visible { background: rgba(255,150,74,.14); border-color: rgba(255,202,130,.62); outline: none; }
@keyframes backHubAfterglow {
0%, 6%, 16%, 39%, 52%, 76%, 100% { opacity: .12; }
7%, 8%, 40%, 41%, 77%, 79% { opacity: .30; }
53%, 55% { opacity: .24; }
}
@keyframes backHubPulse {
from { opacity: .16; transform: translate(-50%, -50%) scale(.98); }
to { opacity: .34; transform: translate(-50%, -50%) scale(1.05); }
}
@keyframes backHubSignFlicker {
0%, 10%, 14%, 52%, 57%, 100% { opacity: .20; filter: blur(22px) brightness(1); }
11%, 12%, 53%, 54% { opacity: .44; filter: blur(18px) brightness(1.42); }
58%, 60% { opacity: .32; filter: blur(20px) brightness(1.18); }
}
@keyframes backHubSpark {
0%, 44%, 46%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
45% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
45.4% { opacity: .32; transform: translate(-50%, -50%) translate(10px, 12px) scale(.72); }
}
@media (max-width: 900px){
.back-hub__frame {
width: max(122vh, 185vw);
min-width: 185vw;
}
.back-zone span {
font-size: 8px;
letter-spacing: .16em;
padding: 8px 10px;
bottom: 13%;
}
.back-hub-card {
left: max(14px, env(safe-area-inset-left));
bottom: max(96px, calc(env(safe-area-inset-bottom) + 96px));
width: min(330px, calc(100vw - 28px));
padding: 11px 13px 12px;
}
.back-hub-card h1 { font-size: clamp(25px, 9vw, 42px); }
.back-hub-card p { font-size: 12px; }
.back-hub__back {
left: max(14px, env(safe-area-inset-left));
right: auto;
bottom: max(24px, calc(env(safe-area-inset-bottom) + 24px));
font-size: 8px;
letter-spacing: .16em;
}
}
/* === V36 INVISIBLE BACK HUB HOTSPOTS ===
Keep the Office / Summer / Outpost zones clickable, but remove all visible hotspot boxes,
hover borders, glow pads, and floating labels so the image stays cinematic. */
.back-zone,
.back-zone:hover,
.back-zone:focus-visible {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.back-zone span,
.back-zone:hover span,
.back-zone:focus-visible span,
.back-hub[data-hover="summer"] .back-zone--summer span,
.back-hub[data-hover="office"] .back-zone--office span,
.back-hub[data-hover="outpost"] .back-zone--outpost span {
opacity: 0 !important;
visibility: hidden !important;
transform: translate(-50%, 10px) !important;
pointer-events: none !important;
}
.back-zone::before,
.back-zone:hover::before,
.back-zone:focus-visible::before,
.back-zone--summer:hover::before,
.back-zone--summer:focus-visible::before,
.back-zone--office:hover::before,
.back-zone--office:focus-visible::before,
.back-zone--outpost:hover::before,
.back-zone--outpost:focus-visible::before {
opacity: 0 !important;
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
.back-zone:focus-visible {
outline: none !important;
}
/* === V37 THE OUTPOST + MAISIE SYSTEM === */
.outpost-store {
position: fixed;
inset: 0;
z-index: 29;
opacity: 0;
visibility: hidden;
pointer-events: none;
overflow: hidden;
background: #040201;
transform: scale(1.018);
filter: blur(10px) brightness(.60);
transition: opacity 760ms ease, visibility 760ms ease, transform 950ms cubic-bezier(.18,.82,.22,1), filter 950ms ease;
}
.app.is-live[data-mode="outpost"] .outpost-store {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: scale(1);
filter: blur(0) brightness(1);
}
.app[data-mode="outpost"] .hub,
.app[data-mode="outpost"] .ride-stage,
.app[data-mode="outpost"] .back-hub {
opacity: 0;
pointer-events: none;
filter: blur(14px) brightness(.42);
transform: scale(1.045);
transition-duration: 560ms;
}
.app[data-mode="outpost"] .controls { opacity: 0; pointer-events: none; }
.app[data-mode="outpost"] .hub-card { opacity: 0 !important; pointer-events: none; }
.outpost-store__frame {
position: absolute;
left: 50%;
top: 50%;
width: max(100vw, calc(100vh * 1.7778958565));
aspect-ratio: 1672 / 941;
transform: translate(-50%, -50%);
overflow: hidden;
background: #050201;
}
.outpost-store__frame::before {
content:"";
position:absolute;
inset:-4%;
z-index:7;
pointer-events:none;
background:
radial-gradient(ellipse at 50% 42%, transparent 0 40%, rgba(0,0,0,.18) 72%, rgba(0,0,0,.72) 100%),
linear-gradient(180deg, rgba(0,0,0,.05), transparent 42%, rgba(0,0,0,.23));
}
.outpost-store__frame::after {
content:"";
position:absolute;
inset:0;
z-index:8;
pointer-events:none;
background: repeating-linear-gradient(0deg, rgba(255,255,255,.026) 0 1px, transparent 1px 4px);
opacity:.15;
mix-blend-mode: overlay;
}
.outpost-store__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: fill;
object-position: 50% 50%;
opacity: 0;
transform: scale(1.012);
filter: brightness(.86) saturate(.96);
transition: opacity 680ms ease, transform 1450ms cubic-bezier(.18,.82,.22,1), filter 900ms ease;
pointer-events:none;
user-select:none;
}
.outpost-store__img.is-active {
opacity: 1;
transform: scale(1.000);
filter: brightness(1) saturate(1.02);
animation: outpostImageBreathe 8.8s ease-in-out infinite alternate;
}
.outpost-store.is-talking .outpost-store__img.is-active {
animation: outpostTalkPulse 880ms ease-out 1, outpostImageBreathe 8.8s ease-in-out infinite alternate;
}
.outpost-store__fx { position:absolute; inset:0; z-index:9; pointer-events:none; }
.outpost-glow {
position:absolute;
transform: translate(-50%, -50%);
border-radius: 999px;
mix-blend-mode: screen;
filter: blur(24px);
opacity: .24;
}
.outpost-glow--sign {
left: 50%;
top: 13%;
width: 56%;
height: 18%;
background: radial-gradient(ellipse at center, rgba(255,188,91,.88), rgba(255,101,32,.28) 44%, transparent 76%);
animation: outpostSignFlicker 6.4s steps(1,end) infinite;
}
.outpost-glow--lantern-left {
left: 8%;
top: 75%;
width: 18%;
height: 28%;
background: radial-gradient(ellipse at center, rgba(255,190,92,.72), rgba(255,120,43,.24) 45%, transparent 77%);
animation: outpostGlowPulse 5.8s ease-in-out infinite alternate;
}
.outpost-glow--counter {
left: 50%;
top: 77%;
width: 50%;
height: 25%;
background: radial-gradient(ellipse at center, rgba(255,166,67,.34), rgba(255,98,43,.10) 46%, transparent 80%);
opacity: .18;
filter: blur(32px);
animation: outpostGlowPulse 7.6s ease-in-out infinite alternate;
}
.outpost-spark {
position:absolute;
width:7px;
height:7px;
border-radius:50%;
background: rgba(255,235,168,.98);
box-shadow: 0 0 18px rgba(255,143,48,.95), 0 0 42px rgba(255,81,27,.45);
opacity:0;
animation: outpostSpark 10.8s steps(1,end) infinite;
}
.outpost-spark--one { left: 74%; top: 18%; }
.outpost-dust {
position:absolute;
width: 38%;
height: 34%;
border-radius: 999px;
background: radial-gradient(ellipse at center, rgba(255,210,150,.12), transparent 70%);
filter: blur(14px);
opacity:.20;
mix-blend-mode: screen;
animation: outpostDustDrift 14s ease-in-out infinite alternate;
}
.outpost-dust--one { left: 19%; top: 25%; }
.outpost-dust--two { right: 12%; top: 32%; animation-duration: 18s; animation-delay: -4s; }
.maisie-hotspot {
position:absolute;
z-index:22;
left: 26%;
top: 19%;
width: 48%;
height: 70%;
border:0;
background: transparent;
cursor:pointer;
outline:none;
-webkit-tap-highlight-color: transparent;
}
.maisie-hotspot:focus-visible { outline: none; }
.maisie-hotspot::after {
content:"";
position:absolute;
left:50%;
bottom:4%;
transform: translateX(-50%);
width: 70px;
height: 2px;
border-radius:999px;
background: rgba(255,205,139,.35);
box-shadow: 0 0 15px rgba(255,154,75,.45);
opacity:0;
transition: opacity 220ms ease;
}
.maisie-hotspot:hover::after,
.maisie-hotspot:focus-visible::after { opacity:.62; }
.outpost-card {
position: fixed;
z-index: 46;
left: max(18px, env(safe-area-inset-left));
bottom: max(70px, calc(env(safe-area-inset-bottom) + 70px));
width: min(438px, calc(100vw - 36px));
padding: 13px 16px 14px;
border-left: 1px solid rgba(255,157,79,.42);
background: linear-gradient(90deg, rgba(0,0,0,.56), rgba(0,0,0,.24), transparent);
text-shadow: 0 2px 16px #000;
opacity:0;
transform: translateY(10px);
pointer-events:none;
transition: opacity 320ms ease 220ms, transform 360ms ease 220ms;
}
.app.is-live[data-mode="outpost"] .outpost-card { opacity:1; transform: translateY(0); }
.outpost-card__status {
margin-bottom: 6px;
color: rgba(255,157,79,.92);
font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: .24em;
text-transform: uppercase;
}
.outpost-card h1 {
margin: 0 0 6px;
font-size: clamp(28px, 5.2vw, 58px);
line-height: .9;
letter-spacing: -.035em;
text-transform: uppercase;
}
.outpost-card p {
margin: 0;
color: rgba(242,223,182,.74);
font-size: 13px;
line-height: 1.42;
}
.outpost-store__back {
position: fixed;
z-index: 52;
right: max(18px, env(safe-area-inset-right));
bottom: max(22px, calc(env(safe-area-inset-bottom) + 22px));
border: 1px solid rgba(255,185,98,.42);
background: rgba(7,3,1,.46);
color: rgba(255,233,196,.84);
border-radius: 999px;
padding: 10px 14px;
font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: .22em;
text-transform: uppercase;
cursor: pointer;
opacity:0;
transform: translateY(8px);
transition: opacity 260ms ease 280ms, transform 260ms ease 280ms, background 160ms ease, border-color 160ms ease;
}
.app.is-live[data-mode="outpost"] .outpost-store__back { opacity:1; transform: translateY(0); }
.outpost-store__back:hover,
.outpost-store__back:focus-visible { background: rgba(255,150,74,.14); border-color: rgba(255,202,130,.62); outline:none; }
@keyframes outpostImageBreathe {
from { transform: scale(1.000); }
to { transform: scale(1.014); }
}
@keyframes outpostTalkPulse {
0% { filter: brightness(1) saturate(1.02); transform: scale(1.002); }
38% { filter: brightness(1.08) saturate(1.06); transform: scale(1.018); }
100% { filter: brightness(1) saturate(1.02); transform: scale(1.000); }
}
@keyframes outpostSignFlicker {
0%, 18%, 23%, 61%, 66%, 100% { opacity:.18; filter: blur(25px) brightness(1); }
19%, 20%, 62%, 63% { opacity:.38; filter: blur(19px) brightness(1.38); }
67%, 69% { opacity:.30; filter: blur(20px) brightness(1.16); }
}
@keyframes outpostGlowPulse {
from { opacity:.14; transform: translate(-50%,-50%) scale(.98); }
to { opacity:.28; transform: translate(-50%,-50%) scale(1.05); }
}
@keyframes outpostSpark {
0%, 54%, 56%, 100% { opacity:0; transform: translate(-50%, -50%) scale(.55); }
55% { opacity:1; transform: translate(-50%, -50%) scale(1); }
55.4% { opacity:.30; transform: translate(-50%, -50%) translate(9px, 10px) scale(.68); }
}
@keyframes outpostDustDrift {
from { transform: translate3d(-2%, 0, 0) scale(1); opacity:.13; }
to { transform: translate3d(4%, 2%, 0) scale(1.08); opacity:.25; }
}
@media (max-width: 900px){
.outpost-store__frame {
width: max(122vh, 188vw);
min-width: 188vw;
}
.maisie-hotspot {
left: 31%;
top: 14%;
width: 39%;
height: 73%;
}
.outpost-card {
left: max(14px, env(safe-area-inset-left));
bottom: max(96px, calc(env(safe-area-inset-bottom) + 96px));
width: min(340px, calc(100vw - 28px));
padding: 11px 13px 12px;
}
.outpost-card h1 { font-size: clamp(25px, 9vw, 42px); }
.outpost-card p { font-size: 12px; }
.outpost-store__back {
left: max(14px, env(safe-area-inset-left));
right: auto;
bottom: max(24px, calc(env(safe-area-inset-bottom) + 24px));
font-size: 8px;
letter-spacing: .16em;
}
}
/* V38 — Maisie Stable 2D Pass
Hide the bottom-left movement/state card and keep Maisie stable like 2D animation frames. */
.outpost-card,
.app.is-live[data-mode="outpost"] .outpost-card {
display: none !important;
opacity: 0 !important;
transform: none !important;
pointer-events: none !important;
}
.outpost-store__img {
transform: translate3d(0,0,0) !important;
transition: opacity 1120ms cubic-bezier(.22,.72,.16,1), filter 920ms ease !important;
will-change: opacity, filter;
}
.outpost-store__img.is-active {
transform: translate3d(0,0,0) !important;
animation: none !important;
filter: brightness(1) saturate(1.02) contrast(1.01) !important;
}
.outpost-store.is-talking .outpost-store__img.is-active {
transform: translate3d(0,0,0) !important;
animation: none !important;
filter: brightness(1.025) saturate(1.035) contrast(1.01) !important;
}
.maisie-hotspot::after { display: none !important; }
@media (max-width: 900px){
.outpost-card,
.app.is-live[data-mode="outpost"] .outpost-card { display:none !important; }
}
/* V39 — smoother Maisie frame transitions + fade-to-black into Outpost */
.scene-fade {
position: fixed;
inset: 0;
z-index: 95;
background: #000;
opacity: 0;
pointer-events: none;
transition: opacity var(--fade-duration, 560ms) cubic-bezier(.22,.72,.16,1);
}
.scene-fade.is-visible {
opacity: 1;
}
.app.is-scene-fading .controls,
.app.is-scene-fading .mini-brand,
.app.is-scene-fading .sound-btn,
.app.is-scene-fading .toast {
opacity: 0;
}
.outpost-store__img {
opacity: 0;
filter: brightness(.995) saturate(1.01) contrast(1.005) !important;
transition: opacity 1380ms cubic-bezier(.2,.72,.15,1), filter 1380ms cubic-bezier(.2,.72,.15,1) !important;
will-change: opacity, filter;
backface-visibility: hidden;
}
.outpost-store__img.is-active {
opacity: 1;
filter: brightness(1) saturate(1.02) contrast(1.01) !important;
}
.outpost-store.is-talking .outpost-store__img.is-active {
filter: brightness(1.01) saturate(1.025) contrast(1.01) !important;
}
/* V40 — progression lock note: coin/cash/token Maisie frames stay reserved for later clue logic, not normal click cycling. */
/* V42 — Maisie smoother auto voice + hidden progression-only money logic */
.outpost-choices {
position: fixed;
z-index: 54;
left: 50%;
bottom: max(22px, calc(env(safe-area-inset-bottom) + 22px));
transform: translateX(-50%);
display: flex;
gap: 8px;
align-items: center;
justify-content: center;
max-width: min(860px, calc(100vw - 190px));
padding: 7px;
border: 1px solid rgba(255,185,98,.24);
border-radius: 999px;
background: rgba(5,2,1,.42);
box-shadow: 0 18px 45px rgba(0,0,0,.38), inset 0 0 20px rgba(255,120,45,.045);
backdrop-filter: blur(10px);
opacity: 0;
pointer-events: none;
transition: opacity 380ms ease 360ms, transform 380ms ease 360ms;
}
.app.is-live[data-mode="outpost"] .outpost-choices {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.outpost-choices button {
border: 1px solid rgba(255,186,104,.28);
border-radius: 999px;
background: linear-gradient(180deg, rgba(255,157,79,.13), rgba(0,0,0,.18));
color: rgba(255,235,198,.88);
padding: 10px 12px;
font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: .16em;
text-transform: uppercase;
white-space: nowrap;
cursor: pointer;
text-shadow: 0 2px 12px #000;
transition: background 180ms ease, border-color 180ms ease, transform 180ms ease, color 180ms ease;
}
.outpost-choices button:hover,
.outpost-choices button:focus-visible {
outline: none;
transform: translateY(-1px);
color: #fff4d8;
border-color: rgba(255,213,139,.62);
background: linear-gradient(180deg, rgba(255,157,79,.24), rgba(95,39,12,.22));
}
.outpost-choices button.is-locked {
color: rgba(255,202,145,.46);
border-color: rgba(255,120,74,.16);
background: rgba(0,0,0,.26);
}
.app[data-mode="outpost"] .outpost-store__back {
z-index: 55;
}
@media (max-width: 900px){
.outpost-choices {
left: max(12px, env(safe-area-inset-left));
right: max(12px, env(safe-area-inset-right));
bottom: max(68px, calc(env(safe-area-inset-bottom) + 68px));
transform: none;
max-width: none;
justify-content: flex-start;
overflow-x: auto;
border-radius: 16px;
padding: 7px;
scrollbar-width: none;
}
.app.is-live[data-mode="outpost"] .outpost-choices { transform: none; }
.outpost-choices::-webkit-scrollbar { display: none; }
.outpost-choices button { font-size: 8px; letter-spacing: .13em; padding: 10px 11px; }
}
.outpost-choices {
background: rgba(5,2,1,.36);
border-color: rgba(255,185,98,.18);
}
.outpost-choices button {
background: linear-gradient(180deg, rgba(255,157,79,.10), rgba(0,0,0,.14));
}
/* V43 — line-matched Maisie performance pass */
.outpost-store.is-talking .outpost-store__img.is-active {
filter: brightness(1.012) saturate(1.022) contrast(1.01) !important;
}
.outpost-choices {
opacity: 0;
transition: opacity 520ms ease 540ms, transform 520ms ease 540ms;
}
.outpost-choices button {
background: linear-gradient(180deg, rgba(255,157,79,.10), rgba(0,0,0,.22));
}
.outpost-choices button:active {
transform: translateY(0) scale(.985);
}
/* V44 — Maisie natural conversation pass: no visible choice menu, softer voice entrance, ambient feel. */
.outpost-choices,
.app.is-live[data-mode="outpost"] .outpost-choices {
display: none !important;
opacity: 0 !important;
pointer-events: none !important;
}
.outpost-store.is-talking .outpost-glow--sign {
opacity: .30;
filter: blur(20px) brightness(1.16);
}
.outpost-store.is-talking .outpost-glow--counter {
opacity: .24;
}
.maisie-hotspot {
cursor: pointer;
}
/* V45 — Maisie clean frame-switch pass
Remove visible crossfade between Maisie poses. The Outpost should feel like 2D animation frames/sprite states, not a dissolve. */
.outpost-store__img {
opacity: 0;
transition: filter 140ms ease !important;
transform: translate3d(0,0,0) !important;
}
.outpost-store__img.is-active {
opacity: 1;
transform: translate3d(0,0,0) !important;
animation: none !important;
}
.outpost-store__img:not(.is-active) {
opacity: 0 !important;
}
.outpost-store.is-frame-switching .outpost-store__img.is-active {
filter: brightness(1.006) saturate(1.018) contrast(1.01) !important;
}
/* V46 — Maisie Living Booth Pass
Face shadow, counter pulse, background dust, room cue mood reactions. */
.outpost-store__fx {
z-index: 12;
overflow: hidden;
}
.outpost-mood-wash,
.outpost-face-shadow,
.outpost-counter-pulse,
.outpost-bg-dust {
position: absolute;
pointer-events: none;
}
.outpost-mood-wash {
inset: 0;
z-index: 1;
background:
radial-gradient(ellipse at 50% 44%, rgba(255,154,73,.07), transparent 48%),
linear-gradient(180deg, transparent 0 52%, rgba(255,118,50,.035));
opacity: .46;
mix-blend-mode: screen;
transition: opacity 520ms ease, filter 520ms ease, background 520ms ease;
}
.outpost-bg-dust {
z-index: 2;
width: 56%;
height: 54%;
border-radius: 999px;
background:
radial-gradient(circle at 12% 30%, rgba(255,235,190,.11) 0 1px, transparent 2px),
radial-gradient(circle at 36% 58%, rgba(255,210,148,.09) 0 1px, transparent 2px),
radial-gradient(circle at 72% 36%, rgba(255,235,190,.10) 0 1px, transparent 2px),
radial-gradient(ellipse at center, rgba(255,199,123,.12), transparent 68%);
background-size: 120px 90px, 160px 120px, 140px 110px, 100% 100%;
filter: blur(.35px);
opacity: .34;
mix-blend-mode: screen;
-webkit-mask-image: radial-gradient(ellipse at 52% 68%, transparent 0 22%, rgba(0,0,0,.22) 34%, #000 52%);
mask-image: radial-gradient(ellipse at 52% 68%, transparent 0 22%, rgba(0,0,0,.22) 34%, #000 52%);
}
.outpost-bg-dust--one { left: 1%; top: 15%; animation: outpostBackDustFloat 18s linear infinite alternate; }
.outpost-bg-dust--two { right: -3%; top: 9%; animation: outpostBackDustFloat 23s linear infinite alternate-reverse; opacity: .28; }
.outpost-face-shadow {
z-index: 14;
left: 39.6%;
top: 31.6%;
width: 22.8%;
height: 17.5%;
border-radius: 52% 52% 45% 45%;
background:
radial-gradient(ellipse at 50% 48%, rgba(0,0,0,.20), rgba(0,0,0,.10) 42%, transparent 76%),
linear-gradient(98deg, transparent 0 38%, rgba(0,0,0,.10) 50%, transparent 66%);
opacity: .22;
filter: blur(9px);
mix-blend-mode: multiply;
transform: translate3d(0,0,0);
animation: maisieFaceShadowShift 5.8s ease-in-out infinite alternate;
transition: opacity 420ms ease, filter 420ms ease, transform 420ms ease;
}
.outpost-counter-pulse {
z-index: 10;
left: 50%;
top: 79.6%;
width: 58%;
height: 24%;
transform: translate(-50%, -50%);
border-radius: 999px;
background: radial-gradient(ellipse at center, rgba(255,181,87,.30), rgba(255,96,42,.11) 48%, transparent 78%);
filter: blur(28px);
opacity: .16;
mix-blend-mode: screen;
animation: outpostCounterBreath 6.4s ease-in-out infinite alternate;
transition: opacity 420ms ease, filter 420ms ease;
}
.outpost-store.is-talking .outpost-counter-pulse {
animation: outpostCounterSpeakPulse 2.2s ease-in-out infinite;
}
.outpost-store.is-talking .outpost-face-shadow {
opacity: .29;
filter: blur(8px);
animation-duration: 3.2s;
}
.outpost-store[data-mood="sassy"] .outpost-mood-wash {
opacity: .60;
filter: sepia(.16) saturate(1.2);
background:
radial-gradient(ellipse at 54% 38%, rgba(255,118,47,.12), transparent 45%),
linear-gradient(120deg, transparent 0 46%, rgba(255,63,35,.055), transparent 68%);
}
.outpost-store[data-mood="sassy"] .outpost-glow--sign {
opacity: .39 !important;
animation-duration: 3.8s;
}
.outpost-store[data-mood="sassy"] .outpost-face-shadow {
opacity: .37;
transform: translate3d(1.4%, -.5%, 0);
}
.outpost-store[data-mood="mystery"] .outpost-mood-wash {
opacity: .42;
filter: hue-rotate(-10deg) saturate(.9) brightness(.88);
background:
radial-gradient(ellipse at 50% 42%, rgba(255,208,128,.05), transparent 42%),
radial-gradient(ellipse at 78% 28%, rgba(117,158,255,.055), transparent 34%);
}
.outpost-store[data-mood="mystery"] .outpost-face-shadow {
opacity: .35;
filter: blur(7px);
}
.outpost-store[data-mood="mystery"] .outpost-bg-dust {
opacity: .42;
animation-duration: 14s;
}
.outpost-store[data-mood="quiet"] .outpost-mood-wash {
opacity: .25;
filter: saturate(.70) brightness(.78);
}
.outpost-store[data-mood="quiet"] .outpost-glow--sign,
.outpost-store[data-mood="quiet"] .outpost-glow--counter {
opacity: .13 !important;
}
.outpost-store[data-mood="quiet"] .outpost-face-shadow {
opacity: .42;
filter: blur(10px);
}
.outpost-store[data-mood="warm"] .outpost-counter-pulse,
.outpost-store[data-mood="excited"] .outpost-counter-pulse {
opacity: .26;
}
.outpost-store[data-mood="excited"] .outpost-mood-wash {
opacity: .72;
filter: saturate(1.22) brightness(1.04);
}
.outpost-store[data-mood="excited"] .outpost-spark--one {
animation-duration: 5.8s;
}
.outpost-store[data-mood="excited"] .outpost-glow--counter {
opacity: .34 !important;
}
@keyframes maisieFaceShadowShift {
0% { transform: translate3d(-.7%, -.15%, 0) scale(1); opacity: .20; }
48% { transform: translate3d(.45%, .28%, 0) scale(1.018); opacity: .30; }
100% { transform: translate3d(1.15%, -.25%, 0) scale(.992); opacity: .24; }
}
@keyframes outpostCounterBreath {
from { opacity: .12; transform: translate(-50%, -50%) scale(.98); }
to { opacity: .23; transform: translate(-50%, -50%) scale(1.045); }
}
@keyframes outpostCounterSpeakPulse {
0%, 100% { opacity: .19; transform: translate(-50%, -50%) scale(1); }
48% { opacity: .32; transform: translate(-50%, -50%) scale(1.055); }
}
@keyframes outpostBackDustFloat {
0% { transform: translate3d(-2.5%, 1.6%, 0) scale(1); background-position: 0 0, 20px -10px, -18px 8px, 0 0; }
100% { transform: translate3d(3.8%, -1.8%, 0) scale(1.045); background-position: 42px -28px, -20px 26px, 28px -18px, 0 0; }
}
@media (max-width: 900px){
.outpost-face-shadow { left: 40%; top: 31%; width: 22%; height: 17%; }
.outpost-bg-dust { width: 50%; height: 50%; }
}
/* V48 — Smooth stage transitions kept; Maisie reverted to V46 living-booth behavior */
.scene-img {
transform: translate3d(0,0,0) scale(1.002) !important;
filter: none !important;
transition: opacity 520ms cubic-bezier(.22,.72,.16,1) !important;
will-change: opacity;
contain: paint;
}
.scene-img.is-active {
opacity: 1;
transform: translate3d(0,0,0) scale(1) !important;
filter: none !important;
}
.scene-img.is-leaving-left,
.scene-img.is-leaving-right {
opacity: 0;
transform: translate3d(0,0,0) scale(1.002) !important;
filter: none !important;
}
.scene-img.is-entering-left,
.scene-img.is-entering-right {
opacity: 0;
transform: translate3d(0,0,0) scale(1.002) !important;
filter: none !important;
}
.scene-overlay--blur,
.app.is-traveling .scene-overlay--blur {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background: radial-gradient(circle at 50% 48%, rgba(255,185,101,.055), transparent 40%), rgba(0,0,0,.10);
opacity: .20;
transition: opacity 220ms ease !important;
}
.app.is-stage-loading .scene-overlay--blur { opacity: .14; }
.stage-menu, .scene-card {
transition-duration: 300ms !important;
}
/* V51 — Man vs Self comic display inside The Outpost */
.outpost-comic-stand {
position: absolute;
z-index: 25;
right: 1.6%;
bottom: 20.5%;
width: 7.2%;
aspect-ratio: 2 / 3;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
transform: rotate(-1.2deg);
transform-origin: center bottom;
-webkit-tap-highlight-color: transparent;
filter: drop-shadow(0 10px 18px rgba(0,0,0,.62));
}
.outpost-comic-stand img {
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit: cover;
border: 1px solid rgba(255,183,103,.34);
border-radius: 2px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 0 18px rgba(68,149,255,.12);
user-select:none;
pointer-events:none;
}
.outpost-comic-stand__glow {
position:absolute;
inset:-7%;
border-radius: 8px;
background: radial-gradient(ellipse at center, rgba(72,156,255,.26), transparent 72%);
opacity:0;
transition: opacity 180ms ease;
mix-blend-mode: screen;
pointer-events:none;
}
.outpost-comic-stand:hover .outpost-comic-stand__glow,
.outpost-comic-stand:focus-visible .outpost-comic-stand__glow { opacity:.70; }
.outpost-comic-stand:focus-visible { outline: 1px solid rgba(156,207,255,.76); outline-offset: 3px; }
.comic-modal {
position: fixed;
inset: 0;
z-index: 92;
display: grid;
place-items: center;
padding: max(20px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
opacity:0;
pointer-events:none;
transition: opacity 220ms ease;
}
.comic-modal.is-open { opacity:1; pointer-events:auto; }
.comic-modal[hidden] { display:none; }
.comic-modal__backdrop {
position:absolute;
inset:0;
background: radial-gradient(ellipse at 50% 42%, rgba(19,46,80,.38), rgba(0,0,0,.88) 72%);
backdrop-filter: blur(5px);
}
.comic-modal__book {
position: relative;
z-index:1;
width: min(440px, 78vw);
max-height: 88vh;
margin:0;
text-align:center;
transform: translateY(14px) scale(.985);
transition: transform 240ms cubic-bezier(.18,.82,.22,1);
}
.comic-modal.is-open .comic-modal__book { transform: translateY(0) scale(1); }
.comic-modal__book img {
display:block;
width:100%;
max-height: 82vh;
object-fit: contain;
border: 1px solid rgba(179,214,255,.34);
box-shadow: 0 22px 80px rgba(0,0,0,.72), 0 0 42px rgba(47,139,255,.22);
}
.comic-modal__book figcaption {
margin-top: 10px;
font: 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: .24em;
text-transform: uppercase;
color: rgba(232,242,255,.74);
text-shadow: 0 2px 16px #000;
}
.comic-modal__close {
position: fixed;
z-index: 2;
right: max(18px, env(safe-area-inset-right));
top: max(18px, env(safe-area-inset-top));
border: 1px solid rgba(187,216,255,.42);
background: rgba(3,10,18,.62);
color: rgba(236,246,255,.86);
border-radius: 999px;
padding: 10px 14px;
font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: .20em;
cursor:pointer;
}
.comic-modal__close:hover,
.comic-modal__close:focus-visible { background: rgba(71,145,255,.16); outline:none; }
@media (max-width: 900px){
.outpost-comic-stand {
right: 1.4%;
bottom: 20.2%;
width: 8%;
}
.comic-modal__book { width: min(380px, 86vw); }
}
/* V54 — Outpost merch overlay: organic glass UI over the existing scene */
.outpost-merch {
position: absolute;
z-index: 29;
right: 1.4%;
top: 24.2%;
width: 27.5%;
height: 62%;
pointer-events: none;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.merch-slabs,
.merch-catalog { pointer-events: auto; }
.merch-slabs {
position:absolute;
right: 0;
top: 0;
width: 60%;
display:flex;
flex-direction:column;
gap: 2.4%;
transition: opacity 360ms ease, transform 360ms cubic-bezier(.18,.82,.22,1), visibility 360ms ease;
}
.outpost-merch[data-view="catalog"] .merch-slabs { opacity:0; transform: translateX(12px); visibility:hidden; pointer-events:none; }
.merch-slab {
position:relative;
display:block;
min-height: 92px;
padding: 15px 15px 14px;
border: 1px solid rgba(255,170,86,.42);
border-radius: 10px;
background:
linear-gradient(135deg, rgba(29,13,5,.64), rgba(5,3,1,.34)),
radial-gradient(circle at 94% 50%, rgba(255,132,46,.24), transparent 34%);
color: rgba(255,235,198,.86);
text-align:left;
text-transform:uppercase;
letter-spacing:.14em;
cursor:pointer;
box-shadow: inset 0 0 0 1px rgba(255,231,183,.06), 0 10px 34px rgba(0,0,0,.35), 0 0 22px rgba(255,128,42,.10);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
overflow:hidden;
}
.merch-slab::before {
content:"";
position:absolute; inset:5px;
border:1px solid rgba(255,192,105,.16);
border-radius:8px;
pointer-events:none;
}
.merch-slab::after {
content:"›";
position:absolute;
right: 13px;
top: 50%;
transform: translateY(-50%);
color: rgba(255,158,54,.96);
font: 28px/1 ui-monospace, monospace;
text-shadow: 0 0 14px rgba(255,119,28,.64);
}
.merch-slab span { display:block; font: 10px/1.1 ui-monospace, monospace; opacity:.72; }
.merch-slab strong { display:block; margin-top:6px; font: 700 16px/1.0 Georgia, 'Times New Roman', serif; letter-spacing:.07em; color: rgba(255,232,189,.96); text-shadow: 0 0 18px rgba(255,128,35,.22); }
.merch-slab em { display:block; margin-top:9px; font: 9px/1 ui-monospace, monospace; opacity:.48; font-style:normal; }
.merch-slab--locked { opacity:.55; cursor:default; filter:saturate(.75); }
.merch-slab--locked::after { opacity:.25; }
.merch-slab--active:hover,
.merch-slab--active:focus-visible { outline:none; transform: translateX(-3px); border-color: rgba(255,202,121,.72); box-shadow: inset 0 0 0 1px rgba(255,231,183,.10), 0 12px 42px rgba(0,0,0,.42), 0 0 34px rgba(255,128,42,.20); }
.merch-catalog {
position:absolute;
right: 0;
top: -1.5%;
width: 100%;
min-height: 82%;
border: 1px solid rgba(255,176,93,.36);
border-radius: 18px;
background:
radial-gradient(circle at 62% 22%, rgba(255,159,65,.14), transparent 34%),
linear-gradient(180deg, rgba(24,10,3,.52), rgba(5,3,1,.32));
box-shadow: inset 0 0 0 1px rgba(255,232,185,.05), 0 20px 60px rgba(0,0,0,.42), 0 0 42px rgba(255,126,34,.10);
backdrop-filter: blur(3.5px) saturate(1.08);
-webkit-backdrop-filter: blur(3.5px) saturate(1.08);
padding: 20px 22px 22px;
opacity:0;
visibility:hidden;
transform: translateX(18px) scale(.985);
transition: opacity 420ms ease, transform 420ms cubic-bezier(.18,.82,.22,1), visibility 420ms ease;
}
.outpost-merch[data-view="catalog"] .merch-catalog { opacity:1; visibility:visible; transform: translateX(0) scale(1); }
.merch-catalog__close {
position:absolute; right:12px; top:10px;
width:26px; height:26px;
border: 1px solid rgba(255,197,119,.30);
border-radius:999px;
background: rgba(8,4,1,.34);
color: rgba(255,226,181,.78);
cursor:pointer;
font: 18px/1 ui-monospace, monospace;
}
.merch-catalog__topline {
font: 9px/1 ui-monospace, monospace;
letter-spacing:.20em;
text-transform:uppercase;
color: rgba(255,209,139,.52);
}
.merch-catalog h2 {
margin: 9px 32px 2px 0;
color: rgba(255,239,207,.96);
font: 700 clamp(15px, 1.55vw, 26px)/.96 Georgia, 'Times New Roman', serif;
letter-spacing:.06em;
text-transform:uppercase;
text-shadow: 0 0 18px rgba(255,126,34,.16), 0 2px 2px #000;
}
.merch-catalog p {
margin: 0 0 8px;
color: rgba(255,169,58,.92);
font: 700 11px/1.2 ui-monospace, monospace;
letter-spacing:.12em;
text-transform:uppercase;
}
.merch-catalog__stage {
position:relative;
height: min(32vh, 310px);
display:grid;
place-items:center;
}
.merch-catalog__stage::before {
content:"";
position:absolute;
inset: 8% 12%;
border-radius: 50%;
background: radial-gradient(ellipse at center, rgba(255,255,255,.10), rgba(255,185,96,.07) 42%, transparent 70%);
filter: blur(8px);
}
#merchProductImg {
position:relative;
z-index:2;
width: min(74%, 330px);
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 16px 26px rgba(0,0,0,.46));
transition: opacity 160ms ease, transform 220ms cubic-bezier(.18,.82,.22,1), filter 220ms ease;
}
#merchProductImg[data-tone="black"] { filter: brightness(.60) contrast(1.18) drop-shadow(0 16px 26px rgba(0,0,0,.48)); }
#merchProductImg[data-tone="sand"] { filter: sepia(.30) saturate(.85) brightness(.93) drop-shadow(0 16px 26px rgba(0,0,0,.46)); }
#merchProductImg[data-tone="slate"] { filter: grayscale(.35) brightness(.82) contrast(1.05) drop-shadow(0 16px 26px rgba(0,0,0,.46)); }
#merchProductImg[data-tone="cream"] { filter: sepia(.18) brightness(1.02) drop-shadow(0 16px 26px rgba(0,0,0,.46)); }
#merchProductImg[data-tone="tie"] { filter: hue-rotate(315deg) saturate(1.45) contrast(1.02) drop-shadow(0 16px 26px rgba(0,0,0,.46)); }
.merch-arrow {
position:absolute;
z-index:4;
top:50%; transform:translateY(-50%);
width: 38px; height: 48px;
border: 1px solid rgba(255,187,98,.44);
border-radius: 11px;
background: rgba(13,6,2,.38);
color: rgba(255,205,131,.98);
cursor:pointer;
font: 44px/.72 Georgia, serif;
text-shadow: 0 0 18px rgba(255,128,35,.56);
box-shadow: inset 0 0 0 1px rgba(255,235,190,.06), 0 0 22px rgba(255,126,35,.12);
}
.merch-arrow--left { left: 4%; }
.merch-arrow--right { right: 4%; }
.merch-arrow:hover,.merch-arrow:focus-visible { outline:none; background: rgba(255,128,42,.16); }
.merch-thumbs {
display:grid;
grid-template-columns: repeat(6, 1fr);
gap: 7px;
margin: 4px 0 12px;
}
.merch-thumb {
min-width:0;
border: 1px solid rgba(255,187,98,.22);
border-radius: 8px;
background: rgba(5,3,1,.25);
padding: 6px 3px 5px;
color: rgba(255,226,181,.68);
cursor:pointer;
text-transform:uppercase;
overflow:hidden;
}
.merch-thumb.is-active { border-color: rgba(255,180,73,.92); box-shadow: 0 0 20px rgba(255,128,35,.20); color: rgba(255,239,207,.95); }
.merch-thumb__swatch { display:block; width: 20px; height: 20px; margin: 0 auto 5px; border-radius: 5px; border: 1px solid rgba(255,255,255,.22); background: #f4eee4; }
.merch-thumb[data-tone="black"] .merch-thumb__swatch { background:#151515; }
.merch-thumb[data-tone="sand"] .merch-thumb__swatch { background:#bca68d; }
.merch-thumb[data-tone="slate"] .merch-thumb__swatch { background:#69717b; }
.merch-thumb[data-tone="cream"] .merch-thumb__swatch { background:#efe4ce; }
.merch-thumb[data-tone="tie"] .merch-thumb__swatch { background: linear-gradient(135deg,#f3d389,#77a3d7,#d97a7a); }
.merch-thumb small { display:block; font: 7px/1.05 ui-monospace, monospace; letter-spacing:.06em; white-space:normal; }
.merch-buy {
display:flex;
align-items:center;
justify-content:center;
gap: 8px;
min-height: 42px;
border: 1px solid rgba(255,187,98,.48);
border-radius: 999px;
background: linear-gradient(180deg, rgba(255,145,43,.88), rgba(143,65,16,.74));
color: rgba(255,246,226,.98);
text-decoration:none;
text-transform:uppercase;
font: 800 14px/1 ui-monospace, monospace;
letter-spacing:.14em;
box-shadow: inset 0 0 0 1px rgba(255,242,211,.18), 0 0 30px rgba(255,127,34,.22);
}
.merch-buy::before { content:"🛒"; font-size: 15px; letter-spacing:0; }
.merch-buy:hover,.merch-buy:focus-visible { outline:none; filter:brightness(1.08); }
@media (max-width: 900px){
.outpost-merch {
right: 1.6%;
top: 24%;
width: 37%;
height: 60%;
}
.merch-slabs { width: 70%; }
.merch-slab { min-height: 74px; padding: 10px 11px; }
.merch-slab strong { font-size: 12px; }
.merch-catalog { padding: 14px 13px 16px; border-radius: 14px; }
.merch-catalog h2 { font-size: 14px; }
.merch-catalog__stage { height: 26vh; }
.merch-thumbs { grid-template-columns: repeat(3,1fr); gap:5px; }
.merch-thumb small { display:none; }
.merch-arrow { width:30px; height:40px; font-size:36px; }
}
/* V55 — cleaner Wish You Good Fortune merch overlay */
.outpost-merch {
right: 1.15%;
top: 23.1%;
width: 31.2%;
height: 65%;
}
.merch-catalog {
top: -1%;
width: 100%;
min-height: 86%;
padding: 16px 18px 18px;
border-radius: 18px;
border: 1px solid rgba(255,184,96,.32);
background:
linear-gradient(180deg, rgba(35,15,5,.38), rgba(4,2,0,.26)),
radial-gradient(circle at 72% 16%, rgba(255,168,68,.17), transparent 34%),
radial-gradient(circle at 18% 100%, rgba(255,112,30,.11), transparent 42%);
box-shadow:
inset 0 0 0 1px rgba(255,236,195,.055),
inset 0 0 45px rgba(255,157,66,.045),
0 20px 60px rgba(0,0,0,.38),
0 0 38px rgba(255,130,36,.08);
backdrop-filter: blur(2.6px) saturate(1.06);
-webkit-backdrop-filter: blur(2.6px) saturate(1.06);
overflow: hidden;
}
.merch-catalog::before {
content:"";
position:absolute;
inset: 8px;
border: 1px solid rgba(255,203,128,.105);
border-radius: 14px;
pointer-events:none;
}
.merch-catalog::after {
content:"";
position:absolute;
inset:0;
opacity:.18;
background:
linear-gradient(90deg, transparent, rgba(255,221,168,.12), transparent 42%),
repeating-linear-gradient(180deg, rgba(255,255,255,.055) 0 1px, transparent 1px 7px);
mix-blend-mode: screen;
pointer-events:none;
}
.merch-catalog__close {
z-index: 5;
width: 30px;
height: 30px;
background: rgba(11,5,2,.50);
border-color: rgba(255,195,112,.36);
}
.merch-catalog__topline {
position: relative;
z-index: 2;
color: rgba(255,205,132,.68);
font-size: 8px;
letter-spacing: .24em;
}
.merch-catalog__header {
position: relative;
z-index: 2;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
margin-top: 7px;
padding-right: 28px;
}
.merch-catalog h2 {
margin: 0;
font-size: clamp(15px, 1.36vw, 24px);
line-height: .96;
letter-spacing: .07em;
}
.merch-catalog p {
margin: 7px 0 0;
color: rgba(255,174,65,.94);
font: 800 10px/1.1 ui-monospace, monospace;
letter-spacing: .12em;
}
.merch-count {
flex: 0 0 auto;
margin-top: 1px;
padding: 6px 7px;
border: 1px solid rgba(255,187,98,.22);
border-radius: 999px;
color: rgba(255,226,181,.70);
background: rgba(0,0,0,.16);
font: 800 8px/1 ui-monospace, monospace;
letter-spacing: .12em;
}
.merch-catalog__stage {
height: min(31vh, 302px);
margin-top: 0;
}
.merch-catalog__stage::before {
inset: 13% 19%;
background: radial-gradient(ellipse at center, rgba(255,221,164,.16), rgba(255,162,67,.06) 45%, transparent 72%);
filter: blur(10px);
}
#merchProductImg {
width: min(76%, 360px);
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 18px 24px rgba(0,0,0,.48));
transition: opacity 170ms ease, transform 210ms cubic-bezier(.18,.82,.22,1), filter 220ms ease;
}
#merchProductImg.is-switching { opacity: .64; transform: translateY(2px) scale(.988); }
#merchProductImg[data-kind="hoodie"] { width: min(82%, 385px); }
#merchProductImg[data-kind="longsleeve"] { width: min(84%, 390px); }
#merchProductImg[data-kind="crewneck"] { width: min(82%, 380px); }
#merchProductImg[data-tone="black"] { filter: brightness(.82) contrast(1.04) drop-shadow(0 18px 24px rgba(0,0,0,.54)); }
#merchProductImg[data-tone="white"] { filter: brightness(1.02) contrast(1.01) drop-shadow(0 18px 24px rgba(0,0,0,.48)); }
#merchProductImg[data-tone="heather"] { filter: grayscale(.22) brightness(.96) contrast(1.02) drop-shadow(0 18px 24px rgba(0,0,0,.50)); }
#merchProductImg[data-tone="navy"] { filter: hue-rotate(178deg) saturate(1.25) brightness(.78) contrast(1.12) drop-shadow(0 18px 24px rgba(0,0,0,.55)); }
#merchProductImg[data-tone="forest"] { filter: hue-rotate(74deg) saturate(1.02) brightness(.82) contrast(1.10) drop-shadow(0 18px 24px rgba(0,0,0,.55)); }
#merchProductImg[data-tone="sand"] { filter: sepia(.28) saturate(.88) brightness(.97) drop-shadow(0 18px 24px rgba(0,0,0,.50)); }
#merchProductImg[data-tone="cream"] { filter: sepia(.12) brightness(1.02) drop-shadow(0 18px 24px rgba(0,0,0,.48)); }
#merchProductImg[data-tone="tie"] { filter: saturate(1.05) brightness(1.02) drop-shadow(0 18px 24px rgba(0,0,0,.48)); }
#merchProductImg[data-tone="blue"] { filter: hue-rotate(170deg) saturate(1.18) brightness(.92) contrast(1.04) drop-shadow(0 18px 24px rgba(0,0,0,.50)); }
#merchProductImg[data-tone="rust"] { filter: hue-rotate(322deg) saturate(1.15) brightness(.96) contrast(1.03) drop-shadow(0 18px 24px rgba(0,0,0,.50)); }
.merch-arrow {
width: 34px;
height: 52px;
border-radius: 999px;
background: rgba(7,3,1,.38);
border-color: rgba(255,190,104,.36);
font-size: 40px;
box-shadow: inset 0 0 0 1px rgba(255,235,190,.06), 0 0 18px rgba(255,126,35,.10);
}
.merch-arrow--left { left: 2.5%; }
.merch-arrow--right { right: 2.5%; }
.merch-thumbs {
position: relative;
z-index: 2;
display:grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
margin: 2px 0 8px;
}
.merch-thumb {
display:grid;
grid-template-columns: 34px minmax(0,1fr);
align-items:center;
gap: 5px;
min-height: 45px;
padding: 5px 6px;
border-radius: 10px;
background: linear-gradient(180deg, rgba(8,4,1,.34), rgba(0,0,0,.16));
border-color: rgba(255,187,98,.20);
}
.merch-thumb img {
width: 34px;
height: 34px;
object-fit: contain;
filter: drop-shadow(0 5px 6px rgba(0,0,0,.36));
}
.merch-thumb small {
font: 800 7px/1.05 ui-monospace, monospace;
letter-spacing: .05em;
text-align:left;
}
.merch-thumb.is-active {
background: linear-gradient(180deg, rgba(255,136,39,.22), rgba(7,3,1,.22));
border-color: rgba(255,183,77,.88);
}
.merch-colors {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: 5px;
min-height: 32px;
margin: 2px 0 10px;
overflow-x: auto;
scrollbar-width: none;
}
.merch-colors::-webkit-scrollbar { display:none; }
.merch-color {
flex: 0 0 auto;
display:flex;
align-items:center;
gap: 5px;
min-height: 28px;
padding: 4px 7px 4px 5px;
border-radius: 999px;
border: 1px solid rgba(255,187,98,.18);
background: rgba(0,0,0,.18);
color: rgba(255,226,181,.62);
cursor:pointer;
text-transform:uppercase;
}
.merch-color span {
width: 15px;
height: 15px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.23);
background:#eee;
box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.merch-color small { font: 800 6px/1 ui-monospace, monospace; letter-spacing:.06em; }
.merch-color.is-active { border-color: rgba(255,183,77,.86); color: rgba(255,239,207,.95); box-shadow: 0 0 16px rgba(255,128,35,.12); }
.merch-color[data-tone="black"] span { background:#151515; }
.merch-color[data-tone="white"] span { background:#f4eee4; }
.merch-color[data-tone="heather"] span { background:#aaa7a2; }
.merch-color[data-tone="navy"] span { background:#182035; }
.merch-color[data-tone="forest"] span { background:#2e3f2b; }
.merch-color[data-tone="sand"] span { background:#bca68d; }
.merch-color[data-tone="cream"] span { background:#efe4ce; }
.merch-color[data-tone="slate"] span { background:#69717b; }
.merch-color[data-tone="tie"] span { background: linear-gradient(135deg,#f3d389,#77a3d7,#d97a7a); }
.merch-color[data-tone="blue"] span { background: linear-gradient(135deg,#88b7e1,#346fa7); }
.merch-color[data-tone="rust"] span { background: linear-gradient(135deg,#c47a3a,#7b2b22); }
.merch-buy {
position: relative;
z-index: 2;
min-height: 44px;
border-radius: 12px;
background:
linear-gradient(180deg, rgba(255,159,53,.95), rgba(139,61,15,.84)),
radial-gradient(circle at 20% 20%, rgba(255,255,255,.24), transparent 40%);
border-color: rgba(255,210,129,.56);
font-size: 13px;
letter-spacing: .16em;
}
@media (max-width: 900px){
.outpost-merch {
right: 1.2%;
top: 23%;
width: 46%;
height: 64%;
}
.merch-catalog { padding: 13px 12px 14px; border-radius: 14px; }
.merch-catalog__stage { height: 25vh; }
.merch-catalog h2 { font-size: 13px; }
.merch-catalog p { font-size: 8px; }
.merch-count { display:none; }
.merch-thumbs { grid-template-columns: repeat(2, 1fr); gap: 5px; }
.merch-thumb { grid-template-columns: 28px minmax(0,1fr); min-height: 38px; padding:4px 5px; }
.merch-thumb img { width:28px; height:28px; }
.merch-thumb small { font-size: 6px; }
.merch-color small { display:none; }
.merch-buy { min-height: 38px; font-size: 10px; }
}
/* V56 — real Outpost collection slabs, mounted organically on the right wall */
.outpost-merch {
left: 64.6% !important;
right: auto !important;
top: 32.2% !important;
width: 25.8% !important;
height: 50.5% !important;
z-index: 34 !important;
pointer-events: none;
}
.merch-catalog { display: none !important; }
.outpost-merch[data-view="catalog"] .merch-slabs,
.outpost-merch[data-view="slabs"] .merch-slabs {
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
pointer-events: auto !important;
}
.merch-slabs {
position: absolute !important;
inset: 0 auto auto 0 !important;
width: 100% !important;
height: 100% !important;
display: block !important;
transition: opacity 300ms ease, transform 300ms ease !important;
pointer-events: auto !important;
}
.merch-slab {
position: absolute !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
overflow: visible !important;
cursor: pointer;
transform-origin: center center;
-webkit-tap-highlight-color: transparent;
transition: transform 220ms cubic-bezier(.18,.82,.22,1), filter 220ms ease, opacity 220ms ease;
}
.merch-slab::before { display:none !important; }
.merch-slab::after { content:none !important; }
.merch-slab img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
user-select: none;
pointer-events: none;
filter: drop-shadow(0 12px 12px rgba(0,0,0,.54)) drop-shadow(0 0 8px rgba(255,118,34,.10));
}
.merch-slab--fortune {
left: 18.5% !important;
top: 0% !important;
width: 43% !important;
transform: rotate(.5deg);
}
.merch-slab--aftermath {
left: 10% !important;
top: 30.4% !important;
width: 52% !important;
transform: rotate(-.8deg);
}
.merch-slab--heartland {
left: 0% !important;
top: 62.2% !important;
width: 74% !important;
transform: rotate(.4deg);
}
.merch-slab--heartland::after {
content:"" !important;
display:block !important;
position:absolute;
inset: 18% 0 22%;
background: linear-gradient(90deg, transparent 0%, rgba(255,232,132,.0) 22%, rgba(255,219,92,.42) 46%, rgba(255,147,37,.30) 56%, transparent 76%);
mix-blend-mode: screen;
opacity: .52;
filter: blur(7px);
pointer-events: none;
transform: translateX(92%);
animation: heartlandSlabChase 2.15s linear infinite;
}
.merch-slab--heartland img {
animation: heartlandSlabPulse 2.15s ease-in-out infinite;
}
.merch-slab:hover,
.merch-slab:focus-visible {
outline: none !important;
filter: brightness(1.08) saturate(1.06);
transform: translateY(-2px) scale(1.025) rotate(0deg) !important;
}
.merch-slab:focus-visible img {
filter: drop-shadow(0 13px 14px rgba(0,0,0,.56)) drop-shadow(0 0 18px rgba(255,185,89,.36));
}
@keyframes heartlandSlabChase {
from { transform: translateX(92%); opacity: .18; }
15% { opacity: .58; }
to { transform: translateX(-92%); opacity: .18; }
}
@keyframes heartlandSlabPulse {
0%, 100% { filter: drop-shadow(0 12px 12px rgba(0,0,0,.54)) drop-shadow(0 0 8px rgba(255,118,34,.12)) brightness(1); }
48% { filter: drop-shadow(0 13px 14px rgba(0,0,0,.56)) drop-shadow(0 0 18px rgba(255,185,89,.28)) brightness(1.05); }
}
@media (max-width: 900px){
.outpost-merch {
left: 62.8% !important;
top: 31.8% !important;
width: 31% !important;
height: 51% !important;
}
.merch-slab--fortune { left: 19% !important; width: 44% !important; }
.merch-slab--aftermath { left: 9% !important; top: 30.5% !important; width: 53% !important; }
.merch-slab--heartland { left: 0% !important; top: 62.5% !important; width: 76% !important; }
}
/* V57 — mobile full-screen drag look-around for Staff Access + Maisie's Outpost */
@media (max-width: 900px){
.app.is-live[data-mode="backhub"] .back-hub__frame {
transform:
translate(calc(-50% + var(--backhub-pan-x, 0px)), calc(-50% + var(--backhub-pan-y, 0px)))
scale(1.006) !important;
transition: transform 180ms ease-out;
touch-action: none;
will-change: transform;
}
.app.is-live[data-mode="outpost"] .outpost-store__frame {
transform:
translate(calc(-50% + var(--outpost-pan-x, 0px)), calc(-50% + var(--outpost-pan-y, 0px)))
scale(1.006) !important;
transition: transform 180ms ease-out;
touch-action: none;
will-change: transform;
}
.app.is-mobile-panning .back-hub__frame,
.app.is-mobile-panning .outpost-store__frame {
transition: none !important;
}
.back-hub,
.outpost-store {
touch-action: none;
cursor: grab;
}
.app.is-mobile-panning .back-hub,
.app.is-mobile-panning .outpost-store {
cursor: grabbing;
}
.app[data-mode="backhub"] .controls,
.app[data-mode="outpost"] .controls {
opacity: .92;
pointer-events: none;
}
.app[data-mode="backhub"] .controls::before {
content: "DRAG TO LOOK • TAP A DOOR";
}
.app[data-mode="outpost"] .controls::before {
content: "DRAG TO LOOK • TAP MAISIE / MERCH";
}
.back-hub-card,
.outpost-card {
max-width: min(310px, calc(100vw - 28px));
background: linear-gradient(90deg, rgba(0,0,0,.42), rgba(0,0,0,.13), transparent) !important;
}
}
@media (max-width: 520px){
.app[data-mode="backhub"] .controls::before {
content: "DRAG LOOK • TAP DOOR";
}
.app[data-mode="outpost"] .controls::before {
content: "DRAG LOOK • TAP";
}
}
/* V58 — organize Maisie's collection slabs + true mobile cover framing */
.outpost-merch {
left: 66.2% !important;
top: 28.6% !important;
width: 18.4% !important;
height: 64% !important;
z-index: 34 !important;
}
.merch-slab img {
filter: drop-shadow(0 10px 11px rgba(0,0,0,.56)) drop-shadow(0 0 7px rgba(255,118,34,.10));
}
.merch-slab--fortune {
left: 24% !important;
top: 0% !important;
width: 50% !important;
transform: rotate(.35deg) !important;
}
.merch-slab--aftermath {
left: 18% !important;
top: 34.2% !important;
width: 56% !important;
transform: rotate(-.45deg) !important;
}
.merch-slab--heartland {
left: -2% !important;
top: 72.8% !important;
width: 98% !important;
transform: rotate(.3deg) !important;
}
.merch-slab:hover,
.merch-slab:focus-visible {
transform: translateY(-2px) scale(1.02) rotate(0deg) !important;
}
.merch-slab--heartland::after {
inset: 26% 4% 28% !important;
}
@media (max-width: 900px){
.outpost-merch {
left: 65.8% !important;
top: 28.3% !important;
width: 20.2% !important;
height: 64.5% !important;
}
.merch-slab--fortune {
left: 23% !important;
top: 0% !important;
width: 52% !important;
}
.merch-slab--aftermath {
left: 15% !important;
top: 34% !important;
width: 60% !important;
}
.merch-slab--heartland {
left: -5% !important;
top: 72.4% !important;
width: 106% !important;
}
.back-hub__frame,
.outpost-store__frame {
width: max(100vw, calc(100vh * 1.7778958565)) !important;
width: max(100vw, calc(100dvh * 1.7778958565)) !important;
height: 100vh !important;
height: 100dvh !important;
min-width: 0 !important;
aspect-ratio: auto !important;
}
.back-hub__base,
.back-hub__afterglow,
.outpost-store__img {
object-fit: fill !important;
width: 100% !important;
height: 100% !important;
}
.app.is-live[data-mode="backhub"] .back-hub__frame,
.app.is-live[data-mode="outpost"] .outpost-store__frame {
transform:
translate(calc(-50% + var(--backhub-pan-x, var(--outpost-pan-x, 0px))), calc(-50% + var(--backhub-pan-y, var(--outpost-pan-y, 0px))))
scale(1) !important;
}
.app.is-live[data-mode="outpost"] .outpost-store__frame {
transform:
translate(calc(-50% + var(--outpost-pan-x, 0px)), calc(-50% + var(--outpost-pan-y, 0px)))
scale(1) !important;
}
.app.is-live[data-mode="backhub"] .back-hub__frame {
transform:
translate(calc(-50% + var(--backhub-pan-x, 0px)), calc(-50% + var(--backhub-pan-y, 0px)))
scale(1) !important;
}
.outpost-store,
.back-hub {
background:#000 !important;
}
}
/* V59 — cleaner top-to-bottom slab stack + true mobile cover framing */
.outpost-merch {
left: 68.2% !important;
top: 29.2% !important;
width: 16.2% !important;
height: 55.2% !important;
z-index: 34 !important;
}
/* Keep the slab family unified and mounted on the right wall with breathing room */
.merch-slabs {
overflow: visible !important;
}
.merch-slab {
transform-origin: center center !important;
}
.merch-slab img {
filter: drop-shadow(0 12px 12px rgba(0,0,0,.58)) drop-shadow(0 0 8px rgba(255,138,48,.10));
}
.merch-slab--fortune {
left: 22% !important;
top: 0% !important;
width: 44% !important;
transform: rotate(0deg) !important;
}
.merch-slab--aftermath {
left: 18% !important;
top: 33% !important;
width: 50% !important;
transform: rotate(0deg) !important;
}
.merch-slab--heartland {
left: 10% !important;
top: 69% !important;
width: 61% !important;
transform: rotate(0deg) !important;
}
.merch-slab--heartland::after {
inset: 26% 8% 28% !important;
}
.merch-slab:hover,
.merch-slab:focus-visible {
transform: translateY(-2px) scale(1.018) rotate(0deg) !important;
}
.outpost-comic-stand {
right: 1.4% !important;
bottom: 20.4% !important;
width: 7.0% !important;
}
/* Mobile: full-screen, immersive, no stretch distortion, organized slab stack */
@media (max-width: 900px){
.outpost-merch {
left: 68.8% !important;
top: 29.6% !important;
width: 17.2% !important;
height: 54.8% !important;
}
.merch-slab--fortune {
left: 22% !important;
top: 0% !important;
width: 44% !important;
}
.merch-slab--aftermath {
left: 17% !important;
top: 33% !important;
width: 51% !important;
}
.merch-slab--heartland {
left: 9% !important;
top: 69.5% !important;
width: 63% !important;
}
.outpost-comic-stand {
right: 1.6% !important;
bottom: 20.8% !important;
width: 7.6% !important;
}
.back-hub__frame,
.outpost-store__frame {
width: max(100vw, calc(100dvh * 1.7778958565)) !important;
height: 100dvh !important;
min-width: 0 !important;
aspect-ratio: auto !important;
}
.back-hub__base,
.back-hub__afterglow,
.outpost-store__img {
object-fit: cover !important;
width: 100% !important;
height: 100% !important;
}
.back-hub,
.outpost-store,
.back-hub__frame,
.outpost-store__frame {
background: #000 !important;
}
}
@media (max-width: 520px){
.outpost-merch {
left: 69.3% !important;
top: 30.2% !important;
width: 17.8% !important;
height: 54.2% !important;
}
.merch-slab--fortune {
left: 22% !important;
width: 45% !important;
}
.merch-slab--aftermath {
left: 17% !important;
top: 33% !important;
width: 52% !important;
}
.merch-slab--heartland {
left: 8% !important;
top: 70% !important;
width: 64% !important;
}
}
/* V60 — contain the Outpost slabs so Heartland does not overpower or get cut */
html body #app #outpostMerch.outpost-merch {
left: 68.1% !important;
top: 29.0% !important;
width: 17.5% !important;
height: 58.0% !important;
z-index: 34 !important;
overflow: visible !important;
}
html body #app #outpostMerch .merch-slabs {
overflow: visible !important;
}
html body #app #outpostMerch .merch-slab img {
filter: drop-shadow(0 10px 11px rgba(0,0,0,.56)) drop-shadow(0 0 7px rgba(255,118,34,.10)) !important;
}
html body #app #outpostMerch .merch-slab--fortune {
left: 24% !important;
top: 8.2% !important;
width: 40% !important;
transform: rotate(0deg) !important;
}
html body #app #outpostMerch .merch-slab--aftermath {
left: 18% !important;
top: 39.2% !important;
width: 47% !important;
transform: rotate(0deg) !important;
}
html body #app #outpostMerch .merch-slab--heartland {
left: 14% !important;
top: 75.8% !important;
width: 53% !important;
transform: rotate(0deg) !important;
}
html body #app #outpostMerch .merch-slab--heartland::after {
inset: 28% 14% 35% !important;
opacity: .30 !important;
filter: blur(4px) !important;
transform: translateX(60%) !important;
animation: heartlandSlabChaseTight 2.25s linear infinite !important;
}
html body #app #outpostMerch .merch-slab--heartland img {
animation: heartlandSlabPulse 2.35s ease-in-out infinite !important;
}
html body #app #outpostComicBtn.outpost-comic-stand {
right: 1.45% !important;
bottom: 20.3% !important;
width: 7.05% !important;
}
@keyframes heartlandSlabChaseTight {
from { transform: translateX(60%); opacity: .12; }
15% { opacity: .36; }
to { transform: translateX(-60%); opacity: .12; }
}
@media (max-width: 900px){
html body #app #outpostMerch.outpost-merch {
left: 68.5% !important;
top: 29.4% !important;
width: 18.2% !important;
height: 57.0% !important;
}
html body #app #outpostMerch .merch-slab--fortune {
left: 24% !important;
top: 8.6% !important;
width: 41% !important;
}
html body #app #outpostMerch .merch-slab--aftermath {
left: 17.5% !important;
top: 39.4% !important;
width: 48% !important;
}
html body #app #outpostMerch .merch-slab--heartland {
left: 13% !important;
top: 76.2% !important;
width: 55% !important;
}
html body #app #outpostComicBtn.outpost-comic-stand {
right: 1.55% !important;
bottom: 20.8% !important;
width: 7.6% !important;
}
}
@media (max-width: 520px){
html body #app #outpostMerch.outpost-merch {
left: 69.1% !important;
top: 29.8% !important;
width: 18.7% !important;
height: 56.0% !important;
}
html body #app #outpostMerch .merch-slab--fortune {
left: 24% !important;
top: 8.8% !important;
width: 42% !important;
}
html body #app #outpostMerch .merch-slab--aftermath {
left: 17% !important;
top: 39.6% !important;
width: 49% !important;
}
html body #app #outpostMerch .merch-slab--heartland {
left: 12.5% !important;
top: 76.7% !important;
width: 56% !important;
}
}
/* V63 — Heartland performance health pass: keep the look, reduce browser strain */
.ride-stage,
.back-hub,
.outpost-store {
contain: layout paint style;
}
.scene-img {
transition: opacity 420ms cubic-bezier(.22,.72,.16,1) !important;
will-change: opacity !important;
}
.app.is-traveling .scene-overlay--blur,
.app.is-stage-loading .scene-overlay--blur {
opacity: .13 !important;
}
.outpost-store__img,
.back-hub__base,
.back-hub__afterglow,
.hub-base {
backface-visibility: hidden;
transform: translateZ(0);
}
@media (prefers-reduced-motion: reduce) {
.scene-img,
.scene-card,
.stage-menu,
.outpost-store__img,
.back-hub__frame,
.outpost-store__frame {
transition-duration: 1ms !important;
animation-duration: 1ms !important;
}
}
/* V64 — mobile-only Outpost framing: keep desktop approved, start mobile with Maisie + slabs composed */
@media (max-width: 900px){
html body #app #outpostMerch.outpost-merch {
left: 70.1% !important;
top: 30.2% !important;
width: 16.3% !important;
height: 55.8% !important;
}
html body #app #outpostMerch .merch-slab--fortune {
left: 24% !important;
top: 7.0% !important;
width: 39% !important;
}
html body #app #outpostMerch .merch-slab--aftermath {
left: 17% !important;
top: 39.5% !important;
width: 46% !important;
}
html body #app #outpostMerch .merch-slab--heartland {
left: 13% !important;
top: 76.2% !important;
width: 52% !important;
}
html body #app #outpostMerch .merch-slab--heartland::after {
inset: 30% 16% 36% !important;
filter: blur(3px) !important;
opacity: .26 !important;
}
}
@media (max-width: 520px){
html body #app #outpostMerch.outpost-merch {
left: 70.4% !important;
top: 30.5% !important;
width: 16.8% !important;
height: 55.4% !important;
}
html body #app #outpostMerch .merch-slab--fortune {
left: 24% !important;
top: 7.2% !important;
width: 40% !important;
}
html body #app #outpostMerch .merch-slab--aftermath {
left: 16.5% !important;
top: 39.8% !important;
width: 47% !important;
}
html body #app #outpostMerch .merch-slab--heartland {
left: 12.5% !important;
top: 76.8% !important;
width: 53% !important;
}
}
/* V65 — mobile Outpost opening composition should match desktop more closely.
Keep desktop untouched. On phones/tablets, make the slab stack smaller,
keep it to Maisie's right, and let the opening crop show more of Maisie. */
@media (max-width: 900px){
html body #app #outpostMerch.outpost-merch {
left: 69.0% !important;
top: 31.0% !important;
width: 15.2% !important;
height: 52.2% !important;
}
html body #app #outpostMerch .merch-slab--fortune {
left: 25% !important;
top: 8.4% !important;
width: 36% !important;
}
html body #app #outpostMerch .merch-slab--aftermath {
left: 18% !important;
top: 39.8% !important;
width: 43% !important;
}
html body #app #outpostMerch .merch-slab--heartland {
left: 14% !important;
top: 76.6% !important;
width: 49% !important;
}
html body #app #outpostMerch .merch-slab--heartland::after {
inset: 31% 17% 37% !important;
opacity: .24 !important;
filter: blur(3px) !important;
}
html body #app #outpostComicBtn.outpost-comic-stand {
right: 2.8% !important;
bottom: 20.1% !important;
width: 7.2% !important;
}
}
@media (max-width: 520px){
html body #app #outpostMerch.outpost-merch {
left: 68.7% !important;
top: 31.1% !important;
width: 15.8% !important;
height: 52.8% !important;
}
html body #app #outpostMerch .merch-slab--fortune {
left: 24.5% !important;
top: 8.6% !important;
width: 37% !important;
}
html body #app #outpostMerch .merch-slab--aftermath {
left: 17.5% !important;
top: 40.0% !important;
width: 44% !important;
}
html body #app #outpostMerch .merch-slab--heartland {
left: 13.5% !important;
top: 76.9% !important;
width: 50% !important;
}
html body #app #outpostComicBtn.outpost-comic-stand {
right: 2.4% !important;
bottom: 20.1% !important;
width: 7.6% !important;
}
}
/* V67 — stability cleanup: keep Heartland alive, but reduce crash risk on rapid taps/drags */
.app.is-scene-fading .hotspot,
.app.is-scene-fading .radio-object,
.app.is-scene-fading .back-zone,
.app.is-scene-fading .merch-slab,
.app.is-traveling .hotspot,
.app.is-stage-loading .hotspot,
.app.is-traveling .radio-object,
.app.is-stage-loading .radio-object {
pointer-events: none !important;
}
.app.is-mobile-panning .living-glows,
.app.is-mobile-panning .bbq-smoke,
.app.is-mobile-panning .outpost-store__fx,
.app.is-mobile-panning .back-hub__atmosphere {
animation-play-state: paused !important;
}
.app:not([data-mode="hub"]) .bbq-smoke,
.app:not([data-mode="hub"]) .tv-flicker,
.app:not([data-mode="hub"]) .living-glows {
animation-play-state: paused !important;
}
.app:not([data-mode="outpost"]) .outpost-store__img,
.app:not([data-mode="outpost"]) .outpost-store__fx * {
animation-play-state: paused !important;
}
@media (max-width: 900px){
.hub-light,
.live-glow,
.outpost-glow,
.back-hub-glow {
filter: blur(calc(var(--blur, 18px) * .72));
}
.smoke {
filter: blur(13px) !important;
}
.outpost-store__img,
.back-hub__base,
.back-hub__afterglow,
.scene-img,
.hub-base {
transform: translateZ(0);
backface-visibility: hidden;
}
.app.is-mobile-panning .outpost-store__img.is-active,
.app.is-mobile-panning .hub-base,
.app.is-mobile-panning .back-hub__base {
filter: brightness(.98) saturate(1) !important;
}
.app.is-mobile-panning .outpost-dust,
.app.is-mobile-panning .outpost-bg-dust,
.app.is-mobile-panning .smoke,
.app.is-mobile-panning .live-glow,
.app.is-mobile-panning .back-hub-spark {
opacity: .35 !important;
}
}
/* === V65 SUMMER'S PARADISE ===
Full-bleed scene behind the Staff Access "Summer" door. Every hotspot and the live
jumbotron screen are placed in % of the 1672x941 art, so they track the image on resize. */
.summer-scene {
/* Jumbotron screen face in the art. Nudge these four numbers if the video sits off the screen. */
--jumbo-left: 43%;
--jumbo-top: 15.5%;
--jumbo-width: 21.5%;
--jumbo-height: 25%;
position: fixed;
inset: 0;
z-index: 29;
opacity: 0;
visibility: hidden;
pointer-events: none;
overflow: hidden;
background: #02060a;
transform: scale(1.018);
filter: blur(10px) brightness(.6);
transition: opacity 760ms ease, visibility 760ms ease, transform 950ms cubic-bezier(.18,.82,.22,1), filter 950ms ease;
}
.app.is-live[data-mode="summer"] .summer-scene {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: scale(1);
filter: blur(0) brightness(1);
}
.app[data-mode="summer"] .hub,
.app[data-mode="summer"] .ride-stage,
.app[data-mode="summer"] .back-hub,
.app[data-mode="summer"] .outpost-store {
opacity: 0;
pointer-events: none;
filter: blur(14px) brightness(.42);
transform: scale(1.045);
transition-duration: 560ms;
}
.app[data-mode="summer"] .controls { opacity: 0; pointer-events: none; }
.app[data-mode="summer"] .hub-card { opacity: 0 !important; pointer-events: none; }
.summer-scene__frame {
position: absolute;
left: 50%;
top: 50%;
width: max(100vw, calc(100vh * 1.7778958565));
aspect-ratio: 1672 / 941;
transform: translate(-50%, -50%);
overflow: hidden;
background: #02060a;
}
.summer-scene__frame::before {
content: "";
position: absolute;
inset: -4%;
z-index: 7;
pointer-events: none;
background:
radial-gradient(ellipse at 50% 42%, transparent 0 44%, rgba(0,0,0,.14) 72%, rgba(0,0,0,.66) 100%),
linear-gradient(180deg, rgba(0,0,0,.04), transparent 42%, rgba(0,0,0,.22));
}
.summer-scene__frame::after {
content: "";
position: absolute;
inset: 0;
z-index: 8;
pointer-events: none;
background: repeating-linear-gradient(0deg, rgba(255,255,255,.026) 0 1px, transparent 1px 4px);
opacity: .14;
mix-blend-mode: overlay;
}
.summer-scene__base {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: fill;
pointer-events: none;
user-select: none;
animation: summerBreathe 9.4s ease-in-out infinite alternate;
}
/* Glows + water shimmer */
.summer-scene__fx { position: absolute; inset: 0; z-index: 9; pointer-events: none; }
.summer-glow {
position: absolute;
transform: translate(-50%, -50%);
border-radius: 999px;
mix-blend-mode: screen;
filter: blur(26px);
opacity: .12;
transition: opacity 260ms ease, filter 260ms ease;
}
.summer-glow--jumbotron { left: 58%; top: 25%; width: 38%; height: 44%; background: radial-gradient(ellipse at center, rgba(120,210,255,.7), rgba(255,120,190,.22) 46%, transparent 76%); animation: summerScreenPulse 5.6s ease-in-out infinite alternate; }
.summer-glow--pool { left: 62%; top: 73%; width: 52%; height: 22%; background: radial-gradient(ellipse at center, rgba(80,220,255,.55), rgba(40,120,255,.16) 50%, transparent 78%); }
.summer-glow--truck { left: 18%; top: 72%; width: 38%; height: 30%; background: radial-gradient(ellipse at center, rgba(255,190,110,.55), rgba(255,110,40,.16) 50%, transparent 78%); }
.summer-glow--sign { left: 34.8%; top: 58%; width: 10%; height: 20%; background: radial-gradient(ellipse at center, rgba(255,220,140,.75), transparent 72%); }
.summer-glow--lifeguard { left: 92%; top: 34.5%; width: 12%; height: 20%; background: radial-gradient(ellipse at center, rgba(255,90,80,.7), transparent 72%); }
.summer-scene[data-hover="jumbotron"] .summer-glow--jumbotron,
.summer-scene[data-hover="pool"] .summer-glow--pool,
.summer-scene[data-hover="truck"] .summer-glow--truck,
.summer-scene[data-hover="sign"] .summer-glow--sign,
.summer-scene[data-hover="lifeguard"] .summer-glow--lifeguard { opacity: .5; filter: blur(20px); }
.summer-shimmer {
position: absolute;
height: 5%;
border-radius: 999px;
background: linear-gradient(90deg, transparent, rgba(190,245,255,.28), transparent);
filter: blur(4px);
mix-blend-mode: screen;
opacity: .35;
animation: summerShimmer 7s ease-in-out infinite;
}
.summer-shimmer--one { left: 42%; top: 69%; width: 26%; }
.summer-shimmer--two { left: 60%; top: 76%; width: 22%; animation-delay: -3.4s; animation-duration: 9s; }
.summer-scene.is-surging .summer-glow--pool { opacity: .75; animation: summerSurge 1.8s ease-out 1; }
.summer-scene.is-surging .summer-shimmer { opacity: .8; animation-duration: 1.6s; }
/* Live jumbotron feed (inside the art, under the hotspots) */
.jumbotron-live {
position: absolute;
z-index: 6; /* above the art, below the vignette so it sits in the scene's light */
left: var(--jumbo-left);
top: var(--jumbo-top);
width: var(--jumbo-width);
height: var(--jumbo-height);
overflow: hidden;
border-radius: .35% / .6%;
background: #000;
pointer-events: none;
opacity: 0;
transform: perspective(900px) rotateY(-1.5deg);
transform-origin: 50% 50%;
box-shadow: 0 0 1.4vw rgba(110,200,255,.35), 0 0 4vw rgba(255,120,190,.14);
transition: opacity 900ms ease 300ms;
}
.summer-scene.jumbotron-on .jumbotron-live { opacity: 1; }
.jumbotron-live__video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: saturate(1.12) contrast(1.06) brightness(1.04);
}
.jumbotron-live__scan {
position: absolute;
inset: 0;
background:
repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px),
repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px);
mix-blend-mode: multiply;
opacity: .55;
}
.jumbotron-live__glare {
position: absolute;
inset: 0;
background:
linear-gradient(115deg, rgba(255,255,255,.10) 0 18%, transparent 34%),
radial-gradient(ellipse at 50% 50%, transparent 58%, rgba(0,0,0,.45) 100%);
animation: summerScreenFlicker 7.2s steps(1,end) infinite;
}
/* Hotspots (invisible pads; hover = glow + label) */
.summer-spot {
position: absolute;
z-index: 22;
border: 0;
padding: 0;
background: transparent;
cursor: pointer;
outline: none;
-webkit-tap-highlight-color: transparent;
}
.summer-spot span {
position: absolute;
left: 50%;
bottom: 6%;
transform: translate(-50%, 8px);
padding: 7px 11px;
border: 1px solid rgba(160,230,255,.42);
border-radius: 999px;
background: rgba(2,10,18,.58);
color: rgba(225,248,255,.92);
font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: .22em;
white-space: nowrap;
text-shadow: 0 0 10px rgba(110,210,255,.6);
opacity: 0;
pointer-events: none;
transition: opacity 200ms ease, transform 200ms ease;
}
.summer-spot:hover span,
.summer-spot:focus-visible span { opacity: 1; transform: translate(-50%, 0); }
.summer-spot--jumbotron { left: 42%; top: 4%; width: 33%; height: 40%; }
.summer-spot--truck { left: 0; top: 57.5%; width: 37.5%; height: 29%; }
.summer-spot--sign { left: 31.5%; top: 50%; width: 6.5%; height: 15%; z-index: 23; }
.summer-spot--pool { left: 38%; top: 65%; width: 49%; height: 16%; }
.summer-spot--lifeguard { left: 88%; top: 28%; width: 8%; height: 13.5%; }
.summer-spot--sign span { bottom: auto; top: -18%; }
.summer-spot--lifeguard span { left: auto; right: 0; transform: translate(0, 8px); }
.summer-spot--lifeguard:hover span,
.summer-spot--lifeguard:focus-visible span { transform: translate(0, 0); }
.summer-spot--truck::after {
/* small "found" tag on the truck once the clue is in localStorage */
content: "CLUE FOUND";
position: absolute;
left: 46%;
top: 8%;
padding: 5px 8px;
border: 1px solid rgba(255,196,110,.5);
border-radius: 999px;
background: rgba(20,8,2,.6);
color: rgba(255,214,150,.86);
font: 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: .2em;
opacity: 0;
transition: opacity 300ms ease;
pointer-events: none;
}
.summer-scene.truck-found .summer-spot--truck::after { opacity: .85; }
/* Info card (bottom-left, same language as Staff Access + Outpost) */
.summer-card {
position: fixed;
z-index: 46;
left: max(18px, env(safe-area-inset-left));
bottom: max(70px, calc(env(safe-area-inset-bottom) + 70px));
width: min(438px, calc(100vw - 36px));
padding: 13px 16px 14px;
border-left: 1px solid rgba(120,215,255,.46);
background: linear-gradient(90deg, rgba(0,0,0,.56), rgba(0,0,0,.24), transparent);
text-shadow: 0 2px 16px #000;
opacity: 0;
transform: translateY(10px);
pointer-events: none;
transition: opacity 320ms ease 220ms, transform 360ms ease 220ms;
}
.app.is-live[data-mode="summer"] .summer-card { opacity: 1; transform: translateY(0); }
.summer-card__status {
margin-bottom: 6px;
color: rgba(130,220,255,.94);
font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: .24em;
text-transform: uppercase;
}
.summer-card h1 {
margin: 0 0 6px;
font-size: clamp(28px, 5.2vw, 58px);
line-height: .9;
letter-spacing: -.035em;
text-transform: uppercase;
}
.summer-card p { margin: 0; color: rgba(242,223,182,.76); font-size: 13px; line-height: 1.42; }
/* Signpost menu */
.summer-signs {
position: fixed;
z-index: 50;
left: 50%;
bottom: max(70px, calc(env(safe-area-inset-bottom) + 70px));
transform: translateX(-50%);
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
max-width: calc(100vw - 32px);
}
.summer-signs[hidden] { display: none; }
.summer-signs button,
.summer-scene__back,
.summer-sound,
.jumbotron__channel,
.summer-modal__close {
border: 1px solid rgba(150,225,255,.42);
background: rgba(2,10,18,.56);
color: rgba(228,247,255,.9);
border-radius: 999px;
padding: 10px 14px;
font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: .22em;
text-transform: uppercase;
cursor: pointer;
transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, opacity 260ms ease, transform 260ms ease;
}
.summer-signs button:hover, .summer-signs button:focus-visible,
.summer-scene__back:hover, .summer-scene__back:focus-visible,
.summer-sound:hover, .summer-sound:focus-visible,
.jumbotron__channel:hover, .jumbotron__channel:focus-visible,
.summer-modal__close:hover, .summer-modal__close:focus-visible {
background: rgba(90,190,255,.16);
border-color: rgba(190,240,255,.72);
box-shadow: 0 0 18px rgba(90,200,255,.28);
outline: none;
}
.summer-scene__back {
position: fixed;
z-index: 52;
right: max(18px, env(safe-area-inset-right));
bottom: max(22px, calc(env(safe-area-inset-bottom) + 22px));
border-color: rgba(255,185,98,.42);
background: rgba(7,3,1,.46);
color: rgba(255,233,196,.86);
opacity: 0;
transform: translateY(8px);
}
.summer-sound {
position: fixed;
z-index: 52;
right: max(18px, env(safe-area-inset-right));
top: max(18px, calc(env(safe-area-inset-top) + 18px));
opacity: 0;
transform: translateY(-8px);
}
.summer-sound::before { content: "\266A "; opacity: .7; }
.summer-sound.is-on { border-color: rgba(120,230,255,.8); box-shadow: 0 0 16px rgba(90,200,255,.32); }
.app.is-live[data-mode="summer"] .summer-scene__back,
.app.is-live[data-mode="summer"] .summer-sound { opacity: 1; transform: translateY(0); }
/* Modals */
.summer-modal {
position: fixed;
inset: 0;
z-index: 70;
display: grid;
place-items: center;
padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
animation: summerModalIn 320ms ease both;
}
.summer-modal[hidden] { display: none; }
.summer-modal__backdrop { position: absolute; inset: 0; background: rgba(0,4,8,.74); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.summer-modal__panel { position: relative; }
.summer-modal__close { padding: 8px 12px; }
.jumbotron {
width: min(1040px, 100%);
padding: 14px;
border: 1px solid rgba(140,220,255,.32);
border-radius: 14px;
background: linear-gradient(180deg, rgba(8,18,30,.94), rgba(2,6,12,.96));
box-shadow: 0 0 60px rgba(70,170,255,.22), inset 0 0 0 4px rgba(0,0,0,.6);
}
.jumbotron__bar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.jumbotron__eyebrow { color: rgba(130,220,255,.9); font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .24em; }
.jumbotron__bar strong { flex: 1; font-size: clamp(16px, 2.2vw, 24px); letter-spacing: .02em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jumbotron__screen {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 8px;
background: #000;
box-shadow: 0 0 0 1px rgba(150,225,255,.18), 0 0 34px rgba(80,180,255,.25);
}
.jumbotron__screen video,
.jumbotron__screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; object-fit: contain; }
.jumbotron__screen [hidden] { display: none; }
.jumbotron__channels { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.jumbotron__channels[hidden] { display: none; }
.jumbotron__channel { padding: 8px 12px; font-size: 9px; }
.jumbotron__channel.is-active { border-color: rgba(120,230,255,.86); background: rgba(80,190,255,.2); }
.clue-card {
width: min(460px, 100%);
padding: 22px 22px 18px;
border: 1px solid rgba(255,196,110,.42);
border-radius: 6px;
background:
repeating-linear-gradient(0deg, rgba(120,80,30,.07) 0 1px, transparent 1px 22px),
linear-gradient(180deg, #efe1c0, #d9c49a);
color: #2a1a0a;
box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 40px rgba(255,170,80,.18);
transform: rotate(-1.2deg);
font-family: Georgia, 'Times New Roman', serif;
}
.clue-card__eyebrow { font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .24em; color: #8a4a12; text-transform: uppercase; }
.clue-card h2 { margin: 8px 0 10px; font-size: clamp(26px, 5vw, 38px); line-height: .95; text-transform: uppercase; letter-spacing: -.02em; }
.clue-card p { margin: 0 0 12px; font-size: 15px; line-height: 1.45; }
.clue-card__code { display: inline-block; padding: 8px 12px; border: 1px dashed rgba(60,30,10,.5); font: 16px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .2em; }
.clue-card__progress { margin-top: 12px; font: 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .2em; color: rgba(60,30,10,.7); text-transform: uppercase; }
.clue-card .summer-modal__close { margin-top: 14px; background: rgba(30,14,4,.82); color: #f5e3c0; border-color: rgba(80,40,10,.5); }
@keyframes summerBreathe { from { transform: scale(1); } to { transform: scale(1.012); } }
@keyframes summerScreenPulse { from { opacity: .1; } to { opacity: .22; } }
@keyframes summerShimmer {
0%, 100% { transform: translateX(-8%); opacity: .14; }
50% { transform: translateX(8%); opacity: .42; }
}
@keyframes summerSurge {
0% { transform: translate(-50%,-50%) scale(.9); }
40% { transform: translate(-50%,-50%) scale(1.08); }
100% { transform: translate(-50%,-50%) scale(1); }
}
@keyframes summerScreenFlicker {
0%, 31%, 33%, 77%, 79%, 100% { opacity: 1; }
32%, 78% { opacity: .82; }
}
@keyframes summerModalIn { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 900px){
.summer-scene { touch-action: none; }
.summer-scene__frame {
width: calc(100dvh * 1.7778958565);
height: 100dvh;
aspect-ratio: auto;
}
.app.is-live[data-mode="summer"] .summer-scene__frame {
transform: translate(calc(-50% + var(--summer-pan-x, 0px)), calc(-50% + var(--summer-pan-y, 0px)));
transition: transform 180ms ease-out;
will-change: transform;
}
.app.is-mobile-panning .summer-scene__frame { transition: none; }
.app.is-mobile-panning .summer-scene { cursor: grabbing; }
.summer-spot span { opacity: .85; transform: translate(-50%, 0); font-size: 8px; letter-spacing: .16em; padding: 6px 9px; }
.summer-spot--lifeguard span { transform: none; }
.summer-card {
left: max(14px, env(safe-area-inset-left));
bottom: max(66px, calc(env(safe-area-inset-bottom) + 66px));
width: min(310px, calc(100vw - 28px));
padding: 11px 13px 12px;
background: linear-gradient(90deg, rgba(0,0,0,.5), rgba(0,0,0,.16), transparent);
}
.summer-card h1 { font-size: clamp(25px, 9vw, 42px); }
.summer-card p { font-size: 12px; }
.summer-scene__back {
left: max(14px, env(safe-area-inset-left));
right: auto;
bottom: max(24px, calc(env(safe-area-inset-bottom) + 24px));
font-size: 8px;
letter-spacing: .16em;
}
.summer-sound { right: max(12px, env(safe-area-inset-right)); top: max(12px, calc(env(safe-area-inset-top) + 12px)); font-size: 8px; letter-spacing: .16em; padding: 8px 11px; }
.summer-signs { bottom: max(190px, calc(env(safe-area-inset-bottom) + 190px)); }
.summer-signs button { font-size: 9px; letter-spacing: .16em; padding: 10px 12px; }
.jumbotron { padding: 10px; }
.jumbotron__eyebrow { display: none; }
.app[data-mode="summer"] .controls { opacity: .92; }
.app[data-mode="summer"] .controls::before { content: "DRAG TO LOOK • TAP SCREEN / TRUCK"; }
}
@media (max-width: 520px){
.app[data-mode="summer"] .controls::before { content: "DRAG LOOK • TAP"; }
}
@media (prefers-reduced-motion: reduce){
.summer-scene__base, .summer-shimmer, .summer-glow, .jumbotron-live__glare { animation: none !important; }
}
/* Sound toggle sits just under the global MUTE button */
.summer-sound,
.app .summer-sound { right: max(12px, env(safe-area-inset-right)); top: max(54px, calc(env(safe-area-inset-top) + 54px)); }
/* ===== V66: real art retune + moving water ===== */
/* Front screen panel of the jumbotron in the real art (% of frame). Slight perspective: left edge taller. */
.summer-scene {
--jumbo-left: 44.8%;
--jumbo-top: 15.7%;
--jumbo-width: 19.8%;
--jumbo-height: 24.2%;
--jumbo-clip: polygon(0 3.3%, 100% 0, 100% 89%, 0 100%);
}
.jumbotron-live { transform: none; border-radius: 0; clip-path: var(--jumbo-clip); box-shadow: none; }
/* Art + video + water canvas breathe together so the WebGL water stays pixel-aligned. */
.summer-scene__art { position: absolute; inset: 0; z-index: 1; animation: summerBreathe 9.4s ease-in-out infinite alternate; transform-origin: 50% 50%; }
.summer-scene__base { animation: none; }
.summer-water { position: absolute; z-index: 5; display: block; pointer-events: none; }
.summer-scene.has-water-gl .summer-shimmer { display: none; }
/* Hotspots: invisible on the art; a soft glow appears only on hover / tap / keyboard focus. */
.summer-spot span { display: none; }
.summer-glow { opacity: 0; }
.summer-glow--jumbotron { left: 54.7%; top: 27.5%; width: 30%; height: 38%; animation: none; }
.summer-glow--pool { left: 62%; top: 75%; width: 54%; height: 20%; }
.summer-glow--truck { left: 18.5%; top: 71.5%; width: 38%; height: 32%; }
.summer-glow--sign { left: 34.9%; top: 58.2%; width: 9%; height: 19%; }
.summer-glow--lifeguard { left: 91.6%; top: 34.5%; width: 11%; height: 19%; }
.summer-spot--jumbotron { left: 40.5%; top: 3%; width: 36.5%; height: 40%; }
.summer-spot--truck { left: .5%; top: 57%; width: 36.5%; height: 29.5%; }
.summer-spot--sign { left: 31.5%; top: 50.5%; width: 6.8%; height: 15.5%; z-index: 23; }
.summer-spot--pool { left: 37%; top: 64.5%; width: 50.5%; height: 18%; }
.summer-spot--lifeguard { left: 87.8%; top: 27.3%; width: 7.8%; height: 14.5%; }
.summer-spot:focus-visible { box-shadow: none; }
@media (max-width: 900px){ .summer-spot span { display: none; } }
@media (prefers-reduced-motion: reduce){
.summer-scene__art { animation: none !important; }
.summer-water { display: none; }
}
/* ===== V67: jumbotron fitted inside the painted screen bezel + light flicker ===== */
/* Fallback (no JS): bounding box of the panel's inner bezel, clipped to its outline.
summer-screen.js replaces this with an exact perspective warp + curved-edge clip. */
.summer-scene {
--jumbo-left: 44.82%;
--jumbo-top: 16.0%;
--jumbo-width: 19.62%;
--jumbo-height: 23.6%;
--jumbo-clip: polygon(0 18.5%, 50% 6.6%, 100% 0, 100% 90.6%, 50% 95.5%, 0 100%);
}
.jumbotron-live { box-shadow: none; }
.jumbotron-live.is-fitted { transform-origin: 0 0; border-radius: 0; will-change: transform; backface-visibility: hidden; }
.jumbotron-live__video { filter: saturate(1.08) contrast(1.04) brightness(.96); }
.jumbotron-live__bezel { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: blur(1.2px); overflow: visible; }
.jumbotron-live__glare {
background:
linear-gradient(115deg, rgba(255,255,255,.08) 0 16%, transparent 32%),
radial-gradient(ellipse at 50% 46%, transparent 62%, rgba(0,0,0,.34) 100%);
}
/* Light flicker: additive warm glows over the painted bulbs. */
.summer-lights { position: absolute; inset: 0; z-index: 7; pointer-events: none; mix-blend-mode: screen; }
.summer-light {
position: absolute;
aspect-ratio: 1;
transform: translate(-50%, -50%);
border-radius: 50%;
opacity: var(--o);
background: radial-gradient(circle closest-side, rgba(255,226,170,.95) 0, rgba(255,196,118,.55) 22%, rgba(255,150,70,.2) 52%, rgba(255,120,50,0) 100%);
animation: summerBulbA var(--dur) ease-in-out var(--delay) infinite alternate;
animation-play-state: paused;
}
.summer-light--lamp { background: radial-gradient(circle closest-side, rgba(255,214,150,.75) 0, rgba(255,180,96,.38) 30%, rgba(255,140,60,.12) 62%, rgba(255,120,50,0) 100%); }
.summer-light--v1 { animation-name: summerBulbB; }
.summer-light--v2 { animation-name: summerBulbC; }
.summer-lights.is-running .summer-light { animation-play-state: running; }
.summer-light.is-stutter { animation: summerBulbStutter var(--st, .8s) linear 1; }
.summer-lights__ambient {
position: absolute; inset: 0; opacity: 0;
background: radial-gradient(ellipse 70% 60% at 30% 30%, rgba(255,170,90,.55), transparent 70%), radial-gradient(ellipse 60% 50% at 75% 45%, rgba(255,160,90,.4), transparent 70%);
animation: summerAmbient var(--amb-dur, 11s) ease-in-out infinite alternate;
animation-play-state: paused;
}
.summer-lights.is-running .summer-lights__ambient { animation-play-state: running; }
/* Gentle, irregular variation (no full flashes; each cycle is several seconds). */
@keyframes summerBulbA { 0% { opacity: var(--o); } 23% { opacity: calc((var(--o) + var(--lo)) / 2); } 41% { opacity: var(--o); } 67% { opacity: var(--lo); } 100% { opacity: calc(var(--o) * .97); } }
@keyframes summerBulbB { 0% { opacity: var(--lo); } 30% { opacity: var(--o); } 52% { opacity: calc(var(--o) * .94); } 78% { opacity: calc((var(--o) + var(--lo)) / 2); } 100% { opacity: var(--o); } }
@keyframes summerBulbC { 0% { opacity: calc(var(--o) * .96); } 18% { opacity: var(--lo); } 46% { opacity: calc((var(--o) * 2 + var(--lo)) / 3); } 71% { opacity: var(--o); } 100% { opacity: calc((var(--o) + var(--lo)) / 2); } }
/* Bad bulb: two soft dips ≥0.36s apart (<3 Hz) and a recover, glow only (the painted bulb stays lit). */
@keyframes summerBulbStutter {
0% { opacity: var(--o); } 18% { opacity: calc(var(--o) * .3); } 38% { opacity: calc(var(--o) * 1.08); }
58% { opacity: calc(var(--o) * .5); } 100% { opacity: var(--o); }
}
@keyframes summerAmbient { from { opacity: 0; } to { opacity: var(--amb, .05); } }
/* Debug markers (?lightdebug=1) */
.summer-lights.is-debug { mix-blend-mode: normal; }
.summer-lights.is-debug .summer-light { opacity: 1 !important; animation: none !important; background: none; outline: 1px solid rgba(80,255,120,.9); }
.summer-lights.is-debug .summer-light::after { content: attr(data-idx); position: absolute; left: 100%; top: -2px; font: 9px/1 ui-monospace, monospace; color: #6f6; text-shadow: 0 0 2px #000; }
@media (prefers-reduced-motion: reduce){
.summer-light, .summer-lights__ambient { animation: none !important; }
}
/* ===================== V69 — THE OUTPOST SHOP as a transparent overlay (real Bonfire catalog) =====================
No frame, no backdrop: the Outpost, Maisie and the Man vs Self comic stay visible and clickable.
outpost-shop.js measures the painted scene and sets --zone-*, --bar-*, --bub-*, --glow-* (px). */
@font-face { font-family: 'Press Start 2P'; src: url('assets/fonts/press-start-2p-latin.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'VT323'; src: url('assets/fonts/vt323-latin.woff2') format('woff2'); font-display: swap; }
.sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.oshop {
--px: 'Press Start 2P', ui-monospace, monospace;
--vt: 'VT323', ui-monospace, monospace;
--amber: #ffb347; --gold: #ffd66b; --ember: #ff7a1f; --cream: #fff1d2; --ink: #140904;
--glass: rgba(16, 7, 2, .62);
--zone-l: 66vw; --zone-w: 26vw; --zone-t: 30vh; --zone-h: 52vh;
--bar-r: 8vw; --bar-w: 760px; --bar-b: 14px;
--bub-r: 63vw; --bub-t: 34vh; --bub-w: 300px;
--glow-x: 79vw; --glow-y: 56vh;
position: fixed; inset: 0; z-index: 70;
pointer-events: none; /* the scene underneath stays live */
opacity: 0; transition: opacity 240ms steps(5, end);
color: var(--cream);
}
.oshop[hidden] { display: none; }
.oshop.is-open { opacity: 1; }
.oshop button, .oshop a { pointer-events: auto; font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
.oshop button { background: none; border: 0; padding: 0; cursor: pointer; }
.oshop :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* very light veil: a soft dark pool behind the product + a whisper of counter shade under the bar */
.oshop__veil {
position: absolute; inset: 0;
background:
radial-gradient(ellipse calc(var(--zone-w) * .78) calc(var(--zone-h) * .58) at var(--glow-x) var(--glow-y), rgba(12,5,1,.46), rgba(12,5,1,.18) 62%, transparent 100%),
linear-gradient(0deg, rgba(0,0,0,.28), transparent 22%);
}
/* ---- Maisie's speech bubble ---- */
.oshop__bubble {
position: absolute; right: var(--bub-r); top: var(--bub-t); width: var(--bub-w);
padding: 10px 14px 12px; pointer-events: auto;
background: rgba(255, 244, 222, .94); color: #2a1206;
border: 3px solid #2a1206;
box-shadow: 4px 4px 0 rgba(0,0,0,.45), 0 0 0 2px rgba(255,214,107,.6);
font: 21px/1.05 var(--vt); letter-spacing: .02em;
transform-origin: 100% 60%;
}
.oshop__bubble b { position: absolute; top: -12px; left: 10px; padding: 3px 6px 2px; background: var(--ember); color: #1a0b03; border: 2px solid #2a1206; font: 8px/1 var(--px); letter-spacing: .08em; }
.oshop__bubble p { margin: 0; min-height: 2.1em; }
.oshop__bubble::after { /* pixel tail pointing right, toward her face */
content: ""; position: absolute; right: -15px; top: 44%; width: 15px; height: 16px;
background: #2a1206; clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.oshop__bubble::before { content: ""; position: absolute; right: -9px; top: calc(44% + 4px); width: 10px; height: 8px; background: rgba(255,244,222,.98); clip-path: polygon(0 0, 100% 50%, 0 100%); z-index: 1; }
.oshop__caret { position: absolute; right: 8px; bottom: 3px; font-style: normal; font-size: 9px; color: var(--ember); animation: oshopBlink 1s steps(2, end) infinite; }
.oshop.is-typing .oshop__caret { visibility: hidden; }
.oshop.is-open .oshop__bubble { animation: oshopPopIn 320ms steps(4, end) both; }
/* ---- product zone (between Maisie and the comic) ---- */
.oshop__zone {
position: absolute; left: var(--zone-l); top: var(--zone-t); width: var(--zone-w); height: var(--zone-h);
display: flex; flex-direction: column; align-items: stretch;
}
.oshop__head { display: flex; align-items: center; gap: 8px; justify-content: center; position: relative; padding: 0 40px; }
.oshop__tag { display: none; }
.oshop__title {
margin: 0; font: 11px/1.3 var(--px); color: var(--gold); letter-spacing: .06em; text-align: center;
text-shadow: 2px 2px 0 #3a1500, 0 0 10px rgba(255,150,40,.55), 0 0 2px #000;
}
.oshop__close {
position: absolute; right: 0; top: 50%; transform: translateY(-50%);
width: 34px; height: 34px; display: grid; place-items: center; align-content: center;
background: var(--glass) !important; border: 2px solid rgba(255,179,71,.7) !important;
font: 13px/1 var(--px); color: var(--cream); box-shadow: 2px 2px 0 rgba(0,0,0,.5);
}
.oshop__close small { font: 6px/1 var(--px); color: var(--amber); margin-top: 3px; }
.oshop__close:hover { background: var(--ember) !important; color: #1a0b03; }
.oshop__catbar { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 10px; }
.oshop__catname { display: flex; align-items: baseline; gap: 10px; padding: 6px 12px 5px; background: var(--glass); border: 2px solid rgba(255,179,71,.55); box-shadow: 3px 3px 0 rgba(0,0,0,.4); }
#merchShopCatLabel { font: 15px/1 var(--px); color: var(--cream); text-shadow: 2px 2px 0 #4a1b00; letter-spacing: .04em; }
#merchShopPos { font: 8px/1 var(--px); color: var(--amber); }
.oshop__pips { display: flex; gap: 5px; }
.oshop__pip { width: 18px; height: 14px; display: grid; place-items: center; }
.oshop__pip i { width: 9px; height: 9px; background: rgba(255,214,150,.35); box-shadow: 1px 1px 0 rgba(0,0,0,.6); }
.oshop__pip:hover i { background: var(--amber); }
.oshop__pip.is-active i { width: 11px; height: 11px; background: var(--gold); box-shadow: 0 0 0 2px #4a1b00, 0 0 8px rgba(255,200,80,.9); }
.oshop__stage { flex: 1; min-height: 0; position: relative; touch-action: none; margin: 4px 50px 0; pointer-events: auto; }
.oshop__display { position: absolute; inset: 0; }
.oshop__glow { position: absolute; left: 8%; right: 8%; top: 6%; bottom: 10%; background: radial-gradient(ellipse at 50% 48%, rgba(255,170,70,.30), rgba(255,120,30,.10) 45%, transparent 70%); filter: blur(4px); }
.oshop__shadow { position: absolute; left: 22%; right: 22%; bottom: 2%; height: 12%; background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.55), transparent 70%); }
.oshop__img {
position: absolute; inset: 0; margin: auto; z-index: 1;
max-width: 100%; max-height: 94%; width: auto; height: auto; object-fit: contain;
filter: drop-shadow(0 10px 14px rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(255,160,60,.28));
animation: oshopBob 3.2s ease-in-out infinite;
user-select: none; -webkit-user-drag: none;
}
.oshop__sparkles i { position: absolute; z-index: 2; width: 6px; height: 6px; background: var(--gold); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; animation: oshopSpark 2.6s steps(4, end) infinite; }
.oshop__sparkles i:nth-child(1) { left: 14%; top: 18%; }
.oshop__sparkles i:nth-child(2) { right: 12%; top: 36%; animation-delay: .9s; }
.oshop__sparkles i:nth-child(3) { left: 24%; bottom: 20%; animation-delay: 1.7s; }
/* item-switch animation (pixel-stepped slide + pop) */
.oshop__display.is-out-l .oshop__img { animation: oshopOutL 120ms steps(3, end) forwards; }
.oshop__display.is-out-r .oshop__img { animation: oshopOutR 120ms steps(3, end) forwards; }
.oshop__display.is-in-r .oshop__img { animation: oshopInR 260ms steps(5, end) both, oshopBob 3.2s ease-in-out 260ms infinite; }
.oshop__display.is-in-l .oshop__img { animation: oshopInL 260ms steps(5, end) both, oshopBob 3.2s ease-in-out 260ms infinite; }
.oshop__display.is-pop .oshop__img { animation: oshopPop 240ms steps(4, end) both, oshopBob 3.2s ease-in-out 240ms infinite; }
/* big category arrows flanking the product */
.oshop__arrow {
position: absolute; top: calc(50% + 10px); transform: translateY(-50%);
width: 46px; display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 3;
}
.oshop__arrow--l { left: 0; } .oshop__arrow--r { right: 0; }
.oshop__tri { display: block; width: 34px; height: 54px; background: var(--amber); filter: drop-shadow(3px 3px 0 #3a1500) drop-shadow(0 0 8px rgba(255,150,40,.6));
clip-path: polygon(100% 0, 100% 100%, 72% 100%, 72% 86%, 44% 86%, 44% 72%, 16% 72%, 16% 58%, 0 58%, 0 42%, 16% 42%, 16% 28%, 44% 28%, 44% 14%, 72% 14%, 72% 0); }
.oshop__arrow--r .oshop__tri { transform: scaleX(-1); }
.oshop__arrow small { font: 6px/1.2 var(--px); color: var(--cream); text-shadow: 1px 1px 0 #000, 0 0 4px #000; text-align: center; max-width: 64px; white-space: nowrap; }
.oshop__arrow:hover .oshop__tri { background: var(--gold); }
.oshop__arrow--l:hover .oshop__tri { animation: oshopNudgeL .5s steps(2, end) infinite; }
.oshop__arrow--r:hover .oshop__tri { animation: oshopNudgeR .5s steps(2, end) infinite; }
.oshop__arrow:active .oshop__tri { background: #fff; }
.oshop__plate { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 4px; text-align: center; }
.oshop__line { font: 7px/1.3 var(--px); color: var(--amber); letter-spacing: .06em; text-transform: uppercase; text-shadow: 1px 1px 0 #000, 0 0 6px #000; }
.oshop__name { margin: 0; font: 12px/1.35 var(--px); color: var(--cream); text-shadow: 2px 2px 0 #000, 0 0 8px rgba(0,0,0,.9); }
.oshop__items { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.oshop__ud { width: 24px; height: 22px; display: grid; place-items: center; font-size: 10px !important; background: var(--glass) !important; border: 2px solid rgba(255,179,71,.55) !important; color: var(--amber) !important; }
.oshop__ud:hover { background: var(--ember) !important; color: #1a0b03 !important; }
.oshop__items.is-single .oshop__ud { opacity: .3; }
.oshop__dots { display: flex; gap: 4px; }
.oshop__dots i { width: 6px; height: 6px; background: rgba(255,214,150,.35); }
.oshop__dots i.is-on { background: var(--gold); box-shadow: 0 0 6px rgba(255,200,80,.9); }
.oshop__sides { display: flex; margin-left: 8px; border: 2px solid rgba(255,179,71,.55); background: var(--glass); }
.oshop__sides[hidden] { display: none; }
.oshop__sides button { font: 7px/1 var(--px); padding: 5px 7px; color: var(--amber); }
.oshop__sides button.is-active { background: var(--amber); color: #1a0b03; }
/* ---- compact bottom bar ---- */
.oshop__bar {
position: absolute; right: var(--bar-r); bottom: var(--bar-b); width: var(--bar-w);
display: grid; grid-template-columns: auto 1fr auto minmax(170px, auto); align-items: stretch; gap: 0;
background: var(--glass); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
border: 2px solid rgba(255,179,71,.6); box-shadow: 4px 4px 0 rgba(0,0,0,.45), 0 0 24px rgba(255,120,30,.18);
pointer-events: auto;
}
.oshop__cell { padding: 8px 12px 9px; border-right: 1px solid rgba(255,179,71,.22); min-width: 0; display: flex; flex-direction: column; gap: 7px; justify-content: center; }
.oshop__label { font: 7px/1 var(--px); color: var(--amber); letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oshop__label span { color: var(--cream); margin-left: 6px; }
.oshop__swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.oshop__swatch { width: 22px; height: 22px; background: var(--c) !important; border: 2px solid #1a0b03 !important; box-shadow: 0 0 0 1px rgba(255,214,150,.35); }
.oshop__swatch.is-active { box-shadow: 0 0 0 2px var(--gold), 0 0 10px rgba(255,200,80,.8); animation: oshopSel 1s steps(2, end) infinite; }
.oshop__sizes { display: flex; gap: 4px; flex-wrap: wrap; }
.oshop__size { min-width: 26px; padding: 5px 5px 4px !important; font: 7px/1 var(--px) !important; color: var(--cream) !important; border: 1px solid rgba(255,214,150,.45) !important; background: rgba(0,0,0,.25) !important; }
.oshop__size:hover { border-color: var(--gold) !important; }
.oshop__size.is-active { background: var(--amber) !important; color: #1a0b03 !important; border-color: var(--gold) !important; }
.oshop__size.is-out { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
.oshop__na { font: 7px/1 var(--px); color: var(--cream); opacity: .8; }
.oshop__price { font: 16px/1 var(--px); color: var(--gold); text-shadow: 2px 2px 0 #4a1b00; white-space: nowrap; }
.oshop__buy {
position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
margin: 6px; padding: 8px 14px; text-decoration: none; overflow: hidden;
background: linear-gradient(180deg, #ffd27a, #ff9a2e 55%, #e8641a); color: #1a0b03 !important;
border: 2px solid #2a1206; box-shadow: 0 4px 0 #6b2a06, 0 0 16px rgba(255,140,40,.5);
}
.oshop__buy-main { font: 15px/1 var(--px); letter-spacing: .04em; }
.oshop__buy-sub { font: 6px/1 var(--px); opacity: .8; }
.oshop__buy:hover { filter: brightness(1.08); }
.oshop__buy:active { transform: translateY(3px); box-shadow: 0 1px 0 #6b2a06; }
.oshop__buy::after { content: ""; position: absolute; top: 0; bottom: 0; width: 30%; left: -40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); animation: oshopShine 3.4s steps(8, end) infinite; }
.oshop__buy.is-launching { animation: oshopFlash 300ms steps(3, end) 3; }
.oshop__hints {
grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 10px;
padding: 5px 10px; border-top: 1px solid rgba(255,179,71,.22);
font: 6px/1.4 var(--px); color: rgba(255,241,210,.75); letter-spacing: .05em;
}
.oshop__hints kbd { font: inherit; padding: 2px 4px; margin: 0 3px 0 7px; border: 1px solid rgba(255,214,150,.5); color: var(--amber); }
.oshop__hints kbd:first-child { margin-left: 0; }
.oshop__hints a { color: var(--amber); text-decoration: none; white-space: nowrap; }
.oshop__hints a:hover { color: var(--gold); }
.oshop__touch { display: none; }
/* scene bits that would fight the overlay */
.merch-shop-open .controls { opacity: 0 !important; visibility: hidden; }
.merch-shop-open .mobile-hint { display: none; }
.merch-shop-open .outpost-merch { opacity: 0 !important; pointer-events: none !important; transition: opacity 200ms; }
.merch-shop-open .outpost-store__back { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
@keyframes oshopBlink { 50% { opacity: 0; } }
@keyframes oshopPopIn { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes oshopBob { 0%,100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes oshopSpark { 0%,100% { opacity: 0; transform: scale(.4); } 40% { opacity: 1; transform: scale(1.2); } 70% { opacity: .5; } }
@keyframes oshopOutL { to { transform: translateX(-28%) scale(.9); opacity: 0; } }
@keyframes oshopOutR { to { transform: translateX(28%) scale(.9); opacity: 0; } }
@keyframes oshopInR { from { transform: translateX(28%) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes oshopInL { from { transform: translateX(-28%) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes oshopPop { 0% { transform: scale(.86); filter: brightness(2.2); } 60% { transform: scale(1.04); } 100% { transform: none; } }
@keyframes oshopNudgeL { 50% { transform: translateX(-4px); } }
@keyframes oshopNudgeR { 50% { transform: scaleX(-1) translateX(-4px); } }
@keyframes oshopSel { 50% { box-shadow: 0 0 0 2px #fff, 0 0 10px rgba(255,200,80,.8); } }
@keyframes oshopShine { 0%, 60% { left: -40%; } 100% { left: 130%; } }
@keyframes oshopFlash { 50% { filter: brightness(1.7); } }
/* bigger screens: a touch more presence */
@media (min-width: 1600px) {
.oshop__title { font-size: 13px; }
#merchShopCatLabel { font-size: 18px; }
.oshop__name { font-size: 14px; }
.oshop__bubble { font-size: 24px; }
.oshop__stage { margin-left: 60px; margin-right: 60px; }
}
/* mid / short desktop */
@media (max-width: 1100px) and (min-width: 761px) {
.oshop__bar { grid-template-columns: auto 1fr auto; }
.oshop__buy { grid-column: 1 / -1; flex-direction: row; gap: 12px; }
.oshop__keys { display: none; }
}
/* ---- phones: Maisie panned to the left, product floats right, controls stacked at the bottom ---- */
@media (max-width: 760px) {
.oshop__veil { background: radial-gradient(ellipse 60% 34% at 70% 46%, rgba(12,5,1,.42), transparent 100%), linear-gradient(0deg, rgba(0,0,0,.45), transparent 34%); }
.oshop__bubble { left: 12px; right: auto; top: max(54px, env(safe-area-inset-top)); width: min(250px, 64vw); font-size: 18px; padding: 8px 10px 9px; }
.oshop__bubble::after { right: auto; left: 28px; top: auto; bottom: -15px; width: 16px; height: 15px; clip-path: polygon(0 0, 100% 0, 30% 100%); }
.oshop__bubble::before { right: auto; left: 31px; top: auto; bottom: -9px; width: 10px; height: 9px; clip-path: polygon(0 0, 100% 0, 30% 100%); }
.oshop__zone { left: 0; right: 0; width: auto; top: 128px; bottom: calc(var(--mbar, 214px) + 14px); height: auto; }
.oshop__head { justify-content: flex-end; padding: 0 12px 0 44%; }
.oshop__title { font-size: 8px; text-align: right; }
.oshop__close { position: fixed; top: max(54px, env(safe-area-inset-top)); right: 12px; transform: none; width: 44px; height: 44px; }
.oshop__catbar { margin: 8px 12px 0 auto; width: min(240px, 62vw); position: relative; }
.oshop__catname { width: 100%; justify-content: center; }
#merchShopCatLabel { font-size: 12px; }
.oshop__arrow { top: 0; transform: none; width: 44px; height: 44px; justify-content: center; }
.oshop__arrow small { display: none; }
.oshop__tri { width: 22px; height: 34px; }
.oshop__arrow--l { left: auto; right: calc(min(240px, 62vw) + 12px); top: 130px; position: fixed; }
.oshop__arrow--r { right: 2px; top: 130px; position: fixed; }
.oshop__catbar { width: calc(min(240px, 62vw) - 92px); margin-right: 56px; }
.oshop__stage { margin: 6px 6px 0 43%; }
.oshop__plate { margin-left: 36%; padding: 2px 8px 0; }
.oshop__name { font-size: 10px; }
.oshop__line { font-size: 6px; }
.oshop__ud { width: 36px; height: 32px; }
.oshop__bar { left: 10px; right: 10px; width: auto; bottom: max(10px, env(safe-area-inset-bottom)); grid-template-columns: 1fr auto; }
.oshop__cell { padding: 7px 10px 8px; }
.oshop__cell--size { grid-column: 1 / -1; grid-row: 2; border-top: 1px solid rgba(255,179,71,.22); border-right: 0; }
.oshop__cell--price { border-right: 0; align-items: flex-end; }
.oshop__buy { grid-column: 1 / -1; flex-direction: row; gap: 10px; padding: 9px 12px; margin: 2px 8px 6px; }
.oshop__cell { padding-top: 6px !important; padding-bottom: 6px !important; }
.oshop__hints { padding-top: 3px !important; padding-bottom: 5px !important; }
.oshop__bar { background: linear-gradient(180deg, rgba(26,14,8,.62), rgba(18,10,6,.78)) !important; }
.oshop__buy-main { font-size: 14px; }
.oshop__swatch { width: 28px; height: 28px; }
.oshop__size { min-width: 34px; padding: 7px 6px 6px !important; }
.oshop__sizes { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.oshop__keys { display: none; }
.oshop__touch { display: inline; }
}
@media (hover: none) and (min-width: 761px) { .oshop__keys { display: none; } .oshop__touch { display: inline; } }
@media (prefers-reduced-motion: reduce) {
.oshop { transition: none; }
.oshop__img, .oshop__caret, .oshop__sparkles i, .oshop__swatch.is-active, .oshop__buy::after, .oshop__tri, .oshop.is-open .oshop__bubble,
.oshop__display .oshop__img { animation: none !important; }
}
/* ===================================================================== V70 — THE OUTPOST, AMBIENT LIFE
outpost-life.js builds these inside #outpostFrame (all pointer-events:none). */
.outpost-life { position: absolute; inset: 0; z-index: 10; pointer-events: none; overflow: hidden; contain: strict; }
.outpost-life * { pointer-events: none; }
.outpost-life__bulb, .outpost-life__lamp, .outpost-life__cone { position: absolute; mix-blend-mode: screen; will-change: opacity; }
.outpost-life__bulb {
width: 1.45%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
background: radial-gradient(circle, rgba(255,246,214,.95) 0 9%, rgba(255,196,102,.55) 24%, rgba(255,128,40,.16) 52%, transparent 72%);
opacity: var(--o); animation: outpostLifeBreathe var(--dur) ease-in-out var(--delay) infinite alternate;
}
.outpost-life__bulb::after {
content: ""; position: absolute; inset: -35%; border-radius: 50%; opacity: 0;
background: radial-gradient(circle, rgba(255,226,150,.7), rgba(255,150,60,.18) 45%, transparent 70%);
animation: outpostLifeChase 11s linear var(--chase) infinite;
}
.outpost-life__bulb.is-stutter { animation: outpostLifeStutter 1.25s steps(1, end) 1; }
.outpost-life__lamp {
aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
background: radial-gradient(circle, rgba(255,232,170,.62) 0 8%, rgba(255,176,82,.30) 28%, rgba(255,110,36,.10) 55%, transparent 72%);
opacity: var(--o); animation: outpostLifeBreathe var(--dur) ease-in-out var(--delay) infinite alternate;
}
.outpost-life__lamp--lantern { animation: outpostLifeCandle var(--dur) linear var(--delay) infinite; }
.outpost-life__cone {
transform-origin: 50% 0;
background: linear-gradient(180deg, rgba(255,204,120,.30), rgba(255,170,80,.10) 55%, transparent);
clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
filter: blur(6px); opacity: .5; animation: outpostLifeCone var(--dur) ease-in-out var(--delay) infinite alternate;
}
.outpost-life__motes { position: absolute; inset: 0; mix-blend-mode: screen; }
.outpost-life__motes i {
position: absolute; border-radius: 50%; opacity: 0;
background: rgba(255,232,180,.95); box-shadow: 0 0 5px 1px rgba(255,190,100,.55);
animation: outpostLifeMote var(--dur) linear var(--delay) infinite; will-change: transform, opacity;
}
/* region copies of the current pose frame (below the vignette so they shade identically) */
.outpost-life__copy { position: absolute; z-index: 3; overflow: hidden; pointer-events: none; opacity: 0; contain: strict; }
.outpost-life__copy.is-synced { opacity: 1; }
.outpost-life__mover { position: absolute; inset: 0; will-change: transform; }
.outpost-life__mover img {
position: absolute; max-width: none; user-select: none; pointer-events: none;
filter: brightness(1) saturate(1.02) contrast(1.01);
}
.outpost-store.is-talking .outpost-life__mover img { filter: brightness(1.025) saturate(1.035) contrast(1.01); }
.outpost-store.is-frame-switching .outpost-life__copy { opacity: 0; }
.outpost-life__copy--breath {
-webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 52%, #000 58%, transparent 98%);
mask-image: radial-gradient(ellipse 50% 50% at 50% 52%, #000 58%, transparent 98%);
}
.outpost-life__copy--breath .outpost-life__mover { transform-origin: var(--origin); animation: outpostLifeBreath var(--dur) ease-in-out infinite; }
.outpost-life__copy--shirt {
-webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent), linear-gradient(180deg, #000 78%, transparent);
-webkit-mask-composite: source-in;
mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent), linear-gradient(180deg, #000 78%, transparent);
mask-composite: intersect;
}
.outpost-life__copy--shirt .outpost-life__mover { transform-origin: 50% 4%; animation: outpostLifeSway var(--dur) ease-in-out var(--delay) infinite alternate; }
/* the straightening-merch pose has Maisie at the rack: no shirt sway there */
.outpost-store[data-maisie-state="straightening"] .outpost-life__copy--shirt { display: none; }
.outpost-life:not(.is-running) *, .outpost-life:not(.is-running) *::after,
.outpost-life__copy:not(.is-running) .outpost-life__mover { animation-play-state: paused !important; }
.app:not([data-mode="outpost"]) .outpost-life__copy { visibility: hidden; }
@keyframes outpostLifeBreathe { from { opacity: var(--lo); } to { opacity: var(--o); } }
@keyframes outpostLifeChase { 0%, 100% { opacity: 0; } 2.5% { opacity: .85; } 7% { opacity: 0; } }
@keyframes outpostLifeStutter { 0% { opacity: .08; } 16% { opacity: var(--o); } 44% { opacity: .14; } 62%, 100% { opacity: var(--o); } }
@keyframes outpostLifeCandle {
0% { opacity: var(--o); transform: translate(-50%, -50%) scale(1); } 13% { opacity: var(--lo); transform: translate(-50%, -51%) scale(.97); }
21% { opacity: var(--o); } 38% { opacity: calc(var(--o) * .9); transform: translate(-50%, -50%) scale(1.02); }
52% { opacity: var(--lo); } 61% { opacity: var(--o); transform: translate(-50%, -50.5%) scale(1); }
79% { opacity: calc(var(--o) * .86); } 100% { opacity: var(--o); transform: translate(-50%, -50%) scale(1); }
}
@keyframes outpostLifeCone { from { opacity: .34; transform: scaleX(.97); } to { opacity: .56; transform: scaleX(1.02); } }
@keyframes outpostLifeMote {
0% { opacity: 0; transform: translate3d(0, 0, 0); }
18% { opacity: var(--mo); }
50% { transform: translate3d(calc(var(--dx) * .6), calc(var(--dy) * .45), 0); }
80% { opacity: var(--mo); }
100% { opacity: 0; transform: translate3d(var(--dx), var(--dy), 0); }
}
@keyframes outpostLifeBreath { 0%, 100% { transform: scale(1, 1); } 45% { transform: scale(1.0012, var(--amt)); } }
@keyframes outpostLifeSway { from { transform: skewX(var(--skew)); } to { transform: skewX(calc(var(--skew) * -1)); } }
.outpost-life.is-debug .outpost-life__bulb, .outpost-life.is-debug .outpost-life__lamp { outline: 1px solid #0f0; opacity: 1 !important; }
.outpost-life.is-debug ~ .outpost-life__copy, .is-debug-copies .outpost-life__copy { outline: 1px dashed #0ff; }
@media (max-width: 760px){
.outpost-life__motes i { box-shadow: none; }
.outpost-life__cone { filter: none; }
}
.app.is-mobile-panning .outpost-life__motes { opacity: .4; }
@media (prefers-reduced-motion: reduce){
.outpost-life__motes, .outpost-life__copy { display: none !important; }
.outpost-life__bulb, .outpost-life__lamp, .outpost-life__cone, .outpost-life__lamp--lantern { animation: none !important; }
.outpost-life__bulb::after { display: none; }
}
/* ===================================================================
V71 — SUMMER'S PARADISE: INSIDE THE TRUCK (summer-truck.js)
Art 1920x1080; sprite/hotspot positions are % of that frame.
=================================================================== */
@font-face { font-family: 'Caveat'; src: url('assets/fonts/caveat-latin.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
/* Climb-in: the park pushes toward the truck and darkens; then the cab settles in. */
.app.is-live[data-mode="summer"] .summer-scene.is-entering-truck {
transform-origin: 17% 74%;
transform: scale(1.34);
filter: blur(5px) brightness(.28);
transition: transform 620ms cubic-bezier(.5,0,.75,.35), filter 560ms ease;
pointer-events: none;
}
.app.is-live[data-mode="summer"] .summer-scene.is-in-truck { visibility: hidden; transition: none; }
.summer-scene.truck-found .summer-spot--truck::after { content: "KEYS TAKEN"; }
.truck-view {
position: fixed;
inset: 0;
z-index: 56;
overflow: hidden;
background: #020101;
opacity: 0;
visibility: hidden;
--truck-pan-x: 0px;
transition: opacity 560ms ease, visibility 0s linear 560ms;
touch-action: pan-y;
}
.truck-view[hidden] { display: none; }
.truck-view.is-in { opacity: 1; visibility: visible; transition: opacity 560ms ease; }
.truck-view__frame {
position: absolute;
left: 50%;
top: 50%;
width: max(100vw, calc(100vh * 16 / 9));
aspect-ratio: 16 / 9;
transform: translate(calc(-50% + var(--truck-pan-x)), -50%) scale(1.07);
transform-origin: 50% 60%;
transition: transform 900ms cubic-bezier(.18,.8,.22,1), filter 480ms ease;
will-change: transform;
}
@supports (height: 100dvh) { .truck-view__frame { width: max(100vw, calc(100dvh * 16 / 9)); } }
.truck-view.is-in .truck-view__frame { transform: translate(calc(-50% + var(--truck-pan-x)), -50%) scale(1); }
.truck-view.is-panning .truck-view__frame { transition: filter 480ms ease; }
.truck-view__base { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }
.truck-view img { pointer-events: none; user-select: none; -webkit-user-drag: none; }
/* Life layer: park light through the glass, water glow on the dash */
.truck-life { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.truck-life > span { position: absolute; display: block; mix-blend-mode: screen; }
.truck-life__glow--park {
left: 47%; top: 0; width: 53%; height: 44%;
background: radial-gradient(ellipse 60% 70% at 58% 62%, rgba(255,178,104,.20), transparent 70%);
animation: truckGlow 6.8s ease-in-out infinite alternate;
}
.truck-life__glow--sign {
left: 64%; top: 10%; width: 24%; height: 22%;
background: radial-gradient(ellipse at 50% 50%, rgba(255,110,190,.16), rgba(90,210,255,.08) 45%, transparent 72%);
animation: truckSign 4.3s ease-in-out infinite alternate;
}
.truck-life__glow--side {
left: 15%; top: 4%; width: 33%; height: 40%;
background: radial-gradient(ellipse at 70% 60%, rgba(255,196,128,.13), transparent 70%);
animation: truckGlow 9.1s ease-in-out -3s infinite alternate;
}
.truck-life__glow--dash {
left: 48%; top: 34%; width: 52%; height: 14%;
background: radial-gradient(ellipse 70% 60% at 55% 30%, rgba(90,200,255,.12), transparent 75%);
animation: truckGlow 5.2s ease-in-out -1s infinite alternate;
}
.truck-life__shimmer {
left: 48%; top: 35%; width: 52%; height: 10%;
opacity: .5;
background: repeating-linear-gradient(100deg, transparent 0 7%, rgba(140,225,255,.10) 9%, transparent 12% 19%);
background-size: 220% 100%;
-webkit-mask-image: radial-gradient(ellipse 60% 70% at 55% 40%, #000, transparent 75%);
mask-image: radial-gradient(ellipse 60% 70% at 55% 40%, #000, transparent 75%);
animation: truckShimmer 7.5s linear infinite;
}
.truck-life__glow--console {
left: 12%; top: 66%; width: 36%; height: 34%;
background: radial-gradient(ellipse at 55% 45%, rgba(255,190,120,.10), transparent 70%);
animation: truckGlow 7.7s ease-in-out -2s infinite alternate;
}
.truck-view__fresh {
position: absolute; z-index: 2;
left: 67.760%; top: 10.278%; width: 4.167%; height: 19.259%;
transform-origin: 50% 3.85%;
animation: truckSway 5.4s ease-in-out infinite alternate;
}
.truck-view__keys-rest,
.truck-view__keys {
position: absolute; z-index: 3;
left: 28.958%; top: 71.944%; width: 12.760%; height: 20.741%;
}
.truck-view__keys { opacity: 0; transform-origin: 50% 40%; }
.truck-view__glint {
position: absolute; z-index: 4; left: 35.6%; top: 81.4%; width: 1.6%; aspect-ratio: 1; pointer-events: none;
background:
radial-gradient(circle, rgba(255,250,230,.95) 0 8%, rgba(255,230,170,.35) 22%, transparent 52%),
linear-gradient(90deg, transparent 46%, rgba(255,245,215,.75) 50%, transparent 54%),
linear-gradient(0deg, transparent 46%, rgba(255,245,215,.75) 50%, transparent 54%);
mix-blend-mode: screen;
opacity: 0;
animation: truckGlint 4.8s ease-in-out 1.2s infinite;
}
.truck-view.keys-taken .truck-view__keys-rest,
.truck-view.keys-taken .truck-view__keys,
.truck-view.keys-taken .truck-view__glint { display: none; }
/* Pickup: rest sprite fades, cutout lifts, spins a little, and flies into the inventory chip */
.truck-view.is-taking .truck-view__keys-rest { opacity: 0; transition: opacity 220ms ease; }
.truck-view.is-taking .truck-view__glint { display: none; }
.truck-view.is-taking .truck-view__keys { animation: truckKeysTake 1.1s cubic-bezier(.3,.7,.3,1) forwards; }
@keyframes truckKeysTake {
0% { opacity: 1; transform: none; filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
34% { opacity: 1; transform: translateY(-34%) scale(1.32) rotate(-9deg); filter: drop-shadow(0 18px 18px rgba(0,0,0,.55)) brightness(1.15); }
52% { opacity: 1; transform: translateY(-38%) scale(1.36) rotate(6deg); filter: drop-shadow(0 22px 20px rgba(0,0,0,.5)) brightness(1.2); }
100% { opacity: 0; transform: translate(var(--fly-x, 0px), var(--fly-y, -120px)) scale(.18) rotate(24deg); }
}
/* Hotspots */
.truck-spot {
position: absolute; z-index: 6;
border: 0; padding: 0; margin: 0;
background: transparent; cursor: pointer; outline: none;
border-radius: 18px;
-webkit-tap-highlight-color: transparent;
}
.truck-spot[hidden] { display: none; }
.truck-spot::before {
content: ""; position: absolute; inset: 6%;
border-radius: 50%;
background: radial-gradient(ellipse at 50% 55%, rgba(255,220,160,.20), transparent 68%);
box-shadow: 0 0 0 1px rgba(255,210,150,0);
opacity: 0; transition: opacity 220ms ease;
mix-blend-mode: screen;
}
.truck-spot:hover::before, .truck-spot:focus-visible::before { opacity: 1; }
.truck-spot span {
position: absolute; left: 50%; bottom: 100%;
transform: translate(-50%, 8px);
padding: 7px 11px;
border: 1px solid rgba(255,196,120,.48);
border-radius: 999px;
background: rgba(14,6,2,.66);
color: rgba(255,232,196,.94);
font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: .22em; white-space: nowrap;
text-shadow: 0 0 10px rgba(255,170,90,.55);
opacity: 0; pointer-events: none;
transition: opacity 200ms ease, transform 200ms ease;
}
.truck-spot:hover span, .truck-spot:focus-visible span { opacity: 1; transform: translate(-50%, 0); }
.truck-spot--note { left: 16.2%; top: 82.5%; width: 14%; height: 16.5%; }
.truck-spot--keys { left: 30.2%; top: 74.5%; width: 9.6%; height: 14%; }
.truck-spot--note span { bottom: auto; top: -4%; transform: translate(-50%, calc(-100% + 8px)); }
.truck-spot--note:hover span, .truck-spot--note:focus-visible span { transform: translate(-50%, -100%); }
@media (hover: none) {
.truck-spot span { opacity: .9; transform: translate(-50%, 0); }
.truck-spot--note span { transform: translate(-50%, -100%); }
}
.truck-view.is-debug .truck-spot { outline: 1px dashed rgba(0,255,180,.8); background: rgba(0,255,180,.08); }
/* HUD */
.truck-view__shade {
position: absolute; inset: 0; z-index: 7; pointer-events: none;
background:
radial-gradient(ellipse 80% 75% at 50% 52%, transparent 55%, rgba(0,0,0,.5) 100%),
linear-gradient(180deg, rgba(0,0,0,.25), transparent 18%, transparent 74%, rgba(0,0,0,.35));
}
.truck-card {
position: absolute; z-index: 8;
left: max(18px, env(safe-area-inset-left));
top: max(64px, calc(env(safe-area-inset-top) + 64px));
width: min(380px, calc(100vw - 36px));
padding: 11px 15px 12px;
border-left: 1px solid rgba(255,190,110,.5);
background: linear-gradient(90deg, rgba(0,0,0,.6), rgba(0,0,0,.24), transparent);
text-shadow: 0 2px 14px #000;
pointer-events: none;
opacity: 0; transform: translateY(-6px);
transition: opacity 320ms ease 420ms, transform 360ms ease 420ms;
}
.truck-card__status { margin-bottom: 6px; color: rgba(255,200,130,.95); font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .24em; }
.truck-card p { margin: 0; color: rgba(242,223,182,.8); font-size: 13px; line-height: 1.42; }
.truck-view__back {
position: absolute; z-index: 9;
right: max(18px, env(safe-area-inset-right));
bottom: max(22px, calc(env(safe-area-inset-bottom) + 22px));
padding: 11px 15px;
border: 1px solid rgba(255,185,98,.5);
border-radius: 999px;
background: rgba(7,3,1,.62);
color: rgba(255,233,196,.92);
font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: .2em; cursor: pointer;
backdrop-filter: blur(6px);
opacity: 0; transform: translateY(8px);
transition: opacity 320ms ease 420ms, transform 360ms ease 420ms, background 160ms ease, border-color 160ms ease;
}
.truck-view__back:hover, .truck-view__back:focus-visible { background: rgba(40,18,4,.8); border-color: rgba(255,200,120,.85); outline: none; }
.truck-inv {
position: absolute; z-index: 9;
left: 50%; top: max(18px, calc(env(safe-area-inset-top) + 18px));
transform: translateX(-50%);
padding: 8px 13px;
border: 1px solid rgba(255,206,120,.55);
border-radius: 999px;
background: rgba(16,8,2,.7);
color: rgba(255,226,170,.95);
font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: .2em; white-space: nowrap;
box-shadow: 0 0 18px rgba(255,170,80,.18);
pointer-events: none;
}
.truck-inv[hidden] { display: none; }
.truck-inv__label { opacity: .6; }
.truck-inv__label::after { content: " ·"; }
.truck-inv.is-pop { animation: truckInvPop 520ms cubic-bezier(.3,1.6,.5,1); }
@keyframes truckInvPop { 0% { transform: translateX(-50%) scale(.86); box-shadow: 0 0 0 rgba(255,190,90,0); } 45% { transform: translateX(-50%) scale(1.08); box-shadow: 0 0 34px rgba(255,190,90,.55); } 100% { transform: translateX(-50%) scale(1); } }
.truck-view.is-in .truck-card,
.truck-view.is-in .truck-view__back { opacity: 1; transform: none; }
.app.in-truck .controls { opacity: 0 !important; pointer-events: none; }
/* Reading: the note comes up; cab blurs + dims behind it (still visible) */
.truck-view.is-reading .truck-view__frame { filter: blur(7px) brightness(.66) saturate(.92); transform: translate(calc(-50% + var(--truck-pan-x)), -50%) scale(1.025); }
.truck-view.is-reading .truck-life > span,
.truck-view.is-reading .truck-view__fresh,
.truck-view.is-reading .truck-view__glint { animation-play-state: paused; }
.truck-view.is-reading .truck-card,
.truck-view.is-reading .truck-view__back,
.truck-view.is-reading .truck-spot span { opacity: 0; transition-delay: 0s; }
.truck-note { position: absolute; inset: 0; z-index: 12; display: grid; place-items: center; padding: 24px; }
.truck-note[hidden] { display: none; }
.truck-note__scrim { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.12), rgba(0,0,0,.42)); opacity: 0; transition: opacity 380ms ease; cursor: zoom-out; }
.truck-note.is-open .truck-note__scrim { opacity: 1; }
.truck-note__paper {
position: relative;
width: min(560px, calc(100vw - 40px));
max-height: calc(100vh - 60px);
overflow: auto;
padding: clamp(30px, 5vw, 52px) clamp(26px, 5vw, 50px) clamp(30px, 5vw, 46px);
color: rgba(30,34,56,.88);
font-family: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
font-weight: 500;
font-size: clamp(22px, 5.4vw, 33px);
line-height: 1.22;
transform: rotate(-1.6deg);
transition: transform 520ms cubic-bezier(.2,.85,.25,1), opacity 380ms ease;
background-color: #efe4c8;
background-image:
/* creases: one horizontal fold, one vertical fold, plus soft fold shading */
linear-gradient(180deg, transparent calc(50% - 1px), rgba(90,70,40,.20) 50%, rgba(255,255,255,.45) calc(50% + 1px), transparent calc(50% + 3px)),
linear-gradient(90deg, transparent calc(33% - 1px), rgba(90,70,40,.16) 33%, rgba(255,255,255,.38) calc(33% + 1px), transparent calc(33% + 3px)),
linear-gradient(180deg, rgba(255,255,255,.18), transparent 49%, rgba(80,60,30,.06) 50%, rgba(255,255,255,.10) 100%),
linear-gradient(90deg, rgba(80,60,30,.05), transparent 33%, rgba(80,60,30,.04) 34%, transparent 70%, rgba(80,60,30,.07)),
url("data:image/svg+xml;utf8,"),
radial-gradient(ellipse at 30% 20%, #f6eed8, #e6d6b2 75%, #d8c49a);
box-shadow: 0 30px 70px rgba(0,0,0,.6), 0 6px 18px rgba(0,0,0,.35), inset 0 0 40px rgba(120,90,40,.18);
clip-path: polygon(0.6% 1.2%, 18% 0.2%, 41% 0.9%, 63% 0%, 86% 0.8%, 99.4% 0.3%, 100% 22%, 99.2% 47%, 99.9% 71%, 99.3% 98.8%, 77% 100%, 52% 99.2%, 29% 100%, 8% 99.3%, 0% 99.7%, 0.7% 74%, 0% 51%, 0.8% 27%);
opacity: 1;
}
.truck-note__text p { margin: 0 0 .5em; }
.truck-note__text p:nth-child(2) { transform: rotate(.5deg); margin-left: .2em; }
.truck-note__text p:nth-child(3) { transform: rotate(-.4deg); margin-bottom: 0; }
.truck-note__close {
position: absolute; top: 8px; right: 10px;
width: 40px; height: 40px;
border: 0; border-radius: 50%;
background: rgba(40,30,20,.08);
color: rgba(40,34,40,.75);
font: 28px/1 system-ui, sans-serif;
cursor: pointer;
}
.truck-note__close:hover, .truck-note__close:focus-visible { background: rgba(40,30,20,.18); outline: 2px solid rgba(60,50,40,.35); outline-offset: 1px; }
@keyframes truckGlow { from { opacity: .55; } to { opacity: 1; } }
@keyframes truckSign { 0% { opacity: .5; } 40% { opacity: .9; } 55% { opacity: .62; } 100% { opacity: 1; } }
@keyframes truckShimmer { from { background-position: 0% 0; } to { background-position: -220% 0; } }
@keyframes truckSway { 0% { transform: rotate(-1.7deg); } 100% { transform: rotate(1.6deg); } }
@keyframes truckGlint { 0%, 70%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 78% { opacity: .95; transform: scale(1) rotate(25deg); } 88% { opacity: 0; transform: scale(.5) rotate(45deg); } }
@media (max-width: 900px) {
.truck-view__frame { transition: transform 180ms ease-out, filter 480ms ease; }
.truck-view.is-reading .truck-view__frame { filter: blur(4px) brightness(.56); }
.truck-card { top: auto; bottom: max(76px, calc(env(safe-area-inset-bottom) + 76px)); width: min(300px, calc(100vw - 28px)); padding: 10px 12px 11px; left: max(14px, env(safe-area-inset-left)); }
.truck-card p { font-size: 12px; }
.truck-card__status { font-size: 9px; }
.truck-view__back { left: max(14px, env(safe-area-inset-left)); right: auto; bottom: max(24px, calc(env(safe-area-inset-bottom) + 24px)); font-size: 9px; letter-spacing: .16em; padding: 11px 14px; }
.truck-inv { top: max(60px, calc(env(safe-area-inset-top) + 60px)); font-size: 9px; letter-spacing: .14em; }
.truck-spot span { font-size: 8px; letter-spacing: .16em; padding: 6px 9px; }
.truck-life__shimmer, .truck-life__glow--side { display: none; }
.truck-note { padding: 16px; }
.truck-note__paper { width: calc(100vw - 32px); }
}
@media (prefers-reduced-motion: reduce) {
.app.is-live[data-mode="summer"] .summer-scene.is-entering-truck { transform: none; filter: brightness(.3); transition: filter 260ms ease; }
.truck-view, .truck-view.is-in { transition-duration: 260ms; }
.truck-view__frame, .truck-view.is-in .truck-view__frame, .truck-view.is-reading .truck-view__frame { transform: translate(calc(-50% + var(--truck-pan-x)), -50%); transition: filter 200ms ease; }
.truck-life > span, .truck-view__fresh, .truck-view__glint, .truck-inv.is-pop { animation: none; }
.truck-view.is-taking .truck-view__keys { animation: none; opacity: 0; }
.truck-note__paper { transition: opacity 200ms ease; }
.truck-note:not(.is-open) .truck-note__paper { opacity: 0; }
}
.truck-view.is-taking .truck-spot--keys { pointer-events: none; }
.truck-view.is-taking .truck-spot--keys span, .truck-view.is-taking .truck-spot--keys::before { opacity: 0 !important; }
.truck-inv.is-pending { opacity: 0; }
@media (max-width: 900px) {
.truck-card { top: max(100px, calc(env(safe-area-inset-top) + 100px)); bottom: auto; }
}
/* ================= V72 PERF — desktop smoothness =================
Same look, cheaper to draw:
1. Blur moves off the animated (composited) glow layers onto their painted
children, so it is rasterised once instead of re-filtered every frame.
2. Brightness flicker is folded into opacity (same light output under
screen blend) so no keyframe animates `filter`.
3. Scenes that are not on screen are hidden and their animations paused. */
@property --br { syntax: ""; inherits: true; initial-value: 1; }
@property --k { syntax: ""; inherits: true; initial-value: 1; }
/* --- hub practical lights --- */
.hub-light { filter: none !important; --br: 1; --k: 1;
transition: opacity 250ms ease, transform 400ms cubic-bezier(.16,.82,.24,1), --br 250ms ease, --k 250ms ease; }
.hub-light::before { filter: blur(calc(var(--blur, 18px) * var(--k))) brightness(var(--br)); }
.hub-light::after { filter: blur(26px) brightness(var(--br));
filter: blur(hypot(24px, calc(var(--blur, 18px) * var(--k)))) brightness(var(--br)); }
.app.is-live[data-mode="hub"] .hub-light { --br: 1.04; }
.app[data-hover="heartland"] .hub-light--heartland, .app[data-hover="heartland"] .hub-light--heartland-bulbs,
.app[data-hover="donut"] .hub-light--donut, .app[data-hover="donut"] .hub-light--donut-bulbs,
.app[data-hover="list"] .hub-light--list, .app[data-hover="list"] .hub-light--list-bulbs,
.app[data-hover="love"] .hub-light--love,
.app[data-hover="mountains"] .hub-light--mountains,
.app[data-hover="getaway"] .hub-light--getaway,
.app[data-hover="butterflies"] .hub-light--butterflies,
.app[data-hover="choose"] .hub-light--choose,
.app[data-hover="game"] .hub-light--game,
.app[data-hover="map"] .hub-light--map,
.app[data-hover="radio"] .hub-light--map { --br: 1.42 !important; --k: .82; }
.app[data-hover="love"] .hub-light--love { --br: 1.58 !important; --k: .8; }
/* --- hub live glows --- */
.live-glow { filter: none !important; background: none !important; }
.live-glow::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--g); filter: blur(var(--b, 18px)); }
.live-glow::after { background: var(--g); filter: blur(28px); filter: blur(hypot(22px, var(--b, 18px))); }
@keyframes liveGlowPulse {
0% { opacity: calc(var(--o, .35) * .6256); transform: translate(-50%, -50%) scale(.98); }
100% { opacity: calc(var(--o, .35) * 1.12); transform: translate(-50%, -50%) scale(1.04); }
}
@keyframes liveGlowScale {
0% { transform: translate(-50%, -50%) scale(.98); }
100% { transform: translate(-50%, -50%) scale(1.04); }
}
@keyframes signElectric {
0%, 100% { opacity: .469; }
11% { opacity: .408; }
12% { opacity: .661; }
13% { opacity: .519; }
33% { opacity: .59; }
34% { opacity: .684; }
69% { opacity: .484; }
70% { opacity: .634; }
}
.live-glow--heartland-red { animation: liveGlowScale 3.2s ease-in-out infinite alternate, signElectric 6.7s steps(1,end) infinite; }
.live-glow--heartland-bulbs,
.live-glow--donut-strip,
.live-glow--bbq-canopy,
.live-glow--love,
.live-glow--getaway-blue,
.live-glow--crt { animation: liveGlowScale var(--d, 4.8s) ease-in-out infinite alternate, liveFlickerSoft calc(var(--d, 4.8s) * 2.1) steps(1,end) infinite; }
@supports (animation-composition: add) {
/* flicker x breathing brightness, expressed as flicker*.92 + (0..0.2)*o */
@keyframes liveFlickerDim {
0%, 100% { opacity: calc(var(--o, .35) * .92); }
7% { opacity: calc(var(--o, .35) * .7728); }
8% { opacity: calc(var(--o, .35) * .9936); }
21% { opacity: calc(var(--o, .35) * .828); }
22% { opacity: calc(var(--o, .35) * 1.0304); }
56% { opacity: calc(var(--o, .35) * .7544); }
57% { opacity: calc(var(--o, .35) * .9752); }
78% { opacity: calc(var(--o, .35) * .8464); }
79% { opacity: calc(var(--o, .35) * 1.058); }
}
@keyframes liveGlowBreathAdd {
0% { opacity: 0; transform: scale(.98); }
100% { opacity: calc(var(--o, .35) * .2); transform: scale(1.04); }
}
.live-glow--heartland-bulbs,
.live-glow--donut-strip,
.live-glow--bbq-canopy,
.live-glow--love,
.live-glow--getaway-blue,
.live-glow--crt {
animation: liveFlickerDim calc(var(--d, 4.8s) * 2.1) steps(1,end) infinite, liveGlowBreathAdd var(--d, 4.8s) ease-in-out infinite alternate;
animation-composition: replace, add;
}
}
/* --- other single-element blurred glows: the gradient is drawn by ::before ---
(parent keeps the gradient as an inherited image but paints it at size 0) */
.smoke, .back-hub-glow, .outpost-glow, .outpost-dust, .outpost-counter-pulse, .summer-glow, .outpost-life__cone {
filter: none !important; background-size: 0 0 !important; background-repeat: no-repeat;
}
.smoke::before, .back-hub-glow::before, .outpost-glow::before, .outpost-dust::before,
.outpost-counter-pulse::before, .summer-glow::before, .outpost-life__cone::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
background-image: inherit; background-repeat: no-repeat; background-size: 100% 100%;
filter: blur(var(--pb, 18px)); transition: filter 260ms ease;
}
.smoke { --pb: 26px; }
.back-hub-glow { --pb: 22px; }
.back-hub-glow--summer { --pb: 28px; }
.outpost-glow { --pb: 24px; }
.outpost-glow--sign { --pb: 25px; }
.outpost-glow--counter { --pb: 32px; }
.outpost-dust { --pb: 14px; }
.outpost-counter-pulse { --pb: 28px; }
.summer-glow { --pb: 26px; }
.summer-scene[data-hover="jumbotron"] .summer-glow--jumbotron,
.summer-scene[data-hover="pool"] .summer-glow--pool,
.summer-scene[data-hover="truck"] .summer-glow--truck,
.summer-scene[data-hover="sign"] .summer-glow--sign,
.summer-scene[data-hover="lifeguard"] .summer-glow--lifeguard { --pb: 20px; }
.outpost-life__cone { --pb: 6px; }
@keyframes backHubSignFlicker {
0%, 10%, 14%, 52%, 57%, 100% { opacity: .20; }
11%, 12%, 53%, 54% { opacity: .625; }
58%, 60% { opacity: .378; }
}
@keyframes outpostSignFlicker {
0%, 18%, 23%, 61%, 66%, 100% { opacity: .18; }
19%, 20%, 62%, 63% { opacity: .524; }
67%, 69% { opacity: .348; }
}
@media (max-width: 900px) {
.back-hub-glow--office, .back-hub-glow--summer,
.outpost-glow--lantern-left, .outpost-glow--counter { --pb: 12.96px; }
.smoke { --pb: 13px; }
}
/* --- off-screen scenes: hide once faded out, and stop their animations --- */
.app.is-live:is([data-mode="backhub"], [data-mode="outpost"], [data-mode="summer"], [data-mode="ride"]) .hub {
visibility: hidden;
transition: opacity 560ms ease, transform 560ms cubic-bezier(.18,.85,.15,1), filter 560ms ease, visibility 0s linear 620ms;
}
.app:is([data-mode="backhub"], [data-mode="outpost"], [data-mode="summer"], [data-mode="ride"]) .hub *, .app:is([data-mode="backhub"], [data-mode="outpost"], [data-mode="summer"], [data-mode="ride"]) .hub *::before, .app:is([data-mode="backhub"], [data-mode="outpost"], [data-mode="summer"], [data-mode="ride"]) .hub *::after,
.app:not([data-mode="backhub"]) .back-hub *, .app:not([data-mode="backhub"]) .back-hub *::before, .app:not([data-mode="backhub"]) .back-hub *::after,
.app:not([data-mode="outpost"]) .outpost-store *, .app:not([data-mode="outpost"]) .outpost-store *::before, .app:not([data-mode="outpost"]) .outpost-store *::after,
.app:not([data-mode="summer"]) .summer-scene *, .app:not([data-mode="summer"]) .summer-scene *::before, .app:not([data-mode="summer"]) .summer-scene *::after,
.app:not([data-mode="ride"]) .ride-stage *, .app:not([data-mode="ride"]) .ride-stage *::before, .app:not([data-mode="ride"]) .ride-stage *::after,
.app.is-live .boot *, .app.is-live .boot *::before, .app.is-live .boot *::after {
animation-play-state: paused !important;
}
/* Full-screen grain/dust overlays: their contribution is ~1–2% so a plain
blend is visually identical, but it avoids a full-viewport backdrop read
every frame. */
.atmosphere--dust, .atmosphere--film { mix-blend-mode: normal; }
/* V75: scenes that are not on screen are taken out of rendering entirely (display:none) instead of just
being faded to opacity 0. Before this, every scene (hub, back area, Outpost, Summer's Paradise, ride stage)
was rendered at once with dozens of full-screen filter / blend / will-change layers, which on a 3x iPhone
kept WebKit close to its per-tab memory limit. script.js (setAppMode / parkIdleScenes) manages the flag. */
[data-parked] { display: none !important; }
/* V81: hub fireflies + embers (built and removed by hub-sparks.js). Tiny elements; only transform and opacity animate. */
.hub-sparks { position: absolute; inset: 0; pointer-events: none; z-index: 5; overflow: visible; }
.hs { position: absolute; width: 0; height: 0; pointer-events: none; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.hs__dot { position: absolute; border-radius: 50%; opacity: 0; animation-iteration-count: infinite; }
.hs--fly { animation-name: hsDrift; animation-direction: alternate; }
.hs--fly .hs__dot { left: -6px; top: -6px; width: 12px; height: 12px; animation-name: hsBlink; animation-timing-function: ease-in-out;
background: radial-gradient(circle, rgba(250,255,200,1) 0 13%, rgba(214,255,110,.75) 22%, rgba(190,240,80,.22) 45%, rgba(190,240,80,0) 70%); }
.hs--ember { animation-name: hsRise; animation-timing-function: linear; }
.hs--ember .hs__dot { left: -4px; top: -4px; width: 8px; height: 8px; animation-name: hsEmber; animation-timing-function: linear;
background: radial-gradient(circle, rgba(255,236,190,1) 0 16%, rgba(255,150,60,.8) 30%, rgba(255,90,30,.25) 55%, rgba(255,90,30,0) 72%); }
@keyframes hsDrift { 0% { transform: translate(0,0); } 33% { transform: translate(var(--ax), var(--ay)); } 66% { transform: translate(var(--bx), var(--by)); } 100% { transform: translate(var(--cx), var(--cy)); } }
@keyframes hsBlink { 0%, 18% { opacity: 0; } 34% { opacity: .95; } 46% { opacity: .7; } 58% { opacity: .1; } 70%, 100% { opacity: 0; } }
@keyframes hsRise { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(var(--sx), calc(var(--rise) * .5)) scale(.85); } 100% { transform: translate(calc(var(--sx) * -.6), var(--rise)) scale(.5); } }
@keyframes hsEmber { 0% { opacity: 0; } 12% { opacity: .9; } 45% { opacity: .65; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hub-sparks { display: none; } }
/* V81 polish: a drop falls from the beams into a puddle and leaves two expanding, fading rings (flattened for floor perspective). */
.hs-drip { position: absolute; width: 0; height: 0; pointer-events: none; --w: 40px; --tint: 255,184,120; }
.hs-drip > span { position: absolute; opacity: 0; pointer-events: none; }
/* V81b: a real drip on a wet floor: tiny splash glint (~150 ms), then 1-2 faint, flat, soft-edged rings tinted by the nearby light. */
.hs-drip__dot { left: -1.5px; top: -1px; width: 3px; height: 2px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,240,225,.8), rgba(var(--tint),0)); }
.hs-drip__ring { left: calc(var(--w) / -2); top: calc(var(--w) * -.14); width: var(--w); height: calc(var(--w) * .28); border-radius: 50%;
background: radial-gradient(farthest-side, rgba(var(--tint),0) 64%, rgba(var(--tint),.55) 82%, rgba(255,235,220,.7) 88%, rgba(var(--tint),0) 100%); }
.hs-drip__ring--2 { background: radial-gradient(farthest-side, rgba(var(--tint),0) 70%, rgba(var(--tint),.45) 86%, rgba(var(--tint),0) 100%); }
.hs-drip.is-on .hs-drip__dot { animation: hsSplash .16s ease-out var(--dd, 0s) both; }
.hs-drip.is-on .hs-drip__ring { animation: hsRing 1s cubic-bezier(.1,.65,.3,1) calc(var(--dd, 0s) + .03s) both; }
.hs-drip.is-on .hs-drip__ring--2 { animation-delay: calc(var(--dd, 0s) + .2s); animation-duration: .85s; }
@keyframes hsSplash { 0% { opacity: 0; transform: scale(.6); } 25% { opacity: .9; } 100% { opacity: 0; transform: scale(1.8); } }
@keyframes hsRing { 0% { opacity: 0; transform: scale(.06); } 12% { opacity: .42; } 45% { opacity: .28; } 100% { opacity: 0; transform: scale(1); } }
/* V81: POWER OUTAGE walkie subtitle (power-outage.js). Fades with opacity/transform only. */
.walkie-sub { position: fixed; z-index: 97; left: 50%; bottom: calc(18vh + 46px); width: min(440px, calc(100vw - 28px)); padding: 10px 14px 12px; border: 1px solid rgba(140,230,150,.34); border-left: 3px solid rgba(140,230,150,.7); border-radius: 4px; background: rgba(4,9,5,.86); color: rgba(220,245,210,.92); box-shadow: 0 6px 24px rgba(0,0,0,.45); opacity: 0; transform: translate(-50%, 10px); pointer-events: none; transition: opacity 220ms ease, transform 220ms ease; }
.walkie-sub.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; cursor: pointer; }
.walkie-sub__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: rgba(140,230,150,.85); font: 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .2em; }
.walkie-sub__led { width: 6px; height: 6px; border-radius: 50%; background: #9cf29a; box-shadow: 0 0 6px #6fe06c; }
.walkie-sub.is-visible .walkie-sub__led { animation: walkieLed .5s steps(2, jump-none) 4; }
@keyframes walkieLed { 0% { opacity: 1; } 100% { opacity: .25; } }
.walkie-sub__text { margin: 0; font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .01em; }
.walkie-sub__text::before { content: '\201C'; } .walkie-sub__text::after { content: '\201D'; }
@media (prefers-reduced-motion: reduce) { .walkie-sub { transition: none; } .walkie-sub.is-visible .walkie-sub__led { animation: none; } }