/* ===================================
   MODERN CSS EFFECTS
   Premium Visual Enhancements
   =================================== */

/* ===== 1. CONTAINER QUERIES ===== */
/* Enable container query context */
.tool-grid,
.tools-grid {
    container-type: inline-size;
    container-name: tools-container;
}

/* Tool cards adapt to container width */
@container tools-container (max-width: 600px) {
    .tool-card {
        flex-direction: column;
        text-align: center;
    }

    .tool-card .tool-icon {
        margin-bottom: 0.5rem;
    }
}

@container tools-container (min-width: 601px) and (max-width: 900px) {
    .tool-card {
        padding: 1rem;
    }
}

/* ===== 2. SCROLL-DRIVEN ANIMATIONS ===== */
/* Fade in elements as they scroll into view */
@supports (animation-timeline: view()) {

    .tool-card,
    .howto-step,
    .hub-header,
    .trust-badge {
        animation: fadeSlideUp linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 100%;
    }
}

@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

/* Fallback: Traditional scroll animation with IntersectionObserver support */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered animation for children */
.scroll-reveal-stagger>* {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.scroll-reveal-stagger.visible>*:nth-child(1) {
    transition-delay: 0ms;
    opacity: 1;
    transform: translateY(0);
}

.scroll-reveal-stagger.visible>*:nth-child(2) {
    transition-delay: 100ms;
    opacity: 1;
    transform: translateY(0);
}

.scroll-reveal-stagger.visible>*:nth-child(3) {
    transition-delay: 200ms;
    opacity: 1;
    transform: translateY(0);
}

.scroll-reveal-stagger.visible>*:nth-child(4) {
    transition-delay: 300ms;
    opacity: 1;
    transform: translateY(0);
}

.scroll-reveal-stagger.visible>*:nth-child(5) {
    transition-delay: 400ms;
    opacity: 1;
    transform: translateY(0);
}

.scroll-reveal-stagger.visible>*:nth-child(6) {
    transition-delay: 500ms;
    opacity: 1;
    transform: translateY(0);
}

/* ===== 3. ANIMATED GRADIENT BORDERS ===== */
.gradient-border {
    position: relative;
    background: var(--color-bg-card);
    border-radius: var(--border-radius-xl);
    overflow: hidden;
}

.gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: inherit;
    background: linear-gradient(135deg,
            #a855f7,
            #ec4899,
            #3b82f6,
            #06b6d4,
            #a855f7);
    background-size: 300% 300%;
    animation: gradientFlow 4s ease infinite;
    -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;
    pointer-events: none;
}

@keyframes gradientFlow {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

/* Glow effect on hover */
.gradient-border:hover::before {
    animation-duration: 2s;
    filter: blur(2px);
}

.gradient-border:hover::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: inherit;
    filter: blur(8px);
    opacity: 0.4;
    z-index: -1;
}

/* ===== 4. MOUSE TRACKING GRADIENT (Hero) ===== */
.hero-gradient-track {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.hero-gradient-track::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle,
            hsla(265, 85%, 60%, 0.3) 0%,
            hsla(320, 85%, 55%, 0.15) 30%,
            transparent 70%);
    transform: translate(var(--mouse-x, 50%), var(--mouse-y, 50%)) translate(-50%, -50%);
    transition: transform 0.3s ease-out;
}

/* Light theme adjustment */
[data-theme="light"] .hero-gradient-track::before {
    background: radial-gradient(circle,
            hsla(265, 85%, 60%, 0.15) 0%,
            hsla(320, 85%, 55%, 0.08) 30%,
            transparent 70%);
}

/* ===== 5. 3D CARD TILT ===== */
.card-3d {
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: transform 0.3s ease-out;
}

.card-3d:hover {
    transform: rotateY(calc(var(--rotate-x, 0) * 1deg)) rotateX(calc(var(--rotate-y, 0) * -1deg));
}

.card-3d::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            hsla(0, 0%, 100%, 0.1) 0%,
            transparent 50%,
            hsla(0, 0%, 0%, 0.05) 100%);
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card-3d:hover::after {
    opacity: 1;
}

/* ===== 6. FLOATING PARTICLES (Full Page) ===== */
.particles-bg {
    position: fixed;
    top: 70px;
    /* Below header */
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.particle {
    position: absolute;
    border-radius: 50%;
    animation: floatParticle linear infinite;
    box-shadow: 0 0 10px currentColor;
    opacity: 0;
}

@keyframes floatParticle {
    0% {
        transform: translateY(100vh) scale(0);
        opacity: 0;
    }

    5% {
        opacity: 0.8;
        transform: translateY(95vh) scale(1);
    }

    95% {
        opacity: 0.8;
        transform: translateY(5vh) scale(1);
    }

    100% {
        transform: translateY(-10vh) scale(0.5);
        opacity: 0;
    }
}

/* ===== 7. ENHANCED BUTTON EFFECTS ===== */
.btn-glow {
    position: relative;
    overflow: hidden;
}

.btn-glow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, hsla(0, 0%, 100%, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease;
}

.btn-glow:hover::before {
    width: 300px;
    height: 300px;
}

/* Shine effect */
.btn-shine {
    position: relative;
    overflow: hidden;
}

.btn-shine::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -100%;
    width: 50%;
    height: 200%;
    background: linear-gradient(90deg,
            transparent,
            hsla(0, 0%, 100%, 0.3),
            transparent);
    transform: skewX(-25deg);
    transition: left 0.7s ease;
}

.btn-shine:hover::after {
    left: 150%;
}

/* ===== 8. TEXT REVEAL ANIMATION ===== */
.text-reveal {
    overflow: hidden;
}

.text-reveal span {
    display: inline-block;
    transform: translateY(100%);
    animation: textReveal 0.6s ease forwards;
}

@keyframes textReveal {
    to {
        transform: translateY(0);
    }
}

/* ===== 9. SMOOTH PAGE TRANSITIONS ===== */
@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.3s;
}

::view-transition-old(root) {
    animation: fadeOut 0.3s ease-out;
}

::view-transition-new(root) {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* ===== 10. ACCESSIBILITY: REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .scroll-reveal {
        opacity: 1;
        transform: none;
    }

    .particle {
        display: none;
    }
}