:root {
  color-scheme: dark;
  --bg-base: #120708;
  --bg-deep: #1c0909;
  --bg-panel: rgba(33, 12, 12, 0.82);
  --bg-panel-strong: rgba(45, 15, 14, 0.94);
  --line-soft: rgba(255, 217, 174, 0.16);
  --line-strong: rgba(255, 191, 92, 0.42);
  --text-main: #fff6ea;
  --text-soft: rgba(255, 233, 214, 0.78);
  --accent-fire: #ff6a2a;
  --accent-gold: #ffbe5c;
  --accent-spark: #ffe1a5;
  --shadow-heavy: 0 34px 80px rgba(0, 0, 0, 0.42);
  --pointer-rotate-x: 0;
  --pointer-rotate-y: 0;
  --pointer-shift-x: 0;
  --pointer-shift-y: 0;
  --pointer-glow-x: 50%;
  --pointer-glow-y: 36%;
}

/* Legacy asset hooks retained alongside the stronger new art:
   assets/ambient-banner-emberflow.png
   assets/ambient-vertical-plume.png */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text-main);
  font-family: "Rajdhani", "Segoe UI", system-ui, sans-serif;
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 114, 50, 0.18), transparent 28%),
    radial-gradient(circle at 82% 8%, rgba(255, 200, 120, 0.14), transparent 24%),
    linear-gradient(180deg, #140707 0%, #180808 35%, #120708 100%);
  overflow-x: hidden;
}

a,
button {
  color: inherit;
}

button {
  font: inherit;
}

.hero,
.section,
.site-footer {
  padding-inline: clamp(1.25rem, 4vw, 4rem);
}

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 540px) minmax(320px, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  isolation: isolate;
  overflow: clip;
}

.hero__backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at var(--pointer-glow-x) var(--pointer-glow-y), rgba(255, 183, 111, 0.22), transparent 18%),
    linear-gradient(160deg, rgba(30, 10, 9, 0.96), rgba(18, 7, 8, 0.98));
}

.hero__backdrop::before,
.hero__backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__backdrop::before {
  opacity: 0.2;
  background:
    linear-gradient(180deg, rgba(18, 7, 8, 0.06), rgba(18, 7, 8, 0.2)),
    url("assets/ambient-banner-constellation-cutout.png") 52% 4% / min(78rem, 88vw) auto no-repeat;
  mix-blend-mode: screen;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.88) 36%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.88) 36%, transparent 100%);
}

.hero__backdrop::after {
  opacity: 0.16;
  background: url("assets/hero-energy-warrior-cutout.png") 94% 56% / min(42rem, 34vw) auto no-repeat;
  mix-blend-mode: screen;
  filter: blur(48px) saturate(1.08);
}

.hero__ember-field {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 14% 24%, rgba(255, 190, 92, 0.34) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 18%, rgba(255, 118, 44, 0.28) 0 2px, transparent 3px),
    radial-gradient(circle at 38% 78%, rgba(255, 214, 172, 0.16) 0 1px, transparent 2px);
  background-size: 220px 220px;
  opacity: 0.8;
  animation: emberDrift 18s linear infinite;
}

.hero__flare {
  position: absolute;
  border-radius: 999px;
  filter: blur(30px);
}

.hero__flare--left {
  width: 24rem;
  height: 24rem;
  left: -7rem;
  top: 8%;
  background: rgba(255, 104, 42, 0.16);
}

.hero__flare--right {
  width: 20rem;
  height: 20rem;
  right: 8%;
  top: 10%;
  background: rgba(255, 190, 92, 0.14);
}

.hero__scan {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.04), transparent),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 6px);
  opacity: 0.44;
  mix-blend-mode: screen;
}

.hero__copy {
  position: relative;
  z-index: 2;
  padding-block: clamp(4rem, 10vw, 7rem);
}

.hero__copy::after {
  content: "";
  position: absolute;
  left: -2rem;
  bottom: -3rem;
  width: min(34rem, 76vw);
  height: 13rem;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: screen;
  background:
    linear-gradient(180deg, rgba(18, 7, 8, 0.02), rgba(18, 7, 8, 0.2)),
    url("assets/ambient-horizon-glow.png") 24% 100% / cover no-repeat;
  mask-image: radial-gradient(ellipse 84% 74% at 30% 72%, rgba(0, 0, 0, 0.98) 0 50%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 84% 74% at 30% 72%, rgba(0, 0, 0, 0.98) 0 50%, transparent 100%);
  filter: blur(10px);
}

