/* =====================================================
   NEBULA ANIMATION SYSTEM
   Premium, performant, scroll-safe
   ===================================================== */

/* -------------------------------------
   PREMIUM REVEAL STATES
------------------------------------- */
.reveal,
.animate,
.animate-in {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
    transition:
        opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.reveal.visible,
.animate.visible,
.animate-in.visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Fast fade for immediate visibility */
.fade-in-fast {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

.fade-in-fast.visible {
    opacity: 1;
}

/* Directional Variants for Layout Context */
.reveal--from-left {
    transform: translate3d(-60px, 0, 0);
}

.reveal--from-right {
    transform: translate3d(60px, 0, 0);
}

.reveal--from-bottom {
    transform: translate3d(0, 60px, 0);
}

/* -------------------------------------
   PREMIUM STAGGER SYSTEM
------------------------------------- */
.reveal[data-delay] {
    transition-delay: calc(attr(data-delay number) * 1ms);
}

/* Refined stagger timing for premium feel */
.delay-1 { transition-delay: 0.15s; }
.delay-2 { transition-delay: 0.25s; }
.delay-3 { transition-delay: 0.35s; }
.delay-4 { transition-delay: 0.43s; }
.delay-5 { transition-delay: 0.65s; }
.delay-6 { transition-delay: 0.70s; }

/* Micro delays for subtle sequential reveals */
.delay-micro-1 { transition-delay: 0.05s; }
.delay-micro-2 { transition-delay: 0.1s; }
.delay-micro-3 { transition-delay: 0.15s; }

/* -------------------------------------
   VARIANT MOTIONS
------------------------------------- */

/* Float up (default luxury feel) */
.reveal--float {
    transform: translate3d(0, 40px, 0);
}

/* Fade only (subtle sections, text blocks) */
.reveal--fade {
    transform: none;
}

/* Slide left */
.reveal--left {
    transform: translate3d(-40px, 0, 0);
}

/* Slide right */
.reveal--right {
    transform: translate3d(40px, 0, 0);
}

/* Scale in (cards, images) */
.reveal--scale {
    transform: scale(0.94);
}

/* -------------------------------------
   WHEN VISIBLE
------------------------------------- */
.reveal--fade.visible {
    transform: none;
}

.reveal--scale.visible {
    transform: scale(1);
}

/* -------------------------------------
   HERO ENTRANCE (ON LOAD)
------------------------------------- */
.hero-animate {
    opacity: 0;
    transform: translate3d(0, 60px, 0) scale(0.98);
    animation: heroEnter 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-animate.delay-1 { animation-delay: 0.2s; }
.hero-animate.delay-2 { animation-delay: 0.4s; }
.hero-animate.delay-3 { animation-delay: 0.6s; }

@keyframes heroEnter {
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

/* -------------------------------------
   PREMIUM CARD MICRO-INTERACTIONS
------------------------------------- */
.card,
.service-card,
.case-study,
.addon-card {
    transition:
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.3s ease;
}

.card:hover,
.service-card:hover,
.case-study:hover,
.addon-card:hover {
    transform: translateY(-8px) scale(1.01);
}

/* Add subtle glow on hover */
@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 8px 40px rgba(139, 92, 246, 0.3); }
    50% { box-shadow: 0 8px 40px rgba(139, 92, 246, 0.5); }
}

.card:hover,
.service-card:hover {
    animation: pulseGlow 2s ease-in-out infinite;
}

/* -------------------------------------
   NEBULA FLOAT (BACKGROUND ONLY)
------------------------------------- */
.nebula-float {
    animation: nebulaFloat 18s ease-in-out infinite;
    will-change: transform;
}

@keyframes nebulaFloat {
    0%   { transform: translate3d(0, 0, 0); }
    50%  { transform: translate3d(0, -20px, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

/* -------------------------------------
   PARALLAX (OPTIONAL – JS CONTROLLED)
------------------------------------- */
.parallax {
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

/* -------------------------------------
   BUTTON MICRO MOTION
------------------------------------- */
.btn {
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.btn:hover {
    transform: translateY(-2px);
}

/* -------------------------------------
   ACCESSIBILITY – REDUCED MOTION
------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}