/*==============================================================================
    Blessings Therapy Centre
    Motion System

    Version : 2.0.1
    Status  : Production
    Author  : OpenAI

    --------------------------------------------------------------------------

    CONTENTS

    01. Motion Tokens
    02. Shadow Tokens
    03. Glass Surface Tokens
    04. Transition Engine
    05. Motion Utilities
    06. Accessibility
    07. Reduced Motion

==============================================================================*/
/*==============================================================================
   01. MOTION TOKENS
==============================================================================*/

:root{

    /* Duration */

    --btc-motion-instant:100ms;
    --btc-motion-fast:160ms;
    --btc-motion-base:220ms;
    --btc-motion-medium:280ms;
    --btc-motion-slow:420ms;
    --btc-motion-section:650ms;

    /* Easing */

    --btc-ease-standard:cubic-bezier(.4,0,.2,1);

    --btc-ease-out:cubic-bezier(0,0,.2,1);

    --btc-ease-in:cubic-bezier(.4,0,1,1);

    --btc-ease-emphasis:cubic-bezier(.2,.8,.2,1);

    /* Hover Scale */

    --btc-hover-button:translateY(-2px);

    --btc-hover-card:translateY(-6px);

    --btc-hover-large:translateY(-8px);

    --btc-scale-image:1.02;

    --btc-scale-icon:1.08;

}
/*==============================================================================
   02. ELEVATION SYSTEM
==============================================================================*/

:root{

    --btc-shadow-xs:
        0 2px 6px rgba(15,23,42,.05);

    --btc-shadow-sm:
        0 8px 20px rgba(15,23,42,.08);

    --btc-shadow-md:
        0 14px 36px rgba(15,23,42,.12);

    --btc-shadow-lg:
        0 24px 60px rgba(15,23,42,.16);

    --btc-shadow-xl:
        0 36px 90px rgba(15,23,42,.22);

}
/*==============================================================================
   03. GLASS SURFACES
==============================================================================*/

:root{

    --btc-glass-light:
        rgba(255,255,255,.78);

    --btc-glass-medium:
        rgba(255,255,255,.84);

    --btc-glass-strong:
        rgba(255,255,255,.92);

}
/*==============================================================================
   04. TRANSITION ENGINE
==============================================================================*/

a,
button,
input,
textarea,
select,
summary,
svg{

    transition-property:

        color,

        background-color,

        border-color,

        transform,

        box-shadow,

        opacity,

        filter;

    transition-duration:

        var(--btc-motion-base);

    transition-timing-function:

        var(--btc-ease-standard);

}
/*==============================================================================
   05. GLOBAL INTERACTION
==============================================================================*/

button,

a,

.blessings-primary-button,

.blessings-secondary-button,

.blessings-book-button{

    backface-visibility:hidden;

    transform:translateZ(0);

}

.blessings-primary-button:hover,

.blessings-secondary-button:hover,

.blessings-book-button:hover{

    transform:

        var(--btc-hover-button);

}

button:active,

.blessings-primary-button:active,

.blessings-secondary-button:active,

.blessings-book-button:active{

    transform:translateY(0);

}
/*==============================================================================
   IMAGE SYSTEM
==============================================================================*/

.blessings-hero-image-wrapper,

.btc-card-image,

.btcb-card-image,

.btkc-card-image{

    overflow:hidden;

}

.blessings-hero-image-wrapper img,

.btc-card-image img,

.btcb-card-image img,

.btkc-card-image img{

    transition:

        transform var(--btc-motion-slow)
        var(--btc-ease-standard);

}

.blessings-hero-image-wrapper:hover img,

.btc-card-image:hover img,

.btcb-card-image:hover img,

.btkc-card-image:hover img{

    transform:scale(var(--btc-scale-image));

}
/*==============================================================================
   ACCESSIBILITY
==============================================================================*/

:focus-visible{

    outline:3px solid var(--wp--preset--color--accent);

    outline-offset:4px;

}

