@charset "UTF-8";
/* =====================================================================
   世界のカップヌードル × SixTONES  SP モーション
   motion.css  v1.1（2026-10-07：モーダルのオーバーレイを 85% に）

   ・数値は CSS px（375 幅）。AE・PSD（750 幅）の ½
   ・時間は秒。プレビュー動画（03_preview）と同じ値
   ・動かすのは translate / scale / rotate / opacity だけ（GPU で軽い）
   ・ずっと動き続けるものはなし
   ・フックは data 属性（見た目の class とは分けている）
       data-fv       … ① FV（読み込んだら自動で再生）
       data-rv       … ② スクロールで出す
       data-rv-card  … ③ カードの白ベタのぽよん（data-jelly）
       data-press    … ④ 押したとき
       .modal        … ⑤ 動画モーダル
   ・JS（motion.js）とセットで使う
   ===================================================================== */

:root {
  /* ---- イージング（AE に入れた値と同じ） ---- */
  --ease-snap:  cubic-bezier(.16, 1, .3, 1);      /* ピタッ：型にハマる */
  --ease-pop:   cubic-bezier(.34, 1.45, .64, 1);  /* ちょっとポップ：少し行き過ぎて戻る */
  --ease-pop-s: cubic-bezier(.34, 1.3, .64, 1);   /* ひかえめポップ */
  --ease-quart: cubic-bezier(.165, .84, .44, 1);  /* ふわっと着地（niwacan 参考） */
  --ease-out:   cubic-bezier(0, 0, .58, 1);       /* UI：オーバーレイ */
  --ease-in:    cubic-bezier(.42, 0, 1, 1);       /* 退場 */
  --ease-inout: cubic-bezier(.65, 0, .35, 1);     /* スムーススクロール・沈む */
  --ease-fall:  cubic-bezier(.5, 0, .85, .45);    /* 落ちる（だんだん速く） */
  --ease-sine:  cubic-bezier(.37, 0, .63, 1);     /* ゆらゆら収まる */
  --ease-press: cubic-bezier(.33, 1, .68, 1);     /* 押し込み */
}
/* ※ @keyframes の中は var() を避けて、同じ値を直接書いている */


/* =====================================================================
   ① FV：黄色い文字と商品がハマっていく
   ・t = 0 は <html> に .is-fv が付いた瞬間（motion.js が、画像とフォントが揃ってから付ける）
   ・それまでは各アニメの 0% の状態（見えない）で止めておく
   ===================================================================== */
html.js [data-fv],
html.js [data-glyph] {
  animation-fill-mode: backwards;
  animation-play-state: paused;
}
html.js.is-fv [data-fv],
html.js.is-fv [data-glyph] {
  animation-play-state: running;
}

/* --- KVコピー（SVG の <g> を1文字ずつ動かす） --- */
[data-fv="copy"] { overflow: visible; }   /* SVG は初期値で枠の外が切れる。上から落ちてくる「ハマる」が切れないように */
[data-glyph] {
  transform-box: fill-box;      /* 文字そのものの中心で拡大縮小 */
  transform-origin: center;
}
/* 1行目「クセになる。だから」：左から 28px スライドしてハマる（0.065s 差） */
html.js [data-glyph="1"] {
  animation-name: fv-in-left-28, fv-settle-1, fv-fade;
  animation-duration: .4s, .5s, .06s;
  animation-timing-function: var(--ease-snap), linear, linear;
  animation-delay: calc(.2s + .065s * var(--i, 0));
}
/* 2行目「ハマる」：上から 75px 落ちてハマる（0.07s 差） */
html.js [data-glyph="2"] {
  animation-name: fv-in-top-75, fv-settle-2, fv-fade;
  animation-duration: .4s, .5s, .06s;
  animation-timing-function: var(--ease-snap), linear, linear;
  animation-delay: calc(.84s + .07s * var(--i, 0));
}
/* 最後の「。」：スタンプ */
html.js [data-glyph="maru"] {
  animation-name: fv-stamp, fv-fade;
  animation-duration: .36s, .06s;
  animation-timing-function: var(--ease-pop), linear;
  animation-delay: 1.14s;
}
/* ハマった瞬間：コピー全体が 1 → 1.025 → 1 と弾む */
html.js [data-fv="copy"] {
  transform-origin: 50% 50%;
  animation-name: fv-bump;
  animation-duration: .36s;
  animation-delay: 1.32s;
}

