/*
|--------------------------------------------------------------------------
| HYRO ONE Experience
|--------------------------------------------------------------------------
| Product : HYRO ONE SPA
| File    : spa-animations.css
| Purpose : Scroll reveals and premium micro-interactions
|--------------------------------------------------------------------------
*/

/* Prevent animations from hiding content when JavaScript is unavailable */

.hyro-reveal{
    opacity:1;
    transform:none;
}

/* Activated only after JavaScript loads */

html.hyro-motion-ready .hyro-reveal{
    opacity:0;
    filter:blur(7px);
    transform:translateY(34px) scale(.985);
    transition:
        opacity .75s cubic-bezier(.2,.7,.2,1),
        transform .75s cubic-bezier(.2,.7,.2,1),
        filter .75s ease;
    transition-delay:var(--hyro-reveal-delay, 0ms);
}

html.hyro-motion-ready .hyro-reveal.hyro-visible{
    opacity:1;
    filter:blur(0);
    transform:translateY(0) scale(1);
}

/* Alternate reveal directions */

html.hyro-motion-ready .hyro-reveal-left{
    transform:translateX(-38px);
}

html.hyro-motion-ready .hyro-reveal-right{
    transform:translateX(38px);
}

html.hyro-motion-ready .hyro-reveal-left.hyro-visible,
html.hyro-motion-ready .hyro-reveal-right.hyro-visible{
    transform:translateX(0);
}

/* Staggered cards */

.hyro-stagger > *{
    transition-delay:var(--hyro-card-delay, 0ms);
}

/* Sticky navigation polish */

.hyro-nav{
    position:sticky;
    top:0;
    transition:
        min-height .25s ease,
        background .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.hyro-nav.hyro-nav-scrolled{
    background:rgba(255,255,255,.94);
    border-bottom-color:rgba(236,72,153,.16);
    box-shadow:0 12px 35px rgba(31,41,55,.08);
}

.hyro-nav.hyro-nav-scrolled .hyro-nav-inner{
    min-height:66px;
}

/* Premium button effect */

.hyro-button{
    position:relative;
    overflow:hidden;
    isolation:isolate;
}

.hyro-button::after{
    content:"";
    position:absolute;
    top:-80%;
    left:-55%;
    width:35%;
    height:260%;
    z-index:-1;
    background:rgba(255,255,255,.28);
    transform:rotate(22deg) translateX(-250%);
    transition:transform .55s ease;
}

.hyro-button:hover::after{
    transform:rotate(22deg) translateX(600%);
}

.hyro-button-primary:hover{
    box-shadow:0 18px 38px rgba(236,72,153,.30);
}

/* Card polish */

.spa-feature-card,
.spa-why-card,
.spa-result-card,
.spa-price-card{
    position:relative;
    overflow:hidden;
}

.spa-feature-card::after,
.spa-why-card::after,
.spa-result-card::after,
.spa-price-card::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    background:linear-gradient(
        135deg,
        rgba(255,255,255,.32),
        transparent 35%
    );
    opacity:0;
    transition:opacity .28s ease;
}

.spa-feature-card:hover::after,
.spa-why-card:hover::after,
.spa-result-card:hover::after,
.spa-price-card:hover::after{
    opacity:1;
}

/* Gentle icon motion */

.spa-feature-card:hover .spa-feature-icon,
.spa-why-card:hover .why-icon,
.spa-result-card:hover .spa-result-icon{
    animation:hyroIconFloat .7s ease;
}

@keyframes hyroIconFloat{
    0%{
        transform:translateY(0) rotate(0);
    }

    45%{
        transform:translateY(-7px) rotate(-2deg);
    }

    100%{
        transform:translateY(0) rotate(0);
    }
}

/* Showcase image transition enhancement */

.browser-frame img{
    will-change:opacity, transform, filter;
}

.browser-frame img.is-changing{
    opacity:0;
    filter:blur(7px);
    transform:scale(.975) translateY(7px);
}

/* Gradient CTA moving light */

.spa-final-cta-card::after,
.spa-promise::after{
    content:"";
    position:absolute;
    top:-70%;
    left:-35%;
    width:22%;
    height:240%;
    pointer-events:none;
    background:rgba(255,255,255,.14);
    transform:rotate(24deg);
    animation:hyroCtaLight 7s ease-in-out infinite;
}

.spa-promise{
    position:relative;
    overflow:hidden;
}

@keyframes hyroCtaLight{
    0%,
    30%{
        left:-40%;
    }

    65%,
    100%{
        left:125%;
    }
}

/* Subtle floating dashboard effect */

.spa-app-preview,
.spa-workflow-dashboard,
.browser-frame{
    animation:hyroDashboardFloat 6s ease-in-out infinite;
}

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

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

/* Do not animate on hover while screenshot is changing */

.browser-frame:hover{
    animation-play-state:paused;
}

/* Respect accessibility preferences */

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

    *,
    *::before,
    *::after{
        scroll-behavior:auto !important;
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }

    html.hyro-motion-ready .hyro-reveal{
        opacity:1;
        filter:none;
        transform:none;
    }

}