:root {
  --black: #030304;
  --white-metal: #f4f7fb;
  --silver: #b9c8d8;
  --gold: #f8c75a;
  --deep-gold: #8f5d16;
  --glass: rgba(3, 3, 4, .42);
  color: #fff8e6;
  background: var(--black);
  font-family: Georgia, "Times New Roman", serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--black);
}

a {
  color: inherit;
}

button,
input,
textarea {
  font: inherit;
}

/* ─── Background ─── */
.living-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #050505;
}

.artwork-layer {
  position: absolute;
  inset: -3vmax;
  background: url("assets/etherina-welcome-dynasty-split.png") center center / cover no-repeat;
  transform: scale(1.02);
  animation: cinematicZoom 20s ease-in-out infinite, parallaxDrift 26s ease-in-out infinite;
  will-change: transform;
}

.shadow-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 46%, rgba(0,0,0,.03), rgba(0,0,0,.24) 48%, rgba(0,0,0,.58) 100%),
    linear-gradient(90deg, rgba(0,0,0,.28), rgba(0,0,0,.12) 34%, rgba(0,0,0,.02) 50%, rgba(0,0,0,.14) 66%, rgba(0,0,0,.3)),
    linear-gradient(180deg, rgba(0,0,0,.18), transparent 42%, rgba(0,0,0,.54));
}

.center-sweep {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, transparent 40%, rgba(226,237,255,.16) 47%, rgba(255,213,112,.36) 50%, rgba(255,255,255,.18) 53%, transparent 61%);
  mix-blend-mode: screen;
  opacity: .72;
  transform: translateX(-38%);
  animation: lightSweep 7.5s ease-in-out infinite;
}

.silver-dust,
.gold-dust {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}

.silver-dust {
  background-image:
    radial-gradient(circle, rgba(235,246,255,.74) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(154,203,255,.32) 0 1px, transparent 2px);
  background-position: 18px 22px, 52px 88px;
  background-size: 86px 86px, 132px 132px;
  clip-path: inset(0 50% 0 0);
  opacity: .52;
  animation: glitterFloat 18s linear infinite;
}

.gold-dust {
  background-image:
    radial-gradient(circle, rgba(255,220,128,.82) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(255,179,56,.36) 0 1px, transparent 2px);
  background-position: 34px 16px, 70px 52px;
  background-size: 92px 92px, 146px 146px;
  clip-path: inset(0 0 0 50%);
  opacity: .56;
  animation: glitterFloatGold 20s linear infinite;
}

/* ─── Layout ─── */
main {
  position: relative;
  z-index: 1;
}

.hero {
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  padding: clamp(1.2rem, 3vw, 2.8rem);
  padding-bottom: clamp(1.5rem, 4vh, 3rem);
}

.split-panel {
  min-height: calc(100svh - clamp(3rem, 6vw, 4.8rem));
  display: flex;
  align-items: flex-end;
}

.etherina-panel {
  justify-content: flex-start;
  padding-left: clamp(.4rem, 2.4vw, 2.4rem);
}

.dynasty-panel {
  justify-content: flex-end;
  padding-right: clamp(.4rem, 2.4vw, 2.4rem);
}

.side-content {
  width: fit-content;
  padding: clamp(1rem, 2.5vw, 1.75rem);
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}

/* ─── Shared hex button base ─── */
.hex-button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: min(23rem, 88vw);
  min-height: 4.35rem;
  padding: 1rem 2.2rem;
  border: 0;
  clip-path: polygon(12% 0, 88% 0, 100% 50%, 88% 100%, 12% 100%, 0 50%);
  overflow: hidden;
  font: 900 clamp(.76rem, 1.08vw, .94rem)/1.08 Arial, sans-serif;
  letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease;
}

.hex-button::before {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: -1;
  clip-path: inherit;
  background:
    linear-gradient(145deg, rgba(255,255,255,.34), rgba(255,255,255,.08) 30%, transparent 52%),
    linear-gradient(180deg, rgba(48,29,5,.58), rgba(0,0,0,.74));
  box-shadow: inset 0 0 24px rgba(200,200,220,.15), inset 0 0 38px rgba(255,255,255,.1);
}

.hex-button::after {
  content: "";
  position: absolute;
  inset: -35% -80%;
  background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,.95) 48%, rgba(255,255,255,.75) 53%, transparent 64%);
  transform: translateX(-62%);
  opacity: .8;
  animation: buttonShine 3.8s ease-in-out infinite;
}

.hex-button span {
  position: relative;
  z-index: 1;
  text-align: center;
}

.hex-button:hover,
.hex-button:focus-visible {
  transform: translateY(-3px) scale(1.02);
  filter: saturate(1.16) brightness(1.08);
}

/* ─── Gold variant (Dynasty) ─── */
.hex-button--gold {
  color: #fff7d3;
  background:
    linear-gradient(135deg, rgba(255,250,214,.96), rgba(185,121,31,.78) 28%, rgba(255,206,98,.92) 50%, rgba(125,76,18,.82) 72%, rgba(255,240,173,.98));
  box-shadow:
    0 0 26px rgba(248,199,90,.68),
    0 0 72px rgba(248,199,90,.32),
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -10px 28px rgba(0,0,0,.34);
  backdrop-filter: blur(8px) saturate(1.25);
}

