/* トップの読み込み演出とスクロール演出(2026-10-17)
   - html.hy-anim は head の小さなスクリプトが付ける(動きを減らす設定・IntersectionObserver なしでは付かない)。
     JS が動かなければ何も隠れない。
   - html.hy-go は top-motion.js が MV の絵の読み込みを待ってから付ける。ここから読み込み演出が始まる。
   - white-orange.css が全要素の animation/transition を !important で止めているので、ここでは詳しめの指定 + !important で上書きする。
   - 動かすのは opacity と transform(translate / scale / rotate の個別指定)だけ。最後は元の見た目と同じ値で終わる。
   - fill は backwards: 終わったら元の CSS に戻る(MV の scale(1.1) や角度はそのまま)。 */

:root {
  --hy-spring: cubic-bezier(.3, 1.12, .4, 1);     /* 動きの基準(motion-2026-10-16)のタブの滑り */
  --hy-pop: cubic-bezier(.34, 1.5, .5, 1);        /* 少し大きめに行き過ぎて戻る */
  --hy-ease: cubic-bezier(.25, .7, .3, 1);        /* 基準のペイン */
  --hy-dash: cubic-bezier(.16, .84, .28, 1);      /* 左から走り込む */
}

/* ---------- 読み込み演出(MV) ---------- */
/* 始まるまで(絵の読み込み待ち。最長 1.2 秒)は出番の物を伏せておく。CTA ボタンは最初から見えていて押せる */
html.hy-anim:not(.hy-go) .layered-scene .scene-room,
html.hy-anim:not(.hy-go) .layered-scene .scene-person,
html.hy-anim:not(.hy-go) .layered-scene .scene-note,
html.hy-anim:not(.hy-go) .renewed-copy > .hero-intro-label,
html.hy-anim:not(.hy-go) .renewed-copy > .hero-tagline,
html.hy-anim:not(.hy-go) .renewed-copy h1 > span,
html.hy-anim:not(.hy-go) .renewed-copy > .renewed-lead,
html.hy-anim:not(.hy-go) .renewed-copy > .hero-free { opacity: 0; }

/* 2026-10-17 ユーザー「もうちょっとゆったりめ。リズミカルにゆったりめ」: 全体を約 1.5 秒 → 約 3 秒に。
   コピー 3 行から先は 0.28 秒の拍(1.1 / 1.38 / 1.66 / 1.94 / 2.22 / 2.5 秒)にそろえる */
/* ドア+部屋: 先にふわっと(0〜0.9 秒) */
html.hy-anim.hy-go .layered-scene .scene-room { animation: hy-room .9s var(--hy-ease) 0s backwards !important; }
@keyframes hy-room { from { opacity: 0; translate: 0 14px; scale: .985; } to { opacity: 1; translate: 0 0; scale: 1; } }

/* 女の子: 下から少し小さく → 柔らかいばねで少し行き過ぎて 1.0 に(0.3〜1.3 秒)→ 一度だけ「こっちにおいで」とゆったり傾く(1.4〜2.4 秒)。
   transform-origin は既存の center bottom(足元中央)のまま */
