/* ══════════════════════════════════════════════════════════════
   DOPA! 標準オープニング（共通骨格）
   ------------------------------------------------------------
   骨格＝毎回同じ。アレンジは下の「テーマ層」だけを差し替える。
     拍1 溜め   ロゴが暗い幕の中央に浮かぶ
     拍2 署名   ゴムのように伸びて、離してパチン（＋閃光＋粒）
     拍3 抜け   線／サブ帯が出て、幕が抜けて本編へ
   触ってよいのは --op-* 変数と data-op-fx / data-op-out だけ。
   タイミング（尺1.9秒）と logoRubber は案件ごとに変えない。
══════════════════════════════════════════════════════════════ */

:root{
  /* ── テーマ層（案件ごとに上書きする5つ＋2つ） ── */
  --op-bg:      #14181A;                    /* 幕の地 */
  --op-glow:    rgba(234,51,79,.30);        /* 中央のにじみ（モチーフ色） */
  --op-line:    #FFFFFF;                    /* ロゴ下の線 */
  --op-flash:   #FFFFFF;                    /* パチンの閃光 */
  --op-ring:    rgba(255,255,255,.75);      /* 弾けるリング */
  --op-sub-bg:  #EA334F;                    /* サブ帯の地 */
  --op-sub-ink: #FFFFFF;                    /* サブ帯の文字 */
  --op-star:    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 -50 100 100"><path d="M0,-50 Q10,-10 50,0 Q10,10 0,50 Q-10,10 -50,0 Q-10,-10 0,-50" fill="%23ffffff"/></svg>');

  /* ── 骨格の定数（案件で変えない） ── */
  --op-t-in:    .08s;   /* ロゴが出るまで */
  --op-t-snap:  .55s;   /* 粒が弾ける瞬間（装飾を足したテーマだけ） */
  --op-t-sub:   .55s;   /* 線／サブ帯が出る。ロゴが見えた直後（opacityが1になるのは約.44s） */
  --op-t-out:   1.38s;  /* 幕が抜け始める。★線・帯が引き終わって（.55+.42=.97s）から
                           0.4秒ほど見せてから抜ける。この「間」が無いと本編に飛ばされた感じになる。
                           線や帯の長さを変えたら、この値も同じだけ後ろへずらすこと */
  --op-ease:    cubic-bezier(.2,.7,.2,1);
  --op-k:       1;      /* 時間倍率。プレビューのスロー再生専用（本番は1のまま） */
}

/* 幕が出ている間はスクロールさせない */
.is-intro,.is-intro body{overflow:hidden;height:100%;}

.op{
  position:fixed;inset:0;z-index:300;
  display:none;align-items:center;justify-content:center;
  background:
    radial-gradient(ellipse 72% 56% at 50% 46%,var(--op-glow),transparent 66%),
    var(--op-bg);
  overflow:clip;            /* 伸びたロゴを画面外で切る（横スクロール防止） */
}
.is-intro .op{display:flex;}

/* 地の質感（テーマで差す。既定は無し） */
.op__grain{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;}

.op__in{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:0 24px;
}
/* ★ロゴ画像の上下には透明の余白が入っているので、見た目の間隔は gap より広く出る。
   線は8px、文字が入る帯だけ少し広げる */
.op[data-op-sub]:not([data-op-sub=""]) .op__in{gap:14px;}

/* ── ロゴ ──
   .op__mark が動きを持つ入れ物、.op__logo は画。
   ★ロゴには何も足さない（光沢・縁・影・きらめきを乗せない＝ロゴの加工にあたる）。
   動き（data-op-motion）は fade＝標準／rubber＝ゴム伸び（ワンピース等、伸びる世界観の案件だけ）。
   どちらを選んでも「中央にロゴ → 光沢が抜ける → 線/帯 → 幕が抜ける」の順と尺は変わらない。 */