/* --- 人物（KV のビジュアル）：動かさない。不透明度だけ --- */
html.js [data-fv="kv"] {
  animation-name: fv-fade;
  animation-duration: .36s;
  animation-timing-function: var(--ease-out);
  animation-delay: 1.32s;
}
/* --- 世界のCUP NOODLES × SixTONES --- */
html.js [data-fv="sixtones"] {
  animation-name: fv-pop-70, fv-fade;
  animation-duration: .44s, .12s;
  animation-timing-function: var(--ease-pop), linear;
  animation-delay: 1.52s;
}
/* --- 世界のカップヌードル（ロゴ）：左から 48px スライドしてハマる --- */
html.js [data-fv="logo"] {
  animation-name: fv-in-left-48, fv-settle-3, fv-fade;
  animation-duration: .44s, .5s, .06s;
  animation-timing-function: var(--ease-snap), linear, linear;
  animation-delay: 1.68s;
}
/* --- 商品3つ：ぽよん（カップの底の中心を支点に、伸びて落ちる → 潰れる → 跳ねる → 揺れて収まる） --- */
[data-fv^="cup"] { transform-origin: 50% 100%; }
html.js [data-fv^="cup"] {
  animation-duration: 1.06s, .06s;
  animation-timing-function: linear, linear;
}
html.js [data-fv="cup1"] { animation-name: fv-poyon-1, fv-fade; animation-delay: 1.84s; }
html.js [data-fv="cup2"] { animation-name: fv-poyon-2, fv-fade; animation-delay: 1.97s; }
html.js [data-fv="cup3"] { animation-name: fv-poyon-3, fv-fade; animation-delay: 2.08s; }
/* --- リード3行：下から 16px（0.08s 差）→ 目線を下へ --- */
html.js [data-fv="lead"] {
  animation-name: fv-rise-16, fv-fade;
  animation-duration: .8s, .32s;
  animation-timing-function: var(--ease-quart), linear;
  animation-delay: calc(2.46s + .08s * var(--i, 0));
}