.hex-button--gold span {
  text-shadow: 0 0 14px rgba(248,199,90,.9), 0 1px 1px #000;
}

.hex-button--gold:hover,
.hex-button--gold:focus-visible {
  box-shadow:
    0 0 34px rgba(248,199,90,.88),
    0 0 96px rgba(248,199,90,.42);
}

/* ─── Silver variant (Etherina) ─── */
.hex-button--silver {
  color: #e8f4ff;
  background:
    linear-gradient(135deg, rgba(240,248,255,.96), rgba(140,168,196,.82) 28%, rgba(210,230,248,.92) 50%, rgba(90,118,148,.84) 72%, rgba(232,244,255,.98));
  box-shadow:
    0 0 26px rgba(185,210,240,.72),
    0 0 72px rgba(160,200,240,.36),
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 -10px 28px rgba(0,0,0,.36);
  backdrop-filter: blur(8px) saturate(1.2);
}

.hex-button--silver::after {
  background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,.98) 48%, rgba(210,235,255,.85) 53%, transparent 64%);
  animation: buttonShine 4.2s ease-in-out infinite;
  animation-delay: -1.4s;
}

.hex-button--silver span {
  text-shadow: 0 0 14px rgba(190,225,255,.95), 0 1px 1px rgba(0,0,0,.7);
}

.hex-button--silver:hover,
.hex-button--silver:focus-visible {
  box-shadow:
    0 0 34px rgba(185,210,240,.92),
    0 0 96px rgba(160,200,240,.48);
}

/* ─── Animations ─── */
@keyframes cinematicZoom {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.02); }
  50%       { transform: translate3d(0, 0, 0) scale(1.085); }
}

@keyframes parallaxDrift {
  0%, 100% { background-position: 50% 50%; }
  25%       { background-position: 49.2% 49.5%; }
  50%       { background-position: 50.8% 50.3%; }
  75%       { background-position: 49.7% 50.7%; }
}

@keyframes lightSweep {
  0%, 35%   { transform: translateX(-42%); opacity: 0; }
  48%        { opacity: .7; }
  70%, 100% { transform: translateX(42%); opacity: 0; }
}

@keyframes glitterFloat {
  to { background-position: 118px -180px, -78px -240px; }
}

@keyframes glitterFloatGold {
  to { background-position: -96px -190px, 190px -260px; }
}

@keyframes buttonShine {
  0%, 42%   { transform: translateX(-62%); }
  72%, 100% { transform: translateX(62%); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Tablet (≤820px) ─── */
@media (max-width: 820px) {
  .artwork-layer {
    background-size: auto 100%;
  }

  .hero {
    grid-template-columns: 1fr 1fr;
    padding: 1rem;
    padding-bottom: clamp(1.25rem, 3.5vh, 2rem);
    align-items: end;
  }

  .split-panel {
    min-height: calc(100svh - 2rem);
    padding-inline: .25rem;
    align-items: flex-end;
  }

  .etherina-panel {
    justify-content: center;
  }

  .dynasty-panel {
    justify-content: center;
  }

  /* Remove the rogue translateX that was pushing dynasty button off screen */
  .side-content {
    width: fit-content;
    max-width: 46vw;
    padding: 0;
    margin: 0;
    transform: none !important;
  }

  .hex-button {
    /* Fit inside half the screen width with breathing room */
    width: min(14rem, 42vw);
    min-width: 0;
    max-width: 44vw;
    min-height: 3.6rem;
    padding: .65rem .5rem;
    font-size: clamp(.52rem, 1.8vw, .75rem);
    letter-spacing: .06em;
    text-align: center;
    white-space: normal;
  }

  .hex-button span {
    display: block;
    width: 100%;
    line-height: 1.25;
  }
}

/* ─── Mobile (≤480px) ─── */
@media (max-width: 480px) {
  .shadow-veil {
    background:
      radial-gradient(circle at 50% 44%, rgba(0,0,0,.03), rgba(0,0,0,.2) 48%, rgba(0,0,0,.62) 100%),
      linear-gradient(180deg, rgba(0,0,0,.18), transparent 44%, rgba(0,0,0,.62));
  }

  .hero {
    padding: .75rem;
    padding-bottom: clamp(1.5rem, 5vh, 2.5rem);
  }

  .split-panel {
    padding-inline: .15rem;
  }

  /* Keep both panels perfectly symmetrical, no transform hacks */
  .etherina-panel {
    justify-content: center;
  }

  .dynasty-panel {
    justify-content: center;
  }

  .side-content {
    max-width: 47vw;
    padding: 0;
    transform: none !important;
  }

  .hex-button {
    width: min(11rem, 44vw);
    max-width: 46vw;
    min-height: 3.4rem;
    padding: .6rem .4rem;
    font-size: clamp(.48rem, 2vw, .62rem);
    letter-spacing: .04em;
  }
}

/* ─── Very small phones (≤375px) ─── */
@media (max-width: 375px) {
  .hex-button {
    width: 43vw;
    max-width: 43vw;
    min-height: 3.2rem;
    font-size: .44rem;
    letter-spacing: .03em;
  }
}