.door-intro {
    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow: hidden;
    background: var(--ink);
    cursor: pointer;
    transition: opacity 0.8s var(--ease);
}
.door-intro.fading { opacity: 0; }
.door-intro.hidden { display: none; }

.door-container {
    position: absolute;
    inset: 0;
    display: flex;
}

.door-panel {
    position: relative;
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    transition: transform 1.9s var(--ease);
    overflow: hidden;
}

.door-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        0deg,
        transparent 0,
        transparent 38px,
        var(--rule-tint) 38px,
        var(--rule-tint) 39px
    );
}

.door-left {
    background: var(--frost-soft);
    border-right: 1px solid var(--ink-line-2);
    justify-content: flex-end;
}
.door-right {
    background: var(--rose-soft);
    border-left: 1px solid var(--ink-line-2);
    justify-content: flex-start;
}

.door-panel-tag {
    position: absolute;
    top: 50%;
    font-family: var(--f-mono);
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    color: var(--bone-faint);
    writing-mode: vertical-rl;
    transform: translateY(-50%);
}
.door-left .door-panel-tag { right: 26px; }
.door-right .door-panel-tag { left: 26px; }

.door-handle {
    position: absolute;
    top: 50%;
    width: 4px;
    height: 84px;
    transform: translateY(-50%);
    transition: opacity 0.5s var(--ease);
}
.door-left .door-handle { right: 0; background: var(--frost-deep); }
.door-right .door-handle { left: 0; background: var(--rose-deep); }

.door-intro.opening .door-left  { transform: translateX(-100%); }
.door-intro.opening .door-right { transform: translateX(100%); }
.door-intro.opening .door-handle { opacity: 0; }
.door-intro.opening .door-content { opacity: 0; transform: scale(0.96); }
.door-intro.opening .door-meta { opacity: 0; }

.fonts-pending .door-index,
.fonts-pending .door-title,
.fonts-pending .door-subtitle,
.fonts-pending .door-enter,
.fonts-pending .door-meta {
    animation: none;
    opacity: 0;
}

.door-content {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
    padding: 0 24px;
}

.door-index {
    font-family: var(--f-mono);
    font-size: 0.74rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--frost);
    margin-bottom: clamp(16px, 3vw, 30px);
    animation: door-rise 0.9s var(--ease) 0.15s both;
}

.door-title {
    font-family: var(--f-display);

    font-weight: 400;
    font-size: clamp(5rem, 22vw, 19rem);
    line-height: 0.86;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--bone);
    animation: door-rise 1.1s var(--ease) 0.28s both;
}

.door-subtitle {
    font-family: var(--f-mono);
    font-size: clamp(0.78rem, 1.6vw, 0.95rem);
    letter-spacing: 0.2em;
    color: var(--bone-dim);
    margin-top: clamp(14px, 2.5vw, 26px);
    animation: door-rise 1.1s var(--ease) 0.42s both;
}

.door-enter {
    margin-top: clamp(34px, 6vw, 64px);
    display: inline-flex;
    align-items: center;
    gap: 0.7em;
    font-family: var(--f-mono);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #fff;
    background: var(--frost);
    padding: 16px 30px;
    pointer-events: auto;
    transition: background 0.32s var(--ease), color 0.32s var(--ease);
    animation: door-rise 1.1s var(--ease) 0.56s both;
}
.door-enter:hover {
    background: var(--rose);
}
.door-enter-arrow {
    transition: transform 0.32s var(--ease);
}
.door-enter:hover .door-enter-arrow {
    transform: translate(3px, 3px);
}

.door-meta {
    position: absolute;
    z-index: 5;
    font-family: var(--f-mono);
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bone-faint);
    transition: opacity 0.6s var(--ease);
    animation: door-fade 1.2s var(--ease) 0.7s both;
}
.door-meta-tl { top: 28px; left: 28px; }
.door-meta-br { bottom: 28px; right: 28px; }

@keyframes door-rise {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes door-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (max-width: 560px) {
    .door-panel-tag { font-size: 0.62rem; }
    .door-left .door-panel-tag { right: 14px; }
    .door-right .door-panel-tag { left: 14px; }
    .door-meta { font-size: 0.6rem; letter-spacing: 0.14em; }
    .door-meta-tl { top: 18px; left: 18px; }
    .door-meta-br { bottom: 18px; right: 18px; }
    .door-handle { height: 60px; }
}

@media (prefers-reduced-motion: reduce) {
    .door-index, .door-title, .door-subtitle,
    .door-enter, .door-meta { animation: none; }
}