/**
 * Cinematic UI utilities: glow, ripple, glass, focus rings (RTL-safe).
 */
[data-site-navbar] {
    transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

[data-site-navbar].site-navbar--scrolled {
    background-color: rgba(255, 255, 255, 0.98);
    border-color: rgb(226 232 240);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.brand-hero--video-off video {
    display: none;
}

.brand-hero-gallery-slide {
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 1.1s ease-in-out, transform 8s ease-out;
    pointer-events: none;
}

.brand-hero-gallery-slide--active {
    opacity: 1;
    transform: scale(1);
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .brand-hero-gallery-slide,
    .brand-hero-gallery-slide--active {
        transition: none;
        transform: none;
    }

    .brand-hero-gallery-slide:not(.brand-hero-gallery-slide--active) {
        opacity: 0;
    }

    .brand-hero-gallery-slide--active {
        opacity: 1;
    }
}

:root {
    --cinematic-accent-glow: rgba(34, 211, 238, 0.35);
    --cinematic-btn-shadow: 0 8px 32px rgba(8, 47, 73, 0.45);
}

.btn-cinematic-glow {
    box-shadow: var(--cinematic-btn-shadow), 0 0 0 1px rgba(34, 211, 238, 0.15);
    transition: box-shadow 0.25s ease, transform 0.2s ease;
}

.btn-cinematic-glow:hover {
    box-shadow: var(--cinematic-btn-shadow), 0 0 28px var(--cinematic-accent-glow);
}

.btn-cinematic-glow:active {
    transform: translateY(1px);
}

.btn-cinematic-ripple {
    position: relative;
    overflow: hidden;
}

.icon-cinematic-chip {
    position: relative;
    isolation: isolate;
    transition: transform 0.22s ease, box-shadow 0.24s ease, filter 0.24s ease;
}

.icon-cinematic-chip::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0));
    pointer-events: none;
    opacity: 0.85;
    z-index: 0;
}

.icon-cinematic-chip > svg,
.icon-cinematic-chip > span {
    position: relative;
    z-index: 1;
}

.icon-cinematic-chip:hover {
    transform: translateY(-1px) scale(1.06);
    filter: saturate(1.08);
}

.icon-cinematic-chip:active {
    transform: translateY(0) scale(0.97);
}

.icon-cinematic-chip--wa {
    box-shadow: 0 10px 24px -10px rgba(16, 185, 129, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.35) inset;
}

.icon-cinematic-chip--wa:hover {
    box-shadow: 0 14px 30px -12px rgba(16, 185, 129, 0.72), 0 0 0 1px rgba(255, 255, 255, 0.4) inset;
}

.icon-cinematic-chip--call {
    box-shadow: 0 10px 24px -10px rgba(239, 68, 68, 0.62), 0 0 0 1px rgba(255, 255, 255, 0.35) inset;
}

.icon-cinematic-chip--call:hover {
    box-shadow: 0 14px 30px -12px rgba(239, 68, 68, 0.72), 0 0 0 1px rgba(255, 255, 255, 0.4) inset;
}

.icon-cinematic-chip--cta {
    box-shadow: 0 10px 24px -10px rgba(8, 47, 73, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.3) inset;
}

.icon-cinematic-chip--cta:hover {
    box-shadow: 0 14px 32px -12px rgba(8, 47, 73, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.35) inset;
}

.btn-cinematic-ripple .cinematic-ripple-circle {
    position: absolute;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.35);
    transform: scale(0);
    animation: cinematic-ripple-expand 0.55s ease-out forwards;
    pointer-events: none;
}

@keyframes cinematic-ripple-expand {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

.glass-panel-cinematic {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgb(226 232 240);
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
}

.text-mask-reveal {
    clip-path: inset(0 100% 0 0);
}

.text-mask-reveal.is-visible {
    clip-path: inset(0 0 0 0);
    transition: clip-path 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
    .btn-cinematic-glow,
    .btn-cinematic-glow:hover,
    .btn-cinematic-glow:active {
        transition: none;
        transform: none;
    }

    .text-mask-reveal.is-visible {
        clip-path: inset(0 0 0 0);
        transition: none;
    }

    .btn-cinematic-ripple .cinematic-ripple-circle {
        animation: none;
        opacity: 0;
    }

    .icon-cinematic-chip,
    .icon-cinematic-chip:hover,
    .icon-cinematic-chip:active {
        transition: none;
        transform: none;
        filter: none;
    }
}

/* Form focus — cinematic accent */
input.cinematic-input:focus,
textarea.cinematic-input:focus,
select.cinematic-input:focus {
    outline: none;
    border-color: rgb(34 211 238 / 0.65);
    box-shadow: 0 0 0 3px rgb(34 211 238 / 0.18);
}

.form-success-pulse {
    animation: cinematic-success-flash 0.65s ease-out;
}

@keyframes cinematic-success-flash {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.55);
    }
    100% {
        box-shadow: 0 0 0 16px rgba(34, 211, 238, 0);
    }
}

.contact-fab__toggle {
    transition: transform 0.22s ease, box-shadow 0.28s ease;
}

.contact-fab.is-open .contact-fab__toggle {
    transform: rotate(45deg) scale(1.04);
    box-shadow: 0 14px 34px rgba(34, 211, 238, 0.28);
}

.contact-fab[data-contact-boost="1"] .contact-fab__toggle {
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.25), 0 14px 34px rgba(8, 47, 73, 0.28);
}

.contact-fab__panel {
    transform-origin: bottom left;
    animation: contact-fab-expand 220ms ease-out;
}

.contact-fab__item {
    transition: transform 0.2s ease, filter 0.2s ease;
}

.contact-fab__item:hover {
    transform: translateY(-1px) scale(1.02);
    filter: saturate(1.08);
}

.contact-fab-pulse {
    animation: contact-fab-pulse 860ms ease-out;
}

@keyframes contact-fab-expand {
    from {
        opacity: 0;
        transform: translateY(6px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes contact-fab-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.35);
    }
    100% {
        box-shadow: 0 0 0 16px rgba(16, 185, 129, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .form-success-pulse {
        animation: none;
    }
}