/* 画像パワーアップ：ヒーロー写真枠 / 章間の全画面写真 / デバイス風サンプル / 幕開き / 時間帯の色味 */

/* ---- ヒーロー：差し替え可能な写真枠 ---- */
.hero-bg-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-bg-img{pointer-events:none}
.hero-bg-img.is-active{pointer-events:auto}
.hero-veil{pointer-events:none}
.hero-stage{pointer-events:none}
.hero-copy,.hero-figure{pointer-events:auto}

/* ---- 時間帯の色味（写真にかけるグレーディング） ---- */
.pu-grade{position:relative;isolation:isolate}
.hero-bg.pu-grade{position:absolute}
.pu-grade::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;transition:background-color 1.4s ease,opacity 1.4s ease;mix-blend-mode:soft-light;background-color:var(--grade,transparent)}
body[data-scene="day"]{--grade:rgba(150,195,235,.28);--grade-mul:rgba(255,255,255,0)}
body[data-scene="dusk"]{--grade:rgba(245,140,55,.62);--grade-mul:rgba(190,110,60,.18)}
body[data-scene="night"]{--grade:rgba(30,55,120,.75);--grade-mul:rgba(10,20,45,.42)}
body[data-mood="dark"]{--grade:rgba(30,55,120,.75);--grade-mul:rgba(10,20,45,.42)}
.pu-grade::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;mix-blend-mode:multiply;background-color:var(--grade-mul,transparent);transition:background-color 1.4s ease}

/* ---- 幕開き（写真の出方） ---- */
@media (prefers-reduced-motion:no-preference){
.pu-curtain{clip-path:inset(50% 0 50% 0);transition:clip-path 1.3s cubic-bezier(.7,0,.2,1)}
.pu-curtain.is-open{clip-path:inset(0 0 0 0)}
.pu-curtain .pu-zoom{transform:scale(1.18);transition:transform 2.4s cubic-bezier(.2,.7,.2,1)}
.pu-curtain.is-open .pu-zoom{transform:scale(1)}
.pu-wipe{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1)}
.pu-wipe.is-open{clip-path:inset(0 0 0 0)}
}

