/* =========================
   感情 × 道化師
   EXHIBITION STYLE
========================= */


:root {

    --bg: #080611;
    --bg2: #170d2d;

    --purple: #9b6cff;
    --pink: #ff5c9a;
    --blue: #55ddff;
    --gold: #ffd166;

    --white: #f5f2ff;
    --gray: #aaa4c0;

}




/* RESET */

* {

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html {

    scroll-behavior:smooth;

}


body {

    background:

    radial-gradient(
        circle at top,
        rgba(120,20,40,.8),
        transparent 45%
    ),

    radial-gradient(
        circle at bottom,
        rgba(255,80,80,.15),
        transparent 35%
    ),

    linear-gradient(
        180deg,
        #25050c,
        #09030a
    );


    color:var(--white);

    font-family:

    "Noto Sans JP",
    "Yu Gothic",
    sans-serif;

    overflow-x:hidden;

}

body::before {

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;


    background:

    repeating-linear-gradient(
        90deg,
        rgba(255,40,60,.08) 0px,
        rgba(255,40,60,.08) 80px,
        transparent 160px
    );


    z-index:-1;

}





/* =========================
   LOADING
========================= */


#loading {

    position:fixed;

    inset:0;

    background:#000;

    z-index:9999;


    display:flex;

    justify-content:center;

    align-items:center;


    animation:

    loadingFade 2s forwards;

    animation-delay:3s;

}



.loading-text {

    color:var(--blue);

    letter-spacing:5px;

    line-height:2;

    text-align:center;


    text-shadow:

    0 0 20px var(--blue);

}



@keyframes loadingFade {

    to {

        opacity:0;

        visibility:hidden;

    }

}





/* =========================
   NOISE
========================= */


.noise {

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:50;

    opacity:.08;


    background-image:

    url("assets/noise.png");

}





/* =========================
   HERO
========================= */


.hero {

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;


    background:


    /* スポットライト */
    radial-gradient(
        ellipse at center,
        rgba(255,220,140,.25),
        transparent 35%
    ),


    /* 紫の怪しい光 */
    radial-gradient(
        circle at 80% 20%,
        rgba(155,108,255,.35),
        transparent 30%
    ),


    /* 赤い幕 */
    linear-gradient(
        90deg,
        #18050b,
        #4a101c,
        #18050b
    );


    position:relative;

    overflow:hidden;

}

.hero::before {

    content:"";

    position:absolute;

    inset:0;


    background:

    repeating-linear-gradient(
        90deg,
        rgba(255,255,255,.03) 0px,
        rgba(255,255,255,.03) 40px,
        transparent 80px
    );


    pointer-events:none;

}

body {

background:

radial-gradient(
circle at top,
#4b1625,
#080611 70%
);

}


.hero-content {

    animation:

    showHero 2s ease;

}



.system {

    font-size:12px;

    letter-spacing:8px;

    color:var(--blue);

    margin-bottom:40px;

}



.hero h1 {

    font-size:

    clamp(45px,8vw,100px);


    letter-spacing:10px;


    line-height:1.4;


    text-shadow:


    0 0 20px var(--purple),

    0 0 60px var(--pink);

}



.sub {

    margin-top:30px;

    color:var(--gray);

    letter-spacing:4px;

}




button {

    margin-top:50px;


    padding:

    15px 60px;


    background:transparent;


    border:

    1px solid var(--purple);


    color:var(--white);


    letter-spacing:5px;


    cursor:pointer;


    transition:.4s;

}



button:hover {

    background:var(--purple);


    box-shadow:

    0 0 40px var(--purple);

}





@keyframes showHero {

    from {

        opacity:0;

        transform:

        translateY(50px);

    }


    to {

        opacity:1;

    }

}





/* =========================
   SECTION
========================= */


.section {

    min-height:60vh;


    padding:

    120px 10%;


    text-align:center;

}



.label {

    color:var(--blue);

    font-size:12px;

    letter-spacing:7px;

    margin-bottom:35px;

}



h2 {

    font-size:

    clamp(35px,6vw,70px);


    letter-spacing:8px;


    margin-bottom:40px;


    text-shadow:

    0 0 20px var(--purple);

}



