/* ============================================================
   CryptoX — Animations
   ============================================================ */

/* ---------- Keyframes ---------- */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

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

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

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

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

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

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

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

@keyframes glow {
    0%, 100% { box-shadow: 0 0 20px rgba(0, 212, 255, 0.25); }
    50%      { box-shadow: 0 0 42px rgba(0, 212, 255, 0.5); }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes spinReverse {
    from { transform: rotate(360deg); }
    to   { transform: rotate(0deg); }
}

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

@keyframes bounceIn {
    0%   { opacity: 0; transform: scale(0.85); }
    60%  { opacity: 1; transform: scale(1.03); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* ============================================================
   Scroll Reveal Animation Classes
   Elements start hidden, gain .in-view when observed.
   ============================================================ */

.fade-up,
.fade-down,
.fade-left,
.fade-right,
.fade-in,
.scale-in {
    opacity: 0;
    will-change: opacity, transform;
}

.fade-up     { transform: translateY(28px); }
.fade-down   { transform: translateY(-28px); }
.fade-left   { transform: translateX(-36px); }
.fade-right  { transform: translateX(36px); }
.scale-in    { transform: scale(0.92); }
.fade-in     { transform: none; }

.in-view.fade-up,
.in-view.fade-down,
.in-view.fade-left,
.in-view.fade-right,
.in-view.fade-in,
.in-view.scale-in {
    opacity: 1;
    transform: translate(0, 0) scale(1);
    transition:
        opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Delay utilities */
.delay-1 { transition-delay: 0.08s !important; }
.delay-2 { transition-delay: 0.16s !important; }
.delay-3 { transition-delay: 0.24s !important; }
.delay-4 { transition-delay: 0.32s !important; }
.delay-5 { transition-delay: 0.40s !important; }
.delay-6 { transition-delay: 0.48s !important; }

/* ============================================================
   Utility Animation Classes
   ============================================================ */

.animate-float        { animation: float 6s ease-in-out infinite; }
.animate-float-slow   { animation: float 8s ease-in-out infinite; }
.animate-float-fast   { animation: float 4.5s ease-in-out infinite; }
.animate-pulse        { animation: pulse 4s ease-in-out infinite; }
.animate-glow         { animation: glow 4s ease-in-out infinite; }
.animate-spin         { animation: spin 22s linear infinite; }
.animate-spin-reverse { animation: spinReverse 26s linear infinite; }
.animate-bounce-in    { animation: bounceIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* ============================================================
   Hero-specific Loops
   ============================================================ */

.hero-visual .coin-ring.ring-1 {
    animation: spin 26s linear infinite;
}

.hero-visual .coin-ring.ring-2 {
    animation: spinReverse 20s linear infinite;
}

.hero-visual .coin-ring.ring-3 {
    animation: spin 34s linear infinite;
}

.hero-visual .coin-center {
    animation: pulse 4.5s ease-in-out infinite;
}

.hero-visual .orb-1 {
    animation: pulse 7s ease-in-out infinite;
}

.hero-visual .orb-2 {
    animation: pulse 8s ease-in-out infinite 0.6s;
}

.hero-visual .orb-3 {
    animation: pulse 6.5s ease-in-out infinite 1.1s;
}

.hero-visual .node-1 { animation: float 6s ease-in-out infinite; }
.hero-visual .node-2 { animation: float 7s ease-in-out infinite 0.5s; }
.hero-visual .node-3 { animation: float 5.5s ease-in-out infinite 1s; }
.hero-visual .node-4 { animation: float 8s ease-in-out infinite 0.3s; }
.hero-visual .node-5 { animation: float 6.5s ease-in-out infinite 0.8s; }

.hero-visual .float-card-1 { animation: float 5s ease-in-out infinite; }
.hero-visual .float-card-2 { animation: float 6s ease-in-out infinite 0.6s; }
.hero-visual .float-card-3 { animation: float 5.5s ease-in-out infinite 1.2s; }

/* Why-visual loops */
.why-visual .why-orb {
    animation: pulse 6s ease-in-out infinite;
}
.why-visual .why-ring-1 {
    animation: spin 30s linear infinite;
}
.why-visual .why-ring-2 {
    animation: spinReverse 22s linear infinite;
}

/* Web3 glow pulse */
.web3-card .web3-glow {
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Subtle button shimmer for primary CTA */
.btn-primary {
    background-size: 200% 200%;
    animation: gradientShift 8s ease infinite;
}

/* ============================================================
   Prefers-reduced-motion override
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .fade-up,
    .fade-down,
    .fade-left,
    .fade-right,
    .fade-in,
    .scale-in {
        opacity: 1 !important;
        transform: none !important;
    }

    .animate-float,
    .animate-float-slow,
    .animate-float-fast,
    .animate-pulse,
    .animate-glow,
    .animate-spin,
    .animate-spin-reverse,
    .animate-bounce-in {
        animation: none !important;
    }
}