:root {
  --hero-glow-core: rgba(37, 99, 235, .22);
  --hero-glow-soft: rgba(91, 142, 251, .11);
  --hero-line-rgb: 37, 99, 235;
  --explorer-warm: rgba(224, 164, 94, .42);
}

@property --portal-radius {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

[data-theme="dark"] {
  --hero-glow-core: rgba(91, 142, 251, .28);
  --hero-glow-soft: rgba(142, 182, 248, .10);
  --hero-line-rgb: 142, 182, 248;
}

section.hero {
  isolation: isolate;
  overflow: clip;
  background: linear-gradient(135deg, oklch(.985 .008 80), oklch(.955 .018 250));
}

[data-theme="dark"] section.hero {
  background: linear-gradient(135deg, oklch(.165 .035 260), oklch(.105 .03 275) 58%, oklch(.135 .04 245));
}

section.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(64% 72% at 82% 43%, var(--hero-glow-soft), transparent 68%),
    radial-gradient(46% 36% at 35% 24%, color-mix(in srgb, var(--hero-glow-soft) 54%, transparent), transparent 74%);
}

section.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(42% 55% at 78% 48%, var(--explorer-warm), transparent 68%),
    radial-gradient(24% 28% at 70% 61%, color-mix(in srgb, var(--explorer-warm) 56%, transparent), transparent 72%);
  transition: opacity 700ms cubic-bezier(.16, 1, .3, 1);
}

section.hero.is-transforming::after { opacity: 1; }

.hero-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .68;
  transition: opacity 500ms cubic-bezier(.16, 1, .3, 1), filter 500ms cubic-bezier(.16, 1, .3, 1);
  mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
}

.hero-ambient-glow {
  position: absolute;
  z-index: 0;
  top: 9%;
  right: -5%;
  width: min(62vw, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, var(--hero-glow-core) 0%, var(--hero-glow-soft) 34%, transparent 68%);
  filter: blur(18px);
  transform: translate3d(var(--hero-shift-x, 0), var(--hero-shift-y, 0), 0) scale(1);
  animation: hero-glow-breathe 7s cubic-bezier(.45, 0, .55, 1) infinite alternate;
  will-change: transform, opacity;
}

section.hero.is-transforming .hero-field {
  opacity: .48;
  filter: saturate(.88) brightness(1.04);
}

section.hero.is-transforming .hero-ambient-glow {
  opacity: 1;
  filter: blur(10px) saturate(1.22);
  background: radial-gradient(circle, var(--explorer-warm) 0%, var(--hero-glow-soft) 38%, transparent 70%);
}

.hero-text,
.portrait-col {
  position: relative;
  z-index: 1;
}

.portrait-col {
  isolation: isolate;
  overflow: visible;
  --portal-radius: 0px;
  --portal-x: 50%;
  --portal-y: 44%;
}

.portrait-col::before {
  content: "";
  position: absolute;
  inset: 5% -18% -3%;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 48%, var(--hero-glow-core), var(--hero-glow-soft) 42%, transparent 70%);
  filter: blur(16px);
  animation: portrait-halo 6.5s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

.portrait-topography {
  position: absolute;
  inset: -8% -27% -8% -22%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(3%, 2%, 0) scale(.88);
  background:
    radial-gradient(circle at 62% 56%, color-mix(in srgb, var(--explorer-warm) 86%, transparent), transparent 46%),
    url("../images/hero/explorer-topography.svg") 60% 45% / 112% no-repeat,
    url("../images/hero/explorer-alpine-field.webp") 64% 50% / cover no-repeat;
  background-blend-mode: screen, screen, normal;
  filter: brightness(1.2) saturate(.9) drop-shadow(0 0 22px color-mix(in srgb, var(--explorer-warm) 42%, transparent));
  mask-image: radial-gradient(ellipse at 58% 52%, #000 0 54%, rgba(0, 0, 0, .66) 67%, transparent 82%);
  transition:
    opacity 520ms cubic-bezier(.16, 1, .3, 1),
    transform 1000ms cubic-bezier(.16, 1, .3, 1),
    filter 700ms cubic-bezier(.16, 1, .3, 1);
}

.portrait-topography > span {
  position: absolute;
  right: 20%;
  bottom: 20%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #edb26d;
  box-shadow: 0 0 0 7px rgba(224, 164, 94, .11), 0 0 24px rgba(224, 164, 94, .68);
}

.portrait-col.is-transforming .portrait-topography {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1.04);
  filter: brightness(1.35) saturate(1) drop-shadow(0 0 30px color-mix(in srgb, var(--explorer-warm) 54%, transparent));
}

