/*==================================================
  TOUCHUPS.CSS
  Reusable Visual Effects & Interactions
  MegaTech Technologies
==================================================*/


/*==================================================
  01. GLASSMORPHISM
==================================================*/

.fx-glass{
    background:rgba(7,17,29,.55);
    border:1px solid rgba(99,232,255,.14);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}


/*==================================================
  02. GLASS GLOW
==================================================*/

.fx-glass-glow{
    box-shadow:
        0 10px 40px rgba(0,0,0,.25),
        0 0 30px rgba(99,232,255,.08);
}

.fx-glass-glow:hover{
    border-color:rgba(99,232,255,.35);

    box-shadow:
        0 15px 45px rgba(0,0,0,.3),
        0 0 35px rgba(99,232,255,.16);
}


/*==================================================
  03. NEON HOVER
==================================================*/

.fx-neon-hover{
    transition:
        transform .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;
}

.fx-neon-hover:hover{
    transform:translateY(-8px);

    border-color:rgba(99,232,255,.4);

    box-shadow:
        0 15px 45px rgba(0,0,0,.3),
        0 0 30px rgba(99,232,255,.18);
}


/*==================================================
  04. FLOATING CARD
==================================================*/

.fx-float{
    transition:transform .45s ease;
}

.fx-float:hover{
    transform:translateY(-10px);
}


/*==================================================
  05. GLASS BUTTON
==================================================*/

.fx-glass-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:13px 24px;

    border:1px solid rgba(99,232,255,.25);
    border-radius:12px;

    background:rgba(99,232,255,.07);

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    color:var(--text);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}

.fx-glass-btn:hover{
    transform:translateY(-3px);

    background:rgba(99,232,255,.12);

    border-color:var(--primary);

    box-shadow:
        0 0 25px rgba(99,232,255,.2);
}


/*==================================================
  06. IMAGE HOVER
==================================================*/

.fx-image-hover{
    overflow:hidden;
}

.fx-image-hover img{
    transition:transform .7s ease;
}

.fx-image-hover:hover img{
    transform:scale(1.06);
}


/*==================================================
  07. SCAN LINE
==================================================*/

.fx-scan{
    position:relative;
    overflow:hidden;
}

.fx-scan::after{
    content:"";

    position:absolute;

    left:-100%;
    top:0;

    width:50%;
    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(99,232,255,.08),
            transparent
        );

    pointer-events:none;

    transition:left .8s ease;
}

.fx-scan:hover::after{
    left:150%;
}


/*==================================================
  08. ANIMATED TOP BORDER
==================================================*/

.fx-border{
    position:relative;
}

.fx-border::before{
    content:"";

    position:absolute;

    top:-1px;
    left:50%;

    width:0;
    height:2px;

    background:var(--primary);

    box-shadow:0 0 12px var(--primary);

    transform:translateX(-50%);

    transition:width .45s ease;

    z-index:2;
}

.fx-border:hover::before{
    width:70%;
}


/*==================================================
  09. NEON BADGE
==================================================*/

.fx-badge{
    display:inline-flex;

    align-items:center;
    gap:7px;

    padding:6px 12px;

    border:1px solid rgba(99,232,255,.25);

    border-radius:50px;

    background:rgba(99,232,255,.06);

    color:var(--primary-light);

    font-size:.72rem;
    font-weight:700;

    letter-spacing:1px;
}

.fx-badge::before{
    content:"";

    width:6px;
    height:6px;

    border-radius:50%;

    background:var(--primary);

    box-shadow:0 0 10px var(--primary);
}


/*==================================================
  10. GRADIENT TEXT
==================================================*/

.fx-gradient-text{
    background:
        linear-gradient(
            90deg,
            var(--primary-light),
            var(--primary)
        );

    -webkit-background-clip:text;
    background-clip:text;

    -webkit-text-fill-color:transparent;
}


/*==================================================
  11. GRID BACKGROUND
==================================================*/