.hero__eyebrow,
.section-kicker,
.profile-card__kicker {
  margin: 0 0 0.85rem;
  color: var(--accent-gold);
  font-size: 0.96rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.hero__title,
.section-heading {
  margin: 0;
  font-family: "Orbitron", sans-serif;
}

.hero__title {
  font-size: clamp(4.4rem, 12vw, 8rem);
  line-height: 0.92;
  text-transform: uppercase;
  text-shadow: 0 0 28px rgba(255, 106, 42, 0.34);
}

.hero__meta,
.hero__lede,
.section-intro,
.body-info p,
.profile-card p,
.closing-copy,
.site-footer p {
  color: var(--text-soft);
}

.hero__meta {
  margin: 1.25rem 0 0;
  font-size: clamp(1.05rem, 2vw, 1.34rem);
  font-weight: 600;
}

.hero__lede {
  max-width: 34rem;
  margin: 1rem 0 0;
  font-size: 1.1rem;
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.8rem;
  min-width: 10rem;
  padding: 0.95rem 1.45rem;
  border: 1px solid rgba(255, 218, 171, 0.2);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 106, 42, 0.28), rgba(255, 190, 92, 0.18));
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.26);
  text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.hero__cta:hover {
  transform: translateY(-2px) scale(1.02);
  border-color: rgba(255, 214, 160, 0.38);
  box-shadow: 0 0 0 1px rgba(255, 106, 42, 0.22), 0 0 30px rgba(255, 190, 92, 0.2);
}

.hero__body-stage {
  position: relative;
  z-index: 1;
  align-self: end;
  min-height: min(84svh, 50rem);
  margin-left: -2rem;
  margin-top: -2rem;
  margin-bottom: -2.5rem;
  display: grid;
  place-items: center center;
  transform:
    translate3d(calc(var(--pointer-shift-x) * 1px), calc(var(--pointer-shift-y) * 1px), 0)
    rotateX(calc(var(--pointer-rotate-x) * 1deg))
    rotateY(calc(var(--pointer-rotate-y) * 1deg));
  transform-style: preserve-3d;
}

.hero__body-stage::before,
.hero__body-stage::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.hero__body-stage::before {
  inset: 10% 6% -2% -18%;
  z-index: 0;
  opacity: 0.16;
  background:
    linear-gradient(90deg, rgba(18, 7, 8, 0.02), rgba(18, 7, 8, 0.18)),
    url("assets/ambient-horizon-glow.png") 26% 96% / 138% auto no-repeat;
  mix-blend-mode: screen;
  mask-image: radial-gradient(ellipse 84% 78% at 40% 70%, rgba(0, 0, 0, 0.98) 0 44%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 84% 78% at 40% 70%, rgba(0, 0, 0, 0.98) 0 44%, transparent 100%);
  filter: blur(18px);
}

.hero__body-stage::after {
  inset: 4% 10% -4% 24%;
  z-index: 1;
  opacity: 0.12;
  background:
    linear-gradient(180deg, rgba(18, 7, 8, 0), rgba(18, 7, 8, 0.12)),
    url("assets/ambient-vertical-cascade.png") 60% 48% / contain no-repeat;
  mix-blend-mode: screen;
  filter: blur(18px);
}

.hero__stage-glow {
  position: absolute;
  inset: 6% 0 10% 14%;
  background:
    radial-gradient(circle at 68% 40%, rgba(255, 184, 80, 0.28), transparent 18%),
    radial-gradient(circle at 60% 70%, rgba(255, 108, 42, 0.24), transparent 24%);
  filter: blur(18px);
}

.hero__poster {
  position: absolute;
  inset: -4% -2% -8% 18%;
  isolation: isolate;
  z-index: 2;
  background: url("assets/hero-energy-warrior-cutout.png") 82% 56% / contain no-repeat;
  opacity: 0.98;
  filter: saturate(1.08) contrast(1.02) brightness(1.04) drop-shadow(0 0 34px rgba(255, 138, 54, 0.2));
}

.hero__poster::before {
  content: "";
  position: absolute;
  inset: -8% -6% -12% 10%;
  background: url("assets/hero-energy-warrior-cutout.png") 82% 56% / contain no-repeat;
  opacity: 0.34;
  filter: blur(38px) saturate(1.12) brightness(1.08);
  mix-blend-mode: screen;
}

.hero__poster::after {
  content: "";
  position: absolute;
  inset: -6% -2% -10% 26%;
  background:
    radial-gradient(circle at 72% 56%, rgba(255, 174, 82, 0.18), transparent 22%),
    url("assets/ambient-vertical-cascade.png") 76% 48% / 34% auto no-repeat,
    url("assets/ambient-banner-constellation-cutout.png") 54% 62% / 120% auto no-repeat;
  opacity: 0.24;
  filter: blur(20px);
}

.hero__blend {
  position: absolute;
  inset: 6% 0 4% 34%;
  z-index: 3;
  opacity: 0.9;
  background:
    radial-gradient(circle at 76% 54%, rgba(255, 163, 70, 0.18), transparent 20%),
    radial-gradient(circle at 66% 78%, rgba(255, 110, 42, 0.16), transparent 22%),
    linear-gradient(90deg, transparent 0%, transparent 54%, rgba(18, 7, 8, 0.06) 76%, rgba(18, 7, 8, 0.18) 100%);
  pointer-events: none;
}

.hero__ambient {
  position: absolute;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(18, 7, 8, 0.08), rgba(18, 7, 8, 0.3)),
    url("assets/ambient-soft-motifs.png") center center / 240% auto no-repeat;
  opacity: 0.22;
  mix-blend-mode: screen;
  filter: saturate(0.82);
  animation: decoFloat 12s ease-in-out infinite;
}

