/* V2 / immersion pass. Visual motion is isolated from text, controls and checkout. */
.vhero{position:relative;background:radial-gradient(ellipse at 82% 42%,#d5dcc9 0,transparent 52%),linear-gradient(115deg,#f8f5ee 35%,#e7e9da)}
.vhero::before{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(115deg,transparent 0,transparent 130px,#fff6 180px,transparent 230px);opacity:.32}
.immersive .paper-world{perspective:1100px;margin-bottom:35px;isolation:isolate}
.paper-scene{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(calc(5deg + var(--look-y,0deg))) rotateY(calc(-7deg + var(--look-x,0deg)));transition:transform .65s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.depth-layer{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none;--depth:0px;--lift:0px;--slide:0px;transform:translate3d(var(--slide),var(--lift),var(--depth));transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.depth-0{--depth:-70px;--lift:15px}
.depth-1{--depth:10px}
.depth-2{--depth:95px;--lift:-7px}
.depth-3{--depth:130px;--lift:-12px}
.depth-4{--depth:155px;--lift:7px}
.depth-5{--depth:0px}
.immersive .hero-folder{box-shadow:1px 1px 0 #789276,3px 3px 0 #294836,6px 5px 0 #163e2c,12px 18px 16px #142f253d,30px 42px 45px #183e3030;transform-style:preserve-3d;animation:folder-in 1.4s cubic-bezier(.2,.7,.2,1) backwards;transition:transform 1s cubic-bezier(.2,.8,.2,1),box-shadow 1s}
.immersive .hero-folder::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,#ffffff1a,transparent 35%,#081b1330);border-radius:inherit;pointer-events:none;border:1px solid #ffffff1a}
.immersive .hero-sheet{box-shadow:1px 1px 0 #bbbdaa,3px 3px 0 #fdfaf4,4px 4px 0 #c6c8b6,6px 6px 0 #fffdf6,10px 15px 15px #2f39212b,24px 35px 40px #25391d30;animation:sheet-in 1.6s .15s cubic-bezier(.2,.7,.2,1) backwards;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.immersive .note-one,.immersive .note-two{box-shadow:2px 2px 0 #c5c3a85e,12px 15px 20px #2e392322}
.table-shadow{position:absolute;left:13%;right:0;bottom:6%;height:65px;background:#29492d;filter:blur(30px);border-radius:50%;opacity:.17;transform:rotate(-5deg);pointer-events:none;transition:opacity 1s,scale 1s}
.immersive .world-circle{border-color:#9ea98a80;background:radial-gradient(ellipse at center,#d6ddc555,transparent 70%);transform:translateY(var(--travel,0px)) rotateX(12deg);transition:transform .2s linear}
.world-circle::after{border-style:dashed!important;border-color:#a6b28c77!important}
.immersive .paper-world.motion-visible .depth-2{animation:paper-drift 7s 1.8s ease-in-out infinite}
.immersive .paper-world.motion-visible .depth-3{animation:paper-drift 8s 2.4s ease-in-out infinite reverse}
.immersive .paper-world.motion-visible .depth-4{animation:paper-drift 6s 2s ease-in-out infinite}
@keyframes paper-drift{0%,100%{translate:0 0}50%{translate:0 -9px}}
.spread-control{position:absolute;right:18px;bottom:-38px;background:#fbf9f1d9;border:1px solid #a7b49a;border-radius:30px;padding:9px 17px;font:600 10px 'Instrument Sans',sans-serif;color:#294a32;cursor:pointer;box-shadow:0 4px 8px #324f2310;transition:background .2s,box-shadow .2s;z-index:5}
.spread-control:hover{background:#fffdf5;box-shadow:0 6px 15px #324f2320}
.paper-world.spread .depth-1{--slide:-26px;--lift:15px;--depth:-5px}
.paper-world.spread .depth-2{--slide:28px;--lift:-22px;--depth:135px}
.paper-world.spread .depth-3{--lift:-27px;--slide:-12px}
.paper-world.spread .hero-folder{transform:rotate(-18deg) rotateY(-9deg)}
.paper-world.spread .hero-sheet{transform:rotate(15deg) rotateY(8deg)}
.paper-world.spread .table-shadow{scale:1.15;opacity:.12}
.immersive .world-caption{z-index:4}
/* Covers become small physical objects instead of flat thumbnails. */
.depth-stage{--look-x:0deg;--look-y:0deg;--light-x:50%;--light-y:40%}
.vcard-art,.product-art{perspective:1000px;background-image:radial-gradient(ellipse at 70% 20%,#ffffed88,transparent 70%),linear-gradient(145deg,transparent,#a5b29830)}
.vcard-art::before,.product-art::before{content:'';position:absolute;width:75%;height:18%;left:15%;bottom:9%;background:#213e28;opacity:.15;border-radius:50%;filter:blur(18px);transform:rotate(-8deg);transition:opacity .5s,transform .5s;pointer-events:none}
.vcard-art::after,.product-art::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at var(--light-x) var(--light-y),#fffff940,transparent 65%);pointer-events:none;mix-blend-mode:soft-light}
.immersive .vcard-art>img{transform:rotateX(calc(8deg + var(--look-y))) rotateY(calc(-13deg + var(--look-x))) rotateZ(5deg) translateZ(18px);box-shadow:1px 1px 0 #c2c5b4,3px 3px 0 #fbfaf1,5px 5px 0 #d6d6c4,8px 10px 15px #2d44212b,18px 22px 30px #1b32152b;transition:transform .7s cubic-bezier(.2,.7,.2,1),box-shadow .7s}
.immersive .vcard:hover .vcard-art>img,.immersive .vcard:focus-visible .vcard-art>img{transform:rotateX(calc(4deg + var(--look-y))) rotateY(calc(-18deg + var(--look-x))) rotateZ(0deg) translate3d(5px,-13px,45px);box-shadow:2px 2px 0 #c2c5b4,4px 4px 0 #fbfaf1,6px 6px 0 #d6d6c4,15px 20px 22px #2d44212b,25px 32px 40px #1b32152b}
.mini-back{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.vcard:hover .mini-back{transform:rotate(-13deg) translate(-7px,4px)}
.card-round{transition:rotate .4s,background .4s,color .4s}.vcard:hover .card-round{rotate:45deg;background:var(--green);color:var(--paper)}
.product-cover{transform:rotateX(calc(5deg + var(--look-y))) rotateY(calc(-12deg + var(--look-x))) rotateZ(-9deg);transition:transform .9s cubic-bezier(.2,.7,.2,1);box-shadow:2px 2px 0 #c2c5b4,4px 4px 0 #fbfaf1,6px 6px 0 #d6d6c4,16px 22px 30px #1b321533}
.product-back{transition:transform 1.2s cubic-bezier(.2,.7,.2,1);transform:rotate(3deg) translate(-25px,10px)}
.product-art.has-arrived .product-back{transform:rotateX(var(--look-y)) rotateY(var(--look-x)) rotateZ(12deg) translate(10px,-8px)}
.product-art.looking .product-cover{transform:rotateX(var(--look-y)) rotateY(calc(-15deg + var(--look-x))) rotateZ(-12deg) translate(-9px,-5px)}
/* Layered preview stage; the content stays still and readable. */
.preview-stage{perspective:1100px;background:radial-gradient(ellipse at 20% 0,#f6f4e3,transparent 75%),#e0e5d5}
.preview-stage::before,.preview-stage::after{content:'';position:absolute;background:#f7f5e9;width:57%;height:76%;top:12%;left:23%;border:1px solid #d7dac8;box-shadow:5px 8px 15px #293d2020;transform:rotate(-5deg);transition:transform 1s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.preview-stage::after{transform:rotate(-2deg);background:#eef0e3}
.preview-stage.has-arrived::before{transform:translateY(var(--travel,0px)) rotate(-9deg)}
.preview-stage.has-arrived::after{transform:rotate(5deg)}
.preview-stage .page-zoom{z-index:1;transform:rotateX(3deg) rotateY(-5deg) rotateZ(1deg);box-shadow:3px 4px 0 #d8dacb,14px 20px 28px #293d2029}
.preview-stage .page-zoom:hover{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateY(-5px)}
.preview-stage .stage-label,.preview-caption{position:relative;z-index:2}.preview-stage .stage-label{position:absolute}.preview-caption{min-height:16px}
.preview-image.changing{animation:folio-turn .6s cubic-bezier(.2,.65,.2,1);transform-origin:left center}
@keyframes folio-turn{0%{opacity:.3;transform:perspective(1000px) rotateY(-22deg) translateX(14px)}100%{opacity:1;transform:perspective(1000px) rotateY(0) translateX(0)}}
/* The domestic scene lifts away from its background as it enters. */
.calm-section{position:relative;background:radial-gradient(ellipse at 18% 60%,#55705288,transparent 60%),#234b39}
.calm-art{perspective:1000px;transform-style:preserve-3d}
.calm-orbit{border-color:#c3d2a72e;box-shadow:0 0 0 30px #c3d2a708,0 0 0 70px #c3d2a706;transform:rotateX(28deg) translateY(var(--travel,0px))}
.demo-page{transform:rotateX(calc(4deg + var(--look-y))) rotateY(calc(-8deg + var(--look-x))) rotateZ(-7deg) translateY(var(--travel,0px));box-shadow:3px 3px 0 #e4e6d4,6px 6px 0 #d5dbc4,15px 25px 35px #0b231e55;transition:transform .6s}
.calm-tag{transform:translateZ(80px) rotate(8deg) translateY(calc(var(--travel,0px)*-1));transition:transform .6s;box-shadow:12px 17px 25px #0b231e55}
.calm-art.motion-visible .calm-tag{animation:paper-drift 7s ease-in-out infinite}
.steps{position:relative}.steps::before{content:'';position:absolute;top:-1px;left:0;height:2px;width:100%;background:#698359;transform:scaleX(0);transform-origin:left;transition:transform 1.8s cubic-bezier(.2,.7,.2,1)}.steps.has-arrived::before{transform:scaleX(1)}
.vcard-grid>.vcard:nth-child(2),.steps>div:nth-child(2),.guide-cards>a:nth-child(2){animation-delay:100ms}.vcard-grid>.vcard:nth-child(3),.steps>div:nth-child(3),.guide-cards>a:nth-child(3){animation-delay:200ms}
.choices a{position:relative}.choices a::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#dce3cf,transparent);transform:scaleX(0);transform-origin:left;transition:transform .4s;z-index:-1}.choices a:hover::before{transform:scaleX(1)}
.reading-progress{position:fixed;top:0;left:0;right:0;height:3px;background:#8b9a63;z-index:80;transform-origin:left;transform:scaleX(0);pointer-events:none}
.motion-control{position:fixed;bottom:16px;right:18px;z-index:49;display:flex;align-items:center;gap:8px;border:1px solid #b4bda7;background:#f8f5eee8;backdrop-filter:blur(8px);border-radius:30px;color:#3d583d;font:400 10px 'Instrument Sans',sans-serif;padding:9px 13px;box-shadow:0 4px 12px #243c2015;cursor:pointer}.motion-control span{font-size:11px}.motion-control:disabled{cursor:default;opacity:.75}
.motion-paused .depth-layer,.motion-paused .calm-tag,.tab-hidden .depth-layer,.tab-hidden .calm-tag{animation-play-state:paused!important}
.motion-paused .paper-scene{transform:rotateX(5deg) rotateY(-7deg)}
.motion-paused .depth-stage{--look-x:0deg!important;--look-y:0deg!important;--travel:0px!important}
.motion-paused .preview-image.changing{animation:none}
.quiet-page .product-back{transform:rotate(9deg)!important}.quiet-page .product-cover{transform:rotate(-9deg)!important}
@media(max-width:800px){.paper-scene{transform:rotateX(3deg) rotateY(-5deg)}.depth-2{--depth:50px}.depth-3{--depth:70px}.depth-4{--depth:80px}.spread-control{bottom:-30px;right:12px}.paper-world.spread .depth-2{--slide:8px;--depth:65px}.paper-world.spread .depth-1{--slide:-8px}.immersive .vhero{padding-bottom:48px}.motion-control{bottom:10px;right:10px;font-size:9px;padding:8px 11px}.preview-stage::before,.preview-stage::after{width:65%;left:19%}}
@media(max-width:480px){.paper-scene{transform:rotateX(2deg) rotateY(-4deg)}.depth-2{--depth:28px}.depth-3{--depth:40px}.depth-4{--depth:45px}.paper-world.spread .depth-2{--depth:40px;--slide:0px}.immersive .hero-sheet{left:160px}.immersive .paper-world{margin-bottom:35px}.spread-control{font-size:9px;padding:8px 12px}.preview-stage::before,.preview-stage::after{width:68%;height:74%;left:17%}.motion-control{background:#f8f5eef5}.vcard-art::before{filter:blur(10px)}}
@media(prefers-reduced-motion:reduce){.depth-layer,.calm-tag{animation:none!important}.paper-scene{transform:none!important}.depth-stage{--look-x:0deg!important;--look-y:0deg!important;--travel:0px!important}.depth-layer{translate:none!important}.preview-stage::before,.preview-stage::after,.demo-page,.calm-tag{transition:none!important}.reading-progress{display:none}.preview-image.changing{animation:none!important}}
/* Leave clear space around the spread, including the PDF format disclosure. */
.paper-scene{scale:.92;transform-origin:50% 48%}
.immersive .world-caption{bottom:-20px;left:80px}
.spread-control{bottom:-53px}
.immersive .world-note{top:-28px;right:14px}
.motion-paused .reveal{animation:none!important}
.motion-paused .steps::before{transition:none}
@media(max-width:800px){.paper-scene{scale:.96}.immersive .world-caption{bottom:-17px;left:65px}.spread-control{bottom:-49px}.immersive .world-note{top:-20px;right:10px}.immersive .paper-world{margin-bottom:48px}}
@media(max-width:480px){.paper-scene{scale:.93}.immersive .world-caption{left:30px;font-size:6px}.immersive .world-note{top:-18px;right:8px}}