@media (prefers-reduced-motion:reduce){

    *{

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

        scroll-behavior:auto !important;

    }

}
/*==============================================================================
   06. HEADER MOTION
==============================================================================*/

/* --------------------------------------------------------------------------
   Header Container
-------------------------------------------------------------------------- */

.site-header,
.blessings-header{

    transition:
        background var(--btc-motion-medium) var(--btc-ease-standard),
        box-shadow var(--btc-motion-medium) var(--btc-ease-standard),
        border-color var(--btc-motion-medium) var(--btc-ease-standard),
        backdrop-filter var(--btc-motion-medium) var(--btc-ease-standard);

    will-change:
        background,
        box-shadow,
        backdrop-filter;

}

/* --------------------------------------------------------------------------
   Logo
-------------------------------------------------------------------------- */

.blessings-logo{

    transition:
        transform var(--btc-motion-base) var(--btc-ease-out),
        opacity var(--btc-motion-base) var(--btc-ease-standard);

    transform-origin:center;

}

.blessings-brand:hover .blessings-logo{

    transform:scale(1.04);

}

/* --------------------------------------------------------------------------
   Navigation Links
-------------------------------------------------------------------------- */

.blessings-navigation a{

    position:relative;

    transition:
        color var(--btc-motion-base) var(--btc-ease-standard);

}

/* Animated underline */

.blessings-navigation a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:2px;

    background:currentColor;

    border-radius:999px;

    transform:scaleX(0);

    transform-origin:right;

    transition:
        transform var(--btc-motion-medium)
        var(--btc-ease-out);

}

.blessings-navigation a:hover::after,

.blessings-navigation a:focus-visible::after,

.blessings-navigation .current-menu-item>a::after,

.blessings-navigation .current_page_item>a::after{

    transform:scaleX(1);

    transform-origin:left;

}

/* --------------------------------------------------------------------------
   Navigation Hover
-------------------------------------------------------------------------- */

.blessings-navigation li{

    transition:
        transform var(--btc-motion-base)
        var(--btc-ease-out);

}

.blessings-navigation li:hover{

    transform:translateY(-2px);

}

/* --------------------------------------------------------------------------
   CTA Button
-------------------------------------------------------------------------- */

.blessings-book-button{

    transition:

        transform var(--btc-motion-base)
        var(--btc-ease-standard),

        box-shadow var(--btc-motion-base)
        var(--btc-ease-standard),

        background-color var(--btc-motion-base)
        var(--btc-ease-standard);

}

.blessings-book-button:hover{

    transform:

        translateY(-3px);

    box-shadow:

        var(--btc-shadow-lg);

}

.blessings-book-button:active{

    transform:translateY(0);

}

/* --------------------------------------------------------------------------
   Header CTA Wrapper
-------------------------------------------------------------------------- */

.blessings-header-cta{

    transition:

        opacity var(--btc-motion-base)
        var(--btc-ease-standard),

        transform var(--btc-motion-base)
        var(--btc-ease-standard);

}

/* --------------------------------------------------------------------------
   Navigation Fade
-------------------------------------------------------------------------- */

.blessings-navigation li{

    opacity:1;

    transition:

        opacity var(--btc-motion-base)
        var(--btc-ease-standard),

        transform var(--btc-motion-base)
        var(--btc-ease-standard);

}

.blessings-header:hover .blessings-navigation li{

    opacity:1;

}

/*==============================================================================
   07. HERO MOTION
==============================================================================*/

/* Hero Container */

.blessings-hero{

    overflow:hidden;

}

/* --------------------------------------------------------------------------
   Hero Content
-------------------------------------------------------------------------- */

.blessings-hero-content>*{

    transition:

        transform var(--btc-motion-section)
        var(--btc-ease-emphasis),

        opacity var(--btc-motion-section)
        var(--btc-ease-emphasis);

}