.site-main {
  position: relative;
  z-index: 1;
}

.section {
  position: relative;
  padding-block: clamp(4.5rem, 10vw, 7rem);
}

.section--map::before,
.section--cards::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(255, 170, 76, 0.08), transparent 20%),
    radial-gradient(circle at 20% 70%, rgba(255, 92, 32, 0.07), transparent 22%);
  pointer-events: none;
}

.section--map::before {
  inset: -3.5rem 0 auto 0;
  height: 20rem;
  background:
    url("assets/ambient-banner-constellation-cutout.png") 50% 0% / min(56rem, 74vw) auto no-repeat,
    radial-gradient(circle at 50% 10%, rgba(255, 170, 76, 0.16), transparent 30%),
    radial-gradient(circle at 20% 70%, rgba(255, 92, 32, 0.04), transparent 24%);
  mix-blend-mode: screen;
  opacity: 0.22;
  mask-image: radial-gradient(ellipse 78% 92% at 50% 0%, rgba(0, 0, 0, 0.96) 0 42%, rgba(0, 0, 0, 0.82) 58%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 78% 92% at 50% 0%, rgba(0, 0, 0, 0.96) 0 42%, rgba(0, 0, 0, 0.82) 58%, transparent 100%);
  filter: blur(8px);
}

.section--cards::before {
  background:
    url("assets/ambient-banner-constellation-cutout.png") 50% 0% / min(64rem, 82vw) auto no-repeat,
    radial-gradient(circle at 80% 20%, rgba(255, 170, 76, 0.08), transparent 20%),
    radial-gradient(circle at 20% 70%, rgba(255, 92, 32, 0.07), transparent 22%);
  mix-blend-mode: screen;
  opacity: 0.22;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.86) 34%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.86) 34%, transparent 100%);
}

.section--map::after {
  content: "";
  position: absolute;
  right: 8%;
  bottom: -1rem;
  width: min(44rem, 52vw);
  height: 14rem;
  pointer-events: none;
  opacity: 0.22;
  mix-blend-mode: screen;
  background:
    linear-gradient(180deg, rgba(18, 7, 8, 0.02), rgba(18, 7, 8, 0.18)),
    url("assets/ambient-banner-emberflow.png") 56% 84% / cover no-repeat;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.94), transparent 92%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.94), transparent 92%);
}

.section--cards::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 8%;
  top: 3rem;
  height: 10rem;
  pointer-events: none;
  opacity: 0.28;
  mix-blend-mode: screen;
  background:
    linear-gradient(180deg, rgba(18, 7, 8, 0.02), rgba(18, 7, 8, 0.18)),
    url("assets/ambient-horizon-glow.png") 50% 10% / cover no-repeat;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.98) 10%, rgba(0, 0, 0, 0.98) 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.98) 10%, rgba(0, 0, 0, 0.98) 90%, transparent 100%);
}

.section-head,
.section-head--wide {
  position: relative;
  z-index: 1;
  max-width: 52rem;
}

.section-deco {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: 0.36;
  mix-blend-mode: screen;
  background:
    linear-gradient(180deg, rgba(18, 7, 8, 0), rgba(18, 7, 8, 0.18)),
    url("assets/ambient-soft-motifs.png") center center / cover no-repeat;
  filter: drop-shadow(0 0 28px rgba(255, 140, 48, 0.24));
  mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.98) 0 52%, transparent 88%);
  -webkit-mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.98) 0 52%, transparent 88%);
  animation: decoFloat 11s ease-in-out infinite;
}

.section-deco--hero-left {
  left: -5rem;
  bottom: 6rem;
  width: 24rem;
  height: 18rem;
  opacity: 0.34;
  background:
    linear-gradient(180deg, rgba(18, 7, 8, 0.06), rgba(18, 7, 8, 0.22)),
    url("assets/ambient-horizon-glow.png") 6% 88% / 162% auto no-repeat;
}

.section-deco--hero-bottom {
  left: 8%;
  right: 8%;
  bottom: -3.2rem;
  width: auto;
  height: 22rem;
  opacity: 0.24;
  background:
    radial-gradient(circle at 50% 88%, rgba(255, 173, 84, 0.14), transparent 48%),
    linear-gradient(180deg, rgba(18, 7, 8, 0), rgba(18, 7, 8, 0.12)),
    url("assets/ambient-horizon-glow.png") 50% 100% / cover no-repeat;
  mask-image: radial-gradient(ellipse 80% 100% at 50% 100%, rgba(0, 0, 0, 0.98) 0 54%, rgba(0, 0, 0, 0.84) 70%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 100% at 50% 100%, rgba(0, 0, 0, 0.98) 0 54%, rgba(0, 0, 0, 0.84) 70%, transparent 100%);
  filter: blur(12px);
  animation-delay: -5s;
}

