/*
* AnaJak Store: Cambodia landscape, day and night (footer band) and the restrained page accents.
* Storefront only (layouts/storefront). Works with ds-color-modes.css (colour tokens) and
* /js/ds-color-mode.js (theme switch, lazy art, pause offscreen, pointer parallax).
*
* Band markup: components/site-footer.blade.php renders
* @include(kh-landscape-fx)
* The day art is painted by .ajf-skyline::before (design-system.css, copy-protection change), the night art
* by ::after (below). The living layers are CSS-only elements (no ![]()
, nothing to drag or save).
* Only transform and opacity are animated; nothing here takes pointer events.
* Locked pages (: custom design mode, the admin Page Design preview) show the day scene
* only. The page accents (section 10) are not drawn in custom mode: --kh-accent is defined only by
* ds-color-modes.css, which that mode does not load, so they stay invisible there, as today.
*/
/* ── 1. Art: which file is downloaded, and the day/night crossfade ───────────────────── */
.ajf-skyline {
--ajf-day-img: var(--sky-d, none);
--ajf-night-img: var(--sky-dn, none);
--ajf-mask: var(--sky-mask-d, none);
--sky-img: var(--ajf-day-img); /* read by .ajf-skyline::before (design-system.css) */
--ajf-fade: .65s;
--ajf-drift: 26px;
--ajf-set: 14px;
/* Night version of the band background: the night art's outer edge column, for screens wider
than the art and while the file loads (generated by art/night_grade.py). */
--ajf-night-bg: linear-gradient(180deg, #081322 0.0%, #091425 17.37%, #0A1526 17.53%, #0A1729 25.51%, #0A162B 25.67%, #0B192D 30.52%, #0B192F 30.67%, #0C1A31 33.65%, #0C1A33 33.8%, #0B1B36 37.4%, #0C1D37 37.56%, #0E1D3A 40.53%, #0F1F3B 40.69%, #0D1F3B 41.78%, #0E203F 41.94%, #0F2140 45.54%, #0F2142 45.7%, #0F2245 48.67%, #102446 48.83%, #112449 51.17%, #11264A 51.33%, #12284C 54.3%, #12274E 54.46%, #132A50 59.31%, #142B51 59.47%, #152C54 61.82%, #162D57 61.97%, #182F57 66.82%, #173158 66.98%, #17305A 67.14%, #17305C 67.29%, #172F5E 67.45%, #264070 67.61%, #253F6F 67.76%, #223C6F 67.92%, #203A6C 68.08%, #1C3968 68.23%, #1B3865 68.7%, #1A3764 68.86%, #173561 69.48%, #163360 69.64%, #15335D 70.27%, #14315C 70.42%, #132E59 71.83%, #152D59 71.99%, #142D56 73.71%, #122C55 73.87%, #112A54 74.96%, #102A51 75.12%, #11284E 78.72%, #0F274C 78.87%, #0E2649 83.72%, #0D2548 83.88%, #0E2745 91.86%, #102645 92.02%, #102643 98.75%, #102741 98.9%, #102741 100.0%);
isolation: isolate;
/* The containment content-visibility: auto would give, without its skipping: skipping the offscreen band's style
updates would keep the pause rule below (.ajf-skyline:not(.is-visible)) from applying, so the loops would stay
"running" offscreen. The art is fetched only near the viewport anyway (.is-near, below). */
contain: layout style paint;
}
@media (max-width: 639.98px) {
.ajf-skyline {
--ajf-day-img: var(--sky-m, none);
--ajf-night-img: var(--sky-mn, none);
--ajf-mask: var(--sky-mask-m, none);
--ajf-drift: 10px;
--ajf-set: 7px;
}
}
/* Download only what is shown: nothing until the band is near the viewport (.is-near, set by the
script), then only the current theme's art; both only while a switch runs (html.sky-swap).
Without the script (no data-sky on ) the day art loads as before. */
html[data-sky] .ajf-skyline:not(.is-near) { --sky-img: none; --ajf-night-img: none; --ajf-mask: none; }
html[data-sky="night"]:not(.sky-swap) .ajf-skyline { --sky-img: none; }
html[data-sky="day"]:not(.sky-swap) .ajf-skyline { --ajf-night-img: none; }
.ajf-skyline::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
/* same box as the day art: full band height, centred, top-aligned */
background: var(--ajf-night-img) center top / auto 100% no-repeat, var(--ajf-night-bg);
opacity: 0;
transition: opacity var(--ajf-fade) ease-in-out;
}
html[data-sky="night"] .ajf-skyline::after { opacity: 1; }
/* Twilight pass: a plain crossfade between a white and a navy sky goes grey in the middle;
a soft blue veil peaks half-way so the switch reads as dusk (or dawn). Runs only during a switch. */
.ajf-dusk {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: 0;
background: linear-gradient(180deg, rgba(52, 82, 140, .22) 0%, rgba(58, 88, 148, .58) 24%, rgba(86, 118, 176, .55) 60%, rgba(34, 64, 116, .45) 70%, rgba(15, 39, 66, 0) 94%);
}
html.sky-dusk .ajf-dusk { animation: ajf-dusk var(--ajf-fade) ease-in-out; }
html.sky-dawn .ajf-dusk { animation: ajf-dawn var(--ajf-fade) ease-in-out; }
/* ── 2. Living layers: geometry ─────────────────────────────────────────────────────── */
.ajf-fx {
display: none;
position: absolute;
top: 0;
left: 50%;
height: 100%;
aspect-ratio: var(--sky-ratio, 2560 / 640);
translate: -50% 0;
z-index: 2;
pointer-events: none;
}
.ajf-skyline.is-near .ajf-fx--d { display: block; }
@media (max-width: 639.98px) {
.ajf-skyline.is-near .ajf-fx--d { display: none; }
.ajf-skyline.is-near .ajf-fx--m { display: block; }
}
.ajf-fx i { position: absolute; display: block; }
.ajf-fx-sky, .ajf-fx-water, .ajf-par, .ajf-g { position: absolute; inset: 0; }
/* Sky layers sit behind the temples: the mask (from our art) is opaque in open sky only. */
.ajf-fx-sky {
-webkit-mask: var(--ajf-mask) 0 0 / 100% 100% no-repeat;
mask: var(--ajf-mask) 0 0 / 100% 100% no-repeat;
}
/* Water layers stay on the river, below the bank, above the navy fade. */
.ajf-fx-water {
-webkit-mask: linear-gradient(180deg, transparent 67.6%, #000 69.6%, #000 82%, transparent 90%);
mask: linear-gradient(180deg, transparent 67.6%, #000 69.6%, #000 82%, transparent 90%);
}
/* Theme groups: day elements fade out as night elements fade in (the art fades at the same time). */
.ajf-day, .ajf-night { transition: opacity var(--ajf-fade) ease-in-out, transform .9s cubic-bezier(.2, .7, .2, 1); }
.ajf-night { opacity: 0; }
html[data-sky="night"] .ajf-day { opacity: 0; }
html[data-sky="night"] .ajf-night { opacity: 1; }
.ajf-stars { transition-delay: .18s; }
/* The hidden theme's loops do not run. The selectors name the animated classes: a universal subject
(`.ajf-day *`) would make every data-sky change on restyle the whole page, not just the band. */
html[data-sky="night"] :is(.ajf-mist.ajf-day, .ajf-day .ajf-sun-rays, .ajf-day .ajf-cloud, .ajf-day .ajf-flock, .ajf-day .ajf-bird,
.ajf-day .ajf-glint, .ajf-day .ajf-sparkle),
html:not([data-sky="night"]) :is(.ajf-mist.ajf-night, .ajf-night .ajf-star, .ajf-night .ajf-cloud, .ajf-night .ajf-moonpath,
.ajf-night .ajf-sparkle) { animation-play-state: paused; }
.ajf-fx .ajf-star.is-still { animation: none; opacity: .7; }
/* Depth: each layer follows the pointer (desktop) and the scroll by its own amount. */
.ajf-par {
translate: calc(var(--ajf-px, 0) * var(--depth, 0) * -1px) calc(var(--ajf-py, 0) * var(--depth, 0) * -.4px);
transition: translate 1.1s cubic-bezier(.2, .7, .2, 1);
}
/* ── 3. Sun (day) and moon (night) ──────────────────────────────────────────────────── */
.ajf-sun, .ajf-moon {
position: absolute;
left: var(--x);
top: var(--y);
width: var(--g);
aspect-ratio: 1;
translate: -50% -50%;
}
.ajf-sun-glow, .ajf-moon-glow { inset: 0; border-radius: 50%; }
.ajf-sun-glow {
background: radial-gradient(closest-side, rgba(255, 253, 244, .98), rgba(255, 249, 232, .62) 24%, rgba(255, 247, 228, .2) 56%, rgba(255, 250, 238, 0));
}
.ajf-sun-rays {
inset: -130%;
background: var(--ajf-rays);
-webkit-mask: radial-gradient(closest-side, #000 6%, rgba(0, 0, 0, .5) 36%, transparent 74%);
mask: radial-gradient(closest-side, #000 6%, rgba(0, 0, 0, .5) 36%, transparent 74%);
opacity: .7;
animation: ajf-rays 26s ease-in-out infinite alternate;
}
html[data-sky="night"] .ajf-sun { transform: translateY(var(--ajf-set)); }
.ajf-moon { transform: translateY(var(--ajf-set)); }
html[data-sky="night"] .ajf-moon { transform: none; transition-delay: .1s; }
.ajf-moon-glow {
background: radial-gradient(closest-side, rgba(191, 219, 254, .42), rgba(191, 219, 254, .17) 30%, rgba(191, 219, 254, .05) 60%, rgba(191, 219, 254, 0));
}
.ajf-moon-disc {
left: 50%;
top: 50%;
width: var(--k);
aspect-ratio: 1;
translate: -50% -50%;
border-radius: 50%;
background:
radial-gradient(circle at 63% 58%, rgba(146, 168, 206, .32) 0 9%, transparent 10.5%),
radial-gradient(circle at 41% 68%, rgba(146, 168, 206, .24) 0 6%, transparent 7.5%),
radial-gradient(circle at 55% 30%, rgba(146, 168, 206, .18) 0 5%, transparent 6.5%),
radial-gradient(circle at 36% 34%, #FFFFFF 0%, #EEF4FF 40%, #D3E2F7 74%, #BCD1EE 100%);
box-shadow: 0 0 6px 1px rgba(214, 230, 255, .55);
}
/* ── 4. Stars (night) ───────────────────────────────────────────────────────────────── */
.ajf-star {
left: var(--x);
top: var(--y);
width: var(--s);
aspect-ratio: 1;
translate: -50% -50%;
border-radius: 50%;
background: radial-gradient(circle, #FFFFFF 0 34%, rgba(205, 225, 255, .55) 52%, rgba(205, 225, 255, 0) 74%);
animation: ajf-twinkle var(--t) ease-in-out var(--dl) infinite;
}
.ajf-star.is-glint::before, .ajf-star.is-glint::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
translate: -50% -50%;
width: 460%;
height: 22%;
background: linear-gradient(90deg, rgba(225, 238, 255, 0), rgba(225, 238, 255, .8), rgba(225, 238, 255, 0));
}
.ajf-star.is-glint::after { width: 22%; height: 460%; background: linear-gradient(0deg, rgba(225, 238, 255, 0), rgba(225, 238, 255, .8), rgba(225, 238, 255, 0)); }
/* ── 5. Clouds (white by day, dark blue-grey at night) ──────────────────────────────── */
.ajf-cloud {
left: var(--x);
top: var(--y);
width: var(--w);
aspect-ratio: 240 / 90;
translate: -50% -50%;
background: var(--img) center / 100% 100% no-repeat;
animation: ajf-drift var(--t) ease-in-out var(--dl) infinite alternate;
}
/* ── 6. Birds (day): small flocks cross now and then; a resting flock with reduced motion ── */
.ajf-flight { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: 4%; }
.ajf-flock { position: absolute; inset: 0; opacity: 0; animation: ajf-fly var(--t) linear var(--dl) infinite; }
.ajf-flight.is-rev .ajf-flock { animation-name: ajf-fly-rev; }
.ajf-bird {
left: var(--bx);
top: var(--by);
width: var(--bw);
aspect-ratio: 24 / 10;
background: var(--ajf-bird) center / 100% 100% no-repeat;
transform-origin: 50% 62%;
animation: ajf-flap var(--ft, .9s) ease-in-out var(--fd, 0s) infinite alternate;
}
.ajf-perch { display: none; position: absolute; left: var(--x); top: var(--y); width: 4.2%; height: 3%; translate: -50% -50%; }
.ajf-perch .ajf-bird { width: 24%; animation: none; }
.ajf-perch .ajf-bird:nth-child(1) { left: 0; top: 40%; }
.ajf-perch .ajf-bird:nth-child(2) { left: 38%; top: 0; width: 20%; }
.ajf-perch .ajf-bird:nth-child(3) { left: 72%; top: 62%; width: 22%; }
.ajf-fx--m .ajf-perch { width: 9%; height: 6%; }
/* ── 7. Water: light streaks and sparkles (day), moon path (night) ─────────────────── */
.ajf-glint, .ajf-moonpath {
left: var(--x);
top: var(--y);
width: var(--w);
translate: -50% -50%;
border-radius: 50%;
}
.ajf-glint {
height: .6%;
background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(214, 242, 255, .5) 55%, rgba(214, 242, 255, 0));
opacity: 0;
animation: ajf-glint var(--t) ease-in-out var(--dl) infinite;
}
.ajf-moonpath {
height: .8%;
background: radial-gradient(closest-side, rgba(228, 238, 255, .88), rgba(191, 219, 254, .4) 55%, rgba(191, 219, 254, 0));
animation: ajf-moonpath var(--t) ease-in-out var(--dl) infinite alternate;
}
.ajf-sparkle {
left: var(--x);
top: var(--y);
width: 1.1%;
aspect-ratio: 1;
translate: -50% -50%;
background:
linear-gradient(90deg, rgba(255, 255, 255, 0), #FFFFFF 50%, rgba(255, 255, 255, 0)) center / 100% 9% no-repeat,
linear-gradient(0deg, rgba(255, 255, 255, 0), #FFFFFF 50%, rgba(255, 255, 255, 0)) center / 9% 100% no-repeat,
radial-gradient(circle, #FFFFFF 0 9%, rgba(220, 248, 255, .65) 20%, rgba(220, 248, 255, 0) 46%);
animation: ajf-sparkle var(--t) ease-in-out var(--dl) infinite;
}
.ajf-sparkle.is-night { width: .9%; opacity: .8; }
.ajf-fx--m .ajf-sparkle { width: 2.6%; }
/* ── 8. Mist (very low opacity, in front of the skyline) ────────────────────────────── */
.ajf-mist {
left: var(--x);
top: var(--y);
width: var(--w);
height: var(--h);
translate: -50% -50%;
border-radius: 50%;
animation: ajf-mist var(--t) ease-in-out infinite alternate;
}
.ajf-mist.ajf-night { background: radial-gradient(closest-side, rgba(150, 180, 226, .2), rgba(150, 180, 226, .08) 55%, rgba(150, 180, 226, 0)); }
.ajf-mist.ajf-day { background: radial-gradient(closest-side, rgba(255, 255, 255, .3), rgba(255, 255, 255, .1) 55%, rgba(255, 255, 255, 0)); }
/* ── 9. Motion ──────────────────────────────────────────────────────────────────────── */
@keyframes ajf-dusk { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes ajf-dawn { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes ajf-twinkle { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
@keyframes ajf-drift { from { transform: translateX(calc(var(--ajf-drift) * -1)); } to { transform: translateX(var(--ajf-drift)); } }
@keyframes ajf-rays { from { transform: rotate(-4deg); opacity: .45; } to { transform: rotate(4deg); opacity: .8; } }
@keyframes ajf-flap { from { transform: scaleY(1); } to { transform: scaleY(.42); } }
@keyframes ajf-fly { 0% { transform: translateX(0); opacity: 0; } 5% { opacity: .92; } 56% { opacity: .92; } 61%, 100% { transform: translateX(100%); opacity: 0; } }
@keyframes ajf-fly-rev { 0% { transform: translateX(100%); opacity: 0; } 5% { opacity: .92; } 56% { opacity: .92; } 61%, 100% { transform: translateX(0); opacity: 0; } }
@keyframes ajf-glint { 0% { opacity: 0; transform: translateX(-12px) scaleX(.7); } 45% { opacity: .9; transform: translateX(0) scaleX(1); } 100% { opacity: 0; transform: translateX(12px) scaleX(.8); } }
@keyframes ajf-moonpath { from { opacity: .35; transform: scaleX(.82); } to { opacity: .85; transform: scaleX(1.08); } }
@keyframes ajf-sparkle { 0%, 100% { opacity: .15; transform: scale(.35) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(8deg); } }
@keyframes ajf-mist { from { transform: translateX(-3%); } to { transform: translateX(3%); } }
/* Scroll depth. The band moves up the screen while the page scrolls down, and the timeline runs 0 -> 1
meanwhile. Layers behind the temples shift DOWN within the band (they lag, so they move slower than
the page); the mist in front shifts up (it moves a little faster than the page). */
@keyframes ajf-rise { from { transform: translateY(calc(var(--depth, 0) * -1.2px)); } to { transform: translateY(calc(var(--depth, 0) * 1.2px)); } }
@keyframes ajf-rise-front { from { transform: translateY(calc(var(--depth, 0) * 1.2px)); } to { transform: translateY(calc(var(--depth, 0) * -1.2px)); } }
/* Scroll depth (tablet and desktop): sky layers move a little slower than the page.
The footer clips its oversized watermark with overflow: hidden (design-system.css). That also makes it a
scroll container, and a view() timeline measures the nearest one: the footer itself, which never
scrolls, so the timeline would stay still. overflow: clip clips the same way without being a scroll
container; display: flow-root keeps the block formatting context that overflow: hidden gave. */
@supports (animation-timeline: view()) and (overflow: clip) {
.ajf { overflow: clip; display: flow-root; }
}
@supports (animation-timeline: view()) {
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
.ajf-skyline { view-timeline: --ajf-band block; }
.ajf-par { animation: ajf-rise linear both; animation-timeline: --ajf-band; animation-range: cover 0% cover 100%; }
.ajf-par.ajf-fx-mist { animation-name: ajf-rise-front; }
}
}
/* Phones: fewer moving parts (no light rays, mist holds still). */
@media (max-width: 639.98px) {
.ajf-fx .ajf-sun-rays { display: none; }
.ajf-fx .ajf-mist { animation: none; }
}
/* Offscreen or hidden tab: everything stops (every animated class of the scene; no universal subject, see above). */
.ajf-skyline:not(.is-visible) .ajf-fx :is(.ajf-par, .ajf-sun-rays, .ajf-star, .ajf-cloud, .ajf-flock, .ajf-bird, .ajf-glint, .ajf-moonpath, .ajf-sparkle, .ajf-mist),
html.is-hidden .ajf-fx :is(.ajf-par, .ajf-sun-rays, .ajf-star, .ajf-cloud, .ajf-flock, .ajf-bird, .ajf-glint, .ajf-moonpath, .ajf-sparkle, .ajf-mist) { animation-play-state: paused !important; }
/* Reduced motion: a still scene (birds resting, light on the water held), instant theme change. */
@media (prefers-reduced-motion: reduce) {
.ajf-fx *, .ajf-skyline::after, .ajf-dusk { animation: none !important; transition: none !important; }
.ajf-flight { display: none; }
.ajf-perch { display: block; }
.ajf-glint { opacity: .55; }
.ajf-moonpath { opacity: .6; }
.ajf-sparkle { opacity: .75; transform: scale(.8); }
}
/* ── 10. Page accents (restrained): Angkor Wat mark, theme-coloured ─────────────────── */
:root { --kh-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 536 284' width='536' height='284'%3E%3Cpath fill='%23000' d='M0.0 273.8 L0.0 283.0 L0.8 283.8 L535.0 283.8 L535.8 283.0 L535.8 273.8 L530.5 268.2 L525.8 268.0 L524.2 267.0 L520.8 260.5 L515.8 256.5 L512.8 250.5 L511.0 249.0 L509.0 250.5 L506.0 256.5 L501.0 260.5 L497.5 267.8 L491.8 268.0 L488.0 270.0 L453.8 270.0 L452.8 269.0 L452.8 265.8 L451.5 264.2 L444.0 263.5 L443.8 240.8 L444.8 236.8 L437.2 229.2 L450.0 228.8 L451.5 227.5 L451.8 216.8 L453.2 213.0 L451.2 211.5 L452.2 209.0 L450.8 207.0 L448.8 199.0 L450.8 194.8 L448.8 192.0 L448.8 189.8 L446.2 183.8 L447.8 180.8 L445.8 178.0 L444.8 172.8 L442.8 170.0 L443.8 166.8 L440.8 158.5 L438.2 155.8 L438.8 150.8 L435.8 145.5 L431.8 141.5 L429.0 143.5 L425.0 150.8 L425.0 156.0 L422.0 159.8 L420.0 165.8 L420.5 169.8 L416.0 180.8 L417.0 184.0 L415.0 187.8 L415.0 191.0 L413.0 194.8 L415.0 198.0 L413.0 201.8 L413.0 206.0 L411.0 208.8 L412.0 211.0 L410.0 213.8 L412.0 216.8 L412.0 225.0 L411.0 226.0 L390.0 225.5 L389.8 211.8 L384.5 205.2 L380.0 204.5 L379.8 189.8 L373.2 183.2 L390.0 182.8 L391.5 181.5 L391.8 165.8 L394.5 162.5 L394.8 160.8 L391.8 157.0 L393.2 154.0 L390.8 151.0 L389.8 143.8 L388.8 142.0 L388.8 140.8 L391.2 137.0 L388.8 134.0 L387.8 126.8 L385.8 124.0 L388.2 120.0 L385.8 116.0 L385.8 112.8 L382.8 107.0 L384.2 103.0 L378.8 90.0 L379.8 85.8 L376.5 77.2 L372.8 72.0 L373.8 70.0 L372.8 64.8 L369.8 59.5 L365.0 55.0 L361.0 58.5 L357.0 65.8 L357.0 72.0 L353.0 78.8 L350.5 86.0 L351.5 89.8 L349.0 93.8 L348.0 99.0 L346.0 102.8 L347.5 106.8 L345.0 110.8 L344.0 117.0 L342.0 119.8 L344.0 124.0 L342.0 127.8 L341.0 134.0 L339.0 136.8 L339.0 138.0 L341.5 141.8 L340.0 144.8 L340.0 151.0 L337.5 154.0 L339.0 157.0 L336.0 159.8 L336.0 163.0 L338.0 165.8 L338.0 180.0 L337.0 181.0 L311.0 180.5 L310.8 174.8 L309.8 173.2 L306.0 171.0 L303.2 170.8 L301.8 169.0 L301.8 148.8 L305.5 145.5 L305.8 142.8 L301.2 137.8 L303.2 135.0 L299.8 131.0 L299.8 123.8 L297.8 120.0 L300.8 117.5 L301.2 116.0 L298.8 113.0 L297.8 105.8 L295.8 102.0 L295.8 100.8 L298.2 97.0 L295.8 93.0 L294.8 86.8 L292.2 82.8 L294.8 78.8 L291.8 73.0 L290.8 67.8 L287.8 63.0 L289.8 58.8 L285.8 48.5 L282.8 44.0 L284.2 40.0 L280.8 30.8 L276.8 25.0 L277.8 23.0 L276.8 17.8 L273.8 11.5 L268.2 6.0 L266.2 7.0 L262.0 11.5 L258.0 20.8 L259.0 25.0 L255.2 30.2 L251.5 40.0 L253.0 44.0 L250.0 48.5 L246.0 58.8 L248.0 63.0 L245.0 67.8 L244.0 73.0 L241.0 78.8 L243.5 82.8 L241.0 86.8 L240.0 93.0 L237.5 97.0 L239.8 100.2 L240.0 102.0 L238.0 105.8 L237.0 113.0 L234.5 116.0 L235.0 117.5 L238.0 119.8 L236.0 123.8 L236.0 131.0 L232.5 135.0 L234.5 137.8 L230.0 142.8 L230.2 145.5 L234.0 148.8 L234.0 169.0 L232.5 170.8 L229.8 171.0 L226.0 173.2 L225.0 174.8 L224.5 180.8 L198.8 181.0 L197.8 180.0 L197.8 165.8 L199.8 163.0 L199.8 159.8 L196.8 157.0 L198.2 154.0 L195.8 151.0 L195.8 144.8 L194.2 141.8 L196.5 138.5 L196.8 136.8 L194.8 134.0 L193.8 127.8 L191.8 124.0 L193.8 119.8 L191.8 117.0 L190.8 110.8 L188.2 106.8 L189.8 102.8 L187.8 99.0 L186.8 93.8 L184.2 89.8 L185.2 86.0 L182.8 78.8 L178.8 72.0 L178.8 65.8 L174.8 58.5 L170.8 55.0 L166.0 59.5 L163.0 64.8 L162.0 67.8 L163.0 72.0 L159.2 77.2 L156.0 85.8 L157.0 90.0 L151.5 103.0 L153.0 107.0 L150.0 112.8 L150.0 116.0 L147.5 120.0 L150.0 124.0 L148.0 126.8 L147.0 134.0 L144.5 137.0 L146.8 140.2 L147.0 142.0 L146.0 143.8 L145.0 151.0 L142.5 154.0 L144.0 157.0 L141.0 160.8 L141.2 162.5 L144.0 165.8 L144.2 181.5 L145.8 182.8 L162.5 183.2 L156.0 189.8 L155.8 204.5 L151.2 205.2 L146.0 211.8 L145.8 225.5 L124.8 226.0 L123.8 225.0 L123.8 216.8 L125.8 213.8 L123.8 211.0 L124.8 208.8 L122.8 206.0 L122.8 201.8 L120.8 198.0 L122.8 194.8 L120.8 191.0 L120.8 187.8 L118.8 184.0 L119.8 180.8 L115.2 169.8 L115.8 165.8 L113.8 159.8 L110.8 156.0 L110.8 150.8 L106.8 143.5 L104.0 141.5 L100.0 145.5 L97.0 150.8 L97.5 155.8 L95.0 158.5 L92.0 166.8 L93.0 170.0 L91.0 172.8 L90.0 178.0 L88.0 180.8 L89.5 183.8 L87.0 189.8 L87.0 192.0 L85.0 194.8 L87.0 199.0 L85.0 207.0 L83.5 209.0 L84.5 211.5 L82.5 213.0 L84.0 216.8 L84.2 227.5 L85.8 228.8 L98.5 229.2 L91.0 236.8 L92.0 240.8 L91.8 263.5 L84.2 264.2 L83.0 265.8 L83.0 269.0 L82.0 270.0 L47.8 270.0 L44.0 268.0 L38.2 267.8 L34.8 260.5 L29.8 256.5 L26.8 250.5 L24.8 249.0 L23.0 250.5 L20.0 256.5 L15.0 260.5 L12.0 266.5 L10.0 268.0 L5.2 268.2 Z'/%3E%3C/svg%3E"); --kh-mark-panel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 536 420'%3E%3Cdefs%3E%3ClinearGradient id='r' x1='0' y1='290' x2='0' y2='420' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23000' stop-opacity='.42'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='h' x1='0' x2='1'%3E%3Cstop offset='0' stop-opacity='0'/%3E%3Cstop offset='.2' stop-opacity='.7'/%3E%3Cstop offset='.8' stop-opacity='.7'/%3E%3Cstop offset='1' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0.0 273.8 L0.0 283.0 L0.8 283.8 L535.0 283.8 L535.8 283.0 L535.8 273.8 L530.5 268.2 L525.8 268.0 L524.2 267.0 L520.8 260.5 L515.8 256.5 L512.8 250.5 L511.0 249.0 L509.0 250.5 L506.0 256.5 L501.0 260.5 L497.5 267.8 L491.8 268.0 L488.0 270.0 L453.8 270.0 L452.8 269.0 L452.8 265.8 L451.5 264.2 L444.0 263.5 L443.8 240.8 L444.8 236.8 L437.2 229.2 L450.0 228.8 L451.5 227.5 L451.8 216.8 L453.2 213.0 L451.2 211.5 L452.2 209.0 L450.8 207.0 L448.8 199.0 L450.8 194.8 L448.8 192.0 L448.8 189.8 L446.2 183.8 L447.8 180.8 L445.8 178.0 L444.8 172.8 L442.8 170.0 L443.8 166.8 L440.8 158.5 L438.2 155.8 L438.8 150.8 L435.8 145.5 L431.8 141.5 L429.0 143.5 L425.0 150.8 L425.0 156.0 L422.0 159.8 L420.0 165.8 L420.5 169.8 L416.0 180.8 L417.0 184.0 L415.0 187.8 L415.0 191.0 L413.0 194.8 L415.0 198.0 L413.0 201.8 L413.0 206.0 L411.0 208.8 L412.0 211.0 L410.0 213.8 L412.0 216.8 L412.0 225.0 L411.0 226.0 L390.0 225.5 L389.8 211.8 L384.5 205.2 L380.0 204.5 L379.8 189.8 L373.2 183.2 L390.0 182.8 L391.5 181.5 L391.8 165.8 L394.5 162.5 L394.8 160.8 L391.8 157.0 L393.2 154.0 L390.8 151.0 L389.8 143.8 L388.8 142.0 L388.8 140.8 L391.2 137.0 L388.8 134.0 L387.8 126.8 L385.8 124.0 L388.2 120.0 L385.8 116.0 L385.8 112.8 L382.8 107.0 L384.2 103.0 L378.8 90.0 L379.8 85.8 L376.5 77.2 L372.8 72.0 L373.8 70.0 L372.8 64.8 L369.8 59.5 L365.0 55.0 L361.0 58.5 L357.0 65.8 L357.0 72.0 L353.0 78.8 L350.5 86.0 L351.5 89.8 L349.0 93.8 L348.0 99.0 L346.0 102.8 L347.5 106.8 L345.0 110.8 L344.0 117.0 L342.0 119.8 L344.0 124.0 L342.0 127.8 L341.0 134.0 L339.0 136.8 L339.0 138.0 L341.5 141.8 L340.0 144.8 L340.0 151.0 L337.5 154.0 L339.0 157.0 L336.0 159.8 L336.0 163.0 L338.0 165.8 L338.0 180.0 L337.0 181.0 L311.0 180.5 L310.8 174.8 L309.8 173.2 L306.0 171.0 L303.2 170.8 L301.8 169.0 L301.8 148.8 L305.5 145.5 L305.8 142.8 L301.2 137.8 L303.2 135.0 L299.8 131.0 L299.8 123.8 L297.8 120.0 L300.8 117.5 L301.2 116.0 L298.8 113.0 L297.8 105.8 L295.8 102.0 L295.8 100.8 L298.2 97.0 L295.8 93.0 L294.8 86.8 L292.2 82.8 L294.8 78.8 L291.8 73.0 L290.8 67.8 L287.8 63.0 L289.8 58.8 L285.8 48.5 L282.8 44.0 L284.2 40.0 L280.8 30.8 L276.8 25.0 L277.8 23.0 L276.8 17.8 L273.8 11.5 L268.2 6.0 L266.2 7.0 L262.0 11.5 L258.0 20.8 L259.0 25.0 L255.2 30.2 L251.5 40.0 L253.0 44.0 L250.0 48.5 L246.0 58.8 L248.0 63.0 L245.0 67.8 L244.0 73.0 L241.0 78.8 L243.5 82.8 L241.0 86.8 L240.0 93.0 L237.5 97.0 L239.8 100.2 L240.0 102.0 L238.0 105.8 L237.0 113.0 L234.5 116.0 L235.0 117.5 L238.0 119.8 L236.0 123.8 L236.0 131.0 L232.5 135.0 L234.5 137.8 L230.0 142.8 L230.2 145.5 L234.0 148.8 L234.0 169.0 L232.5 170.8 L229.8 171.0 L226.0 173.2 L225.0 174.8 L224.5 180.8 L198.8 181.0 L197.8 180.0 L197.8 165.8 L199.8 163.0 L199.8 159.8 L196.8 157.0 L198.2 154.0 L195.8 151.0 L195.8 144.8 L194.2 141.8 L196.5 138.5 L196.8 136.8 L194.8 134.0 L193.8 127.8 L191.8 124.0 L193.8 119.8 L191.8 117.0 L190.8 110.8 L188.2 106.8 L189.8 102.8 L187.8 99.0 L186.8 93.8 L184.2 89.8 L185.2 86.0 L182.8 78.8 L178.8 72.0 L178.8 65.8 L174.8 58.5 L170.8 55.0 L166.0 59.5 L163.0 64.8 L162.0 67.8 L163.0 72.0 L159.2 77.2 L156.0 85.8 L157.0 90.0 L151.5 103.0 L153.0 107.0 L150.0 112.8 L150.0 116.0 L147.5 120.0 L150.0 124.0 L148.0 126.8 L147.0 134.0 L144.5 137.0 L146.8 140.2 L147.0 142.0 L146.0 143.8 L145.0 151.0 L142.5 154.0 L144.0 157.0 L141.0 160.8 L141.2 162.5 L144.0 165.8 L144.2 181.5 L145.8 182.8 L162.5 183.2 L156.0 189.8 L155.8 204.5 L151.2 205.2 L146.0 211.8 L145.8 225.5 L124.8 226.0 L123.8 225.0 L123.8 216.8 L125.8 213.8 L123.8 211.0 L124.8 208.8 L122.8 206.0 L122.8 201.8 L120.8 198.0 L122.8 194.8 L120.8 191.0 L120.8 187.8 L118.8 184.0 L119.8 180.8 L115.2 169.8 L115.8 165.8 L113.8 159.8 L110.8 156.0 L110.8 150.8 L106.8 143.5 L104.0 141.5 L100.0 145.5 L97.0 150.8 L97.5 155.8 L95.0 158.5 L92.0 166.8 L93.0 170.0 L91.0 172.8 L90.0 178.0 L88.0 180.8 L89.5 183.8 L87.0 189.8 L87.0 192.0 L85.0 194.8 L87.0 199.0 L85.0 207.0 L83.5 209.0 L84.5 211.5 L82.5 213.0 L84.0 216.8 L84.2 227.5 L85.8 228.8 L98.5 229.2 L91.0 236.8 L92.0 240.8 L91.8 263.5 L84.2 264.2 L83.0 265.8 L83.0 269.0 L82.0 270.0 L47.8 270.0 L44.0 268.0 L38.2 267.8 L34.8 260.5 L29.8 256.5 L26.8 250.5 L24.8 249.0 L23.0 250.5 L20.0 256.5 L15.0 260.5 L12.0 266.5 L10.0 268.0 L5.2 268.2 Z'/%3E%3Crect x='0' y='287' width='536' height='2' fill='url(%23h)'/%3E%3Cpath d='M0.0 273.8 L0.0 283.0 L0.8 283.8 L535.0 283.8 L535.8 283.0 L535.8 273.8 L530.5 268.2 L525.8 268.0 L524.2 267.0 L520.8 260.5 L515.8 256.5 L512.8 250.5 L511.0 249.0 L509.0 250.5 L506.0 256.5 L501.0 260.5 L497.5 267.8 L491.8 268.0 L488.0 270.0 L453.8 270.0 L452.8 269.0 L452.8 265.8 L451.5 264.2 L444.0 263.5 L443.8 240.8 L444.8 236.8 L437.2 229.2 L450.0 228.8 L451.5 227.5 L451.8 216.8 L453.2 213.0 L451.2 211.5 L452.2 209.0 L450.8 207.0 L448.8 199.0 L450.8 194.8 L448.8 192.0 L448.8 189.8 L446.2 183.8 L447.8 180.8 L445.8 178.0 L444.8 172.8 L442.8 170.0 L443.8 166.8 L440.8 158.5 L438.2 155.8 L438.8 150.8 L435.8 145.5 L431.8 141.5 L429.0 143.5 L425.0 150.8 L425.0 156.0 L422.0 159.8 L420.0 165.8 L420.5 169.8 L416.0 180.8 L417.0 184.0 L415.0 187.8 L415.0 191.0 L413.0 194.8 L415.0 198.0 L413.0 201.8 L413.0 206.0 L411.0 208.8 L412.0 211.0 L410.0 213.8 L412.0 216.8 L412.0 225.0 L411.0 226.0 L390.0 225.5 L389.8 211.8 L384.5 205.2 L380.0 204.5 L379.8 189.8 L373.2 183.2 L390.0 182.8 L391.5 181.5 L391.8 165.8 L394.5 162.5 L394.8 160.8 L391.8 157.0 L393.2 154.0 L390.8 151.0 L389.8 143.8 L388.8 142.0 L388.8 140.8 L391.2 137.0 L388.8 134.0 L387.8 126.8 L385.8 124.0 L388.2 120.0 L385.8 116.0 L385.8 112.8 L382.8 107.0 L384.2 103.0 L378.8 90.0 L379.8 85.8 L376.5 77.2 L372.8 72.0 L373.8 70.0 L372.8 64.8 L369.8 59.5 L365.0 55.0 L361.0 58.5 L357.0 65.8 L357.0 72.0 L353.0 78.8 L350.5 86.0 L351.5 89.8 L349.0 93.8 L348.0 99.0 L346.0 102.8 L347.5 106.8 L345.0 110.8 L344.0 117.0 L342.0 119.8 L344.0 124.0 L342.0 127.8 L341.0 134.0 L339.0 136.8 L339.0 138.0 L341.5 141.8 L340.0 144.8 L340.0 151.0 L337.5 154.0 L339.0 157.0 L336.0 159.8 L336.0 163.0 L338.0 165.8 L338.0 180.0 L337.0 181.0 L311.0 180.5 L310.8 174.8 L309.8 173.2 L306.0 171.0 L303.2 170.8 L301.8 169.0 L301.8 148.8 L305.5 145.5 L305.8 142.8 L301.2 137.8 L303.2 135.0 L299.8 131.0 L299.8 123.8 L297.8 120.0 L300.8 117.5 L301.2 116.0 L298.8 113.0 L297.8 105.8 L295.8 102.0 L295.8 100.8 L298.2 97.0 L295.8 93.0 L294.8 86.8 L292.2 82.8 L294.8 78.8 L291.8 73.0 L290.8 67.8 L287.8 63.0 L289.8 58.8 L285.8 48.5 L282.8 44.0 L284.2 40.0 L280.8 30.8 L276.8 25.0 L277.8 23.0 L276.8 17.8 L273.8 11.5 L268.2 6.0 L266.2 7.0 L262.0 11.5 L258.0 20.8 L259.0 25.0 L255.2 30.2 L251.5 40.0 L253.0 44.0 L250.0 48.5 L246.0 58.8 L248.0 63.0 L245.0 67.8 L244.0 73.0 L241.0 78.8 L243.5 82.8 L241.0 86.8 L240.0 93.0 L237.5 97.0 L239.8 100.2 L240.0 102.0 L238.0 105.8 L237.0 113.0 L234.5 116.0 L235.0 117.5 L238.0 119.8 L236.0 123.8 L236.0 131.0 L232.5 135.0 L234.5 137.8 L230.0 142.8 L230.2 145.5 L234.0 148.8 L234.0 169.0 L232.5 170.8 L229.8 171.0 L226.0 173.2 L225.0 174.8 L224.5 180.8 L198.8 181.0 L197.8 180.0 L197.8 165.8 L199.8 163.0 L199.8 159.8 L196.8 157.0 L198.2 154.0 L195.8 151.0 L195.8 144.8 L194.2 141.8 L196.5 138.5 L196.8 136.8 L194.8 134.0 L193.8 127.8 L191.8 124.0 L193.8 119.8 L191.8 117.0 L190.8 110.8 L188.2 106.8 L189.8 102.8 L187.8 99.0 L186.8 93.8 L184.2 89.8 L185.2 86.0 L182.8 78.8 L178.8 72.0 L178.8 65.8 L174.8 58.5 L170.8 55.0 L166.0 59.5 L163.0 64.8 L162.0 67.8 L163.0 72.0 L159.2 77.2 L156.0 85.8 L157.0 90.0 L151.5 103.0 L153.0 107.0 L150.0 112.8 L150.0 116.0 L147.5 120.0 L150.0 124.0 L148.0 126.8 L147.0 134.0 L144.5 137.0 L146.8 140.2 L147.0 142.0 L146.0 143.8 L145.0 151.0 L142.5 154.0 L144.0 157.0 L141.0 160.8 L141.2 162.5 L144.0 165.8 L144.2 181.5 L145.8 182.8 L162.5 183.2 L156.0 189.8 L155.8 204.5 L151.2 205.2 L146.0 211.8 L145.8 225.5 L124.8 226.0 L123.8 225.0 L123.8 216.8 L125.8 213.8 L123.8 211.0 L124.8 208.8 L122.8 206.0 L122.8 201.8 L120.8 198.0 L122.8 194.8 L120.8 191.0 L120.8 187.8 L118.8 184.0 L119.8 180.8 L115.2 169.8 L115.8 165.8 L113.8 159.8 L110.8 156.0 L110.8 150.8 L106.8 143.5 L104.0 141.5 L100.0 145.5 L97.0 150.8 L97.5 155.8 L95.0 158.5 L92.0 166.8 L93.0 170.0 L91.0 172.8 L90.0 178.0 L88.0 180.8 L89.5 183.8 L87.0 189.8 L87.0 192.0 L85.0 194.8 L87.0 199.0 L85.0 207.0 L83.5 209.0 L84.5 211.5 L82.5 213.0 L84.0 216.8 L84.2 227.5 L85.8 228.8 L98.5 229.2 L91.0 236.8 L92.0 240.8 L91.8 263.5 L84.2 264.2 L83.0 265.8 L83.0 269.0 L82.0 270.0 L47.8 270.0 L44.0 268.0 L38.2 267.8 L34.8 260.5 L29.8 256.5 L26.8 250.5 L24.8 249.0 L23.0 250.5 L20.0 256.5 L15.0 260.5 L12.0 266.5 L10.0 268.0 L5.2 268.2 Z' fill='url(%23r)' transform='translate(0 292) scale(1 -.46) translate(0 -284)'/%3E%3C/svg%3E"); }
@media (min-width: 640px) {
body[data-page="home"] :is(#premium-accounts, #all-games) > .ds-section-head { position: relative; }
body[data-page="home"] :is(#premium-accounts, #all-games) > .ds-section-head::after {
content: "";
position: absolute;
right: 0;
bottom: 2px;
width: 104px;
height: 55px;
background: var(--kh-accent);
-webkit-mask: var(--kh-mark) right bottom / contain no-repeat;
mask: var(--kh-mark) right bottom / contain no-repeat;
pointer-events: none;
}
}
@media (min-width: 768px) {
body[data-page="premium.show"] .ds-breadcrumb { position: relative; }
body[data-page="premium.show"] .ds-breadcrumb::after {
content: "";
position: absolute;
right: 0;
bottom: -6px;
width: 84px;
height: 44px;
background: var(--kh-accent);
-webkit-mask: var(--kh-mark) right bottom / contain no-repeat;
mask: var(--kh-mark) right bottom / contain no-repeat;
pointer-events: none;
}
}
/* Game page (CSS only, the view belongs to another workstream): the empty left column below the
game card holds a quiet Angkor Wat with its reflection, sticky while the order form scrolls.
It never makes the page taller (design review L2), on every game, whatever its package count. */
@media (min-width: 1024px) {
/* clip a panel that does not fit, so it never paints below the column (24 px keeps the card shadow) */
body[data-page="game.show"] #main-content .lg\:col-span-4:has(+ .lg\:col-span-8 #orderForm) {
clip-path: inset(-100vmax -100vmax -24px -100vmax);
}
body[data-page="game.show"] #main-content .lg\:col-span-4:has(+ .lg\:col-span-8 #orderForm)::after {
content: "";
position: sticky;
top: 100px; /* + the 40 px gap above the drawing: the drawing sticks at 140 px */
display: block;
box-sizing: content-box; /* width and aspect-ratio size the drawing; the gap comes on top */
width: 78%;
aspect-ratio: 536 / 420;
/* The 40 px gap under the game card is padding (masked out), not a top margin: with a margin, Chrome
stopped painting the sticky panel once the page had been scrolled to its end. */
padding-top: 40px;
margin: 0 auto;
/* adds no height (design review L2): cancels the 40 px gap and the drawing's own height;
% margins and the 78 % width both use the column width */
margin-bottom: calc(-40px - 78% * 420 / 536);
background: var(--kh-accent-strong, var(--kh-accent));
-webkit-mask: var(--kh-mark-panel) center top / contain no-repeat;
mask: var(--kh-mark-panel) center top / contain no-repeat;
-webkit-mask-origin: content-box;
mask-origin: content-box;
-webkit-mask-clip: content-box;
mask-clip: content-box;
pointer-events: none;
}
}
/* Generated by art/build_fx.py: cloud and bird shapes (SVG data URIs). */
.ajf-skyline {
--ajf-cloud-d0: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 90'%3E%3Cdefs%3E%3CradialGradient id='p'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.62' stop-color='%23fff' stop-opacity='.92'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='c' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='.25' stop-color='%23FFFFFF'/%3E%3Cstop offset='.62' stop-color='%23EEF6FF'/%3E%3Cstop offset='.9' stop-color='%23CFE2F7'/%3E%3C/linearGradient%3E%3Cmask id='m'%3E%3Cellipse cx='120' cy='70' rx='108' ry='13' fill='url(%23p)'/%3E%3Cellipse cx='44' cy='62' rx='24' ry='17' fill='url(%23p)'/%3E%3Cellipse cx='72' cy='52' rx='30' ry='26' fill='url(%23p)'/%3E%3Cellipse cx='104' cy='42' rx='34' ry='32' fill='url(%23p)'/%3E%3Cellipse cx='138' cy='38' rx='36' ry='34' fill='url(%23p)'/%3E%3Cellipse cx='170' cy='48' rx='30' ry='27' fill='url(%23p)'/%3E%3Cellipse cx='198' cy='60' rx='24' ry='18' fill='url(%23p)'/%3E%3Cellipse cx='120' cy='62' rx='84' ry='18' fill='url(%23p)'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='240' height='90' fill='url(%23c)' mask='url(%23m)' opacity='0.97'/%3E%3C/svg%3E");
--ajf-cloud-d1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 90'%3E%3Cdefs%3E%3CradialGradient id='p'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.62' stop-color='%23fff' stop-opacity='.92'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='c' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='.25' stop-color='%23FFFFFF'/%3E%3Cstop offset='.62' stop-color='%23EEF6FF'/%3E%3Cstop offset='.9' stop-color='%23CFE2F7'/%3E%3C/linearGradient%3E%3Cmask id='m'%3E%3Cellipse cx='116' cy='72' rx='92' ry='12' fill='url(%23p)'/%3E%3Cellipse cx='52' cy='64' rx='22' ry='14' fill='url(%23p)'/%3E%3Cellipse cx='78' cy='54' rx='28' ry='23' fill='url(%23p)'/%3E%3Cellipse cx='110' cy='44' rx='32' ry='31' fill='url(%23p)'/%3E%3Cellipse cx='146' cy='50' rx='30' ry='26' fill='url(%23p)'/%3E%3Cellipse cx='176' cy='62' rx='22' ry='15' fill='url(%23p)'/%3E%3Cellipse cx='116' cy='64' rx='70' ry='15' fill='url(%23p)'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='240' height='90' fill='url(%23c)' mask='url(%23m)' opacity='0.97'/%3E%3C/svg%3E");
--ajf-cloud-d2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 90'%3E%3Cdefs%3E%3CradialGradient id='p'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.62' stop-color='%23fff' stop-opacity='.92'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='c' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='.25' stop-color='%23FFFFFF'/%3E%3Cstop offset='.62' stop-color='%23EEF6FF'/%3E%3Cstop offset='.9' stop-color='%23CFE2F7'/%3E%3C/linearGradient%3E%3Cmask id='m'%3E%3Cellipse cx='124' cy='66' rx='116' ry='10' fill='url(%23p)'/%3E%3Cellipse cx='40' cy='62' rx='22' ry='11' fill='url(%23p)'/%3E%3Cellipse cx='76' cy='56' rx='30' ry='16' fill='url(%23p)'/%3E%3Cellipse cx='118' cy='52' rx='36' ry='19' fill='url(%23p)'/%3E%3Cellipse cx='160' cy='56' rx='32' ry='16' fill='url(%23p)'/%3E%3Cellipse cx='200' cy='62' rx='24' ry='11' fill='url(%23p)'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='240' height='90' fill='url(%23c)' mask='url(%23m)' opacity='0.97'/%3E%3C/svg%3E");
--ajf-cloud-n0: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 90'%3E%3Cdefs%3E%3CradialGradient id='p'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.62' stop-color='%23fff' stop-opacity='.92'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='c' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='.18' stop-color='%233E5B88'/%3E%3Cstop offset='.42' stop-color='%2321375A'/%3E%3Cstop offset='.9' stop-color='%23152641'/%3E%3C/linearGradient%3E%3Cmask id='m'%3E%3Cellipse cx='120' cy='70' rx='108' ry='13' fill='url(%23p)'/%3E%3Cellipse cx='44' cy='62' rx='24' ry='17' fill='url(%23p)'/%3E%3Cellipse cx='72' cy='52' rx='30' ry='26' fill='url(%23p)'/%3E%3Cellipse cx='104' cy='42' rx='34' ry='32' fill='url(%23p)'/%3E%3Cellipse cx='138' cy='38' rx='36' ry='34' fill='url(%23p)'/%3E%3Cellipse cx='170' cy='48' rx='30' ry='27' fill='url(%23p)'/%3E%3Cellipse cx='198' cy='60' rx='24' ry='18' fill='url(%23p)'/%3E%3Cellipse cx='120' cy='62' rx='84' ry='18' fill='url(%23p)'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='240' height='90' fill='url(%23c)' mask='url(%23m)' opacity='0.82'/%3E%3C/svg%3E");
--ajf-cloud-n1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 90'%3E%3Cdefs%3E%3CradialGradient id='p'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.62' stop-color='%23fff' stop-opacity='.92'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='c' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='.18' stop-color='%233E5B88'/%3E%3Cstop offset='.42' stop-color='%2321375A'/%3E%3Cstop offset='.9' stop-color='%23152641'/%3E%3C/linearGradient%3E%3Cmask id='m'%3E%3Cellipse cx='116' cy='72' rx='92' ry='12' fill='url(%23p)'/%3E%3Cellipse cx='52' cy='64' rx='22' ry='14' fill='url(%23p)'/%3E%3Cellipse cx='78' cy='54' rx='28' ry='23' fill='url(%23p)'/%3E%3Cellipse cx='110' cy='44' rx='32' ry='31' fill='url(%23p)'/%3E%3Cellipse cx='146' cy='50' rx='30' ry='26' fill='url(%23p)'/%3E%3Cellipse cx='176' cy='62' rx='22' ry='15' fill='url(%23p)'/%3E%3Cellipse cx='116' cy='64' rx='70' ry='15' fill='url(%23p)'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='240' height='90' fill='url(%23c)' mask='url(%23m)' opacity='0.82'/%3E%3C/svg%3E");
--ajf-cloud-n2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 90'%3E%3Cdefs%3E%3CradialGradient id='p'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.62' stop-color='%23fff' stop-opacity='.92'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='c' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='.18' stop-color='%233E5B88'/%3E%3Cstop offset='.42' stop-color='%2321375A'/%3E%3Cstop offset='.9' stop-color='%23152641'/%3E%3C/linearGradient%3E%3Cmask id='m'%3E%3Cellipse cx='124' cy='66' rx='116' ry='10' fill='url(%23p)'/%3E%3Cellipse cx='40' cy='62' rx='22' ry='11' fill='url(%23p)'/%3E%3Cellipse cx='76' cy='56' rx='30' ry='16' fill='url(%23p)'/%3E%3Cellipse cx='118' cy='52' rx='36' ry='19' fill='url(%23p)'/%3E%3Cellipse cx='160' cy='56' rx='32' ry='16' fill='url(%23p)'/%3E%3Cellipse cx='200' cy='62' rx='24' ry='11' fill='url(%23p)'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='240' height='90' fill='url(%23c)' mask='url(%23m)' opacity='0.82'/%3E%3C/svg%3E");
--ajf-bird: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 10'%3E%3Cpath fill='%232B5FD6' d='M0 4.8C3.6 1.1 7.7 1.3 12 6.1C16.3 1.3 20.4 1.1 24 4.8C20.3 3.3 16.2 4.3 12 8.9C7.8 4.3 3.7 3.3 0 4.8Z'/%3E%3C/svg%3E");
--ajf-rays: conic-gradient(from 0deg, rgba(255,236,196,0) 0deg 112deg, rgba(255,236,196,0) 112deg, rgba(255,236,196,.55) 114.5deg, rgba(255,236,196,0) 117deg, rgba(255,236,196,0) 126deg, rgba(255,236,196,.55) 127.5deg, rgba(255,236,196,0) 129deg, rgba(255,236,196,0) 141deg, rgba(255,236,196,.55) 144.0deg, rgba(255,236,196,0) 147deg, rgba(255,236,196,0) 155deg, rgba(255,236,196,.55) 157.0deg, rgba(255,236,196,0) 159deg, rgba(255,236,196,0) 172deg, rgba(255,236,196,.55) 174.5deg, rgba(255,236,196,0) 177deg, rgba(255,236,196,0) 186deg, rgba(255,236,196,.55) 187.5deg, rgba(255,236,196,0) 189deg, rgba(255,236,196,0) 200deg, rgba(255,236,196,.55) 203.0deg, rgba(255,236,196,0) 206deg, rgba(255,236,196,0) 214deg, rgba(255,236,196,.55) 216.0deg, rgba(255,236,196,0) 218deg, rgba(255,236,196,0) 230deg, rgba(255,236,196,.55) 232.5deg, rgba(255,236,196,0) 235deg, rgba(255,236,196,0) 235deg 360deg);
}