/* ============================================================
   BeEngineer Tokyo — トップページ専用スタイル
   スニーカー広告風・リッチアニメーション
   （GSAP / ScrollTrigger / Lenis と併用）
   ============================================================ */

/* ============================================================
   HEADER（最上部では隠し、スクロールで表示）
   ============================================================ */
.site-header {
  transform: translateY(0);
  transition: transform 0.4s cubic-bezier(.22,.61,.36,1), opacity 0.4s ease;
}
/* ページ最上部（未スクロール／上限）では隠す */
.site-header.is-top {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}

.site-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.site-bg::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  aspect-ratio: 16 / 10;          /* 画像比率に合わせて調整 */
  background-image: url('../images/bridge-04.png');
  background-size: cover;
  background-position: center;
  border-radius: 16px;
  overflow: hidden;
}

/* 白オーバーレイも同じ枠に */
.site-bg::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  aspect-ratio: 16 / 10;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 16px;
}
body { background: transparent; }
.logo-bridge { background: transparent; }   /* #fff → transparent */
.news-onbridge { background: rgba(255,255,255,0.85); } /* または transparent */

/* ============================================================
   LOADER（読み込み画面）— 動画方式
   白背景で動画を再生（横幅20%）→ 終了後に拡大しながらフェードアウト
   ============================================================ */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: #ffffff;           /* 白背景 */
  overflow: hidden;
}
/* スクロールロック */
body.loading { overflow: hidden; }

.loader-inner {
  display: grid;
  place-items: center;
  transform: scale(1);
  opacity: 1;
  will-change: transform, opacity;
}

/* --- 退場フェーズ1：拡大（ビデオ＋ロード完了後に付与） --- */
.loader.is-zooming .loader-inner {
  transform: scale(4);
  transition: transform 1.4s cubic-bezier(.55,0,.35,1);
}

/* --- 退場フェーズ2：フェードアウト --- */
.loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.9s ease, visibility 0.9s ease;
}

/* ロゴアニメーション動画（横幅の20%） */
.loader-video {
  width: 20vw;
  height: auto;
  display: block;
  background: transparent;
}
@media (max-width: 768px) {
  .loader-video { width: 42vw; }   /* モバイルは小さすぎるため補正 */
}
/* 動画が「白背景に緑ロゴ」なら白地に馴染むのでそのままでOK。
   黒背景に白ロゴの動画の場合は下記を有効化:
.loader-video { mix-blend-mode: screen; }
*/

/* 動画が無い/読めない時のフォールバック */
.loader-fallback {
  grid-area: 1 / 1;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.loader.no-video .loader-video { display: none; }
.loader.no-video .loader-fallback { display: flex; }

.loader-logo {
  width: min(40vw, 260px);
  height: auto;
}
.loader-word-fb {
  font-weight: 900;
  font-size: clamp(1.6rem, 6vw, 3rem);
  letter-spacing: 0.02em;
  color: var(--be-green);
}
.loader-dots { display: flex; gap: 10px; }
.loader-dots span {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--be-green);
  animation: loader-bounce 1.2s ease-in-out infinite;
}
.loader-dots span:nth-child(2) { animation-delay: 0.15s; opacity: 0.7; }
.loader-dots span:nth-child(3) { animation-delay: 0.3s;  opacity: 0.45; }
@keyframes loader-bounce {
  0%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-14px); }
}

