/* =========================================================
   和のアニメーション・カタログ（軽量版）
   ---------------------------------------------------------
   気に入らないものは番号ブロックごと削除してください。
   filter / ページ全体の無限ループは端末を止めるので入れていません。
   ========================================================= */

/* [Z-01] イージング */
:root {
  --e-shizuka: cubic-bezier(.22, .61, .36, 1);
  --e-niji: cubic-bezier(.33, 1, .68, 1);
  --e-fude: cubic-bezier(.22, 1, .36, 1);
  /* 上に凸の二次: 1-(1-t)^2。最初が速く、後半はゆっくり */
  --e-quad-out: cubic-bezier(.5, 1, .89, 1);

  /* ヒーロー登場順: 画像 → 0.3秒 → 他の文字 → どう関わるか？ → 赤線 */
  --hero-img-delay: .08s;
  --hero-img-dur: 1.3s;
  --hero-gap: .3s;
  --hero-text-delay: calc(var(--hero-img-delay) + var(--hero-img-dur) + var(--hero-gap));
  --hero-text-dur: .75s;
  --hero-accent-delay: var(--hero-text-delay);
  --hero-char-dur: .7s;
  --hero-char-stagger: 45ms;
  /* 「どう関わるか？」は7文字。最後の字が終わるまで + 6段 */
  --hero-line-delay: calc(var(--hero-accent-delay) + var(--hero-char-dur) + 6 * var(--hero-char-stagger));
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* [Z-03] スクロール登場：セクション単位（見出しとタイルを同時に） */
html.js-anim [data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s var(--e-quad-out), transform 1s var(--e-quad-out);
}
html.js-anim [data-reveal].is-inview {
  opacity: 1;
  transform: none;
}

/* 発火ライン確認用（?animdebug=1 のときだけ JS が付ける） */
.reveal-debug-line {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 9999;
  pointer-events: none;
  border-top: 2px dashed #c22c50;
}
.reveal-debug-line span {
  position: absolute;
  right: 10px;
  top: 4px;
  padding: 2px 8px;
  background: #c22c50;
  color: #fff;
  font-size: 11px;
  letter-spacing: .04em;
}

/* =========================================================
   A. 初画面（開いてすぐ動く）ヒーローのみ
   ========================================================= */

/* [A-01] ページ全体のにじみ … 削除（filter: blur が全体を止めていた） */

/* [A-02] 「どう関わるか？」を一文字ずつ飛び跳ねるように
   JS で分割するまで生テキストが一瞬出ないよう、色だけ透明にしておく。 */
.hero-title-accent {
  color: transparent;
}
.hero-char {
  display: inline-block;
  color: var(--beni);
  opacity: 0;
  transform: translateY(10px);
  animation: a02-char var(--hero-char-dur) var(--e-niji) calc(var(--hero-accent-delay) + var(--i, 0) * var(--hero-char-stagger)) both;
}
@keyframes a02-char {
  to { opacity: 1; transform: none; }
}

/* [A-03] 筆の払い下線 */
.hero-title-accent {
  position: relative;
  display: inline-block;
}
.hero-title-accent::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .08em;
  height: 2px;
  background: var(--beni);
  opacity: .55;
  transform: scaleX(0);
  transform-origin: left center;
  animation: a03-fude 1s var(--e-fude) var(--hero-line-delay) both;
}
@keyframes a03-fude {
  to { transform: scaleX(1); }
}

/* 画像のあと、見出しまわりの文字を同時に（「どう関わるか？」は除く） */
.hero-kicker,
.hero-title-pre,
.hero-title-sub,
.hero-lead,
.hero-actions {
  opacity: 0;
  transform: translateY(14px);
  animation: fade-up var(--hero-text-dur) var(--e-niji) var(--hero-text-delay) both;
}

/* [A-04] ヒーロー画像：白い膜は重ねない。
   最初は画像が透明で背景だけ見え、風で霧がまだらに晴れて絵が現れる。
   中央から均一に膨らませず、端の切れ間が別々のタイミングで広がる。 */