.section-deco--hero-mid {
  left: 30%;
  top: 10%;
  width: 20rem;
  height: 36rem;
  opacity: 0.4;
  background:
    linear-gradient(180deg, rgba(18, 7, 8, 0.04), rgba(18, 7, 8, 0.24)),
    url("assets/ambient-vertical-cascade.png") center center / contain no-repeat;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.98) 14%, rgba(0, 0, 0, 0.98) 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.98) 14%, rgba(0, 0, 0, 0.98) 88%, transparent 100%);
  filter: blur(10px);
  animation-delay: -2.7s;
}

.section-deco--hero-right {
  right: -2rem;
  top: 2rem;
  width: 28rem;
  height: 38rem;
  opacity: 0.3;
  background:
    linear-gradient(180deg, rgba(18, 7, 8, 0.04), rgba(18, 7, 8, 0.28)),
    url("assets/ambient-vertical-cascade.png") 64% 44% / contain no-repeat;
  mask-image: radial-gradient(circle at 42% 50%, rgba(0, 0, 0, 0.98) 0 48%, transparent 88%);
  -webkit-mask-image: radial-gradient(circle at 42% 50%, rgba(0, 0, 0, 0.98) 0 48%, transparent 88%);
  animation-delay: -3.4s;
}

.section-deco--map-left {
  left: -4rem;
  top: 10rem;
  width: 18rem;
  height: 30rem;
  opacity: 0.26;
  background-size: 240% auto;
  background-position: 50% 100%;
}

.section-deco--map-right {
  right: -5rem;
  bottom: 4rem;
  width: 18rem;
  height: 26rem;
  opacity: 0.3;
  background-size: 235% auto;
  background-position: 100% 100%;
  animation-delay: -4s;
}

.section-deco--map-top {
  left: 50%;
  top: 2.8rem;
  width: 24rem;
  height: 12rem;
  opacity: 0.36;
  transform: translateX(-44%);
  background:
    linear-gradient(180deg, rgba(18, 7, 8, 0.02), rgba(18, 7, 8, 0.18)),
    url("assets/ambient-banner-constellation-cutout.png") center 0% / cover no-repeat;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.92), transparent 96%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.92), transparent 96%);
}

.section-deco--map-bottom {
  left: 50%;
  bottom: 0.6rem;
  width: 28rem;
  height: 10rem;
  opacity: 0.38;
  transform: translateX(-34%);
  background:
    linear-gradient(180deg, rgba(18, 7, 8, 0.02), rgba(18, 7, 8, 0.18)),
    url("assets/ambient-horizon-glow.png") 50% 100% / cover no-repeat;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 96%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 96%);
}

.section-deco--cards-top {
  right: -1rem;
  top: 5rem;
  width: 20rem;
  height: 20rem;
  opacity: 0.26;
  background-size: 235% auto;
  background-position: 100% 0%;
}

.section-deco--cards-middle {
  left: 16%;
  bottom: 9rem;
  width: min(52rem, 62vw);
  height: 12rem;
  opacity: 0.3;
  background:
    linear-gradient(180deg, rgba(18, 7, 8, 0.02), rgba(18, 7, 8, 0.22)),
    url("assets/ambient-horizon-glow.png") center center / cover no-repeat;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.98) 12%, rgba(0, 0, 0, 0.98) 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.98) 12%, rgba(0, 0, 0, 0.98) 88%, transparent 100%);
  animation-delay: -1.8s;
}

.section-deco--cards-band {
  left: 12%;
  top: 4.4rem;
  width: min(58rem, 74vw);
  height: 8rem;
  opacity: 0.32;
  background:
    linear-gradient(180deg, rgba(18, 7, 8, 0.04), rgba(18, 7, 8, 0.18)),
    url("assets/ambient-banner-constellation-cutout.png") 50% 16% / cover no-repeat;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.98) 10%, rgba(0, 0, 0, 0.98) 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.98) 10%, rgba(0, 0, 0, 0.98) 90%, transparent 100%);
  animation-delay: -3.1s;
}

.section-deco--cards-bottom {
  left: -3rem;
  bottom: -2rem;
  width: 23rem;
  height: 18rem;
  opacity: 0.28;
  background-size: 235% auto;
  background-position: 0% 100%;
  animation-delay: -6s;
}

.section-deco--closing {
  right: 4%;
  top: 0;
  width: 18rem;
  height: 18rem;
  opacity: 0.24;
  background-size: 235% auto;
  background-position: 100% 100%;
  animation-delay: -2.4s;
}

.section-deco--closing-left {
  left: 0;
  bottom: -2rem;
  width: min(36rem, 52vw);
  height: 14rem;
  opacity: 0.28;
  background:
    linear-gradient(180deg, rgba(18, 7, 8, 0.06), rgba(18, 7, 8, 0.24)),
    url("assets/ambient-horizon-glow.png") 18% 78% / cover no-repeat;
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.98), rgba(0, 0, 0, 0.9) 62%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.98), rgba(0, 0, 0, 0.9) 62%, transparent 100%);
  animation-delay: -5.4s;
}