.op__mark{position:relative;display:inline-block;line-height:0;will-change:transform,opacity;}
.op__in>.op__mark{align-self:center;}
.op__logo{
  /* 画像のデコード前でも幅を確定させる（幅0のまま % 指定の子がずれるのを防ぐ）。
     比率は読み込み後にJSが実測値で上書きする */
  aspect-ratio:var(--op-logo-ar,3.662);
  width:auto;height:46px;max-width:74vw;display:block;
}
@media (min-width:860px){ .op__logo{height:62px;} }

/* 標準：奥からすっと寄って、静かに置かれる */
.is-intro .op__mark{animation:opLogoFade calc(.90s * var(--op-k)) cubic-bezier(.16,.84,.3,1) calc(var(--op-t-in) * var(--op-k)) both;}
@keyframes opLogoFade{
  0%  {opacity:0;transform:scale(1.10);filter:blur(7px);}
  40% {opacity:1;}
  70% {transform:scale(1.004);filter:blur(0);}
  100%{opacity:1;transform:scale(1);filter:blur(0);}
}

/* ゴム伸び：伸びる世界観の案件のときだけ（ワンピース等）。
   各キーフレームに timing-function を書く（引くときは遅く、離した瞬間だけ速い）。
   縦は横と逆に縮めて体積保存に見せる。 */
html[data-op-motion="rubber"] .is-intro .op__mark{
  animation:opLogoRubber calc(1.32s * var(--op-k)) linear calc(var(--op-t-in) * var(--op-k)) both;
}
@keyframes opLogoRubber{
  0%  {opacity:0;transform:scale(.88);      animation-timing-function:cubic-bezier(.2,.9,.3,1);}
  9%  {opacity:1;transform:scale(1);        animation-timing-function:cubic-bezier(.9,0,.9,.35);}
  19% {transform:scaleX(1.22) scaleY(.94);  animation-timing-function:cubic-bezier(.65,0,.9,.45);}
  45% {transform:scaleX(4.2)  scaleY(.52);  animation-timing-function:cubic-bezier(.35,0,.9,.55);}
  57% {transform:scaleX(7.4)  scaleY(.37);  animation-timing-function:cubic-bezier(.08,1,.2,1);}  /* 限界で粘る */
  64% {transform:scaleX(.52)  scaleY(1.42); animation-timing-function:cubic-bezier(.2,.9,.3,1);}  /* 離した＝パチン */
  73% {transform:scaleX(1.32) scaleY(.84);}
  81% {transform:scaleX(.88)  scaleY(1.09);}
  88% {transform:scaleX(1.07) scaleY(.97);}
  94% {transform:scaleX(.98)  scaleY(1.02);}
  100%{transform:none;}
}
/* ゴム伸びのときは、光沢は伸び切ってから（＝離した直後に）走らせる */
/* ゴム伸びは離すまでに時間がかかるので、線・帯・粒・抜けを丸ごと後ろへずらす */
html[data-op-motion="rubber"]{--op-t-snap:.93s;--op-t-sub:.98s;--op-t-out:1.80s;}

/* ══ ここから下は「足す」装飾 ══
   通常時（standard）は何も足さない＝ロゴがフェードインするだけ。
   イベントのときだけ、テーマ側で必要なものを on にする（data-op-deco）。
   ★ロゴの上には何も重ねない。光沢・きらめき・縁・影をロゴに乗せるのはロゴの加工にあたる。
   装飾を足すのは幕の側だけ（地の色と質感・弾ける粒・ロゴ下の線／帯・抜け方）。 */

/* ── ロゴ下の線（帯を出さないテーマで、区切りが欲しいときだけ） ── */
.op__line{
  display:none;width:132px;height:2px;background:var(--op-line);
  transform:scaleX(0);transform-origin:center;opacity:0;
}
html[data-op-deco~="line"] .op__line{display:block;}
.is-intro .op__line{animation:opLine calc(.42s * var(--op-k)) var(--op-ease) calc(var(--op-t-sub) * var(--op-k)) both;}
@keyframes opLine{from{transform:scaleX(0);opacity:0;} to{transform:scaleX(1);opacity:1;}}

