<section
    class="characterViewer"
    style="
        --character-main:
        <?php echo esc_attr($main_color); ?>;

        --character-sub:
        <?php echo esc_attr($sub_color); ?>;
    "
>


.yumeHero {
    position: relative;

    min-height: calc(100vh - 64px);

    overflow: hidden;

    background: #e9edef;
}

.yumeHeroContent {
    position: relative;
    z-index: 3;

    width: min(1100px, 80%);

    margin: 0 auto;

    padding-top: 16vh;
}

.yumeEyebrow {
    margin: 0 0 12px;

    color: #7f929e;

    font-size: 0.72rem;

    letter-spacing: 0.38em;
}

.yumeName {
    margin: 0;

    color: #1e2428;

    font-size: clamp(3rem, 7vw, 7rem);

    line-height: 1;

    letter-spacing: 0.08em;
}

.yumeNameEn {
    margin: 14px 0 0;

    color: #9aaebb;

    font-size: 0.9rem;

    letter-spacing: 0.4em;
}

.yumeMeta {
    margin-top: 30px;

    color: #78858d;

    letter-spacing: 0.12em;
}

.yumeCatch {
    max-width: 420px;

    margin-top: 20px;

    color: #40494e;

    font-size: 1rem;

    line-height: 2;
}


.yumeAmbient {
    position: absolute;
    inset: 0;

    pointer-events: none;
}

.ambientLayer {
    position: absolute;
    inset: -10%;

    will-change: transform, opacity;
}


.ambientBack {
    background:
        url("../imgs/yume/background.webp")
        center / cover
        no-repeat;

    opacity: 0.22;

    transform: scale(1.08);

    animation:
        yumeBackgroundDrift
        28s
        ease-in-out
        infinite alternate;
}

@keyframes yumeBackgroundDrift {

    from {
        transform:
            scale(1.08)
            translate(-1.5%, -1%);
    }

    to {
        transform:
            scale(1.12)
            translate(1.5%, 1%);
    }
}


.ambientMist {
    background:
        url("../imgs/yume/mist.webp")
        center / cover
        no-repeat;

    opacity: 0.18;

    mix-blend-mode: screen;

    animation:
        yumeMistDrift
        20s
        linear
        infinite alternate;
}

@keyframes yumeMistDrift {

    from {
        transform:
            translateX(-3%)
            translateY(0);
    }

    to {
        transform:
            translateX(3%)
            translateY(-1%);
    }
}

.ambientLines {
    opacity: 0.22;

    background:
        url("../imgs/yume/line-decoration.svg")
        center / cover
        no-repeat;

    animation:
        yumeLineFloat
        12s
        ease-in-out
        infinite;
}

@keyframes yumeLineFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

.ambientParticles span {
    position: absolute;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: rgba(255,255,255,0.75);

    animation:
        yumeParticleFloat
        7s
        ease-in-out
        infinite alternate;
}

.ambientParticles span:nth-child(1) {
    left: 15%;
    top: 22%;

    animation-delay: -1s;
}

.ambientParticles span:nth-child(2) {
    left: 72%;
    top: 17%;

    animation-delay: -3s;
}

.ambientParticles span:nth-child(3) {
    left: 84%;
    top: 64%;

    animation-delay: -5s;
}

@keyframes yumeParticleFloat {

    from {
        opacity: 0.25;

        transform:
            translateY(0)
            scale(0.8);
    }

    to {
        opacity: 0.9;

        transform:
            translateY(-22px)
            scale(1.1);
    }
}

.yumeCharacter {
    animation:
        yumeCharacterIn
        1.4s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.45s
        forwards;
}

.yumeCharacterFloat {
    animation:
        yumeCharacterBreath
        6s
        ease-in-out
        infinite;
}

@keyframes yumeCharacterBreath {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

.yumeNameLine {
    transform-origin: left center;

    animation:
        yumeNameLinePulse
        5s
        ease-in-out
        infinite;
}

@keyframes yumeNameLinePulse {

    0%,
    100% {
        transform: scaleX(0.92);
        opacity: 0.35;
    }

    50% {
        transform: scaleX(1);
        opacity: 0.7;
    }
}

.ambientBack {
    transform:
        translateY(
            calc(var(--yume-scroll, 0px) * 0.03)
        );
}

.yumeLiquidLayer {
    position: absolute;
    inset: 0;

    overflow: hidden;
    pointer-events: none;

    z-index: 0;
}

.liquidBlob {
    position: absolute;

    width: 260px;
    aspect-ratio: 1 / 1;

    border-radius: 50%;

    background:
        rgba(180, 205, 215, 0.20);

    filter:
        blur(18px);

    mix-blend-mode: screen;

    will-change: transform;
}

.blob1 {
    left: 8%;
    top: 18%;
}

.blob2 {
    right: 12%;
    top: 30%;
}

.blob3 {
    left: 42%;
    bottom: 12%;
}

.yumeLiquidLayer {
    filter: url(#goo);
}

.yumeCharacterFloat {
    position: absolute;

    right: 8%;
    bottom: 0;

    width: min(42vw, 620px);

    z-index: 2;
}

.yumeCharacter {
    opacity: 0;
}

.yumeCharacter img {
    display: block;

    width: 100%;
    height: auto;
}

@keyframes yumeFadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.yumeReveal {
    opacity: 0;

    animation:
        yumeFadeUp
        1s
        cubic-bezier(0.22, 1, 0.36, 1)
        forwards;
}

.yumeEyebrow {
    animation-delay: 0.2s;
}

.yumeName {
    animation-delay: 0.45s;
}

.yumeNameEn {
    animation-delay: 0.7s;
}

.yumeMeta {
    animation-delay: 0.95s;
}

.yumeCatch {
    animation-delay: 1.2s;
}


@keyframes yumeCharacterIn {
    from {
        opacity: 0;

        transform:
            translateX(70px)
            scale(0.96);
    }

    to {
        opacity: 1;

        transform:
            translateX(0)
            scale(1);
    }
}
.characterName {
    color: var(--character-main);
}

.characterAccent {
    background:
        var(--character-main);
}

.liquidBlob {
    background:
        color-mix(
            in srgb,
            var(--character-main) 28%,
            transparent
        );
}

.characterSubLine {
    border-color:
        var(--character-sub);
}