/* ============================================================
   BASQUE BAR TOYAMA — v4 motion
   BLUE YARD 的な「スクロールで立ち上がる」演出群。
   JS 無効時は全て可視（html:not(.js)）。
   ============================================================ */

/* JS 有効時のみ初期状態を隠す */
html.js [data-reveal],
html.js [data-splitlines] > span,
html.js .reveal-media img,
html.js .stagger > *{will-change:transform,opacity}

/* ---- 汎用 reveal（フェード＋上昇） ---- */
html.js [data-reveal]{opacity:0;transform:translateY(34px);transition:opacity .9s var(--e-out),transform .9s var(--e-out)}
html.js [data-reveal].in{opacity:1;transform:none}

/* ---- stagger 子要素（微スケール付き） ---- */
html.js .stagger > *{opacity:0;transform:translateY(32px) scale(.985);transition:opacity .8s var(--e-out),transform .9s var(--e-out)}
html.js .stagger.in > *{opacity:1;transform:none}

/* ---- eyebrow の金ヘアライン描画 ---- */
html.js .eyebrow i{transform:scaleX(0);transform-origin:left;transition:transform .9s var(--e-out) .2s}
html.js [data-reveal].in .eyebrow i,
html.js .head.in .eyebrow i,
html.js .in .eyebrow i{transform:scaleX(1)}
html.js .stagger.in > *:nth-child(1){transition-delay:.05s}
html.js .stagger.in > *:nth-child(2){transition-delay:.14s}
html.js .stagger.in > *:nth-child(3){transition-delay:.23s}
html.js .stagger.in > *:nth-child(4){transition-delay:.32s}
html.js .stagger.in > *:nth-child(5){transition-delay:.41s}
html.js .stagger.in > *:nth-child(6){transition-delay:.5s}

/* ---- 導線ステップの金レール描画 ---- */
html.js .route__line{transform:scaleX(0);transform-origin:left;transition:transform 1s var(--e-out) .25s}
html.js .stagger.in .route__line{transform:scaleX(1)}

/* ---- 画像マスク・リビール＋内部パララックス（二層） ----
   figure = クリップマスク（reveal）／ img = JS パララックス（transform 専有）。
   img は上下に余白を持たせ、スクロールで滑らせる。 */
html.js .reveal-media{position:relative;overflow:hidden;clip-path:inset(100% 0 0 0);transition:clip-path 1.3s var(--e-out)}
html.js .reveal-media.in{clip-path:inset(0 0 0 0)}
html.js .reveal-media img{position:relative;top:-12%;height:124%;object-fit:cover;will-change:transform}

/* ---- 行分割リビール（クリップ） ---- */
html.js [data-splitlines] > span{display:block;transform:translateY(110%);transition:transform 1s var(--e-out)}
html.js [data-splitlines] > span:nth-child(2){transition-delay:.12s}
html.js [data-splitlines].in > span{transform:none}

/* ---- 文字分割（見出しの stagger reveal） ---- */
html.js [data-split] .ch{display:inline-block;transform:translateY(105%);opacity:0;transition:transform .8s var(--e-out),opacity .8s var(--e-out)}
html.js [data-split]{overflow:hidden;display:inline-block}
html.js [data-split].in .ch{transform:none;opacity:1}

/* ---- HERO スライド初期スケール（transform はスクラブが駆動） ---- */
html.js .hero__slide img{transform:scale(1.04)}

/* ---- HERO 初期モーション ---- */
html.js .hero__eyebrow{opacity:0;transform:translateY(16px);transition:opacity 1s var(--e-out) .3s,transform 1s var(--e-out) .3s}
html.js .hero__h .w{transform:translateY(120%);transition:transform 1.15s var(--e-out)}
html.js .hero__h .line:nth-child(1) .w{transition-delay:.45s}
html.js .hero__h .line:nth-child(2) .w{transition-delay:.6s}
/* .hero__sub は LCP 要素。ここの delay + duration がそのまま LCP の尾を引くので、
   段差の演出は残しつつ 0.95s+1s → 0.5s+0.75s に詰めてある（実測で約0.7秒短縮）。
   .hero__scroll は LCP に無関係なので従来の間合いのまま */
html.js .hero__sub{opacity:0;transform:translateY(18px);transition:opacity .75s var(--e-out) .5s,transform .75s var(--e-out) .5s}
html.js .hero__scroll{opacity:0;transform:translateY(18px);transition:opacity 1s var(--e-out) .95s,transform 1s var(--e-out) .95s}
html.js .hero.is-ready .hero__eyebrow,
html.js .hero.is-ready .hero__sub,
html.js .hero.is-ready .hero__scroll{opacity:1;transform:none}
html.js .hero.is-ready .hero__h .w{transform:none}

