/* ==========================================================
ACT 1: THE LAKE TRIP — STYLES & INTERACTIVE HUD
Callie and Tay: A Story About Heat Stroke in Dogs
========================================================== */
.act1-container {
position: relative;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: radial-gradient(circle at 50% 30%, #FFFDFB 0%, var(--palette-peach-light) 65%, var(--palette-peach) 100%);
padding: 1rem;
box-sizing: border-box;
overflow: hidden;
}
/* Main 16:9 Cinematic Viewport Card */
.act1-viewport-card {
position: relative;
width: min(94vw, 1300px);
aspect-ratio: 16 / 9;
max-height: 84vh;
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--elev-card);
border: 4px solid var(--palette-warm-white);
background: #1E293B;
user-select: none;
transition: transform var(--dur-slow) var(--ease-out-expo), filter var(--dur-slow) var(--ease-out-expo);
}
/* Low Camera POV Perspective Effect */
.act1-viewport-card.low-cam {
transform: perspective(1000px) rotateX(1deg);
}
/* POV Rise Animation (Beat 1H) */
.act1-viewport-card.pov-raised {
/* No camera move here any more: the author found the tilt/lift/zoom at the end of the act
unnecessary. Same transform as .low-cam so nothing shifts when the class swaps. */
transform: perspective(1000px) rotateX(1deg);
}
/* Background Lake Scene Image */
.act1-scene-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
pointer-events: none;
filter: saturate(calc(100% - var(--act1-saturation-drop, 0%)));
transition: filter 1.8s ease, transform 1.2s ease;
}
/* Overlays Container */
.act1-overlay-layer {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10;
}
/* ==========================================================
PERSISTENT HUD (TOP BAR)
========================================================== */
.act1-hud-bar {
position: absolute;
top: 1.25rem;
left: 1.5rem;
right: 1.5rem;
height: 48px;
display: flex;
align-items: center;
justify-content: space-between;
pointer-events: none;
z-index: 40;
}
.act1-hud-group {
display: flex;
align-items: center;
gap: 0.65rem;
pointer-events: auto;
}
.act1-hud-pill {
background: var(--surface-hud);
backdrop-filter: blur(10px);
color: var(--text-inverse);
border: 1.5px solid var(--hairline-light);
font-family: var(--font-family-display);
font-size: 0.88rem;
font-weight: 700;
height: 38px;
padding: 0 1rem;
border-radius: var(--radius-pill);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
box-shadow: var(--elev-3);
box-sizing: border-box;
}
.act1-hud-pill.clock-pill {
background: var(--surface-clock);
border-color: var(--color-amber-tint);
color: #FFEDD5;
letter-spacing: 0.02em;
}
.act1-hud-pill.leads-pill {
background: rgba(124, 45, 18, 0.9);
border-color: #FB923C;
color: var(--text-inverse);
transition: background-color var(--dur-base) ease, border-color var(--dur-base) ease;
}
.act1-hud-pill.leads-pill.all-done {
/* WCAG AA: at 0.92 alpha over a bright scene this composited to 4.34:1.
Opaque --color-success is 5.02:1. */
background: var(--color-success);
border-color: var(--color-success-pale);
}
/* Prompt shown once all leads are worked, pointing at the canopy as the break trigger */
.act1-hud-pill.canopy-prompt-pill {
/* WCAG AA: opaque for the same reason as .all-done above. */
background: var(--color-success);
border-color: var(--color-success-pale);
color: var(--text-inverse);
animation: pulsePill 2.4s infinite;
}
.act1-hud-pill.hints-dropped-pill {
background: rgba(185, 28, 28, 0.95);
border-color: var(--color-danger-pale);
color: var(--text-inverse);
font-weight: 800;
letter-spacing: 0.04em;
animation: pulsePill 2s infinite;
}
.hud-label-short {
display: none;
}
.hud-label-full {
display: inline;
}
@keyframes pulsePill {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.04); }
}
/* ==========================================================
TAY'S BODY TEMPERATURE GAUGE
The only HUD element that reports on HER rather than on the scene, so it is
deliberately built differently from the neutral pills: taller, its own colour
ramp, and it heats up visibly as the afternoon runs on.
========================================================== */
.act1-temp-gauge {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.55rem;
height: 46px;
padding: 0 0.9rem 0 0.75rem;
border-radius: var(--radius-sm);
box-sizing: border-box;
background: linear-gradient(160deg, rgba(12, 20, 34, 0.96), rgba(24, 16, 14, 0.96));
border: 2px solid var(--temp-accent, var(--temp-normal));
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), 0 0 18px -4px var(--temp-glow, transparent);
overflow: hidden;
transition: border-color 0.6s ease, box-shadow 0.6s ease;
}
.temp-gauge-readout {
display: flex;
flex-direction: column;
line-height: 1.1;
}
.temp-gauge-value {
font-family: var(--font-family-display);
font-size: 1.05rem;
font-weight: 900;
letter-spacing: 0.01em;
color: var(--temp-accent, var(--temp-normal));
transition: color 0.6s ease;
}
.temp-gauge-label {
font-family: var(--font-family-display);
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.09em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.72);
white-space: nowrap;
}
/* Thermometer fill along the bottom edge */
.temp-gauge-track {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 4px;
background: rgba(255, 255, 255, 0.14);
}
.temp-gauge-fill {
display: block;
height: 100%;
width: var(--temp-fill, 0%);
background: linear-gradient(90deg, var(--temp-normal) 0%, var(--temp-elevated) 42%, var(--temp-danger) 68%, var(--temp-critical) 100%);
background-size: 260px 100%;
transition: width 1.2s var(--ease-out-expo);
}
/* Colour ramp by clinical stage */
.act1-temp-gauge.stage-normal { --temp-accent: var(--temp-normal); --temp-glow: rgba(52, 211, 153, 0.35); }
.act1-temp-gauge.stage-elevated { --temp-accent: var(--temp-elevated); --temp-glow: rgba(252, 211, 77, 0.45); }
.act1-temp-gauge.stage-danger { --temp-accent: var(--temp-danger); --temp-glow: rgba(249, 115, 22, 0.6); }
.act1-temp-gauge.stage-critical {
--temp-accent: var(--temp-critical);
--temp-glow: rgba(239, 68, 68, 0.75);
animation: tempCritical 1.5s infinite ease-in-out;
}
.act1-temp-gauge.stage-critical .temp-gauge-label {
color: var(--color-danger-pale);
}
@keyframes tempCritical {
0%, 100% { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), 0 0 14px -4px rgba(239, 68, 68, 0.6); }
50% { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), 0 0 26px 2px rgba(239, 68, 68, 0.9); }
}
@media (prefers-reduced-motion: reduce) {
.act1-temp-gauge.stage-critical { animation: none; }
}
/* ==========================================================
IN-SCENE INTERACTIVE OBJECTS — no floating pins/badges.
Each lead is the drawn object itself: it glows to invite the click, lifts on
hover/focus, reveals its name in a small tooltip, and shows a checkmark once
visited. Positions are chosen so no two lead hit-areas overlap.
========================================================== */
.act1-interactable {
position: absolute;
background: transparent;
border: none;
padding: 0;
margin: 0;
cursor: pointer;
pointer-events: auto;
}
.act1-interactable:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring-on-dark);
outline-offset: 4px;
border-radius: var(--radius-sm);
}
.interactable-img,
.canopy-shade-layer,
.canopy-frame-layer {
width: 100%;
height: 100%;
/* contain, not cover: these are objects with real silhouettes, and cropping one
would cut a leg or a wheel off rather than just trimming background. */
object-fit: contain;
display: block;
}
.interactable-art {
display: block;
width: 100%;
height: 100%;
transition: transform var(--dur-fast) var(--ease-pop);
}
.interactable-art svg {
width: 100%;
height: 100%;
display: block;
}
.act1-interactable:hover .interactable-art,
.act1-interactable:focus-visible .interactable-art {
transform: scale(1.04);
}
.prop-ground-shadow {
position: absolute;
background: radial-gradient(ellipse at center, rgba(24, 36, 24, 0.45) 0%, rgba(24, 36, 24, 0.2) 60%, transparent 100%);
border-radius: 50%;
pointer-events: none;
z-index: -1;
}
.interactable-cooler .prop-ground-shadow {
bottom: -2%;
left: -8%;
width: 95%;
height: 20%;
}
.interactable-dock .prop-ground-shadow {
bottom: 0%;
left: -4%;
width: 90%;
height: 25%;
}
.interactable-bowl .prop-ground-shadow {
bottom: -6%;
left: -12%;
width: 110%;
height: 35%;
}
.prop-affordance-ring {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80%;
aspect-ratio: 1 / 0.3;
border: 2px solid var(--color-food-glow);
border-radius: 50%;
opacity: 0.8;
animation: propRingPulse 2.6s infinite ease-in-out;
pointer-events: none;
}
.interactable-bowl .prop-affordance-ring {
width: 140%;
bottom: -15%;
}
.interactable-cooler .prop-affordance-ring {
width: 100%;
}
/* A long, thin dock: ringing the whole walkway made an oval floating on the water. The ring
sits around the near-end landing instead — on the sand, where Tay steps on. */
.interactable-dock .prop-affordance-ring {
width: 30%;
left: 84%;
bottom: 9%;
}
/* The lake gets the same amber ring as the other leads, lying flat on the water around the
ripple point, so it reads as clickable in the same language. The art box clips (the
ripples), so this ring is sized inside it. */
.interactable-lake .prop-affordance-ring.lake-ring {
bottom: 12%;
width: 46%;
aspect-ratio: 1 / 0.3;
border-width: 2.5px;
}
@keyframes propRingPulse {
0%, 100% { transform: translateX(-50%) scale(0.95); opacity: 0.4; }
50% { transform: translateX(-50%) scale(1.05); opacity: 0.8; }
}
.act1-interactable:hover .prop-affordance-ring,
.act1-interactable:focus-visible .prop-affordance-ring {
animation-play-state: paused;
opacity: 1;
}
.act1-interactable.visited .prop-affordance-ring {
animation: none;
opacity: 0; /* Ring goes quiet when visited */
}
@media (prefers-reduced-motion: reduce) {
.prop-affordance-ring {
animation: none;
opacity: 0.6;
}
}
/* Name tooltip — replaces the old always-on floating label pill; only shows on hover/focus */
.interactable-tooltip {
position: absolute;
bottom: 100%;
left: 50%;
transform: translate(-50%, 6px);
margin-bottom: 8px;
background: var(--surface-tooltip);
backdrop-filter: blur(6px);
color: var(--text-inverse);
font-family: var(--font-family-display);
font-size: 0.78rem;
font-weight: 700;
padding: 0.3rem 0.75rem;
border-radius: var(--radius-pill);
white-space: nowrap;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.2);
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease, transform 0.18s ease;
z-index: 20;
}
.act1-interactable:hover .interactable-tooltip,
.act1-interactable:focus-visible .interactable-tooltip {
opacity: 1;
transform: translate(-50%, 0);
}
.interactable-check {
position: absolute;
top: -6px;
right: -6px;
width: 20px;
height: 20px;
/* WCAG AA: white glyph on #10B981 was 2.54:1. --color-success-strong is
5.48:1, and still clears 3:1 against its own white ring. */
background: var(--color-success-strong);
color: var(--text-inverse);
border: 2px solid var(--palette-warm-white);
border-radius: 50%;
font-size: 0.68rem;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
z-index: 21;
}
/* The scene layer is a full-stage overlay. It must be explicitly positioned: as a static
block it sat AFTER the full-height background image in normal flow, i.e. below the
stage, so any child that lost its absolute positioning got laid out down there and
clipped away by the card's overflow:hidden. */
.act1-scene-layer {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
/* Its own stacking context. The props sort by ground line with z-indexes up to ~90;
without this they competed with the speech layer (30) and the HUD/nav bars (40), and
drew straight over the case-file modal and the HUD buttons. */
z-index: 10;
isolation: isolate;
}
/* Pop-Up Shade Canopy. Scenery during the hunt; the break trigger once all four leads
are worked. Its cast shadow is a separate layer so the sun can move it independently. */
.lake-scene-canopy {
position: absolute;
top: 27%;
left: 60%;
width: 35%;
height: 53.5%;
pointer-events: none;
z-index: 11;
filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.25));
}
.canopy-frame-layer {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
/* The shade is a separate 900x400 plate (docs/act1-art-prompts.md §9) rather than part of
the canopy art, because the sun moves it independently as the act runs on.
It cannot share the frame layer's box. The canopy's own art fills that box top to bottom
with the legs landing on its lower edge, whereas the shade is a flat quad lying on the
ground: it has to be centred on the feet line, not on the canopy, and it is wider than
the structure because it falls away to the left. Hence its own geometry below — anchored
to the bottom of the canopy box and overhanging it on both sides. */
.canopy-shade-layer {
position: absolute;
left: -40%;
bottom: -38%;
width: 150%;
height: auto;
display: block;
transform: translateX(var(--act1-shade-shift, 0%)) scaleY(var(--act1-shade-scale-y, 1));
/* Anchored at the feet: as the shade shortens through the afternoon it collapses toward
the legs, the way a real shadow does, rather than toward its own centre. */
transform-origin: 50% 92%;
transition: transform 2.5s ease-in-out;
}
/* Armed state: the canopy becomes clickable and invites the rest beat. */
.lake-scene-canopy.canopy-armed {
pointer-events: auto;
cursor: pointer;
animation: canopyInvite 2.6s infinite ease-in-out;
}
@keyframes canopyInvite {
0%, 100% { filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.25)) drop-shadow(0 0 0 rgba(125, 211, 252, 0)); }
50% { filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.25)) drop-shadow(0 0 18px rgba(125, 211, 252, 0.75)); }
}
.lake-scene-canopy.canopy-armed:hover,
.lake-scene-canopy.canopy-armed:focus-visible {
animation-play-state: paused;
filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 24px rgba(125, 211, 252, 0.9));
}
/* The canopy is the break trigger and is keyboard-operable (role="button"
tabindex="0"), so it needs a real ring. It previously set `outline: none`,
which left keyboard users with only a glow — and glow alone is not a visible
focus indicator. */
.lake-scene-canopy.canopy-armed:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring-on-dark);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
.canopy-tooltip {
position: absolute;
top: 6%;
left: 50%;
transform: translate(-50%, -6px);
background: var(--surface-tooltip);
backdrop-filter: blur(6px);
color: var(--text-inverse);
font-family: var(--font-family-display);
font-size: 0.78rem;
font-weight: 700;
padding: 0.3rem 0.75rem;
border-radius: var(--radius-pill);
white-space: nowrap;
border: 1px solid var(--hairline-light);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease, transform 0.18s ease;
}
.lake-scene-canopy.canopy-armed:hover .canopy-tooltip,
.lake-scene-canopy.canopy-armed:focus-visible .canopy-tooltip {
opacity: 1;
transform: translate(-50%, 0);
}
/* Beats 1D/1E push in on the canopy so the nap and shade drift read at close range. */
.act1-viewport-card.canopy-focus .act1-scene-layer,
.act1-viewport-card.canopy-focus .act1-scene-img {
transform: scale(1.85);
transform-origin: 77% 62%;
transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Tay, asleep on the grass under the canopy in lateral recumbency */
.lake-scene-tay {
position: absolute;
top: 64%; /* clear of the nav bar's primary button */
left: 71%; /* head clear of the canopy's front leg in the canopy-focus camera */
width: 16%;
aspect-ratio: 1376 / 768;
pointer-events: none;
z-index: 13;
filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.28));
}
/* One-shot entrance, applied only on the render that first places her */
.lake-scene-tay.tay-entering {
animation: taySettle 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes taySettle {
from { opacity: 0; transform: translateY(-8px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.tay-lateral-wrapper {
position: relative;
width: 100%;
height: 100%;
}
.tay-lateral-svg {
width: 100%;
height: 100%;
display: block;
overflow: visible;
}
/* Labored breathing: abdominal and thoracic heaving anchored along the dorsal spine */
.tay-labored-abdomen {
transform-origin: 766px 240px;
transform-box: view-box;
animation: tayLaboredHeave 0.72s infinite ease-in-out;
}
/* In drift beat (Beat 1E), breathing becomes faster and shallower as hyperthermia worsens */
.lake-scene-tay.tay-drifting .tay-labored-abdomen {
animation-duration: 0.52s;
}
@keyframes tayLaboredHeave {
0%, 100% {
transform: scale(1, 1);
}
35% {
transform: scale(1.025, 1.075) translateY(2px);
}
65% {
transform: scale(1.015, 1.04) translateY(1px);
}
}
/* ==========================================================
TAY STANDING & TROTTING AVATAR IN THE LAKE HUB
========================================================== */
.act1-avatar-tay {
position: absolute;
width: 14%;
aspect-ratio: 1200 / 896;
min-width: 80px;
pointer-events: none;
z-index: 15;
/* Smooth travel across screen and smooth depth perspective scaling */
transition: top 3.2s cubic-bezier(0.35, 0, 0.25, 1),
left 3.2s cubic-bezier(0.35, 0, 0.25, 1),
scale 3.2s cubic-bezier(0.35, 0, 0.25, 1);
scale: var(--tay-scale, 1);
}
/* Natural raw PNG image faces RIGHT. Anchor at nose (86.5% 73.2%) */
.act1-avatar-tay.facing-right {
transform-origin: 86.5% 73.2%;
translate: -86.5% -73.2%;
}
.act1-avatar-tay.facing-right .act1-avatar-tay-sprite {
transform: none;
}
/* When moving or facing LEFT: anchor at flipped nose (13.5% 73.2%), flip instantly with zero paper-flip animation */
.act1-avatar-tay.facing-left {
transform-origin: 13.5% 73.2%;
translate: -13.5% -73.2%;
}
.act1-avatar-tay.facing-left .act1-avatar-tay-sprite {
transform: scaleX(-1);
}
.act1-avatar-tay-sprite {
position: relative;
width: 100%;
height: 100%;
}
/* Soft contact shadow beneath Tay's paws */
.act1-avatar-tay .tay-ground-shadow {
position: absolute;
bottom: 6%;
left: 20%;
width: 58%;
height: 15%;
background: radial-gradient(ellipse at center, rgba(30, 41, 30, 0.38) 0%, rgba(30, 41, 30, 0.18) 60%, transparent 100%);
border-radius: 50%;
pointer-events: none;
z-index: 1;
}
.act1-avatar-tay .tay-avatar-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
pointer-events: none;
user-select: none;
-webkit-user-drag: none;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.22));
z-index: 2;
}
/* Ground sniffing walking sprite hidden while standing */
.act1-avatar-tay .tay-sniffing-img {
display: none;
}
/* While walking: switch to sniffing pose and apply trotting motion */
.act1-avatar-tay.is-walking .tay-standing-img {
display: none;
}
.act1-avatar-tay.is-walking .tay-sniffing-img {
display: block;
animation: taySniffTrot 0.36s infinite alternate ease-in-out;
}
.act1-avatar-tay.is-walking .tay-ground-shadow {
animation: tayShadowTrot 0.36s infinite alternate ease-in-out;
}
/* Pure vertical trot bobbing without any angular rotation */
@keyframes taySniffTrot {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-3.5px);
}
}
@keyframes tayShadowTrot {
0% {
transform: scale(1);
opacity: 0.38;
}
100% {
transform: scale(0.92);
opacity: 0.26;
}
}
/* Idle breathing pacing accelerates with exhaustion stage */
.act1-avatar-tay:not(.is-walking) .tay-standing-img {
transform-origin: 50% 85%;
animation: tayStandingBreathe 2.4s infinite ease-in-out;
}
.act1-avatar-tay.stage-2:not(.is-walking) .tay-standing-img {
animation-duration: 1.8s;
}
.act1-avatar-tay.stage-3:not(.is-walking) .tay-standing-img {
animation-duration: 1.2s;
}
.act1-avatar-tay.stage-4:not(.is-walking) .tay-standing-img {
animation-duration: 0.75s;
}
@keyframes tayStandingBreathe {
0%, 100% {
transform: scale(1, 1);
}
50% {
transform: scale(1.008, 1.018);
}
}
/* 1. The Cooler ("The Vault") — out in open sun, clear of the tree's root flare and
the fallen log. The script is explicit that it sits in full sun with no shade near it. */
.interactable-cooler {
top: 60%;
left: 39%;
width: 7.4%;
height: 13%;
}
/* 2. The Dock ("High Ground") — drawn broadside, running along the shore rather than
out from it. The box is no longer rotated: the shoreline's -9° is built into the art's
own long edges, which keeps the check badge and the hover lift on the same axes as
every other interactable. Short and wide because we see the dock's length, not its
depth — height dropped from 22% to 8.5% when it turned side-on. */
.interactable-dock {
/* 28% wide, anchored on the near (lower-right) end where the deck meets the sand at
~28.2% / 61.5% of the card. The art is generated by docs/lake-prop-dock.py; if its
near-end corner moves in the SVG, recompute these four from it. The depth sort in
syncSceneState() uses that same 61.5% ground line. */
top: 43.2%;
left: 2.3%;
width: 28%;
height: 21.7%;
}
.interactable-dock:hover .interactable-art,
.interactable-dock:focus-visible .interactable-art {
transform: scale(1.06) translateY(-3px);
}
/* The deck art is an inset trapezoid, so the default top-right corner badge floats well
clear of it and reads as unrelated. Pull the tick onto the deck itself. */
.interactable-dock .interactable-check {
/* Rides a bollard a third of the way along the deck — not the box's top-right corner (the
box is mostly transparent sky), and not the landing, where Tay stands and would hide it. */
top: 41%;
right: 33%;
}
/* 3. Water Bowl ("The Water One") — open grass, clear of everything else */
.interactable-bowl {
top: 74%;
left: 47%;
width: 5.5%;
height: 5.6%;
}
/* 4. The Lake ("The Biggest Bowl") — the open water left of the dock. No drawn icon,
so the affordance is the water's own motion: wavefronts that run parallel to the
shoreline and travel across the water toward the beach. */
/* Open water between the dock's far end and the near shore; it sat on the far shoreline.
Kept right of the dock's hit box (which ends at 30.3%). */
.interactable-lake {
top: 48%;
left: 30.5%;
width: 20%;
height: 8%;
}
/* The lake has no drawn object of its own. It used to advertise itself as a tinted,
hard-bordered rectangle of water — which is a raw hit target, not art, and on a painted
plate it read as unfinished. Act 2's pattern is the right one: the affordance is a
discrete ring token sitting ON the art, and the art itself is left alone. The water's
own motion (the shore-parallel ripples below) carries the rest of the invitation. */
.interactable-lake .interactable-art {
position: relative;
overflow: hidden;
/* No drop-shadow or pulse: there is no object here to lift off the plate. */
filter: none;
animation: none;
}
/* The ring token, centred in the water patch. Mirrors .act2-hotspot so the two acts
teach the learner the same "this is clickable" vocabulary. */
/* The lake's affordance is its own water, not a chip laid on top of it. A dark UI disc
read as a foreign object once the scenery became rendered art — so instead, rings
spread from a point on the surface the way a drop does. It is unmistakably animated,
which is what says "clickable", while still being a thing water actually does. */
.lake-touch-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
overflow: visible;
}
.lake-touch-ring {
fill: none;
stroke: rgba(255, 255, 255, 0.95);
stroke-width: 2.4;
vector-effect: non-scaling-stroke;
transform-box: view-box;
transform-origin: 50px 50px;
opacity: 0;
animation: lakeTouchRing 3.2s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}
.ring-2 { animation-delay: 1.06s; }
.ring-3 { animation-delay: 2.12s; }
@keyframes lakeTouchRing {
0% { transform: scale(0.1); opacity: 0; }
12% { opacity: 0.7; }
100% { transform: scale(1); opacity: 0; }
}
/* Hover/focus: the same gesture, just more insistent. */
.interactable-lake:hover .lake-touch-ring,
.interactable-lake:focus-visible .lake-touch-ring {
animation-duration: 1.9s;
stroke-width: 1.8;
}
/* Worked: the corner check badge is the status signal, so the water goes quiet. */
.interactable-lake.visited .lake-touch-ring {
animation: none;
opacity: 0;
}
.interactable-lake:hover .interactable-art,
.interactable-lake:focus-visible .interactable-art {
/* Water shouldn't lift or pop the way a solid object does. */
transform: none;
filter: none;
}
/* The lake's tooltip is its main "this is a thing" signal, so it stays visible. */
.interactable-lake .interactable-tooltip {
opacity: 1;
transform: translate(-50%, 0);
}
/* Scene-wide water surface. Sits under everything else in the scene layer and takes no
clicks — the lake's hit area is still .interactable-lake, this is only its motion.
The clip path is the water's measured outline (see the JS comment on the layer), so
ripples run the full width of the lake and stop exactly at both shores. */
.act1-water-layer {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
clip-path: polygon(
-2% 48.5%, 57.2% 48.5%,
57.2% 50.6%, 50% 51.7%, 39.8% 54%, 29.5% 58.1%,
19.3% 61.3%, 9% 63.3%, -2% 65.6%
);
}
.act1-water-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
overflow: visible;
}
/* Each wave is the same shore-traced path, released out near the far bank and sliding
shoreward. The layer's clip-path is what stops them at the water's edge. The lake
narrows toward the tree, so a single travel distance reads as correct perspective:
the wave crosses the wide near water slowly and the thin far water in a moment. */
.lake-wave {
opacity: 0;
animation: lakeShoreWave 5.4s linear infinite;
}
.lake-wave-2 { animation-delay: 1.35s; }
.lake-wave-3 { animation-delay: 2.7s; }
.lake-wave-4 { animation-delay: 4.05s; }
@keyframes lakeShoreWave {
0% { transform: translateY(-15px) scaleX(0.94); opacity: 0; }
22% { opacity: 0.32; }
75% { opacity: 0.18; }
100% { transform: translateY(2px) scaleX(1.04); opacity: 0; }
}
/* Hovering the lake quickens its water. The waves are no longer inside the button, so
the relationship has to be expressed from the card down. */
.act1-viewport-card:has(.interactable-lake:hover) .lake-wave,
.act1-viewport-card:has(.interactable-lake:focus-visible) .lake-wave {
animation-duration: 2.9s;
}
@media (prefers-reduced-motion: reduce) {
/* Still water, but still four wavefronts: with the animation off they would all stack
on the traced shoreline and read as one hard line drawn on the sand. Spread them
back out across the water so the lake keeps its texture without moving. */
.lake-wave { animation: none; opacity: 0.2; }
.lake-wave-1 { transform: translateY(-12px) scaleX(0.95); }
.lake-wave-2 { transform: translateY(-8px) scaleX(0.97); }
.lake-wave-3 { transform: translateY(-4px) scaleX(0.99); }
.lake-wave-4 { transform: translateY(0); }
}
/* ==========================================================
BEAT 1A: TAY'S MISSION CARD (FIND REAL FOOD, NOT KIBBLE)
========================================================== */
.act1-mission-card {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(90%, 620px);
max-height: min(85vh, 520px);
overflow-y: auto;
background: var(--surface-card-dark);
border: 3px solid var(--color-amber);
border-radius: var(--radius-lg);
padding: 1.35rem 1.6rem;
box-shadow:
var(--elev-modal),
0 0 30px rgba(245, 158, 11, 0.3);
color: var(--text-on-dark);
display: flex;
flex-direction: column;
box-sizing: border-box;
z-index: 50;
pointer-events: auto;
}
.mission-card-header {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1.5px solid rgba(245, 158, 11, 0.35);
padding-bottom: 0.55rem;
margin-bottom: 0.75rem;
}
.mission-card-badge {
background: var(--color-amber-deep);
color: var(--color-amber-pale);
font-family: var(--font-family-display);
font-size: 0.75rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.2rem 0.6rem;
border-radius: var(--radius-xs);
}
.mission-card-title {
font-family: var(--font-family-display);
font-size: 1.35rem;
font-weight: 800;
color: var(--text-inverse);
margin: 0;
}
.mission-card-body {
font-family: var(--font-family-body);
font-size: 0.98rem;
line-height: 1.48;
color: var(--text-on-dark-muted);
margin-bottom: 0.85rem;
}
.mission-leads-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
margin-top: 0.75rem;
background: rgba(255, 255, 255, 0.05);
padding: 0.75rem;
border-radius: var(--radius-sm);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.mission-lead-item {
display: flex;
align-items: center;
gap: 0.45rem;
font-size: 0.85rem;
font-weight: 600;
color: var(--color-amber-tint);
}
.mission-card-footer {
display: flex;
justify-content: flex-end;
border-top: 1px solid var(--hairline-light-soft);
padding-top: 0.75rem;
margin-top: 0.5rem;
}
/* ==========================================================
POP-UP VIEWPORT MODAL (TAY'S POV CLOSE-UPS)
========================================================== */
.act1-pov-viewport-modal {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background: var(--surface-scrim);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
z-index: 45;
pointer-events: auto;
padding: 1rem;
box-sizing: border-box;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.pov-viewport-card {
position: relative;
width: min(94vw, 980px);
aspect-ratio: 16 / 9;
max-height: min(82vh, 580px);
background: var(--surface-card-darkest);
border: 3px solid var(--color-amber);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow:
0 24px 60px rgba(0, 0, 0, 0.85),
0 0 30px rgba(245, 158, 11, 0.35);
display: flex;
flex-direction: column;
}
.pov-viewport-header {
position: absolute;
top: 0.85rem;
left: 1.1rem;
right: 1.1rem;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 30;
pointer-events: none;
}
.pov-tag-badge {
background: var(--surface-chip-dark);
backdrop-filter: blur(8px);
color: var(--color-amber-tint);
border: 1px solid var(--temp-danger);
font-family: var(--font-family-display);
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 0.3rem 0.8rem;
border-radius: var(--radius-pill);
display: flex;
align-items: center;
gap: 0.4rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.pov-close-btn {
background: var(--surface-chip-dark);
backdrop-filter: blur(8px);
color: var(--text-inverse);
border: 1px solid rgba(255, 255, 255, 0.3);
font-family: var(--font-family-display);
font-size: 0.85rem;
font-weight: 700;
padding: 0.3rem 0.85rem;
border-radius: var(--radius-pill);
cursor: pointer;
pointer-events: auto;
transition: background-color var(--dur-fast) ease,
border-color var(--dur-fast) ease,
transform var(--dur-fast) ease;
}
.pov-close-btn:hover,
.pov-close-btn:focus-visible {
background: var(--color-danger);
border-color: var(--color-danger-bright);
transform: translateY(-1px);
}
.pov-close-btn:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring-on-dark);
outline-offset: var(--focus-ring-offset);
}
.pov-scene-illustration {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
/* An now, not an