@font-face { font-family: Cinzel; src: url('../fonts/cinzel-latin.woff2') format('woff2'); font-weight: 500 800; font-display: swap; }
@font-face { font-family: Inter; src: url('../fonts/inter-latin.woff2') format('woff2'); font-weight: 400 800; font-display: swap; }

:root {
  --bg: #050607;
  --white: #ecebe6;
  --muted: #858b90;
  --line: rgba(224, 228, 230, .14);
  --gold: #c5a25e;
  --ease: cubic-bezier(.16, .78, .16, 1);
}

* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; margin: 0; background: var(--bg); }
body { color: var(--white); font-family: Inter, Arial, sans-serif; overflow-x: hidden; -webkit-user-select: none; user-select: none; }
a { color: inherit; text-decoration: none; }
img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }

@media (any-pointer: fine) {
  html, body, body *, body *::before, body *::after,
  body *:hover, body *:active, body *:focus {
    cursor: url('../img/cursor-arrow.cur'), url('../img/cursor-arrow.png') 2 1, default !important;
  }
}

.page {
  min-height: 100svh;
  padding: 0 24px 20px;
  background: radial-gradient(circle at 50% -25%, rgba(255,255,255,.055), transparent 36%), #050607;
}

.header {
  width: min(1320px, calc(100vw - 64px));
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  border-bottom: 1px solid rgba(255,255,255,.075);
}