/* ── サブ帯（アレンジ枠。イベント名を入れるときだけ出す） ──
   帯ワイプで出す。JSが動かなくても文字が読める状態を既定にする（clip-pathで隠す） */
.op__sub{
  position:relative;display:none;
  padding:7px 18px;background:var(--op-sub-bg);color:var(--op-sub-ink);
  font-family:var(--op-f-head,"M PLUS 1",system-ui,sans-serif);font-weight:900;
  font-size:15px;letter-spacing:.14em;line-height:1.2;white-space:nowrap;
}
.op[data-op-sub]:not([data-op-sub=""]) .op__sub{display:block;}
.is-intro .op__sub{animation:opSubWipe calc(.42s * var(--op-k)) var(--op-ease) calc(var(--op-t-sub) * var(--op-k)) both;}
@keyframes opSubWipe{
  from{clip-path:inset(0 100% 0 0);opacity:0;}
  20% {opacity:1;}
  to  {clip-path:inset(0 0 0 0);opacity:1;}
}
@media (min-width:860px){ .op__sub{font-size:17px;padding:8px 22px;} }

/* ── パチンの瞬間：閃光・リング・粒 ── */
.op__flash{position:absolute;inset:0;z-index:3;pointer-events:none;background:var(--op-flash);opacity:0;}
.is-intro .op__flash{animation:opFlash calc(.26s * var(--op-k)) ease-out calc((var(--op-t-snap) - .01s) * var(--op-k)) both;}
@keyframes opFlash{0%{opacity:0;}12%{opacity:var(--op-flash-a,0);}100%{opacity:0;}}

.op__ring{
  position:absolute;z-index:1;left:50%;top:50%;width:220px;height:220px;margin:-110px 0 0 -110px;
  border:2px solid var(--op-ring);border-radius:50%;opacity:0;pointer-events:none;
}
.is-intro .op__ring{animation:opRing calc(.62s * var(--op-k)) cubic-bezier(.1,.8,.2,1) calc(var(--op-t-snap) * var(--op-k)) both;}
@keyframes opRing{
  0%  {transform:scale(.18);opacity:0;}
  14% {opacity:.9;}
  100%{transform:scale(3.1);opacity:0;}
}
.op__cv{position:absolute;inset:0;z-index:4;pointer-events:none;width:100%;height:100%;display:block;}

/* ── 拍3：抜け方（data-op-out で切り替え。骨格はどれも同じ長さ） ── */
.op__veil{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;background:#000;}

/* fade：幕ごと透ける（標準） */
.intro-done .op{pointer-events:none;animation:opOutFade .42s var(--op-ease) both;}
@keyframes opOutFade{from{opacity:1;visibility:visible;} to{opacity:0;visibility:hidden;}}

/* up：幕が上へ引き上がる（祭り・イベント向け） */
.intro-done .op[data-op-out="up"]{animation:opOutUp .58s cubic-bezier(.7,0,.2,1) both;}
@keyframes opOutUp{from{transform:translateY(0);} to{transform:translateY(-100%);visibility:hidden;}}

/* flash：白く飛ばしてから抜ける（新弾・発表向け） */
.intro-done .op[data-op-out="flash"] .op__veil{background:#fff;animation:opVeil .34s ease-out both;}
@keyframes opVeil{from{opacity:0;} 40%{opacity:1;} to{opacity:0;}}
.intro-done .op[data-op-out="flash"]{animation:opOutFade .46s var(--op-ease) .12s both;}

/* wipe：中央から左右へ割れる（高額・特別枠向け） */
.intro-done .op[data-op-out="wipe"]{animation:opOutWipe .56s cubic-bezier(.7,0,.2,1) both;}
@keyframes opOutWipe{
  from{clip-path:inset(0 0 0 0);}
  to  {clip-path:inset(0 50% 0 50%);visibility:hidden;}
}

/* ── スキップ ── */
.op-skip{
  /* 毎回必ず出す。位置・大きさは案件で変えない（下部中央・幅180px・高さ44px以上） */
  position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));margin-left:-90px;width:180px;z-index:310;
  display:none;align-items:center;justify-content:center;min-height:44px;
  border:1px solid rgba(255,255,255,.45);background:rgba(0,0,0,.42);color:#fff;
  font-size:13px;letter-spacing:.08em;cursor:pointer;
}
.is-intro .op-skip{display:inline-flex;}
.intro-done .op-skip{display:none;}