@media (prefers-reduced-motion: reduce) {
  .loader-dots span { animation: none; }
  .loader.is-zooming .loader-inner { transform: none; transition: none; }
  .loader.is-hidden { transition-duration: 0.3s; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 80% -10%, rgba(63,176,77,0.10), transparent 60%),
    linear-gradient(180deg, #f7faf8 0%, #ffffff 60%);
}

/* 巨大な背景ワードマーク（視差で流れる） */
.hero-wordmark {
  position: absolute;
  top: 50%; left: 0;
  transform: translateY(-50%);
  font-weight: 900;
  font-size: clamp(8rem, 26vw, 26rem);
  letter-spacing: -0.04em;
  line-height: 0.8;
  color: #0f172a;
  opacity: 0.035;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

/* プロダクト画像ステージ */
.hero-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 5;
}
.hero-product {
  position: relative;
  width: min(52vw, 620px);
  aspect-ratio: 4 / 5;
  border-radius: 28px;
  overflow: hidden;
  box-shadow:
    0 40px 80px -20px rgba(16,24,40,0.35),
    0 0 0 1px rgba(255,255,255,0.6) inset;
  transform: translateY(40px);
  will-change: transform;
}
.hero-product img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.15);
}
/* 画像に載る光沢スイープ（--x をJSで駆動） */
.hero-product { --x: -120%; }
.hero-product::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.35) 48%, transparent 60%);
  transform: translateX(var(--x));
  mix-blend-mode: screen;
  pointer-events: none;
}
@media (max-width: 768px) {
  .hero-product { width: 74vw; }
}

/* コピー（前面） */
.hero-copy {
  position: relative;
  z-index: 10;
  pointer-events: none;
}
.hero-copy .line { overflow: hidden; }
.hero-copy .line > span {
  display: inline-block;
  transform: translateY(110%);
  will-change: transform;
}

/* マスクワイプで出る帯 */
.wipe {
  position: relative;
  overflow: hidden;
}
/* 常時の背景色を持つバッジ（ワイプ演出後も白文字が読める） */
.badge-solid {
  background: var(--be-green);
}
.wipe > .wipe-fill {
  position: absolute; inset: 0;
  background: var(--be-green);
  transform: scaleX(0);
  transform-origin: left;
}

