/* Recovered Claude five-photo opening; static document is the final hero. */
.envelope-paper{display:none;position:absolute;inset:0;z-index:3;perspective:1400px;pointer-events:none}
.envelope-fold{position:absolute;inset:-1px;backface-visibility:hidden;transform-style:preserve-3d;will-change:transform}
.fold-left{background:linear-gradient(135deg,var(--paper) 25%,#e9e5db);clip-path:polygon(0 0,53% 50%,0 100%);transform-origin:0 50%}
.fold-right{background:linear-gradient(225deg,var(--paper) 25%,#e9e5db);clip-path:polygon(100% 0,47% 50%,100% 100%);transform-origin:100% 50%}
.fold-bottom{background:linear-gradient(0deg,var(--paper) 20%,#e5e0d5);clip-path:polygon(0 100%,50% 45%,100% 100%);transform-origin:50% 100%}
.fold-top{background:linear-gradient(180deg,var(--paper) 30%,#eae6dc);clip-path:polygon(0 0,100% 0,50% 55%);transform-origin:50% 0}
.envelope-active .envelope-paper{display:block}
.envelope-active .direction-chrome{z-index:4}
.envelope-active .direction-name{color:var(--green)}
.envelope-controls{position:absolute;right:clamp(22px,4vw,72px);top:155px;z-index:6;display:flex;align-items:center;gap:16px;font:11px/1.4 'Instrument Sans',sans-serif}
.envelope-controls button,.envelope-controls a{font:inherit;border:0;border-bottom:1px solid currentColor;background:transparent;color:inherit;padding:12px 0;min-height:44px;cursor:pointer}
.envelope-controls [hidden]{display:none}
.envelope-active .envelope-controls{color:var(--green)}
.direction-cue{display:flex}
.envelope-active .direction-cue{visibility:hidden}
@media(max-width:760px){.envelope-controls{top:200px;gap:14px}.envelope-active .direction-name{font-size:20.3vw}}
@media(prefers-reduced-motion:reduce){.envelope-paper{display:none!important}.envelope-replay{display:none!important}}

.envelope-controls{background:var(--paper);color:var(--green);padding:0 12px;border:1px solid #14392b30}

.envelope-pending .envelope-paper{display:block}
.envelope-pending .direction-chrome{z-index:4}
.envelope-pending .direction-chrome>:not(.direction-name){visibility:hidden}
.envelope-pending .direction-name{color:var(--green);left:50%;right:auto;top:50%;width:max-content;transform:translate(-50%,-50%) scale(.88);transform-origin:center}
.envelope-pending .envelope-controls{color:var(--green)}
/* Scroll changes the depth of whole photographic planes, never subject cutouts. */
.depth-photos,.depth-enter{display:none}
.parallax-enabled .direction-stage{height:auto}
.parallax-enabled .direction-hero{height:100svh;min-height:0;position:relative}
.parallax-enabled .depth-photos{display:block;position:absolute;inset:0;z-index:1;pointer-events:none}
.depth-card{position:absolute;margin:0;padding:10px;background:var(--paper);color:var(--green);border:1px solid rgba(228,176,122,.6);box-shadow:0 10px 28px #14392b1f,0 2px 6px #14392b14;will-change:transform}
.depth-card img{display:block;width:100%;height:auto}
.depth-card figcaption{font:10px/1.5 'Instrument Sans',sans-serif;padding:9px 1px 1px;letter-spacing:.045em}
.depth-one{width:27%;left:-6%;top:6%;transform:rotate(-5deg)}
.depth-two{width:27%;right:-5%;top:12%;transform:rotate(6deg)}
.depth-three{width:25%;right:0%;bottom:-2%;transform:rotate(-4deg)}
.depth-four{width:20%;left:2%;bottom:16%;transform:rotate(7deg)}
.depth-six{width:18%;right:29%;bottom:-5%;transform:rotate(5deg)}
.depth-credit{position:absolute;left:4%;bottom:4%;font:9px/1.5 'Instrument Sans',sans-serif;letter-spacing:.06em;color:var(--green);max-width:20ch}
.parallax-enabled .depth-enter:not([hidden]){display:flex;gap:20px;align-items:center;position:absolute;bottom:4%;left:50%;transform:translateX(-50%);z-index:6;background:var(--paper);color:var(--green);border:1px solid #14392b40;padding:12px 22px;min-height:48px;font:12px/1.5 'Instrument Sans',sans-serif;cursor:pointer;white-space:nowrap}
.parallax-enabled .direction-photo{border:1px solid rgba(228,176,122,.6)}
.parallax-enabled .direction-name{pointer-events:none}
.parallax-enabled .envelope-controls{top:18px}
.parallax-enabled[data-phase="resolved"] .envelope-controls{top:155px}
@media(max-width:760px){
 .depth-one{width:43%;left:-10%;top:11%}
 .depth-two{width:44%;right:-13%;top:20%}
 .depth-three{width:46%;right:-8%;bottom:12%}
 /* Phones carry three pieces, not five: the small screen cannot hold more without the eye losing the name. */
 .depth-four,.depth-six{display:none}
 .depth-card{padding:6px}
 .depth-card figcaption{font-size:8px;padding:6px 0 0}
 .depth-credit{left:22px;bottom:11%;max-width:15ch;font-size:8px}
 .parallax-enabled[data-phase="resolved"] .envelope-controls{top:200px}
}
@media(prefers-reduced-motion:reduce){.depth-photos,.depth-enter{display:none!important}.parallax-enabled .direction-stage{height:auto}.parallax-enabled .direction-hero{position:relative}}

@media(max-width:380px){.direction-cue{font-size:0;gap:0}.direction-cue span{font-size:21px}}

/* Native scrolling begins only once the automatic hero has resolved. */
html.intro-running{height:100%;overflow:hidden;overscroll-behavior:none}
html.intro-running body{position:fixed;inset:0;width:100%;height:100svh;overflow:hidden;overscroll-behavior:none}
.intro-running main>:not(.direction-stage){display:none!important}