@layer core.organisms{.phxsg-focus{--_comp-focus-point-size: var(--comp-focus-point-size, var(--sys-spacing-3));--_comp-focus-point-color: var(--comp-focus-point-color, var(--sys-color-foreground));--_comp-focus-point-safe-area: var(--comp-focus-point-safe-area, var(--sys-spacing-2));--_comp-focus-point-radius: var(--comp-focus-point-radius, 50%);--_comp-focus-point-pulse-color: var(--comp-focus-point-pulse-color, var(--_comp-focus-point-color));--_comp-focus-point-pulse-scale: var(--comp-focus-point-pulse-scale, 3);--_comp-focus-point-pulse-duration: var(--comp-focus-point-pulse-duration, 1.75s);--_comp-focus-point-hover-scale: var(--comp-focus-point-hover-scale, 1.3);overflow:hidden;position:relative}.phxsg-focus__background{width:100%;height:100%;position:relative}.phxsg-focus__background-image{width:100%;cursor:default}.phxsg-focus__point{width:var(--_comp-focus-point-size);height:var(--_comp-focus-point-size);padding:var(--_comp-focus-point-safe-area);box-sizing:content-box;position:absolute;inset-block-start:var(--phxsg-focus-point-y, 0);inset-inline-start:var(--phxsg-focus-point-x, 0);border-radius:var(--_comp-focus-point-radius);translate:-50% -50%;line-height:0;&:before{content:"";width:var(--_comp-focus-point-size);height:var(--_comp-focus-point-size);position:absolute;z-index:1;background-color:var(--_comp-focus-point-color);border-radius:inherit;transition:scale var(--sys-motion-duration-short-2) var(--sys-motion-easing-standard);pointer-events:none}&.phxsg-focus__point--animate:before{animation-name:phxsg-focus-pulse-point;animation-duration:var(--_comp-focus-point-pulse-duration);animation-timing-function:var(--sys-motion-easing-standard);animation-iteration-count:infinite}&.phxsg-focus__point--interacting:before{animation:none;scale:1}&.phxsg-focus__point--scaled:before{scale:var(--_comp-focus-point-hover-scale)}&.phxsg-focus__point--paused{.phxsg-focus__pulse:before,.phxsg-focus__pulse:after{animation:none;opacity:0;scale:var(--_comp-focus-point-pulse-scale)}}}.phxsg-focus__pulse{width:var(--_comp-focus-point-size);height:var(--_comp-focus-point-size);position:absolute;z-index:0;border-radius:var(--_comp-focus-point-radius);&:before,&:after{content:"";width:100%;height:100%;position:absolute;inset:0;z-index:1;background-color:var(--_comp-focus-point-pulse-color);border-radius:inherit;opacity:0;animation-duration:var(--_comp-focus-point-pulse-duration);animation-timing-function:var(--sys-motion-easing-standard);animation-iteration-count:infinite;pointer-events:none}&:before{opacity:.6;animation-name:phxsg-focus-first-pulse}&:after{opacity:.3;animation-name:phxsg-focus-second-pulse;animation-delay:var(--sys-motion-duration-medium-2)}}@keyframes phxsg-focus-first-pulse{75%,to{scale:var(--_comp-focus-point-pulse-scale);opacity:0}}@keyframes phxsg-focus-second-pulse{60%,to{scale:var(--_comp-focus-point-pulse-scale);opacity:0}}@keyframes phxsg-focus-pulse-point{10%{scale:1.2}50%{scale:1}}}