/*==================================================
    HIIRAGI HITSUGI Official Website

    animation.css
    Version : 0.3.0
==================================================*/



/*==================================================
    Animation Variables
==================================================*/

:root{

    --transition-fast:.25s;

    --transition:.45s;

    --transition-slow:.8s;

}



/*==================================================
    Initial State
==================================================*/

.fade-up,
.fade-down,
.fade-left,
.fade-right,
.zoom-in,
.blur-in{

    opacity:0;

    will-change:
        transform,
        opacity;

}



/*==================================================
    Fade Up
==================================================*/

.fade-up{

    transform:

        translateY(80px);

}



/*==================================================
    Fade Down
==================================================*/

.fade-down{

    transform:

        translateY(-80px);

}



/*==================================================
    Fade Left
==================================================*/

.fade-left{

    transform:

        translateX(-80px);

}



/*==================================================
    Fade Right
==================================================*/

.fade-right{

    transform:

        translateX(80px);

}



/*==================================================
    Zoom
==================================================*/

.zoom-in{

    transform:

        scale(.8);

}



/*==================================================
    Blur
==================================================*/

.blur-in{

    filter:

        blur(20px);

}



/*==================================================
    Hero
==================================================*/

.hero-sub{

    will-change:
        transform,
        opacity;

}



.hero-content h1{

    will-change:
        transform,
        opacity;

}



.hero-text{

    will-change:
        transform,
        opacity;

}



.hero-buttons{

    will-change:
        transform,
        opacity;

}



/*==================================================
    Hero Grid Animation
==================================================*/

.hero-grid{

    animation:

        gridMove

        18s

        linear

        infinite;

}



@keyframes gridMove{

    from{

        background-position:

            0 0;

    }

    to{

        background-position:

            0 120px;

    }

}



/*==================================================
    Button
==================================================*/

#explore{

    transition:

        transform .35s,

        box-shadow .35s,

        background .35s;

}



.secondary-button{

    transition:

        transform .35s,

        color .35s,

        border-color .35s;

}



#explore:hover,

.secondary-button:hover{

    transform:

        translateY(-6px);

}



/*==================================================
    Skills
==================================================*/

.skill-card{

    transition:

        transform .45s,

        box-shadow .45s,

        border-color .45s;

}



.skill-card:hover{

    transform:

        translateY(-12px)

        rotateX(6deg);

}



/*==================================================
    Works
==================================================*/

.work-card{

    transform-style:

        preserve-3d;

}



.work-card img{

    transition:

        transform .8s;

}



.work-card:hover img{

    transform:

        scale(1.08);

}



/*==================================================
    Floating Animation
==================================================*/

.float{

    animation:

        floating

        5s

        ease-in-out

        infinite;

}



@keyframes floating{

    0%{

        transform:

            translateY(0);

    }

    50%{

        transform:

            translateY(-10px);

    }

    100%{

        transform:

            translateY(0);

    }

}



/*==================================================
    Pulse
==================================================*/

.pulse{

    animation:

        pulse

        2.5s

        infinite;

}



@keyframes pulse{

    0%{

        transform:

            scale(1);

    }

    50%{

        transform:

            scale(1.05);

    }

    100%{

        transform:

            scale(1);

    }

}



/*==================================================
    Rotate
==================================================*/

.rotate-slow{

    animation:

        rotateSlow

        25s

        linear

        infinite;

}



@keyframes rotateSlow{

    from{

        transform:

            rotate(0deg);

    }

    to{

        transform:

            rotate(360deg);

    }

}



/*==================================================
    Neon Flicker
==================================================*/

.neon{

    animation:

        neon

        4s

        infinite;

}



@keyframes neon{

    0%{

        opacity:.85;

    }

    25%{

        opacity:1;

    }

    26%{

        opacity:.7;

    }

    27%{

        opacity:1;

    }

    60%{

        opacity:.95;

    }

    100%{

        opacity:1;

    }

}



/*==================================================
    Scroll Indicator
==================================================*/

.scroll-indicator{

    animation:

        indicator

        2.2s

        infinite;

}



@keyframes indicator{

    0%{

        opacity:.4;

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:.4;

    }

}



/*==================================================
    Section Scroll Atmosphere
==================================================*/

main > section:not(#hero) {
    isolation: isolate;
}

main > section:not(#hero) > .section-container {
    position: relative;
    z-index: 1;
}

.section-atmosphere {
    position: absolute;
    top: 16%;
    right: -18%;
    width: clamp(26rem, 58vw, 56rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 38% 42%, rgba(0, 212, 255, .13), transparent 34%),
        radial-gradient(circle at 62% 58%, rgba(123, 97, 255, .08), transparent 48%);
    opacity: .16;
    pointer-events: none;
    transform: translate3d(0, 0, 0);
    contain: strict;
    z-index: 0;
}

.section-atmosphere::after {
    content: "";
    position: absolute;
    inset: 16%;
    border: 1px solid rgba(255, 255, 255, .05);
    border-radius: inherit;
}

#skills .section-atmosphere,
#contact .section-atmosphere {
    right: auto;
    left: -20%;
}

#works .section-atmosphere { top: 8%; }
#contact .section-atmosphere { top: -12%; }

.section-divider {
    position: absolute;
    top: 0;
    right: var(--page-gutter);
    left: var(--page-gutter);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .09) 24%, rgba(0, 212, 255, .34) 50%, rgba(255, 255, 255, .09) 76%, transparent);
    opacity: 0;
    pointer-events: none;
    transform: scaleX(0);
    transform-origin: center;
    z-index: 2;
}

html.scroll-effects-active .section-atmosphere {
    will-change: transform, opacity;
}

/*==================================================
    Accessibility
==================================================*/

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

*{

    animation:none!important;

    transition:none!important;

}

.section-atmosphere { display: none; }
.section-divider { opacity: 1; transform: scaleX(1); }

}



/*==================================================
    Performance
==================================================*/

.hero-content,
.skill-card,
.work-card,
.hero-grid,
.hero-glow{

    backface-visibility:hidden;

    transform:

        translateZ(0);

}

/* Premium reveal foundation */
@media (prefers-reduced-motion: no-preference) {
    main > section:not(#hero):not(#showcase) .section-container {
        will-change: transform, opacity;
    }

    .section-title {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 16px;
    }

    .section-title::after {
        content: "";
        width: clamp(46px, 6vw, 92px);
        height: 1px;
        background: linear-gradient(90deg, var(--cyan2), transparent);
        opacity: .72;
    }
}


/* Hero Static Performance Mode / Version 4.11.0 */
#hero .hero-sub,
#hero .hero-title,
#hero .hero-title span,
#hero .hero-text,
#hero .hero-buttons,
#hero .hero-social,
#hero .scroll-indicator,
#hero .scroll-indicator span {
    animation: none !important;
    transform: none;
    will-change: auto;
}