
/* P04 — rotating service belts and scroll-driven message boxes. */
.p-shift-cubes{background:#f2eef5;color:#2c1e46}
.service-belt{--cube-h:170px;height:var(--cube-h);border-top:1px solid #9162a87a;overflow:hidden;perspective:1200px;touch-action:pan-y}
.service-belt:last-child{border-bottom:1px solid #9162a87a}
.service-belt-run{display:flex;width:max-content;will-change:transform}
.belt-group{position:relative;display:flex}
.service-cube{display:block;width:760px;height:var(--cube-h);padding:0;border:0;background:none;color:inherit;text-align:left;perspective:1000px}
.service-cube-body{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.22,.8,.2,1)}
.cube-front,.cube-top{position:absolute;inset:0;display:flex;align-items:center;gap:28px;padding:10px 35px;background:#f2eef5;backface-visibility:hidden;border-right:1px solid #9162a855}
.cube-front{transform:translateZ(calc(var(--cube-h)/2))}
.cube-top{transform:rotateX(90deg) translateZ(calc(var(--cube-h)/2));background:#2c1e46;color:#f8efff}
.service-cube strong{font:500 99px/1 Georgia,serif;letter-spacing:-.075em}
.service-cube span span>span{font:500 18px/1.7 var(--serif);white-space:nowrap}
.service-cube small{display:block;font:400 12px/1.7 var(--jp);margin-top:7px}
.service-cube i{font:400 76px/1 var(--sans);margin-left:auto;color:#9162a8}
.service-cube[aria-pressed=true] .service-cube-body,.service-cube:focus-visible .service-cube-body{transform:rotateX(-90deg)}
@media(hover:hover){.service-cube:hover .service-cube-body{transform:rotateX(-90deg)}}
.service-cube:focus-visible{outline:3px solid #9162a8;outline-offset:-5px}
.service-belt.belt-paused{overflow-x:auto;touch-action:auto}
.belt-paused .service-belt-run{transform:none!important;will-change:auto}
.belt-paused .belt-copy{display:none}
.shift-message-field{position:relative;background:#2c1e46;color:#f8f3fc;isolation:isolate}
.shift-backdrop-holder{position:sticky;top:78px;height:calc(100svh - 78px);min-height:500px;pointer-events:none}
.warp-backdrop{position:absolute;inset:0;background:radial-gradient(ellipse at 40% 40%,#9162a8,#2c1e46 70%);overflow:hidden}
.warp-backdrop canvas{width:100%;height:100%;display:block}
.shift-message-content{position:relative;margin-top:calc(-100svh + 78px);padding:95px var(--p-pad) 120px;z-index:1}
.shift-message-content>.p-kicker{color:#d5c0e2;margin-bottom:50px}
.shift-message-title{font:500 clamp(31px,4.6vw,68px)/1.6 var(--serif);width:fit-content;margin:0 0 110px 7%}
.shift-message-title>span{display:table;background:#f6f0fa;color:#2c1e46;padding:0 12px;margin-bottom:8px}
.shift-message-box{position:relative;perspective:1200px;width:fit-content;max-width:82%;margin:0 0 105px}
.shift-message-box:nth-of-type(even){margin-left:auto;text-align:right}
.shift-box-inner{position:relative;transform-style:preserve-3d;transform-origin:center center}
.shift-box-inner>p{background:#f5f0fa;color:#2c1e46;font:500 clamp(18px,2.15vw,32px)/1.9 var(--serif);padding:17px 25px;margin:0;transform:translateZ(16px);backface-visibility:hidden;box-shadow:0 12px 50px #0003}
.shift-box-side{position:absolute;left:0;right:0;bottom:-16px;height:32px;background:#9162a8;transform:rotateX(-90deg);backface-visibility:hidden}
.shift-message-about{display:flex;justify-content:flex-end}
.p-motion-paused .service-belt-run{animation-play-state:paused}
.p-motion-paused .shift-box-inner{transform:none!important}
/* P05 — a sphere of text, with softly undulating glyphs and a reactive background. */
.p-depth-sphere .p-label{margin-bottom:0}
.sphere-scroll{height:auto}
.sphere-stage{position:relative;min-height:650px;overflow:hidden;isolation:isolate;background:#0b0611}
.sphere-stage .warp-backdrop{opacity:.9}
.sphere-glow{position:absolute;inset:-20%;pointer-events:none;background:radial-gradient(ellipse at 42% 40%,#9162a842,transparent 55%);animation:sphere-light 14s ease-in-out infinite alternate}
@keyframes sphere-light{to{transform:translate(10%,9%) scale(1.1)}}
.sphere-kicker{position:absolute;z-index:3;left:6.5%;top:32px;font:500 10px/1.5 var(--sans);letter-spacing:.13em;color:#cdb4df}
.sphere-space{position:relative;padding:100px 7vw;perspective:950px;transform-style:preserve-3d;z-index:2}
.sphere-message{position:relative;text-align:center;margin:65px auto;font:500 clamp(23px,2.6vw,39px)/1.95 var(--jp);letter-spacing:.02em;color:white;transform-style:preserve-3d}
.sphere-line{display:block;white-space:nowrap}
.sphere-echo{display:none}
.sphere-glyph{display:inline-block;animation:glyph-wave 5.6s ease-in-out infinite;animation-delay:calc(var(--glyph-i)*-.12s)}
@keyframes glyph-wave{0%,100%{transform:translateY(-2px) rotate(-.25deg)}50%{transform:translateY(2px) rotate(.25deg)}}
.sphere-shot{display:none;position:absolute;z-index:1;margin:0;width:16%;padding:6px;background:#1e132a;border:1px solid #b895cc42}
.sphere-shot img{width:100%;aspect-ratio:.75;object-fit:cover;filter:grayscale(1);opacity:.62}
.sphere-shot-a{top:18%;left:4%;transform:perspective(800px) rotateY(35deg) rotateZ(-7deg);animation:sphere-shot-float 10s ease-in-out infinite alternate}
.sphere-shot-b{right:4%;bottom:14%;transform:perspective(800px) rotateY(-35deg) rotateZ(7deg);animation:sphere-shot-float 12s ease-in-out infinite alternate-reverse}
@keyframes sphere-shot-float{to{translate:0 25px}}
.sphere-bottom{position:absolute;left:6.5%;right:6.5%;bottom:32px;display:flex;justify-content:space-between;font:500 9px/1.5 var(--sans);letter-spacing:.1em;color:#c9b7d8;z-index:3}
.sphere-enhanced .sphere-scroll{height:450svh;min-height:2800px}
.sphere-enhanced .sphere-stage{position:sticky;top:78px;height:calc(100svh - 78px);min-height:500px}
.sphere-enhanced .sphere-space{position:absolute;inset:0;padding:0;overflow:hidden}
.sphere-enhanced .sphere-message{position:absolute;left:50%;top:50%;margin:0;width:80%;transform-origin:center center;will-change:transform,opacity}
.sphere-enhanced .sphere-echo{display:block;position:absolute;inset:0;transform:translate3d(0,17px,-35px);opacity:.13;filter:blur(.5px)}
.sphere-echo>span{display:block}
.sphere-enhanced .sphere-shot{display:block}
.p-motion-paused .sphere-message{transform:none!important;opacity:1!important;visibility:visible!important}
.p-motion-paused .sphere-glyph,.p-motion-paused .sphere-glow{animation:none}
@media(max-width:1000px){
 .service-belt{--cube-h:145px}.service-cube{width:650px}.service-cube strong{font-size:85px}
 .sphere-message{font-size:clamp(18px,2.65vw,28px)}
 .sphere-shot{width:13%;opacity:.6}
}
@media(max-width:600px){
 .service-belt{--cube-h:112px}.service-cube{width:420px}.service-cube strong{font-size:58px}.cube-front,.cube-top{gap:15px;padding:10px 18px}.service-cube span span>span{font-size:13px}.service-cube small{font-size:10px}.service-cube i{font-size:38px}
 .shift-backdrop-holder{top:70px;height:calc(100svh - 70px);min-height:450px}
 .shift-message-content{margin-top:calc(-100svh + 70px);padding:55px 6vw 75px}
 .shift-message-title{font-size:29px;margin:0 0 75px}.shift-message-title>span{padding-inline:6px}
 .shift-message-box{max-width:100%;margin-bottom:65px}
 .shift-box-inner>p{font-size:18px;line-height:1.95;padding:12px 15px}
 .sphere-enhanced .sphere-scroll{height:440svh;min-height:2400px}
 .sphere-enhanced .sphere-stage{top:70px;height:calc(100svh - 70px);min-height:450px}
 .sphere-kicker{font-size:8px;top:25px}
 .sphere-message{font-size:clamp(14px,4.1vw,22px);letter-spacing:0;line-height:2.2}
 .sphere-message[data-sphere-message="0"]{font-size:26px}
 .sphere-message[data-sphere-message="5"] .sphere-line:last-child{font-size:12px}
 .sphere-enhanced .sphere-message{width:96%}
 .sphere-shot{width:20%;opacity:.48}.sphere-shot-a{top:12%;left:-4%}.sphere-shot-b{right:-4%;bottom:10%}
 .sphere-space{padding:95px 2vw}
}
@media(prefers-reduced-motion:reduce){
 .service-belt-run,.sphere-glyph,.sphere-glow,.sphere-shot{animation:none!important}
 .shift-box-inner{transform:none!important}
}

