/* Logo Animation */
.hero__logo-animation {
    position: absolute;
    top: 38%;                /* 全体をちょっと上に */
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.logo-flames {
    position: relative;
    width: 220px;
    height: 405px;
    margin-bottom: 16px;
}

/* 共通：重ねる用の初期設定 */
.flame {
    position: absolute;
    opacity: 0;
}

.logo-text {
    width: 247px;
    height: auto;
    opacity: 0;
    animation: textFadeIn 2s ease-out forwards;
    animation-delay: 2.5s;
}

@keyframes flameInTop {
    0% {
        opacity: 0;
        transform: translate(-50%, -100px) scale(0.5);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
}

@keyframes flameInLeft {
    0% {
        opacity: 0;
        transform: translate(-100px, 50px) scale(0.5) rotate(-45deg);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(0);
    }
}

@keyframes flameInRight {
    0% {
        opacity: 0;
        transform: translate(100px, 50px) scale(0.5) rotate(45deg);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(0);
    }
}

@keyframes flameInBottom {
    0% {
        opacity: 0;
        transform: translate(-50%, 100px) scale(0.5);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
}

/* Walking animation for white cloud */
@keyframes walkInRight {
    0% {
        opacity: 0;
        transform: translate(60px, 10px) scale(0.8);
    }

    20% {
        transform: translate(45px, -5px) scale(0.85);
        /* Up */
    }

    40% {
        transform: translate(30px, 5px) scale(0.9);
        /* Down */
    }

    60% {
        transform: translate(15px, -5px) scale(0.95);
        /* Up */
    }

    80% {
        transform: translate(0, 5px) scale(1);
        /* Down */
    }

    100% {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
        /* Final position */
    }
}

/* 青：中央で一番後ろの背の高い炎 */
.flame--blue {
    width: 103px;
    height: auto;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    animation: flameInTop 1.5s ease-out forwards;
    animation-delay: 0.5s;
    z-index: 2;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}

/* 緑：左下寄りの炎 */
.flame--green {
    width: 60px;
    height: auto;
    top: 170px;          /* 60px → 80px：少し下へ */
    left: 15px;            /* 0 → -18px：外側へ */
    animation: flameInLeft 1.5s ease-out forwards;
    animation-delay: 0.8s;
    z-index: 1;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}

/* 黄：右下寄りの炎 */
.flame--yellow {
    width: 72px;
    height: auto;
    top: 120px;          /* 50px → 70px：少し下へ */
    right: 18px;           /* 0 → -18px：外側へ */
    animation: flameInRight 1.5s ease-out forwards;
    animation-delay: 1.1s;
    z-index: 2;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}

/* オレンジ：中央手前の炎（いちばん目立つ） */
.flame--orange {
    width: 62px;            /* 62px → 52px：縮小 */
    height: auto;
    bottom: -8px;            /* 75px → 6px：かなり下げる */
    right: 30px;
    transform: translateX(-50%);
    animation: flameInBottom 1.5s ease-out forwards;
    animation-delay: 1.4s;
    z-index: 10;            /* 一番手前の炎 */
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}

/* 白い雲：真ん中にどんっと重ねる */
.flame--white {
    width: 130px;
    height: auto;
    top: 55%;               /* 55% → 62%：下へ */
    left: 79%;              /* 50% → 62%：右へ */
    margin-left: 0;         /* 余計なオフセットは消す */
    animation: walkInRight 2s ease-out forwards;
    animation-delay: 1.7s;
    z-index: 5;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}

@keyframes textFadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Adjust existing hero content to not overlap too much or fade out */
.hero__content {
    /* Optional: fade out hero content initially or keep it as background */
    animation: contentFadeIn 2s ease-out forwards;
    animation-delay: 3s;
    opacity: 0;
    /* Start hidden */
}

.hero-works__catch,
.hero-works__info,
.contact-hero__heading {
    /* Optional: fade out hero content initially or keep it as background */
    animation: contentFadeIn 2s ease-out forwards;
    animation-delay: .8s;
    opacity: 0;
    /* Start hidden */
}

@keyframes contentFadeIn {
    to {
        opacity: 1;
    }
}
@media (max-width: 768px) {
    .hero__logo-animation {
        /* 元の translate に scale を足すイメージ */
        transform: translate(-50%, -50%) scale(0.79); /* 173.69 / 220 ≒ 0.79 */
        top: 38%;  /* 必要なら 36?40% くらいで微調整してください */
    }
}