/**
 * Motion & glass UI layer — additive only. Loaded after styles.css.
 * Uses brand tokens from the main stylesheet (:root).
 */

/* --- Global smooth feel (non-layout) --- */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body:not(.admin-body) {
    transition: background 0.45s ease;
}

/* --- Glass navigation bar --- */
body:not(.admin-body) .top-nav {
    background: linear-gradient(
        105deg,
        color-mix(in srgb, var(--color-dark-blue) 88%, transparent) 0%,
        color-mix(in srgb, var(--color-navy-blue) 82%, transparent) 100%
    );
    -webkit-backdrop-filter: blur(14px) saturate(1.35);
    backdrop-filter: blur(14px) saturate(1.35);
    border-bottom: 1px solid color-mix(in srgb, var(--brand-secondary) 35%, transparent);
    box-shadow:
        0 4px 24px rgba(0, 40, 36, 0.25),
        inset 0 1px 0 color-mix(in srgb, var(--color-white) 12%, transparent);
}

body:not(.admin-body) .dropdown-content {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    background: color-mix(in srgb, var(--color-navy-blue) 94%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand-secondary) 22%, transparent);
    box-shadow: 0 16px 40px rgba(0, 30, 28, 0.35);
}

/* --- Main shell: soft animated gradient mesh (background only) --- */
body:not(.admin-body) .page-shell {
    position: relative;
}

body:not(.admin-body) .page-shell::before {
    content: "";
    pointer-events: none;
    position: fixed;
    inset: -20% -10% auto -10%;
    height: 55vh;
    z-index: -1;
    background:
        radial-gradient(ellipse 80% 60% at 15% 0%, color-mix(in srgb, var(--brand-secondary) 28%, transparent), transparent 55%),
        radial-gradient(ellipse 70% 50% at 85% 10%, color-mix(in srgb, var(--brand-accent) 18%, transparent), transparent 50%);
    opacity: 0.9;
    animation: motion-ui-mesh 18s ease-in-out infinite alternate;
}

@keyframes motion-ui-mesh {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.75;
    }
    100% {
        transform: translate3d(2%, 1%, 0) scale(1.05);
        opacity: 1;
    }
}

/* --- Glass cards & panels --- */
body:not(.admin-body) .content-box,
body:not(.admin-body) .standee-highlights,
body:not(.admin-body) .header-top {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-color: color-mix(in srgb, var(--brand-secondary) 25%, rgba(200, 220, 215, 0.85));
    box-shadow:
        0 20px 50px rgba(0, 60, 54, 0.1),
        inset 0 1px 0 color-mix(in srgb, var(--color-white) 65%, transparent);
    transition:
        box-shadow 0.35s ease,
        border-color 0.35s ease,
        transform 0.35s ease;
}

body:not(.admin-body) .content-box:hover,
body:not(.admin-body) .standee-highlights:hover {
    border-color: color-mix(in srgb, var(--brand-secondary) 35%, var(--palette-mist) 65%);
    box-shadow:
        0 24px 56px rgba(0, 80, 72, 0.14),
        inset 0 1px 0 color-mix(in srgb, var(--color-white) 80%, transparent);
}

body:not(.admin-body) .standee-card,
body:not(.admin-body) .standee-content-card,
body:not(.admin-body) .product-card,
body:not(.admin-body) .contact-item,
body:not(.admin-body) .contact-details {
    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.35s ease,
        border-color 0.3s ease;
}

body:not(.admin-body) .standee-card:hover,
body:not(.admin-body) .standee-content-card:hover {
    border-color: color-mix(in srgb, var(--brand-secondary) 28%, var(--palette-mist) 72%);
    box-shadow:
        0 20px 40px rgba(0, 90, 82, 0.12),
        0 0 0 1px color-mix(in srgb, var(--brand-secondary) 35%, transparent);
}

body:not(.admin-body) .benefit-pill {
    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        background 0.28s ease;
}