/* --------------------------------------------------------------------------
   Hero Image
-------------------------------------------------------------------------- */

.blessings-hero-image-wrapper{

    transition:

        transform var(--btc-motion-section)
        var(--btc-ease-emphasis),

        box-shadow var(--btc-motion-section)
        var(--btc-ease-emphasis);

}

.blessings-hero-image-wrapper:hover{

    transform:

        translateY(-8px);

    box-shadow:

        var(--btc-shadow-xl);

}

/* --------------------------------------------------------------------------
   Hero Image
-------------------------------------------------------------------------- */

.blessings-hero-image-wrapper img{

    transition:

        transform 900ms
        cubic-bezier(.2,.8,.2,1);

}

.blessings-hero-image-wrapper:hover img{

    transform:scale(1.035);

}

/* --------------------------------------------------------------------------
   Hero Buttons
-------------------------------------------------------------------------- */

.blessings-primary-button,

.blessings-secondary-button{

    transition:

        transform var(--btc-motion-base)
        var(--btc-ease-standard),

        box-shadow var(--btc-motion-base)
        var(--btc-ease-standard);

}

.blessings-primary-button:hover,

.blessings-secondary-button:hover{

    transform:

        translateY(-3px);

}

/* --------------------------------------------------------------------------
   Trust Cards
-------------------------------------------------------------------------- */

.blessings-trust-item,

.blessings-availability-card,

.blessings-therapist-card{

    transition:

        transform var(--btc-motion-medium)
        var(--btc-ease-standard),

        box-shadow var(--btc-motion-medium)
        var(--btc-ease-standard),

        border-color var(--btc-motion-medium)
        var(--btc-ease-standard);

}

.blessings-trust-item:hover,

.blessings-availability-card:hover,

.blessings-therapist-card:hover{

    transform:

        translateY(-6px);

    box-shadow:

        var(--btc-shadow-lg);

}
/*==============================================================================
   08. SCROLL REVEAL SYSTEM
==============================================================================*/

/*
 * Elements remain visible by default.
 * JavaScript adds .btc-motion-ready to <html> only after the reveal engine loads.
 * This prevents hidden content when JavaScript is unavailable.
 */

.btc-reveal,
.btc-reveal-up,
.btc-reveal-down,
.btc-reveal-left,
.btc-reveal-right,
.btc-reveal-scale,
.btc-reveal-fade {
    opacity:1;
    transform:none;
}

/* Reveal preparation */

.btc-motion-ready .btc-reveal,
.btc-motion-ready .btc-reveal-up,
.btc-motion-ready .btc-reveal-down,
.btc-motion-ready .btc-reveal-left,
.btc-motion-ready .btc-reveal-right,
.btc-motion-ready .btc-reveal-scale,
.btc-motion-ready .btc-reveal-fade {
    opacity:0;

    transition:
        opacity var(--btc-motion-section) var(--btc-ease-out),
        transform var(--btc-motion-section) var(--btc-ease-emphasis);

    transition-delay:var(--btc-reveal-delay, 0ms);

    will-change:opacity, transform;
}

/* Reveal directions */

.btc-motion-ready .btc-reveal,
.btc-motion-ready .btc-reveal-up {
    transform:translate3d(0, 28px, 0);
}

.btc-motion-ready .btc-reveal-down {
    transform:translate3d(0, -28px, 0);
}

.btc-motion-ready .btc-reveal-left {
    transform:translate3d(34px, 0, 0);
}

.btc-motion-ready .btc-reveal-right {
    transform:translate3d(-34px, 0, 0);
}

.btc-motion-ready .btc-reveal-scale {
    transform:scale(.965);
}

.btc-motion-ready .btc-reveal-fade {
    transform:none;
}

/* Revealed state */

.btc-motion-ready .btc-is-visible {
    opacity:1;
    transform:none;
}

/* Remove GPU hints after animation */

