/**
 * Motion and depth layer
 * ======================
 * Loaded after sections.css. Progressive: without JavaScript every element is
 * visible at rest; with prefers-reduced-motion nothing moves. All colours and
 * radii come from theme tokens, so all themes get the same treatment.
 */

/* --- Header: shadow and glass once scrolled; on phones the utility strip scrolls
       away and the brand row stays stuck (the bottom action bar takes over) --- */
.header {
    transition: box-shadow 0.3s ease;
}
.header.is-scrolled {
    box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.35);
}
@media (min-width: 768px) {
    .header.is-scrolled .site-nav,
    .header.is-scrolled .secondary-nav {
        backdrop-filter: blur(14px) saturate(1.4);
        -webkit-backdrop-filter: blur(14px) saturate(1.4);
    }
    .header.is-scrolled .site-nav {
        background: color-mix(in srgb, var(--color-surface-card) 84%, transparent);
    }
    .header.is-scrolled .secondary-nav {
        background: color-mix(in srgb, var(--color-surface-warm) 93%, transparent);
    }
}
@media (max-width: 767.98px) {
    html.has-js .header {
        top: calc(var(--strip-h, 0px) * -1);
    }
}

/* --- Hero entrance: headline, copy, buttons and the form card rise in once --- */
@media (prefers-reduced-motion: no-preference) {
    html.has-js .hero-content > *,
    html.has-js .hero-form-content > *,
    html.has-js .hero-split-content > * {
        animation: rise-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }
    html.has-js .hero-content > :nth-child(2),
    html.has-js .hero-form-content > :nth-child(2),
    html.has-js .hero-split-content > :nth-child(2) { animation-delay: 0.08s; }
    html.has-js .hero-content > :nth-child(3),
    html.has-js .hero-form-content > :nth-child(3),
    html.has-js .hero-split-content > :nth-child(3) { animation-delay: 0.16s; }
    html.has-js .hero-content > :nth-child(n+4),
    html.has-js .hero-split-content > :nth-child(n+4) { animation-delay: 0.24s; }
    html.has-js .hero-form-box,
    html.has-js .hero-split-media {
        animation: rise-in 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both;
    }
    @keyframes rise-in {
        from { opacity: 0; transform: translateY(14px); }
        to   { opacity: 1; transform: none; }
    }

    /* Hero haze drifts very slowly */
    .section.section-hero.section-dark:not(.section-hero-video)::after {
        background-size: 160% 160%, 160% 160%;
        background-position: 0% 0%, 100% 100%;
        animation: haze-drift 28s ease-in-out infinite alternate;
    }
    @keyframes haze-drift {
        to { background-position: 35% 25%, 65% 75%; }
    }
}

/* --- Capture forms: glow deepens while someone is filling them in --- */
.hero-form-box--card,
.hero-form-box--transparent,
.section-form--card .form-embed,
.form-card {
    transition: box-shadow 0.45s ease, transform 0.45s ease;
}
.hero-form-box--card:focus-within,
.hero-form-box--transparent:focus-within {
    box-shadow: var(--shadow-xl), 0 0 0 1px var(--color-outline-dark), 0 0 80px color-mix(in srgb, var(--glow-2) 48%, transparent);
    transform: translateY(-2px);
}
.section-form--card .form-embed:focus-within,
.form-card:focus-within {
    box-shadow: var(--shadow-xl), 0 0 48px color-mix(in srgb, var(--glow-2) 22%, transparent);
    transform: translateY(-2px);
}

/* --- Scroll reveals: only elements the script marks, only once JS is running.
       Uses the translate property so it never fights a transform (e.g. the
       featured pricing card's scale). --- */
html.has-js [data-reveal] {
    opacity: 0;
    translate: 0 18px;
    transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), translate 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: var(--reveal-delay, 0ms);
}
html.has-js .feature-row[data-reveal]          { translate: -28px 0; }
html.has-js .feature-row.reversed[data-reveal] { translate: 28px 0; }
html.has-js [data-reveal].is-visible {
    opacity: 1;
    translate: 0 0;
}

/* --- Hover lift (pointer devices only) --- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .service-tile,
    .testimonial-item,
    .pricing-card,
    .image-grid-item {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .service-tile:hover {
        position: relative;
        z-index: 1;
        transform: translateY(-4px);
        box-shadow: var(--shadow-xl);
    }
    .testimonial-item:hover,
    .pricing-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-lg);
    }
    .pricing-card--featured:hover {
        transform: scale(1.05) translateY(-3px);
    }
    .benefit-icon,
    .icon-list-icon {
        transition: transform 0.3s ease;
    }
    .benefit-item:hover .benefit-icon,
    .icon-list-item:hover .icon-list-icon {
        transform: translateY(-3px) scale(1.04);
    }
    .image-grid-item { overflow: hidden; }
    .image-grid-item img { transition: transform 0.5s ease; }
    .image-grid-item:hover img { transform: scale(1.03); }
}

/* --- Sticky call / enquire bar on phones --- */
.mobile-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    display: none;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem calc(0.625rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--color-surface-card) 92%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--color-outline);
    transform: translateY(110%);
    transition: transform 0.35s ease;
}
.mobile-bar.is-shown {
    transform: none;
}
.mobile-bar .btn {
    min-width: 0;
    justify-content: center;
    min-height: 3rem;
    font-size: 0.9375rem;
    white-space: nowrap;
    padding-left: 0.875rem;
    padding-right: 0.875rem;
}
.mobile-bar .btn svg {
    width: 1.125rem;
    height: 1.125rem;
}
.mobile-bar__call { flex: 0 0 auto; }
.mobile-bar__cta  { flex: 1 1 0; }
@media (max-width: 767.98px) {
    .mobile-bar { display: flex; }
    body.has-mobile-bar { padding-bottom: 4.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    html.has-js [data-reveal] { opacity: 1; translate: 0 0; transition: none; }
    .hero-form-box--card:focus-within,
    .hero-form-box--transparent:focus-within,
    .section-form--card .form-embed:focus-within,
    .form-card:focus-within { transform: none; }
    .mobile-bar { transition: none; }
    .header { transition: none; }
}