/* ---- 章間の全画面写真 ---- */
.pu-interlude{position:relative;height:100svh;min-height:520px;overflow:hidden;color:#fff;background:#0e1720}
.pu-interlude .pu-frame{position:absolute;inset:0;overflow:hidden}
.pu-interlude .pu-zoom{position:absolute;inset:-10% 0;will-change:transform}
.pu-interlude .pu-zoom img{width:100%;height:100%;object-fit:cover;display:block}
.pu-interlude .pu-shade{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(180deg,rgba(6,11,18,.5) 0%,rgba(6,11,18,0) 30%,rgba(6,11,18,0) 50%,rgba(6,11,18,.72) 100%)}
.pu-interlude .pu-cap{position:absolute;z-index:4;left:0;right:0;bottom:clamp(48px,9vh,110px);pointer-events:none}
.pu-cap .container{display:grid;gap:14px}
.pu-cap .pu-cap-label{font-family:var(--heading-font);font-size:clamp(15px,1.3vw,19px);letter-spacing:.4em;color:var(--gold);font-weight:700}
.pu-cap p{font-family:var(--heading-font);font-size:clamp(28px,4.4vw,64px);line-height:1.45;font-weight:700;letter-spacing:.06em;margin:0;text-shadow:0 2px 30px rgba(0,0,0,.5);max-width:16em;text-wrap:pretty}
@media (prefers-reduced-motion:no-preference){
.pu-cap .pu-cap-label,.pu-cap p{opacity:0;transform:translateY(24px);transition:opacity 1s ease,transform 1s cubic-bezier(.22,.9,.3,1)}
.pu-cap p{transition-delay:.25s}
.pu-interlude.is-open .pu-cap .pu-cap-label,.pu-interlude.is-open .pu-cap p{opacity:1;transform:none;transition-delay:.7s}
.pu-interlude.is-open .pu-cap p{transition-delay:.95s}
}

/* ---- 制作サンプル：PC・スマホの画面風 ---- */
.smp-stage{position:relative;aspect-ratio:16/11;overflow:hidden;background:radial-gradient(120% 90% at 30% 20%,color-mix(in oklch,var(--scene-card) 70%,var(--gold) 30%),var(--scene-card));transition:background 1.2s ease}
.smp-stage .smp-badge{z-index:5}
.dev-pc{position:absolute;left:7%;top:12%;width:78%;aspect-ratio:16/10.4;border-radius:10px;background:#1b232c;box-shadow:0 24px 50px rgba(14,23,32,.35);overflow:hidden;transition:transform .7s cubic-bezier(.22,.9,.3,1)}
.dev-pc .dev-bar{height:16px;display:flex;align-items:center;gap:4px;padding:0 8px;background:#2a343f}
.dev-pc .dev-bar i{width:6px;height:6px;border-radius:50%;background:#55626f}
.dev-pc .dev-screen{position:absolute;top:16px;left:0;right:0;bottom:0;overflow:hidden;background:#fff}
.dev-sp{position:absolute;right:6%;bottom:6%;width:23%;aspect-ratio:9/18.5;border-radius:16px;background:#111;padding:5px;box-shadow:0 20px 40px rgba(14,23,32,.45);transition:transform .7s cubic-bezier(.22,.9,.3,1)}
.dev-sp .dev-screen{position:relative;width:100%;height:100%;border-radius:12px;overflow:hidden;background:#fff}
.dev-screen iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;pointer-events:none}
.dev-screen img{width:100%;height:100%;object-fit:cover;object-position:top center}
.smp:hover .dev-pc{transform:translateY(-6px) rotate(-.6deg)}
.smp:hover .dev-sp{transform:translateY(-12px) rotate(1.5deg)}
.smp-stage .dev-shot{transition:transform .8s ease}

@media (prefers-reduced-motion:reduce){.pu-curtain,.pu-wipe{clip-path:none!important}}

/* ヒーロー：切り抜きハッピーちゃんを背景写真の上に */
.hero-still-img{filter:drop-shadow(0 24px 40px rgba(0,0,0,.45))}
.hc-tail{filter:drop-shadow(0 10px 18px rgba(0,0,0,.3))}
.hero-figure .hc-tail{position:absolute;left:61.8%;top:0;margin-top:91.72%;width:25.92%;height:auto;max-width:none;pointer-events:none;transform-origin:22.3% 51.9%;opacity:var(--still-op,0);transition:opacity .8s ease}
.btn{white-space:nowrap}
.hero-figure::before{content:"";position:absolute;left:-12%;right:-12%;top:8%;bottom:4%;z-index:-1;pointer-events:none;background:radial-gradient(50% 46% at 50% 48%,rgba(255,226,170,.38),rgba(255,226,170,.12) 55%,transparent 75%);opacity:0;transition:opacity 1.2s ease}
.hero-figure::after{content:"";position:absolute;left:14%;width:64%;top:0;margin-top:149%;height:0;padding-bottom:9%;z-index:-1;pointer-events:none;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.6),rgba(0,0,0,.28) 55%,transparent);opacity:0;transition:opacity 1.2s ease}
.hero-figure.is-cut::before,.hero-figure.is-cut::after{opacity:1}
.hero-figure{isolation:isolate}
/* ヒーロー動画：グリーンバック抜き */
.hero-video[data-key]{opacity:0;filter:none}
.hero-key{position:absolute;left:2.92%;top:0;margin-top:-11.88%;width:95.76%;height:auto;aspect-ratio:9/16;pointer-events:none;opacity:0;transition:opacity .8s ease;filter:drop-shadow(0 24px 40px rgba(0,0,0,.45))}
.hero-key.is-on{opacity:1}
.hero-key.is-on.is-out{opacity:0}
/* 静止後も動画の最終フレームを使用・マウスを追って走る */
.hero-figure:has(.hero-key) .hero-still-img,.hero-figure:has(.hero-key) .hc-tail,.hero-figure:has(.hero-key) .hc-part{display:none!important}
.hero-figure:has(.hero-key)::before,.hero-figure:has(.hero-key)::after{display:none}
.hero-figure:has(.hero-key){z-index:3}
.hero-key{will-change:transform}