.portrait-portal {
  position: absolute;
  inset: 8% -10% 1%;
  z-index: 0;
  overflow: hidden;
  border-radius: 50%;
  opacity: .08;
  pointer-events: none;
  transform: scale(.82) rotate(-8deg);
  transition:
    opacity 420ms cubic-bezier(.16, 1, .3, 1),
    transform 900ms cubic-bezier(.16, 1, .3, 1),
    filter 700ms cubic-bezier(.16, 1, .3, 1);
  background:
    radial-gradient(circle at 50% 50%, transparent 0 31%, color-mix(in srgb, var(--accent) 22%, transparent) 31.4% 31.8%, transparent 32.2% 45%, color-mix(in srgb, var(--accent) 18%, transparent) 45.4% 45.8%, transparent 46.2%),
    conic-gradient(from 212deg, transparent 0 21%, color-mix(in srgb, var(--accent-2) 62%, transparent) 25%, transparent 31% 62%, color-mix(in srgb, var(--accent) 48%, transparent) 68%, transparent 74%);
  filter: blur(.2px);
  mask-image: radial-gradient(circle, #000 0 63%, transparent 76%);
}

.portrait-portal::before,
.portrait-portal::after,
.portrait-portal > span {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.portrait-portal::before {
  inset: 7%;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  box-shadow: inset 0 0 44px color-mix(in srgb, var(--accent) 14%, transparent), 0 0 32px color-mix(in srgb, var(--accent) 16%, transparent);
}

.portrait-portal::after {
  inset: 17%;
  border: 1px dashed color-mix(in srgb, var(--accent-2) 36%, transparent);
  animation: portal-counterspin 18s linear infinite;
}

.portrait-portal > span {
  width: 7px;
  height: 7px;
  background: var(--accent);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 12%, transparent), 0 0 24px var(--accent);
}

.portrait-portal > span:nth-child(1) { top: 14%; left: 31%; }
.portrait-portal > span:nth-child(2) { top: 46%; right: 4%; width: 4px; height: 4px; }
.portrait-portal > span:nth-child(3) { bottom: 10%; left: 24%; width: 5px; height: 5px; background: var(--accent-2); }

.portrait-col.is-transforming .portrait-portal {
  opacity: .34;
  transform: scale(1.08) rotate(0deg);
  filter: saturate(.9) sepia(.18) drop-shadow(0 0 24px color-mix(in srgb, var(--explorer-warm) 34%, transparent));
  animation: portal-turn 14s linear infinite;
}

.portrait-col .portrait-base {
  filter:
    saturate(1.03)
    contrast(1.025)
    brightness(1.035)
    drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 24%, transparent))
    drop-shadow(0 30px 50px rgba(0, 0, 0, .32));
  transition: filter 500ms var(--ease);
}

.portrait-col .portrait-alternate,
.portrait-col .portrait-identity-lock {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  pointer-events: none;
}

