/* ===========================================
   🚪 노크 인트로 - 동화 같은 문 애니메이션
   =========================================== */

/* ── 인트로 오버레이 ── */
.intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.intro-overlay.fade-out {
    opacity: 0;
    pointer-events: none;
}

/* ── 별 파티클 ── */
.intro-star-particle {
    position: absolute;
    pointer-events: none;
    animation: introStarFloat linear infinite;
    opacity: 0;
}

@keyframes introStarFloat {
    0%   { opacity: 0; transform: translateY(0) scale(0.5); }
    15%  { opacity: 0.85; }
    85%  { opacity: 0.85; }
    100% { opacity: 0; transform: translateY(-110vh) scale(1.2); }
}

/* ── 아우라 빛 ── */
.intro-aura {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,180,220,0.18) 0%, rgba(180,130,255,0.12) 50%, transparent 75%);
    transition: width 1.6s ease, height 1.6s ease;
    pointer-events: none;
}

.intro-aura.glow {
    width: 700px;
    height: 700px;
}

/* ── 문 씬 ── */
.door-scene {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateY(60px);
    opacity: 0;
    animation: doorSceneEnter 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s forwards;
}

@keyframes doorSceneEnter {
    0%   { transform: translateY(60px) scale(0.85); opacity: 0; }
    60%  { transform: translateY(-8px) scale(1.02); opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* ── 문 위 꽃 장식 ── */
.door-top-deco {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.6s ease;
    font-size: 1.3rem;
}

.door-top-deco.visible {
    opacity: 1;
    transform: translateY(0);
}

.door-top-deco span {
    display: inline-block;
    animation: decoWiggle 2s ease-in-out infinite;
}
.door-top-deco span:nth-child(1) { animation-delay: 0s; }
.door-top-deco span:nth-child(2) { animation-delay: 0.2s; }
.door-top-deco span:nth-child(3) { animation-delay: 0.4s; }
.door-top-deco span:nth-child(4) { animation-delay: 0.6s; }
.door-top-deco span:nth-child(5) { animation-delay: 0.8s; }

@keyframes decoWiggle {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25%  { transform: translateY(-5px) rotate(-8deg); }
    75%  { transform: translateY(-3px) rotate(8deg); }
}

/* ── 문 프레임 ── */
.door-frame {
    width: 230px;
    padding: 18px 18px 0;
    background: linear-gradient(180deg, #2a1a0e, #3d2510);
    border-radius: 18px 18px 0 0;
    box-shadow:
        0 0 0 4px #5a3820,
        0 0 0 8px #2a1a0e,
        0 20px 60px rgba(0,0,0,0.8),
        inset 0 2px 8px rgba(255,200,120,0.15);
    position: relative;
}

/* 프레임 상단 아치 장식 */
.door-frame::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 8px;
    background: linear-gradient(90deg, #8B5E3C, #C4903A, #8B5E3C);
    border-radius: 0 0 6px 6px;
}

/* ── 문짝 ── */
.door {
    width: 194px;
    height: 320px;
    background: linear-gradient(160deg, #8B4513 0%, #A0522D 30%, #7B3A0F 70%, #6B2F0A 100%);
    border-radius: 12px 12px 0 0;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    box-shadow:
        inset -4px 0 12px rgba(0,0,0,0.4),
        inset 4px 0 8px rgba(255,200,100,0.1),
        inset 0 4px 16px rgba(255,180,80,0.1);
    transform-origin: left center;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-style: preserve-3d;
}

/* 나무결 질감 */
.door::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        175deg,
        transparent 0px,
        transparent 8px,
        rgba(0,0,0,0.06) 8px,
        rgba(0,0,0,0.06) 9px
    );
    border-radius: inherit;
}

/* 문 열릴 때 */
.door.opening {
    transform: perspective(900px) rotateY(-75deg);
    box-shadow:
        inset -4px 0 12px rgba(0,0,0,0.6),
        8px 0 40px rgba(255,220,100,0.3);
}

/* ── 문 패널 장식 ── */
.door-panel {
    position: absolute;
    left: 18px;
    right: 18px;
    border-radius: 6px;
    border: 3px solid rgba(120,70,30,0.8);
    box-shadow:
        inset 0 2px 6px rgba(0,0,0,0.3),
        0 2px 4px rgba(255,180,80,0.15);
    background: linear-gradient(135deg, rgba(140,80,30,0.4), rgba(100,50,15,0.2));
}

.top-panel {
    top: 20px;
    height: 100px;
}

.bottom-panel {
    bottom: 24px;
    height: 140px;
}

/* ── 문 노브 ── */
.door-knob {
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    background: radial-gradient(circle at 35% 35%, #FFD700, #DAA520, #8B6914);
    border-radius: 50%;
    box-shadow:
        0 2px 8px rgba(0,0,0,0.5),
        inset 0 -2px 4px rgba(0,0,0,0.3),
        0 0 10px rgba(255,200,50,0.4);
    cursor: pointer;
    transition: all 0.2s;
}

.door-knob:hover {
    transform: translateY(-50%) scale(1.15);
    box-shadow:
        0 4px 12px rgba(0,0,0,0.5),
        0 0 20px rgba(255,200,50,0.7);
}

.door-knob-inner {
    width: 8px;
    height: 8px;
    background: radial-gradient(circle at 30% 30%, #FFFACD, #DAA520);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ── 문 우편함 슬롯 ── */
.door-slot {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 8px;
    background: #2a1a0e;
    border-radius: 3px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.6);
}

/* ── 문 번호판 ── */
.door-number {
    position: absolute;
    top: 130px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #F5DEB3, #DEB887);
    border-radius: 8px;
    padding: 6px 12px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    border: 1.5px solid rgba(160,120,60,0.6);
    min-width: 80px;
}

.door-number span { font-size: 1.2rem; display: block; }

.door-number p {
    font-family: 'Gaegu', cursive;
    font-size: 0.65rem;
    color: #6B3A1F;
    font-weight: 700;
    margin-top: 2px;
    white-space: nowrap;
}

/* ── 노크 파동 ── */
.knock-ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid rgba(255,200,100,0.7);
    opacity: 0;
    pointer-events: none;
}

.knock-ripple.fire {
    animation: knockRippleAnim 0.7s ease-out forwards;
}

@keyframes knockRippleAnim {
    0%   { transform: translate(-50%, -50%) scale(0.2); opacity: 0.9; }
    100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}

/* 문 흔들림 */
.door.knock-shake {
    animation: doorShake 0.35s ease;
}

@keyframes doorShake {
    0%  { transform: perspective(900px) rotate(0) translateX(0); }
    20% { transform: perspective(900px) rotate(0) translateX(-5px); }
    40% { transform: perspective(900px) rotate(0) translateX(4px); }
    60% { transform: perspective(900px) rotate(0) translateX(-3px); }
    80% { transform: perspective(900px) rotate(0) translateX(2px); }
    100%{ transform: perspective(900px) rotate(0) translateX(0); }
}

/* ── 바닥 그림자 ── */
.door-shadow {
    width: 260px;
    height: 20px;
    background: radial-gradient(ellipse, rgba(0,0,0,0.55) 0%, transparent 70%);
    margin-top: -4px;
    animation: shadowPulse 3s ease-in-out infinite;
}

@keyframes shadowPulse {
    0%, 100% { transform: scaleX(1); opacity: 0.6; }
    50%       { transform: scaleX(1.05); opacity: 0.8; }
}

/* ── 안내 텍스트 ── */
.intro-guide {
    position: absolute;
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    opacity: 0;
    animation: guideAppear 0.8s ease 1.8s forwards;
}

@keyframes guideAppear {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.guide-text {
    font-family: 'Gaegu', cursive;
    font-size: 1.25rem;
    color: rgba(255,220,200,0.95);
    font-weight: 700;
    text-shadow: 0 0 20px rgba(255,180,100,0.6);
    letter-spacing: 1px;
    white-space: nowrap;
    transition: all 0.4s ease;
}

.guide-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.guide-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,200,150,0.6);
    animation: dotBounce 1.4s ease-in-out infinite;
}
.guide-dots span:nth-child(2) { animation-delay: 0.2s; }
.guide-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dotBounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
    40%           { transform: translateY(-7px); opacity: 1; }
}

/* ── 노크 카운터 ── */
.knock-counter {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Gaegu', cursive;
    font-size: 1.8rem;
    color: rgba(255,220,150,0.9);
    letter-spacing: 12px;
    text-shadow: 0 0 16px rgba(255,180,80,0.7);
    opacity: 0;
    transition: opacity 0.3s;
}

.knock-counter.visible { opacity: 1; }

/* ── 문이 열릴 때 빛 ── */
.door-light {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 260px;
    height: 340px;
    background: radial-gradient(ellipse at center,
        rgba(255,240,210,1) 0%,
        rgba(255,200,150,0.9) 30%,
        rgba(255,150,200,0.6) 60%,
        rgba(200,150,255,0.3) 80%,
        transparent 100%);
    border-radius: 12px 12px 0 0;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    transition: opacity 0.1s;
}

.door-light.burst {
    animation: lightBurst 1.2s ease-out forwards;
}

@keyframes lightBurst {
    0%   { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
    20%  { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
    50%  { transform: translate(-50%, -50%) scale(2); opacity: 0.9; }
    100% { transform: translate(-50%, -50%) scale(5); opacity: 0; }
}

/* ── 전체 화면 화이트 플래시 ── */
.intro-overlay.white-flash {
    animation: whiteFlash 0.8s ease-out forwards;
}

@keyframes whiteFlash {
    0%   { background: #000; }
    30%  { background: #fff8f0; }
    60%  { background: #fff0f8; }
    100% { background: transparent; opacity: 0; }
}

/* ── 메인앱 숨김/표시 ── */
.main-app {
    opacity: 0;
    transform: scale(0.97);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.main-app.hidden { display: none !important; }

.main-app.reveal {
    opacity: 1;
    transform: scale(1);
}

/* ── 모바일 반응형 ── */
@media (max-width: 480px) {
    .door-frame  { width: 190px; padding: 14px 14px 0; }
    .door        { width: 162px; height: 270px; }
    .top-panel   { top: 16px; height: 80px; }
    .bottom-panel{ height: 110px; }
    .door-number { top: 104px; }
    .guide-text  { font-size: 1.05rem; }
    .knock-counter { font-size: 1.4rem; letter-spacing: 8px; }
    .door-shadow { width: 210px; }
}