/* === Entry gate: two doors into Nova Nivalis ==================== */
/* Left door — the mirror night (cosmos). Right door — the snow dawn (serene). */

* { box-sizing: border-box; }

html, body { height: 100%; }

body.gate-body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: #0b1522;
    color: #f5f9ff;
    font-family: "Noto Sans KR", Inter, ui-sans-serif, system-ui, sans-serif;
}

/* ── Header ─────────────────────────────────────────────── */
.gate-head {
    position: absolute;
    inset: 0 0 auto;
    z-index: 5;
    padding: clamp(22px, 4.5vh, 44px) 20px 0;
    text-align: center;
    pointer-events: none;
}

/* Frosted door plaque: keeps the centered question readable where the
   dark and light halves meet. */
.gate-plaque {
    display: inline-block;
    padding: 20px 38px 22px;
    border-radius: 22px;
    border: 1px solid rgba(214, 240, 255, .16);
    background: rgba(9, 18, 31, .58);
    backdrop-filter: blur(14px) saturate(120%);
    box-shadow: 0 18px 60px rgba(1, 8, 20, .3);
}

.gate-mark {
    width: 26px;
    height: 26px;
    color: #a9ddff;
    filter: drop-shadow(0 0 14px rgba(169, 221, 255, .55));
}

.gate-brand {
    margin: 6px 0 clamp(10px, 2.4vh, 22px);
    font: 600 13px/1 Inter, sans-serif;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: rgba(214, 240, 255, .82);
}

.gate-question {
    margin: 0;
    font: 700 clamp(20px, 3.4vw, 30px)/1.4 "Gowun Batang", serif;
    letter-spacing: .02em;
}

.gate-sub {
    margin: 8px 0 0;
    font: 500 11px/1 Inter, sans-serif;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(214, 240, 255, .55);
}

/* ── The two doors ──────────────────────────────────────── */
.gate-doors {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}

.gate-door {
    position: relative;
    flex: 1 1 50%;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    text-decoration: none;
    outline-offset: -6px;
    transition: flex-basis .65s cubic-bezier(.33, 1, .48, 1);
}

.gate-doors:has(.gate-door:hover) .gate-door,
.gate-doors:has(.gate-door:focus-visible) .gate-door { flex-basis: 38%; }
.gate-door:hover,
.gate-door:focus-visible { flex-basis: 62% !important; }

.door-body {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 0 clamp(26px, 6vw, 88px) clamp(34px, 9vh, 92px);
    max-width: 560px;
}

.door-eyebrow {
    font: 500 12px/1 "Noto Sans KR", sans-serif;
    letter-spacing: .5em;
    margin-bottom: 8px;
}

.door-title {
    font-size: clamp(34px, 5vw, 56px);
    line-height: 1.15;
    letter-spacing: .04em;
}

.door-title-en {
    font: 500 11px/1 Inter, sans-serif;
    letter-spacing: .34em;
    text-transform: uppercase;
    margin: 4px 0 14px;
}

.door-copy {
    font-size: 14.5px;
    line-height: 1.85;
    margin-bottom: 22px;
}

.door-enter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 999px;
    font: 500 13.5px/1 "Noto Sans KR", sans-serif;
    letter-spacing: .06em;
    transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease;
}

.door-enter::after { content: "→"; font-family: Inter, sans-serif; }

.gate-door:hover .door-enter,
.gate-door:focus-visible .door-enter { transform: translateX(4px); }

