/* ============================================================ THE STAGE — Adelaide's world Everything racing's stage.css states as law still holds here: nothing animates left/top/width/height, a filter and a transform never share an element, two animations never share a transform, every loop travels exactly one pattern period. This file only adds material — the shell (.rq, .rq-cam, .rq-scene, .rq-band, .rq-slot) lives in stage.css and is shared with the race, unedited. THE ONE RULE THAT ACTUALLY CHANGES THE ART: she is flat cartoon with cocoa outlines (--cocoa, 2.5px), bright at every stage — her tokens file says outright this is "never a dark jewel box, least of all at night on the Cloud Stair." So .pq-sky below reads var(--bg), the same light wash themes/princess.css already defines for all eight `data-stage` values — the app's own scenery system, reused rather than reinvented. Only the ground moves: the layer stack is identical for all eight stages, and a stage differs only in its landmark, its two hill tints and its particle colour — see LANDMARK, MOTE_COLORS and the --pq-far/--pq-near table below, all keyed the same way themes/princess.css keys --surface-alt. Objects are never blurred in this theme — a soft-edged cloud reads as a smudge — so blur here is reserved for the two hill bands, which are depth planes, not things. The landmark and the traveller stay crisp at every distance. */ /* ---------- sky ---------- Static: no transform, no filter, nothing to animate. The three radial blooms and the vertical wash are already doing the work of "somewhere specific," by construction, once `data-stage` is set on . */ .pq-sky{ position:absolute; inset:0; background:var(--bg) } /* A soft halo behind the landmark — her equivalent of a light source, reusing the near-hill tint rather than inventing a ninth colour. */ .pq-glow{ position:absolute; left:50%; top:8%; width:64%; height:30%; margin-left:-32%; z-index:3; pointer-events:none; background:radial-gradient(50% 50% at 50% 50%, var(--pq-near), transparent 72%); opacity:.55; } /* ---------- per-stage tints ---------- Two hill tones and nothing else — the landmark art below carries its own literal colours because each landmark belongs to exactly one stage, and a colour that never has to answer to a second context can just be written down. These two are shared by all eight, so they earn the token treatment themes/princess.css already established. */ :root[data-stage="0"]{ --pq-far:#D9F1DE; --pq-near:#A9DFBA } /* Meadow — morning green */ :root[data-stage="1"]{ --pq-far:#FCE1EC; --pq-near:#F6B9CF } /* Wildflower — petal pink */ :root[data-stage="2"]{ --pq-far:#CFE9D6; --pq-near:#9ACDAC } /* Whispering Woods — cool, still bright */ :root[data-stage="3"]{ --pq-far:#FCE3CE; --pq-near:#F3BE99 } /* Rope Bridge — canyon apricot */ :root[data-stage="4"]{ --pq-far:#D7F0FA; --pq-near:#A3DCEE } /* Crystal Falls — coldest, clearest */ :root[data-stage="5"]{ --pq-far:#EBF0FD; --pq-near:#C9D4F4 } /* Cloud Stair — lit from overhead */ :root[data-stage="6"]{ --pq-far:#E7D9F6; --pq-near:#C3A6E8 } /* Castle Gates — the mane's lilac */ :root[data-stage="7"]{ --pq-far:#FDEFC4; --pq-near:#F6D98D } /* Throne Room — gold, finally spent */ /* ---------- parallax hills ---------- Two bands, near and far, the same band+strip split every other plane in this app uses. Hard flat puffs of hill, closest-side radial the same way the clouds are drawn — a hill is not a mountain range here, it is a rounded shape repeated. */ .pq-far{ top:22%;height:15%;--per:220px;animation-duration:7.2s } .pq-far > i{ opacity:.65; filter:blur(1.6px); background:radial-gradient(closest-side, var(--pq-far) 74%, transparent 76%) 0 100% / 220px 92px repeat-x; } .pq-near{ top:33%;height:11%;--per:168px;animation-duration:3.6s } .pq-near > i{ opacity:.9; filter:blur(.6px); background:radial-gradient(closest-side, var(--pq-near) 78%, transparent 80%) 0 100% / 168px 66px repeat-x; } /* ---------- clouds ---------- Flat white puffs, hard edge, no blur — the rule stated at the top of this file. Two blooms of colour ride along for variety without ever touching the vocabulary that means something elsewhere in the app. */ .pq-clouds{ top:5%;height:19%;--per:300px;animation-duration:12s } .pq-clouds > i{ opacity:.95; background: radial-gradient(closest-side,#FFFFFF 78%,transparent 80%) 14px 30% /88px 42px, radial-gradient(closest-side,#FFFFFF 78%,transparent 80%) 128px 6% /120px 54px, radial-gradient(closest-side,#FFE4EE 78%,transparent 80%) 238px 44% /72px 34px; background-repeat:repeat-x; } /* ---------- the road ---------- Her rainbow trail, in perspective the same way the track is: a strip rotated back in 3D space, masked so it fades in rather than starting at a hard line. Flat bands, a thin cocoa pinstripe between them — thin and soft enough to read as a ribbon seam, not a rail: the first pass ran full-strength cocoa bars crossed by a repeating white dash every 34px, which is exactly a railway tie, and at v1 it was reported as reading like one. The dashes are gone outright; nothing here scrolls, since a static ground a character visibly moves across already reads as travel, and a second scrolling texture on top of the parallax and the gait was the thing making it busy rather than magical. A wider perspective value and a shallower tilt than the track's replace the railway-vertical convergence with a road that is already fairly wide by the height she stands on. */ .pq-road{ position:absolute; left:-24%; right:-24%; bottom:0; height:60%; z-index:2; perspective:460px; perspective-origin:50% 0; overflow:hidden; pointer-events:none; } .pq-road > i{ position:absolute; left:0; right:0; bottom:0; height:300%; transform-origin:50% 100%; transform:rotateX(66deg); background:linear-gradient(90deg, transparent 20%, #A7E8CE 20% 30.6%, rgba(110,74,87,.4) 30.6% 31.1%, #BFE1F2 31.1% 41.7%, rgba(110,74,87,.4) 41.7% 42.2%, #C9AEEF 42.2% 52.8%, rgba(110,74,87,.4) 52.8% 53.3%, #FBB6CE 53.3% 63.9%, rgba(110,74,87,.4) 63.9% 64.4%, #FCC9A8 64.4% 72%, rgba(110,74,87,.4) 72% 72.5%, #FBD86B 72.5% 78%, transparent 78%); -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 14%, #000 100%); mask-image:linear-gradient(180deg, transparent 0, #000 14%, #000 100%); } /* One gentle brightening, whole-road, so the trail is not completely inert — opacity only, no scrolling geometry to seam. */ .pq-road{ animation:pq-shimmer 3400ms ease-in-out infinite alternate } @keyframes pq-shimmer{ from{ opacity:.92 } to{ opacity:1 } } /* ---------- the landmark ---------- Two elements, same discipline as .rq-dim / .r-cw in stage.css: the outer carries the transform (grows as --gap closes), the inner carries the filter (a flat cocoa-toned contact shadow, drawn as drop-shadow because a landmark has no ground plane of its own to cast one onto). Collapsing them back into one element is exactly the mistake the placeholder made. */ /* Sized and placed against the app's column, not the window. quest.css's own rider rig states every --rw in pixels for exactly this reason; switching them to percentages works on a 360px harness frame and puts a 550px unicorn and a landmark taller than the screen on a laptop, where the world is the whole viewport. Anchored by its base rather than its top, so it stands at a fixed point on the road and grows upward as she closes on it — which is what approaching a thing looks like. Its base sits below the verse card on purpose: a landmark hidden behind the scripture is a destination the child never sees herself reaching. */ .pq-landmark{ position:absolute; left:50%; top:auto; bottom:44%; z-index:5; width:calc(var(--road,520px) * .34); margin-left:calc(var(--road,520px) * -.17); transform-origin:50% 100%; transform:scale(calc(.32 + (1 - var(--gap)) * .95)); transition:transform 340ms cubic-bezier(.3,.7,.3,1); } .pq-lshadow{ position:relative; opacity:calc(.32 + (1 - var(--gap)) * .68); filter:drop-shadow(0 6px 0 rgba(110,74,87,.16)); transition:opacity 340ms linear; } .pq-lart{ position:relative; width:100%; line-height:0 } .pq-lart svg{ width:100%; height:auto; display:block; overflow:visible } /* Crystal Falls only: three narrow streams poured through the gap the rock art leaves open, each a long soft gradient rather than a hard-edged repeat — v1 used a 10px/46px hard stripe, which at this scale read as three rungs on a ladder, not water. A long, smoothly fading gradient with only one visible transition per stream, each on its own negative delay, reads as continuous fall instead. Bespoke vertical loop rather than the shared horizontal band — same principle (translate exactly one pattern period), turned 90 degrees. No blur: water is an object here too. */ .pq-falls{ position:absolute; left:34%; right:34%; top:15%; bottom:15%; overflow:hidden; z-index:1; -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image:linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%); } .pq-falls i{ position:absolute; top:0; height:320%; border-radius:50%; background:linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.4) 30%, rgba(191,225,242,.7) 55%, rgba(255,255,255,.92) 80%, rgba(255,255,255,.4) 100%); background-size:100% 150px; background-repeat:repeat-y; animation-name:pq-pour; animation-timing-function:linear; animation-iteration-count:infinite; } @keyframes pq-pour{ to{ transform:translate3d(0,150px,0) } } /* The foam where the fall lands — a soft pulse, not a scroll, so it never needs a seamed period. */ .pq-splash{ position:absolute; left:30%; right:30%; bottom:15%; height:9%; z-index:2; pointer-events:none; background:radial-gradient(50% 65% at 50% 100%, rgba(255,255,255,.92), transparent 74%); animation:pq-splash 900ms ease-in-out infinite alternate; } @keyframes pq-splash{ from{ opacity:.55; transform:scaleY(.86) } to{ opacity:.95; transform:scaleY(1.08) } } /* ---------- foreground ---------- */ /* What the lens whips past — the plane that sells speed, same role as rq-fg and drawn after the rider so it occludes her at the edges, exactly the way rq-fg occludes the hero car. */ .pq-fg{ bottom:-4%;height:18%;--per:240px;animation-duration:.5s } .pq-fg > i{ filter:blur(10px); opacity:calc(.05 + var(--speed) * .22); transition:opacity 500ms linear; background:repeating-linear-gradient(90deg, rgba(251,182,206,.55) 0 38px, transparent 38px 240px); } /* ---------- the traveller ---------- Reuses quest.css's own three-channel rig — .q-rider / .q-gait / .q-body — the exact gallop her journey map and stage-unlock scenes already use, rather than a second animation invented just for this frame. .rq-slot (shared, stage.css) still owns the one thing that is hers alone: drift toward the landmark as reach climbs, since she has no rival to close on and the travelling has to read somewhere. */ /* --ry is low — close to the bottom of the frame — for a concrete reason: the road is a perspective plane that is narrow high up and wide low down, and the first pass planted her at 33%, where the plane is still mostly "far," so her hooves and her shadow sat over background rather than the widened road surface and she read as floating beside it rather than standing on it. --rml also no longer just halves --rw: the drawing's own visual mass sits slightly right of her box's horizontal centre (a trailing tail pulls the bounding box left of the body), so the offset is nudged to match the art rather than the box. */ .rq-princess{ --stride:480ms } /* Bigger than she was. 30% of frame width is the size she is on a one-inch progress rule, and at that scale on a full screen she reads as a sticker on a landscape rather than the character the landscape belongs to. She is the thing a child is looking at; she gets to be the largest thing in the frame that isn't the road. */ /* Sized against the frame's width, which is 360px in the preview harness and 520px in the app — so a number tuned in the harness arrives half again as large on the real screen. Tuned here for the app, since that is the one that ships, and checked in both. */ .rq-princess .q-rider{ --rw:calc(var(--road,520px) * .30); --rml:calc(var(--road,520px) * -.15); --ry:30%; --rx:50%; } /* ---------- ambient particles ---------- One drifting loop, coloured per stage in MOTE_COLORS (stage.js) — pollen, petals, fireflies, mist, spray, stardust, torch-sparks, confetti gold. Infinite and negative-delayed so the group is never in phase, which is what keeps eighteen identical keyframes from reading as one. */ .pq-motes{ position:absolute; inset:0; z-index:6; pointer-events:none; overflow:hidden } .pq-motes i{ position:absolute; border-radius:50%; opacity:0; animation-name:pq-drift; animation-timing-function:ease-in-out; animation-iteration-count:infinite; will-change:transform,opacity; } @keyframes pq-drift{ 0% { opacity:0; transform:translate3d(0,8px,0) scale(.6) } 12% { opacity:.9 } 50% { opacity:.9; transform:translate3d(var(--dx,0),-26px,0) scale(1) } 88% { opacity:.4 } 100%{ opacity:0; transform:translate3d(calc(var(--dx,0) * 1.6),-58px,0) scale(.7) } } /* ---------- the arrival ---------- Her equivalent of rq-bloom: a warm glow that swells and falls away on the last words, never a hard cut. The landmark itself does the rest of the work — finish() sets --gap to the margin, and the transition above carries it the last step on its own. */ .pq-flourish{ position:absolute; inset:0; z-index:9; opacity:0; pointer-events:none; background:radial-gradient(46% 34% at 50% 24%, rgba(255,246,216,.9), rgba(251,216,107,.34) 48%, transparent 76%); } .rq.is-finishing .pq-flourish{ animation:pq-arrivein 1700ms 260ms ease-in-out both } @keyframes pq-arrivein{ 0%{opacity:0} 40%{opacity:.85} 100%{opacity:0} } /* ---------- reduced motion ---------- Snap, never suppress — the same rule stage.css states for the race. She keeps her whole world; what she loses is the travelling through it. */ @media (prefers-reduced-motion:reduce){ .pq-far > i,.pq-near > i,.pq-clouds > i,.pq-fg > i,.pq-road,.pq-falls i,.pq-splash{ animation:none !important; } .pq-landmark,.pq-lshadow{ transition:none !important } .rq-princess .q-gait,.rq-princess .q-body,.rq-princess .q-shadow{ animation:none !important } .pq-motes{ display:none !important } .rq.is-finishing .pq-flourish{ animation-duration:1ms !important; animation-delay:0ms !important } }