.section p {

    line-height:2.4;

    color:#ddd;

}





/* =========================
   THEME
========================= */


/* =========================
   LOGO
========================= */


.theme {

    display:flex;

    justify-content:center;

    align-items:center;

}



.theme img {

    width:min(700px,80%);

    height:auto;


    filter:

    drop-shadow(
    0 0 20px rgba(155,108,255,.7)
    );


    animation:

    logoFloat 5s ease-in-out infinite;

}



@keyframes logoFloat {


    0% {

        transform:translateY(0);

    }


    50% {

        transform:translateY(-10px);

    }


    100% {

        transform:translateY(0);

    }


}



@keyframes colorFlow {


    from {

        background-position:0%;

    }


    to {

        background-position:300%;

    }

}






/* =========================
   FLOW
========================= */


.flow {

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:25px;

}



.card {

    width:180px;

    height:180px;


    display:flex;

    justify-content:center;

    align-items:center;


    background:

    rgba(80,0,15,.45);


    border:

    1px solid rgba(255,90,90,.5);


    backdrop-filter:

    blur(10px);


    transition:.4s;

}


.card:hover {

    transform:

    translateY(-15px);


    border-color:

    var(--pink);


    box-shadow:

    0 0 40px rgba(255,92,154,.4);

}





/* =========================
   GALLERY
========================= */


.gallery {

    display:grid;


    grid-template-columns:

    repeat(auto-fit,minmax(250px,1fr));


    gap:40px;

}



.work {

    background:

    rgba(50,0,10,.65);


    padding:20px;


    border:

    1px solid rgba(255,180,100,.35);


    box-shadow:

    inset 0 0 30px rgba(255,0,50,.15);


    transition:.4s;

}



.work img {

    width:100%;

    display:block;

}



.work p {

    margin-top:20px;

    color:var(--gold);

}



.work:hover {


    transform:

    translateY(-15px);


    box-shadow:

    0 0 50px rgba(155,108,255,.5);

}





/* =========================
   MEMBERS
========================= */


.members {

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:30px;

}



.members a {

    width:200px;


    padding:30px;


    border:

    1px solid rgba(85,221,255,.4);

}





/* =========================
   SCROLL
========================= */


.fade {

    opacity:0;


    transform:

    translateY(50px);


    transition:

    1s;

}



.fade.show {

    opacity:1;


    transform:

    translateY(0);

}





/* =========================
   GLITCH
========================= */


.glitch {


    animation:

    glitchMove .3s;

}



@keyframes glitchMove {


    0% {

        transform:translate(0);

    }


    25% {

        transform:

        translate(-5px,2px);

        filter:

        hue-rotate(90deg);

    }


    50% {

        transform:

        translate(5px,-2px);

    }


    100% {

        transform:translate(0);

    }

}





/* =========================
   FOOTER
========================= */


footer {

    padding:60px;


    text-align:center;


    color:var(--gray);


    font-size:12px;

}





/* MOBILE */


@media(max-width:700px){


.hero h1 {

    letter-spacing:3px;

}


.section {

    padding:

    80px 20px;

}



.card {

    width:140px;

    height:140px;

}


}
/* =========================
   MOBILE GALLERY
========================= */

.gallery {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.work {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    padding: 10px;
}

.work img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.work p {
    font-size: 13px;
    margin-top: 10px;
    word-break: break-word;
}


/* =========================
   GALLERY FIX
========================= */

.gallery {

    display: grid;

    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 30px;

}


.work {

    display: block;

    width: 100%;

    min-width: 0;

    overflow: hidden;

    opacity: 1;

}


.work img {

    display: block;

    width: 100%;

    max-width: 100%;

    height: auto;

}


@media screen and (max-width: 700px) {

    .gallery {

        display: grid;

        grid-template-columns: 1fr;

        width: 100%;

        gap: 25px;

    }


    .work {

        display: block;

        width: 100%;

        opacity: 1;

        transform: none;

    }


    .work img {

        display: block;

        width: 100%;

        height: auto;

    }

}