/* =========================================
   Scroll Reveal Animations
   - reveal: .js-reveal (+ u-reveal-*)
   - trigger only: .js-inview (JSで is-inview だけ付与)
   - text: .js-textReveal (JSで .js-char を生成)
========================================= */

:root{
  --reveal-dur: 1100ms;
  --reveal-ease: cubic-bezier(.15,.85,.2,1);
  --reveal-dist-y: 18px;
  --reveal-dist-x: 26px;

  --char-dur: 900ms;
  --char-ease: cubic-bezier(.15,.85,.2,1);
  --tr-gap: 38; /* 1文字ずつの間隔(ms) */
}

@media (prefers-reduced-motion: reduce){
  :root{
    --reveal-dur: 1ms;
    --char-dur: 1ms;
    --tr-gap: 0;

    /* instructors（遅延も含めて即時に） */
    --inst-step: 1ms;
    --inst-rib-dur: 1ms;
    --inst-rib-stagger: 0ms;
    --inst-media-lead: 0ms;
    --inst-rib-y: 0px;
  }
}

/* -------------------------
   Block reveal (.js-reveal)
------------------------- */
/* JSが動いてる時だけ初期非表示を適用 */
.has-reveal .js-reveal{
  opacity: 0;
  transform: translate3d(var(--reveal-x, 0), var(--reveal-y, var(--reveal-dist-y)), 0);
  transition:
    opacity var(--reveal-dur) var(--reveal-ease),
    transform var(--reveal-dur) var(--reveal-ease);
  will-change: opacity, transform;
}

.has-reveal .js-reveal.is-inview{
  opacity: 1;
  transform: translate3d(0,0,0);
}

/* direction utilities */
.u-reveal-up{   --reveal-x: 0;                              --reveal-y: var(--reveal-dist-y); }
.u-reveal-ltr{  --reveal-x: calc(var(--reveal-dist-x) * -1); --reveal-y: 0; }
.u-reveal-rtl{  --reveal-x: var(--reveal-dist-x);           --reveal-y: 0; }
.u-reveal-fade{ --reveal-x: 0;                              --reveal-y: 0; }

/* delay utilities */
.u-reveal-delay-1{ transition-delay: 120ms; }
.u-reveal-delay-2{ transition-delay: 240ms; }
.u-reveal-delay-3{ transition-delay: 360ms; }
.u-reveal-delay-4{ transition-delay: 480ms; }

/* -------------------------
   Text reveal (.js-textReveal)
------------------------- */
.has-reveal .js-textReveal .js-char{
  display: inline-block;
  opacity: 0;
  transform: translate3d(-0.45em, 0, 0);
  transition:
    opacity var(--char-dur) var(--char-ease),
    transform var(--char-dur) var(--char-ease);
  will-change: opacity, transform;
}

.has-reveal .js-textReveal.is-inview .js-char{
  opacity: 1;
  transform: translate3d(0,0,0);
}

/* =========================================================
   Instructors card: staged animation (trigger = .p-instructorsCard__photo.js-inview)
   要件（今回の修正）：
   - ribbons：各1.0s
   - 次のリボンを「表示しきる前」に開始（stagger < duration）
   - 下→上の距離を長めに
========================================================= */

:root{
  --inst-step: 1000ms;
  --inst-ease: cubic-bezier(.15,.85,.2,1);
  --inst-x: 26px;
  --inst-y: 18px;

  /* ★ ribbons専用（今回追加/変更） */
  --inst-rib-dur: 2500ms;      /* 1本あたりの表示時間 */
  --inst-rib-stagger: 500ms;   /* 次の開始まで（=重なり） */
  --inst-media-lead: 700ms;    /* media完了後にリボン開始（現状維持） */
  --inst-rib-y: 28px;          /* 下→上距離（長め） */
}

/* 1) media */
.has-reveal .p-instructorsCard--wordRight .p-instructorsCard__photo.js-inview .p-instructorsCard__media{
  opacity: 0;
  transform: translate3d(calc(var(--inst-x) * -1), 0, 0);
  transition:
    opacity var(--inst-step) var(--inst-ease),
    transform var(--inst-step) var(--inst-ease);
  will-change: opacity, transform;
}
.has-reveal .p-instructorsCard--wordRight .p-instructorsCard__photo.js-inview.is-inview .p-instructorsCard__media{
  opacity: 1;
  transform: translate3d(0,0,0);
}

/* wordLeft は右→左 */
.has-reveal .p-instructorsCard--wordLeft .p-instructorsCard__photo.js-inview .p-instructorsCard__media{
  opacity: 0;
  transform: translate3d(var(--inst-x), 0, 0);
  transition:
    opacity var(--inst-step) var(--inst-ease),
    transform var(--inst-step) var(--inst-ease);
  will-change: opacity, transform;
}
.has-reveal .p-instructorsCard--wordLeft .p-instructorsCard__photo.js-inview.is-inview .p-instructorsCard__media{
  opacity: 1;
  transform: translate3d(0,0,0);
}

/* 2) ribbons（下→上） ※最後の要素(右端)から出す */
.has-reveal .p-instructorsCard__photo.js-inview .p-instructorsCard__ribbon{
  opacity: 0;
  transform: translate3d(0, var(--inst-rib-y), 0);
  transition:
    opacity var(--inst-rib-dur) var(--inst-ease),
    transform var(--inst-rib-dur) var(--inst-ease);
  will-change: opacity, transform;
  backface-visibility: hidden;
}

/* 発火（inview） */
.has-reveal .p-instructorsCard__photo.js-inview.is-inview .p-instructorsCard__ribbon{
  opacity: 1;
  transform: translate3d(0,0,0);
}

/* 遅延：media完了後に開始、かつ「重ねて」進行（DOM最後→最初） */
.has-reveal .p-instructorsCard__photo.js-inview .p-instructorsCard__ribbon:nth-child(3){
  transition-delay: var(--inst-media-lead);
}
.has-reveal .p-instructorsCard__photo.js-inview .p-instructorsCard__ribbon:nth-child(2){
  transition-delay: calc(var(--inst-media-lead) + var(--inst-rib-stagger));
}
.has-reveal .p-instructorsCard__photo.js-inview .p-instructorsCard__ribbon:nth-child(1){
  transition-delay: calc(var(--inst-media-lead) + (var(--inst-rib-stagger) * 2));
}

/* 3) word (::after) 下→上（ribbons開始と同時 = media後） */
.has-reveal .p-instructorsCard__photo.js-inview::after{
  opacity: 0;
  transform: translate3d(0, var(--inst-y), 0);
  transition:
    opacity var(--inst-step) var(--inst-ease),
    transform var(--inst-step) var(--inst-ease);
  transition-delay: var(--inst-media-lead);
  will-change: opacity, transform;
}

/* 既存の最終opacity(.16)を維持して出す */
.has-reveal .p-instructorsCard__photo.js-inview.is-inview::after{
  opacity: .16;
  transform: translate3d(0,0,0);
	letter-spacing: -0.01em;
}