#passwordGate { position: fixed; inset: 0; z-index: 2000; background: radial-gradient(ellipse at 50% 30%, rgba(232,0,28,0.18) 0%, transparent 55%), radial-gradient(ellipse at 20% 80%, rgba(201,168,76,0.10) 0%, transparent 50%), radial-gradient(ellipse at 80% 75%, rgba(74,144,217,0.10) 0%, transparent 50%), #050505; overflow: hidden; display: flex; align-items: center; justify-content: center; } #passwordGate::before { content: ''; position: absolute; inset: -10%; background-image: radial-gradient(2px 2px at 10% 20%, rgba(255,255,255,0.5) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 30% 70%, rgba(255,255,255,0.4) 0%, transparent 100%), radial-gradient(2px 2px at 60% 15%, rgba(255,255,255,0.45) 0%, transparent 100%), radial-gradient(1px 1px at 80% 60%, rgba(255,255,255,0.35) 0%, transparent 100%), radial-gradient(2px 2px at 90% 85%, rgba(255,255,255,0.4) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 45% 45%, rgba(255,255,255,0.3) 0%, transparent 100%), radial-gradient(1px 1px at 15% 90%, rgba(255,255,255,0.35) 0%, transparent 100%), radial-gradient(2px 2px at 70% 35%, rgba(255,255,255,0.4) 0%, transparent 100%); background-size: 100% 100%; animation: gateStars 16s linear infinite; pointer-events: none; opacity: 0.6; } @keyframes gateStars { 0% { transform: translateY(0) translateX(0); } 100% { transform: translateY(-30px) translateX(-20px); } } #passwordGate::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( 0deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 3px ); pointer-events: none; } #siteContent { display: none; } .gate-vignette { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, transparent 0%, transparent 38%, rgba(0,0,0,0.55) 78%, rgba(0,0,0,0.85) 100%); } .gate-grain { position: absolute; inset: -20%; z-index: 3; pointer-events: none; opacity: 0.05; transition: opacity 0.4s; mix-blend-mode: overlay; background-image: radial-gradient(1px 1px at 12% 8%, #fff 0%, transparent 100%), radial-gradient(1px 1px at 38% 22%, #fff 0%, transparent 100%), radial-gradient(1px 1px at 64% 5%, #fff 0%, transparent 100%), radial-gradient(1px 1px at 82% 30%, #fff 0%, transparent 100%), radial-gradient(1px 1px at 5% 55%, #fff 0%, transparent 100%), radial-gradient(1px 1px at 28% 70%, #fff 0%, transparent 100%), radial-gradient(1px 1px at 50% 48%, #fff 0%, transparent 100%), radial-gradient(1px 1px at 70% 62%, #fff 0%, transparent 100%), radial-gradient(1px 1px at 90% 80%, #fff 0%, transparent 100%), radial-gradient(1px 1px at 18% 92%, #fff 0%, transparent 100%), radial-gradient(1px 1px at 45% 88%, #fff 0%, transparent 100%), radial-gradient(1px 1px at 75% 95%, #fff 0%, transparent 100%); background-size: 180px 180px; animation: grainShift 0.6s steps(4) infinite; } @keyframes grainShift { 0% { transform: translate(0, 0); } 25% { transform: translate(-2%, 1%); } 50% { transform: translate(1%, -2%); } 75% { transform: translate(-1%, -1%); } 100% { transform: translate(0, 0); } } .lightning-layer { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: visible; } .lightning-bolt { fill: none; stroke: #FFD93D; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px #FFD93D) drop-shadow(0 0 14px #FFE680); opacity: 0; } .lightning-bolt.flash { animation: lightningFlash 0.45s ease-out forwards; } .lightning-bolt.branch { stroke-width: 1.3; opacity: 0; } .lightning-bolt.branch.flash { animation: lightningFlash 0.4s ease-out forwards; } @keyframes lightningFlash { 0% { opacity: 0; } 8% { opacity: 1; } 14% { opacity: 0.3; } 20% { opacity: 1; } 30% { opacity: 0.5; } 45% { opacity: 0.9; } 100% { opacity: 0; } } .pulse-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; display: flex; align-items: center; justify-content: center; } .pulse-ring { position: absolute; width: 120px; height: 120px; border-radius: 50%; border: 2px solid rgba(232,0,28,0.55); box-shadow: 0 0 18px 2px rgba(232,0,28,0.25); opacity: 0; animation: pulseExpand 4.5s cubic-bezier(0.2,0.6,0.4,1) infinite; transition: border-color 0.4s; } .pulse-ring.r2 { animation-delay: 1.5s; } .pulse-ring.r3 { animation-delay: 3s; } #passwordGate.warning-mode .pulse-ring { border-color: rgba(255,0,0,0.85); box-shadow: 0 0 24px 4px rgba(255,0,0,0.4); animation-duration: 2.2s; } #passwordGate.warning-mode .gate-grain { opacity: 0.14; } #passwordGate.warning-mode .pulse-glow { background: radial-gradient(circle at 50% 50%, rgba(255,0,0,0.32) 0%, rgba(255,0,0,0.12) 35%, transparent 65%); animation-duration: 1.4s; } @keyframes pulseExpand { 0% { width: 60px; height: 60px; opacity: 0.65; border-width: 3px; } 70% { opacity: 0.18; } 100% { width: 1400px; height: 1400px; opacity: 0; border-width: 0.5px; } } .pulse-glow { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(232,0,28,0.22) 0%, rgba(232,0,28,0.08) 35%, transparent 65%); animation: pulseGlowBeat 2.8s ease-in-out infinite; } @keyframes pulseGlowBeat { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } } .pulse-core { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle, #fff 0%, #ff6a52 35%, rgba(232,0,28,0.9) 70%, transparent 100%); box-shadow: 0 0 14px 4px rgba(232,0,28,0.7), 0 0 30px 10px rgba(232,0,28,0.35); animation: coreBeat 1.4s ease-in-out infinite; z-index: 2; } @keyframes coreBeat { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.5); opacity: 1; } } .pulse-core.warning { background: radial-gradient(circle, #fff 0%, #ff2b2b 30%, rgba(255,0,0,0.95) 70%, transparent 100%); box-shadow: 0 0 18px 5px rgba(255,0,0,0.85), 0 0 36px 12px rgba(255,0,0,0.4); animation: coreBeat 0.7s ease-in-out infinite; } .gate-box-scaler { display: inline-block; } .gate-box { position: relative; text-align: center; padding: 3rem 2.5rem; border: 1px solid rgba(201,168,76,0.35); border-radius: 14px; background: rgba(15,15,15,0.75); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); width: 320px; box-shadow: 0 0 60px rgba(232,0,28,0.15), 0 20px 60px rgba(0,0,0,0.6); z-index: 2; } .gate-box.entering { animation: gateBoxIn 0.7s cubic-bezier(0.16,1,0.3,1); } @keyframes gateBoxIn { from { opacity: 0; transform: scale(0.92) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } } .gate-box.shake { animation: gateShake 0.45s; } @keyframes gateShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-10px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } } .gate-box.box-glitching { animation: boxGlitchShift 2s steps(8, end); } .glitch-clone { display: none; pointer-events: none; } .gate-box.box-glitching .glitch-clone { display: block; position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: 14px; mix-blend-mode: screen; } .gate-box.box-glitching .glitch-clone .glitch-clone-inner { position: absolute; inset: 0; padding: 3rem 2.5rem; text-align: center; } .glitch-clone.cyan .glitch-clone-inner { color: #00e0ff; } .glitch-clone.magenta .glitch-clone-inner { color: #ff2bd6; } .glitch-clone.cyan { clip-path: inset(8% 0 72% 0); animation: glitchCloneA 2s steps(8, end); } .glitch-clone.magenta { clip-path: inset(58% 0 18% 0); animation: glitchCloneB 2s steps(8, end); } @keyframes boxGlitchShift { 0% { transform: translate(0, 0); } 8% { transform: translate(-3px, 1px); } 16% { transform: translate(2px, -1px); } 24% { transform: translate(0, 0); } 38% { transform: translate(-2px, 1px); } 46% { transform: translate(3px, -1px); } 54% { transform: translate(0, 0); } 68% { transform: translate(-3px, 1px); } 76% { transform: translate(2px, 0); } 84% { transform: translate(0, 0); } 100% { transform: translate(0, 0); } } @keyframes glitchCloneA { 0%, 100% { opacity: 0; transform: translateX(0); } 5% { opacity: 0.85; transform: translateX(-7px); } 12% { opacity: 0.3; transform: translateX(4px); } 20% { opacity: 0.8; transform: translateX(-4px); } 28% { opacity: 0; transform: translateX(0); } 42% { opacity: 0.7; transform: translateX(6px); } 50% { opacity: 0.2; transform: translateX(-3px); } 58% { opacity: 0; transform: translateX(0); } 70% { opacity: 0.8; transform: translateX(-5px); } 78% { opacity: 0; transform: translateX(0); } 90% { opacity: 0.6; transform: translateX(5px); } 96% { opacity: 0; transform: translateX(0); } } @keyframes glitchCloneB { 0%, 100% { opacity: 0; transform: translateX(0); } 9% { opacity: 0.8; transform: translateX(6px); } 18% { opacity: 0; transform: translateX(-5px); } 32% { opacity: 0.75; transform: translateX(7px); } 40% { opacity: 0; transform: translateX(0); } 55% { opacity: 0.65; transform: translateX(-6px); } 63% { opacity: 0; transform: translateX(0); } 74% { opacity: 0.7; transform: translateX(4px); } 82% { opacity: 0; transform: translateX(0); } 93% { opacity: 0.55; transform: translateX(-4px); } 98% { opacity: 0; transform: translateX(0); } } .glitch-spark { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 2px rgba(255,255,255,0.95), 0 0 14px 4px rgba(120,200,255,0.7), calc(var(--sp-x, 40px) * -0.4) calc(var(--sp-y, 40px) * -0.4) 8px 1px rgba(120,200,255,0.35); pointer-events: none; z-index: 6; animation: sparkFly var(--sp-dur, 0.55s) cubic-bezier(0.15,0.7,0.3,1) forwards; } @keyframes sparkFly { 0% { transform: translate(0, 0) scale(1.4); opacity: 1; } 8% { opacity: 0.3; } 16% { opacity: 1; } 55% { transform: translate(calc(var(--sp-x, 40px) * 0.6), calc(var(--sp-y, 40px) * 0.6 - 6px)) scale(0.8); opacity: 0.9; } 100% { transform: translate(var(--sp-x, 40px), var(--sp-y, 40px)) scale(0.1); opacity: 0; } } .gate-emblem { position: relative; color: var(--red); display: flex; justify-content: center; margin-bottom: 0.75rem; filter: drop-shadow(0 0 12px rgba(232,0,28,0.5)); } .emblem-clone { position: absolute; top: 0; left: 50%; margin-left: -17px; opacity: 0; pointer-events: none; mix-blend-mode: screen; } .emblem-clone.cyan { color: #00e0ff; } .emblem-clone.magenta { color: #ff2bd6; } #gateEmblem.glitching .emblem-clone.cyan { animation: glitchCloneA 2s steps(8, end); } #gateEmblem.glitching .emblem-clone.magenta { animation: glitchCloneB 2s steps(8, end); } .gate-logo { position: relative; font-family: 'Bebas Neue', sans-serif; font-size: 1.7rem; letter-spacing: 0.18em; color: var(--red); margin-bottom: 0.4rem; text-shadow: 0 0 20px rgba(232,0,28,0.4); } .gate-logo span { color: var(--text); } .gate-logo.glitching::before, .gate-logo.glitching::after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; color: var(--red); } .gate-logo.glitching::before { color: #00e0ff; transform: translate(-3px, -1px); clip-path: polygon(0 10%, 100% 10%, 100% 45%, 0 45%); opacity: 0.85; } .gate-logo.glitching::after { color: #ff2bd6; transform: translate(3px, 1px); clip-path: polygon(0 55%, 100% 55%, 100% 90%, 0 90%); opacity: 0.85; } .gate-sub { font-size: 0.62rem; letter-spacing: 0.25em; color: var(--gold); text-transform: uppercase; margin-bottom: 1.75rem; opacity: 0.85; } .gate-label { font-size: 0.68rem; letter-spacing: 0.22em; color: var(--muted); margin-bottom: 1.1rem; text-transform: uppercase; } .gate-dots { display: flex; justify-content: center; gap: 0.9rem; margin-bottom: 1.6rem; padding: 0.5rem; border-radius: 10px; transition: box-shadow 0.3s, background 0.3s; } .gate-dots.focused { box-shadow: 0 0 0 1px rgba(201,168,76,0.4), 0 0 22px rgba(201,168,76,0.35); background: rgba(201,168,76,0.04); } .gate-box.tap-pulse { animation: tapPulse 0.18s ease-out; } @keyframes tapPulse { 0% { transform: scale(1); } 40% { transform: scale(1.012); } 100% { transform: scale(1); } } .gate-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border); background: transparent; transition: all 0.2s; position: relative; } .gate-dot.filled { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 12px rgba(201,168,76,0.6); animation: dotPop 0.25s; } .gate-dot.filled::after { content: ''; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle, rgba(201,168,76,0.9) 0%, transparent 70%); transform: translate(-50%, -50%) scale(1); animation: dotTrail 0.45s ease-out; pointer-events: none; } @keyframes dotTrail { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.9; } 100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; } } @keyframes dotPop { 0% { transform: scale(0.5); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } } .gate-dots.error .gate-dot.filled { background: var(--red); border-color: var(--red); box-shadow: 0 0 12px rgba(232,0,28,0.6); } #gateInput { position: absolute; opacity: 0; pointer-events: none; } .gate-btn { width: 100%; padding: 0.7rem; background: linear-gradient(135deg, var(--red), #b8001a); color: #fff; border: none; border-radius: 7px; font-family: 'Noto Sans KR', sans-serif; font-weight: 700; letter-spacing: 0.15em; font-size: 0.78rem; cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 16px rgba(232,0,28,0.3); } .gate-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(232,0,28,0.45); } .gate-btn:active { transform: translateY(0); } .gate-error { position: absolute; left: 0; right: 0; bottom: -1.6rem; text-align: center; font-size: 0.75rem; color: var(--red); letter-spacing: 0.05em; opacity: 0; pointer-events: none; } .gate-error.show { animation: gateErrorFade 1.5s ease; } @keyframes gateErrorFade { 0% { opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } } .gate-success { display: none; position: absolute; inset: 0; flex-direction: column; align-items: center; justify-content: center; background: rgba(15,15,15,0.95); border-radius: 14px; z-index: 10; } .gate-success.show { display: flex; animation: successFadeIn 0.3s; } @keyframes successFadeIn { from { opacity: 0; } to { opacity: 1; } } .gate-flash { position: fixed; inset: 0; background: radial-gradient(circle at 50% 50%, #fff 0%, #ff3b1f 25%, var(--red) 55%, transparent 100%); opacity: 0; pointer-events: none; z-index: 3000; } .gate-flash.fire { animation: portalFlash 0.7s ease-out forwards; } @keyframes portalFlash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } } #passwordGate.sucking { animation: gateSuckIn 0.45s ease-in forwards; } @keyframes gateSuckIn { 0% { transform: scale(1); filter: blur(0); opacity: 1; } 100% { transform: scale(2.4); filter: blur(6px); opacity: 0; } } .gate-loading-dots { display: none; gap: 0.35rem; } .gate-loading-dots.show { display: flex; } .gate-loading-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: loadingBlink 1s infinite ease-in-out both; } .gate-loading-dots span:nth-child(1) { animation-delay: 0s; } .gate-loading-dots span:nth-child(2) { animation-delay: 0.15s; } .gate-loading-dots span:nth-child(3) { animation-delay: 0.3s; } @keyframes loadingBlink { 0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1.1); } } .gate-success-icon { display: flex; justify-content: center; color: #4ADE80; margin-bottom: 0.75rem; animation: successPop 0.5s cubic-bezier(0.34,1.56,0.64,1); filter: drop-shadow(0 0 16px rgba(74,222,128,0.5)); } @keyframes successPop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.2); } 100% { transform: scale(1); opacity: 1; } } .gate-success-text { font-family: 'Bebas Neue', sans-serif; font-size: 1.3rem; letter-spacing: 0.15em; color: #4ADE80; }