.section-deco--closing-center {
  left: 22%;
  top: 4rem;
  width: min(46rem, 58vw);
  height: 10rem;
  opacity: 0.3;
  background:
    linear-gradient(180deg, rgba(18, 7, 8, 0.02), rgba(18, 7, 8, 0.2)),
    url("assets/ambient-banner-constellation-cutout.png") 50% 52% / cover no-repeat;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.98) 8%, rgba(0, 0, 0, 0.98) 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.98) 8%, rgba(0, 0, 0, 0.98) 92%, transparent 100%);
  animation-delay: -1.4s;
}

.section-heading {
  font-size: clamp(1.95rem, 4vw, 3.35rem);
  line-height: 1.04;
}

.hero__ambient--left {
  left: -6%;
  bottom: 4%;
  width: 18rem;
  height: 16rem;
  background:
    linear-gradient(180deg, rgba(18, 7, 8, 0.08), rgba(18, 7, 8, 0.3)),
    url("assets/ambient-horizon-glow.png") 6% 80% / 170% auto no-repeat;
  opacity: 0.18;
  mask-image: radial-gradient(ellipse 82% 78% at 28% 72%, rgba(0, 0, 0, 0.96) 0 52%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 82% 78% at 28% 72%, rgba(0, 0, 0, 0.96) 0 52%, transparent 100%);
  filter: blur(8px);
}

.hero__ambient--lower {
  left: 22%;
  bottom: -2.4rem;
  width: 20rem;
  height: 12rem;
  background:
    linear-gradient(180deg, rgba(18, 7, 8, 0.08), rgba(18, 7, 8, 0.24)),
    url("assets/ambient-banner-constellation-cutout.png") 48% 100% / 160% auto no-repeat;
  opacity: 0.14;
  mask-image: radial-gradient(ellipse 88% 100% at 50% 100%, rgba(0, 0, 0, 0.96) 0 52%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 88% 100% at 50% 100%, rgba(0, 0, 0, 0.96) 0 52%, transparent 100%);
  filter: blur(10px);
  animation-delay: -4.2s;
}

.section-intro {
  max-width: 40rem;
  margin: 1rem 0 0;
  font-size: 1.04rem;
}

.body-map {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(300px, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: 2.2rem;
}

.body-map__sticky {
  position: sticky;
  top: 2.5rem;
  align-self: start;
}

.body-diagram {
  position: relative;
  min-height: 44rem;
  border: 1px solid rgba(255, 190, 92, 0.16);
  border-radius: 30px;
  background:
    radial-gradient(circle at 70% 24%, rgba(255, 184, 80, 0.14), transparent 18%),
    radial-gradient(circle at 36% 82%, rgba(255, 104, 42, 0.14), transparent 20%),
    linear-gradient(180deg, rgba(50, 18, 14, 0.9), rgba(23, 9, 10, 0.96));
  box-shadow: var(--shadow-heavy);
  overflow: hidden;
}

.body-diagram::before,
.body-diagram::after {
  content: "";
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;
}

.body-diagram::before {
  left: 8%;
  right: 8%;
  top: 0.5rem;
  height: 8.5rem;
  opacity: 0.26;
  background:
    linear-gradient(180deg, rgba(18, 7, 8, 0.02), rgba(18, 7, 8, 0.14)),
    url("assets/ambient-banner-constellation-cutout.png") 50% 6% / cover no-repeat;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.98) 0%, rgba(0, 0, 0, 0.9) 64%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.98) 0%, rgba(0, 0, 0, 0.9) 64%, transparent 100%);
}

.body-diagram::after {
  left: 14%;
  right: 14%;
  bottom: 0;
  height: 8.5rem;
  opacity: 0.3;
  background:
    linear-gradient(180deg, rgba(18, 7, 8, 0.02), rgba(18, 7, 8, 0.12)),
    url("assets/ambient-horizon-glow.png") 50% 100% / cover no-repeat;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 100%);
}

.body-diagram__glow {
  position: absolute;
  inset: 10% 12%;
  background:
    radial-gradient(circle at 54% 36%, rgba(255, 192, 102, 0.16), transparent 18%),
    radial-gradient(circle at 50% 62%, rgba(255, 94, 31, 0.18), transparent 18%);
  filter: blur(18px);
}

.body-diagram__poster {
  position: absolute;
  inset: 1rem 0.6rem 0.8rem 0.6rem;
  background: url("assets/body-map-energy-warrior-cutout.png") center 56% / contain no-repeat;
  opacity: 0.96;
  filter: saturate(1.08) contrast(1.02) brightness(1.05) drop-shadow(0 0 28px rgba(255, 136, 54, 0.18));
}

.body-diagram__poster::before {
  content: "";
  position: absolute;
  inset: -6% -8% -8% -8%;
  background: url("assets/body-map-energy-warrior-cutout.png") center 56% / contain no-repeat;
  opacity: 0.3;
  filter: blur(28px) saturate(1.14) brightness(1.08);
  mix-blend-mode: screen;
}

.body-diagram__poster::after {
  content: "";
  position: absolute;
  inset: -4% -6% -8% -6%;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 188, 98, 0.16), transparent 20%),
    url("assets/ambient-vertical-cascade.png") 50% 42% / 44% auto no-repeat,
    url("assets/ambient-horizon-glow.png") 50% 100% / 132% auto no-repeat;
  opacity: 0.28;
  filter: blur(20px);
  mix-blend-mode: screen;
}

