.hero {
  --hero-wave-x: 0px;
  --hero-wave-y: 0px;
  --portrait-shift-x: 0px;
  --portrait-shift-y: 0px;
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - var(--header-height));
  padding-top: 90px;
  padding-bottom: clamp(64px, 7vw, 90px);
  overflow: hidden;
}

.hero::before {
  position: absolute;
  z-index: 0;
  inset: -24% -12% -12%;
  background:
    radial-gradient(ellipse at 76% 42%, rgba(232, 200, 117, .16), rgba(214, 174, 85, .06) 23%, transparent 48%),
    radial-gradient(ellipse at 28% 62%, rgba(138, 103, 40, .08), transparent 38%);
  filter: blur(26px);
  content: "";
  opacity: .72;
  animation: hero-aurora-breathe 14s ease-in-out infinite alternate;
  pointer-events: none;
}

.hero::after {
  position: absolute;
  z-index: 0;
  top: 4%;
  right: -18%;
  width: 112%;
  height: 88%;
  background: repeating-radial-gradient(ellipse at 78% 52%, transparent 0 34px, rgba(214, 174, 85, .075) 35px, transparent 37px 72px);
  content: "";
  opacity: .58;
  transform: translate3d(var(--hero-wave-x), var(--hero-wave-y), 0) rotate(-7deg);
  transition: transform .48s cubic-bezier(.2, .8, .2, 1);
  -webkit-mask-image: radial-gradient(ellipse at 72% 50%, #000 0 24%, rgba(0, 0, 0, .76) 46%, transparent 75%);
  mask-image: radial-gradient(ellipse at 72% 50%, #000 0 24%, rgba(0, 0, 0, .76) 46%, transparent 75%);
  pointer-events: none;
}

.hero-orb {
  position: absolute;
  top: 14%;
  right: -8vw;
  width: clamp(270px, 34vw, 540px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(214, 174, 85, .64), rgba(138, 103, 40, .3) 45%, rgba(13, 12, 10, .12) 75%);
  opacity: .48;
  filter: saturate(.72);
}

.hero-orb::after {
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(243, 239, 229, .1);
  border-radius: inherit;
  content: "";
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(270px, .65fr);
  align-items: center;
  gap: clamp(42px, 6vw, 90px);
}

.hero-copy {
  animation: hero-copy-enter .9s cubic-bezier(.2, .8, .2, 1) both;
}

.hero-copy h1 {
  position: relative;
  z-index: 2;
  max-width: none;
  margin: 0;
  font: 800 clamp(4.4rem, 9.2vw, 8.7rem)/.77 var(--heading);
  letter-spacing: -.035em;
  text-transform: uppercase;
}

.hero-copy h1 span { display: block; }

.hero-copy .accent-text {
  color: var(--rose);
  background: linear-gradient(105deg, #8a6728 0%, #d6ae55 20%, #e8c875 38%, #d6ae55 51%, #f4f0e7 58%, #d6ae55 67%, #8a6728 100%);
  background-size: 280% 100%;
  background-position: 100% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px rgba(214, 174, 85, .13));
  animation: metallic-text-sweep 11s ease-in-out infinite;
}

.hero-intro {
  display: grid;
  grid-template-columns: minmax(260px, 450px) auto;
  align-items: end;
  gap: 42px;
  margin-top: 48px;
}

.hero-intro p {
  max-width: none;
  margin: 0;
  color: var(--text-soft);
  font-size: 1rem;
  line-height: inherit;
}

.hero .button-row { gap: 12px; }
.hero .button { min-height: 50px; padding: 12px 20px; }

.hero-portrait-wrap {
  position: relative;
  isolation: isolate;
  align-self: end;
  padding-top: 48px;
  transform: translate3d(var(--portrait-shift-x), var(--portrait-shift-y), 0);
  transition: transform .48s cubic-bezier(.2, .8, .2, 1);
}

.hero-portrait-wrap::before {
  position: absolute;
  z-index: -1;
  inset: 9% -22% -10%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(232, 200, 117, .22), rgba(214, 174, 85, .08) 38%, transparent 70%);
  filter: blur(30px);
  content: "";
  opacity: .76;
  animation: portrait-halo-breathe 8s ease-in-out infinite alternate;
  pointer-events: none;
}

.portrait-frame {
  position: relative;
  min-height: 510px;
  aspect-ratio: 3 / 4;
  border: 1px solid rgba(214, 174, 85, .42);
  border-radius: clamp(58px, 7vw, 96px) 18px clamp(46px, 6vw, 78px) 28px;
  background: var(--bg-soft);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .38), 0 0 42px rgba(214, 174, 85, .1);
  overflow: hidden;
  animation: hero-portrait-enter 1.05s .14s cubic-bezier(.2, .8, .2, 1) both;
}

