:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #070305; }
body { font-family: "Cinzel", Georgia, serif; overflow: hidden; }
.hero { isolation: isolate; position: relative; min-height: 100vh; height: 100svh; color: #eee7e1; overflow: hidden; background: #090506; }
.hero__media { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; pointer-events: none; }
.hero__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.92) contrast(1.04) brightness(.98); }
.hero__shade { position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse 45% 42% at 52% 49%, rgba(6,2,4,.03), rgba(5,2,4,.34) 78%), linear-gradient(90deg, rgba(3,1,2,.20), transparent 40%, rgba(4,1,2,.06) 74%, rgba(2,1,2,.20)), linear-gradient(0deg, rgba(4,1,3,.40), transparent 35%, rgba(3,1,3,.10)); }
.topbar { position: relative; z-index: 2; width: min(100% - 9vw, 1480px); margin: auto; display: flex; align-items: flex-start; justify-content: space-between; padding-top: clamp(25px, 4vw, 53px); }
.brand { color: #ddd4cc; text-decoration: none; text-align: center; line-height: 1; width: 150px; filter: drop-shadow(0 3px 4px #000); }
.brand__logo { display: block; width: 150px; height: auto; filter: drop-shadow(0 2px 5px #000); }
.utility { display: flex; gap: 20px; align-items: center; padding: 4px 3px; font-size: 13px; letter-spacing: 1px; }
button, a { font: inherit; }.lang { border: 0; padding: 0; color: inherit; background: none; cursor: pointer; }.lang span { margin-right: 7px; font-size: 19px; vertical-align: -1px; }.lang b { color: #947f77; font-size: 14px; margin-left: 5px; }.divider { display: block; height: 25px; width: 1px; background: #cab8ae55; }.community { color: #f0e8e3; text-decoration: none; font-family: sans-serif; font-size: 22px; transition: color .2s ease, transform .2s ease; }.community:hover { color: #dc1928; transform: scale(1.1); }
.intro { position: absolute; z-index: 1; top: 51%; left: 50%; width: min(660px, 88vw); text-align: center; transform: translate(-50%, -50%); text-shadow: 0 2px 10px #000; }
.eyebrow { margin: 0 0 9px; color: #dfd6ce; font-size: clamp(10px, 1vw, 15px); letter-spacing: clamp(4px, .68vw, 10px); font-weight: 500; }
.crest { display: flex; justify-content: center; align-items: center; gap: 6px; height: 28px; color: #aa1420; }.crest span { height: 1px; width: 45px; background: linear-gradient(90deg, transparent, #8e1721, transparent); }.crest b { font-size: 27px; font-weight: 400; text-shadow: 0 0 18px #d01425; }
h1 { margin: -2px 0 19px; line-height: 0; } .main-logo { display: block; width: min(690px, 88vw); height: auto; margin: 0 auto; filter: drop-shadow(0 3px 12px #000); }
.tagline { display: flex; align-items: center; justify-content: center; gap: 15px; margin: 0; color: #d3c5be; font-size: clamp(9px, .82vw, 12px); letter-spacing: clamp(2.2px, .35vw, 5px); }.tagline i { height: 4px; width: 4px; display: inline-block; background: #a91320; transform: rotate(45deg); box-shadow: 0 0 8px #d81927; }
.enter { display: flex; align-items: center; justify-content: center; gap: 23px; width: min(330px, 73vw); height: 65px; margin: clamp(28px, 3.1vw, 47px) auto 0; color: #f7e7df; font-size: clamp(14px, 1.25vw, 19px); letter-spacing: .6px; text-decoration: none; background: linear-gradient(180deg, #5e0711d9, #210208e6 52%, #780b18da); border: 1px solid #ac5c62; clip-path: polygon(7% 0, 93% 0, 100% 50%, 93% 100%, 7% 100%, 0 50%); box-shadow: inset 0 0 0 3px #210108, inset 0 0 18px #b21220, 0 6px 17px #0009; transition: transform .25s ease, filter .25s ease; }.enter::before { content: ""; position: absolute; width: 91%; height: 82%; border-top: 1px solid #d6aaa280; border-bottom: 1px solid #61131b; }.enter span { position: relative; color: #eea5a1; font-size: 22px; transition: transform .2s ease; }.enter:hover { transform: translateY(-3px); filter: brightness(1.32); }.enter:hover span { transform: translateX(4px); }
.footer-mark { position: absolute; z-index: 1; left: 50%; bottom: clamp(16px, 4vh, 42px); transform: translateX(-50%); width: max-content; max-width: 90vw; text-align: center; color: #c7afa5; pointer-events: none; }.footer-mark span { display: inline-block; vertical-align: middle; width: 73px; height: 1px; background: linear-gradient(90deg, transparent, #b89589, transparent); }.footer-mark b { margin: 0 8px; color: #97121d; font-size: 17px; font-weight: 400; vertical-align: middle; }.footer-mark small { display: block; margin-top: 6px; font-size: 8px; letter-spacing: 7px; padding-left: 7px; color: #a8948b; }
.footer-copyright-note { display: block; margin-top: 5px; font-size: 8.5px; letter-spacing: 2px; color: #8e7c75; font-weight: 600; text-shadow: 0 1px 4px rgba(0,0,0,0.8); white-space: nowrap; }
.embers i { position: absolute; z-index: -1; width: 3px; height: 3px; background: #d42620; border-radius: 50%; opacity: 0; box-shadow: 0 0 9px 2px #d5241d; animation: drift 10s linear infinite; }.embers i:nth-child(1){left:19%;bottom:18%;animation-delay:-1s}.embers i:nth-child(2){left:73%;bottom:23%;animation-delay:-7s}.embers i:nth-child(3){left:88%;bottom:12%;animation-delay:-4s}.embers i:nth-child(4){left:63%;bottom:7%;animation-delay:-9s}.embers i:nth-child(5){left:35%;bottom:3%;animation-delay:-3s}.embers i:nth-child(6){left:92%;bottom:36%;animation-delay:-5s}
@keyframes drift { 0% { transform: translate(0,0) scale(.5); opacity:0;} 12%,74% {opacity:.7} 100% {transform: translate(40px,-230px) scale(1.25);opacity:0} }
@media (max-width: 650px) { .topbar { width: calc(100% - 32px); padding-top: 22px; }.brand { width: 112px; }.brand__logo{width:112px}.utility{gap:11px;font-size:11px}.utility .divider{height:18px}.community{font-size:18px}.intro{top:52%}.eyebrow{letter-spacing:3px}.crest{height:22px}.crest span{width:28px}.main-logo{width:min(470px,94vw)}.tagline{gap:8px;letter-spacing:1.4px;font-size:8px}.enter{height:57px;margin-top:27px;font-size:13px}.footer-mark{bottom:19px}.hero__backdrop{object-position:72% center;filter:saturate(.84) contrast(1.08) brightness(.84);} }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero__media, .hero__backdrop {
    animation: none !important;
    transform: none !important;
  }
  .embers i {
    animation: none !important;
    display: none !important;
  }
}

/* Page Transition Effects */
.page-transition-curtain {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  background: radial-gradient(circle at center, #1f050b 0%, #070305 85%);
  opacity: 1;
  transition: opacity 0.65s cubic-bezier(0.25, 1, 0.5, 1);
}
body.page-ready .page-transition-curtain {
  opacity: 0;
}
body.page-leaving .page-transition-curtain {
  opacity: 1;
  pointer-events: all;
}
body.page-leaving .intro {
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s ease, filter 0.55s ease;
  transform: translate(-50%, -50%) scale(1.05) !important;
  opacity: 0 !important;
  filter: blur(4px);
}
body.page-leaving .topbar {
  transition: opacity 0.45s ease, filter 0.55s ease;
  opacity: 0 !important;
  filter: blur(4px);
}
body.page-leaving .footer-mark {
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s ease, filter 0.55s ease;
  transform: translateX(-50%) scale(1.05) !important;
  opacity: 0 !important;
  filter: blur(4px);
}
body.page-leaving .hero__media {
  transition: transform 0.55s ease, filter 0.55s ease;
  filter: brightness(0.3) contrast(1.3);
}
.enter.is-leaving {
  filter: brightness(1.7) drop-shadow(0 0 20px #e01729) !important;
  transform: translateY(-1px) scale(1.02) !important;
}

/* Bottom-Right Corner Emblem (logo2.png) */
.corner-logo-wrap {
  position: absolute;
  right: clamp(16px, 3.2vw, 40px);
  bottom: clamp(16px, 3.2vh, 36px);
  z-index: 10;
  pointer-events: auto;
  user-select: none;
  animation: cornerLogoFloat 6s ease-in-out infinite;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}

.corner-logo {
  display: block;
  width: clamp(110px, 11.5vw, 160px);
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.88)) drop-shadow(0 0 16px rgba(185, 28, 28, 0.35));
  transition: filter 0.35s ease, transform 0.35s ease;
}

.corner-logo-wrap:hover {
  transform: translateY(-5px) scale(1.05);
}

.corner-logo-wrap:hover .corner-logo {
  filter: drop-shadow(0 14px 35px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 24px rgba(225, 29, 72, 0.65));
}

@keyframes cornerLogoFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@media (max-width: 650px) {
  .corner-logo-wrap {
    right: 12px;
    bottom: 12px;
    opacity: 0.9;
  }
  .corner-logo {
    width: clamp(75px, 18vw, 105px);
  }
}

/* Guard: Prevent auth modal from displaying on landing gateway page */
.auth-modal,
#authModal {
  display: none !important;
}