/* APOCRYPHA — fixed architectural space, moving side walls, ceremonial entrance. */
:root {
    --bg: #02080f;
    --line: rgba(157, 149, 119, .36);
    --accent: #a4dbe2;
    --text: #e7e2d4;
    --muted: #aab7bc;
    --panel-soft: rgba(5, 16, 23, .9);
    --gold: #b3a17c;
    --hall-content: min(1100px, 73%);
    --font-reading: 'Gowun Batang', 'Batang', serif;
    --font-display: 'Cormorant Garamond', 'Gowun Batang', serif;
}
body { position: relative; isolation: isolate; background: var(--bg); color: var(--text); font-family: var(--font-reading); }
body.gate-closed { overflow: hidden; }
#library-content { width: 100%; min-height: 100svh; display: flex; flex-direction: column; align-items: center; padding-bottom: clamp(140px, 18vh, 230px); }
button, input { font-family: var(--font-reading); }
.astral-background { position: fixed; inset: 0; width: 100%; height: 100svh; z-index: -3; overflow: hidden; background: #02080f; pointer-events: none; }
.scene-distance, .scene-wall, .scene-vault, .scene-floor, .scene-shade { position: absolute; inset: 0; }
.scene-distance, .scene-wall, .scene-vault, .scene-floor { background: url('assets/library/hall-environment.webp') center / 100% 100% no-repeat; }
.scene-distance { opacity: .8; mask-image: linear-gradient(90deg, transparent 8%, #000 29% 71%, transparent 92%); }
.scene-wall { will-change: transform; }
.scene-wall--left {
    mask-image: linear-gradient(90deg, #000 0 12%, transparent 31%), linear-gradient(transparent 8%, #000 28% 70%, transparent 92%);
    mask-composite: intersect; transform-origin: left center;
    transform: translate3d(calc(-1 * var(--wall-x, 0px)), var(--wall-y, 0px), 0) scale(var(--wall-scale, 1.04));
}
.scene-wall--right {
    mask-image: linear-gradient(270deg, #000 0 12%, transparent 31%), linear-gradient(transparent 8%, #000 28% 70%, transparent 92%);
    mask-composite: intersect; transform-origin: right center;
    transform: translate3d(var(--wall-x, 0px), var(--wall-y, 0px), 0) scale(var(--wall-scale, 1.04));
}
.scene-vault { mask-image: linear-gradient(#000 0 16%, transparent 42%); }
.scene-floor { mask-image: linear-gradient(transparent 66%, #000 87%); }
.scene-shade { background: linear-gradient(90deg, transparent 9%, rgba(2,8,15,.22) 25%, rgba(2,8,15,.34) 50%, rgba(2,8,15,.22) 75%, transparent 91%); }
.stars { z-index: -2; opacity: .1; animation: none; pointer-events: none; }

header { position: relative; width: 100%; max-width: none; margin: 0; min-height: clamp(285px, 27vw, 420px); display: grid; place-items: center; padding: 86px 20px 40px; }
header h1 { width: 100%; margin: 0; line-height: 1.2; }
header h1:focus { outline: none; }
.brand-home { display: inline-flex; flex-direction: column; align-items: center; gap: 14px; width: auto; max-width: 100%; padding: 18px 10px; border: 0; border-radius: 0; overflow: visible; background: transparent; box-shadow: none; color: #f0ebdd; text-shadow: 0 2px 16px #000, 0 0 50px rgba(56,136,163,.45); }
.brand-title { font: 400 clamp(2.8rem, 8.8vw, 8rem)/1 var(--font-display); letter-spacing: .09em; }
.brand-subtitle { font: 400 clamp(1rem, 2.1vw, 1.6rem)/1.6 var(--font-reading); letter-spacing: .29em; }
.dialogue-box, .home-container, .protocol-container, .book-card {
    position: relative; border: 1px solid rgba(158,146,110,.42); border-radius: 1px;
    background: linear-gradient(135deg, rgba(11,25,33,.96), rgba(3,13,21,.89));
    box-shadow: 0 14px 42px #0006, inset 0 0 0 5px #06121bcc, inset 0 0 0 6px rgba(148,149,119,.17);
}
.dialogue-box::before, .home-container::before, .protocol-container::before, .book-card::after {
    content: ''; position: absolute; inset: -1px; pointer-events: none; border: 0;
    background:
        linear-gradient(var(--gold),var(--gold)) left top / 24px 1px,
        linear-gradient(var(--gold),var(--gold)) left top / 1px 24px,
        linear-gradient(var(--gold),var(--gold)) right top / 24px 1px,
        linear-gradient(var(--gold),var(--gold)) right top / 1px 24px,
        linear-gradient(var(--gold),var(--gold)) left bottom / 24px 1px,
        linear-gradient(var(--gold),var(--gold)) left bottom / 1px 24px,
        linear-gradient(var(--gold),var(--gold)) right bottom / 24px 1px,
        linear-gradient(var(--gold),var(--gold)) right bottom / 1px 24px;
    background-repeat: no-repeat; opacity: .85;
}
.dialogue-box { width: var(--hall-content); max-width: 800px; margin: 0 auto 30px; padding: 25px 32px; backdrop-filter: blur(3px); }
.etna-name { color: #caba97; letter-spacing: .07em; font-size: .88rem; }
.etna-name::before { content: '✧'; margin-right: 9px; color: #91cbd5; }
#etna-text { font-family: var(--font-reading); color: #d5dedf; line-height: 1.85; font-size: 1rem; }
.tabs { width: var(--hall-content); max-width: 1100px; margin-bottom: 32px; border-color: var(--line); gap: 18px; }
.tab-btn { color: #b2bec3; font-family: var(--font-reading); font-size: 1.06rem; padding-bottom: 16px; }
.tab-btn.active { color: #e7d6af; }
.tab-btn.active::after { background: #b3a17c; box-shadow: 0 0 12px #b3a17c66; }
.content-section { width: var(--hall-content); max-width: 1100px; padding-bottom: 40px; }
.home-container, .protocol-container { padding: clamp(26px, 4vw, 44px); }
.home-container h2 { color: #e9dfc9; font: 700 clamp(1.5rem, 3vw, 2.2rem)/1.5 var(--font-reading); }
.home-container p { color: #adbdc5; line-height: 1.95; }
.home-stats { gap: 12px; }
.stat-box { width: 136px; border-color: var(--line); border-radius: 0; background: #01090e77; box-shadow: inset 0 0 0 3px #04121b, inset 0 0 0 4px #a9996e19; }
.stat-num { color: #c5e3e5; font: 500 2.65rem/1.1 var(--font-display); }
.stat-label { color: #b8c1c2; letter-spacing: .05em; }
.book-card { padding: 28px; }
.book-card:hover { border-color: var(--gold); box-shadow: 0 12px 40px #0008, inset 0 0 0 5px #06121b, inset 0 0 0 6px #b3a17c55; }
.book-card__title { color: #e7e1d1; font-family: var(--font-reading); font-size: 1.2rem; }
.book-card__eyebrow { font-family: var(--font-display); font-size: .83rem; letter-spacing: .08em; }
.book-card__summary { font-size: .9rem; line-height: 1.8; }
.book-card::before { font-family: var(--font-display); font-size: .8rem; }
.book-card__meta { margin-top: 20px; border-color: #b3a17c33; }
.sub-tab-btn { border-radius: 1px; border-color: var(--line); background: #05131ddd; color: #b5bdbd; }
.sub-tab-btn.active { border-color: #b3a17c; color: #ecdcb8; background: #3d392d70; box-shadow: 0 0 18px #b3a17c10; }
.archive-search { font-family: var(--font-reading); border-color: var(--line); border-radius: 1px; background: #04111beb; }
.step-item { border-left: 1px solid #b3a17c; border-radius: 0; background: #7b8c8c0b; }
.step-num { font-family: var(--font-display) !important; color: #c4b18b !important; }
.portal-btn { color: #e3d4b5; border: 1px solid #b3a17c88; border-radius: 1px; box-shadow: inset 0 0 0 3px #06121b, inset 0 0 0 4px #a9996e35; }

.bgm-toggle {
    display: inline-flex; align-items: center; gap: 12px; top: 22px; right: 24px;
    min-width: 160px; max-width: none; padding: 12px 18px; border-radius: 2px 18px 2px 18px;
    border: 1px solid #a99d7988; background: #03111aee; color: #dfd3b7;
    font-family: var(--font-reading); white-space: normal; text-overflow: clip; overflow: visible;
    box-shadow: inset 0 0 0 3px #03111a, inset 0 0 0 4px #a99d7922, 0 6px 22px #0006; z-index: 100;
}
.bgm-toggle.off { border-color: #a99d7966; color: #b7b7aa; }
.bgm-toggle:hover { border-color: #d4c293; color: #f5e9ca; box-shadow: 0 0 22px #c2c3a622; }
.music-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.music-caption { font-size: .76rem; letter-spacing: .09em; }
#bgm-state { font-size: .63rem; color: #95bac4; }
.music-sigil { height: 24px; width: 26px; display: flex; align-items: center; gap: 3px; }
.music-sigil i { width: 2px; height: 18px; background: #c5b486; border-radius: 1px; transform-origin: center; animation: library-music 1.3s ease-in-out infinite alternate; }
.music-sigil i:nth-child(2) { height: 11px; animation-delay: -.6s; }
.music-sigil i:nth-child(3) { height: 24px; animation-delay: -.9s; }
.music-sigil i:nth-child(4) { height: 15px; animation-delay: -.3s; }
.music-sigil i:nth-child(5) { height: 8px; animation-delay: -.7s; }
.bgm-toggle.off .music-sigil i { animation: none; transform: scaleY(.28); opacity: .55; }
@keyframes library-music { from { transform: scaleY(.3); } to { transform: scaleY(1); } }

/* Native, keyboard-accessible entry seal on two perspective-hinged doors. */
.entry-gate { position: fixed; inset: 0; z-index: 10000; overflow: hidden; min-height: 100svh; display: grid; place-items: center; background: #01060bf5; perspective: 1500px; transition: opacity .65s 1.05s, visibility .65s 1.05s; }
.entry-gate[hidden] { display: none; }
.entry-gate::before { content: ''; position: absolute; inset: 0; background: linear-gradient(#01060b44,#01060b99), url('assets/library/hall-environment.webp') center / cover; opacity: .32; }
.gate-arch { position: absolute; bottom: -12px; width: min(900px, 86vw); height: min(940px, 94svh); border: 1px solid #b1a17a88; border-radius: 48% 48% 0 0; box-shadow: 0 0 0 9px #02080d, 0 0 0 10px #a99d7933, 0 0 0 26px #01060bb3, 0 0 90px #749a9a18; perspective: 1800px; }
.gate-door { position: absolute; top: 0; bottom: 0; width: 50%; backface-visibility: hidden; background: url('assets/library/door-engraving.svg') center / 100% 100% no-repeat, repeating-linear-gradient(90deg, transparent 0 12px, #73939b08 13px 14px), linear-gradient(110deg,#06131b,#0b1b24 45%,#030c12); border: 1px solid #a0927077; box-shadow: inset 0 0 50px #000b; transition: transform 1.65s cubic-bezier(.22,.7,.15,1), filter 1.6s; }
.gate-door--left { left: 0; border-radius: 100% 0 0 0 / 48% 0 0 0; transform-origin: left center; }
.gate-door--right { right: 0; border-radius: 0 100% 0 0 / 0 48% 0 0; transform-origin: right center; }
.gate-light { position: absolute; inset: 10% auto 0 50%; width: 1px; background: #c2f5f0; box-shadow: 0 0 22px 5px #71d4dd55; opacity: .5; transition: opacity .7s, transform 1.3s; }
.entry-copy { position: relative; z-index: 2; text-align: center; width: min(92%,800px); padding: 30px 16px; text-shadow: 0 2px 10px #000, 0 0 32px #000; transition: opacity .35s, transform .6s; }
.entry-kicker { font: 500 .84rem var(--font-display); letter-spacing: .38em; color: #bfae86; margin-bottom: 18px; }
#entry-title { color: #eee6d5; font: 400 clamp(2.4rem,8vw,6.5rem)/1 var(--font-display); letter-spacing: .085em; margin-bottom: 18px; }
.entry-subtitle { font-size: clamp(1rem,2.6vw,1.4rem); letter-spacing: .25em; color: #d4ccbc; }
.entry-open { display: flex; flex-direction: column; align-items: center; gap: 28px; margin: 54px auto 18px; border: 0; padding: 8px 20px; background: none; color: #ede0c3; cursor: pointer; font: 700 1.08rem var(--font-reading); letter-spacing: .15em; }
.entry-seal { display: grid; place-items: center; width: 86px; height: 86px; border: 1px solid #bfb085; border-radius: 50%; background: radial-gradient(#16303d,#06121b 72%); color: #d5e9dd; font-size: 2.4rem; box-shadow: 0 0 0 6px #030e16, 0 0 0 7px #a99d7955, 0 0 35px #95dce82b; transition: box-shadow .25s, transform .25s; }
.entry-open:hover .entry-seal { transform: scale(1.06); box-shadow: 0 0 0 6px #030e16, 0 0 0 7px #cbbd8eaa, 0 0 60px #95dce855; }
#entry-description { color: #b0bdbe; font-size: .86rem; }
.entry-silent { margin-top: 20px; padding: 10px 16px; background: none; border: 0; color: #9aa7ad; text-decoration: underline; text-underline-offset: 5px; font-size: .78rem; cursor: pointer; }
.entry-open:focus-visible, .entry-silent:focus-visible { outline: 1px solid #ede0c3; outline-offset: 7px; }
.entry-open:focus-visible { outline: none; }
.entry-open:focus-visible .entry-seal { outline: 2px solid #ede0c3; outline-offset: 11px; }
.entry-gate.is-opening { opacity: 0; visibility: hidden; }
.is-opening .gate-door--left { transform: rotateY(-105deg); filter: brightness(.4); }
.is-opening .gate-door--right { transform: rotateY(105deg); filter: brightness(.4); }
.is-opening .gate-light { opacity: 0; transform: scaleX(80); }
.is-opening .entry-copy { opacity: 0; transform: translateY(-12px); pointer-events: none; }

@media (min-width: 1800px) { :root { --hall-content: min(1280px,72%); } .tabs, .content-section { max-width: 1280px; } }
@media (max-width: 760px) {
    :root { --hall-content: 85%; }
    header { min-height: 290px; padding: 106px 12px 35px; margin: 0; }
    .brand-title { font-size: clamp(2rem,9.4vw,4.8rem); letter-spacing: .05em; }
    .brand-subtitle { font-size: clamp(.86rem,3.3vw,1.1rem); letter-spacing: .15em; }
    .scene-wall--left { mask-image: linear-gradient(90deg,#000 0 6%,transparent 19%),linear-gradient(transparent 8%,#000 28% 70%,transparent 92%); }
    .scene-wall--right { mask-image: linear-gradient(270deg,#000 0 6%,transparent 19%),linear-gradient(transparent 8%,#000 28% 70%,transparent 92%); }
    .dialogue-box { padding: 22px; margin-bottom: 24px; }
    #etna-text { font-size: .95rem; }
    .tabs { gap: 0; justify-content: space-between; }
    .tab-btn { min-width: 0; flex: 1; padding: 12px 3px; font-size: .82rem; white-space: nowrap; }
    .home-container, .protocol-container { padding: 28px 18px; }
    .home-stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
    .stat-box { width: auto; padding: 18px 8px; }
    .stat-box:last-child { grid-column: 1/-1; }
    .book-card { padding: 25px; }
    .sub-tabs { gap: 8px; margin-bottom: 24px; }
    .sub-tab-btn { padding: 9px 10px; font-size: .77rem; }
    .bgm-toggle { top: 14px; right: 14px; min-width: 0; max-width: none; padding: 9px 13px; gap: 9px; }
    .music-caption { font-size: .7rem; }
    #bgm-state { font-size: .6rem; }
    .music-sigil { transform: scale(.85); width: 22px; }
    .gate-arch { width: 94vw; height: 92svh; border-radius: 46% 46% 0 0; }
    .entry-open { margin-top: 40px; }
    .entry-kicker { font-size: .7rem; letter-spacing: .25em; }
    #entry-description { font-size: .76rem; }
}
@media (max-height: 590px) {
    .entry-copy { padding: 15px; }
    #entry-title { font-size: 2.7rem; margin-bottom: 8px; }
    .entry-kicker { margin-bottom: 10px; }
    .entry-open { margin-top: 18px; gap: 16px; margin-bottom: 10px; }
    .entry-seal { width: 48px; height: 48px; font-size: 1.5rem; }
    .entry-silent { margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .scene-wall { transform: none; will-change: auto; }
    .gate-door, .gate-light, .entry-copy, .entry-gate { transition: none; }
    .music-sigil i { animation: none; }
}