/* A shared 3D scene: rear z=0, pocket 0..30, hinged cover z=30. */
.gf-root{--gf-hinge:-7deg;--gf-lift:32px;--gf-stack:10px}
.gf-stage{perspective:1000px;perspective-origin:50% 40%;transform-style:preserve-3d}
.gf-tilt{transform-style:preserve-3d;transform:rotateX(7deg) rotateY(-13deg);transition:transform .5s var(--gf-ease)}
.gf-rear-volume,.gf-cover-volume{position:absolute;left:0;width:340px;transform-style:preserve-3d}
.gf-rear-volume{top:0;height:272px}
.gf-cover-volume{top:74px;height:198px;transform-origin:50% 100%;transform:translateZ(30px) rotateX(var(--gf-hinge));transition:transform .5s var(--gf-ease)}
.gf-volume-edge{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:#121214;stroke:#55555a;stroke-width:1;pointer-events:none;backface-visibility:visible}
.gf-volume-edge:first-child{fill:#09090b;stroke:#29292c}
.gf-front{top:0;transform:translateZ(.5px);transition:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.gf-front,.gf-back{backface-visibility:hidden}
.gf-back-rim{transform:translateZ(.6px)}
.gf-root[data-tone="dark"] .gf-tint{background:linear-gradient(120deg,#202024 0%,#0c0c0f 32%,#070709 75%,#141416 100%)}
.gf-front::after{background:linear-gradient(180deg,#ffffff16,#fff0 7px),linear-gradient(0deg,#000b,#0000 14px)}
.gf-root .gf-key{transform:translateZ(5px);bottom:25px}
.in:hover .gf-key{transform:translateZ(5px)}
.gf-wall{position:absolute;backface-visibility:visible;pointer-events:none;box-sizing:border-box;border:1px solid #ffffff18}
.gf-wall--left,.gf-wall--right{top:136px;width:30px;height:114px;background:repeating-linear-gradient(90deg,#151518 0 5px,#29292c 6px,#101012 8px);transform-origin:0 50%;transform:rotateY(-90deg)}
.gf-wall--left{left:4px}
.gf-wall--right{left:336px;background:repeating-linear-gradient(90deg,#09090b 0 5px,#1b1b1e 6px,#08080a 8px)}
.gf-wall--bottom{left:22px;top:268px;width:296px;height:30px;transform-origin:50% 0;transform:rotateX(90deg);background:linear-gradient(#090909,#252528 50%,#090909)}
.gf-files{clip-path:none;transform-style:preserve-3d;z-index:auto}
.gf-sheet{height:130px;transform:translate3d(calc(var(--gf-jx) + var(--gf-slot) * var(--gf-spread)),calc(var(--gf-lift) - var(--gf-depth) * var(--gf-stack)),calc(9px + (2 - var(--gf-depth)) * 6px)) rotate(calc(var(--gf-jr) + var(--gf-slot) * var(--gf-fan)));transition:transform .5s var(--gf-ease),opacity .2s ease;backface-visibility:hidden}
.gf-root[data-entered] .gf-sheet{opacity:1;transition-delay:0s}
.gf-root .gf-shadow{transform:translateZ(-8px) translateY(14px);opacity:.8}
.in:hover .gf-root .gf-shadow{transform:translateZ(-8px) translateY(18px)}
.gf-root:not([data-entered]) .gf-rear-volume,.gf-root:not([data-entered]) .gf-cover-volume,.gf-root:not([data-entered]) .gf-wall{visibility:hidden}
.in:focus-visible .gf-root{--gf-hinge:-24deg;--gf-lift:-48px;--gf-stack:22px}
.in:focus-visible .gf-tilt{transform:rotateX(9deg) rotateY(-9deg)}
@media(hover:hover) and (pointer:fine){
.in:hover .gf-root{--gf-hinge:-24deg}
.in:hover .gf-tilt{transform:rotateX(calc(8deg - var(--gf-py) * 4deg)) rotateY(calc(-13deg + var(--gf-px) * 10deg)) translateY(-4px)}
}
@media(max-width:900px),(hover:none){
.gf-tilt,.in:hover .gf-tilt{transform:rotateX(5deg) rotateY(-10deg)}
.in:hover .gf-root{--gf-hinge:-7deg}
.gf-root .gf-files{display:none}
}
@media(prefers-reduced-motion:reduce){
.gf-tilt,.in:hover .gf-tilt,.in:focus-visible .gf-tilt{transform:rotateX(7deg) rotateY(-13deg)}
.gf-root *{transition:none!important}
}