/* ============================================================
   恵比寿映像祭2027 ティザー：トップのキービジュアル
   デザインデータ YEBIZO27_web_16-9_teaser.ai（横 1600×900／縦 900×1600）の配置を再現する。
   - 背景：単色ピンク＋オブジェクト画像。画面いっぱいを「cover」で覆う
   - 文字（ロゴ・会期）と「展示無料」：SVG。画面に必ず収まる大きさ（contain）で左上・右上に置く
   ============================================================ */

/* スクロールの跳ね返り（Mac のトラックパッド・iPhone）でフッターの下に見える色はフッターと同じ黒にし、跳ね返り自体も止める */
html:has(body.home) {
  background-color: #000;
  overscroll-behavior-y: none;
}
body.home {
  background-color: #000;
  overscroll-behavior-y: none;
}
body.home .content {
  background-image: none;
}

.kv2027 {
  --kv-pink: #ff4fa5;
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background-color: var(--kv-pink);
}

/* --- 背景：アートボードを画面いっぱいに広げ、その中にオブジェクトを置く --- */
.kv2027__art {
  position: absolute;
  aspect-ratio: 16 / 9;
  width: max(100vw, calc(100vh * 16 / 9));
  width: max(100vw, calc(100svh * 16 / 9));
  right: 0; /* 横長の画面で幅が余るときは左側（文字側）を削る */
  top: 50%;
  transform: translateY(-50%);
}
.kv2027__objects {
  position: absolute;
  left: 27.18%;    /* 434.88 / 1600 */
  top: -69.56%;    /* -626.04 / 900 */
  width: 73.65%;   /* 1178.39 / 1600 */
  height: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

/* --- 文字：アートボード1単位あたりの大きさ（画面に収まる倍率） --- */
.kv2027 {
  --k: min(calc(100vw / 1600), calc(100vh / 900));
  --k: min(calc(100vw / 1600), calc(100svh / 900));
}
.kv2027__title {
  position: absolute;
  left: calc(var(--k) * 23.96);
  top: calc(var(--k) * 32.11);
  width: calc(var(--k) * 851.95);
  margin: 0;
  line-height: 0;
}
.kv2027__title .is-yoko,
.kv2027__badge .is-yoko {
  display: block;
}
.kv2027__title svg,
.kv2027__badge svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible; /* 跳ねた文字が枠で切れないように */
}
.kv2027__badge {
  position: absolute;
  right: calc(var(--k) * 28);   /* 1600 - 1508 - 64 */
  top: calc(var(--k) * 28);
  width: calc(var(--k) * 64);
  margin: 0;
}
.kv2027 .is-tate {
  display: none;
}

/* 画面に入りきらない文字（スクリーンリーダー用） */
.kv2027__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- 縦長の画面：縦のアートボード（900×1600）の配置 --- */
@media (orientation: portrait) {
  .kv2027__art {
    aspect-ratio: 9 / 16;
    width: max(100vw, calc(100vh * 9 / 16));
    width: max(100vw, calc(100svh * 9 / 16));
    left: 50%;
    right: auto;
    top: 0; /* 画面が縦に短いときは下側を削る */
    transform: translateX(-50%);
  }
  .kv2027__objects {
    left: -15.48%;   /* -139.28 / 900 */
    top: -2.26%;     /* -36.17 / 1600 */
    width: 130.93%;  /* 1178.39 / 900 */
  }
  .kv2027 {
    --k: min(calc(100vw / 900), calc(100vh / 1600));
    --k: min(calc(100vw / 900), calc(100svh / 1600));
  }
  .kv2027__title {
    top: calc(var(--k) * 32.05);
  }
  .kv2027__badge {
    left: calc(var(--k) * 24.29);
    right: auto;
    top: calc(var(--k) * 482.03);
  }
  .kv2027 .is-yoko {
    display: none;
  }
  .kv2027 .is-tate {
    display: block;
  }
}

/* ============================================================
   動き（テーマ「遊び」）
   - 登場：文字が波のように、ふわっと持ち上がりながら現れる（回転・拡大なし）。オブジェクトはふわっと現れる
   - 待機：オブジェクトがふわふわ漂い、「展示無料」はタグのように揺れる
   - 操作：マウス／指の位置にオブジェクトが少しついてくる。近くの文字が跳ねる
   - クリック／タップ：文字が波のように跳ね、オブジェクトが「ぽよん」と弾む
   - 視差効果を減らす設定の人には動きを出さない
   ============================================================ */

