.liquid-portrait {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  touch-action: pan-y;
  background: #0d1520;
}
.liquid-portrait > img:not([hidden]),
.liquid-portrait-canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.liquid-portrait > img[hidden] { display: none; }
.liquid-portrait-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.portrait-scene { filter: saturate(.7); }

/* The image and canvas share one crop; overlays never intercept the portrait. */
.hero-avatar {
  width: 100%;
  max-width: none;
  height: min(820px, calc(100svh - 108px));
  min-height: 640px;
  padding: 0 0 74px;
  overflow: hidden;
  isolation: isolate;
}
.hero-avatar .portrait-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.portrait-scene > img:not([hidden]) { object-position: 50% 35%; }
.portrait-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, #0d1520e8 0%, #0d1520b3 28%, #0d152042 50%, transparent 68%),
    linear-gradient(0deg, #0d1520 0%, #0d1520a6 9%, transparent 30%, transparent 90%, #0d152040 100%);
}
.hero-avatar .hero-content {
  width: calc(100% - 112px);
  padding-block: 56px;
}
.hero-avatar .hero-eyebrow {
  color: #d7dde5;
  font-size: 10px;
  letter-spacing: .06em;
  margin-bottom: 26px;
}
.hero-avatar h1 {
  max-width: 56%;
  font-size: clamp(68px, 6.1vw, 98px);
  line-height: 1.06;
  text-wrap: balance;
  text-shadow: 0 3px 38px #040b1490;
}
.hero-avatar .hero-description {
  max-width: 410px;
  color: #c7d1dd;
  font-size: 15px;
  line-height: 1.85;
  margin-top: 26px;
}
.hero-avatar .desktop-break { display: none; }
.hero-avatar .hero-bottom {
  z-index: 2;
  bottom: 28px;
  color: #b3c1d2;
}
.hero-avatar .hero-bottom .hero-coordinate { font-size: 9px; letter-spacing: .16em; }
.portrait-controls {
  position: absolute;
  z-index: 3;
  right: max(56px, calc((100% - 1440px) / 2));
  bottom: 100px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.portrait-controls[hidden] { display: none; }
.portrait-hint {
  font: 10px/1.7 'SFMono-Regular', Consolas, monospace;
  letter-spacing: .025em;
  color: #dfe8f1;
  text-shadow: 0 2px 8px #000;
}
.portrait-hint-touch { display: none; }
.portrait-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 16px 10px 12px;
  border: 1px solid #e6ad8a50;
  border-radius: 99px;
  background: #0b1522e0;
  backdrop-filter: blur(14px);
  color: #f0e8e0;
  font-size: 12px;
  transition: border-color .25s, background .25s, color .25s;
}
.portrait-toggle:hover { border-color: var(--lime); background: #2b2630; }
.portrait-toggle[aria-pressed="true"] { background: var(--lime); color: #251a14; border-color: var(--lime); }
.portrait-toggle-icon { font-size: 23px; line-height: 1; color: var(--lime); transition: transform .5s; }
.portrait-toggle[aria-pressed="true"] .portrait-toggle-icon { color: #251a14; transform: rotate(180deg); }
.portrait-toggle-arrow { margin-left: 9px; font-size: 17px; }
.motion-paused .portrait-hint { visibility: hidden; }
@media (max-width: 1100px) and (min-width: 761px) {
  .hero-avatar .hero-content { width: calc(100% - 64px); }
  .hero-avatar h1 { font-size: 7vw; max-width: 57%; }
  .hero-avatar .hero-description { max-width: 39%; font-size: 14px; }
  .hero-avatar .hero-eyebrow { max-width: 44%; font-size: 9px; }
  .portrait-controls { right: 32px; }
}
@media (max-width: 760px) {
  .hero-avatar {
    --scene-height: clamp(405px, 120vw, 520px);
    display: block;
    height: auto;
    min-height: 0;
    padding: 0;
  }
  .hero-avatar .portrait-scene { height: var(--scene-height); bottom: auto; }
  .portrait-scene > img:not([hidden]) { object-position: 73% 25%; }
  .portrait-shade {
    bottom: auto;
    height: calc(var(--scene-height) + 1px);
    background: linear-gradient(0deg, #0d1520 0%, #0d1520ce 13%, transparent 37%), linear-gradient(90deg, #0d152055, transparent 40%);
  }
  .hero-avatar .hero-content {
    width: calc(100% - 40px);
    padding: calc(var(--scene-height) - 40px) 0 0;
  }
  .hero-avatar .hero-eyebrow { font-size: 8px; gap: 8px; margin-bottom: 20px; }
  .hero-avatar .tiny-cross { font-size: 19px; }
  .hero-avatar h1 { max-width: 100%; font-size: clamp(43px, 11.8vw, 74px); line-height: 1.06; }
  .hero-avatar .hero-description { font-size: 14px; max-width: 440px; margin-top: 22px; }
  .hero-avatar .button { margin-top: 25px; }
  .portrait-controls { top: calc(var(--scene-height) - 151px); bottom: auto; right: 20px; gap: 8px; }
  .portrait-hint { font-size: 9px; max-width: 210px; text-align: right; }
  .portrait-hint-desktop { display: none; }
  .portrait-hint-touch { display: inline; }
  .portrait-toggle { min-height: 44px; font-size: 11px; gap: 10px; padding: 8px 13px 8px 10px; }
  .hero-avatar .hero-bottom { position: relative; left: auto; right: auto; bottom: auto; margin-top: 38px; padding-bottom: 26px; }
  .hero-avatar .hero-coordinate { display: none; }
}
@media (pointer: coarse) {
  .portrait-hint-desktop { display: none; }
  .portrait-hint-touch { display: inline; }
}