/* ── 本編の出方（幕が抜けるのに合わせて、ヘッダー→KV→下の順） ──
   ヘッダーは transform を持たないキーフレームで出す（固定ヘッダーの隠しと喧嘩するため） */
@keyframes opFadeIn{from{opacity:0;} to{opacity:1;}}
@keyframes opPageIn{from{opacity:0;transform:translateY(12px);} to{opacity:1;transform:none;}}
.is-intro .site{opacity:0;}
.intro-done .hdr{animation:opFadeIn .6s var(--op-ease) .12s both;}
.intro-done .site{animation:opFadeIn .01s linear both;}
.intro-done .kv{animation:opPageIn .7s var(--op-ease) .18s both;}
.intro-done .after-kv{animation:opPageIn .7s var(--op-ease) .34s both;}

/* ── reduced-motion：幕そのものを出さない ──
   data-op-reduced="0" が明示されている時だけ、この打ち消しを無効にする
   （プレビューで演出を見るための逃げ道。本番LPには data-op-reduced を書かない） */
@media (prefers-reduced-motion:reduce){
  html:not([data-op-reduced="0"]) .op,
  html:not([data-op-reduced="0"]) .op-skip{display:none !important;}
  html:not([data-op-reduced="0"]).is-intro,
  html:not([data-op-reduced="0"]).is-intro body{overflow:auto;height:auto;}
  html:not([data-op-reduced="0"]).is-intro .site{opacity:1;}
}
/* プレビューで挙動を確かめるための強制スイッチ（本番LPには入れない） */
html[data-op-reduced="1"] .op,html[data-op-reduced="1"] .op-skip{display:none !important;}
html[data-op-reduced="1"].is-intro,html[data-op-reduced="1"].is-intro body{overflow:auto;height:auto;}
html[data-op-reduced="1"].is-intro .site{opacity:1;}


/* ══════════════════════════════════════════════════════════════
   月に焼き付くオープニング（この案件だけ・本番フェーズ）
   ------------------------------------------------------------
   DOPA!のロゴが幕の中央に出たあと、KVの月に入っている
   「浮き彫りのDOPA!」の位置と大きさへ移って消える。
   支給KVがその絵を持っているので、幕のロゴを重ねて消すだけで
   「ロゴが月に映し出されてKVができた」ように見える。
   ★ロゴは加工しない（logo.md）。動かすのは入れ物（.op__mark）だけ。
   ★幕は「消す」のではなく「薄くする」。真っ暗から急に本編に変わると飛ばされた感じになる。
══════════════════════════════════════════════════════════════ */
/* ══ お月見LP：KVの世界をそのまま幕にする（2026/08/30 伊藤さん指示）══
   幕の中身は**KVの縮小版**。支給KVの背景から切り出した実画像（星・雲・ススキ）を
   KVと同じ 1040×1300 のキャンバスに置き、その中でKVと同じ位置に月を出す。
   だから最後は「箱ごとKVの矩形に合わせる」だけでよく、幕が抜けたときに
   絵が入れ替わったように見えない。

   ★装飾はCSSで自作しない（実装標準6章）。星も雲もススキも支給KVからの切り出し。
     生成は _kv-source/make-op-scene.py。
   ★星は等倍のまま位置をずらして敷く（拡大・ぼかしをかけると紫のグラデ＝AI感になる）。
   ★KV(1040×1300)の月：中心(527,286)／半径300 →
     左21.827% / 上-1.077% / 幅57.692%（上端がマイナス＝KVの上辺で切れている）。 */
