/* The original photo stays intact; only the alternate 3D layer is revealed. */
.portrait-frame{--magic-x:50%;--magic-y:35%;--magic-light:0;--magic-reveal:0;--magic-radius:0px;--magic-rx:0deg;--magic-ry:0deg;isolation:isolate}
.portrait-scene{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
.portrait-scene>.hero-image,.portrait-scene>.portrait-cartoon{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;pointer-events:none;user-select:none}
.portrait-cartoon{opacity:var(--magic-reveal);mask-image:radial-gradient(ellipse var(--magic-radius) calc(var(--magic-radius)*1.2) at var(--magic-x) var(--magic-y),#000 62%,transparent 100%)}
.portrait-frame.is-magic-ready{transform:perspective(1100px) rotate(3deg) rotateX(var(--magic-rx)) rotateY(var(--magic-ry))}
.portrait-frame.is-magic-active{will-change:transform}
.portrait-light{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:var(--magic-light);background:radial-gradient(ellipse 55% 70% at var(--magic-x) var(--magic-y),transparent 48%,#fff4da12 65%,#fff6e42b 76%,transparent 90%);mix-blend-mode:screen}
.portrait-magic-trigger{position:absolute;inset:0;width:100%;height:100%;padding:0;z-index:3;cursor:crosshair;border-radius:inherit;background:transparent}
.portrait-magic-trigger:focus-visible{outline:2px solid #a1486d;outline-offset:-7px}
.portrait-magic-label{position:absolute;bottom:18px;left:20px;display:flex;gap:8px;align-items:center;white-space:nowrap;padding:10px 15px;border:1px solid #fffb;border-radius:99px;background:#fffaf3eb;color:#8e4d68;box-shadow:0 3px 12px #70405813;font-size:10px;line-height:1.4;font-weight:600;transition:opacity .25s;pointer-events:none}
.portrait-magic-label .icon{width:15px;height:15px;color:#b78c65}
.is-magic-playing .portrait-magic-label{opacity:0}
@media(max-width:1023px),(hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){
 .portrait-magic-trigger,.portrait-light,.portrait-cartoon{display:none!important}
 .portrait-frame.is-magic-ready{transform:rotate(3deg)}
 .portrait-frame{will-change:auto!important}
}