.body-diagram__blend {
  position: absolute;
  inset: 0.5rem;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 188, 98, 0.22), transparent 18%),
    radial-gradient(circle at 50% 70%, rgba(255, 104, 42, 0.18), transparent 22%),
    url("assets/ambient-banner-constellation-cutout.png") 50% 6% / 138% auto no-repeat,
    url("assets/ambient-horizon-glow.png") 50% 100% / 142% auto no-repeat;
  opacity: 0.34;
  mix-blend-mode: screen;
  pointer-events: none;
}

.section--closing::before {
  content: "";
  position: absolute;
  left: 14%;
  right: 10%;
  top: 3rem;
  height: 10rem;
  pointer-events: none;
  opacity: 0.26;
  mix-blend-mode: screen;
  background:
    linear-gradient(180deg, rgba(18, 7, 8, 0.02), rgba(18, 7, 8, 0.18)),
    url("assets/ambient-horizon-glow.png") 50% 52% / cover no-repeat;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.98) 8%, rgba(0, 0, 0, 0.98) 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.98) 8%, rgba(0, 0, 0, 0.98) 92%, transparent 100%);
}

.body-diagram__hotspot {
  position: absolute;
  display: grid;
  gap: 0.16rem;
  min-width: 9rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(255, 214, 172, 0.22);
  border-radius: 18px;
  background: rgba(20, 8, 9, 0.72);
  backdrop-filter: blur(12px);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.body-diagram__hotspot span {
  color: var(--accent-gold);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.body-diagram__hotspot strong {
  color: var(--text-main);
  font-size: 0.98rem;
  font-weight: 700;
}

.body-diagram__hotspot:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 190, 92, 0.42);
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.24), 0 0 24px rgba(255, 106, 42, 0.12);
}

.body-diagram__hotspot.is-active {
  border-color: rgba(255, 190, 92, 0.56);
  background: linear-gradient(180deg, rgba(64, 24, 18, 0.9), rgba(28, 10, 11, 0.92));
  box-shadow: 0 0 0 1px rgba(255, 106, 42, 0.18), 0 18px 34px rgba(0, 0, 0, 0.26), 0 0 26px rgba(255, 106, 42, 0.14);
}

.body-diagram__hotspot:focus-visible {
  outline: 2px solid rgba(255, 245, 234, 0.94);
  outline-offset: 4px;
}

.body-diagram__hotspot--mind {
  right: 6%;
  top: 10%;
}

.body-diagram__hotspot--heart {
  left: 5%;
  top: 28%;
}

.body-diagram__hotspot--hands {
  right: 3%;
  top: 36%;
}

.body-diagram__hotspot--legs {
  left: 6%;
  top: 60%;
}

.body-diagram__hotspot--core {
  right: 8%;
  top: 54%;
}

.body-diagram__hotspot--squad {
  left: 14%;
  bottom: 8%;
}

.body-map__story {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1rem;
}

.body-info,
.profile-card {
  position: relative;
  overflow: hidden;
}

.body-info {
  isolation: isolate;
  min-height: 12.75rem;
  padding: 1.65rem clamp(8.8rem, 27%, 13rem) 1.55rem 1.45rem;
  border: 1px solid rgba(255, 214, 172, 0.12);
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(44, 17, 15, 0.78), rgba(22, 9, 10, 0.92));
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.2);
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.body-info::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(110deg, rgba(22, 9, 10, 0.1) 8%, rgba(22, 9, 10, 0.66) 40%, rgba(22, 9, 10, 0.88) 100%),
    linear-gradient(180deg, rgba(255, 176, 88, 0.08), transparent 50%);
  opacity: 0.9;
  pointer-events: none;
}

.body-info h3,
.profile-card h3 {
  margin: 0;
  font-size: 1.7rem;
  line-height: 1.05;
}

.body-info p:last-child,
.profile-card p:last-child {
  margin-bottom: 0;
}

.body-info__art {
  position: absolute;
  inset: 0 0 0 auto;
  width: clamp(9.6rem, 30%, 13rem);
  background: url("assets/cards-theme-atlas-cutout.png") center center / 300% 200% no-repeat;
  opacity: 0.96;
  filter: saturate(1.14) brightness(1.08) drop-shadow(0 0 18px rgba(255, 136, 54, 0.16));
  transform-origin: center center;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.4) 18%, #000 52%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.4) 18%, #000 52%);
}

.body-info__art::after {
  content: "";
  position: absolute;
  inset: 12% 8%;
  border-radius: 24px 0 0 24px;
  background: linear-gradient(180deg, rgba(255, 245, 224, 0.18), transparent 34%, rgba(255, 115, 33, 0.12) 82%, transparent 100%);
}

.body-info--mind .body-info__art {
  background-position: 0% 0%;
  transform: translateX(12%) scale(1.06);
}

.body-info--heart .body-info__art {
  background-position: 50% 0%;
  transform: translateX(10%) scale(1.02);
}