.btc-motion-ready .btc-motion-complete {
    will-change:auto;
}


/*==============================================================================
   09. STAGGER SYSTEM
==============================================================================*/

.btc-stagger > * {
    --btc-reveal-delay:0ms;
}

.btc-stagger > :nth-child(1) {
    --btc-reveal-delay:0ms;
}

.btc-stagger > :nth-child(2) {
    --btc-reveal-delay:70ms;
}

.btc-stagger > :nth-child(3) {
    --btc-reveal-delay:140ms;
}

.btc-stagger > :nth-child(4) {
    --btc-reveal-delay:210ms;
}

.btc-stagger > :nth-child(5) {
    --btc-reveal-delay:280ms;
}

.btc-stagger > :nth-child(6) {
    --btc-reveal-delay:350ms;
}

.btc-stagger > :nth-child(7) {
    --btc-reveal-delay:420ms;
}

.btc-stagger > :nth-child(8) {
    --btc-reveal-delay:490ms;
}

.btc-stagger > :nth-child(n + 9) {
    --btc-reveal-delay:560ms;
}


/*==============================================================================
   10. MOTION DELAY UTILITIES
==============================================================================*/

.btc-delay-1 {
    --btc-reveal-delay:70ms;
}

.btc-delay-2 {
    --btc-reveal-delay:140ms;
}

.btc-delay-3 {
    --btc-reveal-delay:210ms;
}

.btc-delay-4 {
    --btc-reveal-delay:280ms;
}

.btc-delay-5 {
    --btc-reveal-delay:350ms;
}

.btc-delay-6 {
    --btc-reveal-delay:420ms;
}


/*==============================================================================
   11. MOTION DURATION UTILITIES
==============================================================================*/

.btc-duration-fast {
    transition-duration:var(--btc-motion-fast) !important;
}

.btc-duration-base {
    transition-duration:var(--btc-motion-base) !important;
}

.btc-duration-medium {
    transition-duration:var(--btc-motion-medium) !important;
}

.btc-duration-slow {
    transition-duration:var(--btc-motion-slow) !important;
}

.btc-duration-section {
    transition-duration:var(--btc-motion-section) !important;
}


/*==============================================================================
   12. PREMIUM CARD INTERACTION
==============================================================================*/

.btc-motion-card {
    position:relative;

    transform:translate3d(0, 0, 0);

    transition:
        transform var(--btc-motion-medium) var(--btc-ease-emphasis),
        box-shadow var(--btc-motion-medium) var(--btc-ease-standard),
        border-color var(--btc-motion-medium) var(--btc-ease-standard),
        background-color var(--btc-motion-medium) var(--btc-ease-standard);

    backface-visibility:hidden;
}

@media (hover:hover) and (pointer:fine) {

    .btc-motion-card:hover {
        transform:translate3d(0, -6px, 0);
        box-shadow:var(--btc-shadow-lg);
    }

    .btc-motion-card:active {
        transform:translate3d(0, -2px, 0);
    }

}


/*==============================================================================
   13. PREMIUM BUTTON INTERACTION
==============================================================================*/

.btc-motion-button {
    position:relative;
    isolation:isolate;
    overflow:hidden;

    transform:translate3d(0, 0, 0);

    transition:
        transform var(--btc-motion-base) var(--btc-ease-emphasis),
        box-shadow var(--btc-motion-base) var(--btc-ease-standard),
        background-color var(--btc-motion-base) var(--btc-ease-standard),
        border-color var(--btc-motion-base) var(--btc-ease-standard),
        color var(--btc-motion-base) var(--btc-ease-standard);

    backface-visibility:hidden;
}

/* Soft light sweep */

.btc-motion-button::before {
    content:"";

    position:absolute;
    inset:-2px;

    z-index:-1;

    background:
        linear-gradient(
            110deg,
            transparent 20%,
            rgba(255,255,255,.34) 45%,
            transparent 70%
        );

    transform:translateX(-130%);
    transition:transform 650ms var(--btc-ease-emphasis);

    pointer-events:none;
}

