/* ============================================================
   VISION INFINITE — Animations
   ============================================================ */

/* ─── Reveal Animations ──────────────────────────────────── */
.reveal-up,
.reveal-left,
.reveal-right {
    opacity: 0;
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.reveal-up    { transform: translateY(50px); }
.reveal-left  { transform: translateX(-50px); }
.reveal-right { transform: translateX(50px); }

.reveal-up.visible,
.reveal-left.visible,
.reveal-right.visible {
    opacity: 1;
    transform: translate(0, 0);
}

/* ─── Delay Utilities ────────────────────────────────────── */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }
.delay-6 { transition-delay: 0.6s; }

/* ─── Hero Title Glitch ──────────────────────────────────── */
.hero-title .title-line {
    display: block;
    animation: titleSlide 1.2s var(--ease-out) both;
}

.hero-title .title-infinite {
    animation-delay: 0.15s;
}

@keyframes titleSlide {
    from {
        opacity: 0;
        transform: translateY(60px) skewY(3deg);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0) skewY(0deg);
        filter: blur(0);
    }
}

.service-card::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(192, 57, 43, 0.06),
        transparent
    );
    transform: skewX(-15deg);
    transition: left 0s;
    z-index: 3;
    pointer-events: none;
}

.service-card:hover::after {
    left: 160%;
    transition: left 0.7s var(--ease-out);
}

/* ─── Crimson Pulse ──────────────────────────────────────── */
@keyframes goldPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0.4); }
    50%       { box-shadow: 0 0 0 12px rgba(192, 57, 43, 0); }
}

.btn-primary:focus-visible {
    animation: goldPulse 1.5s ease-in-out infinite;
}

/* ─── Counter Tick ───────────────────────────────────────── */
@keyframes counterTick {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.stat-num.counting {
    animation: counterTick 0.1s var(--ease-out);
}

/* ─── Nav Link Underline ─────────────────────────────────── */
@keyframes underlineIn {
    from { width: 0; }
    to   { width: calc(100% - 32px); }
}

/* ─── About Cards Float ──────────────────────────────────── */
.visual-card.card-1 { animation: floatCard 5s ease-in-out infinite; }
.visual-card.card-2 { animation: floatCard 5s ease-in-out infinite 1.25s; }
.visual-card.card-3 { animation: floatCard 5s ease-in-out infinite 2.5s; }
.visual-card.card-4 { animation: floatCard 5s ease-in-out infinite 3.75s; }

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

.visual-card:hover { animation-play-state: paused; }

/* ─── Form Focus Ring ────────────────────────────────────── */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.15);
}

/* ─── Hamburger Animate ──────────────────────────────────── */
.hamburger.active span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.hamburger.active span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

/* ─── Page Load ──────────────────────────────────────────── */
body {
    animation: pageFadeIn 0.5s ease-out both;
}

@keyframes pageFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ─── Crimson Line Wipe ──────────────────────────────────── */
.section-label {
    position: relative;
    padding-bottom: 8px;
}

.section-label::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 2px;
    background: var(--crimson);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s var(--ease-out) 0.3s;
}

.section-label.visible::after {
    transform: scaleX(1);
}

/* ─── Contact Form Input Shine ───────────────────────────── */
.form-group {
    position: relative;
}

.form-group::after {
    content: '';
    position: absolute;
    bottom: 0; left: 18px; right: 18px;
    height: 2px;
    background: var(--crimson);
    transform: scaleX(0);
    transition: transform 0.4s var(--ease-out);
    pointer-events: none;
}

.form-group:focus-within::after {
    transform: scaleX(1);
}

/* ─── Why Items ──────────────────────────────────────────── */
.why-item {
    position: relative;
    padding-left: 8px;
    transition: padding-left 0.3s;
}

.why-item::before {
    content: '';
    position: absolute;
    left: 0; top: 28px;
    width: 0; height: calc(100% - 56px);
    background: var(--crimson);
    opacity: 0.4;
    transition: width 0.3s var(--ease-out);
}

.why-item:hover::before { width: 3px; }

/* ─── Marquee hover pause ────────────────────────────────── */
.marquee-strip:hover .marquee-track {
    animation-play-state: paused;
}

/* ─── Scroll progress bar ────────────────────────────────── */
.scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--crimson-deep), var(--crimson), var(--crimson-bright));
    z-index: 9997;
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 0.1s linear;
}