.body-info--hands .body-info__art {
  background-position: 100% 0%;
  transform: translateX(18%) scale(1.08);
}

.body-info--legs .body-info__art {
  background-position: 0% 100%;
  transform: translateX(16%) scale(1.07);
}

.body-info--game .body-info__art {
  background-position: 50% 100%;
  transform: translateX(14%) scale(1.08);
}

.body-info--squad .body-info__art {
  background-position: 100% 100%;
  transform: translateX(16%) scale(1.05);
}

.body-info--heart,
.body-info--legs,
.body-info--squad {
  padding-left: clamp(9rem, 28%, 13.5rem);
  padding-right: 1.45rem;
}

.body-info--heart .body-info__art,
.body-info--legs .body-info__art,
.body-info--squad .body-info__art {
  inset: 0 auto 0 0;
  background: url("assets/cards-theme-atlas-cutout.png") center center / 300% 200% no-repeat;
  mask-image: linear-gradient(270deg, transparent 0%, rgba(0, 0, 0, 0.4) 18%, #000 52%);
  -webkit-mask-image: linear-gradient(270deg, transparent 0%, rgba(0, 0, 0, 0.4) 18%, #000 52%);
}

.body-info--heart .body-info__art {
  background-position: 50% 0%;
  transform: translateX(-10%) scale(1.02);
}

.body-info--legs .body-info__art {
  background-position: 0% 100%;
  transform: translateX(-16%) scale(1.07);
}

.body-info--squad .body-info__art {
  background-position: 100% 100%;
  transform: translateX(-12%) scale(1.05);
}

.body-info.is-active {
  border-color: rgba(255, 190, 92, 0.42);
  transform: translateX(8px);
  box-shadow: 0 0 0 1px rgba(255, 106, 42, 0.12), 0 24px 52px rgba(0, 0, 0, 0.28), 0 0 32px rgba(255, 106, 42, 0.12);
}

.profile-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.9rem;
}

.profile-card {
  isolation: isolate;
  padding: 1.5rem clamp(8.8rem, 32%, 11.8rem) 1.45rem 1.35rem;
  min-height: 15rem;
  border: 1px solid rgba(255, 190, 92, 0.18);
  border-radius: 26px;
  background: linear-gradient(160deg, rgba(48, 16, 13, 0.96), rgba(22, 9, 10, 0.98));
  box-shadow: var(--shadow-heavy);
  transform: perspective(960px) rotateX(var(--card-rotate-x, 0deg)) rotateY(var(--card-rotate-y, 0deg));
  transform-style: preserve-3d;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.profile-card::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at var(--card-glow-x, 50%) var(--card-glow-y, 50%), rgba(255, 204, 134, 0.28), transparent 24%);
  opacity: 0.88;
  pointer-events: none;
}

.profile-card__art {
  position: absolute;
  inset: 0 0 0 auto;
  width: clamp(9rem, 34%, 12rem);
  background: url("assets/cards-theme-atlas-cutout.png") center center / 300% 200% no-repeat;
  opacity: 0.92;
  filter: saturate(1.14) brightness(1.08) drop-shadow(0 0 16px rgba(255, 136, 54, 0.16));
  transform-origin: center center;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.46) 18%, #000 54%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.46) 18%, #000 54%);
  transition: opacity 180ms ease, transform 180ms ease;
}

.profile-card--mind .profile-card__art {
  background-position: 0% 0%;
}

.profile-card--heart .profile-card__art {
  background-position: 50% 0%;
}

.profile-card--hands .profile-card__art {
  background-position: 100% 0%;
}

.profile-card--legs .profile-card__art {
  background-position: 0% 100%;
}

.profile-card--game .profile-card__art {
  background-position: 50% 100%;
}

.profile-card--squad .profile-card__art {
  background-position: 100% 100%;
}

.profile-card--heart,
.profile-card--legs,
.profile-card--squad {
  padding-left: clamp(8.8rem, 32%, 11.8rem);
  padding-right: 1.35rem;
}

