/* ================================================================
   SOR PROPERTY SERVICES — PREMIUM MOTION SYSTEM
   Load this stylesheet after the existing global and page CSS files.
   No HTML animation classes are required; site.js assigns them.
   ================================================================ */

:root {
    --motion-duration: 760ms;
    --motion-duration-slow: 1100ms;
    --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --motion-ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
    --motion-accent: var(--color-primary, #ff4040);
}

/* Only hide elements after JavaScript has prepared every motion target.
   This prevents content flashing or disappearing when JavaScript is off. */
html.sor-motion-ready [data-motion] {
    --motion-x: 0px;
    --motion-y: 0px;
    --parallax-y: 0px;
    opacity: 0;
    translate: var(--motion-x) calc(var(--motion-y) + var(--parallax-y));
    scale: var(--motion-scale, 1);
    transition: opacity var(--motion-duration) var(--motion-ease), translate var(--motion-duration) var(--motion-ease), scale var(--motion-duration-slow) var(--motion-ease-soft), clip-path var(--motion-duration-slow) var(--motion-ease-soft);
    transition-delay: var(--motion-delay, 0ms);
    will-change: opacity, translate, scale;
}

html.sor-motion-ready [data-motion="fade-up"] {
    --motion-y: 44px;
}

html.sor-motion-ready [data-motion="fade-down"] {
    --motion-y: -28px;
}

html.sor-motion-ready [data-motion="fade-left"] {
    --motion-x: -58px;
}

html.sor-motion-ready [data-motion="fade-right"] {
    --motion-x: 58px;
}

html.sor-motion-ready [data-motion="zoom-in"] {
    --motion-y: 24px;
    --motion-scale: 0.94;
}

html.sor-motion-ready [data-motion="soft-scale"] {
    --motion-y: 18px;
    --motion-scale: 0.97;
}

html.sor-motion-ready [data-motion].is-visible {
    --motion-x: 0px;
    --motion-y: 0px;
    --motion-scale: 1;
    opacity: var(--motion-final-opacity, 1);
}

/* Hero background: quiet cinematic arrival rather than a distracting zoom. */
html.sor-motion-ready [data-hero-media] {
    animation: sorHeroArrival 1800ms var(--motion-ease-soft) both;
    transform-origin: center center;
    will-change: scale, opacity;
}

@keyframes sorHeroArrival {
    from {
        opacity: 0.72;
        scale: 1.065;
    }

    to {
        opacity: var(--hero-final-opacity, 1);
        scale: 1;
    }
}

/* A restrained animated accent below major headings. */
html.sor-motion-ready [data-premium-heading]::after {
/*    content: "";
*/    position: absolute;
    left: 0;
    bottom: -12px;
    width: 54px;
    height: 3px;
    border-radius: 999px;
    background: var(--motion-accent);
    transform-origin: left center;
    scale: 0 1;
    opacity: 0;
    transition: scale 700ms var(--motion-ease) 180ms, opacity 300ms ease 180ms;
}

html.sor-motion-ready [data-premium-heading].is-visible::after {
    scale: 1 1;
    opacity: 1;
}

/* Do not draw the heading accent on centred hero headings. */
html.sor-motion-ready [data-hero-heading]::after,
html.sor-motion-ready .sor-main-heading.sor-two-line-heading::after,
html.sor-motion-ready .sor-ready-heading::after {
    display: none;
}

/* Buttons and text links receive a premium lift without changing geometry. */
html.sor-motion-ready .link-layer,
html.sor-motion-ready .real-submit,
html.sor-motion-ready button,
html.sor-motion-ready .sor-testimonial-btn {
    transition: translate 260ms var(--motion-ease), scale 260ms var(--motion-ease), filter 260ms ease, box-shadow 260ms ease, letter-spacing 260ms ease;
}

    html.sor-motion-ready .link-layer:hover,
    html.sor-motion-ready .real-submit:hover,
    html.sor-motion-ready button:hover,
    html.sor-motion-ready .sor-testimonial-btn:hover {
        translate: 0 -3px;
    }

    html.sor-motion-ready .real-submit:hover,
    html.sor-motion-ready .sor-testimonial-btn:hover {
        box-shadow: 0 14px 34px rgba(255, 64, 64, 0.24);
    }

html.sor-motion-ready .premium-button-surface {
    overflow: hidden;
    transition: scale 260ms var(--motion-ease), box-shadow 260ms ease, filter 260ms ease;
}

    html.sor-motion-ready .premium-button-surface::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 105deg, transparent 24%, rgba(255, 255, 255, 0.28) 47%, transparent 70% );
        translate: -145% 0;
        transition: translate 620ms var(--motion-ease);
        pointer-events: none;
    }

    html.sor-motion-ready .premium-button-surface.is-hovered {
        scale: 1.035;
        box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
        filter: brightness(1.035);
    }

        html.sor-motion-ready .premium-button-surface.is-hovered::after {
            translate: 145% 0;
        }

/* Image layers receive depth on reveal and a very subtle pointer hover. */
html.sor-motion-ready .premium-image {
    transition: opacity var(--motion-duration) var(--motion-ease), translate var(--motion-duration) var(--motion-ease), scale 700ms var(--motion-ease-soft), filter 500ms ease;
}

    html.sor-motion-ready .premium-image.is-visible:hover {
        scale: 1.012;
        filter: saturate(1.025) contrast(1.015);
    }

