/* ============================================
   HUNTOOL ANIMATIONS
   Scroll reveal, parallax, micro-interactions
   ============================================ */

/* ---- KEYFRAMES ---- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

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

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

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes blurIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

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

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

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

@keyframes count-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes wave {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-5px) rotate(2deg);
    }
    50% {
        transform: translateY(0) rotate(0deg);
    }
    75% {
        transform: translateY(5px) rotate(-2deg);
    }
}

@keyframes text-reveal {
    from {
        clip-path: inset(0 100% 0 0);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes line-grow {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

/* ---- SCROLL REVEAL ---- */
/* Elements hidden by default, revealed by JS IntersectionObserver */
[data-animate] {
    opacity: 0;
}

[data-animate]:not(.is-visible) {
    will-change: transform, opacity;
}

[data-animate].is-visible {
    animation-duration: var(--duration-slowest);
    animation-fill-mode: forwards;
    animation-timing-function: var(--ease-out);
}

[data-animate="fade-up"].is-visible {
    animation-name: fadeInUp;
}
[data-animate="fade-down"].is-visible {
    animation-name: fadeInDown;
}
[data-animate="fade-left"].is-visible {
    animation-name: fadeInLeft;
}
[data-animate="fade-right"].is-visible {
    animation-name: fadeInRight;
}
[data-animate="scale-in"].is-visible {
    animation-name: scaleIn;
}
[data-animate="blur-in"].is-visible {
    animation-name: blurIn;
}
[data-animate="text-reveal"].is-visible {
    animation-name: text-reveal;
}

/* Stagger delays via data-delay */
[data-delay="100"].is-visible {
    animation-delay: 60ms;
}
[data-delay="200"].is-visible {
    animation-delay: 120ms;
}
[data-delay="300"].is-visible {
    animation-delay: 180ms;
}
[data-delay="400"].is-visible {
    animation-delay: 240ms;
}
[data-delay="500"].is-visible {
    animation-delay: 300ms;
}
[data-delay="600"].is-visible {
    animation-delay: 360ms;
}
[data-delay="700"].is-visible {
    animation-delay: 420ms;
}
[data-delay="800"].is-visible {
    animation-delay: 480ms;
}

/* ---- HOVER EFFECTS ---- */
.hover-lift {
    transition:
        transform var(--duration-base) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out);
}

.hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
}

.hover-glow {
    transition: box-shadow var(--duration-base) var(--ease-out);
}

.hover-glow:hover {
    box-shadow: var(--shadow-orange-lg);
}

.hover-scale {
    transition: transform var(--duration-base) var(--ease-spring);
}

.hover-scale:hover {
    transform: scale(1.05);
}

/* ---- PARALLAX ---- */
.parallax-bg {
    will-change: transform;
}

/* Custom cursor removed — keeping default pointer */

/* ---- MAGNETIC BUTTON EFFECT ---- */
.btn-magnetic {
    transition: transform var(--duration-fast) var(--ease-out);
}

/* ---- 3D TILT CARDS ---- */
.tilt-card {
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: transform var(--duration-base) var(--ease-out);
}

.tilt-card-inner {
    transform: translateZ(0);
    transition: transform var(--duration-base) var(--ease-out);
}

.tilt-card:hover .tilt-card-inner {
    transform: translateZ(20px);
}

/* ---- SKELETON LOADING ---- */
.skeleton {
    background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
    background-size: 200% 100%;
    animation: shimmer 2s ease-in-out infinite;
    border-radius: var(--radius-md);
}

.skeleton-text {
    height: 1em;
    width: 80%;
    margin-bottom: var(--space-2);
}

.skeleton-title {
    height: 1.5em;
    width: 60%;
    margin-bottom: var(--space-4);
}

.skeleton-image {
    aspect-ratio: 16 / 9;
    width: 100%;
}

/* ---- ANIMATED UNDERLINE ---- */
.animated-underline {
    position: relative;
    display: inline;
}

.animated-underline::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--orange-500), var(--turquoise-400));
    border-radius: var(--radius-full);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--duration-base) var(--ease-out);
}

.animated-underline:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* ---- GRADIENT BORDER CARD ---- */
.gradient-border {
    position: relative;
    border-radius: var(--radius-2xl);
    padding: 2px;
    background: linear-gradient(135deg, var(--orange-500), var(--turquoise-400));
}

.gradient-border-inner {
    background: white;
    border-radius: calc(var(--radius-2xl) - 2px);
    padding: var(--space-8);
}

/* ---- MARQUEE ---- */
.marquee-wrapper {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}

.marquee-track {
    display: flex;
    gap: var(--space-16);
    animation: marquee 30s linear infinite;
    width: max-content;
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* ---- HERO TEXT WORD REVEAL ---- */
.word-reveal {
    overflow: hidden;
    display: inline-block;
}

.word-reveal .word {
    display: inline-block;
    opacity: 0;
    transform: translateY(60%);
    animation: wordSlideUp 0.35s var(--ease-out) forwards;
}

@keyframes wordSlideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---- LAZY IMAGE FADE ---- */
img.img-loading {
    opacity: 0;
    transition: opacity 0.4s ease-out;
}

/* ---- COUNTER ANIMATION (for stats) ---- */
.counter-value {
    display: inline-block;
    animation: count-up 0.6s var(--ease-out) forwards;
}

/* ---- PULSE CTA ---- */
.pulse-cta {
    animation: pulse-glow 2.5s ease-in-out infinite;
}

/* ---- BACKGROUND GRAIN TEXTURE ---- */
.grain::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}