/* Three abstract light spaces. The captions stay above a quiet reading veil. */
.experience-display{background:#0c2239;border-color:#b2dcff38;box-shadow:0 24px 65px #03132426,inset 0 1px #ffffff09}
.experience-display .scene{pointer-events:none;transition:opacity 1.15s ease;contain:paint}
.experience-display .scene-travel{background:radial-gradient(ellipse at 67% 26%,#275577 0%,#142f4b 45%,#0b2138 85%)}
.experience-display .scene-play{background:radial-gradient(ellipse at 54% 31%,#314d79 0%,#172e4d 49%,#0c2239 85%)}
.experience-display .scene-connect{background:radial-gradient(ellipse at 47% 35%,#214860 0%,#142e46 48%,#0c2239 85%)}
.experience-display:after{background:linear-gradient(180deg,#0a203814 0%,transparent 42%,#0a2038b3 65%,#0a2038f5 86%,#0a2038 100%)}
.experience-display .scene-top{z-index:1;background:#0b22332b;border-color:#cfecff26;color:#d5edff;text-shadow:none}
.experience-display .scene-caption{z-index:1;bottom:57px}
.experience-display .scene-caption h3{letter-spacing:.02em;text-wrap:balance}
.experience-display .scene-caption h3>span{display:inline-block;white-space:nowrap}
.experience-display .scene-caption p{color:#e0ebf4}
.experience-display .concept-note{z-index:1;color:#92acc0;font-size:8px}
.exp-art{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible}
.exp-light{position:absolute;pointer-events:none;inset:-12%;border-radius:50%;animation:experience-light 12s ease-in-out infinite alternate}
.exp-light-blue{background:radial-gradient(ellipse at 61% 35%,#7bd7ff24,transparent 48%);transform-origin:65% 35%}
.exp-light-warm{background:radial-gradient(ellipse at 85% 41%,#ffbc7d16,transparent 32%);animation-delay:-5s;animation-duration:15s}
.exp-stars{opacity:.6;animation:experience-particles 10s ease-in-out infinite alternate}
.exp-destination{transform-origin:484px 179px;animation:experience-arrival 9s ease-in-out infinite alternate}
.travel-distant{opacity:.48;transform-origin:480px 180px;animation:experience-depth 12s ease-in-out infinite alternate}
.travel-silk{transform-origin:480px 180px}
.travel-silk-back{opacity:.6;animation:experience-silk-back 11s ease-in-out -4s infinite alternate}
.travel-silk-front{animation:experience-silk 8s ease-in-out -2s infinite alternate}
.travel-amber{transform-origin:480px 180px;animation:experience-amber 10s ease-in-out -4s infinite alternate}
.space-membrane{transform-origin:360px 235px}
.membrane-back{opacity:.4;animation:experience-membrane-back 12s ease-in-out -5s infinite alternate}
.membrane-mid{opacity:.7;animation:experience-membrane 8s ease-in-out -2s infinite alternate}
.membrane-front{animation:experience-membrane-front 10s ease-in-out -6s infinite alternate}
.connection-weave{transform-origin:360px 230px;animation:experience-connection 9s ease-in-out -3s infinite alternate}
.connection-node{animation:experience-node 5s ease-in-out infinite alternate}
.node-blue{transform-origin:206px 236px}
.node-pearl{transform-origin:366px 166px;animation-delay:-2s;animation-duration:6s}
.node-warm{transform-origin:502px 258px;animation-delay:-4s;animation-duration:5.5s}
.travel-stream{fill:none;stroke:#e6fbff;stroke-width:1.8;stroke-linecap:round;stroke-dasharray:9 91;opacity:0;animation:experience-stream 7s linear -2s infinite}
.connection-signal{fill:none;stroke:#d6f6ff;stroke-width:2;stroke-linecap:round;stroke-dasharray:6 94;opacity:0;animation:experience-signal 8s linear -1s infinite}
.connection-signal.signal-warm{stroke:#ffe2be;stroke-width:1.7;stroke-dasharray:5 95;animation-delay:-5s;animation-duration:10s}
.connection-wave{fill:none;stroke-width:.8;opacity:0;animation:experience-wave 6s ease-out infinite;transform-box:view-box}
.wave-blue{stroke:#a1deff;transform-origin:206px 236px;animation-delay:-1s}
.wave-warm{stroke:#ffdab7;transform-origin:502px 258px;animation-delay:-4s}
/* Pause the hidden layers, including the default scene. Global visibility rules also apply. */
.experience-display:not([data-current=travel]) .scene-travel *,
.experience-display:not([data-current=play]) .scene-play *,
.experience-display:not([data-current=connect]) .scene-connect *{animation-play-state:paused}
@keyframes experience-light{from{transform:translate3d(-6%,-4%,0) scale(.9);opacity:.55}to{transform:translate3d(8%,5%,0) scale(1.12);opacity:1}}
@keyframes experience-particles{from{transform:translate3d(8px,16px,0);opacity:.35}to{transform:translate3d(-16px,-20px,0);opacity:.85}}
@keyframes experience-arrival{from{transform:translate3d(-12px,7px,0) scale(.75);opacity:.45}to{transform:translate3d(14px,-8px,0) scale(1.24);opacity:.85}}
@keyframes experience-depth{from{transform:translate3d(-18px,16px,0) rotate(-3deg) scale(1.08)}to{transform:translate3d(18px,-12px,0) rotate(3deg) scale(.92)}}
@keyframes experience-silk{from{transform:translate3d(-27px,25px,0) rotate(-7deg) skewY(-5deg) scale(1.09,.9)}to{transform:translate3d(27px,-20px,0) rotate(8deg) skewY(5deg) scale(.92,1.12)}}
@keyframes experience-silk-back{from{transform:translate3d(14px,27px,0) rotate(8deg) skewX(6deg) scale(1.08,.95)}to{transform:translate3d(-22px,-26px,0) rotate(-8deg) skewX(-6deg) scale(.94,1.08)}}
@keyframes experience-amber{from{transform:translate3d(20px,23px,0) rotate(7deg) scale(.95);opacity:.5}to{transform:translate3d(-18px,-22px,0) rotate(-7deg) scale(1.07);opacity:1}}
@keyframes experience-membrane{from{transform:translate3d(-20px,24px,0) rotate(-12deg) skewX(-7deg) scale(.88,1.16)}to{transform:translate3d(23px,-24px,0) rotate(13deg) skewX(7deg) scale(1.12,.85)}}
@keyframes experience-membrane-back{from{transform:translate3d(18px,-24px,0) rotate(13deg) skewY(5deg) scale(1.14,.9)}to{transform:translate3d(-22px,28px,0) rotate(-15deg) skewY(-5deg) scale(.86,1.14)}}
@keyframes experience-membrane-front{from{transform:translate3d(-24px,20px,0) rotate(10deg) skewX(7deg) scale(1.08,.82)}to{transform:translate3d(24px,-24px,0) rotate(-13deg) skewX(-7deg) scale(.9,1.2)}}
@keyframes experience-connection{from{transform:translate3d(-20px,18px,0) rotate(-6deg) scale(.86,.94)}to{transform:translate3d(20px,-17px,0) rotate(6deg) scale(1.1,1.06)}}
@keyframes experience-node{from{transform:scale(.76);opacity:.6}to{transform:scale(1.27);opacity:1}}
@keyframes experience-stream{0%{stroke-dashoffset:100;opacity:0}12%{opacity:.85}82%{opacity:.85}100%{stroke-dashoffset:0;opacity:0}}
@keyframes experience-signal{0%{stroke-dashoffset:100;opacity:0}15%{opacity:.9}78%{opacity:.9}100%{stroke-dashoffset:0;opacity:0}}
@keyframes experience-wave{0%{transform:scale(.65);opacity:0}18%{opacity:.4}100%{transform:scale(3.2);opacity:0}}
@media(max-width:900px) and (min-width:641px){.experience-display .scene-caption{left:22px;right:18px;bottom:48px}.experience-display .scene-caption h3{font-size:19px}.exp-art{width:118%;left:-9%}}
@media(max-width:640px){
 .experience-display{min-height:425px}
 .experience-display .scene-top{top:18px;left:19px;right:19px;font-size:8px;padding:8px 9px}
 .experience-display .scene-caption{left:24px;right:22px;bottom:45px}
 .experience-display .scene-caption h3{font-size:20px;line-height:1.55}
 .experience-display .scene-caption p{font-size:11px;line-height:1.9}
 .experience-display .concept-note{left:24px;bottom:20px;font-size:7px}
 .experience-display:after{background:linear-gradient(180deg,#0a203814 0%,transparent 36%,#0a2038b3 62%,#0a2038f5 84%,#0a2038 100%)}
 .exp-art{width:116%;left:-8%}
 .exp-stars{animation-duration:12s}
}
@media(prefers-reduced-motion:reduce){.experience-display .scene{transition:none}.experience-display .scene *{animation:none!important}}