/* The photograph and its decorative mesh move together; outer layout stays fixed. */
.hero-portrait-motion { position:absolute; inset:0; transform-origin:52% 40%; animation:hero-portrait-breathe 12s ease-in-out infinite; }
.hero-portrait-motion>img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.scan-portrait.has-hero-video { width:min(100%,510px); height:auto; aspect-ratio:1; justify-self:end; }
.scan-portrait.has-hero-video::after { content:none; }
.hero-analysis-video { display:block; width:100%; height:100%; object-fit:contain; }
@media(min-width:1300px) { .scan-portrait.has-hero-video { width:min(100%,560px); } }
@media(max-width:1100px) { .scan-portrait.has-hero-video { width:min(100%,470px); } }
@media(max-width:700px) { .scan-portrait.has-hero-video { width:100%; justify-self:stretch; } }
.hero-face-scan { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.hero-face-mesh { opacity:0; animation:hero-face-mesh 12s ease-in-out infinite; }
.hero-face-sweep { opacity:0; animation:hero-face-sweep 12s linear infinite; }
.hero-face-landmarks { opacity:0; animation:hero-face-landmarks 12s ease-in-out infinite; }
.hero-portrait-motion .hero-skin-zones { animation:hero-zone-fade 12s ease-in-out infinite; }
.hero-animation-toggle { position:absolute; right:16px; bottom:16px; z-index:5; display:grid; place-items:center; width:36px; height:36px; padding:0; border:1px solid #fff9; border-radius:50%; background:#fffdf3b8; color:#766451; cursor:pointer; backdrop-filter:blur(8px); }
.hero-animation-toggle:hover { background:#fffdf3ed; }
.hero-animation-toggle:focus-visible { outline:2px solid #b4512e; outline-offset:3px; }
.hero-animation-toggle svg { width:14px; height:14px; }
.hero-animation-toggle .hero-play-icon { display:none; }
.scan-portrait.is-scan-paused .hero-pause-icon { display:none; }
.scan-portrait.is-scan-paused .hero-play-icon { display:block; }
.scan-portrait.is-scan-paused .hero-portrait-motion,.scan-portrait.is-scan-paused .hero-face-mesh,.scan-portrait.is-scan-paused .hero-face-sweep,.scan-portrait.is-scan-paused .hero-face-landmarks,.scan-portrait.is-scan-paused .hero-skin-zones,.scan-portrait.is-scan-offscreen .hero-portrait-motion,.scan-portrait.is-scan-offscreen .hero-face-mesh,.scan-portrait.is-scan-offscreen .hero-face-sweep,.scan-portrait.is-scan-offscreen .hero-face-landmarks,.scan-portrait.is-scan-offscreen .hero-skin-zones { animation-play-state:paused; }
@keyframes hero-portrait-breathe { 0%,100% { transform:scale(1.012) translate(0,0); } 45% { transform:scale(1.035) translate(.45%,.15%); } 75% { transform:scale(1.026) translate(.15%,.05%); } }
@keyframes hero-face-mesh { 0%,22%,94%,100% { opacity:0; } 34% { opacity:.5; } 46%,70% { opacity:.67; } 82% { opacity:.35; } }
@keyframes hero-face-sweep { 0%,25% { opacity:0; transform:translateY(25px); } 29% { opacity:.95; } 70% { opacity:.95; transform:translateY(740px); } 75%,100% { opacity:0; transform:translateY(760px); } }
@keyframes hero-face-landmarks { 0%,34%,90%,100% { opacity:0; } 44%,72% { opacity:.9; } }
@keyframes hero-zone-fade { 0%,18%,93%,100% { opacity:1; } 30%,78% { opacity:.12; } }
@media(prefers-reduced-motion:reduce) {
  .hero-portrait-motion,.hero-face-mesh,.hero-face-sweep,.hero-face-landmarks,.hero-portrait-motion .hero-skin-zones { animation:none!important; }
  .hero-portrait-motion { transform:none; }
  .hero-face-mesh,.hero-face-sweep,.hero-face-landmarks { opacity:0; }
  .hero-animation-toggle { display:none; }
}