/* Opening study: adapted center-hinge geometry from minhxthanh / Flip Gallery. */
html { background: #000; }
body { margin: 0; }
#opening { position: fixed; inset: 0; z-index: 1000; perspective: 1800px; pointer-events: none; overflow: hidden; }
#opening[hidden] { display: none; }
#opening::before { content: ''; position: absolute; inset: 50% 0 0; background: #000; }
.fold { position: absolute; left: 0; width: 100%; height: calc(50% + 1px); background: #000; backface-visibility: hidden; will-change: transform; }
.fold-top { top: 0; transform-origin: center bottom; z-index: 2; }
.fold-bottom { top: 50%; transform-origin: center top; transform: rotateX(90deg); overflow: hidden; z-index: 1; }
.fold-page { position: absolute; top: 0; left: 0; width: 100%; transform: translateY(calc(-1 * var(--fold-half))); pointer-events: none; }
.fold::after { content: ''; position: absolute; inset: 0; opacity: 0; background: linear-gradient(to bottom, #000, #242321); }
.fold-bottom::after { background: linear-gradient(to top, #000, #242321); }
body.is-opening .fold::after { animation: fold-light 1900ms 240ms both; }
@keyframes fold-light { 0%,100% { opacity: 0; } 50% { opacity: .75; } }
.crease { position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: #aaa395; opacity: 0; }
body.is-opening { overflow: hidden; }
.opening-controls { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: flex; align-items: center; gap: 16px; padding: 8px 8px 8px 16px; background: #171715; color: #eee9df; border: 1px solid #5c5a52; border-radius: 6px; box-shadow: 0 6px 30px #0003; font: 12px/1.4 system-ui,sans-serif; }
.opening-controls button, #skip-opening { border: 1px solid #a5a093; background: #eee9df; color: #171715; padding: 11px 15px; border-radius: 3px; font: inherit; cursor: pointer; min-height: 44px; }
.opening-controls button:focus-visible, #skip-opening:focus-visible { outline: 3px solid #cfae72; outline-offset: 4px; }
#skip-opening { position: fixed; right: 20px; bottom: 20px; z-index: 1001; font: 12px/1.4 system-ui,sans-serif; background: #171715; color: #eee9df; }
body.is-opening .opening-controls { visibility: hidden; }
@media (max-width: 600px) { #opening { perspective: 1100px; } .opening-controls { right: 12px; bottom: 12px; } }
@media (prefers-reduced-motion: reduce) { #opening, #skip-opening { display: none !important; } }
/* A scripting or remote dependency failure must never leave a black screen. */
#opening { animation: fail-open 0s 6s forwards; }
@keyframes fail-open { to { visibility: hidden; } }