/* ── Left: the mirror night ─────────────────────────────── */
.door-cosmos {
    background:
        radial-gradient(1100px 540px at 68% -10%, rgba(169, 221, 255, .22), transparent 62%),
        radial-gradient(820px 480px at 12% 26%, rgba(185, 167, 255, .16), transparent 66%),
        radial-gradient(circle 1.2px at 21% 33%, rgba(255,255,255,.9) 99%, transparent),
        radial-gradient(circle 1px   at 64% 18%, rgba(255,255,255,.75) 99%, transparent),
        radial-gradient(circle 1.4px at 82% 56%, rgba(214,240,255,.8) 99%, transparent),
        radial-gradient(circle 1px   at 38% 70%, rgba(255,255,255,.6) 99%, transparent),
        radial-gradient(circle 1.1px at 12% 82%, rgba(214,240,255,.7) 99%, transparent),
        radial-gradient(circle .9px  at 52% 44%, rgba(255,255,255,.65) 99%, transparent),
        radial-gradient(circle 1.3px at 88% 12%, rgba(255,255,255,.8) 99%, transparent),
        linear-gradient(200deg, #101f36 0%, #0a1526 46%, #060f1c 100%);
    color: #f5f9ff;
}

.door-cosmos .door-eyebrow { color: #a9ddff; }
.door-cosmos .door-title { font: 800 1em/1.15 Inter, sans-serif; letter-spacing: .01em; }
.door-cosmos .door-title-en { color: rgba(185, 205, 228, .7); }
.door-cosmos .door-copy { color: #b9c9db; }

.door-cosmos .door-enter {
    color: #07111f;
    background: linear-gradient(120deg, #d6f0ff, #a9ddff 55%, #c9bcff);
    box-shadow: 0 10px 34px rgba(169, 221, 255, .28);
}

/* Drifting mirror shards */
.door-shard {
    position: absolute;
    z-index: 1;
    border: 1px solid rgba(214, 240, 255, .34);
    background: linear-gradient(155deg, rgba(214, 240, 255, .16), rgba(185, 167, 255, .07) 58%, rgba(255, 255, 255, .02));
    box-shadow: 0 0 44px rgba(169, 221, 255, .16), inset 0 0 30px rgba(214, 240, 255, .08);
    backdrop-filter: blur(2px);
    animation: shard-drift 11s ease-in-out infinite alternate;
}

.shard-1 { width: 150px; height: 220px; top: 16%; left: 14%; transform: rotate(-14deg); border-radius: 10px; }
.shard-2 { width: 90px; height: 140px; top: 40%; right: 16%; transform: rotate(11deg); border-radius: 8px; animation-delay: -4s; }
.shard-3 { width: 58px; height: 92px; top: 66%; left: 40%; transform: rotate(-7deg); border-radius: 6px; animation-delay: -8s; }

@keyframes shard-drift {
    from { translate: 0 0; }
    to   { translate: 0 -18px; }
}

/* ── Right: the snow dawn ───────────────────────────────── */
.door-serene {
    background:
        linear-gradient(180deg, transparent 62%, rgba(127, 168, 201, .12) 100%),
        radial-gradient(900px 460px at 50% 118%, rgba(154, 143, 192, .10), transparent 62%),
        #f7f8fa;
    color: #232a35;
    font-family: "Gowun Batang", serif;
}

.door-serene::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(35, 42, 53, .16) 30% 70%, transparent);
}

.door-serene .door-eyebrow { color: #6d7889; font-family: "Noto Sans KR", sans-serif; }
.door-serene .door-title { font-weight: 700; }
.door-serene .door-title-en { color: #9aa5b4; }
.door-serene .door-copy { color: #545e6d; font-family: "Noto Sans KR", sans-serif; font-weight: 300; }

.door-serene .door-enter {
    color: #f7f8fa;
    background: #232a35;
    box-shadow: 0 10px 30px rgba(35, 42, 53, .18);
}

/* Vertical epigraph, hung like a narrow scroll near the right edge */
.door-scroll {
    position: absolute;
    z-index: 1;
    top: clamp(90px, 16vh, 150px);
    right: clamp(22px, 5vw, 64px);
    writing-mode: vertical-rl;
    font: 400 clamp(13px, 1.3vw, 16px)/2.2 "Gowun Batang", serif;
    letter-spacing: .42em;
    color: rgba(35, 42, 53, .34);
    border-right: 1px solid rgba(35, 42, 53, .14);
    padding-right: 14px;
}

/* ── Footer ─────────────────────────────────────────────── */
.gate-foot {
    position: absolute;
    inset: auto 0 0;
    z-index: 5;
    padding: 0 20px 14px;
    text-align: center;
    pointer-events: none;
}

.gate-foot p {
    display: inline-block;
    margin: 0;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(9, 18, 31, .46);
    backdrop-filter: blur(10px);
    font: 300 12px/1.7 "Noto Sans KR", sans-serif;
    color: rgba(226, 236, 248, .78);
}

/* ── Small screens: doors stack ─────────────────────────── */
@media (max-width: 760px) {
    .gate-head { position: static; padding-bottom: 22px; background: #0b1522; }
    .gate-plaque { padding: 0; border: 0; background: transparent; backdrop-filter: none; box-shadow: none; }
    .gate-doors { flex-direction: column; }
    .gate-door { flex-basis: auto !important; min-height: 44vh; }
    .door-body { padding: 26px 26px 40px; }
    .door-title { font-size: 30px; }
    .door-scroll { top: 26px; right: 22px; font-size: 12px; }
    .shard-1 { width: 90px; height: 130px; }
    .gate-foot { position: static; background: #f7f8fa; padding: 12px 20px 16px; }
    .gate-foot p { padding: 0; background: transparent; backdrop-filter: none; color: #6d7889; }
}

/* ── Accessibility ──────────────────────────────────────── */
.gate-door:focus-visible { outline: 3px solid rgba(169, 221, 255, .8); }
.door-serene:focus-visible { outline-color: rgba(35, 42, 53, .6); }

@media (prefers-reduced-motion: reduce) {
    .gate-door { transition: none; }
    .door-shard { animation: none; }
    .door-enter { transition: none; }
}