/* オブジェクトの入れ子：漂う動き（CSS）と、ポインターへの追従（JS）を別の層で受け持つ */
.kv2027__float,
.kv2027__para {
  position: absolute;
  inset: 0;
}
.kv2027__para {
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) rotate(var(--pr, 0deg));
  will-change: transform;
}
.kv2027__objects {
  transform-origin: 50% 60%;
}

/* 文字は1文字ずつ（SVG の <g class="kv-g">）。中心を基準に動かす */
.kv-g {
  transform-box: view-box;
}

@media (prefers-reduced-motion: no-preference) {
  .kv2027__float {
    animation: kv-float 7s ease-in-out infinite alternate;
  }
  .kv2027__badge {
    transform-origin: 50% 0;
    animation: kv-swing 3.4s ease-in-out infinite;
  }

  /* 登場：JS が動いたとき（.is-ready）だけ1文字ずつ。JS が動かなければ最初から表示される。
     終わったら .is-intro-done で通常状態へ */
  /* クリックしたときと同じ動き：タイトルの左上から波のように、跳ねながら現れる（遅れ --d は JS が距離から計算） */
  .kv2027.is-ready:not(.is-intro-done) .kv-g {
    animation: kv-hop-in 0.95s cubic-bezier(0.33, 1, 0.68, 1) both;
    animation-delay: var(--d, 0ms);
  }
  .kv2027.is-ready:not(.is-intro-done) .kv2027__objects {
    animation: kv-in-fade 1.3s ease-out both;
  }

  /* 跳ねる（ポインターが近づいた文字・タップ時の波） */
  .kv2027.is-intro-done .kv-g.is-hop {
    animation: kv-hop 0.62s cubic-bezier(0.3, 1.6, 0.5, 1) both;
    animation-delay: var(--d, 0ms);
  }
  /* ぽよん（タップ時のオブジェクト） */
  .kv2027.is-intro-done.is-boing .kv2027__objects {
    animation: kv-boing 0.8s cubic-bezier(0.3, 1.5, 0.5, 1);
  }

  /* 縦長の画面では画像の上端（いちばん上の丸）が画面の上端に接している。
     下へ動くと画像の切れ目が見えるので、上端をそろえたまま上向きにだけ動かす */
  @media (orientation: portrait) {
    .kv2027__float {
      animation-name: kv-float-tate;
    }
    .kv2027__objects {
      transform-origin: 50% 0; /* ぽよんは上端を支点に伸び縮み */
    }
  }
}

@keyframes kv-float {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%  { transform: translate3d(-0.4%, -1.2%, 0) rotate(-0.8deg); }
  100% { transform: translate3d(0.5%, 0.6%, 0) rotate(0.6deg); }
}
/* 縦長用：回転なし、上下は上向きだけ */
@keyframes kv-float-tate {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(-0.4%, -1.2%, 0); }
  100% { transform: translate3d(0.5%, -0.4%, 0); }
}
@keyframes kv-swing {
  0%, 100% { transform: rotate(-5deg); }
  50%      { transform: rotate(5deg); }
}
/* 登場用：回転・拡大なし。透明から現れながら、ほんの少しだけ持ち上がって着地する */
@keyframes kv-hop-in {
  0%   { opacity: 0; transform: translateY(4px); }
  45%  { opacity: 1; transform: translateY(-3px); }
  75%  { opacity: 1; transform: translateY(0.5px); }
  100% { opacity: 1; transform: none; }
}
/* 登場用：背景のオブジェクトは弾ませず、ふわっと現れるだけ */
@keyframes kv-in-fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes kv-hop {
  0%   { opacity: 1; transform: none; }
  35%  { opacity: 1; transform: translateY(-16px) rotate(var(--r, 8deg)) scale(1.12); }
  70%  { opacity: 1; transform: translateY(3px) scale(0.96, 1.04); }
  100% { opacity: 1; transform: none; }
}
@keyframes kv-boing {
  0%   { transform: scale(1, 1); }
  25%  { transform: scale(1.06, 0.92); }
  50%  { transform: scale(0.96, 1.05); }
  75%  { transform: scale(1.02, 0.98); }
  100% { transform: scale(1, 1); }
}