/* ==========================================================================
   Animate CSS Components — Alaikis (Theme 15)
   Scroll-reveal, counting numbers, micro-interactions, ambient motion.
   Powered by js/animate.js (IntersectionObserver) + CSS keyframes.
   ========================================================================== */

/* ---- Reachable motion defaults ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .anim, .anim-child, .anim-count { opacity: 1 !important; transform: none !important; }
}

/* ---- Scroll reveal base states ---- */
.anim { opacity: 0; will-change: transform, opacity; }
.anim-up { transform: translateY(28px); }
.anim-down { transform: translateY(-28px); }
.anim-left { transform: translateX(-32px); }
.anim-right { transform: translateX(32px); }
.anim-zoom { transform: scale(.92); }
.anim-rotate { transform: rotate(-2deg) scale(.96); }

.anim.in-view { animation: animIn .8s cubic-bezier(.22,1,.36,1) forwards; }
.anim-up.in-view { animation-name: animUp; }
.anim-down.in-view { animation-name: animDown; }
.anim-left.in-view { animation-name: animLeft; }
.anim-right.in-view { animation-name: animRight; }
.anim-zoom.in-view { animation-name: animZoom; }
.anim-rotate.in-view { animation-name: animRotate; }

@keyframes animIn { from { opacity:0 } to { opacity:1 } }
@keyframes animUp { from { opacity:0; transform:translateY(28px) } to { opacity:1; transform:none } }
@keyframes animDown { from { opacity:0; transform:translateY(-28px) } to { opacity:1; transform:none } }
@keyframes animLeft { from { opacity:0; transform:translateX(-32px) } to { opacity:1; transform:none } }
@keyframes animRight { from { opacity:0; transform:translateX(32px) } to { opacity:1; transform:none } }
@keyframes animZoom { from { opacity:0; transform:scale(.92) } to { opacity:1; transform:none } }
@keyframes animRotate { from { opacity:0; transform:rotate(-2deg) scale(.96) } to { opacity:1; transform:none } }

/* ---- Staggered children (grids / lists / cards) ---- */
.anim-stagger > * { opacity: 0; transform: translateY(24px); }
.anim-stagger.in-view > * { animation: animUp .7s cubic-bezier(.22,1,.36,1) forwards; }
.anim-stagger.in-view > *:nth-child(1) { animation-delay: .05s }
.anim-stagger.in-view > *:nth-child(2) { animation-delay: .12s }
.anim-stagger.in-view > *:nth-child(3) { animation-delay: .19s }
.anim-stagger.in-view > *:nth-child(4) { animation-delay: .26s }
.anim-stagger.in-view > *:nth-child(5) { animation-delay: .33s }
.anim-stagger.in-view > *:nth-child(6) { animation-delay: .40s }
.anim-stagger.in-view > *:nth-child(7) { animation-delay: .47s }
.anim-stagger.in-view > *:nth-child(8) { animation-delay: .54s }
.anim-stagger.in-view > *:nth-child(9) { animation-delay: .61s }
.anim-stagger.in-view > *:nth-child(10) { animation-delay: .68s }
.anim-stagger.in-view > *:nth-child(11) { animation-delay: .75s }
.anim-stagger.in-view > *:nth-child(12) { animation-delay: .82s }

/* ---- Number count-up ---- */
.anim-count { display:inline-block; }
.anim-count.out { opacity:.4; }

/* ---- Border glow pulse (glass cards) ---- */
@keyframes glowPulse {
    0%,100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 8px 24px rgba(13,13,15,.06); }
    50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 10px 34px rgba(232,84,45,.18); }
}
.glow-pulse { animation: glowPulse 3.5s ease-in-out infinite; }

/* ---- Shine sweep on hover (buttons / cards) ---- */
@keyframes shine {
    from { left: -80%; }
    to { left: 140%; }
}
.shine { position: relative; overflow: hidden; }
.shine::after {
    content: ""; position: absolute; top: 0; left: -80%;
    width: 45%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
}
.shine:hover::after { animation: shine .7s ease; }

/* ---- Ambient floating blobs ---- */
@keyframes floatY { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-16px) } }
@keyframes floatYslow { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-26px) } }
.float-y { animation: floatY 5.5s ease-in-out infinite; }
.float-y-slow { animation: floatYslow 8s ease-in-out infinite; }

/* ---- Ambient aurora gradient shift ---- */
@keyframes auroraShift {
    0% { filter: hue-rotate(0deg) saturate(1); transform: translate3d(0,0,0) scale(1); }
    50% { filter: hue-rotate(18deg) saturate(1.2); transform: translate3d(2%,-2%,0) scale(1.06); }
    100% { filter: hue-rotate(-8deg) saturate(1); transform: translate3d(-2%,1%,0) scale(.98); }
}
.aurora-shift { animation: auroraShift 14s ease-in-out infinite alternate; }

/* ---- Gradient text shimmer ---- */
@keyframes gradientShift {
    0% { background-position: 0% 50% }
    50% { background-position: 100% 50% }
    100% { background-position: 0% 50% }
}
.text-shimmer {
    background: linear-gradient(120deg, var(--color-primary), #f59e0b 30%, var(--color-opensource) 60%, var(--color-software) 80%, var(--color-primary));
    background-size: 300% 100%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    animation: gradientShift 6s ease infinite;
}

/* ---- Pulsing dots / live indicator ---- */
@keyframes pulseDot { 0%,100% { box-shadow: 0 0 0 0 rgba(22,163,74,.5) } 60% { box-shadow: 0 0 0 8px rgba(22,163,74,0) } }
.live-dot { width:10px; height:10px; border-radius:50%; background:var(--color-success); display:inline-block; animation: pulseDot 2s ease-out infinite; }

/* ---- Card hover lift (global) ---- */
@keyframes liftIn { from { transform: translateY(0) } to { transform: translateY(-6px) } }
.card-lift:hover { animation: liftIn .3s cubic-bezier(.34,1.56,.64,1) forwards; }

/* ---- Loading shimmer for images ---- */
@keyframes imgShimmer { from { background-position: -400px 0 } to { background-position: 400px 0 } }
.img-shimmer-bg {
    background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.18) 50%, rgba(255,255,255,.05) 75%);
    background-size: 800px 100%;
    animation: imgShimmer 1.6s linear infinite;
}

/* ---- Touching rotate on logo ---- */
@keyframes wobble { 0%,100% { transform: rotate(0deg) } 25% { transform: rotate(-3deg) } 75% { transform: rotate(3deg) } }
.wobble-hover:hover { animation: wobble .5s ease-in-out; }

/* ---- Scroll-down mouse hint already in hero ---- */

/* ---- Title underline grow ---- */
@keyframes underlineGrow { from { transform: scaleX(0) } to { transform: scaleX(1) } }
.underline-grow { position: relative; }
.underline-grow::after {
    content: ""; position:absolute; left:0; bottom:-4px; height:3px; width:100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-opensource));
    border-radius:3px; transform-origin:left; transform:scaleX(0);
}
.underline-grow.in-view::after { animation: underlineGrow .7s .2s cubic-bezier(.22,1,.36,1) forwards; }