.portrait-frame::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(122deg, rgba(244, 240, 231, .12), transparent 20% 72%, rgba(214, 174, 85, .04));
  content: "";
  mix-blend-mode: screen;
  pointer-events: none;
}

.portrait-frame::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(to bottom, rgba(214, 174, 85, .025) 0%, rgba(138, 103, 40, .025) 56%, rgba(7, 7, 6, .22) 74%, rgba(7, 7, 6, .92) 100%);
  content: "";
  pointer-events: none;
}

.portrait-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 57% 38%;
  filter: brightness(1.02) contrast(1.015) saturate(.98);
}

.portrait-image.is-missing { display: none; }

.portrait-label {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 13px 16px;
  border-top: 1px solid var(--border);
  background: rgba(7, 7, 6, .76);
  font-size: .6rem;
  letter-spacing: .1em;
  text-align: center;
  text-transform: uppercase;
}

@keyframes hero-aurora-breathe {
  from { opacity: .5; transform: translate3d(-2%, -1%, 0) scale(.96); }
  to { opacity: .84; transform: translate3d(3%, 2%, 0) scale(1.05); }
}

@keyframes portrait-halo-breathe {
  from { opacity: .5; transform: scale(.92); }
  to { opacity: .85; transform: scale(1.08); }
}

@keyframes metallic-text-sweep {
  0%, 66% { background-position: 100% 50%; }
  82%, 100% { background-position: 0% 50%; }
}

@keyframes hero-copy-enter {
  from { opacity: 0; filter: blur(8px); transform: translate3d(0, 24px, 0); }
  to { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0); }
}

@keyframes hero-portrait-enter {
  from { opacity: 0; filter: blur(10px); transform: translate3d(18px, 28px, 0) scale(.97); }
  to { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0) scale(1); }
}

@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 1.45fr) minmax(240px, .55fr); gap: 32px; }
  .hero-copy h1 { font-size: clamp(4rem, 9.6vw, 7rem); }
  .hero-intro { grid-template-columns: 1fr; gap: 28px; }
  .portrait-frame { min-height: 430px; }
}

@media (max-width: 760px) {
  .hero { padding-top: 66px; }
  .hero::before { opacity: .48; filter: blur(34px); }
  .hero::after { right: -48%; width: 150%; opacity: .34; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy h1 { font-size: clamp(3.85rem, 18vw, 6rem); }
  .hero-intro { margin-top: 34px; }
  .hero-portrait-wrap { width: min(88%, 380px); justify-self: end; padding-top: 20px; }
  .portrait-frame { min-height: 0; }
  .hero-orb { top: 44%; right: -35vw; width: 80vw; }
}

@media (max-width: 420px) {
  .hero .button-row { display: grid; }
  .hero .button { width: 100%; }
  .hero-portrait-wrap { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero-copy,
  .hero-portrait-wrap::before,
  .portrait-frame,
  .hero-copy .accent-text { animation: none !important; }

  .hero::after,
  .hero-portrait-wrap { transform: none; transition: none; }

  .hero-copy,
  .portrait-frame { opacity: 1; filter: none; transform: none; }
}