/* 無人古着屋POTE. — animations v5（WOW版） */

/* ===== 基本キーフレーム ===== */
@keyframes pote-marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes pote-blink{0%,100%{opacity:1;}50%{opacity:.55;}}
@keyframes pote-arrow-nudge{0%,100%{transform:rotate(90deg) translateX(0);}50%{transform:rotate(90deg) translateX(6px);}}

/* ===== オープニング演出（v9でシーン制に移行・個別ルールは末尾） ===== */
@keyframes pote-fade-up{to{opacity:1;transform:translateY(0);}}

/* ===== ロゴ：スタンプ着地 ===== */
[data-stamp]{opacity:0;transform:scale(1.6) rotate(-6deg);}
[data-stamp].on{animation:pote-stamp .55s cubic-bezier(.2,1.6,.4,1) forwards;}
@keyframes pote-stamp{
  0%{opacity:0;transform:scale(1.6) rotate(-6deg);}
  60%{opacity:1;transform:scale(.94) rotate(1.5deg);}
  100%{opacity:1;transform:scale(1) rotate(0deg);}
}

/* ===== 8.18 OPEN：1文字ずつ叩き込み ===== */
.hero-h1 .ch{opacity:0;transform:translateY(-1.1em) skewY(-6deg);}
.hero-h1 .ch.on{animation:pote-slam .5s cubic-bezier(.2,1.4,.35,1) forwards;}
@keyframes pote-slam{
  0%{opacity:0;transform:translateY(-1.1em) skewY(-6deg);}
  70%{opacity:1;transform:translateY(.06em) skewY(2deg);}
  100%{opacity:1;transform:translateY(0) skewY(0);}
}

/* 着地時の画面振動 */
.shake{animation:pote-shake .4s ease;}
@keyframes pote-shake{
  0%,100%{transform:translate(0,0);}
  20%{transform:translate(-4px,3px);}
  40%{transform:translate(4px,-3px);}
  60%{transform:translate(-3px,-2px);}
  80%{transform:translate(3px,2px);}
}

/* 粒子バースト */
.spray-p{animation:pote-burst .7s cubic-bezier(.15,.8,.3,1) forwards;}
@keyframes pote-burst{
  0%{opacity:1;transform:translate(0,0) scale(1);}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.4);}
}

/* ===== スプレーストローク：吹き付けワイプ ===== */
[data-wipe]{clip-path:inset(0 100% 0 0);}
[data-wipe].on{animation:pote-wipe .6s ease-out forwards;}
@keyframes pote-wipe{to{clip-path:inset(0 0 0 0);}}

/* ===== スクロール出現 ===== */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.34,1.3,.5,1),transform .7s cubic-bezier(.34,1.3,.5,1);}
[data-reveal].on{opacity:1;transform:translateY(0);}
[data-reveal="tilt"]{transform:translateY(26px) rotate(16deg) scale(.85);}
[data-reveal="tilt"].on{transform:rotate(10deg) scale(1);}
.final-new[data-reveal="tilt"]{transform:translateY(26px) rotate(-20deg) scale(.6);}
.final-new[data-reveal="tilt"].on{transform:rotate(0) scale(1);}
[data-delay="1"]{transition-delay:.12s;}
[data-delay="2"]{transition-delay:.24s;}

/* 見出し1文字ずつ（data-split） */
.sec-h2[data-split] .sch{opacity:0;transform:translateY(.55em) rotate(5deg);transition:opacity .5s cubic-bezier(.2,1.4,.4,1),transform .5s cubic-bezier(.2,1.4,.4,1);transition-delay:var(--d,0s);}
.sec-h2[data-split].split-on .sch{opacity:1;transform:translateY(0) rotate(0);}

/* カード：交互スライド＋テープ着地 */
.price-card[data-reveal]{transform:translateX(-36px) rotate(-1.2deg);}
.price-card[data-reveal][data-delay="1"]{transform:translateX(36px) rotate(1.2deg);}
.price-card[data-reveal][data-delay="2"]{transform:translateX(-36px) rotate(-1.2deg);}
.price-card[data-reveal].on{transform:translateX(0) rotate(0);}
.price-card .card-tape{transform:translateX(-50%) rotate(-30deg) translateY(-10px);opacity:0;transition:transform .45s cubic-bezier(.2,1.5,.4,1) .3s,opacity .3s .3s;}
.price-card.on .card-tape{transform:translateX(-50%) rotate(-4deg) translateY(0);opacity:1;}

