/* "Enter the LION'S DEN" intro – shown once per browser session (see lion-splash.js) */

/* Cover the page from first paint until the intro is built, so the site never flashes underneath */
html.lion-splash-on::before {
  content: ""; position: fixed; inset: 0; z-index: 9998;
  background: linear-gradient(135deg, hsla(225, 52%, 15%, 1) 31%, hsla(28, 92%, 55%, 1) 100%);
}
html.lion-splash-on.lion-splash-closing::before { display: none; }
html.lion-splash-on, html.lion-splash-on body { overflow: hidden; }

.headersplash { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: linear-gradient(135deg, hsla(225, 52%, 15%, 1) 31%, hsla(28, 92%, 55%, 1) 100%); background-size: 200% 200%; animation: gradientWave 8s ease-in-out infinite alternate; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 9999; opacity: 1; transition: opacity 1s ease-out; }
@keyframes gradientWave { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.headersplash.fade-out { opacity: 0; visibility: hidden; transition: opacity 1s ease-out, visibility 0s 1s; }
.entrylogo { display: flex; flex-direction: column; align-items: center; text-align: center; background: #fff; padding: 35px 35px 25px; border-radius: 12px; width: 50%; max-width: 600px; box-sizing: border-box; position: relative; z-index: 2; }
.entrylogo img { width: 100%; height: auto; max-width: 300px; margin-bottom: 20px; }
@media only screen and (max-width: 1000px) { .entrylogo { width: 90%; padding: 20px; } }
.swap-wrapper { position: relative; width: 100%; min-height: 70px; display: flex; align-items: center; justify-content: center; }
.splash-btn, .welcome-message { position: absolute; transition: opacity 0.6s ease; pointer-events: none; }
.splash-btn { padding: 18px 32px; background: linear-gradient(135deg, hsla(225, 52%, 15%, 1) 31%, hsla(28, 92%, 55%, 1) 100%); background-size: 200% 200%; color: white; border: none; border-radius: 6px; font-size: 1.5rem; font-family: 'Anton', sans-serif; cursor: pointer; opacity: 1; pointer-events: auto; }
.splash-btn:hover { transform: scale(1.05); }
.splash-btn.fade-out { opacity: 0; pointer-events: none; }
.welcome-message { font-size: 1.8rem; font-family: 'Anton', sans-serif; color: #121b38; opacity: 0; text-align: center; }
.welcome-message.show { opacity: 1; }
.handwrite-wrapper { margin-top: 25px; margin-bottom: 25px; font-size: 1.6rem; font-family: 'Eagle Lake', cursive; color: #7abd1e; white-space: nowrap; display: inline-block; line-height: 1.4; overflow: visible; }
.handwrite-text { display: inline-block; white-space: nowrap; clip-path: inset(-6px 100% -6px 0); will-change: clip-path; }
.handwrite-text.animate { animation: lionSplashReveal 4s ease forwards; }
@keyframes lionSplashReveal { to { clip-path: inset(-6px 0 -6px 0); } }
@media only screen and (max-width: 1000px) {
  .splash-btn { padding: 15px 24px; font-size: 1.2rem; }
  .welcome-message { font-size: 1.4rem; }
  .handwrite-wrapper { font-size: 1.2rem; margin-top: 18px; }
}