/* ============================================================
   top-fx.css — トップページ専用のモーション／操作感レイヤー
   ・レイアウトと配色は一切変えない（transform / opacity / clip-path のみ）
   ・html.fx が付いたとき（JS有効時）だけ動く
   ・prefers-reduced-motion では全て無効
   ・スマホは合成レイヤーだけで動く軽い演出に限定（タップの反応を落とさない）
   ============================================================ */

/* ---- 読み進みバー（ヘッダー最上部の金の細線） ---- */
.fx-bar{ position:fixed; inset:0 0 auto 0; height:2px; z-index:101; pointer-events:none;
  background:linear-gradient(90deg,var(--gold,#c8a25a),var(--gold-lt,#e3cd9b));
  transform:scaleX(var(--fx-p,0)); transform-origin:0 50%; }
@supports (animation-timeline: scroll()){
  .fx-bar{ animation:fxBar linear both; animation-timeline:scroll(root block); }
  @keyframes fxBar{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
}

@media (prefers-reduced-motion:no-preference){

  /* ============ 1. ファーストビューの入り ============ */
  @media (max-width:900px){ html.fx .hero__bg img{ animation:fxSettle 1.9s cubic-bezier(.2,.7,.2,1) backwards !important; } }
  @keyframes fxSettle{ from{ transform:scale(1.07); } to{ transform:scale(1); } }

  html.fx .glass{ animation:fxGlass .8s cubic-bezier(.2,.75,.25,1) .05s backwards; }
  @keyframes fxGlass{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }

  html.fx .hero__eiken,
  html.fx .hero__eyebrow,
  html.fx .hero__intro,
  html.fx .hero__cta > *{ animation:fxUp .6s cubic-bezier(.2,.75,.25,1) backwards; }
  html.fx .hero__eiken{ animation-delay:.28s; }
  html.fx .hero__eyebrow{ animation-delay:.36s; }
  html.fx .hero__intro{ animation-delay:.62s; }
  html.fx .hero__cta > :nth-child(1){ animation-delay:.72s; }
  html.fx .hero__cta > :nth-child(2){ animation-delay:.80s; }

  html.fx .hero__strip li{ animation:fxUp .55s cubic-bezier(.2,.75,.25,1) backwards; }
  html.fx .hero__strip li:nth-child(1){ animation-delay:.55s; }
  html.fx .hero__strip li:nth-child(2){ animation-delay:.63s; }
  html.fx .hero__strip li:nth-child(3){ animation-delay:.71s; }
  html.fx .hero__strip li:nth-child(4){ animation-delay:.79s; }

  html.fx .ribbon--top a{ animation:fxFade .6s ease .1s backwards; }

  @keyframes fxUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
  @keyframes fxFade{ from{ opacity:0; } to{ opacity:1; } }

  /* スクロールに合わせて写真がゆっくり奥へ（対応ブラウザのみ・PCのみ） */
  @supports (animation-timeline: view()){
    @media (hover:hover) and (pointer:fine){
      html.fx .hero__bg{ animation:fxPara linear both; animation-timeline:view(); animation-range:exit 0% exit 100%; }
      @keyframes fxPara{ to{ transform:translateY(9%) scale(1.04); } }
    }
  }

  /* ============ 2. 見出しの現れ方 ============ */
  html.fx .head.rise{ transform:none; }                       /* 親は不透明度だけ */
  html.fx .head .head__en{ display:flex; align-items:center; gap:12px; }
  html.fx .head .head__en::after{ content:""; width:40px; height:1px; background:currentColor; opacity:.7;
    transform:scaleX(0); transform-origin:0 50%; transition:transform .7s cubic-bezier(.2,.75,.25,1) .25s; }
  html.fx .head.fx-go .head__en::after{ transform:scaleX(1); }
  html.fx .lesson .head .head__en{ justify-content:center; }
  html.fx .lesson .head .head__en::before{ content:""; width:40px; height:1px; background:currentColor; opacity:.7;
    transform:scaleX(0); transform-origin:100% 50%; transition:transform .7s cubic-bezier(.2,.75,.25,1) .25s; }
  html.fx .lesson .head.fx-go .head__en::before{ transform:scaleX(1); }

  html.fx .head .head__ja{ clip-path:inset(0 0 100% 0); transform:translateY(.5em);
    transition:clip-path .8s cubic-bezier(.2,.75,.25,1) .08s, transform .8s cubic-bezier(.2,.75,.25,1) .08s; }
  html.fx .head.fx-go .head__ja{ clip-path:inset(-.2em -1em -.3em -1em); transform:none; }
  html.fx .head .head__note{ opacity:0; transform:translateY(10px);
    transition:opacity .6s ease .32s, transform .6s ease .32s; }
  html.fx .head.fx-go .head__note{ opacity:1; transform:none; }

  /* ============ 3. カード類は1枚ずつ順番に ============ */
  html.fx :is(.reasons,.grades,.tiles,.schools,.split).rise{ transform:none; }
  html.fx :is(.reasons,.grades,.tiles,.schools,.split).rise > *,
  html.fx .ek-road.rise .ek-road__l > li{ opacity:0; }
  html.fx :is(.reasons,.grades,.tiles,.schools,.split).rise > .fx-go,
  html.fx .ek-road.rise.fx-go .ek-road__l > li{ opacity:1;
    animation:fxCard .62s cubic-bezier(.2,.75,.25,1) backwards; animation-delay:calc(var(--d,0) * 85ms + 60ms); }
  @keyframes fxCard{ from{ opacity:0; transform:translateY(22px) scale(.985); } to{ opacity:1; transform:none; } }
  html.fx :is(.reasons,.grades,.tiles,.schools,.split,.ek-road__l) > :nth-child(1){ --i:0; }
  html.fx :is(.reasons,.grades,.tiles,.schools,.split,.ek-road__l) > :nth-child(2){ --i:1; }
  html.fx :is(.reasons,.grades,.tiles,.schools,.split,.ek-road__l) > :nth-child(3){ --i:2; }
  html.fx :is(.reasons,.grades,.tiles,.schools,.split,.ek-road__l) > :nth-child(4){ --i:3; }
  html.fx :is(.reasons,.grades,.tiles,.schools,.split,.ek-road__l) > :nth-child(5){ --i:4; }
  html.fx :is(.reasons,.grades,.tiles,.schools,.split,.ek-road__l) > :nth-child(6){ --i:5; }
  html.fx :is(.tiles) > :nth-child(n+7){ --i:6; }

  /* REASON 01 の罫線が伸びる */
  html.fx .reasons .reason__n::after{ transform:scaleX(0); transform-origin:0 50%;
    transition:transform .9s cubic-bezier(.2,.75,.25,1); transition-delay:calc(var(--d,0) * 110ms + .35s); }
  html.fx .reasons > .fx-go .reason__n::after{ transform:scaleX(1); }

  /* 教室カードの金の縦線が伸びる */
  html.fx .schools .school__t::before{ transform:scaleY(0); transform-origin:50% 100%;
    transition:transform .6s cubic-bezier(.2,.75,.25,1); transition-delay:calc(var(--d,0) * 110ms + .4s); }
  html.fx .schools > .fx-go .school__t::before{ transform:scaleY(1); }

  /* 料金表は金の行がふわっと灯る */
  html.fx .ptab.rise tr.ptab__hl.fx-go td{ animation:fxRow .55s cubic-bezier(.2,.75,.25,1) backwards, fxGlow 1.6s ease .6s backwards; animation-delay:calc(var(--d,0) * 110ms + 60ms), .6s; }
  @keyframes fxGlow{ 0%{ box-shadow:inset 0 0 0 100px rgba(200,162,90,0); } 35%{ box-shadow:inset 0 0 0 100px rgba(200,162,90,.22); } 100%{ box-shadow:inset 0 0 0 100px rgba(200,162,90,0); } }

  /* ============ 4. 締めのセクション ============ */
  html.fx .close{ position:relative; isolation:isolate; overflow:hidden; }
  html.fx .close::before{ content:""; position:absolute; z-index:-1; left:50%; top:50%; width:min(900px,140vw); aspect-ratio:1;
    transform:translate(-50%,-50%) scale(.6); opacity:0; pointer-events:none;
    background:radial-gradient(closest-side, rgba(200,162,90,.20), rgba(200,162,90,.06) 55%, rgba(200,162,90,0));
    transition:opacity 1.2s ease, transform 1.6s cubic-bezier(.2,.75,.25,1); }
  html.fx .close.fx-in::before{ opacity:1; transform:translate(-50%,-50%) scale(1); }
  html.fx .close :is(.close__en,h2,p,.close__cta){ opacity:0; transform:translateY(16px);
    transition:opacity .7s ease, transform .7s cubic-bezier(.2,.75,.25,1); }
  html.fx .close.fx-in :is(.close__en,h2,p,.close__cta){ opacity:1; transform:none; }
  html.fx .close.fx-in h2{ transition-delay:.08s; }
  html.fx .close.fx-in p{ transition-delay:.18s; }
  html.fx .close.fx-in .close__cta{ transition-delay:.28s; }
  html.fx .close.fx-in .close__tel{ transition-delay:.38s; }

  /* ============ 5. 申込ボタンの光沢 ============ */
  html.fx .btn--gold, html.fx .dock__cta{ position:relative; overflow:hidden; }
  html.fx .btn--gold::after, html.fx .dock__cta::after{ content:""; position:absolute; inset:-2px auto -2px 0; width:46%;
    background:linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0));
    transform:translateX(-130%) skewX(-18deg); pointer-events:none; }
  html.fx .btn--gold.fx-sheen::after, html.fx .dock__cta.fx-sheen::after{ animation:fxSheen .95s cubic-bezier(.3,.6,.3,1); }
  @keyframes fxSheen{ to{ transform:translateX(330%) skewX(-18deg); } }

  /* ============ 6. PC（マウス）だけのホバー演出 ============ */
  @media (hover:hover) and (pointer:fine){
    html.fx .btn--gold:hover::after{ animation:fxSheen .8s cubic-bezier(.3,.6,.3,1); }

    html.fx :is(.grade,.tile,.school){ position:relative;
      transition:transform .28s cubic-bezier(.2,.75,.25,1), box-shadow .28s ease, border-color .2s ease !important; }
    html.fx :is(.grade,.tile,.school)::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
      background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(200,162,90,.16), rgba(200,162,90,0) 70%);
      opacity:0; transition:opacity .25s ease; }
    html.fx :is(.grade,.tile,.school):hover::after{ opacity:1; }
    html.fx :is(.grade,.tile):hover{ transform:translateY(-4px) !important; border-color:var(--gold,#c8a25a);
      box-shadow:0 18px 36px -22px rgba(10,42,94,.42) !important; }
    html.fx .school:hover{ border-color:var(--gold,#c8a25a); box-shadow:0 18px 36px -24px rgba(10,42,94,.35); }
    html.fx :is(.grade,.tile) img{ transition:transform .45s cubic-bezier(.2,.75,.25,1); }
    html.fx :is(.grade,.tile):hover img{ transform:scale(1.06) translateY(-2px); }
    html.fx :is(.grade,.tile) .tlink, html.fx .tile .tile__t{ transition:transform .28s cubic-bezier(.2,.75,.25,1); }
    html.fx .grade:hover .tlink{ transform:translateX(4px); }
    html.fx .tile:hover .tile__t{ transform:translateX(3px); }

    /* ナビの下線は左から伸びる */
    html.fx .hdr__nav a{ position:relative; border-bottom-color:transparent !important; }
    html.fx .hdr__nav a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--gold,#c8a25a);
      transform:scaleX(0); transform-origin:0 50%; transition:transform .28s cubic-bezier(.2,.75,.25,1); }
    html.fx .hdr__nav a:hover::after, html.fx .hdr__nav a[aria-current="page"]::after{ transform:scaleX(1); }

    html.fx .ribbon a span{ transition:transform .28s cubic-bezier(.2,.75,.25,1); display:inline-block; }
    html.fx .ribbon a:hover span{ transform:translateX(4px); text-decoration:none; }
  }

  /* 数字が回るあいだ幅が動かないように */
  html.fx .fx-num{ font-variant-numeric:tabular-nums; display:inline-block; }
}

@media print{ .fx-bar{ display:none !important; } }

/* ============================================================
   v2 — セクションごとのスクロール演出を強化
   ============================================================ */
@media (prefers-reduced-motion:no-preference){

  /* ---- カードの出方をセクションごとに変える（距離・向き・弾み） ---- */
  @keyframes fxCard{ from{ opacity:0; transform:translate(var(--fx-x,0),var(--fx-y,44px)) scale(var(--fx-s,.94)) rotate(var(--fx-r,0deg)); } to{ opacity:1; transform:none; } }
  html.fx :is(.reasons,.grades,.tiles,.schools,.split).rise > .fx-go{ animation-duration:.8s; animation-delay:calc(var(--d,0) * 110ms + 40ms); }

  /* 選ばれる理由：下から大きめに */
  html.fx .reasons > *{ --fx-y:56px; --fx-s:1; }
  /* 学年：扇のように開く */
  html.fx .grades > :nth-child(1){ --fx-x:40px;  --fx-r:-3deg; }
  html.fx .grades > :nth-child(2){ --fx-y:64px; }
  html.fx .grades > :nth-child(3){ --fx-x:-40px; --fx-r:3deg; }
  /* 80分の流れ：左右から寄ってくる */
  html.fx .split > :nth-child(1){ --fx-x:-72px; --fx-y:0px; --fx-s:1; }
  html.fx .split > :nth-child(2){ --fx-x:72px;  --fx-y:0px; --fx-s:1; }
  html.fx .split > .fx-go li{ animation:fxUp .5s cubic-bezier(.2,.75,.25,1) backwards; }
  html.fx .split > .fx-go li:nth-child(1){ animation-delay:calc(var(--d,0) * 110ms + .45s); }
  html.fx .split > .fx-go li:nth-child(2){ animation-delay:calc(var(--d,0) * 110ms + .57s); }
  html.fx .split > .fx-go li:nth-child(3){ animation-delay:calc(var(--d,0) * 110ms + .69s); }
  /* 教室：左右から */
  html.fx .schools > :nth-child(1){ --fx-x:-56px; --fx-y:0px; --fx-s:1; }
  html.fx .schools > :nth-child(2){ --fx-x:56px;  --fx-y:0px; --fx-s:1; }
  /* 学習ツール：波のように */
  html.fx .tiles > *{ --fx-y:36px; --fx-s:.9; }
  html.fx .tiles.rise > .fx-go{ animation-delay:calc(var(--d,0) * 80ms + 40ms); animation-timing-function:cubic-bezier(.34,1.4,.64,1); }
  html.fx .tiles > :nth-child(7){ --i:6; } html.fx .tiles > :nth-child(8){ --i:7; } html.fx .tiles > :nth-child(9){ --i:8; }
  html.fx .tiles > :nth-child(n+10){ --i:9; }

  /* 英検の歩み：1段ずつ弾んで登る＋最後の級が光る */
  html.fx .ek-road.rise.fx-go .ek-road__l > li{ --fx-y:26px; --fx-s:.6;
    animation:fxCard .6s cubic-bezier(.34,1.56,.64,1) backwards; animation-delay:calc(var(--i,0) * 130ms + .1s); }
  html.fx .ek-road.rise.fx-go .ek-road__l > li:last-child{ animation:fxCard .6s cubic-bezier(.34,1.56,.64,1) backwards, fxRing 1.3s ease-out .95s 3 both;
    animation-delay:calc(var(--i,0) * 130ms + .1s), .95s; }
  @keyframes fxRing{ 0%{ box-shadow:0 0 0 0 rgba(200,162,90,.75); } 100%{ box-shadow:0 0 0 18px rgba(200,162,90,0); } }

  /* 料金表：行が上から順に入る */
  html.fx .ptab.rise tbody tr:not(.fx-go) > *{ opacity:0; }
  html.fx .ptab.rise tbody tr.fx-go > *{ animation:fxRow .55s cubic-bezier(.2,.75,.25,1) backwards; animation-delay:calc(var(--d,0) * 110ms + 60ms); }
  html.fx .ptab.rise.fx-go thead th{ animation:fxFade .5s ease backwards; }
  @keyframes fxRow{ from{ opacity:0; transform:translateX(-18px); } to{ opacity:1; transform:none; } }
  html.fx .pnote.rise.fx-go li{ animation:fxUp .5s ease backwards; }
  html.fx .pnote.rise.fx-go li:nth-child(2){ animation-delay:.1s; } html.fx .pnote.rise.fx-go li:nth-child(3){ animation-delay:.2s; }

  /* ボタンの枠・バナー：ふわっと拡大／横にめくれる */
  html.fx :is(.price-cta,.ek-cta).rise{ transform:scale(.92) translateY(18px); transition:opacity .7s ease, transform .8s cubic-bezier(.34,1.4,.64,1); }
  html.fx :is(.price-cta,.ek-cta).rise.fx-go{ transform:none; }
  html.fx .rise .kuritomo{ clip-path:inset(0 100% 0 0 round 6px); transition:clip-path 1s cubic-bezier(.2,.75,.25,1) .15s; }
  html.fx .rise.fx-go .kuritomo{ clip-path:inset(0 0 0 0 round 6px); }

  /* お知らせ：右から順に */
  html.fx .nbar__l{ animation:fxFade .6s ease 1s backwards; }
  html.fx .nbar__list li{ animation:fxNews .6s cubic-bezier(.2,.75,.25,1) backwards; }
  html.fx .nbar__list li:nth-child(1){ animation-delay:1.05s; }
  html.fx .nbar__list li:nth-child(2){ animation-delay:1.17s; }
  html.fx .nbar__list li:nth-child(3){ animation-delay:1.29s; }
  @keyframes fxNews{ from{ opacity:0; transform:translateX(28px); } to{ opacity:1; transform:none; } }

  /* スマホ下部のボタン：下からせり上がる */
  html.fx .dock{ animation:fxDock .6s cubic-bezier(.2,.75,.25,1) .9s backwards; }
  @keyframes fxDock{ from{ transform:translateY(110%); } to{ transform:none; } }

  /* ============ スクロール量に連動する演出（対応ブラウザ：Chrome・Edge・新しいSafari） ============ */
  @supports (animation-timeline: view()){

    /* ファーストビュー：スクロールで文字が先に上へ、写真はゆっくり拡大 */
    html.fx .hero{ view-timeline-name:--fxhero; }
    html.fx .hero__bg{ animation:fxPara linear both; animation-timeline:--fxhero; animation-range:exit 0% exit 100%; }
    @keyframes fxPara{ to{ transform:translateY(12%) scale(1.12); } }
    html.fx .hero__in{ animation:fxHeroOut linear both; animation-timeline:--fxhero; animation-range:exit 0% exit 70%; }
    @keyframes fxHeroOut{ to{ opacity:0; transform:translateY(-70px) scale(.97); } }

    /* 各セクション：画面に入るにつれて、沈んだ状態から浮かび上がる */
    html.fx main > .sect > .wrap{ animation:fxSec linear both; animation-timeline:view(); animation-range:entry 0% entry 42%; }
    @keyframes fxSec{ from{ opacity:.3; transform:translateY(70px) scale(.965); } to{ opacity:1; transform:none; } }

    /* 紺のセクションと締め：角丸のカードが画面いっぱいに広がる */
    html.fx main > :is(.lesson,.close){ animation:fxOpen linear both; animation-timeline:view(); animation-range:entry 0% entry 70%; }
    @keyframes fxOpen{ from{ clip-path:inset(12% 7% 0 7% round 36px); } to{ clip-path:inset(0 0 0 0 round 0px); } }

    /* 見出しの英字ラベルは横に流れながら定位置へ */
    html.fx .head .head__en{ animation:fxDrift linear both; animation-timeline:view(); animation-range:entry 0% cover 35%; }
    @keyframes fxDrift{ from{ transform:translateX(-36px); letter-spacing:.5em; } to{ transform:none; } }
    html.fx .lesson .head .head__en{ animation-name:fxDriftC; }
    @keyframes fxDriftC{ from{ letter-spacing:.6em; } to{ } }

    /* 学年のイラストは少しだけ遅れてついてくる */
    html.fx .grade img{ animation:fxFloat linear both; animation-timeline:view(); animation-range:entry 0% exit 100%; }
    @keyframes fxFloat{ from{ translate:0 16px; } to{ translate:0 -16px; } }

    /* 締めの光はスクロールで大きくなる */
    html.fx .close::before{ animation:fxAura linear both; animation-timeline:view(); animation-range:entry 20% cover 60%; opacity:1; transition:none; }
    @keyframes fxAura{ from{ transform:translate(-50%,-50%) scale(.3); opacity:0; } to{ transform:translate(-50%,-50%) scale(1.15); opacity:1; } }
  }
}