/* Scene composition: independent visual stories share one bounded stage. */
.hero-visual{--scene-scale:1;--mx:0;--my:0;perspective:1400px}
.scene-layer{position:absolute;inset:47px 0 50px;opacity:0;visibility:hidden;pointer-events:none;transform:translate3d(90px,18px,-80px) rotateY(-8deg);transition:opacity .55s ease,transform .65s cubic-bezier(.22,.8,.22,1),visibility 0s .65s;transform-style:preserve-3d}
.scene-layer.is-active{opacity:1;visibility:visible;pointer-events:auto;transform:translate3d(0,0,0);transition-delay:0s;z-index:2}
.scene-layer.is-leaving{visibility:visible;transform:translate3d(-145px,-15px,-150px) rotateY(12deg);pointer-events:none;z-index:1}
.scene-model{position:absolute;width:480px;height:480px;left:50%;top:50%;margin:-240px;transform:scale(var(--scene-scale));transform-style:preserve-3d}
.template-scene .scene{inset:0;transform:none;perspective:1200px;pointer-events:none}
.template-scene .parcel{top:280px;left:100px}
.template-scene .label-stack{top:30px;left:141px}
.template-scene .cursor-object{display:none}
.template-scene .single-flight{position:absolute;inset:0;transform-style:preserve-3d}
.template-scene.is-active .package-flight{animation:package-arrive 1s cubic-bezier(.19,1,.22,1) both}
.template-scene.is-active .label-flight{animation:label-arrive 1.2s .1s cubic-bezier(.19,1,.22,1) both}
.template-scene .parcel-word{font-size:10px}
.hero-visual .float-chip{pointer-events:none;z-index:4;transition:opacity .4s}
.hero-visual[data-scene=constructor] .chip-size{opacity:0}
.hero-visual[data-scene=constructor] .chip-ready{opacity:0}
.hero-visual[data-scene=excel] .chip-size{opacity:0}
.hero-visual[data-scene=excel] .chip-ready{opacity:0}
.hero-visual .scene-bottom{z-index:8;gap:10px}
#scene-hint{font-size:9px;line-height:1.4;max-width:75%}
.template-scene .scene{translate:calc(var(--mx)*9px) calc(var(--my)*6px)}
.orbital{translate:calc(var(--mx)*-7px) calc(var(--my)*-6px);transition:translate .15s linear}
.design-piece{touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.design-piece.is-dragging{cursor:grabbing;z-index:20!important}
.design-piece:focus-visible{outline:2px solid #7966d2;outline-offset:7px;border-radius:7px}
.design-piece.is-dragging .design-piece-face{animation:none!important;box-shadow:0 15px 28px #54447b30}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* The card itself and its CTA stay still: only the demonstration responds. */
.tool-card{--mx:0;--my:0;perspective:1000px;isolation:isolate}
.tool-card:hover{transform:none}
.card-art{perspective:800px;transform-style:preserve-3d}
/* Keep parallax without a separate glare plane over the label. */
.main-label{transform:translate3d(calc(var(--mx)*15px),calc(var(--my)*10px),25px) rotateX(calc(var(--my)*-9deg)) rotateY(calc(var(--mx)*13deg)) rotate(6deg);transition:box-shadow .3s}
.back-label{transform:translate3d(calc(var(--mx)*-11px),calc(var(--my)*-6px),-15px) rotate(-12deg)}
.design-label{transform:translate3d(calc(var(--mx)*10px),calc(var(--my)*7px),15px) rotateX(calc(var(--my)*-7deg)) rotateY(calc(var(--mx)*11deg)) rotate(-5deg)}
.design-tool{translate:calc(var(--mx)*-14px) calc(var(--my)*-10px);rotate:calc(var(--mx)*-8deg)}
.design-cursor{translate:calc(var(--mx)*16px) calc(var(--my)*12px)}
.constructor-card .selection{translate:calc(var(--mx)*7px) calc(var(--my)*-4px)}
.excel-card .sheet{transform:translate3d(calc(var(--mx)*-9px),calc(var(--my)*7px),5px) rotateY(calc(var(--mx)*8deg)) rotate(-5deg)}
.pdf-badge{transform:translate3d(calc(var(--mx)*19px),calc(var(--my)*-12px),40px) rotate(calc(5deg + var(--mx)*6deg))}
.has-arrived .card-art{animation:art-arrive .95s cubic-bezier(.2,.75,.2,1) both}
.tool-card:nth-child(2).has-arrived .card-art{animation-delay:.1s}
.tool-card:nth-child(3).has-arrived .card-art{animation-delay:.2s}
/* CSS 3D thermal printer: the lower page has its own tactile object. */
.flow-section{--mx:0;--my:0;position:relative;overflow:hidden}
.flow-layout{position:relative;z-index:1}
.print-model{position:relative;width:310px;height:180px;margin:26px 0 0;perspective:850px;isolation:isolate}
.printer-body{position:absolute;left:67px;top:43px;width:188px;height:91px;transform-style:preserve-3d;transform:rotateX(-19deg) rotateY(calc(-22deg + var(--mx)*12deg)) rotateZ(-3deg);translate:calc(var(--mx)*14px) calc(var(--my)*-8px)}
.printer-front{position:absolute;inset:0;background:linear-gradient(145deg,#667368,#39463c);border-radius:12px 12px 17px 17px;transform:translateZ(38px);border:1px solid #718071;box-shadow:0 28px 26px -17px #0008}
.printer-top{position:absolute;width:188px;height:76px;top:-38px;background:linear-gradient(120deg,#a3b199,#657563);transform:rotateX(90deg);border-radius:10px;border:1px solid #a1b094}
.printer-side{position:absolute;width:76px;height:91px;left:150px;transform:rotateY(90deg);border-radius:9px;background:#334337;border:1px solid #61715e}
.printer-slot{position:absolute;left:20px;right:20px;top:17px;height:10px;background:#17221b;border-radius:8px;box-shadow:0 1px 0 #a3b49960}
.printer-light{position:absolute;width:5px;height:5px;right:17px;bottom:18px;background:#abff84;border-radius:50%;box-shadow:0 0 10px #abff8460}
.printer-name{position:absolute;left:20px;bottom:17px;font-size:8px;letter-spacing:1.8px;color:#b9c7b6}
.print-slip{position:absolute;left:41px;top:23px;width:105px;height:102px;transform:translateZ(39px) rotateX(-8deg);transform-origin:top;background:linear-gradient(#d6ded0,#fffce1 23%);border:1px solid #e6eacb;border-radius:0 0 3px 3px;padding:16px 10px 8px;box-shadow:0 11px 15px #0003;animation:paper-feed 7s ease-in-out infinite}
.print-slip strong{display:block;color:#293c28;font-size:9px;margin-bottom:7px;font-weight:600}.print-slip .barcode{height:28px;mix-blend-mode:multiply}.print-slip small{display:block;color:#42503e;font-size:6px;margin-top:5px;text-align:center}
.print-orbit{position:absolute;left:15px;top:100px;width:280px;height:58px;border:1px solid #77866b50;border-radius:50%;transform:rotate(-10deg)}
.print-hint{position:absolute;bottom:0;left:12px;font-size:9px;letter-spacing:.5px;color:#9eaf95}
.flow-section:not(.motion-visible) .print-slip{animation-play-state:paused}
.steps li{transition:border-color .3s,background .3s;padding-inline:12px;margin-inline:-12px;border-radius:4px}
.steps li:hover{background:#ffffff04;border-color:#92b77c}
.steps li>span{transition:transform .35s,color .35s}
.steps li:hover>span{transform:translateY(-3px) scale(1.12);color:#d3ffc1}
@keyframes package-arrive{from{transform:translate3d(60px,130px,-250px) rotateY(-22deg);opacity:0}to{transform:translate3d(0,0,0);opacity:1}}
@keyframes label-arrive{from{transform:translate3d(-170px,-130px,160px) rotateZ(-24deg);opacity:0}to{transform:translate3d(0,0,0);opacity:1}}
@keyframes art-arrive{from{translate:0 23px;opacity:.25}to{translate:0 0;opacity:1}}
@keyframes paper-feed{0%,100%{height:86px;rotate:2deg}50%{height:108px;rotate:-1deg}}
.motion-paused .scene-layer{transition:none}
.motion-paused .flight-item,.motion-paused .has-arrived .card-art{animation:none!important}
@media(max-width:1100px){.hero-visual{--scene-scale:.86}}
@media(min-width:761px) and (max-width:960px){.hero-visual{--scene-scale:.74}.template-scene .scene{transform:none}.print-model{transform:scale(.86);transform-origin:left center;margin-block:12px}}
@media(max-width:760px){.hero-visual{--scene-scale:.69}.template-scene .scene{transform:none;inset:0}#scene-hint{font-size:8px;max-width:72%}.scene-layer{inset:35px 0 44px}.print-model{margin-top:20px;margin-bottom:10px}.flow-title .format-list{margin-top:22px}.has-arrived .card-art{animation-duration:.7s}}
@media(max-width:360px){.hero-visual{--scene-scale:.60}.print-model{transform:scale(.86);transform-origin:left center;margin-right:-30px}}
@media(prefers-reduced-motion:reduce){.scene-layer{transition:none}.scene-layer .flight-item,.has-arrived .card-art{animation:none!important}.scene-model,.template-scene .scene{translate:none}.print-slip{animation:none}}
.scene-layer:not(.is-active) *,.hero-visual:not(.motion-visible) .scene-layer *{animation-play-state:paused}
@media(hover:none){.print-hint{display:none}}
/* Flatten between Excel objects so pausing never changes their visual stacking. */
.excel-scene .scene-model{transform-style:flat}
.ex-table-flight{z-index:1}
.print-model{height:205px}
.print-slip{transform:translateZ(41px) rotateX(12deg)}

/* Parallax uses translate separately from entrance transforms and drag coordinates. */
.constructor-scene .ds-model{translate:calc(var(--mx)*14px) calc(var(--my)*10px)}
.constructor-scene .ds-tool{translate:calc(var(--mx)*-9px) calc(var(--my)*-7px)}
.constructor-scene .ds-cursor{translate:calc(var(--mx)*12px) calc(var(--my)*8px)}
.excel-scene .ex-table-flight{translate:calc(var(--mx)*-10px) calc(var(--my)*-7px)}
.excel-scene .ex-ticket-one{translate:calc(var(--mx)*17px) calc(var(--my)*11px)}
.excel-scene .ex-ticket-two{translate:calc(var(--mx)*23px) calc(var(--my)*15px)}
.excel-scene .ex-ticket-three{translate:calc(var(--mx)*14px) calc(var(--my)*9px)}
.excel-scene .ex-output-flight{translate:calc(var(--mx)*-13px) calc(var(--my)*8px)}
@media(prefers-reduced-motion:reduce){
.constructor-scene :is(.ds-model,.ds-tool,.ds-cursor),.excel-scene .flight-item{translate:none}
}

html[data-theme=dark] body.paper-home .templates-art{background:radial-gradient(ellipse at 50% 50%,#34475d40,transparent 70%)}
html[data-theme=dark] body.paper-home .constructor-art{background:radial-gradient(ellipse at 50% 50%,#4c405d40,transparent 70%)}
html[data-theme=dark] body.paper-home .excel-art{background:radial-gradient(ellipse at 50% 50%,#4e493c40,transparent 72%)}