/* ============================================================
   GreenBooksWorld.com — Animations CSS
   ============================================================ */

/* ── Scroll Reveal ─────────────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-left.revealed {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-right.revealed {
    opacity: 1;
    transform: translateX(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.88);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

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

/* stagger delays */
.delay-100 {
    transition-delay: 0.10s;
}

.delay-200 {
    transition-delay: 0.20s;
}

.delay-300 {
    transition-delay: 0.30s;
}

.delay-400 {
    transition-delay: 0.40s;
}

.delay-500 {
    transition-delay: 0.50s;
}

.delay-600 {
    transition-delay: 0.60s;
}

/* ── Counter Animation ─────────────────────────────────────── */
.counter {
    transition: opacity 0.5s;
}

/* ── World Map Animations ──────────────────────────────────── */
.map-route {
    stroke-dasharray: 8 5;
    stroke-dashoffset: 0;
    animation: dash-move 2.5s linear infinite;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.map-route.active {
    opacity: 1;
}

@keyframes dash-move {
    to {
        stroke-dashoffset: -52;
    }
}

.map-plane {
    animation: fly-along 2.5s linear infinite;
    opacity: 0;
    transition: opacity 0.5s;
}

.map-plane.active {
    opacity: 1;
}

@keyframes fly-along {
    0% {
        transform: translateX(0) translateY(0);
    }

    100% {
        transform: translateX(2px) translateY(1px);
    }
}

.origin-pulse {
    animation: origin-pulse 2s ease-in-out infinite;
}

@keyframes origin-pulse {

    0%,
    100% {
        r: 5;
        opacity: 1;
    }

    50% {
        r: 8;
        opacity: 0.7;
    }
}

.origin-ring {
    animation: ring-expand 2s ease-out infinite;
}

@keyframes ring-expand {
    0% {
        r: 8;
        opacity: 0.6;
        stroke-width: 2;
    }

    100% {
        r: 20;
        opacity: 0;
        stroke-width: 0.5;
    }
}

/* ── Book flying icon on map ───────────────────────────────── */
@keyframes book-fly {
    0% {
        transform: translate(0, 0) scale(0.5);
        opacity: 0;
    }

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

    85% {
        opacity: 1;
    }

    100% {
        transform: translate(var(--dx), var(--dy)) scale(0.7);
        opacity: 0;
    }
}

.book-fly-icon {
    position: absolute;
    font-size: 1rem;
    pointer-events: none;
    animation: book-fly 3s ease-in-out infinite;
}

/* ── Hero slide text entrance ──────────────────────────────── */
@keyframes slide-up-fade {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

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

.slide-label {
    animation: slide-up-fade .6s ease both;
}

.slide-content h1 {
    animation: slide-up-fade .7s .1s ease both;
}

.slide-content p {
    animation: slide-up-fade .7s .2s ease both;
}

.slide-actions {
    animation: slide-up-fade .7s .3s ease both;
}

/* ── Hover float card ──────────────────────────────────────── */
@keyframes float-card {

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

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

.float-card {
    animation: float-card 4s ease-in-out infinite;
}

/* ── Shimmer loading ───────────────────────────────────────── */
@keyframes shimmer {
    0% {
        background-position: -400px 0;
    }

    100% {
        background-position: 400px 0;
    }
}

.skeleton {
    background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%);
    background-size: 800px 100%;
    animation: shimmer 1.4s infinite linear;
    border-radius: var(--radius-sm);
}

/* ── Page load fade ─────────────────────────────────────────── */
@keyframes page-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

body {
    animation: page-fade-in 0.4s ease;
}

/* ── Spin ──────────────────────────────────────────────────── */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.spin {
    animation: spin 1s linear infinite;
}

/* ── Bounce-in ──────────────────────────────────────────────── */
@keyframes bounce-in {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }

    50% {
        transform: scale(1.05);
    }

    70% {
        transform: scale(0.95);
    }

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

.bounce-in {
    animation: bounce-in 0.5s ease both;
}

/* ── Nav scroll shrink ──────────────────────────────────────── */
.navbar.scrolled {
    height: 60px;
}

.navbar {
    transition: height 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}