/* Layered surfaces and light, using the existing motion and scroll clocks. */
#welcome>.hero,#welcome>.meaning-section,#welcome>.editions-section,#welcome>.closing-section{perspective:1400px}
.depth-atmosphere{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1;perspective:900px;border-radius:inherit}
.depth-orb{position:absolute;width:clamp(140px,20vw,280px);aspect-ratio:1;right:clamp(36px,5vw,80px);top:96px;border-radius:50%;background:radial-gradient(circle at 28% 22%,#e4c9ff52 0%,#9864d330 22%,#402a6533 56%,#0c101a88 78%);box-shadow:inset -20px -22px 40px #04071177,inset 1px 2px 6px #e3c7ff30,0 30px 60px #0002;transform:translate3d(0,calc(var(--chapter-y,0px)*-.6),-35px);opacity:.7}
.depth-ring{position:absolute;right:clamp(130px,13vw,190px);top:120px;width:clamp(180px,25vw,360px);aspect-ratio:1;border:5px solid #dfc6ffd1;border-radius:50%;box-shadow:0 0 14px #bb8ff84d,0 0 32px #a174de29,inset 0 0 18px #c5a0f52e;transform:translateY(calc(var(--chapter-y,0px)*.5)) rotateX(64deg) rotateZ(-24deg)}
.depth-grid{position:absolute;width:720px;height:430px;bottom:-220px;left:50%;background-image:linear-gradient(#ad8cd025 1px,transparent 1px),linear-gradient(90deg,#ad8cd025 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse,#0009,transparent 68%);transform:translateX(-50%) rotateX(66deg);transform-origin:center top}
#welcome>.why-section .depth-orb,#welcome>.questions-section .depth-orb{right:auto;left:clamp(36px,5vw,80px);top:auto;bottom:64px;opacity:.35}
#welcome>.inside-section .depth-ring{top:auto;bottom:200px;opacity:.85}
.hero-demo,.journey-stage,.thoughtful-grid,.reference-cards,.edition-cards,.landing-detail-grid{perspective:1100px}
.hero-demo .demo-preview,.landing-detail-grid article,.edition-card{position:relative;transform-style:preserve-3d;transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform 240ms ease-out,box-shadow 240ms ease-out;border-bottom-width:3px;box-shadow:0 18px 40px #0003,inset 0 1px #fff2}
body[data-edition=cloud] .hero .hero-demo{box-shadow:0 24px 58px #0004,inset 0 1px #fff9;border-bottom-width:4px}
.hero-demo .demo-preview{box-shadow:0 18px 32px #241b3440;border-bottom:3px solid #493452}
.hero-demo .demo-window-bar{background:linear-gradient(110deg,#30233d,#171423);box-shadow:inset 0 1px #fff2}
.hero-demo .demo-preview-call{box-shadow:0 6px 0 #56376f,0 14px 28px #0006;transition:box-shadow 180ms,background 180ms}
.hero-demo .demo-preview-call:active{box-shadow:0 2px 0 #56376f,0 6px 14px #0005}
.thoughtful-card,.reference-cards article,.edition-card,.landing-detail-grid article{background-image:radial-gradient(circle at var(--spotlight-x,30%) var(--spotlight-y,20%),#dcc2ff12,transparent 65%),linear-gradient(140deg,#ffffff07,#ffffff01);box-shadow:0 16px 38px #0002,inset 0 1px #e6d6ff19;border-bottom:3px solid #84709938}
.thoughtful-card .feature-icon,.reference-card-top,.edition-label{transform:translateZ(18px)}
.source-orbit,.person-illustration{box-shadow:0 12px 22px #0002,inset 0 1px #fff1}
@media(hover:hover) and (pointer:fine){html[data-motion=running] .hero-demo .demo-preview:hover,html[data-motion=running] .edition-card:hover,html[data-motion=running] .landing-detail-grid article:hover{box-shadow:0 28px 55px #0004,inset 0 1px #fff3}}
@media(max-width:760px),(pointer:coarse){.depth-orb{width:140px;opacity:.35;right:32px;top:40px}.depth-ring{width:160px;right:76px;top:72px;opacity:.85}#welcome>.why-section .depth-orb,#welcome>.questions-section .depth-orb{left:32px;bottom:48px}.depth-grid{opacity:.4}.hero-demo .demo-preview,.landing-detail-grid article,.edition-card{transform:none!important}.thoughtful-card .feature-icon,.reference-card-top,.edition-label{transform:none}}
html[data-motion=paused] .depth-atmosphere>*{transform:none!important}
@media(prefers-reduced-motion:reduce){.depth-atmosphere>*{transform:none!important}[data-tilt],.thoughtful-card .feature-icon,.reference-card-top,.edition-label{transform:none!important;transition:none!important}}
/* Autonomous drifting composes with the scroll transform rather than replacing it. */
.depth-orb{animation:depth-float 8s ease-in-out infinite alternate;animation-play-state:paused}
.depth-ring{animation:depth-orbit 14s ease-in-out infinite alternate;animation-play-state:paused}
#welcome>[data-onboarding-panel]:nth-of-type(even) .depth-orb{animation-delay:-4s;animation-duration:10s}
#welcome>[data-onboarding-panel]:nth-of-type(3n) .depth-ring{animation-delay:-7s}
html[data-motion=running][data-page-visibility=visible] #welcome>[data-depth-visible=true] .depth-orb,html[data-motion=running][data-page-visibility=visible] #welcome>[data-depth-visible=true] .depth-ring{animation-play-state:running}
@keyframes depth-float{0%{translate:-14px 12px}50%{translate:12px -24px}100%{translate:-4px -8px}}
@keyframes depth-orbit{from{rotate:-7deg;translate:0 8px}to{rotate:9deg;translate:0 -12px}}
html[data-motion=paused] .depth-orb,html[data-motion=paused] .depth-ring{animation:none;translate:none;rotate:none}
@media(prefers-reduced-motion:reduce){.depth-orb,.depth-ring{animation:none!important;translate:none!important;rotate:none!important}}
/* Keep card illustrations on the card plane: nested positive-Z layers can
   disappear when their preserve-3d ancestor also clips its contents. */
.thoughtful-card{transform-style:flat}
.thoughtful-card h3,.thoughtful-card .feature-icon,.thoughtful-card .source-orbit,.thoughtful-card .person-illustration{transform:none}
.thoughtful-card .source-orbit,.thoughtful-card .person-illustration{position:relative;z-index:1;isolation:isolate;opacity:1;visibility:visible}
.thoughtful-card .source-orbit{width:100%;max-width:100%;margin:24px 0 0;border:1px solid #a58abc33;border-radius:10px;background:#11182770;box-shadow:inset 0 1px #dfc6ff0d}
.thoughtful-card .source-orbit i{z-index:0}
.thoughtful-card .orbit-source,.thoughtful-card .orbit-text,.thoughtful-card .orbit-reply{z-index:1}
.thoughtful-card .person-illustration{background:#141c2acc;border-color:#b39ac344;box-shadow:0 10px 22px #0002}
/* All three source steps stay in normal flow; no rotated absolute tiles. */
.thoughtful-card .source-orbit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:12px;height:auto;min-height:155px;padding:18px}
.thoughtful-card .source-orbit>.orbit-source,.thoughtful-card .source-orbit>.orbit-text,.thoughtful-card .source-orbit>.orbit-reply{position:static;inset:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;width:auto;height:auto;min-width:0;min-height:92px;padding:12px 8px;margin:0;transform:none;opacity:1;visibility:visible;font-size:11px;line-height:1.5;text-align:center;border:1px solid #b495d155;border-radius:8px;box-shadow:0 5px 12px #0002;color:#eadcf7}
.thoughtful-card .source-orbit>.orbit-source{background:#30263e}
.thoughtful-card .source-orbit>.orbit-text{background:#282237}
.thoughtful-card .source-orbit>.orbit-reply{background:#1c3037;color:#c4e1d9;border-color:#82b8aa55}
.thoughtful-card .source-orbit>i{display:none}
@media(max-width:480px){.thoughtful-card .source-orbit{grid-template-columns:1fr;gap:10px;padding:14px}.thoughtful-card .source-orbit>.orbit-source,.thoughtful-card .source-orbit>.orbit-text,.thoughtful-card .source-orbit>.orbit-reply{min-height:64px}.thoughtful-card .source-orbit>.orbit-source{flex-direction:row}}