/* ============================================================
   トラトラ FXパック（アプリLPの豪華演出を共有部品化・tfx- prefix）
   対象: front / visa / mobile / seminar（functions.phpで条件enqueue）
   使い方: data-tfx-wm / data-tfx-pcl / data-tfx-tilt / data-tfx-circ を
   マークアップに付与。チッカーとジグザグ(.tfx-zz)・リビール(.tfx-rv)はclass。
   ============================================================ */

/* 読み進めプログレスバー（JSが挿入） */
.tfx-prog{position:fixed;top:0;left:0;height:5px;width:0;z-index:80;
  background:linear-gradient(90deg,#F97316,#FDBA74,#F97316);
  box-shadow:0 2px 0 rgba(69,54,43,.25);}

/* ホスト（JSが data-tfx-* 要素に付与） */
.tfx-host{position:relative;}
.tfx-host>.container{position:relative;z-index:2;}

/* 巨大アウトライン文字マーキー */
.tfx-wm{position:absolute;top:26px;left:0;right:0;overflow:hidden;pointer-events:none;z-index:0;}
.tfx-wm .in{display:flex;gap:60px;white-space:nowrap;width:max-content;
  animation:tfxTick 38s linear infinite;
  font-family:var(--font-display,'Quicksand'),sans-serif;font-weight:800;
  font-size:clamp(84px,12vw,160px);line-height:1;color:transparent;
  -webkit-text-stroke:2.5px rgba(69,54,43,.10);}

/* 絵文字パーティクル */
.tfx-pcl{position:absolute;bottom:-40px;font-size:1.4rem;opacity:0;pointer-events:none;z-index:1;
  animation:tfxRise linear infinite;}
@keyframes tfxRise{0%{transform:translateY(0) rotate(0);opacity:0;}
  12%{opacity:.5;}88%{opacity:.4;}
  100%{transform:translateY(-112vh) rotate(48deg);opacity:0;}}

/* 回転円形バッジ（JSがSVGを挿入） */
.tfx-circ{position:absolute;top:-18px;right:-14px;width:118px;height:118px;z-index:6;
  animation:tfxSpin 14s linear infinite;filter:drop-shadow(3px 3px 0 rgba(69,54,43,.3));pointer-events:none;}
.tfx-circ text{font-family:var(--font-display,'Quicksand'),sans-serif;font-weight:800;
  font-size:12.5px;letter-spacing:.16em;fill:var(--bd-ink,#45362B);}
.tfx-circ .core{fill:var(--amber-200,#FDE68A);stroke:var(--bd-ink,#45362B);stroke-width:3;}
@keyframes tfxSpin{to{transform:rotate(360deg);}}
@media(max-width:920px){.tfx-circ{width:92px;height:92px;top:-10px;right:-4px;}}

/* 3Dチルト（JSがtransform適用） */
[data-tfx-tilt]{will-change:transform;}
.tfx-tilting{transition:transform .18s ease-out;}

/* シャイン（background-position方式＝overflowを触らず既存のはみ出し要素を守る） */
.tfx-shine{position:relative;}
.tfx-shine::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.4) 50%,transparent 58%) no-repeat;
  background-size:280% 100%;background-position:130% 0;
  animation:tfxShine 6s ease-in-out 1.2s infinite;}
@keyframes tfxShine{0%,70%{background-position:130% 0;}90%,100%{background-position:-130% 0;}}

/* 2段逆走チッカー */
.tfx-tickwrap{transform:rotate(-1.3deg) scale(1.02);margin:26px 0 -6px;position:relative;z-index:1;}
.tfx-tick{border-top:3px solid var(--bd-ink,#45362B);border-bottom:3px solid var(--bd-ink,#45362B);
  background:var(--bd-ink,#45362B);color:#fff;overflow:hidden;padding:13px 0;}
.tfx-tick .in{display:flex;gap:38px;white-space:nowrap;width:max-content;
  animation:tfxTick 30s linear infinite;font-weight:800;font-size:.9rem;letter-spacing:.03em;}
.tfx-tick:hover .in{animation-play-state:paused;}
.tfx-tick.amber{background:var(--amber-200,#FDE68A);color:var(--bd-ink,#45362B);border-top:none;}
.tfx-tick.amber .in{animation-direction:reverse;animation-duration:36s;}
@keyframes tfxTick{to{transform:translateX(-50%);}}

/* ジグザグ区切り */
.tfx-zz{position:relative;}
.tfx-zz::before{content:"";position:absolute;top:-15px;left:0;right:0;height:15px;z-index:0;pointer-events:none;
  background:
   linear-gradient(135deg,var(--bd-ink,#45362B) 25%,transparent 25%) 0 0/22px 22px,
   linear-gradient(225deg,var(--bd-ink,#45362B) 25%,transparent 25%) 11px 0/22px 22px;}

/* 巨大セクション番号（h2付近に <span class="tfx-bignum">01</span>） */
.container:has(>.tfx-bignum){position:relative;}
.tfx-bignum{position:absolute;top:-46px;left:-10px;z-index:0;pointer-events:none;
  font-family:var(--font-display,'Quicksand'),sans-serif;font-weight:800;font-size:110px;line-height:1;
  color:transparent;-webkit-text-stroke:3px rgba(249,115,22,.5);transform:rotate(-6deg);}
@media(max-width:880px){.tfx-bignum{font-size:70px;top:-26px;left:-2px;}}

/* スクロールリビール */
.tfx-rv{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1);}
.tfx-rv.on{opacity:1;transform:none;}

/* 波紋リング（JSが .cta-final に注入・専用クリップボックス内） */
.tfx-ringbox{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;border-radius:inherit;}
.tfx-ring{position:absolute;right:70px;bottom:46px;width:80px;height:80px;border-radius:50%;
  border:3px solid rgba(253,230,138,.65);animation:tfxRipple 2.6s ease-out infinite;}
.tfx-ring.r2{animation-delay:.9s;}
.tfx-ring.r3{animation-delay:1.8s;}
@keyframes tfxRipple{0%{transform:scale(.55);opacity:.9;}100%{transform:scale(2.6);opacity:0;}}
.cta-final{position:relative;}
.cta-final>.container{position:relative;z-index:2;}

/* 省モーション */
@media(prefers-reduced-motion:reduce){
  .tfx-wm .in,.tfx-pcl,.tfx-circ,.tfx-shine::after,.tfx-tick .in,.tfx-ring{animation:none!important;}
  .tfx-rv{opacity:1;transform:none;transition:none;}
}