.leopard-experiment .glyph-runway{--portal-travel:85svh;--portal-pin:100svh;height:calc(var(--portal-travel) + var(--portal-pin))}
.leopard-experiment .glyph-front{background:radial-gradient(ellipse at 35% 25%,#f1e7d6 0%,#e5d6bf 65%,#d4bda0 100%);isolation:isolate}
.leopard-experiment #lumina-opening{z-index:1}
.leopard-canvas,.leopard-vector{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.leopard-canvas{opacity:0}
.leopard-vector{z-index:3;overflow:hidden;contain:paint;filter:none!important;transform:none!important}
.leopard-experiment .glyph-front::after{display:block;background:#98704b;opacity:var(--leopard-bronze,0);z-index:4}
.leopard-sr-title{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.leopard-scroll-cue{position:absolute;z-index:5;left:50%;bottom:max(40px,env(safe-area-inset-bottom));transform:translateX(-50%);color:#6f5339;font:12px/1.4 Manrope,Arial,sans-serif;letter-spacing:.06em;white-space:nowrap;opacity:var(--leopard-cue,1)}
.leopard-experiment header{opacity:0;pointer-events:none;transition:none}
@media(max-width:700px){.leopard-experiment .glyph-runway{--portal-pin:max(100svh,710px);--portal-travel:85svh}.leopard-scroll-cue{font-size:11px;bottom:max(38px,env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.leopard-vector{display:none}.leopard-canvas{opacity:1}.leopard-experiment .glyph-front::after{display:none}}
.leopard-static{position:absolute;z-index:3;left:50%;top:49%;translate:-50% -50%;width:min(57vw,310px);height:auto;pointer-events:none}
.leopard-vector{visibility:hidden}
.leopard-motion-ready .leopard-vector{visibility:visible}
.leopard-motion-ready .leopard-static{display:none}
@media(prefers-reduced-motion:reduce){.leopard-motion-ready .leopard-static{display:block}}
/* v37 720p test: complete reflective mark → turn/morph → eye close-up. */
.leopard-metal-experiment .glyph-runway{--portal-travel:110svh}
.leopard-metal-experiment .glyph-front::after{display:none!important}
.leopard-metal-experiment .metal-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.leopard-metal-experiment .leopard-canvas{opacity:0!important;z-index:2}
.leopard-metal-experiment #lumina-opening{z-index:2}
.leopard-metal-experiment .leopard-frame-ready .leopard-canvas{opacity:1!important}
.leopard-metal-experiment .leopard-frame-ready .metal-poster{visibility:hidden}
/* Exact native 360° symbol turn; the wordmark never rotates. */
.metal-logo-stage{position:absolute;inset:0;z-index:3;pointer-events:none;visibility:hidden}
.metal-native-ready .metal-logo-stage{visibility:visible}
.metal-wordmark{position:absolute;clip-path:inset(63% 0 0 0);filter:drop-shadow(2px 5px 4px #664a3240)}
.metal-turn{position:absolute;perspective:1000px;filter:drop-shadow(3px 7px 5px #664a3238)}
.metal-object{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.metal-object img{position:absolute;inset:0;width:100%;height:100%}
.leopard-metal-experiment .leopard-frame-ready .leopard-canvas{opacity:var(--metal-canvas-opacity,0)!important}
.leopard-metal-experiment .leopard-frame-ready .metal-poster{visibility:visible}
.leopard-metal-experiment .metal-native-ready .metal-poster{visibility:hidden}
@media(prefers-reduced-motion:reduce){.metal-turn{perspective:none}.metal-object{transform:none!important}}
/* Landscape phones use their real viewport height after rotation. */
@media(min-width:600px) and (max-width:1100px) and (max-height:600px) and (orientation:landscape){.leopard-experiment .glyph-runway{--portal-pin:100svh}}