/* home hero */

.section_hero {
    min-height: 100vh;
    overflow: hidden;
}

.section_hero .bottom_bg {
    z-index: 0;
}

.section_hero .text_wrapper {
    z-index: 3;
}

.hero_middle,
.hero_lines_layer,
.hero_keywords_layer {
    --hero-shift-x: 0px;
    --hero-shift-y: 0px;
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(76vw, 980px);
    aspect-ratio: 1000 / 470;
    transform: translate(calc(-50% + var(--hero-shift-x)), calc(-50% + var(--hero-shift-y)));
    pointer-events: none;
}

.hero_middle {
    z-index: 1;
}

.hero_layer {
    position: absolute;
    inset: 0;
}

.hero_triangle_layer {
    --layer-x: 0px;
    --layer-y: 0px;
    opacity: 0;
    transform: translate(var(--layer-x), var(--layer-y));
    transition: opacity 1s cubic-bezier(0.77, 0, 0.175, 1) 0.15s;
    z-index: 1;
}

.loadfinish .hero_triangle_layer {
    opacity: 1;
}

.hero_triangle {
    width: 100%;
    height: 100%;
    display: block;
}

.hero_lines_layer {
    --layer-x: 0px;
    --layer-y: 0px;
    transform: translate(calc(-50% + var(--hero-shift-x) + var(--layer-x)), calc(-50% + var(--hero-shift-y) + var(--layer-y)));
    mix-blend-mode: screen;
    opacity: 0.9;
    z-index: 2;
}

.hero_line {
    --line-x: 50%;
    --line-y: 50%;
    --line-width: 88%;
    --line-rotate: 0deg;
    position: absolute;
    left: var(--line-x);
    top: var(--line-y);
    width: var(--line-width);
    height: clamp(48px, 5vw, 74px);
    background-image: url(images/wood_line.jpg);
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--line-rotate));
    transform-origin: center;
    transition: opacity 0.9s cubic-bezier(0.77, 0, 0.175, 1);
}

.loadfinish .hero_line {
    opacity: 0.82;
}

.hero_line_1 {
    --line-x: 50%;
    --line-y: 39%;
    --line-width: 88%;
    --line-rotate: -20deg;
    transition-delay: 0.3s;
}

.hero_line_2 {
    --line-x: 48%;
    --line-y: 67%;
    --line-width: 96%;
    --line-rotate: 18deg;
    transition-delay: 0.45s;
}

.hero_line_3 {
    --line-x: 78%;
    --line-y: 48%;
    --line-width: 60%;
    --line-rotate: 82deg;
    transition-delay: 0.6s;
}

.hero_keywords_layer {
    --layer-x: 0px;
    --layer-y: 0px;
    transform: translate(calc(-50% + var(--hero-shift-x) + var(--layer-x)), calc(-50% + var(--hero-shift-y) + var(--layer-y)));
    z-index: 3;
}

.hero_keyword {
    --keyword-x: 50%;
    --keyword-y: 50%;
    position: absolute;
    left: var(--keyword-x);
    top: var(--keyword-y);
    opacity: 0;
    color: transparent;
    font-family: "area-normal", "arial", sans-serif;
    font-size: clamp(42px, 5vw, 72px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.12em;
    white-space: nowrap;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 2px #000;
    text-stroke: 2px #000;
    transform: translate(-50%, -50%);
    transition: opacity 0.85s cubic-bezier(0.77, 0, 0.175, 1);
}

.loadfinish .hero_keyword {
    opacity: 1;
}

.hero_keyword_music {
    --keyword-x: 7%;
    --keyword-y: 50%;
    transition-delay: 0.75s;
}

.hero_keyword_life {
    --keyword-x: 69%;
    --keyword-y: 16%;
    transition-delay: 0.9s;
}

.hero_keyword_culture {
    --keyword-x: 75%;
    --keyword-y: 76%;
    transition-delay: 1.05s;
}

@media screen and (max-width: 900px) {
    .hero_middle,
    .hero_lines_layer,
    .hero_keywords_layer {
        width: 94vw;
        transform: translate(calc(-50% + var(--hero-shift-x)), calc(-50% + var(--hero-shift-y))) scale(0.92);
    }

    .hero_lines_layer,
    .hero_keywords_layer {
        transform: translate(calc(-50% + var(--hero-shift-x) + var(--layer-x)), calc(-50% + var(--hero-shift-y) + var(--layer-y))) scale(0.92);
    }

    .hero_keyword {
        font-size: clamp(34px, 8vw, 52px);
        -webkit-text-stroke-width: 1.5px;
        text-stroke-width: 1.5px;
    }
}

@media screen and (max-width: 600px) {
    .hero_middle,
    .hero_lines_layer,
    .hero_keywords_layer {
        width: 118vw;
        left: 50%;
    }

    .hero_line {
        height: 42px;
    }

    .hero_keyword_music {
        --keyword-x: 12%;
        --keyword-y: 52%;
    }

    .hero_keyword_life {
        --keyword-x: 60%;
        --keyword-y: 17%;
    }

    .hero_keyword_culture {
        --keyword-x: 68%;
        --keyword-y: 75%;
    }
}