.op--moon{
  --op-scene-w:min(86vw,56vh);   /* 1040:1300 の箱。高さは幅×1.25 */
  --op-fly-t:1.15s; --op-lift-t:.52s;
  --op-wax-t:1s;      /* 影 → 満月 */
  --op-emb-t:.5s;     /* 凹みロゴが浮かぶ */
}
.op--moon .op__logo{display:none;}                   /* この型では白ロゴは出さない */
.op--moon .op__line,.op--moon .op__sub{display:none;}

/* ★入れ物の animation を必ず切る。標準は `animation: opLogoFade … both` が付いていて、
   **both で最終状態の transform を持ち続ける**ため transition が効かない（既知バグ42） */
.op--moon .op__mark{animation:none !important;
  display:block;position:relative;
  width:var(--op-scene-w);height:calc(var(--op-scene-w) * 1.25);
  transition:transform var(--op-fly-t) cubic-bezier(.32,.06,.16,1),
             opacity   calc(var(--op-fly-t) * .28) linear calc(var(--op-fly-t) * .72);
  will-change:transform,opacity;}
/* 舞台ごとKVの矩形へ。縦横比が同じなので中心を合わせて拡大するだけで重なる */
.op--moon.is-fly .op__mark{
  transform:translate3d(var(--op-fly-x,0),var(--op-fly-y,0),0) scale(var(--op-fly-k,1));
  opacity:0;}

/* ── 支給KVからの切り出し。キャンバス全面なので inset:0 で座標が合う ── */
/* ★空・雲・ススキは幕が開いた時点で**もうそこにある**（2026/08/30 伊藤さん指示）。
   順に出すと「これから作ります」に見える。夜景は先にあって、そこに月が満ちる。 */
.op--moon .op__lay{position:absolute;inset:0;pointer-events:none;}
.op--moon .op__lay img{position:absolute;inset:0;width:100%;height:100%;}
.op--moon .op__lay--sky{z-index:1;}
.op--moon .op__lay--cloud{z-index:3;}
.op--moon .op__lay--grass{z-index:4;}

/* 星：等倍のまま位置をずらして3枚敷き、明滅の位相をずらす */
.op--moon .op__tw--2{transform:translate(-11.5%, 7%);}
.op--moon .op__tw--3{transform:translate(9%, -5.5%);}
.op--moon .op__tw--1{animation:opTwA 3.2s ease-in-out infinite;}
.op--moon .op__tw--2{animation:opTwB 4.7s ease-in-out .6s infinite;}
.op--moon .op__tw--3{animation:opTwA 5.9s ease-in-out 1.3s infinite;}
@keyframes opTwA{0%,100%{opacity:1}   50%{opacity:.38}}
@keyframes opTwB{0%,100%{opacity:.5}  50%{opacity:1}}

/* 雲：ゆっくり流れる。往復にしているのは、片道だと端で切れ目が出るため */
.op--moon .op__drift{animation:opDrift 19s ease-in-out infinite alternate;}
@keyframes opDrift{from{transform:translateX(-1.1%)}to{transform:translateX(1.4%)}}

/* ススキ：根元を軸にしならせる。風なので一定ではなく、緩急のある往復にする */
.op--moon .op__wind{transform-origin:50% 100%;}
.op--moon .op__wind{animation:opWind 5.4s cubic-bezier(.45,0,.55,1) infinite alternate;}
@keyframes opWind{from{transform:skewX(-1deg) rotate(-.22deg)}
                  to  {transform:skewX(1.1deg) rotate(.24deg)}}

