/* ============================================================
   ANIMATIONS.CSS — Site-wide scroll & entrance animations
   ============================================================ */

/* ── Reveal on Scroll (base states) ── */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.75s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.reveal-left  { transform: translateX(-50px); }
.reveal.reveal-right { transform: translateX(50px); }
.reveal.reveal-scale { transform: scale(0.88); }
.reveal.reveal-up    { transform: translateY(60px); }

.reveal.visible {
    opacity: 1;
    transform: none;
}

/* Stagger delays for grid children */
.stagger > *:nth-child(1)  { transition-delay: 0.05s; }
.stagger > *:nth-child(2)  { transition-delay: 0.15s; }
.stagger > *:nth-child(3)  { transition-delay: 0.25s; }
.stagger > *:nth-child(4)  { transition-delay: 0.35s; }
.stagger > *:nth-child(5)  { transition-delay: 0.45s; }
.stagger > *:nth-child(6)  { transition-delay: 0.55s; }
.stagger > *:nth-child(7)  { transition-delay: 0.65s; }
.stagger > *:nth-child(8)  { transition-delay: 0.75s; }
.stagger > *:nth-child(9)  { transition-delay: 0.85s; }
.stagger > *:nth-child(10) { transition-delay: 0.95s; }

/* ── Floating particles (hero background) ── */
.particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(194, 24, 91, 0.12);
    animation: floatParticle linear infinite;
    pointer-events: none;
}

@keyframes floatParticle {
    0%   { transform: translateY(0) rotate(0deg); opacity: 0.8; }
    50%  { opacity: 0.3; }
    100% { transform: translateY(-120px) rotate(360deg); opacity: 0; }
}

/* ── Typewriter cursor blink ── */
.typewriter-cursor {
    display: inline-block;
    width: 3px;
    height: 1em;
    background: #C2185B;
    margin-left: 4px;
    vertical-align: middle;
    animation: blinkCursor 0.75s step-end infinite;
}

@keyframes blinkCursor {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* ── Pulse ring on CTA buttons ── */
.btn-pulse {
    position: relative;
}
.btn-pulse::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50px;
    border: 2px solid rgba(194, 24, 91, 0.5);
    animation: pulseRing 2s ease-out infinite;
}

@keyframes pulseRing {
    0%   { transform: scale(1);   opacity: 1; }
    70%  { transform: scale(1.15); opacity: 0; }
    100% { transform: scale(1.15); opacity: 0; }
}

/* ── Shimmer loading effect for images ── */
@keyframes shimmer {
    0%   { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

/* ── Number counter pulse ── */
@keyframes counterPop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.12); }
    100% { transform: scale(1); }
}

.counter-popping { animation: counterPop 0.3s ease; }

/* ── Smooth section entrance ── */
@keyframes sectionSlideIn {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Logo spin on hover ── */
.logo img {
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.logo:hover img { transform: scale(1.06) rotate(-2deg); }

/* ── Card tilt on hover (via JS adds class) ── */
.tilt-card {
    transition: transform 0.2s ease;
    transform-style: preserve-3d;
}

/* ── Gradient border animation ── */
@keyframes rotateBorder {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ── Floating badge animation ── */
.floating {
    animation: floating 3s ease-in-out infinite;
}

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

/* ── Entrance for hero elements ── */
.hero-text-box .section-tag { animation: fadeInUp 0.8s ease both 0.2s; }
.hero-text-box h1           { animation: fadeInUp 0.8s ease both 0.45s; }
.hero-text-box p            { animation: fadeInUp 0.8s ease both 0.65s; }
.hero-btns-static           { animation: fadeInUp 0.8s ease both 0.85s; }
.hero-trust-badges          { animation: fadeInUp 0.8s ease both 1.05s; }

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

/* ── Sliding marquee for trust bar ── */
.marquee-track {
    display: flex;
    gap: 60px;
    animation: marqueeScroll 25s linear infinite;
    white-space: nowrap;
    will-change: transform;
}

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

/* ── Page transition overlay ── */
.page-transition {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, #880E4F, #C2185B);
    z-index: 99999;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.page-transition.active { transform: scaleY(1); transform-origin: top; }

/* ── Scroll progress bar ── */
#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, #E91E8C, #C2185B, #880E4F);
    z-index: 10000;
    transition: width 0.1s linear;
    border-radius: 0 2px 2px 0;
}