.ai-face-transform{position:relative;z-index:2;width:clamp(180px,min(27vw,28vh),340px);height:auto;aspect-ratio:1/2;margin:auto;overflow:hidden;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;filter:drop-shadow(0 28px 28px #00000024)}
.ai-face-state{position:absolute;inset:0;background-image:url('../face-treatment-sprite-v1.png');background-repeat:no-repeat;background-size:200% 100%;background-color:transparent}.ai-face-state.before{background-position:left top}.ai-face-state.after{background-position:right top}.ai-face-after-reveal{position:absolute;z-index:2;inset:0;overflow:hidden;clip-path:inset(0 0 100% 0);animation:faceReveal 7s cubic-bezier(.65,0,.35,1) infinite}.ai-face-after-reveal .ai-face-state{inset:0}.ai-treatment-scan{position:absolute;z-index:4;top:0;left:4%;right:4%;height:2px;background:linear-gradient(90deg,transparent,var(--tenant-accent,#c9a56b) 18%,#fff 50%,var(--tenant-accent,#c9a56b) 82%,transparent);box-shadow:0 0 18px #fff,0 0 30px var(--tenant-accent,#c9a56b);animation:faceScan 7s cubic-bezier(.65,0,.35,1) infinite}.ai-treatment-scan:before{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(0deg,color-mix(in srgb,var(--tenant-accent,#c9a56b),transparent 78%),transparent);pointer-events:none}.ai-treatment-scan i{position:absolute;left:50%;top:-12px;width:25px;height:25px;border:1px solid #fff;border-radius:50%;transform:translateX(-50%);box-shadow:0 0 0 5px color-mix(in srgb,var(--tenant-accent,#c9a56b),transparent 60%)}
.ai-state-label{position:absolute;z-index:6;bottom:14px;padding:7px 11px;border:1px solid #ffffff45;border-radius:999px;background:#102820d9;color:#fff;font:700 9px Alexandria,Tajawal,sans-serif;white-space:nowrap;backdrop-filter:blur(10px)}.before-label{right:8px;animation:beforeLabel 7s infinite}.after-label{left:8px;background:color-mix(in srgb,var(--tenant-accent,#c9a56b),#111 24%);animation:afterLabel 7s infinite}
.preview-face-transform{--face-height:430px;width:180px;max-width:72%;filter:drop-shadow(0 14px 17px #0003)}.preview-face-transform .ai-state-label{bottom:6px;padding:4px 7px;font-size:6px}.preview-face-transform .ai-treatment-scan i{width:16px;height:16px;top:-7px}.preview-face-transform .ai-treatment-scan:before{height:35px}
@keyframes faceReveal{0%,8%,100%{clip-path:inset(0 0 100% 0)}48%,60%{clip-path:inset(0 0 0 0)}92%{clip-path:inset(0 0 100% 0)}}@keyframes faceScan{0%,8%,100%{top:2%}48%,60%{top:98%}92%{top:2%}}@keyframes beforeLabel{0%,16%,90%,100%{opacity:1;transform:translateY(0)}45%,68%{opacity:0;transform:translateY(5px)}}@keyframes afterLabel{0%,16%,90%,100%{opacity:0;transform:translateY(5px)}45%,68%{opacity:1;transform:translateY(0)}}
@media(max-width:760px){.ai-face-transform{width:clamp(165px,min(58vw,25vh),250px)}.preview-face-transform{width:190px}}
/* Keep informational cards away from the before/after labels. */
.hero-art>.floating-card{top:28px;bottom:auto;right:0}.preview-portrait>.doctor-chip{top:8px;bottom:auto;right:0;left:auto}.preview-portrait{isolation:isolate}
@media(max-width:760px){.hero-art>.floating-card{top:8px;right:8px;max-width:180px}.ai-state-label{bottom:8px;font-size:8px}}
@media(prefers-reduced-motion:reduce){.ai-face-after-reveal{clip-path:inset(0 0 50% 0);animation:none}.ai-treatment-scan{top:50%;animation:none}.ai-state-label{animation:none}.before-label{opacity:1}.after-label{opacity:0}}