﻿/* == HVAC Experts - Scroll & Entry Animations  v3.1.0 == */

/* -- GPU HINTS -- */
.reveal, .reveal-left, .reveal-right, .reveal-scale, .reveal-blur {
    will-change: opacity, transform;
    backface-visibility: hidden;
}

/* -- SCROLL REVEAL CLASSES -- */
.reveal {
    opacity: 0; transform: translateY(28px);
    transition: opacity .78s cubic-bezier(0.22,1,0.36,1), transform .78s cubic-bezier(0.22,1,0.36,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-left {
    opacity: 0; transform: translateX(-32px);
    transition: opacity .78s cubic-bezier(0.22,1,0.36,1), transform .78s cubic-bezier(0.22,1,0.36,1);
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }

.reveal-right {
    opacity: 0; transform: translateX(32px);
    transition: opacity .78s cubic-bezier(0.22,1,0.36,1), transform .78s cubic-bezier(0.22,1,0.36,1);
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

/* Scale + drift up (for cards, icons) */
.reveal-scale {
    opacity: 0; transform: scale(0.88) translateY(16px);
    transition: opacity .78s cubic-bezier(0.22,1,0.36,1), transform .78s cubic-bezier(0.22,1,0.36,1);
}
.reveal-scale.visible { opacity: 1; transform: scale(1) translateY(0); }

/* Blur fade-in (for section headings) */
.reveal-blur {
    opacity: 0; filter: blur(8px); transform: translateY(12px);
    transition: opacity .72s cubic-bezier(0.22,1,0.36,1),
                filter .72s cubic-bezier(0.22,1,0.36,1),
                transform .72s cubic-bezier(0.22,1,0.36,1);
}
.reveal-blur.visible { opacity: 1; filter: blur(0); transform: translateY(0); }

/* Release GPU layers after animation completes */
.reveal.visible, .reveal-left.visible, .reveal-right.visible,
.reveal-scale.visible, .reveal-blur.visible {
    will-change: auto;
}

/* -- STAGGER DELAYS -- */
.delay-1 { transition-delay: .08s; }
.delay-2 { transition-delay: .17s; }
.delay-3 { transition-delay: .26s; }
.delay-4 { transition-delay: .35s; }
.delay-5 { transition-delay: .44s; }
.delay-6 { transition-delay: .53s; }
.delay-7 { transition-delay: .62s; }
.delay-8 { transition-delay: .72s; }

/* -- KEYFRAMES -- */
@keyframes fade-up {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-down {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes scale-in {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes pulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .65; transform: scale(1.4); }
}
@keyframes chip-float {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}
@keyframes ring-pulse {
    0%,100% { opacity: .45; transform: translate(-50%,-50%) scale(1); }
    50%      { opacity: .12; transform: translate(-50%,-50%) scale(1.07); }
}
@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes marquee-scroll { to { transform: translateX(-50%); } }
@keyframes preload {
    from { width: 0; }
    to   { width: 100%; }
}
@keyframes glow-pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(27,22,158,.35); }
    50%      { box-shadow: 0 0 0 10px rgba(27,22,158,0); }
}
@keyframes counter-pop {
    0%   { transform: scale(0.7); opacity: 0; }
    70%  { transform: scale(1.08); }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes hero-btn-glow {
    0%,100% { box-shadow: 0 4px 20px rgba(255,109,72,0); }
    50%      { box-shadow: 0 4px 32px rgba(255,109,72,.45); }
}
@keyframes orb-float {
    0%,100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-8px) scale(1.03); }
}

/* -- HOVER MICRO-INTERACTIONS -- */
.btn-primary {
    transition: background .22s, transform .24s cubic-bezier(0.22,1,0.36,1), box-shadow .24s;
}
.btn-primary:hover { animation: glow-pulse 1.8s ease-in-out infinite; }

/* -- REDUCED MOTION -- */
@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-left, .reveal-right, .reveal-scale, .reveal-blur {
        opacity: 1 !important; transform: none !important;
        filter: none !important; transition: none !important;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