html.hy-anim.hy-go .layered-scene .scene-person {
  animation: hy-person-pop 1s linear .3s backwards, hy-person-beckon 1s ease-in-out 1.4s backwards !important;
}
@keyframes hy-person-pop {
  0%   { opacity: 0; translate: 0 7%; scale: .86; animation-timing-function: cubic-bezier(.25, .6, .4, 1); }
  22%  { opacity: 1; }
  52%  { translate: 0 -.9%; scale: 1.032; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  80%  { translate: 0 .15%; scale: .994; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes hy-person-beckon {
  0%   { rotate: 0deg; }
  40%  { rotate: 2deg; }
  72%  { rotate: -.6deg; }
  100% { rotate: 0deg; }
}

/* ♪ と ✦: コピーのあと、4 拍目・5 拍目にぽん */
html.hy-anim.hy-go .layered-scene .scene-note { animation: hy-note .5s var(--hy-pop) 1.94s backwards !important; }
html.hy-anim.hy-go .layered-scene .note-two { animation-delay: 2.22s !important; }
@keyframes hy-note { from { opacity: 0; scale: .2; rotate: -25deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }

/* 副題の白い角丸帯と「出かけて、つくる。」: 女の子が出るあいだに左から(既存の傾きは transform のまま) */
html.hy-anim.hy-go .renewed-copy > .hero-intro-label { animation: hy-from-left .6s var(--hy-dash) .6s backwards !important; }
html.hy-anim.hy-go .renewed-copy > .hero-tagline { animation: hy-from-left .55s var(--hy-dash) .82s backwards !important; }
@keyframes hy-from-left { from { opacity: 0; translate: -28px 0; } to { opacity: 1; translate: 0 0; } }

/* キャッチコピー: 女の子のあと、1 行ずつ左から「タン、タン、タン」と走り込む(1.1 / 1.38 / 1.66 秒から 0.65 秒) */
html.hy-anim.hy-go .renewed-copy h1 > span { animation: hy-dash-in .65s linear 1.1s backwards !important; }
html.hy-anim.hy-go .renewed-copy h1 > span:nth-child(2) { animation-delay: 1.38s !important; }
html.hy-anim.hy-go .renewed-copy h1 > span:nth-child(3) { animation-delay: 1.66s !important; }
@keyframes hy-dash-in {
  0%   { opacity: 0; translate: -1.4em 0; animation-timing-function: cubic-bezier(.16, .84, .3, 1); }
  35%  { opacity: 1; }
  72%  { translate: .06em 0; animation-timing-function: ease-in-out; }
  100% { opacity: 1; translate: 0 0; }
}
/* 走り込んだあと、光が左から右へ一度だけゆっくり抜ける(1.95〜2.85 秒)。帯は JS が h1 に差し込む飾り(aria-hidden) */
.hy-shine { display: none; }
html.hy-anim.hy-go .renewed-copy h1 > .hy-shine {
  display: block; position: absolute; inset: -.1em -.2em; overflow: hidden; pointer-events: none; z-index: 1;
}
html.hy-anim.hy-go .renewed-copy h1 > .hy-shine::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 34%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .85) 45%, rgba(255, 240, 225, .95) 52%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-110%) skewX(-18deg); opacity: 0;
  animation: hy-shine .9s cubic-bezier(.45, .1, .35, 1) 1.95s both !important;
}
@keyframes hy-shine { 0% { transform: translateX(-110%) skewX(-18deg); opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(310%) skewX(-18deg); opacity: 0; } }

/* コピーの角の飾り(h1 の前後の括弧)はコピーと一緒にそっと */
html.hy-anim:not(.hy-go) .layered-hero .renewed-copy h1::before,
html.hy-anim:not(.hy-go) .layered-hero .renewed-copy h1::after { opacity: 0; }
html.hy-anim.hy-go .layered-hero .renewed-copy h1::before,
html.hy-anim.hy-go .layered-hero .renewed-copy h1::after { animation: hy-fade .6s linear 1.1s backwards !important; }

/* リード文と「今なら完全無料!」の札: 最後にそっと / ぽんと */
html.hy-anim.hy-go .renewed-copy > .renewed-lead { animation: hy-up .6s var(--hy-ease) 1.94s backwards !important; }
html.hy-anim.hy-go .renewed-copy > .hero-free { animation: hy-fade .4s linear 2.22s backwards !important; }
html.hy-anim.hy-go .renewed-copy > .hero-free > .hero-free-tag { animation: hy-tag .5s var(--hy-pop) 2.22s backwards !important; }
html.hy-anim.hy-go .renewed-copy > .hero-free > .hero-free-tag + .hero-free-tag { animation-delay: 2.5s !important; }
@keyframes hy-up { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@keyframes hy-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hy-tag { from { opacity: 0; scale: .82; } to { opacity: 1; scale: 1; } }

/* ---------- スクロール演出(一度だけ) ---------- */
/* top-motion.js が対象に .hy-rv と種類(.hy-up / .hy-pop / .hy-side / .hy-twinkle)を付け、見えたら .hy-in を付ける。
   遅れは --hy-d(同時に見えた物を少しずつずらす) */
html.hy-anim .hy-rv:not(.hy-in) { opacity: 0; }
html.hy-anim .hy-rv.hy-in.hy-up { animation: hy-rv-up .6s var(--hy-ease) var(--hy-d, 0ms) backwards !important; }
html.hy-anim .hy-rv.hy-in.hy-pop { animation: hy-rv-pop .7s var(--hy-spring) var(--hy-d, 0ms) backwards !important; }
html.hy-anim .hy-rv.hy-in.hy-side { animation: hy-rv-side .6s var(--hy-dash) var(--hy-d, 0ms) backwards !important; }
html.hy-anim .hy-rv.hy-in.hy-side-r { animation: hy-rv-side-r .6s var(--hy-dash) var(--hy-d, 0ms) backwards !important; }
html.hy-anim .hy-rv.hy-in.hy-twinkle { animation: hy-rv-twinkle .5s var(--hy-pop) var(--hy-d, 0ms) backwards !important; }
@keyframes hy-rv-up { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
@keyframes hy-rv-pop { from { opacity: 0; translate: 0 26px; scale: .95; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes hy-rv-side { from { opacity: 0; translate: -36px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes hy-rv-side-r { from { opacity: 0; translate: 36px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes hy-rv-twinkle { from { opacity: 0; scale: 0; } to { opacity: 1; scale: 1; } }

@media (prefers-reduced-motion: reduce) {
  html.hy-anim .hy-rv:not(.hy-in), html.hy-anim:not(.hy-go) .layered-scene * , html.hy-anim:not(.hy-go) .renewed-copy * { opacity: 1 !important; }
  html.hy-anim *, html.hy-anim *::before { animation: none !important; }
  .hy-shine { display: none !important; }
}
@media print {
  html.hy-anim .hy-rv:not(.hy-in) { opacity: 1; }
}

/* 2026-10-17 「まずは、街へ出かける」: 節が出たあと、左から右へ一度だけ光が抜ける(弾ませない) */
html.hy-anim #shopping .v6-cta.hy-in .cta-go::after { animation: hy-go-shine 1.1s cubic-bezier(.4, 0, .2, 1) calc(var(--hy-d, 0ms) + .7s) forwards !important; }
@keyframes hy-go-shine { from { translate: -130% 0; } to { translate: 360% 0; } }
@media (prefers-reduced-motion: reduce) { html.hy-anim #shopping .cta-go::after { animation: none !important; } }