/* =========================================
   GOD TIER CSS - VISUALS & EFFECTS
   ========================================= */

/* 🧲 Magnetic Button Base */
.magnetic-btn {
    display: inline-block;
    /* Transformation handled by JS */
    will-change: transform;
}

/* 🎇 God Particle (Confetti) */
.god-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #0cd9d9;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    animation: particle-fly 0.8s forwards ease-out;
    box-shadow: 0 0 10px #0cd9d9;
}

@keyframes particle-fly {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(var(--tx), var(--ty)) scale(0);
        opacity: 0;
    }
}

/* ⌨️ Typewriter Effect */
.typewriter {
    overflow: hidden;
    /* Ensures the content is not revealed until the animation */
    white-space: nowrap;
    /* Keeps the content on a single line */
    border-right: .15em solid orange;
    /* The typwriter cursor */
    animation:
        typing 3.5s steps(40, end),
        blink-caret .75s step-end infinite;
    display: inline-block;
    max-width: fit-content;
}

@keyframes typing {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

@keyframes blink-caret {

    from,
    to {
        border-color: transparent
    }

    50% {
        border-color: #0cd9d9;
    }
}

/* 🧬 RGB Glitch Effect */
.glitch-hover {
    position: relative;
    /* Ensure stacking context */
    display: inline-block;
}

.glitch-hover:hover {
    animation: glitch-skew 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
    color: #fff;
}

.glitch-hover:hover:before,
.glitch-hover:hover:after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
}

.glitch-hover:hover:before {
    color: #0cd9d9;
    z-index: -1;
    animation: glitch-anim-1 2s infinite linear alternate-reverse;
}

.glitch-hover:hover:after {
    color: #ff00ff;
    z-index: -2;
    animation: glitch-anim-2 2s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 {
    0% {
        clip-path: inset(20% 0 80% 0);
        transform: translate(-2px, 0);
    }

    20% {
        clip-path: inset(60% 0 10% 0);
        transform: translate(2px, 0);
    }

    40% {
        clip-path: inset(40% 0 50% 0);
        transform: translate(-2px, 0);
    }

    60% {
        clip-path: inset(80% 0 5% 0);
        transform: translate(2px, 0);
    }

    80% {
        clip-path: inset(10% 0 70% 0);
        transform: translate(-2px, 0);
    }

    100% {
        clip-path: inset(30% 0 20% 0);
        transform: translate(2px, 0);
    }
}

@keyframes glitch-anim-2 {
    0% {
        clip-path: inset(10% 0 60% 0);
        transform: translate(2px, 0);
    }

    20% {
        clip-path: inset(30% 0 20% 0);
        transform: translate(-2px, 0);
    }

    40% {
        clip-path: inset(70% 0 10% 0);
        transform: translate(2px, 0);
    }

    60% {
        clip-path: inset(20% 0 50% 0);
        transform: translate(-2px, 0);
    }

    80% {
        clip-path: inset(60% 0 30% 0);
        transform: translate(2px, 0);
    }

    100% {
        clip-path: inset(40% 0 80% 0);
        transform: translate(-2px, 0);
    }
}

@keyframes glitch-skew {
    0% {
        transform: skew(0deg);
    }

    20% {
        transform: skew(-2deg);
    }

    40% {
        transform: skew(2deg);
    }

    60% {
        transform: skew(-1deg);
    }

    80% {
        transform: skew(1deg);
    }

    100% {
        transform: skew(0deg);
    }
}

/* ⚡ Power Line Connector */
.god-connector-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 50;
    /* Boosted to sit above standard content */
    overflow: visible;
}

.god-connection-path {
    fill: none;
    stroke: #0cd9d9;
    stroke-width: 3;
    /* Thicker */
    stroke-linecap: round;
    filter: drop-shadow(0 0 8px #0cd9d9);
    stroke-dasharray: 10;
    animation: flow-energy 1s linear infinite;
    opacity: 0.8;
    /* More visible */
}

@keyframes flow-energy {
    to {
        stroke-dashoffset: -20;
    }
}

/* 🌅 Fade Slide Up (Replacement for Typewriter) */
.fade-slide-up {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
    display: inline-block;
}

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