.profile-card--heart .profile-card__art,
.profile-card--legs .profile-card__art,
.profile-card--squad .profile-card__art {
  inset: 0 auto 0 0;
  mask-image: linear-gradient(270deg, transparent 0%, rgba(0, 0, 0, 0.46) 18%, #000 54%);
  -webkit-mask-image: linear-gradient(270deg, transparent 0%, rgba(0, 0, 0, 0.46) 18%, #000 54%);
}

.profile-card:hover,
.profile-card.is-tilting {
  border-color: rgba(255, 190, 92, 0.48);
  box-shadow: 0 28px 48px rgba(0, 0, 0, 0.3), 0 0 36px rgba(255, 106, 42, 0.16);
}

.profile-card > *:not(.profile-card__art) {
  position: relative;
  z-index: 1;
}

.body-info > *:not(.body-info__art) {
  position: relative;
  z-index: 1;
}

.profile-card:hover .profile-card__art,
.profile-card.is-tilting .profile-card__art {
  opacity: 1;
  transform: scale(1.04) translate3d(0, -4px, 0);
}

.body-info.is-active .body-info__art {
  opacity: 1;
  filter: saturate(1.18) brightness(1.1) drop-shadow(0 0 22px rgba(255, 136, 54, 0.2));
}

.section--closing {
  overflow: clip;
  min-height: 20rem;
  padding-bottom: 4rem;
}

.closing-copy {
  max-width: 38rem;
  margin-top: 1rem;
  font-size: 1.08rem;
}

.site-footer {
  padding-top: 1rem;
  padding-bottom: 2.6rem;
  text-align: center;
}

.reveal {
  opacity: 1;
  transform: translateY(0);
}

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 420ms ease, transform 420ms ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hero.is-energized .hero__cta {
  box-shadow: 0 0 0 1px rgba(255, 106, 42, 0.22), 0 0 34px rgba(255, 190, 92, 0.26);
}

.hero__cta:focus-visible {
  outline: 2px solid rgba(255, 245, 234, 0.94);
  outline-offset: 4px;
}

@keyframes heatPulse {
  0%,
  100% {
    transform: scale(0.98);
    opacity: 0.66;
  }

  50% {
    transform: scale(1.03);
    opacity: 1;
  }
}

@keyframes decoFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(0.98);
  }

  50% {
    transform: translate3d(0, -8px, 0) scale(1.02);
  }
}

@keyframes corePulse {
  0%,
  100% {
    transform: scale(0.9);
    opacity: 0.84;
  }

  50% {
    transform: scale(1.16);
    opacity: 1;
  }
}

@keyframes traceFlow {
  0% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: -160;
  }
}

@keyframes emberDrift {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-18px);
  }

  100% {
    transform: translateY(-36px);
  }
}

@keyframes heroFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }
}

@media (max-width: 1024px) {
  .hero {
    grid-template-columns: minmax(0, 460px) minmax(260px, 1fr);
  }

  .profile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 2rem;
  }

  .hero__copy {
    padding-block: 2rem 0;
  }

  .hero__body-stage {
    margin-left: 0;
    min-height: 31rem;
    margin-top: -1rem;
    margin-bottom: -1rem;
  }

  .hero__poster {
    inset: -2% -4% -6% 8%;
    background-position: 86% 56%;
  }

  .hero__blend {
    inset: 8% -2% 2% 28%;
  }

  .body-map {
    grid-template-columns: 1fr;
  }

  .section--map::after {
    right: 0;
    width: 78vw;
  }

  .section-deco {
    opacity: 0.24;
    filter: drop-shadow(0 0 18px rgba(255, 140, 48, 0.16));
  }

  .section-deco--hero-left,
  .section-deco--hero-mid,
  .section-deco--hero-right,
  .section-deco--map-right,
  .section-deco--cards-bottom {
    opacity: 0.18;
  }

  .section-deco--hero-bottom {
    left: 0;
    right: 0;
    bottom: -1.6rem;
    height: 15rem;
    opacity: 0.2;
  }

  .section-deco--map-top {
    top: 0.8rem;
    width: 18rem;
    height: 9rem;
    transform: translateX(-36%);
  }

  .section-deco--map-bottom {
    bottom: 0;
    width: 18rem;
    height: 6rem;
    transform: translateX(-34%);
  }

  .section-deco--cards-band,
  .section-deco--cards-middle,
  .section-deco--closing-center {
    left: 0;
    width: 100%;
    opacity: 0.22;
  }

  .body-map__sticky {
    position: relative;
    top: 0;
  }

  .body-diagram {
    min-height: 38rem;
  }

  .body-diagram__poster {
    inset: 1rem 0.5rem 0.6rem 0.5rem;
  }

  .body-diagram__hotspot {
    min-width: 7.6rem;
    padding: 0.58rem 0.68rem;
  }

  .body-diagram__hotspot strong {
    font-size: 0.88rem;
  }

  .body-diagram__hotspot--mind {
    right: 4%;
  }

  .body-diagram__hotspot--hands {
    right: 2%;
  }

  .body-diagram__hotspot--core {
    right: 4%;
  }

  .body-diagram__hotspot--squad {
    left: 8%;
  }

  .body-info {
    min-height: auto;
    padding: 1.35rem 1.1rem 1.15rem;
  }

  .body-info__art {
    inset: 0;
    width: 100%;
    opacity: 0.36;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.42) 24%, transparent 82%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.42) 24%, transparent 82%);
    transform: none;
  }

  .profile-card {
    padding: 1.2rem 1.05rem 1.15rem;
  }

  .profile-card__art {
    inset: 0;
    width: 100%;
    opacity: 0.34;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.42) 24%, transparent 82%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.42) 24%, transparent 82%);
    transform: none;
  }

  .profile-grid {
    grid-template-columns: 1fr;
  }
}

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

  .reveal,
  .reveal.is-visible,
  .hero__body-stage,
  .body-info,
  .body-info.is-active,
  .profile-card,
  .profile-card:hover,
  .profile-card.is-tilting,
  .body-diagram__hotspot,
  .body-diagram__hotspot:hover {
    opacity: 1;
    transform: none !important;
  }
}