/* One pastel world. Portraits are still photographs; depth lives around them. */
.cinema-world{--world-color:223 240 222;--world-x:56%;--world-depth:0px;--world-turn:0deg;--world-pointer:0px;position:fixed;inset:0;z-index:0;overflow:clip;pointer-events:none;background:rgb(var(--world-color));contain:paint}
.story-ready main{position:relative;z-index:1}
.story-ready .scene,.story-ready .contact-scene .stage{background:transparent}
/* Sections already reserve their header space; native hashes match our chapter links. */
.story-ready .scene{scroll-margin-top:-90px}
.world-light{position:absolute;left:var(--world-x);top:-15%;width:105vw;height:130svh;border-radius:50%;transform:translate3d(calc(-50% + var(--world-pointer)),var(--world-depth),0);background:radial-gradient(ellipse at 50% 40%,#fff9e6c9,transparent 65%);opacity:.8}
.world-ribbon{position:absolute;left:var(--world-x);top:8%;width:110vw;height:110svh;transform:translate3d(calc(-50% - var(--world-pointer)),calc(var(--world-depth)*-1),0) rotate(var(--world-turn));transform-origin:50% 55%}
.world-ribbon>i{position:absolute;inset:0;border:1px solid #fffdf5aa;border-radius:50%;background:linear-gradient(150deg,#fffaf040,transparent 45%,#fff9ed35);box-shadow:inset 0 28px 90px #fffdf52b}
.world-ribbon>i+i{inset:8% -18% -20% 12%;border-color:#63866f16;background:none;box-shadow:none}
.world-motes{position:absolute;inset:0;opacity:.55;transform:translate3d(calc(var(--world-pointer)*-.5),calc(var(--world-depth)*.45),0)}
.world-motes>i{position:absolute;left:8%;top:29%;width:5px;height:5px;border-radius:50%;background:#fffefa;box-shadow:0 0 10px #fffefa;animation:world-breathe 14s ease-in-out infinite}
.world-motes>i:nth-child(2){left:88%;top:18%;width:3px;height:3px;animation-delay:-4s}
.world-motes>i:nth-child(3){left:44%;top:83%;width:4px;height:4px;animation-delay:-8s}
.world-motes>i:nth-child(4){left:95%;top:69%;animation-delay:-11s}
.world-motes>i:nth-child(5){left:21%;top:8%;width:3px;height:3px;animation-delay:-6s}
.world-motes>i:nth-child(6){left:68%;top:55%;width:3px;height:3px;animation-delay:-2s}
@keyframes world-breathe{0%,25%,85%,100%{opacity:.2;translate:0 0}55%{opacity:.72;translate:0 -7px}}
.cinema-world.is-quiet .world-motes>i,.page-is-hidden .world-motes>i{animation-play-state:paused}
.story-ready .cinema-wing,.story-ready .cinema-cells,.story-ready .cinema-horizon{display:none}
.story-ready .cinema-halo{opacity:calc(.65 - var(--portrait-release)*.45)}
.story-ready .cinema-halo>i{border-color:#fff9ef66;box-shadow:none;opacity:.45}
.story-ready .cell-pattern{opacity:.16}
/* The arch finishes inside the hero, so the stage cannot slice its pale base. */
.story-ready .hero-scene .portrait-arch{height:81%;border-bottom:0;-webkit-mask-image:linear-gradient(#000 0%,#000 54%,transparent 100%);mask-image:linear-gradient(#000 0%,#000 54%,transparent 100%)}

/* Portrait compositions share a light source, with their own editorial framing. */
.story-ready .scene:not(.hero-scene) .portrait-frame::before{border:1px solid #fff9ee99;background:linear-gradient(145deg,#fffdf569,#fffdf510 65%);box-shadow:inset 0 0 80px #fff9ed28;transform:none}
.story-ready .coaching-scene:not(.hero-scene) .portrait-frame::before{inset-inline:7% 1%;border-radius:48% 48% 8% 8%}
.story-ready .sheets-scene:not(.hero-scene) .portrait-frame::before{inset-inline:1% 7%;border-radius:32% 44% 7% 7%;rotate:0deg}
.story-ready .services-scene:not(.hero-scene) .portrait-frame::before{inset-inline:2% 9%;border-radius:44% 32% 8% 8%}
.story-ready .contact-scene:not(.hero-scene) .portrait-frame::before{inset-inline:4%;border-radius:48% 48% 32% 32%}
.story-ready .scene .portrait-arrival{transform-origin:50% 24%}
.story-ready.portrait-ready .hero-scene .portrait-arrival.is-arrived{animation:portrait-story-hero 1000ms var(--cinema-ease) var(--portrait-cue,0ms) both}
.story-ready.portrait-ready .coaching-scene .portrait-arrival.is-arrived{animation:portrait-story-present 760ms var(--cinema-ease) var(--portrait-cue,0ms) both}
.story-ready.portrait-ready .sheets-scene .portrait-arrival.is-arrived{animation:portrait-story-page 820ms var(--cinema-ease) var(--portrait-cue,0ms) both}
.story-ready.portrait-ready .services-scene .portrait-arrival.is-arrived{animation:portrait-story-flow 780ms var(--cinema-ease) var(--portrait-cue,0ms) both}
.story-ready.portrait-ready .contact-scene .portrait-arrival.is-arrived{animation:portrait-story-hello 880ms var(--cinema-ease) var(--portrait-cue,0ms) both}
.story-ready.portrait-ready .scene .portrait-arrival.portrait-arrived{animation:none;opacity:1;transform:none;clip-path:none;will-change:auto}
@keyframes portrait-story-hero{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}
@keyframes portrait-story-present{from{opacity:0;transform:translate3d(-9px,0,0);clip-path:inset(0 4% 7% 0 round 28px)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0 round 0px)}}
@keyframes portrait-story-page{from{opacity:0;transform:translate3d(0,9px,0);clip-path:inset(0 0 12% 0 round 28px)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0 round 0px)}}
@keyframes portrait-story-flow{from{opacity:0;transform:translate3d(8px,0,0);clip-path:inset(0 0 5% 3% round 28px)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0 round 0px)}}
@keyframes portrait-story-hello{from{opacity:0;transform:translate3d(0,6px,0)}to{opacity:1;transform:none}}
.story-ready.sequence-ready .cinema-heading.is-revealed:not(.reveal-done) .cinema-line{animation-duration:550ms}
.story-ready.sequence-ready .hero-scene .cinema-heading.is-revealed:not(.reveal-done) .cinema-line{animation-duration:660ms}
.story-ready.sequence-ready .reveal-item[data-entry="detail"]{--reveal-y:8px;--reveal-duration:460ms}
.story-ready.sequence-ready .reveal-item[data-entry="showcase"]{--reveal-y:10px;--reveal-duration:580ms}
.story-ready.sequence-ready .reveal-item[data-entry="card"]{--reveal-y:8px;--reveal-duration:440ms}

/* Clay has weight, a diffuse underside shadow and a quiet specular response. */
.story-ready .cinema-art{position:relative;isolation:isolate}
.story-ready .cinema-art::before{content:'';position:absolute;inset:10%;z-index:-1;border-radius:50%;background:radial-gradient(ellipse,#fff6d7a6,transparent 70%);opacity:.3;transition:opacity .45s var(--cinema-ease);pointer-events:none}
.story-ready .cinema-art::after{content:'';position:absolute;z-index:-1;left:24%;right:20%;bottom:-7%;height:17%;border-radius:50%;background:radial-gradient(ellipse,#28594e1c,transparent 72%);opacity:var(--art-shadow-opacity,.65);transform:translateY(var(--art-height,0px)) scale(var(--art-shadow-scale,1));pointer-events:none}
.story-ready .floating-art img{filter:drop-shadow(0 8px 11px #52674d19)}
.story-ready .floating-art:hover .cinema-art::before,.story-ready .floating-art:focus-visible .cinema-art::before{opacity:.9}
.story-ready .floating-art[data-mass="heavy"] img{animation:story-heavy-rest 11s ease-in-out infinite}
.story-ready .floating-art[data-mass="light"] img{animation:story-light-rest 9s ease-in-out infinite}
@keyframes story-heavy-rest{0%,18%,82%,100%{translate:0 0}48%,55%{translate:0 -3px}}
@keyframes story-light-rest{0%,14%,86%,100%{translate:0 0}48%,55%{translate:0 -5px}}
.story-ready .scene:not(.is-motion-active) .floating-art img,.story-ready .scene.is-reading .floating-art img,.page-is-hidden.story-ready .floating-art img{animation-play-state:paused}
.story-ready .workbook-window{transform-origin:50% 25%;backface-visibility:hidden}
.story-ready .workbook-preview:focus-within .workbook-window{transform:none}

@media(max-width:1000px){
 .world-light{width:150vw;height:100svh;top:-4%}.world-ribbon{width:145vw;top:12%;height:82svh}
 .world-motes>i:nth-child(n+4){display:none}
 .story-ready .scene:not(.hero-scene) .portrait-frame::before{inset:0 3% 12px;height:auto;border-radius:43% 43% 10% 10%}
 .story-ready .coaching-scene .portrait-frame>.floating-art{left:12px;right:auto;top:70px}
 .story-ready.portrait-ready .scene .portrait-arrival.is-arrived{animation:portrait-story-phone 540ms var(--cinema-ease) var(--portrait-cue,0ms) both}
 .story-ready.portrait-ready .scene .portrait-arrival.portrait-arrived{animation:none}
 @keyframes portrait-story-phone{from{opacity:0;transform:translate3d(0,5px,0)}to{opacity:1;transform:none}}
}
@media(max-width:600px){
 .world-light{opacity:.65}.world-ribbon{opacity:.6}.world-ribbon>i+i{display:none}.world-motes{opacity:.3}
 .story-ready .floating-art[data-mass] img{animation:story-phone-rest 12s ease-in-out infinite}
 @keyframes story-phone-rest{0%,20%,80%,100%{translate:0 0}50%{translate:0 -2px}}
 .story-ready.sequence-ready .cinema-heading.is-revealed:not(.reveal-done) .cinema-line{animation-duration:440ms}
 .story-ready.sequence-ready .reveal-item[data-entry="detail"]{--reveal-y:5px;--reveal-duration:360ms}
}
.reduced-motion .cinema-world *{animation:none!important;transform:none!important;translate:none!important;transition:none!important}
.reduced-motion .world-light,.reduced-motion .world-ribbon{left:50%;transform:translateX(-50%)!important}
.reduced-motion.story-ready .floating-art img{animation:none!important}
.reduced-motion.story-ready .portrait-arrival{animation:none!important;opacity:1!important;transform:none!important;clip-path:none!important}
@media(prefers-reduced-motion:reduce){
 .cinema-world *{animation:none!important;transition:none!important}.world-motes{transform:none}
 .world-light,.world-ribbon{left:50%;transform:translateX(-50%)!important}
 .story-ready .floating-art img,.story-ready .portrait-arrival{animation:none!important;clip-path:none!important}
}

/* Keep a complete photo composition through the native sticky release. */
@media(min-width:1001px){
 .story-ready .scene:not(.hero-scene) .portrait-frame{height:var(--portrait-view)}
 .story-ready .scene:not(.hero-scene) .portrait-window{height:var(--portrait-view);clip-path:none;-webkit-mask-image:linear-gradient(#000 calc(100% - 8px),transparent);mask-image:linear-gradient(#000 calc(100% - 8px),transparent);border-radius:0 0 30px 30px}
 .story-ready .scene:not(.hero-scene) .portrait-interaction{height:var(--portrait-view)}
 .story-ready .scene:not(.hero-scene) .portrait-frame::before{top:-10px;height:calc(var(--portrait-view) + 10px);border-radius:48% 48% 30px 30px}
 .story-ready .sheets-scene:not(.hero-scene) .portrait-frame::before{border-radius:28px;background:linear-gradient(130deg,#fffdf54d,transparent 65%);inset-inline:4%}
 .story-ready .services-scene:not(.hero-scene) .portrait-frame::before{border:0;background:radial-gradient(ellipse at 48% 38%,#fffdf56b,transparent 72%);box-shadow:none;border-radius:50%}
 .story-ready .contact-scene:not(.hero-scene) .portrait-frame::before{border:0;background:radial-gradient(ellipse at 48% 38%,#fffdf55e,transparent 74%);box-shadow:none;border-radius:50%}
 .story-ready .contact-panel{background:none;border:0;box-shadow:none;padding:16px 8px 24px}
 .story-ready .sheets-scene .portrait-tap-hint,.story-ready .contact-scene .portrait-tap-hint{left:16px;right:auto;top:calc(var(--portrait-view)*.77)}
 .story-ready .services-scene .portrait-frame>.floating-art{left:8%;top:47%;width:76px;height:76px}
 .story-ready .contact-scene .portrait-frame>.floating-art{left:7%;right:auto;top:52%;width:68px;height:68px}
}
/* A small shared base anchors the crop without a long milky gown fade. */
.story-ready .scene:not(.hero-scene) .portrait-frame::after{inset:auto 24% -1px;height:15px;border-radius:50%;background:radial-gradient(ellipse,#28594e24,transparent 72%);opacity:.38;transform:none}
.story-ready .contact-scene:not(.hero-scene) .portrait-frame::after{left:18%;right:10%}
/* Small, consistent header surfaces leave the portrait and message in charge. */
.story-ready .desktop-nav{background:#fff9f0d9;border-color:#fff9ef99;box-shadow:none;gap:22px;padding:13px 21px}
.story-ready .brand:before{background:#fff9f0d9;border-color:#fff9ef99}
.story-ready .motion-control .motion-label{display:none}
.story-ready .motion-control button{width:44px;padding:0}
/* Withdraw an opaque menu. Text never crossfades over the destination. */
@media(max-width:1000px){
 .story-ready .mobile-menu{opacity:1;transform:none;clip-path:inset(0 0 100% 0);transition:clip-path 200ms var(--cinema-ease),visibility 0s linear 200ms}
 .story-ready .menu-open .mobile-menu{opacity:1;transform:none;clip-path:inset(0);transition:clip-path 260ms var(--cinema-ease),visibility 0s}
}
.story-ready body:has(.chapter-nav a:hover) .portrait-tap-hint,.story-ready body:has(.chapter-nav a:focus-visible) .portrait-tap-hint{opacity:0}
/* The orbit belongs to the active workbook. It follows real demo data. */
.art-progress{position:absolute;inset:-5px;z-index:-1;pointer-events:none;opacity:.7}
.art-progress svg{display:block;width:100%;height:100%;overflow:visible;rotate:-90deg}
.art-progress circle{fill:none;stroke:#789d7b26;stroke-width:2}
.art-progress .art-progress-value{stroke:#7f9e79;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:var(--sheet-progress,35);transition:stroke-dashoffset .65s var(--cinema-ease)}
.art-value-label{position:absolute;z-index:2;left:50%;top:calc(100% + 4px);translate:-50% 0;white-space:nowrap;padding:4px 7px;border-radius:12px;border:1px solid #bfd0b8;background:#fffaf3;font:800 10px/1.2 var(--body);color:var(--pine);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s,visibility .18s}
.floating-art:hover .art-value-label,.floating-art:focus-visible .art-value-label,.floating-art.has-value-cue .art-value-label,.is-reading .art-value-label{opacity:1;visibility:visible}
.floating-art[data-rescue="complete"] .art-value-label{background:#e8f0df}
.story-ready .floating-art[data-mass="heavy"] img{animation-duration:15s}
.story-ready .floating-art[data-mass="light"] img{animation-duration:13s}
/* The garden rises out of the final scene without adding another section. */
@media(min-width:768px){.story-ready .arcade-section::before{content:'';position:absolute;left:0;right:0;top:-55px;height:56px;background:linear-gradient(180deg,transparent,#fff9f0);pointer-events:none}}
@media(max-width:1000px){
 .story-ready .services-scene:not(.hero-scene) .portrait-frame::before,.story-ready .contact-scene:not(.hero-scene) .portrait-frame::before{border:0;background:radial-gradient(ellipse at 48% 40%,#fffdf55e,transparent 74%);box-shadow:none}
 .story-ready .contact-panel{background:none;border:0;box-shadow:none;padding:25px 0}
 .art-progress{inset:-3px}
}
@media(max-width:600px){
 .story-ready .hero-scene>.stage{padding-bottom:12px}
 .story-ready .scene:not(.hero-scene)>.stage{padding-top:88px;padding-bottom:28px}
 .story-ready .scene:not(.hero-scene) .scene-topline{display:block;margin-bottom:10px}
 .story-ready .scene-topline>.eyebrow:nth-child(2){display:none}
 .story-ready .scene-topline>.cinema-heading{font:500 clamp(28px,7.3vw,32px)/1.08 var(--display);letter-spacing:-.035em;margin:10px 0 8px;max-width:100%;color:var(--pine)}
 .story-ready .scene-topline>.cinema-heading em{font-style:normal;color:var(--purple)}
 .story-ready .scene:not(.hero-scene) .portrait-window{-webkit-mask-image:linear-gradient(#000 calc(100% - 8px),transparent);mask-image:linear-gradient(#000 calc(100% - 8px),transparent)}
}
/* Chapter navigation belongs to the portfolio. The garden gets a quiet edge. */
.chapter-nav{transition:opacity .18s,visibility .18s}
.footer-in-view .chapter-nav{opacity:0;visibility:hidden;pointer-events:none}
.footer-in-view .desktop-nav:not(:focus-within){opacity:0;visibility:hidden;pointer-events:none}
.site-header .desktop-nav{transition:opacity .2s,visibility .2s}
body:has(#excel-arena:focus-within) .site-header{translate:0 -110%;visibility:hidden}
.site-header{transition:translate .25s var(--cinema-ease),visibility .25s}
.reduced-motion .art-progress-value{transition:none}
@media(prefers-reduced-motion:reduce){.art-progress-value{transition:none}}
