/* ============================================
   NOMAC - Animations
   ============================================ */

/* ---------- Glitch Effect ---------- */
@keyframes glitch-text {
    0%, 100% { transform: translate(0); }
    2% { transform: translate(-3px, 1px); }
    4% { transform: translate(3px, -1px); }
    6% { transform: translate(0); }
    42% { transform: translate(0); }
    44% { transform: translate(-2px, 2px); }
    46% { transform: translate(2px, -1px); }
    48% { transform: translate(0); }
}

@keyframes glitch-before {
    0%, 100% { transform: translate(0); }
    2% { transform: translate(3px, 0); }
    4% { transform: translate(-3px, 0); }
    6% { transform: translate(0); }
    42% { transform: translate(0); }
    44% { transform: translate(4px, 0); }
    46% { transform: translate(-2px, 0); }
    48% { transform: translate(0); }
}

@keyframes glitch-after {
    0%, 100% { transform: translate(0); }
    2% { transform: translate(-3px, 0); }
    4% { transform: translate(3px, 0); }
    6% { transform: translate(0); }
    42% { transform: translate(0); }
    44% { transform: translate(-4px, 0); }
    46% { transform: translate(2px, 0); }
    48% { transform: translate(0); }
}

/* ---------- Scroll Line ---------- */
@keyframes scrollLine {
    0% {
        opacity: 1;
        transform: scaleY(0);
        transform-origin: top;
    }
    50% {
        opacity: 1;
        transform: scaleY(1);
        transform-origin: top;
    }
    51% {
        transform: scaleY(1);
        transform-origin: bottom;
    }
    100% {
        opacity: 0.3;
        transform: scaleY(0);
        transform-origin: bottom;
    }
}

/* ---------- Marquee ---------- */
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ---------- Placeholder Spin ---------- */
@keyframes placeholderSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ---------- Grid Cell Pulse ---------- */
@keyframes cellPulse {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.15; }
}

.grid-cell::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-accent);
    animation: cellPulse 3s ease-in-out infinite;
}

.grid-cell[data-delay="0"]::before { animation-delay: 0s; }
.grid-cell[data-delay="1"]::before { animation-delay: 0.3s; }
.grid-cell[data-delay="2"]::before { animation-delay: 0.6s; }
.grid-cell[data-delay="3"]::before { animation-delay: 0.9s; }
.grid-cell[data-delay="4"]::before { animation-delay: 1.2s; }
.grid-cell[data-delay="5"]::before { animation-delay: 1.5s; }
.grid-cell[data-delay="6"]::before { animation-delay: 1.8s; }
.grid-cell[data-delay="7"]::before { animation-delay: 2.1s; }
.grid-cell[data-delay="8"]::before { animation-delay: 2.4s; }

/* ---------- Float Animation ---------- */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* ---------- Scan Line ---------- */
@keyframes scanLine {
    0% { top: -5%; }
    100% { top: 105%; }
}

.about-visual-frame::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 5%;
    background: linear-gradient(
        180deg,
        transparent,
        rgba(200, 255, 0, 0.06),
        transparent
    );
    animation: scanLine 4s linear infinite;
    z-index: 3;
    pointer-events: none;
}

/* ---------- Hero Word Hover Glitch ---------- */
.hero-title-word::before,
.hero-title-word::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

.hero-title-word::before {
    color: #ff0040;
}

.hero-title-word::after {
    color: #00f0ff;
}

.hero-title-word:hover::before {
    opacity: 0.8;
    animation: glitch-before 0.3s steps(2) forwards;
}

.hero-title-word:hover::after {
    opacity: 0.8;
    animation: glitch-after 0.3s steps(2) forwards;
}

/* ---------- Service Card Shine ---------- */
@keyframes cardShine {
    0% { left: -100%; }
    100% { left: 200%; }
}

.service-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(200, 255, 0, 0.03),
        transparent
    );
    pointer-events: none;
}

.service-card:hover::after {
    animation: cardShine 0.8s forwards;
}

/* ---------- Work Card Media Scale ---------- */
.work-card-media .work-card-placeholder {
    transition: transform 0.8s var(--ease-out);
}

.work-card:hover .work-card-media .work-card-placeholder {
    transform: scale(1.05);
}

/* ---------- Button Ripple ---------- */
@keyframes btnRipple {
    0% {
        transform: scale(0);
        opacity: 0.5;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

/* ---------- Nav Link Hover ---------- */
.nav-link::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: var(--color-accent);
    transform: translateY(100%);
    transition: transform 0.3s var(--ease-out);
    padding: 5px 0;
}

.nav-link:hover::before {
    transform: translateY(0);
}

.nav-link {
    overflow: hidden;
}

/* ---------- Magnetic Button Effect ---------- */
.btn {
    transition: all var(--transition-fast), transform 0.2s;
}

/* ---------- Particle Fade ---------- */
@keyframes particleFade {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-50px) scale(0);
    }
}

/* ---------- Text Scramble ---------- */
@keyframes textFlicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
    25%, 75% { opacity: 0.95; }
}

.hero-tag {
    animation: textFlicker 4s infinite;
}

/* ---------- Counter Animation Aid ---------- */
.about-stat-number {
    transition: all 0.1s;
    display: inline-block;
    min-width: 2ch;
}

/* ---------- Smooth Section Transitions ---------- */
.section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--color-border),
        transparent
    );
}