@media (hover:hover) and (pointer:fine) {

    .btc-motion-button:hover {
        transform:translate3d(0, -3px, 0);
    }

    .btc-motion-button:hover::before {
        transform:translateX(130%);
    }

    .btc-motion-button:active {
        transform:translate3d(0, 0, 0);
        transition-duration:var(--btc-motion-instant);
    }

}


/*==============================================================================
   14. ICON MOTION
==============================================================================*/

.btc-motion-icon,
.btc-motion-icon svg {
    transition:
        transform var(--btc-motion-base) var(--btc-ease-emphasis),
        color var(--btc-motion-base) var(--btc-ease-standard),
        fill var(--btc-motion-base) var(--btc-ease-standard),
        stroke var(--btc-motion-base) var(--btc-ease-standard);

    transform-origin:center;
}

@media (hover:hover) and (pointer:fine) {

    a:hover .btc-motion-icon,
    button:hover .btc-motion-icon,
    .btc-motion-card:hover .btc-motion-icon {
        transform:translate3d(3px, 0, 0);
    }

    a:hover .btc-motion-icon--lift,
    button:hover .btc-motion-icon--lift,
    .btc-motion-card:hover .btc-motion-icon--lift {
        transform:translate3d(0, -3px, 0);
    }

    a:hover .btc-motion-icon--scale,
    button:hover .btc-motion-icon--scale,
    .btc-motion-card:hover .btc-motion-icon--scale {
        transform:scale(var(--btc-scale-icon));
    }

}


/*==============================================================================
   15. IMAGE REVEAL AND HOVER
==============================================================================*/

.btc-motion-image {
    position:relative;
    overflow:hidden;
    isolation:isolate;
}

.btc-motion-image img {
    display:block;
    width:100%;
    height:auto;

    transform:scale(1);

    transition:
        transform 850ms var(--btc-ease-emphasis),
        filter var(--btc-motion-slow) var(--btc-ease-standard);

    backface-visibility:hidden;
}

/* Soft surface highlight */

.btc-motion-image::after {
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.12),
            transparent 42%
        );

    opacity:0;

    transition:opacity var(--btc-motion-medium) var(--btc-ease-standard);

    pointer-events:none;
}

@media (hover:hover) and (pointer:fine) {

    .btc-motion-image:hover img,
    .btc-motion-card:hover .btc-motion-image img {
        transform:scale(1.035);
    }

    .btc-motion-image:hover::after,
    .btc-motion-card:hover .btc-motion-image::after {
        opacity:1;
    }

}


/*==============================================================================
   16. LINK ARROW MOTION
==============================================================================*/

.btc-motion-link {
    display:inline-flex;
    align-items:center;
    gap:.5em;
}

.btc-motion-link svg,
.btc-motion-link .btc-motion-link-icon {
    transition:
        transform var(--btc-motion-base) var(--btc-ease-emphasis);
}

@media (hover:hover) and (pointer:fine) {

    .btc-motion-link:hover svg,
    .btc-motion-link:hover .btc-motion-link-icon {
        transform:translate3d(5px, 0, 0);
    }

}


/*==============================================================================
   17. DECORATIVE FLOAT MOTION
==============================================================================*/

@keyframes btc-float-soft {

    0%,
    100% {
        transform:translate3d(0, 0, 0);
    }

    50% {
        transform:translate3d(0, -8px, 0);
    }

}

@keyframes btc-float-horizontal {

    0%,
    100% {
        transform:translate3d(0, 0, 0);
    }

    50% {
        transform:translate3d(6px, 0, 0);
    }

}

@keyframes btc-soft-pulse {

    0%,
    100% {
        opacity:.72;
        transform:scale(1);
    }

    50% {
        opacity:1;
        transform:scale(1.025);
    }

}