.fx-grid{
    background-image:
        linear-gradient(
            rgba(99,232,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(99,232,255,.035) 1px,
            transparent 1px
        );

    background-size:40px 40px;
}


/*==================================================
  12. CORNER DECORATIONS
==================================================*/

.fx-corners{
    position:relative;
}

.fx-corners::before,
.fx-corners::after{
    content:"";

    position:absolute;

    width:18px;
    height:18px;

    border-color:var(--primary);
    border-style:solid;

    pointer-events:none;
}

.fx-corners::before{
    top:10px;
    left:10px;

    border-width:2px 0 0 2px;
}

.fx-corners::after{
    right:10px;
    bottom:10px;

    border-width:0 2px 2px 0;
}


/*==================================================
  13. PROGRESS BAR
==================================================*/

.fx-progress{
    width:100%;
    height:5px;

    overflow:hidden;

    border-radius:50px;

    background:rgba(99,232,255,.08);
}

.fx-progress span{
    display:block;

    height:100%;

    width:var(--progress,70%);

    border-radius:inherit;

    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--primary-light)
        );

    box-shadow:
        0 0 12px rgba(99,232,255,.5);
}


/*==================================================
  14. FOOTER GLOW
==================================================*/

.fx-footer-glow{
    position:relative;
    overflow:hidden;
}

.fx-footer-glow::before{
    content:"";

    position:absolute;

    width:500px;
    height:500px;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(99,232,255,.1),
            transparent 70%
        );

    filter:blur(20px);

    pointer-events:none;
}


/*==================================================
  15. REVEAL BASE
==================================================*/

.reveal,
.reveal-left,
.reveal-right,
.reveal-scale{
    opacity:0;

    transition:
        opacity .8s ease,
        transform .8s ease;
}

.reveal{
    transform:translateY(35px);
}

.reveal-left{
    transform:translateX(-50px);
}

.reveal-right{
    transform:translateX(50px);
}

.reveal-scale{
    transform:scale(.9);
}


/*==================================================
  16. REVEAL ACTIVE STATE
==================================================*/

.reveal.active,
.reveal-left.active,
.reveal-right.active,
.reveal-scale.active{
    opacity:1;
    transform:none;
}


/*==================================================
  17. REVEAL DELAYS
==================================================*/

.reveal-delay-1{
    transition-delay:.1s;
}

.reveal-delay-2{
    transition-delay:.2s;
}

.reveal-delay-3{
    transition-delay:.3s;
}

.reveal-delay-4{
    transition-delay:.4s;
}


/*==================================================
  18. 3D TILT
==================================================*/

.fx-tilt{
    transform-style:preserve-3d;
    will-change:transform;
}


/*==================================================
  19. TILT INNER DEPTH
==================================================*/

.fx-depth{
    transform:translateZ(30px);
    will-change:transform;
}


/*==================================================
  20. CARD SPOTLIGHT
==================================================*/

.fx-spotlight{
    position:relative;
    overflow:hidden;
}

.fx-spotlight::before{
    content:"";

    position:absolute;

    left:var(--mouse-x,50%);
    top:var(--mouse-y,50%);

    width:220px;
    height:220px;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(99,232,255,.14),
            transparent 70%
        );

    pointer-events:none;

    opacity:0;

    transition:opacity .3s ease;
}

.fx-spotlight:hover::before{
    opacity:1;
}


/*==================================================
  21. PARALLAX
==================================================*/

.fx-parallax{
    will-change:transform;
}


/*==================================================
  22. MAGNETIC BUTTON
==================================================*/

.fx-magnetic{
    display:inline-flex;

    will-change:transform;

    transition:transform .2s ease;
}


/*==================================================
  23. SCROLL PROGRESS
==================================================*/

.scroll-progress{
    position:fixed;

    top:0;
    left:0;

    width:0;
    height:2px;

    background:var(--primary);

    box-shadow:0 0 12px var(--primary);

    z-index:9999;
}


/*==================================================
  24. REDUCED MOTION
==================================================*/

@media(prefers-reduced-motion:reduce){

    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale{
        opacity:1;
        transform:none;
        transition:none;
    }

    .fx-float:hover,
    .fx-neon-hover:hover,
    .fx-glass-btn:hover{
        transform:none;
    }

}