/* Scoped to photographs: the layer cannot spill onto Office text or footer. */
[data-office-bubbles] .office-pop{isolation:isolate}
.office-soap-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2}
.office-soap-bubble{position:absolute;box-sizing:border-box;width:var(--soap-size,48px);height:var(--soap-size,48px);min-width:0;min-height:0;padding:0;border:1px solid #e6fbffcc;border-radius:50%;pointer-events:auto;touch-action:manipulation;cursor:pointer;background:radial-gradient(ellipse at 29% 23%,#ffffffed 0 4%,#ffffff30 9%,transparent 26%),radial-gradient(circle at 67% 77%,#eaa7d52b,transparent 60%),radial-gradient(circle at 22% 70%,#7ad9de38,transparent 62%);box-shadow:inset 2px 2px 5px #ffffffa6,inset -2px -2px 5px #8dd9e675,0 1px 5px #182b3020;animation:office-soap-float var(--soap-duration,8s) ease-in-out var(--soap-delay,0s) infinite;animation-play-state:paused;transition:opacity .24s,scale .24s,filter .24s;-webkit-tap-highlight-color:transparent}
.office-soap-bubble::after{content:'';position:absolute;inset:12%;border-radius:50%;border-top:2px solid #ffffffcf;border-left:1px solid #ffffff75;transform:rotate(-28deg);pointer-events:none}
.soap-visible .office-soap-bubble{animation-play-state:running}
.office-soap-bubble.is-popped{opacity:0;scale:1.35;filter:blur(3px);pointer-events:none}
.office-soap-bubble:focus-visible{outline:2px solid #fff;outline-offset:3px;box-shadow:0 0 0 5px #263f46}
.soap-paused .office-soap-bubble{animation-play-state:paused}
.soap-reduced-motion .office-soap-bubble{animation:none;transition:opacity .12s}
@keyframes office-soap-float{0%,100%{transform:translate(-7px,9px)}35%{transform:translate(8px,-14px)}70%{transform:translate(-5px,-4px)}}
@media(max-width:700px){.office-soap-bubble{width:clamp(32px,var(--soap-size),50px);height:clamp(32px,var(--soap-size),50px)}}
@media(prefers-reduced-motion:reduce){.office-soap-bubble{animation:none;transition:opacity .12s}}