/* Keyframes, reveal utilities, motion helpers, and reduced-motion support. */

@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroTitleReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

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

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

@media (prefers-reduced-motion: reduce) {
    .hero-title-animated span {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

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

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

@media (prefers-reduced-motion: reduce) {
    .platform-card,
    .platform-pillars-section.visible .platform-card {
        animation: none;
        opacity: 1;
        transform: none;
        transition: none;
    }

    .platform-dashboard-browser,
    .platform-phone-frame {
        animation: none;
    }
}

@keyframes numberCardIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes numbersOrb {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(12px, -10px, 0) scale(1.06);
    }
}

@keyframes spLoop {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(50%);
    }
}

@keyframes spOrbFloat {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(0, -16px, 0) scale(1.03);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sp-marquee {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .sp-marquee::-webkit-scrollbar {
        display: none;
    }

    .sp-track {
        animation: none;
    }
    .sp-bg-orb {
        animation: none;
    }
    .sp-card:hover {
        transform: none;
    }

    .numbers-bg-orb,
    .number-card {
        animation: none;
    }

    .number-card {
        opacity: 1;
        transform: none;
    }
}

@keyframes adminOrbFloat {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(0, -14px, 0) scale(1.03);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-copy,
    .hero-visual,
    .hero-dashboard-frame,
    .hero-phone,
    .hero-float-badge {
        animation: none;
    }

    .numbers-bg-orb,
    .number-card {
        animation: none;
    }

    .number-card {
        opacity: 1;
        transform: none;
    }

    .admin-bg-orb {
        animation: none;
    }
}

@keyframes faqFloat {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(0, -14px, 0) scale(1.03);
    }
}

@media (prefers-reduced-motion: reduce) {
    .faq-bg-orb {
        animation: none;
    }

    .faq-item,
    .faq-a,
    .faq-toggle::after {
        transition: none;
    }
}

@keyframes contactFloat {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(0, -14px, 0) scale(1.03);
    }
}

@keyframes contactCardIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .contact-bg-orb {
        animation: none;
    }

    .contact-form-card {
        animation: none !important;
        opacity: 1;
        transform: none;
    }

    .form-control,
    .btn {
        transition: none;
    }
}

/* Global Reveals System */
.r {
    opacity: 0;
    transform: translate3d(0, var(--reveal-distance), 0);
    transition:
        opacity var(--reveal-duration) var(--reveal-ease),
        transform var(--reveal-duration) var(--reveal-ease),
        filter var(--reveal-duration) var(--reveal-ease);
    transition-delay: var(--reveal-delay);
    will-change: opacity, transform;
}

.r.visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
    will-change: auto;
}

.reveal-up {
    transform: translate3d(0, var(--reveal-distance), 0);
}

.reveal-down {
    transform: translate3d(0, calc(var(--reveal-distance) * -1), 0);
}

.reveal-left {
    transform: translate3d(calc(var(--reveal-distance) * -1), 0, 0);
}

.reveal-right {
    transform: translate3d(var(--reveal-distance), 0, 0);
}

.reveal-zoom {
    transform: translate3d(0, 18px, 0) scale(.94);
    filter: blur(2px);
}

.reveal-fade {
    transform: none;
}

.reveal-delay-1 {
    --reveal-delay: 90ms;
}

.reveal-delay-2 {
    --reveal-delay: 180ms;
}

.reveal-delay-3 {
    --reveal-delay: 270ms;
}

.reveal-delay-4 {
    --reveal-delay: 360ms;
}

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

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

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

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

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

.platform-pillars-section.visible .platform-card.r:not(.visible),
.numbers-section.visible .number-card.r:not(.visible) {
    opacity: 0;
}

.numbers-section.visible .number-card.r {
    animation: none;
}

.platform-pillars-section.visible .platform-card.r.reveal-up:not(.visible),
.numbers-section.visible .number-card.r.reveal-up:not(.visible) {
    transform: translate3d(0, var(--reveal-distance), 0);
}

.platform-pillars-section.visible .platform-card.r.reveal-left:not(.visible),
.numbers-section.visible .number-card.r.reveal-left:not(.visible) {
    transform: translate3d(calc(var(--reveal-distance) * -1), 0, 0);
}

.platform-pillars-section.visible .platform-card.r.reveal-right:not(.visible),
.numbers-section.visible .number-card.r.reveal-right:not(.visible) {
    transform: translate3d(var(--reveal-distance), 0, 0);
}

@media (prefers-reduced-motion: reduce) {
    .r,
    .r.visible,
    .reveal-up,
    .reveal-down,
    .reveal-left,
    .reveal-right,
    .reveal-zoom,
    .reveal-fade {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
        animation: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-dashboard-frame,
    .hero-phone,
    .admin-bg-orb,
    .faq-bg-orb,
    .contact-bg-orb {
        animation: none !important;
    }
}

/* Animated premium backgrounds */
@keyframes premiumOrbFloat {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    33% {
        transform: translate3d(18px, -16px, 0) scale(1.06);
    }

    66% {
        transform: translate3d(-14px, 12px, 0) scale(.96);
    }
}

@keyframes premiumGlowPulse {
    0%,
    100% {
        opacity: var(--effect-opacity-low, .05);
    }

    50% {
        opacity: var(--effect-opacity-high, .09);
    }
}

@keyframes premiumWaveDrift {
    0%,
    100% {
        transform: translateX(0) translateY(0) rotate(0deg);
    }

    50% {
        transform: translateX(-24px) translateY(18px) rotate(2deg);
    }
}

@keyframes brandBlobDrift {
    0%,
    100% {
        opacity: var(--effect-opacity-low, .04);
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        opacity: var(--effect-opacity-high, .08);
        transform: translate3d(var(--effect-x, 22px), var(--effect-y, -18px), 0) scale(var(--effect-scale, 1.05));
    }
}

@keyframes brandWaveDrift {
    0%,
    100% {
        opacity: var(--effect-opacity-low, .045);
        transform: translate3d(0, 0, 0);
    }

    50% {
        opacity: var(--effect-opacity-high, .085);
        transform: translate3d(var(--effect-x, -22px), var(--effect-y, 0), 0);
    }
}

@keyframes brandGradientBreathe {
    0%,
    100% {
        opacity: var(--effect-opacity-low, .035);
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        opacity: var(--effect-opacity-high, .075);
        transform: translate3d(var(--effect-x, 16px), var(--effect-y, -12px), 0) scale(var(--effect-scale, 1.04));
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero,
    .social-proof-sec,
    .contact-section,
    footer,
    .hero::before,
    .hero::after,
    .platform-pillars-section::before,
    .platform-pillars-section::after,
    .numbers-section::before,
    .numbers-section::after,
    .social-proof-sec::before,
    .social-proof-sec::after,
    .features-section::before,
    .features-section::after,
    .faq-section::before,
    .faq-section::after,
    .contact-section::before,
    .contact-section::after,
    footer::before,
    footer::after,
    .admin-showcase::after,
    .admin-simple-card::before,
    .contact-form-card::before {
        animation: none !important;
        transform: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}