@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* Blinking scale animation */
@keyframes blink-scale {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.85;
    }
}

.animate-blink-scale {
    animation: blink-scale 2s ease-in-out infinite;
}

.animate-blink-scale-delay-1 {
    animation: blink-scale 2s ease-in-out infinite;
    animation-delay: 0.2s;
}

.animate-blink-scale-delay-2 {
    animation: blink-scale 2s ease-in-out infinite;
    animation-delay: 0.4s;
}

/* SVG vibrate effect on link hover */
@keyframes vibrate {
    0%, 100% { transform: translate3d(0,0,0) rotate(0); }
    12% { transform: translate3d(-2px, 0, 0) rotate(-1deg); }
    25% { transform: translate3d(2px, 0, 0) rotate(1deg); }
    37% { transform: translate3d(-1px, 0, 0) rotate(-0.5deg); }
    50% { transform: translate3d(1px, 0, 0) rotate(0.5deg); }
    62% { transform: translate3d(-1px, 0, 0) rotate(-0.5deg); }
    75% { transform: translate3d(2px, 0, 0) rotate(1deg); }
    87% { transform: translate3d(-1px, 0, 0) rotate(-0.5deg); }
}

/* Scoped vibrate helper — apply `vibrate-on-hover` to the anchor */
.vibrate-on-hover svg {
    transition: transform 250ms ease, filter 250ms ease, opacity 200ms ease;
    transform-origin: center;
    will-change: transform;
}
.vibrate-on-hover:hover svg,
.vibrate-on-hover:focus svg {
    animation: vibrate 0.9s cubic-bezier(.25,.46,.45,.94) infinite;
    filter: drop-shadow(0 6px 12px rgba(78,143,255,0.12));
}

/* Respect user's reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .vibrate-on-hover svg,
    .vibrate-on-hover:hover svg,
    .vibrate-on-hover:focus svg {
        animation: none !important;
        transition: none !important;
    }
}

/* Smooth fade-in animation for page sections */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Fade-in section: hidden by default, animates on scroll */
.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
}

.fade-in-section.animate {
    animation: fadeInUp 1s ease-out forwards;
}

/* Respect reduced motion for fade animations */
@media (prefers-reduced-motion: reduce) {
    .fade-in-section {
        opacity: 1;
        transform: translateY(0);
        animation: none !important;
    }
}