/* ─────────────────────────────────────────────────────────
   OXYGEN V2 PREMIUM EXPERIENCES
   Cinematic Textures, Ambient Glows, Magnetic Interactions
───────────────────────────────────────────────────────── */

/* 1. CINEMATIC FILM GRAIN
   Adds a subtle, moving noise overlay to the entire viewport,
   giving the digital screen the physical texture of premium print/film.
*/
.v2-film-grain {
    position: fixed;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    width: 200%;
    height: 200%;
    background: transparent url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E');
    opacity: 0.03;
    /* Ultra subtle, just enough to break solid colors */
    pointer-events: none;
    z-index: 9999;
    animation: noisePattern 8s steps(10) infinite;
}

@keyframes noisePattern {
    0% {
        transform: translate(0, 0);
    }

    10% {
        transform: translate(-5%, -5%);
    }

    20% {
        transform: translate(-10%, 5%);
    }

    30% {
        transform: translate(5%, -10%);
    }

    40% {
        transform: translate(-5%, 15%);
    }

    50% {
        transform: translate(-10%, 5%);
    }

    60% {
        transform: translate(15%, 0);
    }

    70% {
        transform: translate(0, 10%);
    }

    80% {
        transform: translate(-15%, 0);
    }

    90% {
        transform: translate(10%, 5%);
    }

    100% {
        transform: translate(5%, 0);
    }
}

/* 2. AMBIENT GLOWS
   Soft, moving gradients that sit behind content to create depth
*/
.v2-ambient-glow {
    position: absolute;
    width: 60vw;
    height: 60vw;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0) 70%);
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
    animation: floatGlow 15s ease-in-out infinite alternate;
}

.v2-ambient-glow.top-right {
    top: -10%;
    right: -10%;
}

.v2-ambient-glow.bottom-left {
    bottom: -10%;
    left: -10%;
    animation-delay: -7.5s;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0) 70%);
}

@keyframes floatGlow {
    0% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-5%, 5%) scale(1.1);
    }

    100% {
        transform: translate(5%, -5%) scale(0.9);
    }
}

/* 3. MAGNETIC BUTTON BASE CSS
   Smooth transition states for the Javascript magnetic pull
*/
.magnetic-btn {
    display: inline-flex;
    position: relative;
    /* Remove default transitions on transform so JS can control it smoothly via requestAnimationFrame,
       but keep transitions for colors and shadows */
    transition: background 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
    will-change: transform;
}

.magnetic-btn::after {
    /* Liquid fill effect */
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.1);
    transform: scale(0);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
    z-index: 1;
    pointer-events: none;
}

.magnetic-btn:hover::after {
    transform: scale(1);
    opacity: 1;
}

.magnetic-content {
    /* The span grouping the text/icon inside the button needs its own transform for parallax */
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    z-index: 2;
    pointer-events: none;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 4. TEXT STAGGER REVEAL
   Splits text into characters/words that spin/fade up sequentially.
*/
.text-reveal-wrapper {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    perspective: 800px;
    /* required for rotateX animation to render correctly */
}

.char {
    display: inline-block;
    opacity: 0;
    transform: translateY(100%) rotateX(-90deg);
    transform-origin: bottom center;
    will-change: transform, opacity;
    animation: textSpinUp 0.6s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

@keyframes textSpinUp {
    0% {
        opacity: 0;
        transform: translateY(100%) rotateX(-90deg);
    }

    100% {
        opacity: 1;
        transform: translateY(0) rotateX(0);
    }
}

/* 5. CINEMATIC SCROLL SVG MASKS */
.v2-draw-path {
    fill: none;
    stroke: var(--accent);
    /* Oxygen brand green */
    stroke-width: 2;
    /* JS will calculate and apply stroke-dasharray & offset */
    transition: stroke-dashoffset 0.1s linear;
}

/* 6. PARALLAX IMAGE MASKS */
.v2-parallax-container {
    overflow: hidden;
    position: relative;
    border-radius: 20px;
    /* Mathematical precision masks */
    width: 100%;
    height: 100%;
}

.v2-parallax-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.1);
    /* Give room for parallax */
    transform-origin: center center;
    will-change: transform;
}

/* 7. MOBILE PERFORMANCE OVERRIDES */
@media (max-width: 768px) {

    /* Simplify text reveal animation for mobile to prevent staggered 3D transform lag */
    .char {
        transform: translateY(20px);
        transform-origin: center;
        animation: textFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    @keyframes textFadeUp {
        0% {
            opacity: 0;
            transform: translateY(20px);
        }

        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Completely kill the canvas node network on small devices to guarantee 60fps scrolling */
    #biology-mesh {
        display: none !important;
        visibility: hidden !important;
    }
}