.portrait-col .portrait-alternate {
  z-index: 2;
  opacity: 0;
  filter:
    saturate(1.04)
    contrast(1.025)
    brightness(1.025)
    drop-shadow(0 0 18px color-mix(in srgb, var(--accent) 42%, transparent))
    drop-shadow(0 32px 54px rgba(0, 0, 0, .34));
  mask-image: radial-gradient(circle var(--portal-radius) at var(--portal-x) var(--portal-y), #000 0 74%, transparent 100%);
  transition: opacity 220ms ease;
}

.portrait-col .portrait-identity-lock {
  z-index: 3;
  opacity: 0;
  filter: none;
  mask-image: radial-gradient(ellipse 19% 12% at 50% 20%, #000 0 88%, rgba(0, 0, 0, .8) 94%, transparent 100%);
  transition: opacity 180ms ease;
}

.portrait-col.is-transforming .portrait-alternate,
.portrait-col.is-transforming .portrait-identity-lock {
  opacity: 1;
}

.portrait-col.is-transforming .portrait-base {
  filter:
    saturate(1.055)
    contrast(1.035)
    brightness(1.045)
    drop-shadow(0 0 20px color-mix(in srgb, var(--accent) 48%, transparent))
    drop-shadow(0 32px 54px rgba(0, 0, 0, .34));
}

.portrait-col.is-transforming { --portal-radius: min(44vw, 410px); }

.portrait-col::after {
  content: "";
  position: absolute;
  left: var(--portal-x);
  top: var(--portal-y);
  z-index: 0;
  width: calc(var(--portal-radius) * 2);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--accent) 62%, transparent);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.96);
  box-shadow: 0 0 28px color-mix(in srgb, var(--accent) 28%, transparent), inset 0 0 26px color-mix(in srgb, var(--accent) 12%, transparent);
  transition: width 720ms cubic-bezier(.16, 1, .3, 1), opacity 260ms ease, transform 720ms cubic-bezier(.16, 1, .3, 1);
}

.portrait-col.is-transforming::after {
  opacity: .52;
  transform: translate(-50%, -50%) scale(1);
  border-color: color-mix(in srgb, var(--explorer-warm) 70%, transparent);
  box-shadow: 0 0 28px color-mix(in srgb, var(--explorer-warm) 34%, transparent), inset 0 0 26px color-mix(in srgb, var(--explorer-warm) 16%, transparent);
}

.portrait-orbit {
  position: absolute;
  inset: 13% -3% 4%;
  z-index: 1;
  border: 1px solid color-mix(in srgb, var(--accent) 21%, transparent);
  border-radius: 50%;
  pointer-events: none;
  transform: rotate(-12deg);
  animation: orbit-turn 24s linear infinite;
  transition: opacity 520ms cubic-bezier(.16, 1, .3, 1), filter 700ms cubic-bezier(.16, 1, .3, 1), border-color 520ms ease;
}

.portrait-col.is-transforming .portrait-orbit {
  opacity: .38;
  filter: sepia(.3) saturate(.8);
  border-color: color-mix(in srgb, var(--explorer-warm) 44%, transparent);
}

.portrait-orbit::before,
.portrait-orbit::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.portrait-orbit::before {
  inset: 8% 11%;
  border: 1px dashed color-mix(in srgb, var(--accent) 17%, transparent);
}

.portrait-orbit::after {
  top: 17%;
  right: 1.5%;
  width: 7px;
  height: 7px;
  background: var(--accent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 12%, transparent), 0 0 22px var(--accent);
}

.portrait-orbit > span {
  position: absolute;
  left: 7%;
  bottom: 18%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 16px var(--accent-2);
}

.hero-capability {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 76%, transparent);
  color: var(--ink-soft);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--ink) 8%, transparent);
  font: 500 10px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  animation: capability-drift 5.4s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

.hero-capability > span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}

.hero-capability-1 { top: 24%; left: 1%; --float-x: 8px; --float-y: -8px; }
.hero-capability-2 { top: 40%; right: 1%; --float-x: -7px; --float-y: 9px; animation-delay: -1.7s; }
.hero-capability-3 { bottom: 27%; left: 0; --float-x: 9px; --float-y: 6px; animation-delay: -3.1s; }
.hero-capability-4 { right: 1%; bottom: 16%; --float-x: -8px; --float-y: -7px; animation-delay: -4.2s; }

.sig-stage {
  position: relative;
  overflow: hidden;
}

.sig-stage::after {
  content: "";
  position: absolute;
  top: -1px;
  left: -32%;
  z-index: 3;
  width: 32%;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--accent) 50%, transparent);
  filter: drop-shadow(0 0 7px var(--accent));
  animation: process-signal 5.8s cubic-bezier(.45, 0, .55, 1) infinite;
}

.sig-node-label { position: relative; }

