/* =====================================================================
   最後の「まずは、「友だち」から。」の帯（template-parts/cta-line.php）。全ページ共通。
   スクロールに合わせて白から濃い色へ変わり、見出しがせり上がり、QRのカードが浮かぶ。
   動きは assets/js/cta.js（ライブラリなし）。ここに書いた見た目が完成形で、
   JSが無い・「視差効果を減らす」設定の人には濃い背景のまま動かさずに出す。
   ===================================================================== */
/* 帯は常に画面の端から端まで。開催予定一覧・コラム記事などでは幅の決まった箱（.wrap 等）の中に置かれるため、
   箱の中央から画面幅いっぱいに広げる。--sbw はスクロールバーの幅（cta.js が入れる。無ければ0） */
.cta-finale{width:calc(100vw - var(--sbw,0px));max-width:none;margin-left:calc(50% - (100vw - var(--sbw,0px)) / 2);margin-right:0;box-sizing:border-box}
.cta-finale:not(.is-anim){background:#141519!important}
.cta-finale .ghost-btn{background:var(--color-accent)!important;border-color:var(--color-accent)!important;box-shadow:0 14px 30px -12px rgba(218,46,31,.7)}
.cta-finale .ghost-btn:hover{background:#c22518!important}
.cta-finale .cta-grid{perspective:1000px}
.cta-finale .qr-card{position:relative;border-color:rgba(255,255,255,.85);box-shadow:0 30px 70px -20px rgba(0,0,0,.6),0 0 90px 10px rgba(218,46,31,.35);transition:transform .6s cubic-bezier(.22,.61,.36,1)}

/* 見出し：行ごとに下からせり上がる（cta.js が行を包む） */
.cta-finale .cta-ln{overflow:hidden;padding-bottom:.06em}
.cta-finale .cta-ln>span{display:block}
.cta-finale.is-anim .cta-ln>span{transform:translateY(110%)}
.cta-finale.is-anim.is-in .cta-ln>span{transform:none;transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.cta-finale.is-anim.is-in .cta-ln+.cta-ln>span{transition-delay:.12s}

/* QR：下から傾いた状態で浮かび上がり、その後ゆっくり揺れて赤く光る。
   入場は translate/rotate/scale、カーソルでの傾きは transform と分けて、互いに打ち消さないようにする */
.cta-finale.is-anim .qr-card{opacity:0;translate:0 160px;rotate:x 38deg;scale:.88}
.cta-finale.is-anim.is-in .qr-card{opacity:1;translate:0 0;rotate:none;scale:1;
  transition:opacity 1s ease .25s,translate 1.7s cubic-bezier(.16,1,.3,1) .25s,rotate 1.7s cubic-bezier(.16,1,.3,1) .25s,scale 1.7s cubic-bezier(.16,1,.3,1) .25s,transform .6s cubic-bezier(.22,.61,.36,1)}
.cta-finale .qr-card.is-up{animation:ctaFloat 5.2s ease-in-out infinite,ctaGlow 5.2s ease-in-out infinite}
@keyframes ctaFloat{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes ctaGlow{
  0%,100%{box-shadow:0 30px 70px -20px rgba(0,0,0,.6),0 0 90px 10px rgba(218,46,31,.35)}
  50%{box-shadow:0 30px 70px -20px rgba(0,0,0,.6),0 0 130px 24px rgba(218,46,31,.5)}
}

@media (prefers-reduced-motion:reduce){
  .cta-finale{background:#141519!important}
  .cta-finale .qr-card.is-up{animation:none}
}