/* ============================================================
   03-animations.css  ―  アニメーション定義
   ------------------------------------------------------------
   ・@keyframes            … 動きの定義
   ・.anim-*               … 常時ループするアニメーション
   ・[data-reveal]         … スクロールで .is-in が付くと再生
                             （JS: assets/js/scroll.js）
   ・--delay / --i         … 表示タイミングをずらす
   ============================================================ */

/* ------------------------------------------------------------
   1. keyframes
   ------------------------------------------------------------ */
@keyframes yd-float      { 0%,100% { transform: translateY(0)   rotate(var(--rot,0deg)); }
                           50%     { transform: translateY(-14px) rotate(calc(var(--rot,0deg) + 4deg)); } }
@keyframes yd-float-x    { 0%,100% { transform: translateX(0)   rotate(var(--rot,0deg)); }
                           50%     { transform: translateX(12px) rotate(calc(var(--rot,0deg) - 5deg)); } }
@keyframes yd-bob        { 0%,100% { transform: translateY(0)    rotate(-1.5deg); }
                           50%     { transform: translateY(-9px) rotate(1.5deg); } }
@keyframes yd-spin       { to { transform: rotate(360deg); } }
@keyframes yd-spin-rev   { to { transform: rotate(-360deg); } }
@keyframes yd-pulse      { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes yd-wiggle     { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes yd-tilt       { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }

@keyframes yd-rise       { from { opacity: 0; transform: translateY(46px); }
                           to   { opacity: 1; transform: translateY(0); } }
@keyframes yd-fade       { from { opacity: 0; } to { opacity: 1; } }
@keyframes yd-slide-l    { from { opacity: 0; transform: translateX(-64px) rotate(-4deg); }
                           to   { opacity: 1; transform: translateX(0) rotate(0); } }
@keyframes yd-slide-r    { from { opacity: 0; transform: translateX(64px) rotate(4deg); }
                           to   { opacity: 1; transform: translateX(0) rotate(0); } }
@keyframes yd-pop-in     { 0%   { opacity: 0; transform: scale(.45) rotate(-12deg); }
                           70%  { opacity: 1; transform: scale(1.12) rotate(4deg); }
                           100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes yd-drop-in    { 0%   { opacity: 0; transform: translateY(-80px) rotate(-8deg); }
                           60%  { opacity: 1; transform: translateY(9px) rotate(3deg); }
                           100% { opacity: 1; transform: translateY(0) rotate(0); } }
@keyframes yd-flip-in    { from { opacity: 0; transform: perspective(700px) rotateX(-72deg); }
                           to   { opacity: 1; transform: perspective(700px) rotateX(0); } }
@keyframes yd-blur-in    { from { opacity: 0; filter: blur(14px); transform: scale(1.05); }
                           to   { opacity: 1; filter: blur(0);   transform: scale(1); } }
@keyframes yd-char-pop   { 0%   { opacity: 0; transform: translateY(26px) scale(.6) rotate(-12deg); }
                           65%  { opacity: 1; transform: translateY(-6px) scale(1.14) rotate(5deg); }
                           100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); } }
@keyframes yd-zoom-out   { from { transform: scale(1.14); } to { transform: scale(1); } }

@keyframes yd-marquee     { from { transform: translateX(0); }     to { transform: translateX(-50%); } }
@keyframes yd-marquee-rev { from { transform: translateX(-50%); }  to { transform: translateX(0); } }

@keyframes yd-shine   { 0% { transform: translateX(-140%) skewX(-20deg); }
                        55%, 100% { transform: translateX(260%) skewX(-20deg); } }
@keyframes yd-sparkle { 0%,100% { transform: scale(.4) rotate(0);     opacity: .15; }
                        50%     { transform: scale(1.15) rotate(90deg); opacity: 1; } }
@keyframes yd-ripple  { from { transform: scale(.9); opacity: .5; }
                        to   { transform: scale(1.9); opacity: 0; } }
@keyframes yd-underline { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes yd-scroll-dot { 0% { transform: translateY(0); opacity: 0; }
                           25% { opacity: 1; }
                           100% { transform: translateY(22px); opacity: 0; } }

/* ネオン管の点灯ゆらぎ */
@keyframes yd-neon {
  0%, 100% { opacity: 1;   filter: drop-shadow(0 0 6px currentColor) drop-shadow(0 0 18px currentColor); }
  47%      { opacity: .82; filter: drop-shadow(0 0 3px currentColor) drop-shadow(0 0 10px currentColor); }
  49%      { opacity: .35; filter: none; }
  51%      { opacity: 1;   filter: drop-shadow(0 0 8px currentColor) drop-shadow(0 0 22px currentColor); }
}
@keyframes yd-neon-soft {
  0%, 100% { text-shadow: var(--glow-pink); }
  50%      { text-shadow: 0 0 8px rgba(255,77,157,.5), 0 0 20px rgba(255,77,157,.25); }
}
/* ブロマイドがゆらゆら揺れる（transform と干渉しないよう rotate プロパティで） */
@keyframes yd-sway {
  0%, 100% { rotate: var(--tilt, -3deg); }
  50%      { rotate: calc(var(--tilt, -3deg) + 2.5deg); }
}

/* ローディングバー：左端から右端へ流れる */
@keyframes yd-loader-bar {
  0%   { left: -40%; }
  100% { left: 100%; }
}
@keyframes yd-glow-btn {
  0%, 100% { box-shadow: var(--sh-pop), 0 0 0 rgba(6, 199, 85, 0); }
  50%      { box-shadow: var(--sh-pop), 0 0 28px rgba(6, 199, 85, .55); }
}

/* ------------------------------------------------------------
   2. 常時ループ（.anim-*）
   ------------------------------------------------------------ */
.anim-float    { animation: yd-float    var(--dur, 5s)   ease-in-out infinite; }
.anim-float-x  { animation: yd-float-x  var(--dur, 6s)   ease-in-out infinite; }
.anim-bob      { animation: yd-bob      var(--dur, 3.4s) ease-in-out infinite; }
.anim-spin     { animation: yd-spin     var(--dur, 18s)  linear infinite; }
.anim-spin-rev { animation: yd-spin-rev var(--dur, 24s)  linear infinite; }
.anim-pulse    { animation: yd-pulse    var(--dur, 2.4s) ease-in-out infinite; }
.anim-wiggle   { animation: yd-wiggle   var(--dur, 2.6s) ease-in-out infinite; }
.anim-tilt     { animation: yd-tilt     var(--dur, 5s)   ease-in-out infinite; }
.anim-sparkle  { animation: yd-sparkle  var(--dur, 2.6s) ease-in-out infinite; }
.anim-neon     { animation: yd-neon     var(--dur, 6s)   ease-in-out infinite; }
.anim-neon-txt { animation: yd-neon-soft var(--dur, 3.2s) ease-in-out infinite; }

.anim-delay-1 { animation-delay: .4s; }
.anim-delay-2 { animation-delay: .8s; }
.anim-delay-3 { animation-delay: 1.2s; }
.anim-delay-4 { animation-delay: 1.6s; }

/* ------------------------------------------------------------
   3. スクロール演出（[data-reveal] → .is-in）
   ------------------------------------------------------------ */
[data-reveal] {
  opacity: 0;
  will-change: transform, opacity;
}
[data-reveal].is-in {
  animation-duration: var(--rv-dur, .85s);
  animation-timing-function: var(--ease-smooth);
  animation-fill-mode: both;
  animation-delay: calc(var(--i, 0) * var(--stagger, .09s) + var(--delay, 0s));
}

[data-reveal="rise"].is-in    { animation-name: yd-rise; }
[data-reveal="fade"].is-in    { animation-name: yd-fade; }
[data-reveal="left"].is-in    { animation-name: yd-slide-l; }
[data-reveal="right"].is-in   { animation-name: yd-slide-r; }
[data-reveal="pop"].is-in     { animation-name: yd-pop-in;  animation-timing-function: var(--ease-pop); }
[data-reveal="drop"].is-in    { animation-name: yd-drop-in; animation-timing-function: var(--ease-pop); }
[data-reveal="flip"].is-in    { animation-name: yd-flip-in; }
[data-reveal="blur"].is-in    { animation-name: yd-blur-in; }
[data-reveal="zoom"].is-in    { animation-name: yd-zoom-out; opacity: 1; }

/* 1文字ずつポップ（JSが .split-char を生成） */
.split-char { display: inline-block; opacity: 0; }
.is-in .split-char {
  animation: yd-char-pop .7s var(--ease-pop) both;
  animation-delay: calc(var(--ci, 0) * .035s);
}

/* 下線がスーッと伸びる */
.u-underline {
  background-image: linear-gradient(transparent 62%, rgba(255, 77, 157, .45) 62%);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size .8s var(--ease-smooth) .2s;
}
.is-in .u-underline, .u-underline.is-in { background-size: 100% 100%; }

/* マーカー（黄色） */
.u-marker {
  background-image: linear-gradient(transparent 58%, rgba(245, 199, 97, .5) 58%);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size .8s var(--ease-smooth) .25s;
}
.is-in .u-marker, .u-marker.is-in { background-size: 100% 100%; }

/* ------------------------------------------------------------
   4. 動きを減らす設定
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; }
  .split-char   { opacity: 1 !important; }
}