/* =========================================================
   オープニング演出
   全画面の動画プレイヤー風フレーム（周囲は黒）に top1.webp を表示
   → 再生ボタンをクリック
   → 画像が拡大して、そのままページトップのメインビジュアルになる
   ========================================================= */

:root {
    /* ▼ 映像として表示する画像。差し替えはここだけ */
    --op-img-screen: url("../images/top1.webp");
    --op-red: #FF0000;
}

/* ---------- ステージ全体（周りは真っ黒） ---------- */
.opening {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    background: #000;
    overflow: hidden;
    opacity: 1;
    transition: opacity .6s ease;
}
.opening[hidden] { display: none !important; }
.opening.is-done { opacity: 0; pointer-events: none; }
/* 拡大しながら消えるので、フェードはゆっくりめに */
.opening.is-playing { transition: opacity .7s ease; }

/* ---------- プレイヤー（横幅100%） ---------- */
.op-player {
    /* コントロールバーの高さ。下の計算で使うので固定値にしておく */
    --op-bar-h: clamp(58px, 6.2vw, 82px);   /* stage.css の --seek-h と揃える */

    position: relative;
    /* 基本は横幅いっぱい。ただし縦が先に画面いっぱいになるなら、そこで止める
       （映像は16:9なので、高さ = 幅×9/16 + バー）
       映像は常に全体が見える（オープニング中は見切らせない） */
    width: min(var(--op-wide, 100vw), calc((100svh - var(--op-bar-h)) * 16 / 9));
    opacity: 0;
    transform: scale(.985);
    transition: opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1);
}
.is-step-player .op-player { opacity: 1; transform: scale(1); }

/* 再生したらコントロールバーは消す */
.is-playing .op-bar { opacity: 0; transform: translateY(10px); }

/* ---------- 映像エリア ---------- */
.op-screen {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000 var(--op-img-screen) center / cover no-repeat;
    transform-origin: center center;
    transition: transform 1.15s cubic-bezier(.65,0,.35,1), filter .7s ease;
}
/* 再生 → 画面からはみ出すまで、ぽわっと拡大しながら明るくなり、
   そのまま広がり続けて消える（縮んで戻らない）。
   消えたあとには、同じ絵のページトップが残る。 */
.is-playing .op-screen {
    transform: translateY(var(--op-shift-over, 0px)) scale(var(--op-zoom-over, 1.8));
    transition: transform 1.3s cubic-bezier(.22,.68,.32,1), filter .5s ease;
    filter: brightness(1.05) saturate(1.02);   /* 明るくしすぎない */
}

/* ---------- グレーのカバー + 再生ボタン ---------- */
.op-cover {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    background: transparent;      /* グレーで暗くしない */
    border: 0;
    padding: 0;
    pointer-events: none;        /* クリックでは進まない。時間が来たら自動で再生 */
    transition: opacity .5s ease;
}
.is-playing .op-cover { opacity: 0; }

.op-play {
    position: relative;
    width: clamp(66px, 8.5vw, 116px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.5);
    box-shadow: 0 10px 40px rgba(0,0,0,.28);
    transform: scale(.6);
    opacity: 0;
    transition: transform .6s cubic-bezier(.34,1.56,.64,1), opacity .5s ease, background .25s ease;
}
.is-step-play .op-play { transform: scale(1); opacity: 1; }

/* ▶ の三角 */
.op-play::before {
    content: "";
    width: 0; height: 0;
    margin-left: 14%;
    border-style: solid;
    border-width: clamp(11px,1.6vw,21px) 0 clamp(11px,1.6vw,21px) clamp(19px,2.7vw,36px);
    border-color: transparent transparent transparent rgba(70,70,82,.62);
}
/* 広がるリング */
.op-play-ring {
    position: absolute;
    inset: -14%;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.8);
    opacity: 0;
}
.is-step-play .op-play-ring { animation: op-ring 2.4s ease-out infinite; }

/* 自動再生された瞬間、押し込まれたように見せる */
.op-play.is-pressed {
    transform: scale(.88);
    background: rgba(255,255,255,.78);
    transition: transform .18s ease, background .18s ease;
}
@keyframes op-ring {
    0%   { transform: scale(.85); opacity: .7; }
    100% { transform: scale(1.45); opacity: 0; }
}

/* ---------- コントロールバー ---------- */
.op-bar {
    position: relative;
    height: var(--op-bar-h);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(7px, .9vw, 12px);
    background: #000;
    padding: 0 clamp(10px, 1.6vw, 22px);
    transition: opacity .45s ease, transform .45s ease;
}
.op-progress {
    position: relative;
    flex: 0 0 auto;
    height: clamp(4px, .42vw, 6px);
    background: rgba(255,255,255,.28);
}
.op-progress-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: var(--op-red);
}
.is-step-play .op-progress-fill { width: 100%; transition: width 3.6s linear; }
/* 再生後は一気に満たしてフェードアウト */
.is-playing .op-progress-fill { transition: width .5s ease; width: 100%; }

.op-controls {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.7vw, 26px);
}
.op-controls .op-spacer { flex: 1; }
.op-ctrl {
    /* flexの縮みでアイコンが横に潰れるのを防ぐ。必ず正方形で描く */
    flex: 0 0 auto;
    display: block;
    width: clamp(20px, 2.2vw, 30px);
    height: clamp(15px, 1.7vw, 24px);
    fill: #fff;
    opacity: .92;
}

@media (prefers-reduced-motion: reduce) {
    .opening, .op-player, .op-screen, .op-play, .op-cover { transition-duration: .01ms !important; }
    .op-play-ring { animation: none !important; }
    .is-step-play .op-progress-fill { transition: none; width: 100%; }
}


/* ---------- 縦長画面 ----------
   オープニング中は画像を見切らせない（常に全体が見える）。
   大きく見せるのは着地してからにする。 */
/* プレイヤーは画面の上下中央に置く（着地先にトップ画像を置かなくなったので、
   縦長画面でも上寄せにする必要がなくなった） */