.btc-float-soft {
    animation:
        btc-float-soft
        5.5s
        var(--btc-ease-standard)
        infinite;
}

.btc-float-horizontal {
    animation:
        btc-float-horizontal
        6.5s
        var(--btc-ease-standard)
        infinite;
}

.btc-soft-pulse {
    animation:
        btc-soft-pulse
        4.5s
        var(--btc-ease-standard)
        infinite;
}


/*==============================================================================
   18. FORM INTERACTIONS
==============================================================================*/

.btc-motion-form input,
.btc-motion-form textarea,
.btc-motion-form select {
    transition:
        border-color var(--btc-motion-base) var(--btc-ease-standard),
        box-shadow var(--btc-motion-base) var(--btc-ease-standard),
        background-color var(--btc-motion-base) var(--btc-ease-standard),
        transform var(--btc-motion-base) var(--btc-ease-standard);
}

.btc-motion-form input:hover,
.btc-motion-form textarea:hover,
.btc-motion-form select:hover {
    border-color:rgba(111,157,142,.54);
}

.btc-motion-form input:focus,
.btc-motion-form textarea:focus,
.btc-motion-form select:focus {
    transform:translate3d(0, -1px, 0);

    border-color:var(--wp--preset--color--primary, #6f9d8e);

    box-shadow:
        0 0 0 4px rgba(111,157,142,.13),
        0 10px 28px rgba(15,23,42,.07);

    outline:none;
}

.btc-motion-form label {
    transition:
        color var(--btc-motion-base) var(--btc-ease-standard);
}

.btc-motion-form:focus-within label {
    color:var(--wp--preset--color--secondary, #3f6759);
}


/*==============================================================================
   19. SELECTION AND ANCHOR SCROLLING
==============================================================================*/

html {
    scroll-behavior:smooth;
    scroll-padding-top:clamp(88px, 9vw, 126px);
}

::selection {
    color:#ffffff;
    background:#3f6759;
}

::-moz-selection {
    color:#ffffff;
    background:#3f6759;
}


/*==============================================================================
   20. TOUCH DEVICE SAFETY
==============================================================================*/

@media (hover:none), (pointer:coarse) {

    .btc-motion-card:hover,
    .btc-motion-button:hover,
    .blessings-primary-button:hover,
    .blessings-secondary-button:hover,
    .blessings-book-button:hover,
    .blessings-hero-image-wrapper:hover,
    .blessings-trust-item:hover,
    .blessings-availability-card:hover,
    .blessings-therapist-card:hover {
        transform:none;
    }

    .btc-motion-button::before {
        display:none;
    }

}


/*==============================================================================
   21. REDUCED MOTION
==============================================================================*/

@media (prefers-reduced-motion:reduce) {

    html {
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after {
        animation-delay:0ms !important;
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;

        scroll-behavior:auto !important;

        transition-delay:0ms !important;
        transition-duration:.01ms !important;
    }

    .btc-motion-ready .btc-reveal,
    .btc-motion-ready .btc-reveal-up,
    .btc-motion-ready .btc-reveal-down,
    .btc-motion-ready .btc-reveal-left,
    .btc-motion-ready .btc-reveal-right,
    .btc-motion-ready .btc-reveal-scale,
    .btc-motion-ready .btc-reveal-fade {
        opacity:1 !important;
        transform:none !important;
    }

    .btc-float-soft,
    .btc-float-horizontal,
    .btc-soft-pulse {
        animation:none !important;
    }

}


/*==============================================================================
   22. PRINT SAFETY
==============================================================================*/

@media print {

    *,
    *::before,
    *::after {
        animation:none !important;
        transition:none !important;
    }

    .btc-reveal,
    .btc-reveal-up,
    .btc-reveal-down,
    .btc-reveal-left,
    .btc-reveal-right,
    .btc-reveal-scale,
    .btc-reveal-fade {
        opacity:1 !important;
        transform:none !important;
    }

}