.hero-visual img {
  --kumo-mask:
    radial-gradient(ellipse closest-side, #000 26%, transparent 78%),
    radial-gradient(ellipse closest-side, #000 22%, transparent 76%),
    radial-gradient(ellipse closest-side, #000 24%, transparent 78%),
    radial-gradient(ellipse closest-side, #000 20%, transparent 74%),
    radial-gradient(ellipse closest-side, #000 28%, transparent 80%),
    radial-gradient(ellipse closest-side, #000 18%, transparent 72%),
    radial-gradient(ellipse closest-side, #000 22%, transparent 76%);
  -webkit-mask-image: var(--kumo-mask);
  mask-image: var(--kumo-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-composite: source-over;
  mask-composite: add;
  -webkit-mask-position: 86% 16%, 8% 22%, 78% 82%, 18% 84%, 94% 48%, 42% 8%, 52% 92%;
  mask-position: 86% 16%, 8% 22%, 78% 82%, 18% 84%, 94% 48%, 42% 8%, 52% 92%;
  -webkit-mask-size: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  mask-size: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  animation: a04-kumo-ake var(--hero-img-dur) linear var(--hero-img-delay) both;
}
@keyframes a04-kumo-ake {
  0% {
    -webkit-mask-position: 86% 16%, 8% 22%, 78% 82%, 18% 84%, 94% 48%, 42% 8%, 52% 92%;
    mask-position: 86% 16%, 8% 22%, 78% 82%, 18% 84%, 94% 48%, 42% 8%, 52% 92%;
    -webkit-mask-size: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
    mask-size: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  }
  /* 右上に最初の切れ間（横に薄い） */
  18% {
    -webkit-mask-position: 90% 12%, 6% 24%, 80% 84%, 16% 86%, 96% 46%, 40% 6%, 54% 94%;
    mask-position: 90% 12%, 6% 24%, 80% 84%, 16% 86%, 96% 46%, 40% 6%, 54% 94%;
    -webkit-mask-size: 46% 18%, 0 0, 0 0, 0 0, 8% 14%, 0 0, 0 0;
    mask-size: 46% 18%, 0 0, 0 0, 0 0, 8% 14%, 0 0, 0 0;
  }
  /* 左上と右端が空きはじめる。右上は風下へ流れる */
  36% {
    -webkit-mask-position: 96% 8%, 4% 18%, 84% 80%, 14% 88%, 100% 42%, 36% 4%, 56% 96%;
    mask-position: 96% 8%, 4% 18%, 84% 80%, 14% 88%, 100% 42%, 36% 4%, 56% 96%;
    -webkit-mask-size: 88% 36%, 38% 22%, 6% 10%, 0 0, 42% 50%, 18% 10%, 0 0;
    mask-size: 88% 36%, 38% 22%, 6% 10%, 0 0, 42% 50%, 18% 10%, 0 0;
  }
  /* 下側が遅れて空き、切れ間同士がつながりかける */
  58% {
    -webkit-mask-position: 102% 4%, 0% 12%, 90% 74%, 10% 90%, 106% 38%, 28% 0%, 60% 100%;
    mask-position: 102% 4%, 0% 12%, 90% 74%, 10% 90%, 106% 38%, 28% 0%, 60% 100%;
    -webkit-mask-size: 140% 70%, 92% 56%, 58% 34%, 40% 28%, 96% 88%, 64% 28%, 36% 22%;
    mask-size: 140% 70%, 92% 56%, 58% 34%, 40% 28%, 96% 88%, 64% 28%, 36% 22%;
  }
  /* 残りがまだらに埋まる。中央は最後 */
  78% {
    -webkit-mask-position: 108% 0%, -4% 6%, 96% 68%, 4% 94%, 110% 34%, 20% -4%, 64% 104%;
    mask-position: 108% 0%, -4% 6%, 96% 68%, 4% 94%, 110% 34%, 20% -4%, 64% 104%;
    -webkit-mask-size: 190% 120%, 150% 110%, 130% 90%, 110% 80%, 160% 140%, 130% 70%, 110% 75%;
    mask-size: 190% 120%, 150% 110%, 130% 90%, 110% 80%, 160% 140%, 130% 70%, 110% 75%;
  }
  100% {
    -webkit-mask-position: 112% -4%, -8% 0%, 100% 62%, 0% 98%, 114% 30%, 12% -8%, 68% 108%;
    mask-position: 112% -4%, -8% 0%, 100% 62%, 0% 98%, 114% 30%, 12% -8%, 68% 108%;
    -webkit-mask-size: 260% 220%, 240% 210%, 230% 200%, 220% 190%, 250% 230%, 220% 180%, 210% 190%;
    mask-size: 260% 220%, 240% 210%, 230% 200%, 220% 190%, 250% 230%, 220% 180%, 210% 190%;
  }
}

/* [A-05] 影の滑り込み … 省略（box-shadow 連続変化は重い） */

/* [A-06] ヘッダー降下 … 省略（初動の引っかかりになる） */

/* [A-07] 統計のカウントアップは js/anim.js */

.stats-band .stat {
  opacity: 0;
  transform: translateY(14px);
  animation: fade-up .7s var(--e-niji) calc(var(--hero-text-delay) + var(--i, 0) * .08s) both;
}

/* =========================================================
   B. スクロール連動はセクション単位（Z-03）
   見出しと画像・タイルを同時に出す。個別カードの遅延はしない。
   ========================================================= */

/* =========================================================
   C. 常時（transform / opacity のみ、ごく少数）
   ========================================================= */

/* [C-01] 波線フロー … 省略（ページ全体の背景アニメは重い） */
/* [C-02] 和紙の呼吸 … 省略（全面オーバーレイは重い） */

/* [C-03] ブランドマークが微かに揺れる */
.brand-mark {
  animation: c03-yure 7s ease-in-out infinite alternate;
}
@keyframes c03-yure {
  from { transform: rotate(-4deg); }
  to { transform: rotate(-2.6deg); }
}

/* [C-04] 花びら（transform / opacity のみ、20枚） */
.petal-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.petal {
  position: absolute;
  top: -20px;
  left: var(--x, 20%);
  width: 9px;
  height: 13px;
  background: radial-gradient(circle at 30% 30%, #f3c5d0, #c22c50 70%);
  border-radius: 70% 0 70% 0;
  opacity: .48;
  transform: scale(var(--s, 1));
  will-change: transform, opacity;
  animation: c04-hana var(--d, 22s) linear var(--delay, 0s) infinite;
}
@keyframes c04-hana {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(var(--s, 1)); opacity: 0; }
  8% { opacity: .48; }
  90% { opacity: .22; }
  100% { transform: translate3d(var(--drift, 36px), 110vh, 0) rotate(200deg) scale(var(--s, 1)); opacity: 0; }
}

/* [C-05] ボタン呼吸 … 省略（box-shadow ループは重い） */
/* [C-06] ABOUT 青海波 … 省略 */

/* [C-07] 右端の墨の進捗線 */
.scroll-ink {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 120;
  width: 2px;
  height: 100%;
  transform: scaleY(0);
  transform-origin: top center;
  background: linear-gradient(to bottom, var(--beni), var(--sen));
  opacity: .5;
  pointer-events: none;
}

/* =========================================================
   D. ホバー
   ========================================================= */

/* [D-01] リンク下線がにじんで伸びる */
.global-nav a,
.footer-nav a,
.article-samples a,
.article-cat-more,
.pillar-more {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-position: left 100%;
  background-repeat: no-repeat;
  transition: background-size .4s var(--e-shizuka), color .2s, background-color .2s;
}
.global-nav a:hover,
.footer-nav a:hover,
.article-samples a:hover,
.article-cat-more:hover,
.pillar-more:hover {
  background-size: 100% 1px;
}

/* [D-02] ボタンが下から満ちる */
.btn {
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: currentColor;
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform .4s var(--e-shizuka);
  opacity: .12;
}
.btn-primary::before { background: #fff; opacity: .18; }
.btn:hover::before { transform: scaleY(1); }

/* [D-03] カードの影をゆっくり */
.pillar-card,
.featured-card,
.work-band,
.novel-card,
.player-card,
.app-card,
.article-cat-card {
  transition: transform .4s var(--e-shizuka), box-shadow .4s var(--e-shizuka), border-color .4s var(--e-shizuka);
}

/* [D-04] pillar 緑線が中央から伸びる */
.pillar-card::before {
  opacity: 1;
  transform: scaleX(0);
  transform-origin: center top;
  transition: transform .45s var(--e-fude);
}
.pillar-card:hover::before { transform: scaleX(1); }

/* [D-06] chip の墨 */
.chip {
  position: relative;
  overflow: hidden;
  z-index: 0;
  transition: color .25s var(--e-shizuka), border-color .25s var(--e-shizuka), background .25s var(--e-shizuka);
}
.chip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--sen);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s var(--e-shizuka);
}
.chip.active::before { transform: scaleX(1); }
.chip.active { background: transparent; }

/* [D-07] 小説カードが少し傾く */
.novel-card:hover {
  transform: translateY(-4px) rotate(.4deg);
}

/* [D-08] 画像のゆっくりズーム */
.featured-card img,
.work-band-visual img,
.novel-card img,
.player-card img,
.app-visual img {
  transition: transform 1s var(--e-shizuka);
}
.featured-card:hover img,
.work-band:hover .work-band-visual img,
.novel-card:hover img,
.player-card:hover img,
.app-card:hover .app-visual img {
  transform: scale(1.04);
}

/* [D-09] 大会カード左の縦線 … 大会一覧はアニメなし */

/* =========================================================
   E. 開閉
   ========================================================= */

/* [E-01] 大会カードの巻物展開 … 大会一覧はアニメなし（style.css の即時開閉） */

/* [E-02] トグル回転 … 大会一覧はアニメなし */

/* [E-03] スマホナビ */
@media (max-width: 960px) {
  .global-nav {
    display: flex !important;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .35s var(--e-niji), transform .35s var(--e-niji), visibility .35s;
  }
  .global-nav.open {
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* [E-04] 一覧入れ替え … 大会一覧はアニメなし */

/* [E-05] 画像 blur … 省略 */

/* [W-STAGE] 代表大会ステージ（斜め分割。data-fx-* を外すと個別に落ちる） */
html.js-anim .work-stage[data-fx-mist] .work-scene-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--washi);
  opacity: 1;
  pointer-events: none;
  transition: opacity .9s var(--e-quad-out);
}
html.js-anim .work-stage[data-fx-mist] .work-scene.is-active .work-scene-visual::after {
  opacity: 0;
}
html.js-anim .work-stage[data-fx-mist] .work-scene-visual {
  clip-path: polygon(0 0, 42% 0, 28% 100%, 0 100%);
  transition: clip-path .95s var(--e-quad-out);
}
html.js-anim .work-stage[data-fx-mist] .work-scene.is-active .work-scene-visual {
  clip-path: polygon(0 0, 100% 0, var(--cut-bot) 100%, 0 100%);
}
html.js-anim .work-stage[data-fx-mist] .work-scene--flip .work-scene-visual {
  clip-path: polygon(58% 0, 100% 0, 100% 100%, 72% 100%);
}
html.js-anim .work-stage[data-fx-mist] .work-scene--flip.is-active .work-scene-visual {
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    calc(100% - var(--cut-bot)) 100%
  );
}
html.js-anim .work-stage[data-fx-mist] .work-scene-slash {
  clip-path: polygon(calc(42% - 2px) 0, 42% 0, 28% 100%, calc(28% - 2px) 100%);
  transition: clip-path .95s var(--e-quad-out);
}
html.js-anim .work-stage[data-fx-mist] .work-scene.is-active .work-scene-slash {
  clip-path: polygon(
    calc(100% - 2px) 0,
    100% 0,
    var(--cut-bot) 100%,
    calc(var(--cut-bot) - 2px) 100%
  );
}
html.js-anim .work-stage[data-fx-mist] .work-scene--flip .work-scene-slash {
  clip-path: polygon(58% 0, calc(58% + 2px) 0, calc(72% + 2px) 100%, 72% 100%);
}
html.js-anim .work-stage[data-fx-mist] .work-scene--flip.is-active .work-scene-slash {
  clip-path: polygon(
    0 0,
    2px 0,
    calc(100% - var(--cut-bot) + 2px) 100%,
    calc(100% - var(--cut-bot)) 100%
  );
}

html.js-anim .work-stage[data-fx-gasan] .work-scene-field,
html.js-anim .work-stage[data-fx-gasan] .work-scene-title,
html.js-anim .work-stage[data-fx-gasan] .work-scene-tagline,
html.js-anim .work-stage[data-fx-gasan] .work-scene-desc {
  opacity: 0;
  transform: translate3d(-16px, 10px, 0);
  transition: opacity .62s var(--e-quad-out), transform .62s var(--e-quad-out);
}
html.js-anim .work-stage[data-fx-gasan] .work-scene--flip .work-scene-field,
html.js-anim .work-stage[data-fx-gasan] .work-scene--flip .work-scene-title,
html.js-anim .work-stage[data-fx-gasan] .work-scene--flip .work-scene-tagline,
html.js-anim .work-stage[data-fx-gasan] .work-scene--flip .work-scene-desc {
  transform: translate3d(16px, 10px, 0);
}
html.js-anim .work-stage[data-fx-gasan] .work-scene.is-active .work-scene-field {
  opacity: 1;
  transform: none;
  transition-delay: .08s;
}
html.js-anim .work-stage[data-fx-gasan] .work-scene.is-active .work-scene-title {
  opacity: 1;
  transform: none;
  transition-delay: .18s;
}
html.js-anim .work-stage[data-fx-gasan] .work-scene.is-active .work-scene-tagline {
  opacity: 1;
  transform: none;
  transition-delay: .24s;
}
html.js-anim .work-stage[data-fx-gasan] .work-scene.is-active .work-scene-desc {
  opacity: 1;
  transform: none;
  transition-delay: .3s;
}

html.js-anim .work-stage[data-fx-stamp] .work-scene-stamp {
  opacity: 0;
  transform: rotate(-8deg) scale(1.12);
  transition: opacity .4s var(--e-fude), transform .5s var(--e-fude);
}
html.js-anim .work-stage[data-fx-stamp] .work-scene.is-active .work-scene-stamp {
  opacity: .94;
  transform: rotate(-8deg) scale(1);
  transition-delay: .48s;
}

html.js-anim .work-stage[data-fx-stamp] .work-scene--flip .work-scene-stamp {
  transform: rotate(8deg) scale(1.12);
}
html.js-anim .work-stage[data-fx-stamp] .work-scene--flip.is-active .work-scene-stamp {
  transform: rotate(8deg) scale(1);
}

/* 箱と赤線は固定。スクロールは中の写真の切り取りだけ動かす */
html.js-anim .work-stage[data-fx-recede] .work-scene-visual img {
  position: absolute;
  left: -14px;
  top: -12px;
  width: calc(100% + 28px);
  height: calc(100% + 24px);
  max-width: none;
  transform: translate3d(
    calc(var(--recede, 0) * -10px),
    calc(var(--recede, 0) * 7px),
    0
  );
  transform-origin: center center;
  transition: transform .2s linear;
}

@media (prefers-reduced-motion: reduce) {
  html.js-anim .work-stage[data-fx-mist] .work-scene-visual::after,
  html.js-anim .work-stage[data-fx-gasan] .work-scene-field,
  html.js-anim .work-stage[data-fx-gasan] .work-scene-title,
  html.js-anim .work-stage[data-fx-gasan] .work-scene-tagline,
  html.js-anim .work-stage[data-fx-gasan] .work-scene-desc,
  html.js-anim .work-stage[data-fx-stamp] .work-scene-stamp {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  html.js-anim .work-stage[data-fx-mist] .work-scene-visual,
  html.js-anim .work-stage[data-fx-mist] .work-scene.is-active .work-scene-visual {
    clip-path: polygon(0 0, 100% 0, var(--cut-bot) 100%, 0 100%) !important;
  }
  html.js-anim .work-stage[data-fx-mist] .work-scene-slash,
  html.js-anim .work-stage[data-fx-mist] .work-scene.is-active .work-scene-slash {
    clip-path: polygon(
      calc(100% - 2px) 0,
      100% 0,
      var(--cut-bot) 100%,
      calc(var(--cut-bot) - 2px) 100%
    ) !important;
  }
  html.js-anim .work-stage[data-fx-mist] .work-scene--flip .work-scene-visual,
  html.js-anim .work-stage[data-fx-mist] .work-scene--flip.is-active .work-scene-visual {
    clip-path: polygon(
      0 0,
      100% 0,
      100% 100%,
      calc(100% - var(--cut-bot)) 100%
    ) !important;
  }
  html.js-anim .work-stage[data-fx-mist] .work-scene--flip .work-scene-slash,
  html.js-anim .work-stage[data-fx-mist] .work-scene--flip.is-active .work-scene-slash {
    clip-path: polygon(
      0 0,
      2px 0,
      calc(100% - var(--cut-bot) + 2px) 100%,
      calc(100% - var(--cut-bot)) 100%
    ) !important;
  }
  html.js-anim .work-stage[data-fx-stamp] .work-scene-stamp {
    transform: rotate(-8deg) !important;
  }
  html.js-anim .work-stage[data-fx-stamp] .work-scene--flip .work-scene-stamp {
    transform: rotate(8deg) !important;
  }
  html.js-anim .work-stage[data-fx-recede] .work-scene-visual img {
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  html.js-anim [data-reveal],
  .hero-char,
  .hero-kicker,
  .hero-title-pre,
  .hero-title-sub,
  .hero-lead,
  .hero-actions,
  .hero-visual,
  .stats-band .stat {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-title-accent {
    color: var(--beni) !important;
  }
  .hero-title-accent::after { transform: scaleX(1); }
  .hero-visual img {
    filter: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  .petal-layer,
  .scroll-ink { display: none; }
}