.possibility-scene{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:55px;min-height:540px;padding:85px 0;--scene-progress:0}.scene-copy h2{font-size:clamp(36px,4vw,56px);margin:22px 0}.scene-copy p{font-size:13px;color:var(--muted)}.scene-scroll{display:inline-flex;align-items:center;gap:22px;font-size:10px;letter-spacing:1px;margin-top:20px;color:#94723a}.scene-scroll span{font-size:21px}.possibility-orbit{position:relative;width:100%;aspect-ratio:1;max-width:440px;justify-self:center;transform:rotate(calc(var(--scene-progress)*12deg))}.orbit-ring{position:absolute;inset:7%;border:1px solid #c5a56980;border-radius:50%;transform:rotate(-30deg) scaleY(.63)}.ring-two{inset:15%;transform:rotate(42deg) scaleY(.73);border-color:#c9b5c6b0}.ring-three{inset:1%;transform:rotate(80deg) scaleY(.6);border-color:#b89a6160}.orbit-core{position:absolute;inset:29%;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:Georgia,serif;font-size:52px;color:#9f7a36;background:radial-gradient(circle at 29% 23%,#fff 2%,#fff8e8 30%,#e4d5d7 61%,#b59e6d 90%,#fff6d9);box-shadow:inset 0 3px 6px #fff,0 10px 50px #b0955c25;transform:scale(calc(.93 + var(--scene-progress)*.13))}.orbit-core span{position:absolute;top:66%;font-family:'DM Sans',sans-serif;font-size:6px;letter-spacing:1.1px;text-align:center;max-width:90px;line-height:1.6}.orbit-word{position:absolute;font-family:Georgia,serif;font-style:italic;font-size:22px;background:#fbf8efda;padding:6px 13px;color:#8d713e}.word-one{left:1%;top:23%}.word-two{right:1%;top:46%}.word-three{left:19%;bottom:9%}.orbit-pearl{position:absolute;width:17px;height:17px;border-radius:50%;background:radial-gradient(circle at 30% 25%,white,#f8f0dc 35%,#cdbbd0 70%,#b59860);box-shadow:0 0 15px #d8bc7470}.pearl-one{top:12%;left:51%}.pearl-two{bottom:20%;right:16%;width:12px;height:12px}.pearl-three{top:58%;left:12%;width:10px;height:10px}
.motion-ready .projects{position:relative;isolation:isolate;color:#fbf3e2;padding-top:95px;padding-bottom:85px;--spot-rgb:206,157,141;--spot-y:500px}.motion-ready .projects:before{content:'';position:absolute;z-index:-2;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;background:#1f1b16}.motion-ready .projects:after{content:'';position:absolute;z-index:-1;inset:0 -35px;pointer-events:none;background:radial-gradient(ellipse 560px 490px at 55% var(--spot-y),rgba(var(--spot-rgb),.16),transparent 85%);transition:background-color .8s}.motion-ready .projects h2 em{color:#dbc28d}.motion-ready .projects .section-head>p,.motion-ready .projects .project-info>p:not(.project-affirmation),.motion-ready .projects .project-meta{color:#d3c8b6}.motion-ready .projects .project-affirmation{color:#dfc58e!important}.motion-ready .projects .eyebrow{color:#ddc796}.motion-ready .projects .project{position:relative;padding:65px 0;gap:45px 65px;border-color:#aa906e40;--project-progress:0}.motion-ready .project:before{content:'';position:absolute;inset:26px -26px;pointer-events:none;border-radius:22px;background:radial-gradient(ellipse at 60% 45%,rgba(var(--spot-rgb),.075),transparent 75%);border:1px solid #d7bb7e00;opacity:0;transition:opacity .7s,border-color .7s}.motion-ready .project.is-active:before{opacity:1;border-color:#d7bb7e36}.motion-ready .project>.project-screenshot{transform:perspective(1200px) translateY(calc((1 - var(--project-progress))*18px)) rotateY(calc((1 - var(--project-progress))*-3deg));transition:transform .45s ease,box-shadow .6s;box-shadow:0 18px 45px #0004;border-radius:5px}.motion-ready .project.is-active>.project-screenshot{box-shadow:0 20px 65px #0006,0 0 32px rgba(var(--spot-rgb),.12)}.motion-ready .project .project-info{transform:translateY(calc((1 - var(--project-progress))*12px));transition:transform .5s}.motion-ready .project .text-link{color:#f5e9d2;border-color:#ac8d54}.motion-ready .project .screenshot-caption{color:#55452f}.motion-ready .project .inside-gallery{position:relative;color:var(--ink)}.motion-ready .inside-gallery .eyebrow{color:#71562b}.motion-ready .gallery-content .gallery-note{color:#756957}.motion-ready .project-title .app-logo{transition:box-shadow .8s,transform .8s}.motion-ready .project.is-active .app-logo{box-shadow:inset 0 2px 3px #fff,0 0 28px rgba(var(--spot-rgb),.22);transform:translateY(-3px)}.motion-ready .projects>.eyebrow:after{content:'✦';margin-left:auto;color:#ddc796;font-size:19px}
.spotlight-nav{position:fixed;z-index:20;bottom:22px;left:50%;transform:translate(-50%,25px);opacity:0;visibility:hidden;display:flex;align-items:center;gap:18px;padding:12px 20px;background:#fff9ecd9;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid #d1b77d90;border-radius:50px;box-shadow:0 8px 35px #0002;color:#392915;transition:opacity .35s,transform .35s,visibility .35s;max-width:calc(100vw - 32px);white-space:nowrap}.spotlight-visible .spotlight-nav{opacity:1;visibility:visible;transform:translate(-50%,0)}.spotlight-caption{font-size:8px;text-transform:uppercase;letter-spacing:1.2px;color:#776144}.spotlight-current{font-family:Georgia,serif;font-size:16px;min-width:100px}.spotlight-dots{display:flex;gap:2px}.spotlight-dots a{padding:9px;display:block}.spotlight-dots span{display:block;width:6px;height:6px;background:#bfb29b;border-radius:50%;transition:background .3s,transform .3s}.spotlight-dots a[aria-current=true] span{background:#92692f;transform:scale(1.5)}.motion-toggle{font:inherit;font-size:9px;cursor:pointer;border:0;border-left:1px solid #c8b99d;background:none;padding:7px 0 7px 16px;color:#725c3c}.motion-toggle:focus-visible{outline:2px solid #9c7a3c;outline-offset:5px}
@media(max-width:800px){.possibility-scene{gap:25px;min-height:440px}.orbit-core{font-size:39px}.orbit-word{font-size:18px}.orbit-core span{font-size:5px}.motion-ready .projects .project{gap:25px;padding:45px 0}.motion-ready .project:before{inset:15px -12px}.motion-ready .projects:after{inset:0 -12px}.spotlight-caption{display:none}}
@media(max-width:560px){.possibility-scene{grid-template-columns:1fr;gap:10px;padding:55px 0}.possibility-orbit{max-width:330px}.scene-copy h2{font-size:39px}.orbit-core{font-size:44px}.orbit-core span{font-size:5px}.scene-scroll{margin-top:8px}.motion-ready .projects{padding-top:55px}.spotlight-nav{padding:9px 13px;gap:9px;bottom:14px}.spotlight-current{font-size:13px;min-width:85px}.spotlight-dots a{padding:8px}.motion-toggle{font-size:8px;padding-left:10px}}
@media(prefers-reduced-motion:reduce){.possibility-orbit,.orbit-core,.motion-ready .project>.project-screenshot,.motion-ready .project .project-info,.motion-ready .project.is-active .app-logo{transform:none!important}.motion-ready .project:before,.spotlight-nav,.motion-ready .project-title .app-logo{transition:none}.motion-toggle{display:none}}
.motion-paused .possibility-orbit,.motion-paused .orbit-core,.motion-paused .project>.project-screenshot,.motion-paused .project .project-info,.motion-paused .project.is-active .app-logo{transform:none!important}.motion-paused .glint{animation:none}.motion-paused .project:before{transition:none}

/* Pearls travel on independent elliptical paths around a softly luminous nucleus. */
.possibility-orbit .orbit-pearl{top:0;left:0;right:auto;bottom:auto;offset-anchor:center;offset-rotate:0deg;offset-path:ellipse(43% 27% at 50% 50%);animation:pearl-orbit 13s linear infinite;animation-play-state:paused;z-index:3}
.possibility-orbit .pearl-two{offset-path:ellipse(25% 42% at 50% 50%);animation-duration:17s;animation-direction:reverse;animation-delay:-6s;width:14px;height:14px}
.possibility-orbit .pearl-three{offset-path:ellipse(35% 34% at 50% 50%);animation-duration:21s;animation-delay:-13s;width:11px;height:11px}
.possibility-orbit .orbit-core{animation:nucleus-glow 6s ease-in-out infinite;animation-play-state:paused}
.possibility-orbit .ring-one{animation:orbit-sway-one 18s ease-in-out infinite;animation-play-state:paused}
.possibility-orbit .ring-two{animation:orbit-sway-two 23s ease-in-out infinite;animation-play-state:paused}
.possibility-orbit .ring-three{animation:orbit-sway-three 27s ease-in-out infinite;animation-play-state:paused}
.possibility-orbit:after{content:'✦';position:absolute;right:15%;top:18%;font-size:19px;color:#bd9951;text-shadow:0 0 12px #f3d99d;animation:atom-spark 8s ease-in-out infinite;animation-play-state:paused;pointer-events:none}
.atom-in-view .possibility-orbit .orbit-pearl,.atom-in-view .possibility-orbit .orbit-core,.atom-in-view .possibility-orbit .orbit-ring,.atom-in-view .possibility-orbit:after{animation-play-state:running}
.atom-motion-toggle{display:block;margin-top:20px;padding:7px 0;background:none;border:0;border-bottom:1px solid #c9b589;font:inherit;font-size:10px;color:#80663b;cursor:pointer;letter-spacing:.3px}.atom-motion-toggle:hover{color:#392915}.atom-motion-toggle:focus-visible{outline:2px solid #a47a31;outline-offset:5px}
@keyframes pearl-orbit{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes nucleus-glow{0%,100%{box-shadow:inset 0 3px 6px #fff,0 10px 45px #b0955c25}50%{box-shadow:inset 0 3px 8px #fff,0 0 40px #f6e6be70,0 12px 60px #c9b4c640}}
@keyframes orbit-sway-one{0%,100%{transform:rotate(-30deg) scaleY(.63)}50%{transform:rotate(-14deg) scaleY(.68)}}
@keyframes orbit-sway-two{0%,100%{transform:rotate(42deg) scaleY(.73)}50%{transform:rotate(58deg) scaleY(.67)}}
@keyframes orbit-sway-three{0%,100%{transform:rotate(80deg) scaleY(.6)}50%{transform:rotate(66deg) scaleY(.65)}}
@keyframes atom-spark{0%,35%,75%,100%{opacity:.25;transform:scale(.7) rotate(0)}52%{opacity:1;transform:scale(1.12) rotate(15deg)}}
.motion-paused .possibility-orbit .orbit-pearl,.motion-paused .possibility-orbit .orbit-core,.motion-paused .possibility-orbit .orbit-ring,.motion-paused .possibility-orbit:after{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.possibility-orbit .orbit-pearl,.possibility-orbit .orbit-core,.possibility-orbit .orbit-ring,.possibility-orbit:after{animation:none!important}.possibility-orbit .pearl-one{offset-distance:12%}.possibility-orbit .pearl-two{offset-distance:50%}.possibility-orbit .pearl-three{offset-distance:79%}.atom-motion-toggle{display:none}}

/* The nucleus and surrounding ideas breathe independently of the orbital pearls. */
.possibility-orbit .orbit-core{animation:nucleus-glow 6s ease-in-out infinite,nucleus-breathe 7s ease-in-out infinite;animation-play-state:paused}
.possibility-orbit .orbit-core>span{animation:nucleus-inscription 7s ease-in-out infinite;animation-play-state:paused}
.possibility-orbit .orbit-word{animation:idea-drift 8s ease-in-out infinite;animation-play-state:paused;z-index:4}
.possibility-orbit .word-two{animation-duration:10s;animation-delay:-3s}
.possibility-orbit .word-three{animation-duration:9s;animation-delay:-5s}
.atom-in-view .possibility-orbit .orbit-core,.atom-in-view .possibility-orbit .orbit-core>span,.atom-in-view .possibility-orbit .orbit-word{animation-play-state:running}
@keyframes nucleus-breathe{0%,100%{transform:translateY(3px) scale(.96)}50%{transform:translateY(-4px) scale(1.045)}}
@keyframes nucleus-inscription{0%,100%{opacity:.68}50%{opacity:1}}
@keyframes idea-drift{0%,100%{transform:translate(0,3px) rotate(-2deg);color:#8d713e;text-shadow:0 0 0 transparent}50%{transform:translate(5px,-7px) rotate(2deg);color:#a47a31;text-shadow:0 2px 16px #d8b86c55}}
.motion-paused .possibility-orbit .orbit-core,.motion-paused .possibility-orbit .orbit-core>span,.motion-paused .possibility-orbit .orbit-word{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.possibility-orbit .orbit-core,.possibility-orbit .orbit-core>span,.possibility-orbit .orbit-word{animation:none!important;transform:none!important}}