/* ===== カウントダウン：フリップ ===== */
[data-cd="secs"]{animation:pote-blink 1s steps(1) infinite;}
.cd-num{transition:transform .16s ease-in;}
.cd-num.flip-out{transform:rotateX(-88deg);}
.cd-num.flip-in{transition:transform .2s cubic-bezier(.2,1.4,.4,1);transform:rotateX(0);}

/* ===== CTA：影の鼓動 ===== */
.btn-line{animation:pote-pulse 2.6s ease-in-out infinite;}
@keyframes pote-pulse{0%,100%{box-shadow:5px 5px 0 #111;}50%{box-shadow:7px 7px 0 #111;}}
.btn-line--dark{animation:pote-pulse-dark 2.6s ease-in-out infinite;}
@keyframes pote-pulse-dark{0%,100%{box-shadow:5px 5px 0 rgba(232,255,0,.35);}50%{box-shadow:8px 8px 0 rgba(232,255,0,.55);}}

/* NEWバッジ：ゆらゆら */
.final-new.on{animation:pote-wobble 3.4s ease-in-out 1s infinite;}
@keyframes pote-wobble{0%,100%{transform:rotate(-4deg);}50%{transform:rotate(4deg);}}

/* バーコード：スキャンライン */
.concept-barcode{position:relative;}
.concept-barcode::after{content:'';position:absolute;left:0;top:-4px;bottom:-4px;width:2px;background:rgba(232,255,0,.9);opacity:0;}
.concept-barcode.on::after{animation:pote-scan 2.6s ease-in-out 1s infinite;}
@keyframes pote-scan{0%{left:0;opacity:0;}10%{opacity:1;}45%{left:126px;opacity:1;}55%{opacity:0;}100%{left:0;opacity:0;}}

/* ===== reduced motion：激しい演出のみ停止（画面が死んで見えない程度に残す） ===== */
@media (prefers-reduced-motion: reduce){
  #intro{display:none !important;}
  .grain{display:none !important;}
  [data-reveal],[data-stamp],.hero-h1 .ch,.sec-h2[data-split] .sch,.price-card .card-tape{opacity:1 !important;transform:none !important;animation:none !important;transition:none !important;}
  [data-wipe]{clip-path:none !important;animation:none !important;}
  .marquee-track{animation-duration:60s !important;} /* 止めずにゆっくり */
  .step-arrow img,.final-new,.concept-barcode::after{animation:none !important;}
  .btn-line,.btn-line--dark{animation-duration:5s !important;} /* 鼓動もゆるく残す */
  .cd-num{transition:none !important;}
  .shake{animation:none !important;}
}

/* ===== v9: シネマティック演出 ===== */
/* オープニング各シーン：ピンボケ→焦点／文字間がゆっくり締まる */
.intro-scene{filter:blur(12px);transform:scale(1.04);transition:opacity .55s ease,filter .7s ease,transform 3.2s ease;}
.intro-scene.act{opacity:1;filter:blur(0);transform:scale(1);}
.intro-scene.out{opacity:0;filter:blur(9px);transition:opacity .4s ease,filter .4s ease;}
.intro-scene .is1-main{transition:letter-spacing 3.2s ease;}
.intro-scene.act .is1-main{letter-spacing:.34em;}
/* シーン3のロゴは既存のスタンプを流用 */
[data-scene="3"] .intro-logo{opacity:0;transform:scale(1.7) rotate(-7deg);}
[data-scene="3"].act .intro-logo{animation:pote-stamp .5s cubic-bezier(.2,1.6,.4,1) .1s forwards;}
[data-scene="3"] .intro-stroke{clip-path:inset(0 100% 0 0);}
[data-scene="3"].act .intro-stroke{animation:pote-wipe .45s ease-out .55s forwards;}
[data-scene="3"] .intro-line{opacity:0;transform:translateY(8px);}
[data-scene="3"].act .intro-line{animation:pote-fade-up .5s ease .85s forwards;}