/* ================================================
   BLACK ROCKS International — Animation System
   GSAP + CSS Keyframe Animations
   ================================================ */

/* ========== KEYFRAME ANIMATIONS ========== */

/* Pulse dot for hero badge */
@keyframes pulse-dot {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.5);
        opacity: 0.5;
    }
}

/* Scroll indicator line */
@keyframes scroll-line {
    0% {
        top: -30px;
    }

    100% {
        top: 100%;
    }
}

/* Floating animation for decorative elements */
@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* Subtle glow pulse */
@keyframes glow-pulse {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(var(--color-accent-rgb), 0.1);
    }

    50% {
        box-shadow: 0 0 40px rgba(var(--color-accent-rgb), 0.2);
    }
}

/* Background line shimmer */
@keyframes line-shimmer {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(100%);
    }
}

/* Rotate animation */
@keyframes rotate-slow {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ========== BACKGROUND ANIMATED LINES ========== */
.hero__bg-lines span,
.section__bg-lines span,
.footer__bg-lines span {
    overflow: hidden;
}

.hero__bg-lines span::after,
.section__bg-lines span::after,
.footer__bg-lines span::after {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(180deg,
            transparent,
            rgba(var(--color-accent-rgb), 0.06),
            transparent);
    animation: line-shimmer 8s infinite;
}

.hero__bg-lines span:nth-child(2)::after,
.section__bg-lines span:nth-child(2)::after {
    animation-delay: 2s;
}

.hero__bg-lines span:nth-child(3)::after,
.section__bg-lines span:nth-child(3)::after {
    animation-delay: 4s;
}

.hero__bg-lines span:nth-child(4)::after {
    animation-delay: 6s;
}

.hero__bg-lines span:nth-child(5)::after {
    animation-delay: 3s;
}

.section__bg-lines span:nth-child(4)::after {
    animation-delay: 5s;
}

.section__bg-lines span:nth-child(5)::after {
    animation-delay: 7s;
}

.footer__bg-lines span:nth-child(2)::after {
    animation-delay: 3s;
}

.footer__bg-lines span:nth-child(3)::after {
    animation-delay: 6s;
}

/* ========== REVEAL ANIMATION STATES ========== */
/* These are initial states; GSAP will animate them in */
[data-animate] {
    opacity: 0;
    will-change: transform, opacity;
}

[data-animate="fade-up"] {
    transform: translateY(40px);
}

[data-animate="fade-down"] {
    transform: translateY(-40px);
}

[data-animate="fade-right"] {
    transform: translateX(-40px);
}

[data-animate="fade-left"] {
    transform: translateX(40px);
}

[data-animate="scale-up"] {
    transform: scale(0.9);
}

[data-animate="fade-in"] {
    /* just opacity */
}

/* ========== MICRO INTERACTIONS ========== */

/* Link hover underline effect */
.footer__links a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: 0;
    width: 0;
    height: 1px;
    background-color: var(--color-accent);
    transition: width var(--transition-base);
}

.footer__links a {
    position: relative;
}

.footer__links a:hover::after {
    width: 100%;
}

/* Card tilt micro effect */
.service-card,
.value-card {
    will-change: transform;
}

/* Icon bounce on hover */
.contact__info-item:hover .contact__info-icon {
    animation: float 1s ease-in-out;
}

/* Social link animated hover */
.footer__social-link {
    position: relative;
    overflow: hidden;
}

.footer__social-link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
    border-radius: 50%;
    transform: scale(0);
    transition: transform var(--transition-spring);
    z-index: -1;
}

.footer__social-link:hover::before {
    transform: scale(1);
}

.footer__social-link:hover {
    color: var(--color-black);
    border-color: var(--color-accent);
}

/* ========== SMOOTH SECTION TRANSITIONS ========== */
.section {
    will-change: auto;
}

/* ========== MAGNETIC BUTTON STYLES ========== */
.magnetic-btn {
    will-change: transform;
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ========== CURSOR EFFECTS ========== */
/* Custom cursor (optional: enabled via JS) */
.custom-cursor {
    position: fixed;
    width: 20px;
    height: 20px;
    border: 1px solid var(--color-accent);
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s, border-color 0.3s;
    mix-blend-mode: difference;
    display: none;
}

.custom-cursor.is-active {
    width: 50px;
    height: 50px;
    border-color: var(--color-white);
}

@media (pointer: fine) {
    .custom-cursor {
        display: block;
    }
}

/* ========== PRELOADER TRANSITIONS ========== */
.preloader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ========== REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    [data-animate] {
        opacity: 1 !important;
        transform: none !important;
    }

    .hero__title-line .word {
        opacity: 1 !important;
        transform: none !important;
    }

    .hero__badge,
    .hero__subtitle,
    .hero__actions,
    .hero__stats,
    .hero__scroll-indicator {
        opacity: 1 !important;
    }
}