/* スクロールインジケータ */
.scroll-cue {
  position: absolute;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: #64748b; font-size: 10px; letter-spacing: 0.3em; font-weight: 700;
}
.scroll-cue .bar {
  width: 1px; height: 46px;
  background: linear-gradient(#94a3b8, transparent);
  overflow: hidden; position: relative;
}
.scroll-cue .bar::after {
  content: ""; position: absolute; top: -50%; left: 0;
  width: 100%; height: 50%;
  background: var(--be-green);
  animation: cue-run 1.8s cubic-bezier(.7,0,.3,1) infinite;
}
@keyframes cue-run { to { top: 100%; } }

.line span {
  white-space: nowrap; /* 途中での自動改行を禁止 */
}

/* ============================================================
   マーキー（帯状の流れるテキスト）
   ============================================================ */
.strip {
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid var(--be-line);
  border-bottom: 1px solid var(--be-line);
  background: #fff;
}
.strip-inner {
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
  padding: 18px 0;
  will-change: transform;
}
.strip-inner span {
  font-weight: 900;
  font-size: clamp(1.2rem, 2.6vw, 2rem);
  letter-spacing: -0.01em;
  color: #0f172a;
}
.strip-inner .dot { color: var(--be-green); font-size: 1.4rem; }
.strip.ghost .strip-inner span {
  -webkit-text-stroke: 1.4px #cbd5e1;
  color: transparent;
}

/* ============================================================
   PINショーケース（横展開）
   ============================================================ */
.showcase { position: relative; background: #0b0f14; color: #fff; }
.showcase-pin {
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.showcase-track {
  display: flex;
  gap: 4vw;
  padding: 0 6vw;
  will-change: transform;
}
.pcard {
  position: relative;
  flex: 0 0 auto;
  width: min(76vw, 520px);
  height: 66vh;
  border-radius: 24px;
  overflow: hidden;
  background: #11161d;
  box-shadow: 0 30px 60px -25px rgba(0,0,0,0.7);
}
.pcard img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.12);
}
.pcard .veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(3,6,10,0.85) 100%);
}
.pcard .meta {
  position: absolute; left: 26px; right: 26px; bottom: 24px;
  z-index: 2;
}
.pcard .idx {
  font-weight: 900; font-size: 0.8rem; letter-spacing: 0.2em;
  color: var(--be-green);
}
.pcard .ttl {
  font-weight: 900; font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.15; margin-top: 6px;
}
.pcard .sub { color: #cbd5e1; font-size: 0.85rem; margin-top: 8px; max-width: 34ch; }
.showcase-head {
  position: absolute; top: 8vh; left: 6vw; z-index: 5;
  pointer-events: none;
}

/* ---- モバイル：ピンをやめてネイティブ横スワイプ（安全策）----
   640px以下では JS 側でピンを無効化しているので、
   ここでは track を素の横スクロール＋スナップにする。
   アドレスバー伸縮の影響を受けないため崩れにくい。 */
@media (max-width: 640px) {
  .showcase-pin {
    height: auto;
    display: block;
    overflow: visible;
    padding: 88px 0 72px;
  }
  .showcase-track {
    /* GSAP は動かさない（JS側で640px超のみ制御）。素のスクロールに */
    transform: none !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding: 0 20px 18px;
    scroll-padding-left: 20px;
  }
  /* スクロールバーは控えめに隠す */
  .showcase-track { scrollbar-width: none; }
  .showcase-track::-webkit-scrollbar { display: none; }

  .pcard {
    width: 82vw;
    height: 68vh;
    scroll-snap-align: start;
  }
  .pcard img { transform: scale(1.05) !important; }

  .showcase-head {
    position: static;
    padding: 0 20px 20px;
  }

  /* スワイプを促すヒント */
  .swipe-hint { display: flex; }
}
.swipe-hint {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 16px 20px 0;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
}
.swipe-hint svg { animation: swipe-nudge 1.6s ease-in-out infinite; }
@keyframes swipe-nudge {
  0%,100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .swipe-hint svg { animation: none; }
}

/* ============================================================
   数値カウンター
   ============================================================ */
.stat-num {
  font-weight: 900;
  font-size: clamp(3rem, 9vw, 7rem);
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(180deg, #0f172a, #475569);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.stat-num.green {
  background: linear-gradient(180deg, var(--be-green), #2f8236);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ============================================================
   クリップ・リビール画像（パララックス）
   ============================================================ */
.reveal-clip {
  clip-path: inset(0 0 100% 0);
}
.par-img { overflow: hidden; }
.par-img img { transform: scale(1.2); }

/* ============================================================
   reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero-product,
  .hero-product img,
  .hero-copy .line > span,
  .reveal-clip,
  .par-img img { transform: none !important; clip-path: none !important; opacity: 1 !important; }
  .scroll-cue .bar::after,
  .hero-product::after { animation: none; }
}

/* ============================================================
   LOGO BRIDGE（For Schools と News の間の“間”）
   スクロールされない背景ロゴが映る余白セクション
   sticky で画面中央に固定 → 次セクションが被さって通過
   ============================================================ */
.logo-bridge {
  position: relative;
  height: 200vh;
  background: transparent;   /* ← #fff から変更 */
  z-index: 0;                /* ← 追加。site-bg(-1) より上、news(10) より下 */
}

.logo-bridge-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* 04：sticky の中で中央固定。GSAP に y を渡すので translate は使わない */
.logo-bridge-bg {
  left: 50%;
  width: min(90vw, 800px);
  height: 500px;
  margin-left: min(-45vw, -400px);
  margin-top: -250px;
  transform: none;
  will-change: transform;
  z-index: 0;
  pointer-events: none;
  border-radius: 16px;
  overflow: hidden;
}

/* 写真群は sticky の外なので、セクション基準で絶対配置 */
.bridge-photos {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%,-50%);
  width: min(88vw, 720px);
  height: 100%;
  pointer-events: none;
  z-index: 5;   /* sticky レイヤーより上に */
}

/* ===============================================
   ロゴ（ z-index: 3 ）
   写真2より上、写真1より下に配置・中央完全固定
   =============================================== */
.logo-bridge-canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(70vw, 640px);
  height: min(70vw, 640px);
  z-index: 3;
  pointer-events: none;
}
.logo-bridge-canvas {
  width: min(80vw, 800px);
  height: min(32vw, 320px);   /* ロゴのアスペクト比に合わせる */
}

/* ===============================================
   写真ラッパー
   親要素でスタックコンテキストを作らないよう調整
   =============================================== */
.bridge-photos {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%); /* 中央寄せ */
  width: min(88vw, 720px);
  height: 100%;
  pointer-events: none;
}

.bridge-photo {
  position: absolute;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 60px -22px rgba(16,24,40,0.4);
  /* フェードイン初期状態 */
  opacity: 0;
  will-change: opacity, transform;
  /* ★ GSAPと競合しないよう transform を外し opacity だけに絞る */
  transition: opacity 0.9s cubic-bezier(.22,.61,.36,1);
}

.bridge-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===============================================
   各写真の z-index 個別指定 & 配置
   =============================================== */
/* 写真1：最前面 (z-index: 4) */
.bridge-photo-1 {
  z-index: 4;
  width: 30%;
  aspect-ratio: 4 / 5;
  top: 8%;
  left: 2%;
}

/* 写真2：ロゴの下、写真3の上 (z-index: 2) */
.bridge-photo-2 {
  z-index: 2;
  width: 32%;
  aspect-ratio: 4 / 5;
  top: 63%; /* バランスを考慮し 63% から調整 */
  left: 34%;
}

/* 写真3：最背面 (z-index: 1) */
.bridge-photo-3 {
  z-index: 1;
  width: 38%;
  aspect-ratio: 4 / 5;
  top: 12%;
  right: 2%;
}

/* 表示状態（JSで付与） */
.bridge-photo.is-in {
  opacity: 1;
}

/* News セクションを不透明にして、ロゴの上に被さって通過させる */
.news-onbridge {
  position: relative;
  z-index: 10; /* ロゴ(3)や写真1(4)よりも確実に上に乗るよう高めに設定 */
  background: #ffffff;
}



/* ===============================================
   レスポンシブ & アクセシビリティ
   =============================================== */
@media (max-width: 640px) {
  /* sticky の余白を維持するため親を大きく、固定枠を高さ小さめに修正 */
  .logo-bridge { height: 110vh; }
  .logo-bridge-sticky { height: 80vh; }
  
  .bridge-photo-1 { width: 44%; top: 4%; left: 2%; }
  .bridge-photo-2 { width: 46%; top: 40%; left: 27%; }
  .bridge-photo-3 { width: 42%; top: 10%; right: 2%; }
}

@media (prefers-reduced-motion: reduce) {
  .bridge-photo { transition: none; }
}


/* ============================================================
   HERO 人物ビジュアル（切り抜きPNG）— 右サイド配置
   構造: .hero-stage > .hero-figure-wrap > .hero-figure(img)
   ・位置決めは wrap（CSS）が担当
   ・transform は GSAP が .hero-figure に対してのみ操作
   ============================================================ */
.hero-figure-wrap {
  /* stage は place-items:center。ここで右へ寄せる */
  justify-self: end;
  align-self: end;
  margin-right: clamp(-6vw, -2vw, 0vw);
  height: 88svh;
  max-height: 940px;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
}
.hero-figure {
  position: relative;
  width: auto;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  transform: none;   /* 初期値。以後 GSAP が制御 */
}
.hero-figure img {
  width: auto;
  height: 100%;
  object-fit: contain;
  transform: none;
  filter: drop-shadow(0 22px 38px rgba(16,24,40,0.16));
}
/* 光沢スイープは切り抜きに合わないので無効化 */
.hero-figure::after { display: none; }

/* コピーは左寄せのまま（人物が右なので重ならない） */
@media (min-width: 1200px) {
  .hero-copy .max-w-2xl { max-width: 34rem; }
}
@media (max-width: 1199px) {
  .hero-figure-wrap { opacity: 0.2; }   /* 狭い画面では背景的に */
}
@media (max-width: 768px) {
  .hero-figure-wrap { height: 60svh; margin-right: -8vw; }
}