/* The button surface is the navigation's existing header-glass-layer. */
.glass-action.matte-transparent {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    min-width: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: #0071e3;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.glass-action[data-glass-theme="dark"] {
    --glass-reflex-dark: 2;
    --glass-reflex-light: .3;
}
.glass-action > .glass-action-content {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: inherit;
    min-width: 0;
    white-space: normal;
}
.glass-action:focus-visible { outline: 2px solid #0071e3; outline-offset: 5px; }
.cta-button.glass-action { overflow: visible; }
.about-contact-button.glass-action { overflow: visible; }
.glass-action .cta-icon {
    color: #0071e3;
    background: rgba(0, 113, 227, .1);
    border-color: rgba(0, 113, 227, .25);
}
.about-contact-button.glass-action:hover,
.about-story-button.glass-action:hover { transform: none; }
/* Shared navigation glass, also available on pages whose nav draws it
   directly on the header rather than on an internal layer. */
.glass-action > .header-glass-layer,
.site-footer-glass > .header-glass-layer,
.case-caption > .header-glass-layer {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background-color: color-mix(in srgb, var(--c-glass) 12%, transparent);
    backdrop-filter: blur(8px) url(#switcher) saturate(var(--saturation));
    -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
        inset 1.8px 3px 0 -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
        inset -2px -2px 0 -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
        inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
        inset -.3px -1px 4px 0 color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent),
        inset -1.5px 2.5px 0 -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
        inset 0 3px 4px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
        inset 2px -6.5px 1px -4px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
        0 1px 5px 0 color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
        0 6px 16px 0 color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
    transition: background-color .3s ease, box-shadow .3s ease;
}
/* Keep the footage/page available to backdrop-filter after scroll reveals. */
.glass-action.cta-scroll-item,
.glass-action-reveal { will-change: transform; }

/* The same quick water movement, with a smaller deformation on actions.
   The floating language and WhatsApp controls keep their original bounce. */
.water-click-surface {
    --water-start-scale: 1;
    --water-start-y: 0px;
    --water-peak-scale: 1.035 .96;
    --water-return-scale: .99 1.016;
    --water-settle-scale: 1.006 .994;
    --water-peak-y: -.7px;
    --water-return-y: .35px;
    --water-easing: cubic-bezier(.22, .61, .36, 1);
}
.language-switcher.water-click-surface,
.whatsapp-recall-button.water-click-surface {
    --water-peak-scale: 1.12 .86;
    --water-return-scale: .96 1.07;
    --water-settle-scale: 1.025 .98;
    --water-peak-y: -2px;
    --water-return-y: 1px;
    --water-easing: ease;
}
.water-click-surface.is-water-pressed {
    animation: caseBubbleIn 680ms var(--water-easing, ease) both;
}
@keyframes caseBubbleIn {
    0% { translate: 0 var(--water-start-y, 12px); scale: var(--water-start-scale, .45 .65); }
    38% { translate: 0 var(--water-peak-y, -2px); scale: var(--water-peak-scale, 1.12 .86); }
    65% { translate: 0 var(--water-return-y, 1px); scale: var(--water-return-scale, .96 1.07); }
    84% { translate: 0 0; scale: var(--water-settle-scale, 1.025 .98); }
    100% { translate: 0 0; scale: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .water-click-surface.is-water-pressed { animation: none; }
}