/* The index-page trust image must remain completely static. */
html.sor-motion-ready .home-page .home-trust-image,
html.sor-motion-ready .home-page .home-trust-image.premium-image,
html.sor-motion-ready .home-page .home-trust-image.premium-parallax,
html.sor-motion-ready .home-page .home-trust-image[data-motion] {
    --motion-x: 0px !important;
    --motion-y: 0px !important;
    --motion-scale: 1 !important;
    --parallax-y: 0px !important;
    opacity: 1 !important;
    translate: none !important;
    scale: 1 !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
}

/* Small feature icons float independently after entering the viewport. */
html.sor-motion-ready .premium-floating-icon.is-visible {
    animation: sorIconFloat 4.8s ease-in-out var(--float-delay, 0ms) infinite;
}

@keyframes sorIconFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

/* Card surfaces lift once on reveal and respond gently to pointer movement. */
html.sor-motion-ready .premium-card-surface {
    transition: opacity var(--motion-duration) var(--motion-ease), translate var(--motion-duration) var(--motion-ease), scale 420ms var(--motion-ease), box-shadow 420ms ease, filter 420ms ease;
}

    html.sor-motion-ready .premium-card-surface.is-card-active {
        scale: 1.012;
        box-shadow: 0 24px 65px rgba(23, 23, 23, 0.12);
        filter: brightness(1.012);
    }

/* Testimonial cards are intentionally more tactile. */
html.sor-motion-ready .home-rectangle-67.is-card-active,
html.sor-motion-ready .home-rectangle-68.is-card-active,
html.sor-motion-ready [class*="testimonial-card"].is-card-active {
    scale: 1.018;
    box-shadow: 0 24px 70px rgba(22, 22, 22, 0.14);
}

/* Form interactions. */
html.sor-motion-ready .real-control {
    transition: box-shadow 260ms ease, translate 260ms var(--motion-ease), background-color 260ms ease;
}

    html.sor-motion-ready .real-control:hover {
        translate: 0 -2px;
    }

    html.sor-motion-ready .real-control:focus {
        translate: 0 -3px;
        background-color: #ffffff;
        box-shadow: inset 0 0 0 2px rgba(255, 64, 64, 0.52), 0 14px 32px rgba(0, 0, 0, 0.08);
    }

/* Footer links and social icons. */
html.sor-motion-ready .sor-footer a,
html.sor-motion-ready .sor-footer__social {
    transition: color 220ms ease, translate 220ms var(--motion-ease), scale 220ms var(--motion-ease), opacity 220ms ease;
}

    html.sor-motion-ready .sor-footer a:hover {
        translate: 5px 0;
    }

    html.sor-motion-ready .sor-footer__social:hover {
        translate: 0 -4px;
        scale: 1.08;
    }

/* FAQ panels animate height in JavaScript; these styles smooth the content. */
[data-faq-accordion] .faq-panel,
[data-faq-accordion] [role="region"] {
    overflow: hidden;
    transform-origin: top center;
}

[data-faq-accordion] .faq-toggle {
    transition: color 220ms ease, background-color 220ms ease, translate 220ms var(--motion-ease);
}

    [data-faq-accordion] .faq-toggle:hover {
        translate: 4px 0;
    }

/* Slim scroll-progress indicator. */
.sor-scroll-progress {
    position: fixed;
    z-index: 100000;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    pointer-events: none;
    transform-origin: left center;
    scale: 0 1;
    background: linear-gradient(90deg, var(--motion-accent), #ff7777);
    box-shadow: 0 1px 12px rgba(255, 64, 64, 0.32);
    will-change: scale;
}

/* Reduce effects on touch devices where hover does not add value. */
@media (hover: none) {
    html.sor-motion-ready .premium-image.is-visible:hover,
    html.sor-motion-ready .premium-card-surface.is-card-active,
    html.sor-motion-ready .premium-button-surface.is-hovered {
        scale: 1;
        filter: none;
        box-shadow: none;
    }
}

/* Accessibility: honour the operating-system motion preference. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

        html.sor-motion-ready [data-motion],
        html.sor-motion-ready [data-motion].is-visible,
        html.sor-motion-ready [data-hero-media],
        html.sor-motion-ready .premium-floating-icon.is-visible,
        html.sor-motion-ready .link-layer,
        html.sor-motion-ready .real-submit,
        html.sor-motion-ready button,
        html.sor-motion-ready .sor-testimonial-btn,
        html.sor-motion-ready .premium-button-surface,
        html.sor-motion-ready .premium-image,
        html.sor-motion-ready .premium-card-surface,
        html.sor-motion-ready .real-control,
        html.sor-motion-ready .sor-footer a,
        html.sor-motion-ready .sor-footer__social {
            animation: none !important;
            transition: none !important;
            opacity: var(--motion-final-opacity, 1) !important;
            translate: 0 0 !important;
            scale: 1 !important;
        }

        html.sor-motion-ready .premium-floating-icon {
            transform: none !important;
        }

        html.sor-motion-ready [data-premium-heading]::after {
            transition: none !important;
            scale: 1 1 !important;
            opacity: 1 !important;
        }

    .sor-scroll-progress {
        display: none !important;
    }
}