/* ============================================
   FIRE EXPERIENCE — スクロールで燃え上がる演出
   Layer1:大炎 / Layer2:小炎 / Layer3:火の粉 / Layer4:煙 / Layer5:グロー
   ============================================ */

.fx-stage {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 40;
    overflow: hidden;
}

/* ---- Layer 5: light glow ---- */
.fx-glow {
    position: absolute;
    opacity: 0;
    will-change: opacity;
}

.fx-glow--l {
    left: -18vw;
    bottom: -20vh;
    width: 55vw;
    height: 90vh;
    background: radial-gradient(ellipse at 22% 84%, rgba(255, 112, 32, .34), rgba(196, 62, 12, .12) 45%, transparent 70%);
}

.fx-glow--r {
    right: -18vw;
    bottom: -20vh;
    width: 55vw;
    height: 90vh;
    background: radial-gradient(ellipse at 78% 84%, rgba(255, 112, 32, .30), rgba(196, 62, 12, .10) 45%, transparent 70%);
}

.fx-glow--b {
    left: -5vw;
    right: -5vw;
    bottom: -12vh;
    height: 45vh;
    background: linear-gradient(0deg, rgba(255, 122, 32, .40), rgba(180, 60, 12, .12) 45%, transparent);
}

/* ---- Layer 4: smoke ---- */
.fx-smoke {
    position: absolute;
    width: 72vw;
    height: 72vw;
    max-width: 920px;
    max-height: 920px;
    background: url('../images/smoke.png') no-repeat center / contain;
    opacity: 0;
    will-change: transform, opacity;
}

.fx-smoke--1 {
    left: -22vw;
    bottom: -20vw;
    animation: fxSmokeDrift1 27s ease-in-out infinite alternate;
}

.fx-smoke--2 {
    right: -24vw;
    bottom: -22vw;
    animation: fxSmokeDrift2 33s ease-in-out infinite alternate;
}

@keyframes fxSmokeDrift1 {
    from { transform: translate(0, 0) rotate(0deg) scale(1); }
    to   { transform: translate(6vw, -9vh) rotate(13deg) scale(1.12); }
}

@keyframes fxSmokeDrift2 {
    from { transform: translate(0, 0) rotate(0deg) scale(1.06); }
    to   { transform: translate(-7vw, -11vh) rotate(-11deg) scale(1); }
}

/* ---- Layer 1 & 2: flames ---- */
.fx-flame {
    position: absolute;
    opacity: 0;
    will-change: transform, opacity;
}

.fx-flame span {
    display: block;
    width: 100%;
    height: 100%;
    background: no-repeat center / contain;
    will-change: transform, opacity;
}

.fx-flame--bl {
    left: -4vw;
    bottom: -4vh;
    width: clamp(240px, 30vw, 520px);
    aspect-ratio: 460 / 200;
}
.fx-flame--bl span {
    background-image: url('../images/flame-1.png');
    animation: fxFlick1 3.1s ease-in-out infinite;
}

.fx-flame--br {
    right: -4vw;
    bottom: -4vh;
    width: clamp(240px, 30vw, 520px);
    aspect-ratio: 460 / 200;
}
.fx-flame--br span {
    background-image: url('../images/flame-1.png');
    animation: fxFlick1 3.7s ease-in-out .8s infinite;
}

.fx-flame--sl {
    left: 1.5vw;
    bottom: 26vh;
    width: clamp(90px, 12vw, 210px);
    aspect-ratio: 256 / 220;
}
.fx-flame--sl span {
    background-image: url('../images/flame-2.png');
    animation: fxFlick2 2.5s ease-in-out infinite;
}

.fx-flame--sr {
    right: 1.5vw;
    bottom: 30vh;
    width: clamp(90px, 12vw, 210px);
    aspect-ratio: 256 / 220;
}
.fx-flame--sr span {
    background-image: url('../images/flame-2.png');
    animation: fxFlick2 2.9s ease-in-out .6s infinite;
    transform: scaleX(-1);
}

@keyframes fxFlick1 {
    0%, 100% { opacity: .88; transform: scale(1); }
    30%      { opacity: 1;   transform: scale(1.04) translateY(-4px); }
    60%      { opacity: .8;  transform: scale(.98); }
    82%      { opacity: 1;   transform: scale(1.02); }
}

@keyframes fxFlick2 {
    0%, 100% { opacity: .85; transform: scale(1) rotate(0deg); }
    40%      { opacity: 1;   transform: scale(1.06) rotate(.8deg); }
    70%      { opacity: .78; transform: scale(.97) rotate(-.6deg); }
}

.fx-flame--sr span {
    animation-name: fxFlick2Mirror;
}

@keyframes fxFlick2Mirror {
    0%, 100% { opacity: .85; transform: scaleX(-1) scale(1) rotate(0deg); }
    40%      { opacity: 1;   transform: scaleX(-1) scale(1.06) rotate(-.8deg); }
    70%      { opacity: .78; transform: scaleX(-1) scale(.97) rotate(.6deg); }
}

/* ---- セクション境界: 煙のような暗がりで溶かす ---- */
main > section {
    box-shadow: inset 0 90px 70px -58px rgba(0, 0, 0, .82);
}

/* ---- フィナーレCTA ---- */
.finale {
    position: relative;
    background: #000;
    padding: 150px 24px 160px;
    text-align: center;
    overflow: hidden;
}

.finale::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -150px;
    transform: translateX(-50%);
    width: 780px;
    max-width: 120vw;
    height: 470px;
    background: radial-gradient(ellipse at center, rgba(255, 138, 40, .30), rgba(198, 72, 16, .12) 45%, transparent 72%);
    animation: finaleGlow 4.6s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes finaleGlow {
    from { opacity: .68; transform: translateX(-50%) scale(1); }
    to   { opacity: 1;   transform: translateX(-50%) scale(1.12); }
}

.finale__inner {
    position: relative;
}

.finale__label {
    font-family: var(--font-en);
    font-size: 11px;
    letter-spacing: .5em;
    text-indent: .5em;
    color: rgba(201, 169, 106, .8);
    margin-bottom: 30px;
}

.finale__copy {
    font-family: var(--font-jp);
    font-weight: 900;
    font-size: clamp(27px, 4.6vw, 54px);
    letter-spacing: .14em;
    line-height: 1.5;
    color: #ffffff;
    text-shadow: 0 0 44px rgba(201, 169, 106, .45), 0 3px 20px rgba(0, 0, 0, .8);
    margin-bottom: 24px;
}

.finale__copy em {
    font-style: normal;
    background: linear-gradient(180deg, #ffffff 0%, #f4dfab 55%, #c9a25f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.finale__sub {
    font-family: var(--font-en);
    font-size: clamp(11px, 1.4vw, 14px);
    letter-spacing: .32em;
    color: rgba(255, 255, 255, .62);
    margin-bottom: 46px;
}

.finale__cta {
    min-width: 300px;
}

/* ---- スマホ調整: 視認性・軽さ優先 ---- */
@media (max-width: 768px) {
    .fx-flame--bl,
    .fx-flame--br {
        width: clamp(140px, 33vw, 230px);
    }

    .fx-flame--sl { bottom: 32vh; }
    .fx-flame--sr { bottom: 36vh; }

    main > section {
        box-shadow: inset 0 60px 50px -42px rgba(0, 0, 0, .8);
    }

    .finale {
        padding: 100px 20px 120px;
    }

    .finale__cta {
        min-width: 250px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fx-stage { display: none; }
    .fx-smoke, .fx-flame span { animation: none; }
}