/* Hero-only optics. Match the filtered studio wall through the feathered
   background; let small refractions reach the lower portrait, with a fixed
   face exclusion. Photo color math and image detail remain unchanged. */
.hero {
  background: linear-gradient(180deg, #111034 0%, #11102b 25%, #0e0d20 49%, #090a13 78%, #09090f 100%);
}
.hero::before {
  background: linear-gradient(180deg, #111034 0%, #11102b 25%, #0e0d20 49%, #090a13 78%, #09090f 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0 19%, #000e 29%, #000b 38%, #0006 49%, #0002 62%, transparent 76%);
  mask-image: linear-gradient(90deg, #000 0 19%, #000e 29%, #000b 38%, #0006 49%, #0002 62%, transparent 76%);
}
.hero .hero-atmosphere {
  background: radial-gradient(ellipse 60% 75% at var(--hero-glow-x, 28%) var(--hero-glow-y, 56%), #7873a71c, transparent 72%);
  opacity: .3;
}
.hero > .glass-shell.glass-quiet .glass-rim {
  padding: 2px;
  background: linear-gradient(148deg, #f0f8ffb3, #c5b8ef24 18%, transparent 36% 70%, #b1dceb50 88%, #fff4ce85);
  opacity: .64;
}
.hero > .glass-shell.glass-quiet .glass-prism {
  padding: 3px;
  background: none;
  filter: blur(.35px);
  opacity: .9;
}
.hero > .glass-shell.glass-quiet .glass-prism::before,
.hero > .glass-shell.glass-quiet .glass-prism::after {
  content: '';
  display: none;
  position: absolute;
  inset: -55%;
  pointer-events: none;
  transform-origin: 50% 50%;
}
.hero > .glass-shell.glass-quiet .glass-prism::before {
  background: conic-gradient(from 24deg, transparent 0 8%, #b9efff9c 11%, #77ceff 13%, #c0a0fff2 15%, #ffeddded 17%, transparent 20% 44%, #ffa1d9b3 49%, #9be6e3ed 52%, #8cbbffe0 55%, transparent 59% 100%);
  animation: hero-rgb-gleam 10.7s linear infinite;
}
.hero > .glass-shell.glass-quiet .glass-prism::after {
  background: conic-gradient(from 28deg, transparent 0 10%, #ffffffd1 13%, #eaf3ff99 15%, transparent 18% 47%, #fff5ce8c 52%, transparent 56% 100%);
  animation: hero-rgb-highlight 12.3s linear infinite;
  opacity: .82;
}
.hero > .glass-shell.glass-quiet.is-glass-lit .glass-prism { opacity: 1; }
@supports (mask-composite: exclude) or (-webkit-mask-composite: xor) {
  .hero > .glass-shell.glass-quiet .glass-prism::before,
  .hero > .glass-shell.glass-quiet .glass-prism::after { display: block; }
}

.hero .hero-optics {
  display: block;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  mix-blend-mode: screen;
  -webkit-mask-image:
    radial-gradient(ellipse 31% 36% at 79% 29%, transparent 0 74%, #000d 94%, #000 100%),
    linear-gradient(90deg, #000 0 34%, #000b 55%, #0006 76%, #0003 100%);
  mask-image:
    radial-gradient(ellipse 31% 36% at 79% 29%, transparent 0 74%, #000d 94%, #000 100%),
    linear-gradient(90deg, #000 0 34%, #000b 55%, #0006 76%, #0003 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.hero .hero-leak {
  inset: 0;
  background:
    radial-gradient(ellipse 24% 26% at 20% 48%, #a0d9ef45, #bba8ef21 42%, transparent 78%),
    radial-gradient(ellipse 14% 20% at 12% 65%, #b398dc45, #c7b5e619 44%, transparent 82%),
    radial-gradient(ellipse 11% 14% at 37% 55%, #fff0d92b, transparent 76%),
    radial-gradient(ellipse 28% 14% at 62% 76%, #a0d9ef38, #bba8ef18 42%, transparent 80%),
    radial-gradient(ellipse 20% 18% at 84% 80%, #d6bef62b, transparent 82%);
  filter: blur(12px);
  opacity: .56;
  animation: hero-diffuse-flare 11.8s ease-in-out infinite;
}
.hero .hero-reflection {
  inset: 0;
  background:
    radial-gradient(ellipse 8% 16% at var(--hero-glow-x, 28%) var(--hero-glow-y, 56%), #e8f8ff42, #a0d9ef21 43%, transparent 76%),
    radial-gradient(ellipse 13% 10% at calc(var(--hero-glow-x, 28%) + 8%) calc(var(--hero-glow-y, 56%) + 10%), #d6bef62b, transparent 78%),
    radial-gradient(ellipse 18% 7% at calc(var(--hero-glow-x, 28%) + 38%) calc(var(--hero-glow-y, 56%) + 16%), #fff0d936, #a0d9ef24 45%, transparent 80%);
  opacity: .6;
  animation: hero-local-gleam 9.8s ease-in-out infinite;
}
.hero .hero-exposure {
  inset: auto auto -51% -11%;
  width: 100%;
  height: 94%;
  padding: 2px;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  background: conic-gradient(from -68deg, transparent 0 11%, #c7e8f28c 18%, #d6bef695 23%, #fff0d38c 30%, transparent 39% 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: blur(1px);
  opacity: .32;
  animation: hero-lens-refraction 11.2s ease-in-out infinite;
}

@keyframes hero-rgb-gleam {
  0% { transform: rotate(-100deg); opacity: .75; }
  50% { transform: rotate(80deg); opacity: 1; }
  100% { transform: rotate(260deg); opacity: .75; }
}
@keyframes hero-rgb-highlight {
  0% { transform: rotate(40deg) translate(2px, -1px); }
  100% { transform: rotate(-320deg) translate(2px, -1px); }
}
@keyframes hero-diffuse-flare {
  0%, 100% { transform: translate(-8%, 18%) rotate(-4deg); opacity: .7; }
  33% { transform: translate(23%, -15%) rotate(4deg); opacity: .88; }
  68% { transform: translate(7%, -31%) rotate(-6deg); opacity: .76; }
}
@keyframes hero-local-gleam {
  0%, 100% { transform: translate(-12%, 14%); opacity: .64; }
  48% { transform: translate(20%, -18%); opacity: .9; }
  76% { transform: translate(4%, -5%); opacity: .74; }
}
@keyframes hero-lens-refraction {
  0%, 100% { transform: rotate(-24deg) translate(-15px, 24px); }
  50% { transform: rotate(1deg) translate(43px, -31px); }
}
.hero.ambient-resting .hero-optics i,
.hero.ambient-resting > .glass-shell.glass-quiet .glass-prism::before,
.hero.ambient-resting > .glass-shell.glass-quiet .glass-prism::after,
body.motion-paused .hero .hero-optics i,
body.motion-paused .hero > .glass-shell.glass-quiet .glass-prism::before,
body.motion-paused .hero > .glass-shell.glass-quiet .glass-prism::after { animation-play-state: paused !important; }

@media (max-width: 760px) {
  .hero { background: linear-gradient(180deg, #10102c 0%, #11102b 23%, #0e0d20 56%, #090a13 82%, #09090f 100%); }
  .hero::before {
    background: linear-gradient(180deg, #10102c 0%, #10102cef 13%, #10102c75 28%, #10102c0d 43%, transparent 66%, #09090f8c 90%, #09090f 100%);
    -webkit-mask-image: none;
    mask-image: none;
  }
  .hero > .glass-shell.glass-quiet .glass-prism { padding: 2.5px; opacity: .8; }
  .hero .hero-optics {
    width: 100%;
    height: 100%;
    inset: 0;
    -webkit-mask-image:
      radial-gradient(ellipse 30% 21% at 70% 42%, transparent 0 74%, #000d 94%, #000 100%),
      linear-gradient(180deg, #0003 0%, #0001 24%, #0004 56%, #0009 75%, #000c 100%);
    mask-image:
      radial-gradient(ellipse 30% 21% at 70% 42%, transparent 0 74%, #000d 94%, #000 100%),
      linear-gradient(180deg, #0003 0%, #0001 24%, #0004 56%, #0009 75%, #000c 100%);
  }
  .hero .hero-leak {
    background:
      radial-gradient(ellipse 26% 23% at 18% 76%, #a0d9ef45, #c7b5e627 42%, transparent 82%),
      radial-gradient(ellipse 22% 16% at 60% 80%, #a0d9ef32, transparent 80%),
      radial-gradient(ellipse 17% 22% at 36% 87%, #d6bef636, transparent 80%),
      radial-gradient(ellipse 16% 12% at 82% 70%, #fff0d921, transparent 82%);
  }
  .hero .hero-reflection {
    background:
      radial-gradient(ellipse 16% 17% at var(--hero-glow-x, 28%) 84%, #e7f7ff36, #a0d9ef1c 42%, transparent 80%),
      radial-gradient(ellipse 23% 7% at 70% 75%, #fff0d929, #d6bef618 45%, transparent 80%);
  }
  .hero .hero-exposure { width: 130%; height: 65%; inset: auto auto -38% -44%; opacity: .3; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .hero-optics i,
  .hero > .glass-shell.glass-quiet .glass-prism::before,
  .hero > .glass-shell.glass-quiet .glass-prism::after { animation: none !important; }
  .hero > .glass-shell.glass-quiet .glass-prism { opacity: .28; }
  .hero .hero-leak { opacity: .16; transform: none; }
  .hero .hero-reflection { opacity: .16; }
  .hero .hero-exposure { opacity: .2; transform: rotate(-15deg); }
}
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .hero .hero-exposure { display: none; }
}