/* Printed paper mobile and a bespoke, shape-changing thought sculpture. */
.hero-line{display:block}.hero-stage{perspective:1200px}.portrait{isolation:isolate;perspective:1000px}
.portrait-paper{position:relative;z-index:2;transform:translate3d(var(--px,0px),var(--py,0px),25px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .65s cubic-bezier(.16,1,.3,1);transform-style:preserve-3d}
.portrait-sun{position:absolute;width:105%;top:-9%;left:-21%;color:var(--red);z-index:-1;opacity:.8;animation:paper-orbit 48s linear infinite}
.portrait-sheet{position:absolute;inset:2% 2% 9%;z-index:0;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.sheet-red{background:var(--red);transform:translate(-17px,12px) rotate(-8deg)}.sheet-blue{background:#215bc1;transform:translate(12px,-3px) rotate(4deg)}
body[data-motion=on] .portrait:hover .sheet-red{transform:translate(-34px,24px) rotate(-12deg)}body[data-motion=on] .portrait:hover .sheet-blue{transform:translate(23px,-10px) rotate(7deg)}
.portrait-stamp{z-index:3}.portrait-stamp svg{animation:paper-orbit 15s linear infinite reverse}
body[data-motion=on][data-intro] .hero-line{animation:ink-arrive 1.15s cubic-bezier(.16,1,.3,1) both}body[data-motion=on][data-intro] .hero-line:nth-child(2){animation-delay:.12s}body[data-motion=on][data-intro] .human{animation:ink-arrive 1.4s .22s cubic-bezier(.16,1,.3,1) both}body[data-motion=on][data-intro] .portrait{animation:print-arrive 1.7s cubic-bezier(.16,1,.3,1) both}
.perspectives{padding-left:4.5%;padding-right:4.5%}.perspective-machine{display:block;--view-color:#e7ef52;background:var(--paper);color:var(--ink);border:none;--line:rgba(29,33,30,.25)}
.machine-topline{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:23px 30px;border-bottom:1px solid var(--line)}.machine-topline>.micro{font-size:10px}
.view-controls{gap:7px}.view-controls button{border-radius:0;padding:12px 19px;font-size:12px;border-color:transparent}.view-controls button span{font-size:9px;margin-right:6px;opacity:.65}.view-controls button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}.view-controls button:hover{border-color:var(--ink)}
.machine-experience{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr)}
.sculpture-stage{position:relative;isolation:isolate;min-height:590px;background:var(--view-color);overflow:hidden;cursor:grab;touch-action:pan-y;transition:background 1.5s cubic-bezier(.2,.7,.2,1)}.sculpture-stage:active{cursor:grabbing}
.sculpture-word{position:absolute;top:12%;left:50%;transform:translateX(-50%) rotate(-90deg);transform-origin:center;font-size:clamp(78px,9vw,145px);font-weight:650;line-height:.9;letter-spacing:-.075em;writing-mode:vertical-rl;color:transparent;-webkit-text-stroke:1px rgba(29,33,30,.2);white-space:nowrap;user-select:none;z-index:-1}
#sculpture-canvas{display:block;width:100%;height:100%;position:absolute;inset:0}
.sculpture-fallback{position:absolute;inset:17%;display:grid;place-items:center}.sculpture-fallback .orbital-rings{width:100%;animation:none}.sculpture-fallback>span{font-family:var(--serif);font-size:140px;font-style:italic}.sculpture-stage[data-renderer=ready] .sculpture-fallback{display:none}
.stage-mark{position:absolute;font-family:monospace;font-size:21px;line-height:1;pointer-events:none}.mark-tl{left:18px;top:18px}.mark-tr{right:18px;top:18px}.mark-bl{left:18px;bottom:18px}.mark-br{right:18px;bottom:18px}
.stage-caption{position:absolute;left:29px;bottom:31px;font-size:8px;pointer-events:none;max-width:65%}.stage-number{position:absolute;right:27px;top:35px;font-family:var(--serif);font-size:54px;font-style:italic;line-height:1;pointer-events:none}
.machine-copy{padding:38px 35px 28px;border-left:1px solid var(--line)}#view-output{padding:19px 0 25px;min-height:290px}.view-label{color:#59604c;margin-bottom:27px;font-size:9px}.machine-copy h3{font-size:clamp(38px,4.2vw,67px)}.view-text{font-size:14px;margin-top:28px;max-width:310px;min-height:90px}
.angle-control{margin-top:auto;padding-top:28px;border-top:1px solid var(--line)}.angle-control>div{display:flex;justify-content:space-between;font-size:11px;margin-bottom:12px}.angle-control output{font-variant-numeric:tabular-nums}.angle-control input{width:100%;accent-color:var(--red);cursor:ew-resize;min-height:28px;margin:0}.angle-control input:focus-visible{outline:3px solid #1854ca;outline-offset:4px}.angle-control p{font-size:10px;line-height:1.6;color:#59604c;margin-top:9px}
.machine-actions{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:23px}.machine-actions button{border:none;border-bottom:1px solid var(--ink);background:transparent;padding:5px 0;min-height:34px;font-size:10px}.machine-actions button:disabled{cursor:default;opacity:.7}.machine-footer{padding:20px 30px;border-top:1px solid var(--line);font-size:8px}
.perspective-machine.is-changing .stage-number{animation:number-arrive .8s cubic-bezier(.16,1,.3,1)}.perspective-machine.is-changing #view-output h3{animation:copy-arrive .65s cubic-bezier(.16,1,.3,1)}
body[data-motion=off] .portrait-sun,body[data-motion=off] .portrait-stamp svg{animation-play-state:paused}body[data-motion=off] .hero-line,body[data-motion=off] .human,body[data-motion=off] .portrait,body[data-motion=off] .is-changing *{animation:none!important}body[data-motion=off] .sculpture-stage,body[data-motion=off] .portrait-sheet{transition:none}
@keyframes paper-orbit{to{transform:rotate(360deg)}}
@keyframes ink-arrive{from{opacity:0;transform:translateY(45px) rotate(2deg);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(-20% -10% -20% -10%)}}
@keyframes print-arrive{from{opacity:0;transform:translate(40px,35px) rotate(16deg)}to{opacity:1;transform:rotate(5deg)}}
@keyframes number-arrive{from{opacity:0;transform:translateY(24px) rotate(15deg)}to{opacity:1;transform:none}}@keyframes copy-arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(max-width:1100px){.sculpture-stage{min-height:530px}.machine-experience{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}.machine-copy{padding:26px}.machine-topline{padding:20px 24px}.view-controls button{padding:12px 13px}.machine-topline>.micro{font-size:8px}#view-output{min-height:270px}.view-text{font-size:13px}}
@media(max-width:700px){.portrait-sun{width:120%;top:-10%;left:-18%}.portrait-sheet{inset:2% 2% 12%}.sheet-red{transform:translate(-9px,9px) rotate(-8deg)}.sheet-blue{transform:translate(8px,-2px) rotate(4deg)}.machine-topline{display:block;padding:22px 18px 0}.machine-topline>.micro{display:block;margin-bottom:15px;font-size:9px}.view-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}.view-controls button{padding:14px 5px;font-size:10px;border:none;border-bottom:1px solid var(--line)}.view-controls button span{display:block;margin:0 0 2px;font-size:8px}.machine-experience{grid-template-columns:minmax(0,1fr)}.sculpture-stage{min-height:385px;border:none}.sculpture-word{font-size:85px}.stage-number{font-size:45px;right:24px;top:29px}.stage-caption{left:23px;bottom:27px;font-size:7px}.machine-copy{border-left:none;border-top:1px solid var(--line);padding:26px 23px}#view-output{min-height:258px;padding:6px 0 22px}.machine-copy h3{font-size:49px}.view-label{margin-bottom:18px}.view-text{font-size:14px;margin-top:21px;min-height:75px}.angle-control{padding-top:22px}.machine-footer{padding:18px 23px;font-size:6px}.machine-actions button{font-size:10px}}
@media(max-width:360px){.sculpture-stage{min-height:340px}.machine-copy h3{font-size:42px}.stage-caption{max-width:75%}}
@media(prefers-reduced-motion:reduce){.portrait-paper{transform:none!important}.portrait-sheet,.sculpture-stage{transition:none!important}.portrait-sun,.portrait-stamp svg,.hero-line,.human,.portrait,.is-changing *{animation:none!important}}

.unfold-control{margin-top:20px}.unfold-control button{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);width:100%;padding:14px 16px;text-align:left;font-size:12px;min-height:47px}.unfold-control button span{font-size:20px;line-height:1}.unfold-control button[aria-pressed=true]{background:var(--red);color:var(--ink)}.machine-actions{margin-top:12px}