body:not(.admin-body) .benefit-pill:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 20px rgba(0, 70, 64, 0.12);
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--brand-accent-soft) 55%, white),
        white
    );
}

/* --- Nav links: underline glow --- */
body:not(.admin-body) .nav-link {
    overflow: hidden;
}

body:not(.admin-body) .nav-link::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 6px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--brand-secondary), var(--brand-accent), transparent);
    transform: scaleX(0);
    transform-origin: center;
    opacity: 0;
    transition: transform 0.35s ease, opacity 0.35s ease;
}

body:not(.admin-body) .nav-link:hover::after,
body:not(.admin-body) .nav-link.active::after {
    transform: scaleX(1);
    opacity: 0.95;
}

/* --- Buttons: shimmer + press --- */
body:not(.admin-body) .btn {
    position: relative;
    overflow: hidden;
    transition:
        transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.25s ease,
        filter 0.25s ease;
}

body:not(.admin-body) .btn::before {
    content: "";
    position: absolute;
    inset: 0;
    left: -40%;
    background: linear-gradient(
        105deg,
        transparent 0%,
        color-mix(in srgb, white 45%, transparent) 45%,
        transparent 80%
    );
    transform: skewX(-18deg) translateX(-120%);
    transition: transform 0.55s ease;
    pointer-events: none;
}

body:not(.admin-body) .btn:hover::before {
    transform: skewX(-18deg) translateX(220%);
}

body:not(.admin-body) .btn.motion-pressed {
    transform: scale(0.96);
    filter: brightness(1.08);
}

body:not(.admin-body) .admin-btn {
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.25s ease;
}

body:not(.admin-body) .admin-btn.motion-pressed {
    transform: scale(0.95);
}

body:not(.admin-body) .slider-btn {
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

body:not(.admin-body) .slider-btn.motion-pressed {
    transform: scale(0.92);
}

/* --- Hero: gentle inner glow pulse --- */
body:not(.admin-body) .hero-slider {
    transition: box-shadow 0.4s ease;
}

body:not(.admin-body) .hero-slider:hover {
    box-shadow:
        0 20px 50px rgba(0, 60, 54, 0.2),
        0 0 0 1px color-mix(in srgb, var(--brand-secondary) 30%, transparent),
        0 0 48px color-mix(in srgb, var(--brand-secondary) 22%, transparent);
}

/* --- WhatsApp FAB --- */
body:not(.admin-body) .whatsapp-link {
    transition:
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.35s ease,
        filter 0.3s ease;
}

body:not(.admin-body) .whatsapp-link:hover {
    transform: scale(1.08) translateY(-3px);
    box-shadow:
        0 12px 28px rgba(37, 211, 102, 0.45),
        0 0 0 4px color-mix(in srgb, #25d366 25%, transparent);
    filter: saturate(1.15);
}

body:not(.admin-body) .whatsapp-link.motion-pressed {
    transform: scale(0.94);
}

/* --- Footer polish --- */
body:not(.admin-body) .site-footer__links a {
    transition: transform 0.25s ease, color 0.25s ease;
}

body:not(.admin-body) .site-footer__links a:hover {
    transform: translateX(4px);
}

body[dir="rtl"]:not(.admin-body) .site-footer__links a:hover {
    transform: translateX(-4px);
}

/* --- Scroll reveal --- */
body:not(.admin-body) .motion-reveal {
    transition:
        opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--motion-delay, 0ms);
}

body:not(.admin-body) .motion-reveal:not(.motion-reveal--inview) {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
}

body:not(.admin-body) .motion-reveal.motion-reveal--inview {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
    body:not(.admin-body) .page-shell::before {
        animation: none;
    }

    body:not(.admin-body) .motion-reveal,
    body:not(.admin-body) .motion-reveal:not(.motion-reveal--inview) {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    body:not(.admin-body) .btn::before {
        display: none;
    }
}