/* Time-based effects live on children, leaving the scroll transforms independent. */
[data-ambient]{--life-state:paused}
[data-ambient].is-ambient{--life-state:running}
.motion-paused [data-ambient],.tab-inactive [data-ambient]{--life-state:paused}
[data-ambient] *,[data-ambient] *:before,[data-ambient] *:after{animation-play-state:var(--life-state,paused)!important}

/* Two entrances: an enchanted aperture and a dimensional game portal. */
.world-choice{overflow-x:clip}
.choice-options{position:relative;isolation:isolate;column-gap:34px}
.choice-shell{position:relative;min-width:0;--fx-colour:#e6a0ff;--fx-x:70%;--fx-y:30%;--tilt-x:0deg;--tilt-y:0deg;--hover-x:0px;--hover-y:0px}
.games-shell{--fx-colour:#8bf9e0}
.choice-shell .collection-choice{width:100%;height:100%;transform:perspective(1000px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));transition:transform .35s,border-color .35s,box-shadow .35s}
.choice-shell:is(:hover,:focus-within){z-index:2}
.choice-shell:is(:hover,:focus-within) .collection-choice{transform:perspective(1000px) translateY(-7px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));box-shadow:0 0 0 1px var(--fx-colour),0 24px 65px color-mix(in srgb,var(--fx-colour) 22%,transparent)}
.choice-copy,.choice-bottomline{z-index:2}
.choice-aura{position:absolute;inset:-23px;pointer-events:none;z-index:-1;opacity:.12;transition:opacity .5s,scale .7s;scale:.94;color:var(--fx-colour);translate:var(--hover-x) var(--hover-y)}
.choice-aura:before{content:"";position:absolute;inset:-30px;background:radial-gradient(ellipse at 65% 45%,color-mix(in srgb,var(--fx-colour) 35%,transparent),transparent 70%);animation:aura-breathe 4s ease-in-out infinite alternate}
.choice-aura i{position:absolute;inset:10px 0;border:1px solid currentColor;transform:skew(-12deg);animation:aura-float 6s ease-in-out infinite alternate}
.choice-aura i:nth-child(2){inset:2% 8%;transform:skew(12deg);animation-delay:-2s;opacity:.6}
.choice-aura i:nth-child(3){inset:15% -10px;border-width:2px;border-inline:0;transform:rotate(-12deg);animation-delay:-4s;opacity:.45}
.games-shell .choice-aura i{transform:skew(10deg);clip-path:polygon(0 0,85% 0,100% 20%,100% 100%,15% 100%,0 80%)}
.choice-shell:is(:hover,:focus-within) .choice-aura{opacity:1;scale:1.025}
.choice-vfx{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;opacity:.3;transition:opacity .5s;mix-blend-mode:screen}
.choice-shell:is(:hover,:focus-within) .choice-vfx{opacity:.95}
.choice-light{position:absolute;inset:0;background:radial-gradient(ellipse 240px 210px at var(--fx-x) var(--fx-y),color-mix(in srgb,var(--fx-colour) 28%,transparent),transparent 75%);opacity:.8}
.choice-portal{position:absolute;width:68%;aspect-ratio:1;right:-7%;top:-12%;translate:var(--hover-x) var(--hover-y);transition:scale .7s;scale:.87}
.choice-portal i{position:absolute;inset:7%;border:1px solid var(--fx-colour);border-radius:50%;box-shadow:0 0 20px color-mix(in srgb,var(--fx-colour) 22%,transparent),inset 0 0 20px color-mix(in srgb,var(--fx-colour) 15%,transparent);animation:fx-spin 22s linear infinite}
.choice-portal i:before,.choice-portal i:after{content:"";position:absolute;width:7px;height:7px;top:13%;left:13%;background:var(--fx-colour);box-shadow:0 0 18px var(--fx-colour);transform:rotate(45deg)}
.choice-portal i:after{top:auto;left:auto;bottom:13%;right:13%;width:3px;height:3px}
.choice-portal i:nth-child(2){inset:18%;border:2px dashed var(--fx-colour);opacity:.65;animation-direction:reverse;animation-duration:30s}
.choice-portal i:nth-child(3){inset:30%;border-radius:0;animation-duration:16s;opacity:.5}
.choice-shell:is(:hover,:focus-within) .choice-portal{scale:1.15}
.choice-games .choice-portal{top:-9%;right:-3%;width:66%}
.choice-games .choice-portal i{border-radius:0;border-width:2px;animation-name:game-gate;animation-duration:7s;animation-timing-function:ease-in-out}
.choice-games .choice-portal i:nth-child(2){inset:20%;animation-delay:-2.3s;border-style:solid}
.choice-games .choice-portal i:nth-child(3){inset:32%;animation-delay:-4.6s}
.choice-scan{position:absolute;inset:-20%;background:linear-gradient(115deg,transparent 35%,#e6acff0d 42%,#f5d7ff55 49.8%,transparent 50.3%);animation:cinema-light 7s ease-in-out infinite}
.choice-games .choice-scan{inset:0;background:linear-gradient(0deg,transparent,#97ffe423 48%,#caffed80 50%,transparent 50.5%);animation:game-scan 4s linear infinite}
.choice-sparks{position:absolute;inset:0}
.choice-sparks i{position:absolute;left:var(--x);top:var(--y);width:3px;height:3px;background:var(--fx-colour);box-shadow:0 0 10px var(--fx-colour);border-radius:50%;animation:choice-mote calc(3.5s + var(--n)*.21s) ease-in-out infinite;animation-delay:calc(var(--n)*-.7s)}
.choice-games .choice-sparks i{border-radius:0;width:calc(2px + var(--n)*.3px);height:2px;animation-name:choice-data;animation-duration:calc(2.5s + var(--n)*.15s)}
.choice-shell:is(:hover,:focus-within) .choice-arrow{translate:4px -4px}
.choice-arrow{transition:translate .3s}

/* Gentle camera movement and poster buoyancy continue while the copy stays still. */
.world-scene{--particle-speed:12s;--air-opacity:.48;--ambient-direction:normal}
.scene-background img{animation:living-camera 24s ease-in-out infinite alternate;animation-delay:var(--life-offset,0s);transform-origin:center}
.poster-drift{animation:poster-buoyancy 7s ease-in-out infinite alternate;animation-delay:var(--life-offset,0s)}
.scene-atmosphere{animation:air-breathe 9s ease-in-out infinite alternate;animation-delay:var(--life-offset,0s)}
.scene-particles i{animation:world-mote var(--particle-speed) linear infinite;animation-delay:calc(var(--n)*-.91s);animation-duration:calc(var(--particle-speed) + var(--n)*.17s)}
.ambient-field{position:absolute;inset:0;z-index:-3;pointer-events:none;overflow:hidden;color:var(--world-accent);opacity:var(--air-opacity)}
.ambient-veil{position:absolute;inset:-20%;background:radial-gradient(ellipse at 75% 65%,color-mix(in srgb,var(--world-accent) 25%,transparent),transparent 45%);animation:veil-drift 13s ease-in-out infinite alternate;animation-delay:var(--life-offset,0s)}
.ambient-orbit{position:absolute;right:8%;top:14%;width:42vw;height:42vw;max-width:760px;max-height:760px;opacity:.7}
.scene-reverse .ambient-orbit{right:auto;left:5%}
.ambient-orbit i{position:absolute;inset:0;border:1px solid currentColor;border-radius:50%;border-left-color:transparent;border-bottom-color:transparent;animation:fx-spin 38s linear infinite;animation-delay:var(--life-offset,0s)}
.ambient-orbit i:nth-child(2){inset:12%;animation-direction:reverse;animation-duration:25s;opacity:.6}
.ambient-orbit i:nth-child(3){inset:26%;border-style:dashed;animation-duration:48s;opacity:.4}
.ambient-trace{position:absolute;inset:0;opacity:.35}
.ambient-trace i{position:absolute;left:55%;top:-40%;height:180%;width:7%;background:linear-gradient(90deg,transparent,currentColor,transparent);transform:rotate(28deg);animation:light-passage 12s ease-in-out infinite;animation-delay:var(--life-offset,0s)}
.ambient-trace i:nth-child(2){left:72%;width:2%;animation-delay:-4s;opacity:.5}
.ambient-trace i:nth-child(3){left:85%;width:12%;animation-delay:-8s;opacity:.3}

/* Weather and woodland: falling rain, drifting snow, tumbling leaves and fireflies. */
.env-rain{--particle-speed:1.8s;--air-opacity:.26}
.env-rain .scene-particles i{animation-name:rain-fall;animation-duration:calc(1.6s + var(--n)*.04s);opacity:.45}
.env-rain .ambient-orbit,.env-forest .ambient-orbit,.env-snow .ambient-orbit,.env-cavern .ambient-orbit,.env-gilded .ambient-orbit,.env-couture .ambient-orbit{display:none}
.env-rain .ambient-trace{opacity:.16}
.env-rain .ambient-trace i{width:15%;animation-duration:9s}
.env-forest{--particle-speed:14s;--air-opacity:.5}
.env-forest .scene-particles i{animation-name:leaf-fall}
.env-forest .scene-particles i:nth-child(3n){width:3px;height:3px;border-radius:50%;background:#eaffc2;box-shadow:0 0 13px #ddff9c;animation-name:firefly;animation-duration:calc(6s + var(--n)*.2s)}
.env-forest .ambient-trace{opacity:.2}
.env-forest .scene-symbol i{animation:tree-sway 11s ease-in-out infinite alternate;transform-origin:bottom}
.env-snow{--particle-speed:13s;--air-opacity:.32}
.env-snow .scene-particles i{animation-name:snow-fall}
.env-snow .ambient-trace{opacity:.14}
.env-mist{--particle-speed:16s;--air-opacity:.55}
.env-mist .ambient-orbit{opacity:.2}
.env-mist .ambient-trace{display:none}
.env-mist .ambient-veil,.env-cavern .ambient-veil{background:radial-gradient(ellipse at 65% 80%,color-mix(in srgb,var(--world-accent) 50%,transparent),transparent 48%);animation-duration:10s}
.env-cavern{--particle-speed:10s;--air-opacity:.6}
.env-cavern .scene-particles i{animation-name:ash-rise;box-shadow:0 0 13px var(--world-accent)}
.env-cavern .ambient-trace{opacity:.18}

/* Enchantment: moving sigils, suspended fragments and opposing streams. */
.env-arcane .scene-symbol i:nth-child(2),.env-duality .scene-symbol i,.env-rift .scene-symbol i{animation:fx-spin 42s linear infinite}
.env-arcane .scene-symbol i:nth-child(3){animation:fx-spin 65s linear infinite reverse}
.env-arcane .scene-particles i{animation-name:spell-rise}
.env-arcane .ambient-orbit i:after,.env-duality .ambient-orbit i:after{content:"";position:absolute;top:14%;left:14%;width:6px;height:6px;background:currentColor;box-shadow:0 0 20px currentColor;transform:rotate(45deg)}
.env-arcane .ambient-trace{opacity:.14}
.env-duality .scene-particles i:nth-child(even){animation-direction:reverse;background:#f1e7c1}
.env-duality .ambient-orbit i:nth-child(2){color:#f1e7c1}
.env-duality .ambient-trace{opacity:.18}
.env-rift{--particle-speed:7s;--air-opacity:.65}
.env-rift .scene-particles i{animation-name:rift-fragment}
.env-rift .ambient-orbit i{border-radius:0;border:1px solid currentColor;animation:rift-expand 8s ease-out infinite;box-shadow:0 0 30px #afceff33}
.env-rift .ambient-orbit i:nth-child(2){animation-delay:-2.7s}
.env-rift .ambient-orbit i:nth-child(3){animation-delay:-5.4s}
.env-rift .ambient-trace{opacity:.12}

/* Space: streaks crossing the lens and rotating orbital geometry. */
.env-orbit{--particle-speed:9s;--air-opacity:.65}
.env-orbit .scene-particles i{animation-name:space-drift}
.env-orbit .ambient-orbit{transform:rotate(-28deg) scaleY(.55);width:64vw;height:64vw;right:-12%;top:-5%}
.env-orbit .ambient-orbit i{border-width:2px}
.env-orbit .ambient-trace i{top:var(--y,35%);left:-30%;height:1px;width:25%;background:linear-gradient(90deg,transparent,currentColor);transform:rotate(-25deg);animation:space-trail 8s linear infinite}
.env-orbit .ambient-trace i:nth-child(2){top:68%;animation-delay:-3s}
.env-orbit .ambient-trace i:nth-child(3){top:12%;animation-delay:-6s}

/* Fashion, history and unease have their own slower rhythms. */
.env-couture .scene-particles i{animation-name:ribbon-fall;animation-duration:calc(12s + var(--n)*.4s)}
.env-couture .scene-symbol i{animation:ribbon-sway 9s ease-in-out infinite alternate;transform-origin:top}
.env-couture .scene-symbol i:nth-child(2){animation-delay:-3s}
.env-couture .ambient-trace i{width:2%;color:#ffe6ed;animation-duration:10s}
.env-gilded{--particle-speed:22s;--air-opacity:.3}
.env-gilded .poster-drift{animation-duration:11s}
.env-gilded .ambient-trace{opacity:.22}
.env-gilded .ambient-trace i{animation-duration:20s}
.env-eclipse .ambient-orbit{animation:eclipse-breathe 10s ease-in-out infinite alternate}
.env-eclipse .ambient-orbit i{box-shadow:0 0 45px #dc9bcc33}
.env-eclipse .ambient-trace{display:none}
.env-eclipse .scene-particles i{animation-name:ash-rise;animation-duration:19s}
.env-clock .scene-symbol i:nth-child(2){animation:fx-spin 48s linear infinite}
.env-clock .scene-symbol i:nth-child(3){animation:fx-spin 18s linear infinite}
.env-clock .ambient-orbit i{border-style:dotted;animation-duration:60s}
.env-clock .ambient-trace{display:none}

/* Surveillance, a radar sweep and a tennis rally. */
.env-signal .ambient-orbit{inset:0;width:100%;height:100%;max-width:none;max-height:none}
.env-signal .ambient-orbit i{inset:0;border:0;border-radius:0;background:linear-gradient(0deg,transparent 46%,#b9e4ff13 49%,#b9e4ff66 50%,transparent 50.2%);animation:signal-scan 9s linear infinite}
.env-signal .ambient-orbit i:nth-child(n+2){display:none}
.env-signal .ambient-trace{display:none}
.env-signal .scene-particles i{animation-name:signal-drift;animation-duration:calc(4s + var(--n)*.2s)}
.env-radar .scene-symbol i:nth-child(3){animation:fx-spin 7s linear infinite}
.env-radar .ambient-orbit i{animation:radar-ping 6s linear infinite}
.env-radar .ambient-orbit i:nth-child(2){animation-delay:-2s}
.env-radar .ambient-orbit i:nth-child(3){animation-delay:-4s}
.env-radar .ambient-trace{display:none}
.env-radar .scene-particles i{animation:radar-contact 5s ease-in-out infinite;animation-delay:calc(var(--n)*-.41s)}
.env-court .ambient-orbit{display:none}
.env-court .ambient-trace{opacity:.5;inset:25% 5% 18% 45%}
.env-court .ambient-trace i{width:8px;height:8px;left:0;top:50%;border-radius:50%;background:#e5ffc0;box-shadow:0 0 15px #c7f67a;animation:court-rally 5s ease-in-out infinite;transform:none}
.env-court .ambient-trace i:nth-child(2){animation-delay:-.08s;opacity:.35}
.env-court .ambient-trace i:nth-child(3){animation-delay:-.16s;opacity:.15}
.env-court .scene-particles i{animation-name:world-mote;opacity:.2}

/* Variations for projects sharing a family of effects. */
#world-dota .ambient-orbit{color:#edd9cf;animation:eclipse-breathe 9s ease-in-out infinite alternate}
#world-awakening .ambient-orbit{transform:skew(-15deg);opacity:.9}
#world-awakening .ambient-orbit i{border-radius:32% 68% 62% 38%}
#world-wheel-of-time .ambient-trace{opacity:.32}
#world-nell .scene-particles i:nth-child(3n){background:#cddaff;box-shadow:0 0 15px #b3c3ff}
#world-faraway-tree .ambient-trace{color:#e5ffd0;opacity:.28}
#world-havoc .ambient-trace i{color:#91ceff;animation-duration:6s}
#world-mafia .ambient-trace i{color:#8de5d2;animation-duration:12s}

@keyframes living-camera{from{transform:translate3d(-.3%,-.3%,0)}to{transform:translate3d(.3%,.3%,0)}}
@keyframes poster-buoyancy{from{transform:translate3d(0,-7px,0) rotate(-.5deg)}to{transform:translate3d(0,9px,0) rotate(.6deg)}}
@keyframes air-breathe{from{scale:1;translate:-1% 0}to{scale:1.05;translate:2% 1%}}
@keyframes veil-drift{from{transform:translate3d(-8%,3%,0) scale(.95);opacity:.5}to{transform:translate3d(8%,-3%,0) scale(1.1);opacity:1}}
@keyframes fx-spin{to{rotate:360deg}}
@keyframes world-mote{0%{translate:-20px 28vh;opacity:0}15%,75%{opacity:.5}100%{translate:50px -55vh;opacity:0}}
@keyframes rain-fall{0%{translate:14vw -65vh;opacity:0}10%,90%{opacity:.5}100%{translate:-14vw 65vh;opacity:0}}
@keyframes snow-fall{0%{translate:-25px -65vh;opacity:0}15%,85%{opacity:.85}50%{translate:40px 0}100%{translate:-15px 65vh;opacity:0}}
@keyframes leaf-fall{0%{translate:-50px -55vh;rotate:-30deg;opacity:0}15%,80%{opacity:.65}50%{translate:50px 0;rotate:95deg}100%{translate:-10px 65vh;rotate:210deg;opacity:0}}
@keyframes firefly{0%,100%{translate:0 15px;opacity:.1;scale:.65}35%{translate:30px -35px;opacity:.9;scale:1.4}65%{translate:-18px -60px;opacity:.3;scale:1}}
@keyframes tree-sway{from{rotate:-.6deg}to{rotate:.8deg}}
@keyframes ash-rise{0%{translate:-20px 50vh;opacity:0}20%,65%{opacity:.55}100%{translate:90px -60vh;opacity:0}}
@keyframes spell-rise{0%{translate:20px 55vh;rotate:0deg;opacity:0}20%,70%{opacity:.7}50%{translate:-35px 0}100%{translate:20px -55vh;rotate:180deg;opacity:0}}
@keyframes rift-fragment{0%{translate:0 35vh;rotate:-30deg;opacity:0;scale:.5}20%,70%{opacity:.65}100%{translate:110px -60vh;rotate:200deg;opacity:0;scale:1.2}}
@keyframes rift-expand{0%{transform:rotate(45deg) scale(.45);opacity:0}25%{opacity:.85}100%{transform:rotate(90deg) scale(1.3);opacity:0}}
@keyframes space-drift{0%{translate:-25vw -45vh;opacity:0}15%,80%{opacity:.65}100%{translate:45vw 55vh;opacity:0}}
@keyframes space-trail{0%,15%{translate:0 0;opacity:0}25%{opacity:.8}70%,100%{translate:140vw -45vh;opacity:0}}
@keyframes ribbon-fall{0%{translate:-80px -60vh;rotate:-45deg;opacity:0}20%,75%{opacity:.4}100%{translate:80px 60vh;rotate:160deg;opacity:0}}
@keyframes ribbon-sway{from{translate:-15px 0;rotate:-3deg}to{translate:22px 0;rotate:4deg}}
@keyframes light-passage{0%,100%{translate:-12vw 0;opacity:.05}50%{translate:14vw 0;opacity:.65}}
@keyframes eclipse-breathe{from{scale:.94;opacity:.35}to{scale:1.06;opacity:.85}}
@keyframes signal-scan{from{translate:0 -70%}to{translate:0 70%}}
@keyframes signal-drift{0%{translate:-80px 0;opacity:0}30%,60%{opacity:.65}100%{translate:120px 0;opacity:0}}
@keyframes radar-ping{0%{scale:.25;opacity:0}20%{opacity:.8}100%{scale:1.2;opacity:0}}
@keyframes radar-contact{0%,100%{opacity:.12;scale:.8}40%{opacity:.8;scale:1.5}}
@keyframes court-rally{0%,100%{translate:0 70px;scale:.8}25%{translate:10vw -50px;scale:1}50%{translate:35vw 55px;scale:.7}75%{translate:20vw -90px;scale:1.3}}
@keyframes aura-breathe{from{scale:.92;opacity:.55}to{scale:1.08;opacity:1}}
@keyframes aura-float{from{translate:-5px 5px;rotate:-1deg}to{translate:6px -7px;rotate:1deg}}
@keyframes game-gate{0%,100%{rotate:35deg;scale:.9}50%{rotate:55deg;scale:1.08}}
@keyframes cinema-light{0%,100%{translate:-30% 0;opacity:.2}50%{translate:25% 0;opacity:.9}}
@keyframes game-scan{from{translate:0 -70%}to{translate:0 70%}}
@keyframes choice-mote{0%{translate:0 100px;opacity:0;scale:.5}30%,70%{opacity:.9}100%{translate:35px -160px;opacity:0;scale:1.3}}
@keyframes choice-data{0%{translate:-90px 70px;opacity:0;rotate:45deg}20%,70%{opacity:.9}100%{translate:140px -140px;opacity:0;rotate:135deg}}

[data-theme="light"] .choice-aura{color:color-mix(in srgb,var(--fx-colour) 65%,#49396a)}
[data-theme="light"] .ambient-field{color:color-mix(in srgb,var(--world-accent) 55%,#304653);opacity:calc(var(--air-opacity) * .65)}
.motion-paused .choice-shell .collection-choice{transform:none!important}
.motion-paused .choice-aura,.motion-paused .choice-portal{translate:none}
.motion-paused .choice-shell *{transition:none!important}
.motion-paused .poster-mount{transform:rotate(var(--poster-angle))!important;transition:none}
.motion-paused .choice-arrow{translate:none}
.motion-paused .choice-backdrop{scale:1.05}
.motion-paused .choice-portal{scale:.87}
.motion-paused .choice-aura{scale:.94}
@media(max-width:760px){
  .choice-options{gap:34px}.choice-aura{inset:-12px}.choice-aura i:nth-child(3){inset:15% -3px}
  .choice-vfx{opacity:.48}.choice-portal{width:65%;right:-6%;top:-4%}
  .choice-shell .collection-choice{transform:none!important}
  .scene-particles i:nth-child(n+15),.choice-sparks i:nth-child(n+10){display:none}
  .ambient-orbit,.scene-reverse .ambient-orbit{width:90vw;height:90vw;top:34%;left:auto;right:-20%}
  .env-orbit .ambient-orbit{width:130vw;height:130vw;right:-40%;top:25%}
  .env-signal .ambient-orbit{inset:0;width:100%;height:100%}
  .ambient-trace{opacity:.18}.env-court .ambient-trace{inset:40% 0 15% 30%}
  .poster-drift{animation-name:poster-buoyancy-mobile}
}
@keyframes poster-buoyancy-mobile{from{transform:translate3d(0,-4px,0)}to{transform:translate3d(0,6px,0)}}
@media(prefers-reduced-motion:reduce){.choice-shell .collection-choice,.choice-aura,.choice-vfx,.choice-portal{transition:none}}
@media print{.choice-aura,.choice-vfx,.ambient-field{display:none!important}[data-ambient] *,[data-ambient] *:before,[data-ambient] *:after{animation:none!important}}