/* ============================================================================= CasesTrain — ambient backgrounds ----------------------------------------------------------------------------- Each game's world moves very slowly behind the screen: survey contours drift, colonies breathe, the sun crosses the province, swell rolls across the chart, light and particles move through the habitat. Markup is one element with two layers, injected by main.js for the app and placed inside each world on the landing page: Colours follow --ac from [data-game] on any ancestor. Only transform and opacity animate, so the layers stay on the compositor during a timed run. Cycles are long (20 s to 3 min) on purpose: felt, not watched. ========================================================================== */ :root { --m-contour: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cpath d='M141 110L144 113L144 117L143 120L139 122L134 123L130 124L126 124L123 125L120 126L116 126L113 126L109 125L106 123L102 122L99 120L96 117L96 113L97 110L100 107L103 105L105 103L105 100L106 97L108 94L111 92L116 91L120 92L124 93L128 94L131 95L134 97L136 100L137 102L138 105L139 107L141 110ZM164 110L168 117L169 124L165 130L158 135L148 136L140 137L133 137L127 139L120 142L113 143L105 143L98 140L91 137L84 133L78 129L73 123L72 117L76 110L81 105L86 100L89 96L90 91L92 84L96 77L103 73L111 72L120 73L128 76L135 78L142 81L147 85L152 89L154 95L156 100L159 105L164 110ZM187 110L193 120L194 131L188 140L176 146L162 149L149 149L139 150L130 154L120 158L109 161L97 160L86 156L76 151L66 145L57 138L51 130L50 120L55 110L63 102L70 96L73 89L75 80L77 70L83 60L94 54L107 53L120 55L132 59L142 63L152 67L161 72L167 79L171 87L175 94L180 102L187 110ZM210 110L218 123L218 138L209 150L193 158L174 160L158 161L145 163L133 169L120 175L105 179L88 178L74 173L60 165L48 157L37 147L29 136L28 123L34 110L44 100L53 91L57 82L58 70L61 55L70 42L85 34L103 33L120 37L135 43L149 49L162 54L174 60L183 69L189 79L195 89L201 99L210 110ZM234 110L243 127L242 145L231 160L210 169L186 172L166 173L151 176L137 183L120 192L100 197L80 196L61 189L45 180L30 169L17 156L8 142L7 126L14 110L26 97L36 86L40 74L41 58L45 40L56 24L76 15L98 14L120 20L138 28L155 35L171 41L186 48L199 58L208 70L215 83L224 96L234 110ZM234 530L243 547L242 565L231 580L210 589L186 592L166 593L151 596L137 603L120 612L100 617L80 616L61 609L45 600L30 589L17 576L8 562L7 546L14 530L26 517L36 506L40 494L41 478L45 460L56 444L76 435L98 434L120 440L138 448L155 455L171 461L186 468L199 478L208 490L215 503L224 516L234 530ZM654 110L663 127L662 145L651 160L630 169L606 172L586 173L571 176L557 183L540 192L520 197L500 196L481 189L465 180L450 169L437 156L428 142L427 126L434 110L446 97L456 86L460 74L461 58L465 40L476 24L496 15L518 14L540 20L558 28L575 35L591 41L606 48L619 58L628 70L635 83L644 96L654 110ZM654 530L663 547L662 565L651 580L630 589L606 592L586 593L571 596L557 603L540 612L520 617L500 616L481 609L465 600L450 589L437 576L428 562L427 546L434 530L446 517L456 506L460 494L461 478L465 460L476 444L496 435L518 434L540 440L558 448L575 455L591 461L606 468L619 478L628 490L635 503L644 516L654 530ZM259 110L268 130L266 152L251 169L226 179L198 183L175 184L157 189L140 199L120 210L96 217L71 215L49 206L30 194L13 180L-2 165L-12 147L-13 128L-5 110L8 95L18 81L23 66L24 47L28 25L43 6L67 -5L94 -4L120 4L142 14L161 22L181 28L199 36L215 48L227 62L237 77L247 93L259 110ZM259 530L268 550L266 572L251 589L226 599L198 603L175 604L157 609L140 619L120 630L96 637L71 635L49 626L30 614L13 600L-2 585L-12 567L-13 548L-5 530L8 515L18 501L23 486L24 467L28 445L43 426L67 415L94 416L120 424L142 434L161 442L181 448L199 456L215 468L227 482L237 497L247 513L259 530ZM679 110L688 130L686 152L671 169L646 179L618 183L595 184L577 189L560 199L540 210L516 217L491 215L469 206L450 194L433 180L418 165L408 147L407 128L415 110L428 95L438 81L443 66L444 47L448 25L463 6L487 -5L514 -4L540 4L562 14L581 22L601 28L619 36L635 48L647 62L657 77L667 93L679 110ZM679 530L688 550L686 572L671 589L646 599L618 603L595 604L577 609L560 619L540 630L516 637L491 635L469 626L450 614L433 600L418 585L408 567L407 548L415 530L428 515L438 501L443 486L444 467L448 445L463 426L487 415L514 416L540 424L562 434L581 442L601 448L619 456L635 468L647 482L657 497L667 513L679 530ZM346 290L345 293L341 296L337 298L334 299L332 301L330 303L327 306L324 308L320 308L316 308L312 307L308 306L305 304L302 302L300 299L301 295L302 293L302 290L301 287L300 284L299 281L300 277L303 275L308 274L312 273L316 274L320 274L324 274L327 275L330 276L333 278L335 280L339 282L342 284L345 287L346 290ZM372 290L369 297L362 302L354 305L348 308L343 312L340 317L335 322L328 326L320 327L312 326L304 324L297 322L290 318L284 313L282 307L282 301L283 295L284 290L282 285L279 278L278 271L280 264L287 259L296 257L305 257L313 258L320 258L327 259L334 260L341 262L346 266L352 269L358 273L364 277L370 283L372 290ZM397 290L392 300L382 308L370 313L361 317L355 323L350 331L343 339L332 345L320 346L308 345L296 341L285 337L275 332L267 325L263 316L263 306L265 298L265 290L262 282L258 272L256 261L260 251L270 244L284 241L298 242L309 243L320 243L331 243L341 245L351 248L360 253L368 258L378 264L387 271L395 280L397 290ZM2 290L-5 303L-19 313L-34 320L-46 326L-53 334L-59 345L-69 356L-83 364L-100 366L-117 364L-132 358L-146 352L-159 345L-169 335L-175 324L-175 311L-173 300L-174 290L-178 279L-184 266L-187 251L-181 237L-166 229L-147 226L-129 227L-114 229L-100 229L-86 228L-72 229L-58 233L-46 239L-34 247L-22 255L-10 264L-0 276L2 290ZM422 290L415 303L401 313L386 320L374 326L367 334L361 345L351 356L337 364L320 366L303 364L288 358L274 352L261 345L251 335L245 324L245 311L247 300L246 290L242 279L236 266L233 251L239 237L254 229L273 226L291 227L306 229L320 229L334 228L348 229L362 233L374 239L386 247L398 255L410 264L420 276L422 290ZM26 -130L17 -114L-1 -102L-19 -94L-32 -86L-41 -75L-49 -60L-61 -46L-79 -36L-100 -34L-121 -38L-140 -45L-157 -54L-172 -63L-185 -75L-192 -89L-193 -103L-192 -117L-194 -130L-200 -144L-208 -161L-210 -179L-201 -196L-182 -206L-159 -209L-136 -207L-117 -205L-100 -205L-83 -207L-64 -207L-47 -202L-31 -194L-16 -185L-1 -174L13 -162L24 -147L26 -130ZM26 290L17 306L-1 318L-19 326L-32 334L-41 345L-49 360L-61 374L-79 384L-100 386L-121 382L-140 375L-157 366L-172 357L-185 345L-192 331L-193 317L-192 303L-194 290L-200 276L-208 259L-210 241L-201 224L-182 214L-159 211L-136 213L-117 215L-100 215L-83 213L-64 213L-47 218L-31 226L-16 235L-1 246L13 258L24 273L26 290ZM446 -130L437 -114L419 -102L401 -94L388 -86L379 -75L371 -60L359 -46L341 -36L320 -34L299 -38L280 -45L263 -54L248 -63L235 -75L228 -89L227 -103L228 -117L226 -130L220 -144L212 -161L210 -179L219 -196L238 -206L261 -209L284 -207L303 -205L320 -205L337 -207L356 -207L373 -202L389 -194L404 -185L419 -174L433 -162L444 -147L446 -130ZM446 290L437 306L419 318L401 326L388 334L379 345L371 360L359 374L341 384L320 386L299 382L280 375L263 366L248 357L235 345L228 331L227 317L228 303L226 290L220 276L212 259L210 241L219 224L238 214L261 211L284 213L303 215L320 215L337 213L356 213L373 218L389 226L404 235L419 246L433 258L444 273L446 290ZM379 60L378 62L378 65L378 68L378 72L376 75L373 78L369 78L364 78L360 76L357 75L353 75L350 74L347 72L344 70L342 68L340 66L337 63L335 60L334 56L336 53L340 51L344 50L348 49L351 48L353 46L356 44L360 42L364 42L368 43L372 44L375 46L378 48L380 51L381 54L381 57L379 60ZM398 60L396 65L396 70L397 77L397 84L393 91L386 95L377 96L368 95L360 92L353 90L346 89L339 88L333 85L328 81L324 76L319 72L314 66L310 60L309 53L313 47L321 42L329 40L337 38L342 36L347 32L353 27L360 23L368 23L376 25L383 28L390 32L395 37L400 42L402 48L401 54L398 60ZM-3 60L-5 68L-5 75L-4 85L-4 97L-10 107L-21 113L-35 114L-48 111L-60 107L-70 105L-80 103L-91 102L-101 98L-109 92L-116 85L-123 78L-129 70L-135 60L-135 50L-129 40L-118 34L-105 30L-95 28L-87 24L-80 17L-71 10L-60 4L-47 3L-35 7L-25 12L-16 19L-8 26L-1 34L2 43L1 52L-3 60ZM-3 480L-5 488L-5 495L-4 505L-4 517L-10 527L-21 533L-35 534L-48 531L-60 527L-70 525L-80 523L-91 522L-101 518L-109 512L-116 505L-123 498L-129 490L-135 480L-135 470L-129 460L-118 454L-105 450L-95 448L-87 444L-80 437L-71 430L-60 424L-47 423L-35 427L-25 432L-16 439L-8 446L-1 454L2 463L1 472L-3 480ZM417 60L415 68L415 75L416 85L416 97L410 107L399 113L385 114L372 111L360 107L350 105L340 103L329 102L319 98L311 92L304 85L297 78L291 70L285 60L285 50L291 40L302 34L315 30L325 28L333 24L340 17L349 10L360 4L373 3L385 7L395 12L404 19L412 26L419 34L422 43L421 52L417 60ZM417 480L415 488L415 495L416 505L416 517L410 527L399 533L385 534L372 531L360 527L350 525L340 523L329 522L319 518L311 512L304 505L297 498L291 490L285 480L285 470L291 460L302 454L315 450L325 448L333 444L340 437L349 430L360 424L373 423L385 427L395 432L404 439L412 446L419 454L422 463L421 472L417 480Z' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E"); --m-swell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='96'%3E%3Cpath d='M0 24.0L8 25.2L16 26.4L24 27.5L32 28.5L40 29.2L48 29.7L56 30.0L64 30.0L72 29.7L80 29.2L88 28.5L96 27.5L104 26.4L112 25.2L120 24.0L128 22.8L136 21.6L144 20.5L152 19.5L160 18.8L168 18.3L176 18.0L184 18.0L192 18.3L200 18.8L208 19.5L216 20.5L224 21.6L232 22.8L240 24.0L248 25.2L256 26.4L264 27.5L272 28.5L280 29.2L288 29.7L296 30.0L304 30.0L312 29.7L320 29.2L328 28.5L336 27.5L344 26.4L352 25.2L360 24.0L368 22.8L376 21.6L384 20.5L392 19.5L400 18.8L408 18.3L416 18.0L424 18.0L432 18.3L440 18.8L448 19.5L456 20.5L464 21.6L472 22.8L480 24.0M0 78.0L8 77.9L16 77.5L24 76.9L32 76.0L40 75.0L48 73.9L56 72.6L64 71.4L72 70.1L80 69.0L88 68.0L96 67.1L104 66.5L112 66.1L120 66.0L128 66.1L136 66.5L144 67.1L152 68.0L160 69.0L168 70.1L176 71.4L184 72.6L192 73.9L200 75.0L208 76.0L216 76.9L224 77.5L232 77.9L240 78.0L248 77.9L256 77.5L264 76.9L272 76.0L280 75.0L288 73.9L296 72.6L304 71.4L312 70.1L320 69.0L328 68.0L336 67.1L344 66.5L352 66.1L360 66.0L368 66.1L376 66.5L384 67.1L392 68.0L400 69.0L408 70.1L416 71.4L424 72.6L432 73.9L440 75.0L448 76.0L456 76.9L464 77.5L472 77.9L480 78.0' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E"); --m-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Ccircle cx='82' cy='176' r='2.2'/%3E%3Ccircle cx='130' cy='161' r='1.9'/%3E%3Ccircle cx='191' cy='62' r='1.5'/%3E%3Ccircle cx='167' cy='164' r='0.9'/%3E%3Ccircle cx='161' cy='113' r='2.5'/%3E%3Ccircle cx='189' cy='36' r='1.7'/%3E%3Ccircle cx='215' cy='162' r='2.0'/%3E%3Ccircle cx='137' cy='212' r='2.4'/%3E%3Ccircle cx='91' cy='83' r='2.3'/%3E%3Ccircle cx='82' cy='42' r='1.3'/%3E%3Ccircle cx='104' cy='74' r='2.5'/%3E%3Ccircle cx='133' cy='171' r='2.4'/%3E%3Ccircle cx='21' cy='69' r='1.8'/%3E%3Ccircle cx='122' cy='102' r='1.1'/%3E%3Ccircle cx='212' cy='20' r='1.5'/%3E%3Ccircle cx='85' cy='157' r='2.5'/%3E%3Ccircle cx='123' cy='45' r='1.5'/%3E%3Ccircle cx='72' cy='90' r='1.6'/%3E%3Ccircle cx='82' cy='127' r='1.9'/%3E%3Ccircle cx='60' cy='211' r='1.6'/%3E%3Ccircle cx='201' cy='150' r='1.9'/%3E%3Ccircle cx='124' cy='121' r='2.0'/%3E%3Ccircle cx='218' cy='97' r='2.1'/%3E%3Ccircle cx='64' cy='139' r='1.4'/%3E%3Ccircle cx='82' cy='96' r='2.2'/%3E%3Ccircle cx='205' cy='33' r='2.3'/%3E%3C/svg%3E"); } .amb { display: none; position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } [data-game] .amb { display: block; } .amb.amb-inline { position: absolute; z-index: 0; } .amb i { position: absolute; inset: 0; will-change: transform, opacity; } .amb i { -webkit-mask-repeat: repeat; mask-repeat: repeat; } /* ---- Field Study: survey contours drifting under a low sun ---- */ [data-game="redrock"] .amb i:nth-child(1) { inset: -420px 0 0 -420px; background: rgb(var(--ac) / 0.11); -webkit-mask-image: var(--m-contour); mask-image: var(--m-contour); animation: amb-drift-diag 210s linear infinite; } [data-game="redrock"] .amb i:nth-child(2) { background: radial-gradient(40% 50% at 50% 50%, rgb(var(--ac) / 0.08), transparent 70%); animation: amb-glint 70s ease-in-out infinite alternate; } @keyframes amb-drift-diag { to { transform: translate(420px, 420px); } } @keyframes amb-glint { from { transform: translate(35vw, -30vh); } to { transform: translate(-10vw, -18vh); } } /* ---- Microbial Migration: colonies breathing under the lamp ---- */ [data-game="microbial"] .amb i:nth-child(1) { background: radial-gradient(22vmax 22vmax at 14% 20%, rgb(var(--ac) / 0.11), transparent 70%), radial-gradient(16vmax 16vmax at 86% 34%, rgb(var(--ac-hi) / 0.08), transparent 70%), radial-gradient(26vmax 26vmax at 68% 96%, rgb(var(--ac-lo) / 0.09), transparent 70%); animation: amb-breathe 16s ease-in-out infinite alternate; } [data-game="microbial"] .amb i:nth-child(2) { inset: -20%; background: radial-gradient(9vmax 9vmax at 32% 64%, rgb(var(--ac-hi) / 0.07), transparent 70%), radial-gradient(7vmax 7vmax at 58% 22%, rgb(var(--ac) / 0.07), transparent 70%), radial-gradient(11vmax 11vmax at 80% 70%, rgb(var(--ac) / 0.05), transparent 70%); animation: amb-turn 180s linear infinite, amb-pulse 11s ease-in-out infinite alternate; } @keyframes amb-breathe { from { transform: scale(0.94); opacity: 0.75; } to { transform: scale(1.08); opacity: 1; } } @keyframes amb-turn { to { transform: rotate(360deg); } } @keyframes amb-pulse { from { opacity: 0.55; } to { opacity: 1; } } /* ---- Sustainable Future Lab: dawn over the province ---- */ [data-game="sfl"] .amb i:nth-child(1) { background: linear-gradient(180deg, rgb(var(--ac) / 0.13) 0%, rgb(var(--ac) / 0.04) 30%, transparent 55%); transform-origin: top; animation: amb-dawn 40s ease-in-out infinite alternate; } [data-game="sfl"] .amb i:nth-child(2) { background: radial-gradient(18vmax 18vmax at 50% 50%, rgb(250 214 150 / 0.10), transparent 70%); animation: amb-sun 150s ease-in-out infinite alternate; } @keyframes amb-dawn { from { opacity: 0.6; transform: scaleY(0.9); } to { opacity: 1; transform: scaleY(1.1); } } @keyframes amb-sun { 0% { transform: translate(-42vw, 8vh); } 50% { transform: translate(0, -38vh); } 100% { transform: translate(42vw, 8vh); } } /* ---- Maritime Operations: swell rolling across the chart ---- */ [data-game="seawolf"] .amb i:nth-child(1) { inset: 0 -480px 0 0; background: rgb(var(--ac) / 0.07); -webkit-mask-image: var(--m-swell); mask-image: var(--m-swell); animation: amb-roll 48s linear infinite; } [data-game="seawolf"] .amb i:nth-child(2) { inset: 40px -480px 0 0; background: rgb(var(--ac-hi) / 0.045); -webkit-mask-image: var(--m-swell); mask-image: var(--m-swell); -webkit-mask-size: 720px 144px; mask-size: 720px 144px; animation: amb-roll-back 95s linear infinite; } @keyframes amb-roll { to { transform: translateX(-480px); } } @keyframes amb-roll-back { from { transform: translateX(-480px); } to { transform: translateX(0); } } /* ---- Habitat Builder: light and particles, by terrain ---- */ [data-game="ecosystem"] .amb i:nth-child(1) { inset: -10% -20% 0; background: repeating-linear-gradient(100deg, transparent 0 7vw, rgb(var(--ac) / 0.05) 7vw 9vw, transparent 9vw 17vw); -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; transform-origin: 50% 0; animation: amb-sway 26s ease-in-out infinite alternate; } [data-game="ecosystem"] .amb i:nth-child(2) { inset: 0 0 -240px 0; background: rgb(var(--ac-hi) / 0.16); -webkit-mask-image: var(--m-dots); mask-image: var(--m-dots); animation: amb-rise 70s linear infinite; } /* snow falls, jungle spores sink slowly, savanna dust blows sideways */ [data-game="ecosystem"][data-terrain="alpine"] .amb i:nth-child(2) { inset: -240px 0 0 0; animation: amb-fall 55s linear infinite; background: rgb(240 248 255 / 0.2); } [data-game="ecosystem"][data-terrain="jungle"] .amb i:nth-child(2) { inset: -240px 0 0 0; animation: amb-fall 120s linear infinite; } [data-game="ecosystem"][data-terrain="savanna"] .amb i:nth-child(2) { inset: 0 -240px 0 0; animation: amb-blow 45s linear infinite; } [data-game="ecosystem"][data-terrain="savanna"] .amb i:nth-child(1), [data-game="ecosystem"][data-terrain="alpine"] .amb i:nth-child(1) { opacity: 0.6; } @keyframes amb-sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } } @keyframes amb-rise { to { transform: translateY(-240px); } } @keyframes amb-fall { to { transform: translateY(240px); } } @keyframes amb-blow { to { transform: translateX(-240px); } } /* Inside a small frame (the landing page) the travelling lights move by the frame's own size rather than the viewport's. */ [data-game="redrock"] .amb-inline i:nth-child(2) { animation-name: amb-glint-inline; } [data-game="sfl"] .amb-inline i:nth-child(2) { animation-name: amb-sun-inline; } @keyframes amb-glint-inline { from { transform: translate(30%, -30%); } to { transform: translate(-25%, -10%); } } @keyframes amb-sun-inline { 0% { transform: translate(-45%, 5%); } 50% { transform: translate(0, -25%); } 100% { transform: translate(45%, 5%); } } /* Blur over a moving layer is re-rendered every frame; the cards are nearly opaque anyway, so drop it while an ambient layer is showing. */ body[data-game] .card, body[data-game] .empty-state-card, body[data-game] .rr-intro-card { -webkit-backdrop-filter: none; backdrop-filter: none; } body[data-game] .app-header { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: rgb(15 22 32 / 0.92); } @media (prefers-reduced-motion: reduce) { .amb i { animation: none !important; } }