/* ---- loader 進行アニメ ---- */
html.js .loader.is-run .loader__glow{animation:ldGlow 1.5s var(--e-out) forwards}
html.js .loader.is-run .loader__logo img{animation:ldLogo 1s var(--e-out) .18s forwards}
html.js .loader.is-run .loader__cap{animation:ldCap .7s var(--e-out) .55s forwards}
html.js .loader.is-run .loader__line{animation:ldLine 1.7s var(--e-in-out) forwards}
html.js .loader.is-out{animation:ldOut .6s var(--e-out) forwards}
@keyframes ldGlow{0%{opacity:0;transform:scale(.85)}55%{opacity:1}100%{opacity:.8;transform:scale(1.05)}}
@keyframes ldLogo{0%{opacity:0;transform:translateY(26px) scale(.96);clip-path:inset(0 0 100% 0)}60%{opacity:1}100%{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}
@keyframes ldCap{from{opacity:0;letter-spacing:.6em}to{opacity:1;letter-spacing:.42em}}
@keyframes ldLine{0%{width:0}100%{width:100%}}
@keyframes ldOut{to{opacity:0;transform:translateY(-3%);visibility:hidden}}

/* ---- reduced motion：全リビールを即可視化 ---- */
@media (prefers-reduced-motion:reduce){
  html.js [data-reveal],
  html.js .stagger > *,
  html.js [data-splitlines] > span,
  html.js [data-split] .ch,
  html.js .eyebrow i,
  html.js .hero__eyebrow,html.js .hero__sub,html.js .hero__scroll,html.js .hero__h .w{
    opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important
  }
  html.js .reveal-media,html.js .reveal-media img{transform:none!important;clip-path:none!important;top:0!important;height:100%!important}
  html.js .hero__slide img{animation:none!important;transform:none!important}
  /* reduced-motion：ヒーローはピン留めせず1枚を静止表示 */
  html.js .hero{height:auto!important}
  html.js .hero__sticky{position:relative!important;top:auto!important}
  html.js .hero__slide + .hero__slide{display:none!important;clip-path:none!important}
  html.js .loader{display:none!important}
  /* SCROLLキューの 2.2 秒無限パルス。登場アニメだけ止めていて、
     これ自体が reduced-motion でも永久ループしていた */
  .hero__scroll i::after{animation:none!important;transform:translateY(0)!important}
  .marquee__row{animation:none!important}
  /* 3カードの傾きは静的な造形なので残す。動くのは hover だけなのでそれを止める */
  .wcard{transition:none!important}
}

/* ---- リビール完了後はコンポジタ層のヒントを降ろす ----
   will-change は一時的なヒント。付けっぱなしだと 69 要素が常時レイヤー昇格を
   要求し続け、低スペック端末のメモリ・合成コストになる */
html.js [data-reveal].in,
html.js .stagger.in > *,
html.js .reveal-media.in img,
html.js [data-splitlines].in > span,
html.js [data-split].in .ch{will-change:auto}

/* ---- 印刷・PDF保存 ----
   リビールは「スクロールされたら表示」が前提だが、印刷は一度に全体を描画するため
   スクロールされていないブロックが opacity:0 のまま出力される（実測 44 中 38 個が空白）。
   飲食店LPで「メニューを印刷」は現実的な行動なので、全部見える状態に戻す */
@media print{
  html.js [data-reveal],
  html.js .stagger > *,
  html.js [data-splitlines] > span,
  html.js [data-split] .ch,
  html.js .hero__eyebrow,html.js .hero__sub,html.js .hero__h .w{
    opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important;
  }
  html.js .reveal-media,html.js .reveal-media img{
    clip-path:none!important;top:0!important;height:auto!important;transform:none!important;
  }
  html.js .hero{height:auto!important}
  html.js .hero__sticky{position:relative!important;height:auto!important;min-height:0!important}
  html.js .hero__slide + .hero__slide{display:none!important}
  /* 折りたたみは展開して印刷する */
  .allmenu,.faq__a,.faqg__body{height:auto!important;overflow:visible!important}
  /* 傾き・重なりは紙面では読みにくいだけなので平らに戻す */
  .wcard{transform:none!important;box-shadow:none!important}
  .wslot,.wslot:nth-child(2){margin-inline:0!important}
  /* 画面専用UIは落とす */
  .nav,.progress,.dock,.fcta,.sheet,.sheet-bd,.loader,.marquee,.band,.footer__media,.skip-link{display:none!important}
  a[href^="tel:"]::after{content:" (" attr(href) ")";font-size:.85em}
}