/* Decorative dot field, original CSS interpretation of the supplied still reference. */
:root{--ambient-dot:#5594ff;--ambient-opacity:.28}
body{isolation:isolate}
.ambient-field{position:fixed;inset:0;overflow:clip;z-index:-1;pointer-events:none;contain:strict}
.ambient-field span{position:absolute;inset:-40px;background-image:radial-gradient(circle,var(--ambient-dot) 1.2px,transparent 1.7px);background-size:20px 20px;opacity:var(--ambient-opacity);mask-image:radial-gradient(ellipse at 26% 42%,black,transparent 64%)} /* taste-skill-ignore: dot primitives and opacity masks implement the owner-supplied reference. */
.ambient-field span+span{background-size:32px 32px;opacity:.18;mask-image:radial-gradient(ellipse at 82% 65%,black,transparent 55%)} /* taste-skill-ignore: dot primitives and opacity masks implement the owner-supplied reference. */
.motion-preference{max-width:var(--w-grid);margin:20px auto 0}
.motion-preference button{font:inherit;font-size:14px;min-height:44px;padding:8px 0;border:0;background:transparent;color:var(--muted);text-decoration:underline;text-underline-offset:4px}
.motion-preference button:hover{color:var(--accent)}
.ambient-field canvas{position:absolute;inset:0;width:100%;height:100%}
.ambient-field.has-waves span{visibility:hidden}
@media(prefers-reduced-motion:reduce){
 .ambient-field.has-waves span{visibility:visible;opacity:.2}
 .ambient-field canvas{display:none}
}

/* One continuous wave field across studio pages; controls retain their surfaces. */
#main,#main>section,.footer,.footer .f-last{background:transparent}
.footer .f-last{padding-inline:0;border-radius:0}

/* Blend the header into the waves; keep scrolling content behind a readable surface. */
.site-header{background:transparent;border:0}
.site-header.is-scrolled{background:rgb(11 14 20 / 32%);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);box-shadow:inset 0 -1px rgb(145 185 255 / 12%)} /* Owner-requested translucent glass navigation. */

/* Keep the full price accessible while its visual copy counts up. */
[data-price] .price-final{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
[data-price] .price-visual{font:inherit;color:inherit;letter-spacing:inherit;font-variant-numeric:tabular-nums}
