/* Dark Dusk atmosphere: decorative layers only, with no extra image assets. */
:root {
  --fx-ease: cubic-bezier(.22, 1, .36, 1);
  --fx-bronze: 196, 164, 119;
}

.header {
  background: linear-gradient(180deg, #172029f7, #10161cf7);
  box-shadow: 0 5px 18px #04090d24;
}
.header::after {
  content: '';
  position: absolute;
  inset: auto 0 -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #c4a47724 25%, #c4a4774a 50%, #c4a47724 75%, transparent);
  pointer-events: none;
}
.main-nav a.active::after {
  background: linear-gradient(90deg, #94784d, #ddc397, #94784d);
}

/* A faint frame belongs to the scenery and never scales the artwork. */
.hero::before {
  content: '';
  display: block;
  position: absolute;
  inset: 19px 20px 25px;
  z-index: 0;
  pointer-events: none;
  opacity: .42;
  background:
    linear-gradient(#c4a47780, #c4a47780) left top / 52px 1px no-repeat,
    linear-gradient(#c4a47780, #c4a47780) left top / 1px 33px no-repeat,
    linear-gradient(#c4a47780, #c4a47780) right top / 52px 1px no-repeat,
    linear-gradient(#c4a47780, #c4a47780) right top / 1px 33px no-repeat,
    linear-gradient(#c4a47755, #c4a47755) left bottom / 52px 1px no-repeat,
    linear-gradient(#c4a47755, #c4a47755) left bottom / 1px 33px no-repeat,
    linear-gradient(#c4a47755, #c4a47755) right bottom / 52px 1px no-repeat,
    linear-gradient(#c4a47755, #c4a47755) right bottom / 1px 33px no-repeat;
}
.hero-atmosphere {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero-breath {
  position: absolute;
  z-index: -2;
  display: block;
  pointer-events: none;
}
.hero .eyebrow::before {
  width: 36px;
  background: linear-gradient(90deg, #8e704c, #d9bd8d);
}
.hero h1 {
  text-shadow: 0 2px 22px #04090d66;
}
.hero h1 em {
  color: #cfb084;
}

.worlds-section {
  position: relative;
  background:
    radial-gradient(ellipse at 18% 0%, #c4a4770d, transparent 60%),
    linear-gradient(180deg, #172029, #11181f);
  border-top-color: #86704d52;
}
.worlds-section::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -5px;
  width: 9px;
  height: 9px;
  transform: translateX(-50%) rotate(45deg);
  border: 1px solid #9e825b;
  background: #142029;
  pointer-events: none;
}
.section-heading {
  position: relative;
  padding-bottom: 16px;
  border-bottom: 1px solid #c4a47718;
}
.section-heading::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 72px;
  height: 1px;
  background: linear-gradient(90deg, #c4a4779c, #c4a47700);
  pointer-events: none;
}
.journey {
  background: radial-gradient(ellipse at 50% 0%, #c4a47709, transparent 67%), #11181f;
  border-color: #c4a47724;
}
.step-number {
  text-shadow: 0 3px 13px #c4a4771a;
}
.community-banner {
  background:
    radial-gradient(ellipse at 0% 50%, #c4a47710, transparent 64%),
    linear-gradient(120deg, #1c2730, #151e26);
}
.footer {
  background: linear-gradient(180deg, #10171e, #0b1015 60%);
  border-top-color: #c4a47724;
}

/* Material is conveyed with small, static gradients and inset edges. */
.realm-card,
.engine-servers-inner .server-card,
.download-card,
.stat-card,
.category-card,
.member-card,
.action-card {
  background: linear-gradient(135deg, #1e2a35, #17212b 68%);
}
.engine-servers-inner .server-card {
  position: relative;
}
.realm-card,
.server-card,
.news-feature,
.news-item,
.news-card,
.download-card,
.stat-card,
.category-card,
.member-card,
.action-card,
.castle-card,
.community-banner {
  box-shadow: inset 0 1px 0 #ffffff05, 0 9px 20px #04090d26;
  transition: border-color .35s ease, transform .5s var(--fx-ease);
}
.realm-card::before,
.engine-servers-inner .server-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 27px;
  width: 70px;
  height: 1px;
  background: linear-gradient(90deg, #c4a477, #c4a47715);
  pointer-events: none;
}
.realm-icon {
  background: linear-gradient(135deg, #c4a47711, #c4a47700);
  box-shadow: inset 0 0 0 3px #c4a47704;
  border-color: #9d805555;
  transition: border-color .35s, color .35s;
}
.panel,
.auth-layout,
.db-detail {
  box-shadow: inset 0 1px 0 #ffffff04;
}
.page-head::after {
  content: '';
  width: 52px;
  height: 52px;
  right: 24px;
  top: 53px;
  border: 1px solid #c4a477;
  background: linear-gradient(135deg, #c4a47719, transparent);
  transform: rotate(45deg);
  opacity: .15;
  pointer-events: none;
}

[data-fx-card] {
  position: relative;
  isolation: isolate;
}
[data-fx-card]::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(340px circle at var(--fx-x, 50%) var(--fx-y, 0%), rgba(var(--fx-bronze), .085), transparent 70%);
  opacity: 0;
  transition: opacity .35s ease;
}
[data-fx-card]:focus-within::after {
  opacity: 1;
}
[data-fx-card]:focus-within {
  border-color: #8c765552;
}

.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: inset 0 1px 0 #ffffff24, 0 4px 12px #04090d26;
  transition: color .25s, background .25s, border-color .25s, transform .4s var(--fx-ease);
}
/* Keep the button sheen inside its own box, including in legacy server layouts. */
.engine-servers-inner .server-card .btn {
  position: relative;
  inset: auto;
}

.btn:not(.btn-secondary) {
  background: linear-gradient(110deg, #d0b488, #bda071);
  border-color: #ceb084;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 34%, #ffffff30 49%, transparent 64%);
  transform: translateX(-115%);
  transition: transform .7s var(--fx-ease);
}
.btn-secondary {
  box-shadow: inset 0 1px 0 #ffffff05;
}
.btn:focus-visible::after {
  transform: translateX(115%);
}
.text-link svg,
.news-arrow svg {
  transition: transform .35s var(--fx-ease);
}

@media (hover: hover) and (pointer: fine) {
  [data-fx-card][data-fx-active="true"]::after {
    opacity: 1;
  }
  [data-fx-card][data-fx-active="true"] {
    border-color: #8c7655;
    transform: translateY(-3px);
  }
  .realm-card[data-fx-active="true"] .realm-icon {
    border-color: #b09260;
    color: #dfc495;
  }
  .btn:hover::after {
    transform: translateX(115%);
  }
  .btn:not(.btn-secondary):hover {
    background: linear-gradient(110deg, #dfc397, #caac7b);
  }
  .text-link:hover svg,
  .news-item:hover .news-arrow svg {
    transform: translateX(3px);
  }
}

/* Visibility is opt-in: without JS every block remains readable. */
.fx-ready .fx-reveal {
  transition: opacity .75s ease, transform .75s var(--fx-ease), border-color .35s;
  transition-delay: var(--fx-delay, 0ms), var(--fx-delay, 0ms), 0ms;
}
.fx-ready .fx-reveal:not(.fx-visible) {
  opacity: 0;
  transform: translateY(14px);
}
.fx-ready .fx-reveal.fx-visible {
  opacity: 1;
}
.fx-static .btn::after {
  display: none;
}
.fx-static .btn:hover,
.fx-static .text-link:hover svg,
.fx-static .news-item:hover .news-arrow svg {
  transform: none;
}

@media (max-width: 600px) {
  .hero::before {
    inset: 12px 12px 16px;
    opacity: .25;
  }
  .hero .eyebrow::before {
    width: 24px;
  }
  .section-heading {
    padding-bottom: 12px;
  }
  .page-head::after {
    width: 36px;
    height: 36px;
    right: 16px;
    opacity: .08;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-atmosphere {
    display: none;
  }
  .fx-ready .fx-reveal,
  .fx-ready .fx-reveal:not(.fx-visible),
  .fx-ready .fx-reveal.fx-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
  [data-fx-card],
  [data-fx-card]::after,
  .btn,
  .btn::after,
  .text-link svg,
  .news-arrow svg {
    transition: none;
  }
  [data-fx-card][data-fx-active="true"],
  .btn:hover,
  .text-link:hover svg,
  .news-item:hover .news-arrow svg {
    transform: none;
  }
  .btn::after {
    display: none;
  }
}