.brand { display: flex; align-items: center; gap: 13px; }
.brand > i { position: relative; width: 27px; height: 27px; border: 1px solid #7c8287; transform: rotate(45deg); }
.brand > i::before { position: absolute; inset: 6px; border: 1px solid var(--gold); content: ''; }
.brand > i::after { position: absolute; inset: 11px; background: var(--gold); content: ''; }
.brand span { display: flex; flex-direction: column; }
.brand b { font-family: Cinzel, serif; font-size: 14px; font-weight: 600; letter-spacing: .16em; }
.brand small { margin-top: 3px; color: #656b70; font-size: 7px; letter-spacing: .22em; }

.header > p { display: flex; align-items: center; gap: 11px; margin: 0; color: #747b80; font-size: 8px; letter-spacing: .24em; }
.header > p span { width: 34px; height: 1px; background: #545a5e; }

.realms {
  position: relative;
  width: min(1240px, calc(100vw - 96px));
  height: clamp(520px, 62svh, 650px);
  min-height: 520px;
  display: flex;
  gap: 0;
  margin: clamp(26px, 4.2vh, 46px) auto 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  box-shadow: none;
  isolation: isolate;
}

.realm {
  --accent: #e4343c;
  --rgb: 228,52,60;
  --deep: #41070a;
  position: relative;
  min-width: 0;
  flex: 1 1 50%;
  overflow: hidden;
  background: #09090a;
  outline: none;
  will-change: flex-grow;
  transition: flex-grow .68s var(--ease);
}

.realm--fast { --accent: #2bbbe9; --rgb: 43,187,233; --deep: #022b40; }
.realms.is-engaged .realm { flex-grow: .78; }
.realms.is-engaged .realm.is-active { flex-grow: 1.28; }

.realm__scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 34%, rgba(var(--rgb),.19), transparent 23%),
    linear-gradient(145deg, #08090a 5%, var(--deep) 52%, #070809 88%);
  transform: scale(1.02);
  will-change: transform, filter;
  transition: filter .58s ease, transform .78s var(--ease), opacity .55s ease;
}

.realm--fast .realm__scene { background: radial-gradient(circle at 50% 34%, rgba(var(--rgb),.19), transparent 23%), linear-gradient(215deg, #08090a 5%, var(--deep) 52%, #070809 88%); }
.realm.is-active .realm__scene { transform: scale(1.045); }
.realm.is-inactive .realm__scene { filter: blur(8px) saturate(.25) brightness(.48); transform: scale(1.09); opacity: .72; }

.scene__orbit { position: absolute; top: 48%; left: 50%; width: min(48vw, 700px); aspect-ratio: 1; border: 1px solid rgba(var(--rgb),.12); border-radius: 50%; transform: translate(-50%,-50%); }
.scene__orbit::before, .scene__orbit::after { position: absolute; top: 50%; left: 50%; content: ''; background: rgba(var(--rgb),.18); transform: translate(-50%,-50%); }
.scene__orbit::before { width: 140%; height: 1px; }
.scene__orbit::after { width: 1px; height: 140%; }
.scene__horizon { position: absolute; top: 50%; right: 0; left: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--rgb),.32), transparent); }
.scene__mountains {
  position: absolute;
  right: -8%;
  bottom: -12%;
  left: -8%;
  height: 48%;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(var(--rgb),.1), transparent 62%),
    linear-gradient(to bottom, transparent 0%, rgba(5,6,7,.18) 42%, rgba(5,6,7,.76) 82%, #050607 100%);
  filter: blur(10px);
  opacity: .84;
}
.scene__mist { position: absolute; right: -28%; bottom: 1%; left: -28%; height: 34%; background: radial-gradient(ellipse, rgba(180,185,188,.1), rgba(var(--rgb),.055) 38%, transparent 72%); filter: blur(30px); opacity: .34; animation: mist 12s ease-in-out infinite alternate; }
@keyframes mist { from { transform: translateX(-7%); } to { transform: translateX(7%); } }

.realm::after {
  position: absolute;
  inset: -8%;
  z-index: 8;
  background: radial-gradient(ellipse at 50% 45%, rgba(158,164,168,.22), transparent 35%), rgba(6,7,8,.74);
  content: '';
  opacity: 0;
  filter: blur(0);
  transition: opacity .52s ease;
  pointer-events: none;
}
.realm.is-inactive::after { opacity: .68; }

.realm__visual {
  position: absolute;
  top: 45%;
  left: 50%;
  z-index: 3;
  width: min(31vw, 430px);
  height: min(55vh, 520px);
  transform: translate(-50%,-49%);
  will-change: left, transform;
  transition: left .72s var(--ease), transform .72s var(--ease), opacity .5s ease, filter .5s ease;
}

.realm__visual img { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 28px 32px rgba(0,0,0,.82)) drop-shadow(0 0 14px rgba(var(--rgb),.13)); transition: transform .72s var(--ease), filter .55s ease; }
.realm__number { position: absolute; top: 1%; left: 50%; color: rgba(235,237,238,.045); font-family: Cinzel,serif; font-size: min(12vw,180px); transform: translateX(-50%); }
.realm.is-active .realm__visual { left: 72%; transform: translate(-50%,-50%) scale(.93); }
.realm--fast.is-active .realm__visual { left: 28%; }
.realm.is-active .realm__visual img { transform: translateY(-5px) scale(1.02); filter: drop-shadow(0 31px 35px rgba(0,0,0,.84)) drop-shadow(0 0 21px rgba(var(--rgb),.22)); }
.realm.is-inactive .realm__visual { filter: blur(5px) grayscale(.65); opacity: .4; transform: translate(-50%,-49%) scale(.95); }

.realm__summary { position: absolute; right: 8%; bottom: 5%; left: 8%; z-index: 6; text-align: center; transition: opacity .32s ease, transform .48s var(--ease); }
.realm__summary small { color: var(--accent); font-size: 8px; font-weight: 600; letter-spacing: .3em; }
.realm__summary h2 { margin: 5px 0 9px; font-family: Cinzel,serif; font-size: clamp(54px,5vw,80px); font-weight: 500; line-height: .95; }
.realm__summary > span { display: inline-flex; align-items: center; gap: 12px; color: #8c9296; font-size: 8px; letter-spacing: .22em; }
.realm__summary b { color: #ddd; font-size: 15px; font-weight: 400; }
.realm.is-active .realm__summary { opacity: 0; transform: translateY(16px); pointer-events: none; }
.realm.is-inactive .realm__summary { opacity: .18; }

.realm__details {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 7;
  width: 52%;
  display: flex;
  align-items: center;
  padding-left: 7%;
  visibility: visible;
  pointer-events: none;
}
.realm--fast .realm__details { right: 0; left: auto; padding-right: 7%; padding-left: 0; text-align: right; }
.realm.is-active .realm__details { pointer-events: auto; }

.details__line { position: absolute; top: 14%; bottom: 14%; left: 0; width: 1px; background: linear-gradient(transparent,var(--accent),transparent); box-shadow: 0 0 12px rgba(var(--rgb),.35); opacity: 0; transform: scaleY(.18); transition: opacity .3s ease, transform .58s var(--ease); }
.realm--fast .details__line { right: 0; left: auto; }
.realm.is-active .details__line { opacity: 1; transform: scaleY(1); }

.details__content { width: min(430px,90%); }
.realm--fast .details__content { margin-left: auto; }
.details__label, .details__content h3, .details__copy, .details__stats, .details__tags, .details__cta { opacity: 0; filter: blur(2px); transition-property: opacity,transform,filter; transition-duration: .5s; transition-timing-function: var(--ease); }
.details__label { margin: 0 0 16px; color: var(--accent); font-size: 8px; font-weight: 600; letter-spacing: .3em; transform: translateY(5px); }
.details__content h3 { margin: 0; font-family: Cinzel,serif; font-size: clamp(31px,2.5vw,42px); font-weight: 500; line-height: 1.08; letter-spacing: -.02em; transform: translateX(-24px); }
.realm--fast .details__content h3 { transform: translateX(24px); }
.details__content h3 span { display: block; }
.details__content h3 span:last-child { color: #a0a4a7; }
.details__copy { margin: 20px 0 25px; color: #8b9195; font-size: 11px; line-height: 1.75; transform: translateY(8px); }
.details__stats { display: grid; grid-template-columns: repeat(3,1fr); margin: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: translateY(8px); }
.details__stats div { padding: 15px 12px 16px; border-right: 1px solid var(--line); }
.details__stats div:first-child { padding-left: 0; }
.details__stats div:last-child { padding-right: 0; border: 0; }
.details__stats dt { color: #686f74; font-size: 7px; letter-spacing: .17em; }
.details__stats dd { margin: 6px 0 0; font-family: Cinzel,serif; font-size: clamp(15px,1.35vw,21px); white-space: nowrap; }
.details__tags { display: flex; gap: 22px; margin: 17px 0 23px; transform: translateY(8px); }
.realm--fast .details__tags { justify-content: flex-end; }
.details__tags span { position: relative; padding-left: 13px; color: #898f93; font-size: 7px; letter-spacing: .12em; }
.details__tags span::before { position: absolute; top: 50%; left: 0; width: 5px; height: 5px; background: var(--accent); content: ''; transform: translateY(-50%) rotate(45deg); box-shadow: 0 0 8px rgba(var(--rgb),.6); }
.details__cta { min-height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border: 1px solid rgba(var(--rgb),.72); font-family: Cinzel,serif; font-size: 9px; font-weight: 600; letter-spacing: .13em; transform: translateY(8px); }
.details__cta b { color: var(--accent); font-size: 17px; font-weight: 400; }
.details__cta:hover { background: rgba(var(--rgb),.1); box-shadow: 0 0 22px rgba(var(--rgb),.13); }

.realm.is-active .details__label,
.realm.is-active .details__content h3,
.realm.is-active .details__copy,
.realm.is-active .details__stats,
.realm.is-active .details__tags,
.realm.is-active .details__cta { opacity: 1; transform: translate(0); }
.realm.is-active .details__label,
.realm.is-active .details__content h3,
.realm.is-active .details__copy,
.realm.is-active .details__stats,
.realm.is-active .details__tags,
.realm.is-active .details__cta { filter: blur(0); }
.realm.is-active .details__label { transition-delay: .04s; }
.realm.is-active .details__content h3 { transition-delay: .1s; }
.realm.is-active .details__copy { transition-delay: .16s; }
.realm.is-active .details__stats { transition-delay: .22s; }
.realm.is-active .details__tags { transition-delay: .28s; }
.realm.is-active .details__cta { transition-delay: .34s; }

.realms__axis { position: absolute; top: 5%; bottom: 5%; left: 50%; z-index: 10; width: 1px; background: linear-gradient(transparent,rgba(220,224,226,.45),transparent); transform: translateX(-50%); opacity: .8; transition: opacity .5s ease; pointer-events: none; }
.realms__axis::before, .realms__axis::after { position: absolute; left: -2px; width: 5px; height: 40%; content: ''; }
.realms__axis::before { top: 0; background: linear-gradient(#e13a40,transparent); box-shadow: 0 0 13px rgba(225,58,64,.4); }
.realms__axis::after { bottom: 0; background: linear-gradient(transparent,#35bce9); box-shadow: 0 0 13px rgba(53,188,233,.4); }
.realms__axis i { position: absolute; top: 50%; left: 50%; width: 11px; height: 11px; background: #08090a; border: 1px solid #c1c5c7; transform: translate(-50%,-50%) rotate(45deg); }
.realms.is-engaged .realms__axis { opacity: .18; }

.footer { width: min(1240px,calc(100vw - 96px)); display: flex; align-items: center; gap: 14px; margin: 15px auto 0; color: #51575b; font-size: 7px; letter-spacing: .2em; }
.footer i { height: 1px; flex: 1; background: rgba(255,255,255,.07); }

@media (max-width: 900px) {
  .page { padding: 0 14px 30px; }
  .header { width: 100%; height: 72px; }
  .header > p { display: none; }
  .realms { width: 100%; height: auto; min-height: 0; display: block; margin-top: 28px; overflow: visible; background: transparent; border: 0; box-shadow: none; }
  .realm { min-height: 610px; margin-bottom: 12px; border: 1px solid rgba(255,255,255,.1); }
  .realms.is-engaged .realm, .realms.is-engaged .realm.is-active { min-height: 650px; }
  .realm__visual { top: 39%; width: min(82vw,390px); height: 440px; }
  .realm.is-active .realm__visual, .realm--fast.is-active .realm__visual { top: 27%; left: 50%; opacity: .42; transform: translate(-50%,-50%) scale(.7); }
  .realm__details, .realm--fast .realm__details { top: auto; right: 0; bottom: 0; left: 0; width: 100%; height: 74%; align-items: flex-end; padding: 0 20px 24px; text-align: left; }
  .details__content, .realm--fast .details__content { width: 100%; margin: 0; }
  .details__line, .realm--fast .details__line { top: 0; right: 10%; bottom: auto; left: 10%; width: auto; height: 1px; transform: scaleX(0); }
  .realm.is-active .details__line { transform: scaleX(1); }
  .realm--fast .details__tags { justify-content: flex-start; }
  .realms__axis { display: none; }
  .footer { width: 100%; }
}

@media (max-width: 480px) {
  .realm { min-height: 590px; }
  .realms.is-engaged .realm, .realms.is-engaged .realm.is-active { min-height: 640px; }
  .realm__details, .realm--fast .realm__details { height: 77%; padding-right: 15px; padding-left: 15px; }
  .details__content h3 { font-size: 32px; }
  .details__copy { font-size: 10px; }
  .details__stats div { padding-right: 7px; padding-left: 7px; }
  .details__stats dd { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}