/*
Theme Name: com-simple
Theme URI: https://cascade-path.com/
Author: cascade-path
Description: Minimal blank theme
Version: 1.0
*/
@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@600&display=swap);

:root{
    --main: #444;
    --base: #fff;
    --accent: #3cc
}

body{
    margin: 0;
    background: var(--main);
}

header{
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    container-type: inline-size;
    height: 50px;
}

header .logo{
    min-width: 50px;
    margin: .5em;
    background: linear-gradient(90deg,#888 0%,#888 20%,#eee 30%,#888 40%,#888 100%);
    animation: logo 1s infinite;
}
@keyframes logo{
    0%{background-position: 0%;}
    100%{background-position: 100%;}
}

header nav{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: min(300px,50vw);
}
header nav a{
    color: var(--base);
}

h1{
    display: flex;
    padding-inline: min(50px,5vw);
    align-items: center;
    min-height: 150px;
    margin: 0;
    background: linear-gradient(135deg,var(--accent) 0% 50%,#aaa 50% 52%,var(--accent) 52% 54%,#aaa 54%,#ea8 100%);
    color: var(--base);
    font-size: 2em;
}
h1::after{
    content: "Cascade-path トップ";
}

main{
    background: var(--base);
}

main h2{
    margin: 0;
}

footer{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}


.intro{
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    height: 100vh;
    padding-bottom: 20vh;
    background: var(--main);
    animation: intro 3s 6.5s forwards;
}
.intro svg{
    width: min(100vw,500px);
}
.intro text{
    fill: var(--base);
    stroke: var(--accent);
    stroke-dasharray: 350;
    stroke-width: 2;
    stroke-linecap: round;
    animation: intro-text 6s linear both;
    font-family: "Noto Sans JP";
    font-weight: bold;
}
@keyframes intro{
    0%{opacity: 1;translate: 0 0;}
    50%{opacity: 0;translate: 0 -20vh;}
    100%{opacity: 0;translate: 0 -120vh;}
}
@keyframes intro-text{
    0%{stroke-dashoffset: -350;fill-opacity: 0;stroke-width: 10;}
    50%{stroke-dashoffset: -50;fill-opacity: 0;stroke-width: 2;}
    100%{stroke-dashoffset: 0;fill-opacity: 1;stroke-width: 1;}
}
.intro:has(:checked),.intro input{
    display: none;
}