@keyframes fv-fade      { from { opacity: 0; } to { opacity: 1; } }
@keyframes fv-in-left-28 { from { translate: -28px 0; } to { translate: 0 0; } }
@keyframes fv-in-left-48 { from { translate: -48px 0; } to { translate: 0 0; } }
@keyframes fv-in-top-75  { from { translate: 0 -75px; } to { translate: 0 0; } }
@keyframes fv-rise-16    { from { translate: 0 16px; } to { translate: 0 0; } }
@keyframes fv-pop-70     { from { scale: .7; } to { scale: 1; } }
@keyframes fv-stamp      { from { scale: 0; } to { scale: 1; } }
/* 大きめから入って、少し沈んで、収まる（.34s で沈む → .16s で戻る） */
@keyframes fv-settle-1 {
  0%   { scale: 1.12; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  68%  { scale: .96;  animation-timing-function: cubic-bezier(.34, 1.3, .64, 1); }
  100% { scale: 1; }
}
@keyframes fv-settle-2 {
  0%   { scale: 1.18; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  68%  { scale: .94;  animation-timing-function: cubic-bezier(.34, 1.3, .64, 1); }
  100% { scale: 1; }
}
@keyframes fv-settle-3 {
  0%   { scale: 1.1;  animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  68%  { scale: .97;  animation-timing-function: cubic-bezier(.34, 1.3, .64, 1); }
  100% { scale: 1; }
}
@keyframes fv-bump {
  0%     { scale: 1;     animation-timing-function: cubic-bezier(0, 0, .58, 1); }
  22.22% { scale: 1.025; animation-timing-function: cubic-bezier(.34, 1.3, .64, 1); }
  100%   { scale: 1; }
}
/* ぽよん：3つで振れ幅・跳ね・傾きの向きを変えて有機的に
   区間のイージング：落ちる (.5,0,.85,.45) → 潰れる・跳ねる (0,0,.58,1) → 落ちる → ゆらゆら (.37,0,.63,1) */
@keyframes fv-poyon-1 {  /* トムヤムクン：振れ幅 1／跳ね 8px／傾き ＋ */
  0%     { translate: 0 -55px; scale: .9 1.16;    rotate: 5deg;    animation-timing-function: cubic-bezier(.5, 0, .85, .45); }
  22.64% { translate: 0 0;     scale: .94 1.12;   rotate: 3deg;    animation-timing-function: cubic-bezier(0, 0, .58, 1); }
  30.19% { translate: 0 0;     scale: 1.22 .78;   rotate: 0deg;    animation-timing-function: cubic-bezier(0, 0, .58, 1); }
  45.28% { translate: 0 -8px;  scale: .92 1.12;   rotate: -3.5deg; animation-timing-function: cubic-bezier(.5, 0, .85, .45); }
  60.38% { translate: 0 0;     scale: 1.1 .9;     rotate: 1.8deg;  animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  73.58% { translate: 0 0;     scale: .97 1.03;   rotate: -.9deg;  animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  86.79% { translate: 0 0;     scale: 1.015 .985; rotate: .3deg;   animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  100%   { translate: 0 0;     scale: 1 1;        rotate: 0deg; }
}
@keyframes fv-poyon-2 {  /* ラクサ：振れ幅 .82／跳ね 6px／傾き － */
  0%     { translate: 0 -45.1px; scale: .918 1.1312;  rotate: -4.1deg;   animation-timing-function: cubic-bezier(.5, 0, .85, .45); }
  22.64% { translate: 0 0;       scale: .9508 1.0984; rotate: -2.46deg;  animation-timing-function: cubic-bezier(0, 0, .58, 1); }
  30.19% { translate: 0 0;       scale: 1.1804 .8196; rotate: 0deg;      animation-timing-function: cubic-bezier(0, 0, .58, 1); }
  45.28% { translate: 0 -6px;    scale: .9344 1.0984; rotate: 2.87deg;   animation-timing-function: cubic-bezier(.5, 0, .85, .45); }
  60.38% { translate: 0 0;       scale: 1.082 .918;   rotate: -1.476deg; animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  73.58% { translate: 0 0;       scale: .9754 1.0246; rotate: .738deg;   animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  86.79% { translate: 0 0;       scale: 1.0123 .9877; rotate: -.246deg;  animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  100%   { translate: 0 0;       scale: 1 1;          rotate: 0deg; }
}
@keyframes fv-poyon-3 {  /* 麻辣湯：振れ幅 1.18／跳ね 10px／傾き ＋ */
  0%     { translate: 0 -64.9px; scale: .882 1.1888;  rotate: 5.9deg;    animation-timing-function: cubic-bezier(.5, 0, .85, .45); }
  22.64% { translate: 0 0;       scale: .9292 1.1416; rotate: 3.54deg;   animation-timing-function: cubic-bezier(0, 0, .58, 1); }
  30.19% { translate: 0 0;       scale: 1.2596 .7404; rotate: 0deg;      animation-timing-function: cubic-bezier(0, 0, .58, 1); }
  45.28% { translate: 0 -10px;   scale: .9056 1.1416; rotate: -4.13deg;  animation-timing-function: cubic-bezier(.5, 0, .85, .45); }
  60.38% { translate: 0 0;       scale: 1.118 .882;   rotate: 2.124deg;  animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  73.58% { translate: 0 0;       scale: .9646 1.0354; rotate: -1.062deg; animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  86.79% { translate: 0 0;       scale: 1.0177 .9823; rotate: .354deg;   animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  100%   { translate: 0 0;       scale: 1 1;          rotate: 0deg; }
}


/* =====================================================================
   ② スクロールで出す
   ・要素の上端が「画面の下から 15%」の線を越えたら、JS が .is-in を付ける
   ・続けて出るものは 0.08s ずつずらす（JS が --rv-delay を入れる）
   ・種類（data-rv の値）
       rise    文字・見出し       下から 16px／0.8s ふわっと着地
       rise-s  カードの中の文字   下から 12px／0.64s ふわっと着地
       up      タイル・画像       下から 24px／0.64s ひかえめポップ
       pop     ボタン・ラベル     0.9 → 1／0.48s ポップ（ラベルは --rv-s: .7）
       item    LINEUP の商品      下から 32px ＋ 0.85 → 1
       stamp   SNS・TOP           0 → 1／0.48s ポップ
   ・個別に変えたいときは style="--rv-y: 24px" のように上書きできる
   ===================================================================== */
html.js [data-rv]:not(.is-in) { opacity: 0; }

[data-rv].is-in {
  animation-fill-mode: backwards;          /* 終わったら素の状態に戻す（押し込みとぶつからない） */
  animation-delay: var(--rv-delay, 0s);
}
[data-rv="rise"]   { --rv-y: 16px; --rv-dur: .8s;  --rv-fade: .32s; }
[data-rv="rise-s"] { --rv-y: 12px; --rv-dur: .64s; --rv-fade: .24s; }
[data-rv="up"]     { --rv-y: 24px; --rv-dur: .64s; --rv-fade: .24s; }
[data-rv="pop"]    { --rv-s: .9;   --rv-dur: .48s; --rv-fade: .16s; }
[data-rv="item"]   { --rv-y: 32px; --rv-s: .85;    --rv-fade: .2s; }
[data-rv="stamp"]  { --rv-s: 0;    --rv-dur: .48s; --rv-fade: .12s; }

[data-rv="rise"].is-in,
[data-rv="rise-s"].is-in {
  animation-name: rv-y, rv-fade;
  animation-duration: var(--rv-dur), var(--rv-fade);
  animation-timing-function: var(--ease-quart), linear;
}
[data-rv="up"].is-in {
  animation-name: rv-y, rv-fade;
  animation-duration: var(--rv-dur), var(--rv-fade);
  animation-timing-function: var(--ease-pop-s), linear;
}
[data-rv="pop"].is-in,
[data-rv="stamp"].is-in {
  animation-name: rv-scale, rv-fade;
  animation-duration: var(--rv-dur), var(--rv-fade);
  animation-timing-function: var(--ease-pop), linear;
}
[data-rv="item"].is-in {
  animation-name: rv-y, rv-scale, rv-fade;
  animation-duration: .64s, .56s, var(--rv-fade);
  animation-timing-function: var(--ease-pop-s), var(--ease-pop), linear;
}
/* to を書かない＝今の値まで動く */
@keyframes rv-y     { from { translate: 0 var(--rv-y); } }
@keyframes rv-scale { from { scale: var(--rv-s); } }
@keyframes rv-fade  { from { opacity: 0; } }

/* --- 動画の再生ボタン：プレーヤーが出た 0.28s 後にポンと出て、1回だけ脈打つ --- */
[data-rv].is-in [data-play] {
  animation: play-in 1.14s linear calc(var(--rv-delay, 0s) + .28s) backwards;
}
@keyframes play-in {
  0%     { scale: 0;    animation-timing-function: cubic-bezier(.34, 1.45, .64, 1); }
  42.11% { scale: 1;    animation-timing-function: linear; }
  57.89% { scale: 1;    animation-timing-function: cubic-bezier(0, 0, .58, 1); }
  77.19% { scale: 1.08; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  100%   { scale: 1; }
}


/* =====================================================================
   ③ カードの白ベタ：ぽよん（中心を支点に、横と縦が逆に揺れて収まる）
   ・カードの上端が「画面の下から 30%」の線を越えたら、JS が .is-in を付ける
   ・カードの中の data-rv は、白ベタの 0.24s 後から順に出る（JS で制御）
   ・白ベタは中身と別の要素にする（中身まで歪まないように）
   ===================================================================== */
html.js [data-jelly] { opacity: 0; }
[data-rv-card].is-in [data-jelly] {
  opacity: 1;
  transform-origin: 50% 50%;
  animation-name: jelly, rv-fade;
  animation-duration: .92s, .12s;
  animation-timing-function: linear, linear;
  animation-fill-mode: backwards;
}
@keyframes jelly {
  0%     { scale: 1.04 .9;    animation-timing-function: cubic-bezier(0, 0, .58, 1); }
  18.48% { scale: .975 1.04;  animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  38.04% { scale: 1.018 .982; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  58.7%  { scale: .992 1.009; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  79.35% { scale: 1.003 .997; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  100%   { scale: 1 1; }
}


/* =====================================================================
   ④ 押したとき：面が影の厚みの分だけ沈む
   ・JS が押している間 .is-pressed を付ける（短いタップでも 0.16s は沈んだまま）
   ・沈む量 --press ＝ 影の厚み。再生ボタン 2px／タイル 6px／黄色いボタン・TOP・×・SNS 2.5px
   ・data-press        … その要素が沈む（影は box-shadow で作る。下の例）
     data-press="face" … 中の .press-face だけが沈む（影を別の要素や画像で作るとき）
   ・沈む 0.08s (.33,1,.68,1) → 戻る 0.36s (.34,1.3,.64,1)
   ===================================================================== */
[data-press]:not([data-press="face"]),
[data-press="face"] .press-face {
  transition: translate .36s var(--ease-pop-s), box-shadow .36s var(--ease-pop-s);
}
[data-press]:not([data-press="face"]).is-pressed,
[data-press="face"].is-pressed .press-face {
  translate: 0 var(--press, calc(2.5 * var(--unit)));
  transition-duration: .08s;
  transition-timing-function: var(--ease-press);
}
/* 例：影を box-shadow で作るボタン
   .btn            { --press: 2.5px; box-shadow: 0 var(--press) 0 #1a1a1a; }
   .btn.is-pressed { box-shadow: 0 0 0 #1a1a1a; }               ← 面が沈んだぶん影を消す */

/* 押したときのおまけ（アイコン）：面が沈みきった 0.16s 後に動く */
[data-press].is-fx [data-fx="dip"]    { animation: fx-dip .52s linear .16s; }      /* ダウンロード：5px 下がって戻る */
[data-press].is-fx [data-fx="wiggle"] { animation: fx-wiggle .44s linear .16s; }   /* ストップウォッチ：揺れる */
@keyframes fx-dip {
  0%     { translate: 0 0;   animation-timing-function: cubic-bezier(0, 0, .58, 1); }
  30.77% { translate: 0 5px; animation-timing-function: cubic-bezier(.34, 1.3, .64, 1); }
  100%   { translate: 0 0; }
}
@keyframes fx-wiggle {
  0%     { rotate: 0deg;   animation-timing-function: cubic-bezier(0, 0, .58, 1); }
  22.73% { rotate: -14deg; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  50%    { rotate: 10deg;  animation-timing-function: cubic-bezier(.34, 1.3, .64, 1); }
  100%   { rotate: 0deg; }
}


/* =====================================================================
   ⑤ 動画モーダル
   ・開く：.is-open（JS）。閉じる：.is-closing（JS が 0.48s 後に hidden に戻す）
   ・開くより閉じるほうを速く
   ・中身の構造（クラス名はこのまま使う想定）
       .modal
         .modal__overlay            墨 #1A1A1A を不透明度 85%
         .modal__body
           .modal__line × 3         MOVIE／SixTONESが挑んだ／クセありポーズ…（style="--i:0〜2"）
           .modal__player           動画
           .modal__close            ×ボタンの外側（出る・消える）
             button[data-press]     ×ボタン（押し込み）
               .modal__close-icon   ×（回転して出る）
   ===================================================================== */
.modal[hidden] { display: none; }
.modal { position: fixed; inset: 0; z-index: 1000; }
.modal__overlay { position: absolute; inset: 0; background: #1a1a1a; opacity: 0; }
.modal__player  { opacity: 0; scale: .94; }
.modal__line    { opacity: 0; translate: 0 16px; }
.modal__close   { opacity: 0; scale: 0; }
.modal__close-icon { rotate: -90deg; }

/* 開く（タップしてから） */
.modal.is-open .modal__overlay { opacity: .85; transition: opacity .24s var(--ease-out); }
.modal.is-open .modal__player  { opacity: 1; scale: 1; transition: opacity .16s linear .06s, scale .48s var(--ease-pop-s) .06s; }
.modal.is-open .modal__line    { opacity: 1; translate: 0 0;
  transition: translate .56s var(--ease-quart) calc(.14s + .06s * var(--i, 0)), opacity .24s linear calc(.14s + .06s * var(--i, 0)); }
.modal.is-open .modal__close   { opacity: 1; scale: 1; transition: scale .48s var(--ease-pop) .38s, opacity .12s linear .38s; }
.modal.is-open .modal__close-icon { rotate: 0deg; transition: rotate .56s var(--ease-quart) .38s; }

/* 閉じる（×を押してから。押し込みを見せてから 0.12s 後に消え始める） */
.modal.is-closing .modal__overlay { opacity: 0; transition: opacity .28s var(--ease-out) .18s; }
.modal.is-closing .modal__player  { opacity: 0; scale: .96; transition: opacity .18s linear .12s, scale .24s var(--ease-in) .12s; }
.modal.is-closing .modal__line    { opacity: 0; translate: 0 0; transition: opacity .18s linear .12s; }
.modal.is-closing .modal__close   { opacity: 0; scale: 1; transition: opacity .16s linear .12s; }
.modal.is-closing .modal__close-icon { rotate: 0deg; }

/* モーダル中は後ろをスクロールさせない */
html.is-modal, html.is-modal body { overflow: hidden; }


/* =====================================================================
   ⑥ 動きを減らす設定（OS の「視差効果を減らす」など）のとき：動かさずに最後の状態で出す
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}