/* ============================================================
   Solaris Solar – Animations & Keyframes
   ============================================================ */

/* ── Keyframes ────────────────────────────────────────────── */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.85);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

@keyframes pulseRing {
    0% {
        box-shadow: 0 0 0 0 rgba(100,199,110,0.4);
    }
    70% {
        box-shadow: 0 0 0 20px rgba(100,199,110,0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(100,199,110,0);
    }
}

@keyframes countUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes timelineGrow {
    from { width: 0; }
    to   { width: 100%; }
}

@keyframes timelineGrowVertical {
    from { height: 0; }
    to   { height: 100%; }
}

@keyframes glowPulse {
    0%, 100% {
        box-shadow: 0 0 10px rgba(100,199,110,0.2), 0 0 30px rgba(100,199,110,0.1);
    }
    50% {
        box-shadow: 0 0 20px rgba(100,199,110,0.4), 0 0 60px rgba(100,199,110,0.2);
    }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-10px); }
}

@keyframes shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

@keyframes borderGlow {
    0%, 100% {
        border-color: rgba(100,199,110,0.15);
    }
    50% {
        border-color: rgba(100,199,110,0.5);
    }
}

/* ── Scroll Reveal ────────────────────────────────────────── */

.scroll-reveal {
    opacity: 0;
    transform: translateY(32px);
    transition:
        opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.scroll-reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition:
        opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-reveal-left.revealed {
    opacity: 1;
    transform: translateX(0);
}

.scroll-reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition:
        opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-reveal-right.revealed {
    opacity: 1;
    transform: translateX(0);
}

.scroll-reveal-scale {
    opacity: 0;
    transform: scale(0.9);
    transition:
        opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-reveal-scale.revealed {
    opacity: 1;
    transform: scale(1);
}

/* ── Counter Animation ────────────────────────────────────── */

.counter-number {
    animation: countUp 0.5s ease both;
}

.counter-number.counting {
    animation: none;
}

/* ── Hero Entry Animations ────────────────────────────────── */

.hero-badge {
    animation: fadeInDown 0.7s ease 0.2s both;
}

.hero h1 {
    animation: fadeInUp 0.8s ease 0.4s both;
}

.hero-subtitle {
    animation: fadeInUp 0.8s ease 0.6s both;
}

.hero-cta {
    animation: fadeInUp 0.8s ease 0.75s both;
}

.hero-scroll {
    animation: fadeInUp 0.8s ease 1s both;
}

/* ── Bounce scroll indicator ──────────────────────────────── */

.scroll-arrow {
    animation: bounceDown 2s ease infinite 1.5s;
}

@keyframes bounceDown {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(6px);
    }
    60% {
        transform: translateY(3px);
    }
}

/* ── Timeline Line ────────────────────────────────────────── */

.timeline-line {
    width: 0;
    height: 3px;
    background: linear-gradient(
        to right,
        var(--color-primary) 0%,
        var(--color-accent-gold) 100%
    );
    border-radius: 2px;
    transition: width 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-line.animated {
    width: 100%;
}

.timeline-line-vertical {
    width: 2px;
    height: 0;
    background: linear-gradient(
        to bottom,
        var(--color-primary) 0%,
        transparent 100%
    );
    transition: height 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-line-vertical.animated {
    height: 100%;
}

/* ── Card Hover Glow ──────────────────────────────────────── */

.card-glow:hover {
    box-shadow:
        0 0 20px rgba(100,199,110,0.18),
        0 0 60px rgba(100,199,110,0.08),
        0 8px 32px rgba(0,0,0,0.1);
}

.card-glow-gold:hover {
    box-shadow:
        0 0 20px rgba(227,219,39,0.15),
        0 0 60px rgba(227,219,39,0.08),
        0 8px 32px rgba(0,0,0,0.1);
}

/* ── Floating Elements ────────────────────────────────────── */

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

/* ── Shimmer loading placeholder ─────────────────────────── */

.shimmer {
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.02) 0%,
        rgba(255,255,255,0.06) 50%,
        rgba(255,255,255,0.02) 100%
    );
    background-size: 200% auto;
    animation: shimmer 2s linear infinite;
}

/* ── Entrance animation classes (applied via JS or direct) ── */

.anim-fade-in-up {
    animation: fadeInUp 0.7s ease both;
}

.anim-fade-in-left {
    animation: fadeInLeft 0.7s ease both;
}

.anim-fade-in-right {
    animation: fadeInRight 0.7s ease both;
}

.anim-scale-in {
    animation: scaleIn 0.6s ease both;
}

.anim-slide-in {
    animation: slideIn 0.6s ease both;
}

/* ── Process step animation ───────────────────────────────── */

.process-step .process-number {
    transition:
        box-shadow 0.4s ease,
        transform 0.4s ease,
        background 0.3s ease;
}

.process-step.in-view .process-number {
    animation: scaleIn 0.5s ease both;
}

/* ── Stagger grid items on reveal ────────────────────────── */

.stagger-item {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.55s ease,
        transform 0.55s ease;
}

.stagger-item.visible {
    opacity: 1;
    transform: translateY(0);
}

.stagger-item:nth-child(1) { transition-delay: 0.05s; }
.stagger-item:nth-child(2) { transition-delay: 0.15s; }
.stagger-item:nth-child(3) { transition-delay: 0.25s; }
.stagger-item:nth-child(4) { transition-delay: 0.35s; }
.stagger-item:nth-child(5) { transition-delay: 0.45s; }
.stagger-item:nth-child(6) { transition-delay: 0.55s; }

/* ── Active glow pulse (e.g., highlighted map regions) ────── */

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

/* ── Border animation ─────────────────────────────────────── */

.border-anim {
    animation: borderGlow 3s ease infinite;
}

/* ── Reduced Motion ───────────────────────────────────────── */

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

    .scroll-reveal,
    .scroll-reveal-left,
    .scroll-reveal-right,
    .scroll-reveal-scale,
    .reveal,
    .reveal-left,
    .reveal-right,
    .stagger-item {
        opacity: 1 !important;
        transform: none !important;
    }
}