/* Cinematic Horde artwork and responsive motion. */
body {
  isolation: isolate;
}

.ambient {
  background: radial-gradient(ellipse at 50% 6%, #142641, #0b0b0b 65%);
}

.particles {
  position: fixed;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.particles i {
  width: var(--size, 2px);
  height: var(--size, 2px);
  background: #ffd11f;
  box-shadow: 0 0 8px #c49626;
}

.nav .brandLogo {
  width: clamp(60px, 6vw, 96px);
  height: auto;
}

.nav .brand span {
  display: none;
}

.nav nav a::after {
  content: "";
  position: absolute;
  inset: auto 0 1px;
  height: 2px;
  background: #ffd11f;
  box-shadow: 0 0 12px #c49626;
  transform: scaleX(0);
  transition: transform 220ms ease;
}

.nav nav a:first-child::after,
.nav nav a:hover::after,
.nav nav a:focus-visible::after {
  transform: scaleX(1);
}

.navActions {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.motionToggle {
  display: none;
}

.motionReady .motionToggle {
  display: inline-flex;
}

.hero {
  min-height: min(790px, calc(100svh - 80px));
  padding: clamp(16px, 3vw, 50px) 20px 28px;
  background: #081324;
}

.hero::before {
  z-index: -3;
  inset: -3%;
  opacity: 1;
  background: linear-gradient(180deg, #08132425 35%, #0a1421d1 90%, #0b0b0b),
              url("horde-fortress.webp") center 38% / cover;
  transform-origin: 45% 65%;
  animation: fortress-drift 24s ease-in-out infinite alternate;
}

.heroFog {
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 24% 79%, #08132456, transparent 49%),
              radial-gradient(ellipse at 82% 83%, #152b4959, transparent 44%);
  animation: smoke-drift 14s ease-in-out infinite alternate;
}

.heroPortrait {
  position: absolute;
  z-index: -2;
  width: min(39vw, 570px);
  height: auto;
  right: max(-54px, -4vw);
  top: clamp(28px, 5vw, 75px);
  mask-image: linear-gradient(#000 72%, transparent 99%);
  transform-origin: right bottom;
  pointer-events: none;
}

.heroCrest {
  position: relative;
  width: min(49vw, 570px);
  margin-inline: auto;
  translate: var(--crest-x, 0px) var(--crest-y, 0px);
  transition: translate 420ms cubic-bezier(.22,.6,.36,1);
  animation: crest-drift 8s ease-in-out infinite alternate;
}

.heroLogo {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  margin: 0;
  filter: drop-shadow(0 12px 25px #000b) drop-shadow(0 0 14px #ffb84750);
}

.heroCrest::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  mask: url("doe-relax-crest.webp") center / contain no-repeat;
  background: linear-gradient(111deg, transparent 41%, #fff0b83d 48%, #fff1ad96 50%, #ffcb6540 53%, transparent 59%);
  background-size: 235% 100%;
  background-position: 100% 50%;
  mix-blend-mode: screen;
  opacity: 0;
  animation: crest-glint 10s ease-in-out infinite;
}

.heroSubtitle {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .75rem;
  font-family: Cinzel, Georgia, serif;
  color: #ffd11f;
}

.heroSubtitle::before,
.heroSubtitle::after {
  content: "";
  width: min(9vw, 120px);
  height: 2px;
  background: linear-gradient(90deg, transparent, #ffd11f);
  box-shadow: 0 0 10px #c49626;
}

.heroSubtitle::after {
  transform: scaleX(-1);
}

.hero .actions {
  margin: 14px auto 25px;
  gap: 12px;
}

.hero .actions a {
  min-width: 0;
  padding-inline: clamp(20px, 3vw, 42px);
}

.highlight {
  min-height: 94px;
  background: linear-gradient(125deg, #081324bb, #0b0b0bf0), url("horde-steel.webp") center / cover;
  transition: border-color 200ms ease, transform 200ms ease, filter 200ms ease;
}

.highlight:nth-child(2) { background-position: center, 28% center; }
.highlight:nth-child(3) { background-position: center, 64% center; }
.highlight:nth-child(4) { background-position: center, 95% center; }

.highlight:hover,
.highlight:focus-visible {
  filter: brightness(1.23);
}

.sectionHeading::after {
  display: block;
  content: "";
  width: min(9rem, 40%);
  height: 1px;
  margin: .9rem auto 0;
  background: linear-gradient(90deg, transparent, #ffd11f, transparent);
}

main .section {
  scroll-margin-top: 85px;
}

.panel,
.tile,
.post,
.roster > div,
.chatTabs button,
input,
textarea,
select {
  transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}

.tile:hover,
.post:focus-within,
.panel:focus-within,
.roster > div:hover {
  border-color: #c49626;
  box-shadow: 0 0 22px #ffb8471f;
}

:focus-visible {
  outline: 2px solid #ffb847;
  outline-offset: 3px;
}

.motionReady:not(.motionPaused) .sectionHeading.motionEnter::after {
  animation: heading-line 580ms ease-out both;
}

.motionReady:not(.motionPaused) .motionEnter,
.motionReady:not(.motionPaused) .chatMessage,
.motionReady:not(.motionPaused) .postList > .post,
.motionReady:not(.motionPaused) #toast {
  animation: section-enter 620ms cubic-bezier(.2,.75,.25,1) both;
}

.motionReady:not(.motionPaused) .heroContent > :is(.heroSubtitle, .lead, .actions, .heroHighlights),
.motionReady:not(.motionPaused) .nav nav.open {
  animation: section-enter 480ms ease-out both;
}

.motionReady:not(.motionPaused) .heroContent > .heroHighlights {
  animation-delay: 110ms;
}

.motionPaused *,
.motionPaused *::before,
.motionPaused *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

@keyframes fortress-drift {
  from { transform: scale(1.01); }
  to { transform: translate3d(-.8%, .5%, 0) scale(1.06); }
}
@keyframes smoke-drift {
  from { transform: translate3d(-3%, 3%, 0) scale(1.1); opacity: .55; }
  to { transform: translate3d(3%, -3%, 0) scale(1.18); opacity: .9; }
}
@keyframes crest-drift {
  to { transform: translate3d(0, -11px, 0); }
}
@keyframes section-enter {
  from { opacity: .28; translate: 0 18px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes heading-line {
  from { transform: scaleX(.15); }
  to { transform: scaleX(1); }
}

@media (max-width: 900px) {
  .heroPortrait { width: 44vw; right: -9vw; top: 7vw; }
  .heroCrest { width: min(62vw, 520px); }
}

@media (max-width: 600px) {
  .hero { min-height: 0; padding: 32px 12px 22px; }
  .hero::before { background-position: center, 37% top; }
  .heroPortrait { width: 63vw; right: -19vw; top: 22px; opacity: .49; }
  .heroCrest { width: min(80vw, 410px); }
  .heroSubtitle { font-size: 1.24rem; }
  .hero .lead { font-size: .96rem; }
  .hero .actions a { width: min(320px, 100%); }
  .highlight { min-height: 79px; }
  .featurePanel { padding: 26px 16px; }
  .navActions .goldbtn { padding-inline: .65rem; }
}

@media (prefers-reduced-motion: reduce) {
  .motionReady .motionToggle { display: none; }
}

.streamLogo {
  display: block;
  width: min(100%, 320px);
  height: auto;
  margin: .4rem auto .9rem;
  border-radius: 4px;
}


.streamClips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.6rem;
  text-align: left;
}

.streamClip {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid #c49626;
  border-radius: 5px;
  background: #0b0b0b;
}

.streamClip video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0b090a;
}

.streamClip figcaption {
  padding: .55rem .85rem;
  color: var(--muted);
  font-size: .85rem;
}

@media (max-width: 650px) {
  .streamClips { grid-template-columns: 1fr; }
}

/* Doe Relax Comfort palette. */
:root {
  color-scheme: dark;
  --bg: #0b0b0b;
  --text: #f6f1e5;
  --muted: #c3ccda;
  --accent: #ffd11f;
  --warm-gold: #ffb847;
  --accent-ink: #0b0b0b;
  --border: #c49626;
  --panel: #0b0b0b;
  --panel2: #0a1421;
}

body { background: var(--bg); }
a, .eyebrow, h2 em, h1 em, .tileIcon, .post .tag, .chatMessage b {
  color: var(--accent);
}
a:hover { color: var(--warm-gold); }
h3, .tile h3, .panel h3 { color: var(--text); }

.nav { background: #081324f2; border-bottom-color: #c4962670; }
.nav nav a { color: var(--muted); }
.nav nav a:hover, .nav nav a:focus-visible { color: var(--accent); }

.hero .lead { color: #f6f1e5; }
.hero .lead strong, .highlight > span { color: var(--accent); }
.highlight > span { text-shadow: 0 0 14px #c4962680; }
.highlight b { color: var(--text); }
.highlight small { color: var(--muted); }
.highlight:hover, .highlight:focus-visible { border-color: var(--accent); }

.goldbtn, .hero .goldbtn {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  box-shadow: 0 0 24px #ffb84726;
}
.goldbtn:hover, .hero .goldbtn:hover {
  background: var(--warm-gold);
  border-color: var(--warm-gold);
  color: var(--accent-ink);
}

.outlinebtn, .twitchbtn, .mobileMenu,
.hero .outlinebtn, .hero .actions .discordJoin {
  background: #081324e8;
  color: var(--text);
  border-color: #c4962699;
  box-shadow: none;
}
.outlinebtn:hover, .twitchbtn:hover, .mobileMenu:hover,
.hero .outlinebtn:hover, .hero .actions .discordJoin:hover {
  background: #142641;
  color: var(--text);
  border-color: var(--accent);
}

.tile, .post {
  background: linear-gradient(135deg, #081324, #0b0b0b 72%);
  border-color: #c4962659;
}
.panel {
  background: var(--panel);
  border-color: #c4962659;
}
.featurePanel {
  background: radial-gradient(ellipse at 88% 22%, #142641, transparent 60%), var(--panel2);
  border-color: var(--border);
}
.sectionHeading > p:last-child, .tile p, .panel p, .post .meta, .chatMessage time {
  color: var(--muted);
}

input, textarea, select, .chatMessages {
  background: #081324;
  color: var(--text);
  border-color: #c4962699;
}
input:focus, textarea:focus, select:focus { outline-color: var(--accent); }
.roster > div, .chatMessage { border-color: #c4962659; }
.chatTabs button {
  background: var(--panel2);
  color: var(--muted);
  border-color: #c4962699;
}
.chatTabs button:hover { border-color: var(--accent); }
.chatTabs button.active {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

footer { background: #0b0b0b; border-top-color: #c4962666; }
#toast { background: var(--panel2); border-color: var(--warm-gold); color: var(--text); }

.hero::after {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 43%, #ffb8473d, transparent 43%);
  animation: golden-halo 9s ease-in-out infinite alternate;
}

@keyframes golden-halo {
  from { opacity: .24; transform: translate3d(-7%, 4%, 0) scale(.9); }
  to { opacity: .94; transform: translate3d(7%, -4%, 0) scale(1.12); }
}

.motionReady:not(.motionPaused) .heroHighlights > a {
  animation: section-enter 630ms ease-out both;
  animation-delay: calc(120ms + var(--entrance-delay, 0ms));
}

.motionReady:not(.motionPaused) :is(.tiles, .infoGrid, .streamClips) > .motionEnter {
  animation-delay: var(--entrance-delay, 0ms);
}

:is(.heroHighlights, .tiles, .infoGrid, .streamClips) > :nth-child(2n) {
  --entrance-delay: 90ms;
}

:is(.heroHighlights, .tiles) > :nth-child(3n) {
  --entrance-delay: 180ms;
}

.heroHighlights > :nth-child(4) {
  --entrance-delay: 270ms;
}

@media (max-width: 650px) {
  .tiles > .motionEnter, .infoGrid > .motionEnter, .streamClips > .motionEnter {
    --entrance-delay: 0ms;
  }
}

/* Independent depth planes keep the portrait, crest and fortress moving at different speeds. */
.hero::before {
  inset: -6%;
  translate: var(--fort-x, 0px) var(--fort-y, 0px);
  transition: translate 580ms cubic-bezier(.22,.6,.36,1);
}

.heroPortrait {
  translate: var(--portrait-x, 0px) var(--portrait-y, 0px);
  transition: translate 440ms cubic-bezier(.22,.6,.36,1);
  animation: portrait-depth 14s ease-in-out infinite alternate;
}

.heroAtmosphere {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.heroAtmosphere::before,
.heroAtmosphere::after {
  content: "";
  position: absolute;
  inset: -26%;
}

.heroAtmosphere::before {
  background: radial-gradient(ellipse at 26% 73%, #809dcc36, transparent 34%),
              radial-gradient(ellipse at 77% 76%, #4a78bd3b, transparent 31%);
  animation: drifting-cloud 19s ease-in-out infinite alternate;
}

.heroAtmosphere::after {
  background: radial-gradient(ellipse at 83% 39%, #a5282638, transparent 29%),
              radial-gradient(ellipse at 51% 52%, #ffb84730, transparent 33%);
  animation: ember-light 11s ease-in-out infinite alternate;
}

.ambient::after {
  content: "";
  position: absolute;
  inset: -20%;
  background: radial-gradient(ellipse at 29% 29%, #2a54823d, transparent 36%),
              radial-gradient(ellipse at 75% 75%, #c496261c, transparent 29%);
  animation: drifting-cloud 29s ease-in-out infinite alternate;
  pointer-events: none;
}

.particles i {
  animation-name: ember-flight;
  background: #ffb847;
}
.particles i:nth-child(4n) { background: #fff0a6; }
.particles i:nth-child(3n) { --ember-drift: -85px; }
.particles i:nth-child(5n) { --ember-drift: 120px; }

.motionReady:not(.motionPaused) .heroContent > .heroSubtitle { animation-delay: 80ms; }
.motionReady:not(.motionPaused) .heroContent > .lead { animation-delay: 150ms; }
.motionReady:not(.motionPaused) .heroContent > .actions { animation-delay: 220ms; }

@keyframes crest-glint {
  0%, 62% { opacity: 0; background-position: 100% 50%; }
  67% { opacity: .8; }
  77% { opacity: .7; }
  83%, 100% { opacity: 0; background-position: 0% 50%; }
}

@keyframes portrait-depth {
  from { transform: translate3d(5px, 4px, 0) scale(1.01); }
  to { transform: translate3d(-8px, -5px, 0) scale(1.045); }
}

@keyframes drifting-cloud {
  from { transform: translate3d(-10%, 4%, 0) scale(1.05); opacity: .46; }
  to { transform: translate3d(10%, -6%, 0) scale(1.2); opacity: .88; }
}

@keyframes ember-light {
  from { transform: scale(.94); opacity: .25; }
  to { transform: scale(1.1); opacity: .85; }
}

@keyframes ember-flight {
  0% { transform: translate3d(0, 0, 0) scale(.4); opacity: 0; }
  17% { opacity: .86; }
  68% { opacity: .48; }
  100% { transform: translate3d(var(--ember-drift, 48px), -113vh, 0) scale(1.2); opacity: 0; }
}

@media (max-width: 650px) {
  .particles i:nth-child(n+19) { display: none; }
}

.motionPaused .heroCrest,
.motionPaused .heroPortrait,
.motionPaused .hero::before {
  translate: none;
}