/* ── 月。KVと同じ位置・同じ大きさで置く ── */
.op--moon .op__moonwrap{position:absolute;left:21.827%;top:-1.077%;width:57.692%;
  aspect-ratio:1;z-index:2;}
/* 影は「穴」ではなく暗い面にする。わずかに透かすと地球照に見えて、
   真っ黒に切り抜いたときの「欠けている」ではなく「陰っている」に読める */
.op--moon .op__moon{position:absolute;inset:0;border-radius:50%;overflow:hidden;
  opacity:0;transform:scale(.94);
  transition:opacity .42s ease-out,transform .9s cubic-bezier(.16,.84,.3,1);}
.op--moon.is-moon .op__moon{opacity:1;transform:scale(1);}
.op--moon .op__moon img{position:absolute;inset:0;width:100%;height:100%;}
/* 影＝月と同寸の円。左へ抜けていくので、光は右から差してくる（上弦の向き） */
.op--moon .op__moon__sh{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 64% 46%,rgba(10,14,34,.955),rgba(6,9,24,.99) 68%);
  transform:translateX(0);            /* ★全面影（新月）から始める（2026/08/30 伊藤さん指示） */
  transition:transform var(--op-wax-t) cubic-bezier(.42,0,.28,1);}
.op--moon.is-full .op__moon__sh{transform:translateX(-100%);}

/* 満ちるほど強くなる暈（かさ）。月の外へ出すので clip の外側に置く */
.op--moon .op__moon__halo{position:absolute;inset:-20%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,236,168,.26) 0 33%,rgba(255,226,140,.11) 52%,transparent 72%);
  opacity:0;transition:opacity var(--op-wax-t) ease-out;}
.op--moon.is-full .op__moon__halo{opacity:1;}

/* 凹みDOPA!。★ロゴは加工しない（logo.md）。KVのレイヤーをそのまま置くだけ。
   位置は月の直径に対する割合で持つ（配置に transform を使わない：
   reduced-motion のリセットで消えて位置が飛ぶ） */
.op--moon .op__emb{position:absolute;left:11.585%;top:40%;width:76.83%;height:auto;
  opacity:0;transform:scale(1.05);pointer-events:none;z-index:2;
  transition:opacity var(--op-emb-t) ease-out,
             transform var(--op-emb-t) cubic-bezier(.16,.84,.3,1);}
.op--moon.is-emb .op__emb{opacity:1;transform:scale(1);}
/* ★迫ってくるあいだ、ロゴは月の上で動かさない（2026/08/30 伊藤さん指示）。
   位置を変えると「月とロゴが別々に動いた」ように見える。
   KVでの定位置は月の上寄り（左10.83% / 上12.83%）で幕とは違うので、
   **動かす代わりに、着地の前に先に消す**。
   こうすると幕のDOPA!とKVのDOPA!が同時に見える瞬間ができない
   （KV側の凹みDOPA!は着地の320ms前から出る） */
.op--moon.is-fly .op__emb{opacity:0;
  transition:opacity calc(var(--op-fly-t) * .24) ease-in calc(var(--op-fly-t) * .42);}

/* 幕。舞台が動き出すのに合わせて薄れ、KVが現れる */
.op--moon{transition:background-color var(--op-fly-t) ease-out, opacity var(--op-lift-t) ease-out;}
.op--moon.is-fly{opacity:0;transition-delay:0s, calc(var(--op-fly-t) * .72);}

@media (prefers-reduced-motion: reduce){
  .op--moon .op__mark,.op--moon .op__lay,.op--moon .op__moon,
  .op--moon .op__moon__sh,.op--moon .op__moon__halo,.op--moon .op__emb{transition:none;}
  .op--moon .op__moon__sh{transform:translateX(-100%);}
  .op--moon .op__tw--1,.op--moon .op__tw--2,.op--moon .op__tw--3,
  .op--moon .op__drift,.op--moon .op__wind{animation:none !important;}
}
}
}