/* ===== IMPORT CSS ===== */

@import url("../parts/root.css");
@import url("../parts/copyright.css");
@import url("../parts/font.css");
@import url("../parts/ver.css");


/* ===== MAIN PROPERTY ===== */

/* <<< important >>> */

html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg-color);
}

main {
    margin-top: 0;
    inline-size: 90%;
    margin-inline: auto;
}

a {
    display: block;
    
    text-decoration: none;
    cursor: default;
}

p {
    color: var(--fg-color);
    font: 300 20px var(--main-serif-jp);
    
    &::selection {
        color: var(--bg-color);
        background: var(--accent-color);
    }
}

/* <<< logo >>> */

.logo_1, .logo_2, .logo_3 {
    display: block;
    position: absolute;
    inset: 80pt 0  auto 0;
    inline-size: 100%;
    margin-inline: auto;
    
    font: clamp(125*0.6px, 10*0.6vw, 250*0.6px) "Roboto";
    
    opacity: 0;
    
    -webkit-user-select: none;
}

.logo_1 {
    color: var(--accent-color);
    
    animation: logo_anime_1 1.2s ease 0.6s forwards;
}

.logo_2 {
    color: var(--fg-color);
    
    animation: logo_anime_2 1.2s ease 0.6s forwards;
}

.logo_3 {
    color: var(--fg-color);
    
    animation: logo_anime_3 0.24s ease 1.56s forwards;
}

@keyframes logo_anime_1 {
    0% {
        opacity: 0;
        translate: 60px 0;
    }
    80% {
        opacity: 1;
        translate: -15px 0;
    }
    100% {
        opacity: 1;
        translate: 0 0;
    }
}

@keyframes logo_anime_2 {
    0% {
        opacity: 0;
        translate: -60px 0;
    }
    80% {
        opacity: 1;
        translate: 15px 0;
    }
    100% {
        opacity: 1;
        translate: 0 0;
    }
}

@keyframes logo_anime_3 {
    from {
        opacity: 0;
        scale: 0 1;
    }
    to {
        opacity: 1;
        scale: 1 1;
    }
}

/* <<< design >>> */

#ker_text {
    margin-top: 35pt;
    color: white;
    pointer-events: none;
}

#yt_text {
    margin: 81pt auto auto -130pt;
    color: white;
    pointer-events: none;
}

#note_text {
    margin: 125pt auto auto -225pt;
    color: white;
    pointer-events: none;
}

@keyframes fade_in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.container {
    display: grid;
    place-items: center;
    margin: 400pt auto auto auto;
    width: 100%;
    opacity: 0;
    
    animation: fade_in 1s ease 1.5s forwards;
}


#ccl_ker {
    grid-area: 1 / 1;
        
    border-radius: 50%;
    color: var(--fg-color);
    background: white;
    box-shadow: 0 0 70px rgba(0, 0, 0, 0.1);
    
    inline-size: 120px;
    block-size: 120px;
    
    -webkit-user-select: none;
    user-select: none;
    
    transition: var(--smth-out) 2s;
    
    &:hover{
        transition: var(--smth-out) 2s;
        background: var(--accent-color);
    }
}

#ccl_yt {
    grid-area: 1 / 1;
        
    border-radius: 50%;
    color: var(--fg-color);
    background: white;
    box-shadow: 0 0 70px rgba(0, 0, 0, 0.1);
    
    inline-size: 240px;
    block-size: 240px;
    
    -webkit-user-select: none;
    user-select: none;

    transition: var(--smth-out) 2s;
    
    &:hover{
        transition: var(--smth-out) 2s;
        background: var(--accent-color);
    }
}

#ccl_note {
    grid-area: 1 / 1;
        
    border-radius: 50%;
    color: var(--fg-color);
    background: white;
    box-shadow: 0 0 70px rgba(0, 0, 0, 0.1);
    
    inline-size: 360px;
    block-size: 360px;
    
    -webkit-user-select: none;
    user-select: none;
    
    transition: var(--smth-out) 2s;
    
    &:hover{
        transition: var(--smth-out) 2s;
        background: var(--accent-color);
    }
}


/* Copyright (c) 2026 Zundamorphism ver.2.0 beta 2 */