.sig-node-label::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 18px;
  z-index: 4;
  width: 9px;
  height: 9px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--bg);
  animation: process-node 5.8s cubic-bezier(.45, 0, .55, 1) infinite;
  animation-delay: calc(var(--stage-index) * 1.02s);
}

.sig-node-label:nth-child(1) { --stage-index: 0; }
.sig-node-label:nth-child(2) { --stage-index: 1; }
.sig-node-label:nth-child(3) { --stage-index: 2; }
.sig-node-label:nth-child(4) { --stage-index: 3; }
.sig-node-label:nth-child(5) { --stage-index: 4; }

@keyframes hero-glow-breathe {
  from { opacity: .68; transform: translate3d(var(--hero-shift-x, 0), var(--hero-shift-y, 0), 0) scale(.94); }
  to { opacity: 1; transform: translate3d(var(--hero-shift-x, 0), var(--hero-shift-y, 0), 0) scale(1.06); }
}

@keyframes portrait-halo {
  from { opacity: .72; transform: translate3d(-1.5%, 1%, 0) scale(.95); }
  to { opacity: 1; transform: translate3d(1.5%, -1%, 0) scale(1.04); }
}

@keyframes orbit-turn {
  from { transform: rotate(-12deg); }
  to { transform: rotate(348deg); }
}

@keyframes portal-turn {
  from { transform: scale(1.08) rotate(0deg); }
  to { transform: scale(1.08) rotate(360deg); }
}

@keyframes portal-counterspin {
  to { transform: rotate(-360deg); }
}

@keyframes capability-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(var(--float-x), var(--float-y), 0); }
}

@keyframes process-signal {
  0%, 8% { transform: translateX(0); opacity: 0; }
  16% { opacity: 1; }
  84% { opacity: 1; }
  92%, 100% { transform: translateX(412%); opacity: 0; }
}

@keyframes process-node {
  0%, 14%, 42%, 100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; }
  22% { transform: scale(1.45); background: var(--accent); box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 13%, transparent), 0 0 18px var(--accent); }
}

@media (max-width: 760px) {
  .hero-field { opacity: .5; }
  .hero-ambient-glow { top: 38%; right: -42%; width: 125vw; }
  .portrait-col::before { inset: 2% -24% -7%; }
  .portrait-topography { inset: -2% -20% -7%; }
  .portrait-portal { inset: 7% -5% 2%; opacity: .14; }
  .portrait-orbit { inset: 8% 3% 2%; }
  .hero-capability { min-height: 30px; padding: 0 10px; font-size: 9px; }
  .hero-capability-1 { top: 22%; left: 1%; }
  .hero-capability-2 { top: 43%; right: 0; }
  .hero-capability-3,
  .hero-capability-4 { display: none; }
  .sig-stage { overflow: visible; }
  .sig-stage::after { display: none; }
  .sig-node-label::before { top: 24px; left: -5px; }
}

@media (min-width: 761px) {
  section.signature .sig-stage {
    padding-top: 10px;
    border-top: 0;
    background: linear-gradient(var(--rule), var(--rule)) 0 8px / 100% 1px no-repeat;
  }

  .sig-stage::after { top: 7px; }
  .sig-node-label::before { top: -6px; }
}

@media (pointer: coarse) {
  .portrait-col .portrait-base { filter: contrast(1.025) saturate(1.03) brightness(1.035) drop-shadow(0 30px 50px rgba(0, 0, 0, .3)); }
  .portrait-col::after { display: none; }
  .portrait-col .portrait-alternate,
  .portrait-col .portrait-identity-lock { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-field { display: none; }
  .hero-ambient-glow,
  .portrait-col::before,
  .portrait-topography,
  .portrait-portal,
  .portrait-orbit,
  .hero-capability,
  .sig-stage::after,
  .sig-node-label::before { animation: none; }
  .portrait-col .portrait-base { filter: contrast(1.025) saturate(1.03) brightness(1.035) drop-shadow(0 30px 50px rgba(0, 0, 0, .3)); }
  .portrait-col::after { display: none; }
  .portrait-portal { opacity: .12; transform: none; }
  .portrait-col .portrait-alternate,
  .portrait-col .portrait-identity-lock { display: none; }
}