/* =============================================
   ANIMATIONS — Scroll reveals, transitions, misc
   ============================================= */

/* Block reveal stagger */
.content-block.visible .block-title {
    animation: fadeInLeft 0.55s ease-out 0.15s both;
}

.content-block.visible .block-content {
    animation: fadeInUp 0.55s ease-out 0.25s both;
}

.content-block.visible .data-table-wrapper,
.content-block.visible .rating-cards {
    animation: fadeInUp 0.55s ease-out 0.32s both;
}

.content-block.visible .tech-stack {
    animation: fadeInUp 0.55s ease-out 0.3s both;
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-18px);
    }

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

/* Block border gradient reveal on hover */
.content-block::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 28px;
    padding: 1px;
    background: linear-gradient(135deg,
            rgba(100, 160, 255, 0.55) 0%,
            rgba(100, 255, 180, 0.35) 50%,
            rgba(176, 100, 255, 0.55) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
    pointer-events: none;
}

.content-block:hover::after {
    opacity: 0.8;
}

/* Cursor trail */
@media (min-width: 1024px) {
    .cursor-trail {
        position: fixed;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(100, 160, 255, 0.7), transparent);
        pointer-events: none;
        z-index: 9000;
        mix-blend-mode: screen;
        animation: trailFadeOut 0.5s ease-out forwards;
    }

    @keyframes trailFadeOut {
        to {
            opacity: 0;
            transform: scale(0);
        }
    }
}

/* Focus states */
a:focus-visible,
button:focus-visible {
    outline: 2px solid #64a0ff;
    outline-offset: 3px;
    border-radius: 4px;
}

/* Audio visualizer */
#visualizer-canvas {
    mix-blend-mode: screen;
    opacity: 0.7;
}

@media (max-width: 768px) {
    #visualizer-canvas {
        opacity: 0.6;
    }

    .audio-mode-btn {
        top: 14px;
        left: 14px;
    }

    .social-links {
        top: 14px;
        right: 14px;
    }
}

/* Performance hints */
.content-block,
.data-table,
.rating-card {
    will-change: transform, opacity;
}

.content-block.visible {
    will-change: auto;
}