/* ── Loading Screen ── */ #loading-screen { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; pointer-events: auto; } /* Curtains — minimal default: flat black, no decorations */ .curtain-left, .curtain-right { position: absolute; top: 0; bottom: 0; width: 50%; background: #000; overflow: hidden; } .curtain-left { left: 0; } .curtain-right { right: 0; } .curtain-left.open { animation: slide-left 0.8s ease-in-out forwards; } .curtain-right.open { animation: slide-right 0.8s ease-in-out forwards; } @keyframes slide-left { to { transform: translateX(-100%); } } @keyframes slide-right { to { transform: translateX(100%); } } /* Title — minimal default: plain white DGFC */ .curtain-title { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: 1; transition: opacity 0.6s ease-out; } .curtain-title .title-text { font-family: 'Segoe UI', system-ui, sans-serif; font-size: 48px; font-weight: 300; letter-spacing: 0.2em; color: #fff; } .curtain-title .title-line { width: 60px; height: 1px; background: #fff; opacity: 0.5; } .curtain-title .title-sub { font-family: 'Segoe UI', system-ui, sans-serif; font-size: 11px; font-weight: 400; letter-spacing: 0.3em; color: #aaa; } .curtain-title.fade { opacity: 0; } /* Heart — minimal default: plain red */ .loader-heart { margin-top: 20px; width: 48px; height: 45px; animation: heart-pulse 1.2s ease-in-out infinite; } .loader-heart.done { animation: none; } .loader-heart svg { width: 100%; height: 100%; overflow: visible; } .loader-heart svg path { stroke: #ff3b3b; } .heart-fill { fill: #ff3b3b; transition: y 0.3s ease-out; } @keyframes heart-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } /* ── Themed design — applies once html.dark or html.tatami is on ── */ html.dark .curtain-left, html.dark .curtain-right, html.tatami .curtain-left, html.tatami .curtain-right, html.yume .curtain-left, html.yume .curtain-right { background: var(--bg-body); } html.dark .curtain-left, html.tatami .curtain-left, html.yume .curtain-left { border-right: 1px solid var(--border-accent); } html.dark .curtain-right, html.tatami .curtain-right, html.yume .curtain-right { border-left: 1px solid var(--border-accent); } html.dark .curtain-left::before, html.dark .curtain-right::before, html.tatami .curtain-left::before, html.tatami .curtain-right::before, html.yume .curtain-left::before, html.yume .curtain-right::before { content: ''; position: absolute; top: 0; bottom: 0; width: 100%; background: radial-gradient(circle at 30% 20%, var(--accent-glow) 0%, transparent 50%), radial-gradient(circle at 70% 60%, var(--accent-glow) 0%, transparent 40%), radial-gradient(circle at 50% 90%, var(--accent-glow) 0%, transparent 45%); } html.dark .curtain-left::after, html.dark .curtain-right::after, html.tatami .curtain-left::after, html.tatami .curtain-right::after, html.yume .curtain-left::after, html.yume .curtain-right::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40px; background: linear-gradient(to var(--curtain-edge), var(--accent-glow-md), transparent); } html.dark .curtain-left::after, html.tatami .curtain-left::after, html.yume .curtain-left::after { right: 0; --curtain-edge: left; } html.dark .curtain-right::after, html.tatami .curtain-right::after, html.yume .curtain-right::after { left: 0; --curtain-edge: right; } html.dark .curtain-title .title-text, html.tatami .curtain-title .title-text, html.yume .curtain-title .title-text { color: var(--accent); text-shadow: 0 0 8px var(--accent), 0 0 20px var(--accent), 0 0 40px var(--accent); animation: title-glow 2s ease-in-out infinite alternate; } @keyframes title-glow { 0% { text-shadow: 0 0 5px var(--accent), 0 0 15px var(--accent), 0 0 30px var(--accent); } 100% { text-shadow: 0 0 15px var(--accent), 0 0 40px var(--accent), 0 0 80px var(--accent); } } html.dark .curtain-title .title-line, html.tatami .curtain-title .title-line, html.yume .curtain-title .title-line { background: var(--accent); opacity: 0.4; } html.dark .curtain-title .title-sub, html.tatami .curtain-title .title-sub, html.yume .curtain-title .title-sub { color: var(--text-muted); } html.dark .loader-heart, html.tatami .loader-heart, html.yume .loader-heart { filter: drop-shadow(0 0 8px var(--accent)); } html.dark .loader-heart svg path, html.tatami .loader-heart svg path, html.yume .loader-heart svg path { stroke: var(--accent); } html.dark .heart-fill, html.tatami .heart-fill, html.yume .heart-fill { fill: var(--accent); }