/* ==========================================================================
   SPDLAB.hu — animations.css
   Keyframes, entrance animations, hover micro-interactions,
   scroll-driven reveals, and decorative motion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   KEYFRAMES
   -------------------------------------------------------------------------- */

/* Pulse dot — live indicator on hero badge */
@keyframes pulse-dot {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 212, 170, 0.4);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.15);
        box-shadow: 0 0 0 5px rgba(0, 212, 170, 0);
    }
}

/* Subtle fade-in from below (entrance) */
@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade-in from above */
@keyframes fade-down {
    from {
        opacity: 0;
        transform: translateY(-16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade-in from left */
@keyframes fade-right {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade-in from right */
@keyframes fade-left {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Simple opacity fade */
@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Scale-in — for badges, chips */
@keyframes scale-in {
    from {
        opacity: 0;
        transform: scale(0.88);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Shimmer sweep — for skeleton loaders or button glow */
@keyframes shimmer {
    from {
        background-position: -200% center;
    }
    to {
        background-position: 200% center;
    }
}

/* Rotate — for loading spinners */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Pipeline flow — defined also in components for the connector, repeated here */
@keyframes pipeline-flow {
    0% {
        left: -100%;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        left: 100%;
        opacity: 0;
    }
}

/* Slow ambient float (decorative elements) */
@keyframes float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

/* Glow pulse — accent ring breathing */
@keyframes glow-pulse {
    0%,
    100% {
        box-shadow: var(--shadow-accent-sm);
    }
    50% {
        box-shadow: var(--shadow-accent-lg);
    }
}

/* Horizontal ticker scroll */
@keyframes ticker-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Gradient text shimmer */
@keyframes gradient-shift {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 200% center;
    }
}

/* --------------------------------------------------------------------------
   ENTRANCE ANIMATION UTILITY CLASSES
   Applied directly or toggled by JS .is-visible
   -------------------------------------------------------------------------- */

/* Default hidden state — elements start invisible */
[data-animate] {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity var(--duration-slower) var(--ease-out-expo),
        transform var(--duration-slower) var(--ease-out-expo);
}

/* Visible state — added by IntersectionObserver in main.js */
[data-animate].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Direction variants */
[data-animate="fade-right"] {
    transform: translateX(-20px);
}
[data-animate="fade-right"].is-visible {
    transform: translateX(0);
}

[data-animate="fade-left"] {
    transform: translateX(20px);
}
[data-animate="fade-left"].is-visible {
    transform: translateX(0);
}

[data-animate="scale-in"] {
    transform: scale(0.92);
}
[data-animate="scale-in"].is-visible {
    transform: scale(1);
}

[data-animate="fade-in"] {
    transform: none;
}

/* Staggered delay utilities — add data-delay="N" to children */
[data-delay="1"] {
    transition-delay: 80ms;
}
[data-delay="2"] {
    transition-delay: 160ms;
}
[data-delay="3"] {
    transition-delay: 240ms;
}
[data-delay="4"] {
    transition-delay: 320ms;
}
[data-delay="5"] {
    transition-delay: 400ms;
}
[data-delay="6"] {
    transition-delay: 480ms;
}

/* --------------------------------------------------------------------------
   HERO ANIMATIONS — run on page load immediately
   -------------------------------------------------------------------------- */

/* Hero badge bounces in slightly */
.hero__badge {
    animation: scale-in var(--duration-slow) var(--ease-spring) both;
    animation-delay: 80ms;
}

/* Hero heading sweeps up */
.hero__heading {
    animation: fade-up var(--duration-slower) var(--ease-out-expo) both;
    animation-delay: 160ms;
}

/* Hero subheading follows */
.hero__subheading {
    animation: fade-up var(--duration-slower) var(--ease-out-expo) both;
    animation-delay: 260ms;
}

/* CTA buttons */
.hero__cta {
    animation: fade-up var(--duration-slower) var(--ease-out-expo) both;
    animation-delay: 360ms;
}

/* Pipeline widget */
.hero__pipeline-wrapper {
    animation: fade-up var(--duration-slower) var(--ease-out-expo) both;
    animation-delay: 460ms;
}

/* Stats */
.hero__stats {
    animation: fade-in var(--duration-slower) var(--ease-out-expo) both;
    animation-delay: 560ms;
}

/* --------------------------------------------------------------------------
   NAV ANIMATION
   -------------------------------------------------------------------------- */

.site-header {
    animation: fade-down var(--duration-slow) var(--ease-out-expo) both;
    animation-delay: 40ms;
}

/* --------------------------------------------------------------------------
   HOVER MICRO-INTERACTIONS
   -------------------------------------------------------------------------- */

/* Cards: lift on hover with subtle accent outline */
.card--hover,
.product-card,
.pillar,
.trust-signal {
    will-change: transform;
}

/* Smooth scale for icon chips */
.icon-chip,
.card__icon,
.product-card__icon {
    transition:
        transform var(--duration-normal) var(--ease-spring),
        box-shadow var(--duration-normal) var(--ease-out-quart);
}

.card:hover .card__icon,
.product-card:hover .product-card__icon {
    transform: scale(1.06);
    box-shadow: var(--shadow-accent-sm);
}

/* --------------------------------------------------------------------------
   PIPELINE ANIMATION STEPS
   Staggered delays on connectors so flow appears sequential.
   -------------------------------------------------------------------------- */

.pipeline-step:nth-child(1) .pipeline-step__connector::after {
    animation-delay: 0ms;
}
.pipeline-step:nth-child(2) .pipeline-step__connector::after {
    animation-delay: 300ms;
}
.pipeline-step:nth-child(3) .pipeline-step__connector::after {
    animation-delay: 600ms;
}
.pipeline-step:nth-child(4) .pipeline-step__connector::after {
    animation-delay: 900ms;
}
.pipeline-step:nth-child(5) .pipeline-step__connector::after {
    animation-delay: 1200ms;
}

/* --------------------------------------------------------------------------
   DECORATIVE FLOATING ELEMENTS
   -------------------------------------------------------------------------- */

.float-slow {
    animation: float 6s ease-in-out infinite;
}

.float-med {
    animation: float 4s ease-in-out infinite;
}

.float-fast {
    animation: float 3s ease-in-out infinite;
}

/* Offset each floating element so they don't sync */
.float-offset-1 {
    animation-delay: 0s;
}
.float-offset-2 {
    animation-delay: -1.5s;
}
.float-offset-3 {
    animation-delay: -3s;
}

/* --------------------------------------------------------------------------
   GLOW BREATHING — accent elements
   -------------------------------------------------------------------------- */

.glow-pulse {
    animation: glow-pulse 3s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   LOADING SPINNER
   -------------------------------------------------------------------------- */

.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

/* --------------------------------------------------------------------------
   SHIMMER SKELETON LOADING
   -------------------------------------------------------------------------- */

.skeleton {
    background: linear-gradient(
        90deg,
        var(--color-surface) 0%,
        var(--color-surface-raised) 50%,
        var(--color-surface) 100%
    );
    background-size: 200% auto;
    animation: shimmer 1.6s linear infinite;
    border-radius: var(--radius-md);
}

/* --------------------------------------------------------------------------
   GRADIENT TEXT SHIMMER (animated)
   -------------------------------------------------------------------------- */

.text-gradient--animated {
    background: linear-gradient(90deg, #00d4aa, #00e6bb, #00c49a, #00d4aa);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 3s linear infinite;
}

/* --------------------------------------------------------------------------
   REDUCED MOTION OVERRIDES
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    [data-animate] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .hero__badge,
    .hero__heading,
    .hero__subheading,
    .hero__cta,
    .hero__pipeline-wrapper,
    .hero__stats,
    .site-header {
        animation: none !important;
    }

    .pipeline-step__connector::after {
        animation: none !important;
    }

    .float-slow,
    .float-med,
    .float-fast {
        animation: none !important;
    }

    .glow-pulse {
        animation: none !important;
    }

    .text-gradient--animated {
        animation: none !important;
    }

    .hero__badge-dot {
        animation: none !important;
    }
}