/* ============================================================
   GRIT就活2028 モーション追加レイヤー
   2026-08-26 追加。既存のstyles.cssは一切変更していません。
   このファイルを読み込まなければ、元の見た目に戻ります。
   ============================================================ */

/* --- 1. 背景固定＋GRIT透かし文字 ------------------------- */
.grit-watermark{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  /* 独立レイヤーへ昇格させ、スクロール中の再描画を避ける */
  contain:layout paint;
}
.grit-watermark span{
  position:absolute;left:-4%;white-space:nowrap;
  font-family:var(--font,"Zen Kaku Gothic New",sans-serif);
  font-weight:900;letter-spacing:.06em;line-height:1;
  font-size:clamp(64px,19vw,150px);
  color:rgba(8,85,133,.10);
}
.grit-watermark span:nth-child(1){top:12%}
.grit-watermark span:nth-child(2){top:44%;color:rgba(26,143,209,.09)}
.grit-watermark span:nth-child(3){top:76%}

/* スクロール量に連動して左右へ流す（指を止めれば止まる） */
.grit-watermark span{
  transform:translate3d(calc(var(--scroll, 0) * -900px), 0, 0);
  will-change:transform;
}
.grit-watermark span:nth-child(2){
  transform:translate3d(calc(var(--scroll, 0) * 1100px), 0, 0);
}
.grit-watermark span:nth-child(3){
  transform:translate3d(calc(var(--scroll, 0) * -650px), 0, 0);
}

/* 前面のコンテンツを透かしより手前へ（静的要素なので position が要る） */
body > main,
body > footer{position:relative;z-index:1}

/* ヘッダーと固定CTAは styles.css の position(sticky / fixed)を尊重し、
   重なり順だけ指定する。以前ここで position:relative を上書きしており、
   ヘッダーの追従と、スマホの固定CTAバーが無効化されていた。 */
body > header.site-header{z-index:20}
body > .mobile-cta{z-index:40}

/* 【重要】body が白で塗るため、fixedの透かしが隠れる。
   body を透過させ、最背面(html)に白を敷き直す。 */
html{background:var(--white,#fff)}
body{background:transparent}

/* セクションの白背景を透過させ、透かしを見せる */
main > .companies-media,
main > .encounters-sp-media,
main .encounters-grid,
main .encounters-grid > .encounters-sp-media,
main > .voices-media,
main > .hero-cta,
main > .faq,
main > .outline,
main > .final-cta{background:transparent}

/* --- 2A. 小さい要素の順次出現 ------------------------------
   セクション丸ごとではなく、中の項目を1つずつ動かす。
   周りの静止した余白が基準になり、動きがはっきり見える。 */
@property --p{syntax:'<number>';initial-value:0;inherits:false}

.mv{
  --p:0;
  opacity:calc(.08 + var(--p) * .92);
  transform:translate3d(0, calc((1 - var(--p)) * 44px), 0);
  will-change:transform, opacity;
}

/* FAQ・開催概要の各行は左から寄る（横の動きは気づきやすい） */
.mv-row{
  --p:0;
  opacity:calc(.05 + var(--p) * .95);
  transform:translate3d(calc((1 - var(--p)) * -34px), 0, 0);
  will-change:transform, opacity;
}

/* 体験カードは左右から挟み込む */
.encounters-grid > .mv[data-mv-delay="1"]{
  transform:translate3d(calc((1 - var(--p)) * -60px), 0, 0);
}
.encounters-grid > .mv[data-mv-delay="2"]{
  transform:translate3d(calc((1 - var(--p)) * 60px), 0, 0);
}

/* --- 2B. 画像パララックス ----------------------------------
   枠は動かさず、中の画像だけをスクロールに合わせて上下させる。
   静止した枠が基準になるため、動きが明確に見える。 */
.mv-frame{
  position:relative;
  overflow:hidden;
  display:block;
}
/*
  企業ロゴと参加者の声は、画像内の情報を欠けさせないことを優先する。
  固定比率の短い枠で切り抜かず、画像本来の高さをそのまま表示する。
*/
.companies-media-inner.mv-frame,
.voices-media .mv-frame{
  aspect-ratio:auto;
  overflow:visible;
}

/* <picture>はインラインなのでtransformが効かない。blockにして動かす */
.mv-frame > picture{
  display:block;
  width:100%;
  transform:translate3d(0, calc(var(--q, 0) * -9%), 0);
  will-change:transform;
}
.companies-media-inner.mv-frame > picture,
.voices-media .mv-frame > picture{
  transform:none;
  will-change:auto;
}
.mv-frame > picture > img{
  display:block;
  width:100%;
  height:auto !important;
  aspect-ratio:auto !important;
}

/* 視差効果を減らす設定：大きな動きだけ止め、控えめな出現は残す */
.reduce-motion .mv{
  transform:translate3d(0, calc((1 - var(--p)) * 14px), 0);
}
.reduce-motion .mv-row{
  transform:translate3d(calc((1 - var(--p)) * -12px), 0, 0);
}
.reduce-motion .mv-frame > picture{transform:none !important}
.reduce-motion .grit-watermark span{transform:none !important}

/* JSが完全に動かないときだけ全表示（真っ白防止） */
.no-motion .mv,
.no-motion .mv-row{--p:1 !important;opacity:1 !important;transform:none !important}
.no-motion .mv-frame > picture{transform:none !important}

/* --- 3. 画像の縦横比くずれ対策 ---------------------------- */
/* 原因：<picture>のSP差し替えで中身が縦長(900x1350)になるのに、
   <img>のwidth/height属性は横長(1600x1000)のまま残るため比率が崩れる。
   対策：実画像の比率で描画させる。既存styles.cssは変更していない。 */

/* 参加者の声：SPは縦長画像、PCは横長画像 */
.voices-media img{
  width:100%;
  height:auto;
  aspect-ratio:1600 / 1000;   /* PC用の実比率 */
  object-fit:contain;
}
@media (max-width:680px){
  .voices-media img{
    aspect-ratio:900 / 1350;  /* SP用の実比率 */
  }
}

/* ロゴ：属性240x93どおりの比率を保つ */
header.site-header .brand img,
footer img{
  height:auto;
  aspect-ratio:240 / 93;
  object-fit:contain;
}

/* その他の画像は比率を保持 */
main img,
header.site-header img,
footer img{
  max-width:100%;
}

/* --- 4. JSフォールバック（真っ白／幽霊ページ防止）------------
   head のインラインJSが即座に .mv-on を付与する。
   ・JS無効               → .mv-on が付かない
   ・motion.js が読めない  → インラインJSのタイマーが .mv-on を外す
   どちらの場合も下記が効き、初期の非表示(opacity 5〜8%)と
   ずらし(translate)を打ち消して全文を表示する。 */
html:not(.mv-on) .mv,
html:not(.mv-on) .mv-row,
html:not(.mv-on) .encounters-grid > .mv{
  opacity:1 !important;
  transform:none !important;
}

/* --- 5. スマホでは背景の透かしを静止させる -------------------
   低スペック端末での毎フレーム再計算をなくし、
   透かしのはみ出しによる横スクロールも防ぐ。 */
@media (max-width:680px){
  .grit-watermark span{
    transform:none !important;
    will-change:auto;
  }
}