/* ============================================
   v7 — Differentiated Transitions
   - NEWHERO: 静謐・最小モーション（編集的）
   - HEROPICTURES: 大胆・縦方向ダイナミック
   ============================================ */

/* ============================================
   SECTION NUMBER（共通基盤）
   ============================================ */
.has-num{position:relative;overflow:hidden;}
.section-num-big{
  position:absolute;
  right:max(20px, 3vw);
  bottom:max(40px, 5vw);
  font-family:'Noto Serif JP', serif;
  font-weight:500;
  line-height:.85;
  letter-spacing:-.04em;
  pointer-events:none;
  z-index:0;user-select:none;
  font-variant-numeric:lining-nums;
}
.has-num > *:not(.section-num-big){position:relative;z-index:1;}

/* ============================================
   NEWHERO（default）— 静謐・最小
   ============================================ */
.section-num-big{
  /* 小さめ・うっすら */
  font-size:clamp(60px, 8vw, 130px);
  color:rgba(0,0,0,.022);
  /* 軽いフェードアップだけ */
  opacity:0;
  transform:translateY(20px);
  transition:opacity 1.4s ease, transform 1.4s cubic-bezier(.2,.8,.2,1);
}
.has-num.in .section-num-big{opacity:1;transform:none;}

/* NEWHERO: ブラインド完全に非表示 */
body:not([data-theme="hp"]) .blind-divider{display:none;}

/* NEWHERO: ライトカラム弱め（控えめに） */
body:not([data-theme="hp"]) .vlight-bg span{opacity:.5;}

/* ============================================
   HEROPICTURES — 大胆・縦方向ダイナミック
   ============================================ */

/* 巨大セリフ番号：下から立ち上がる */
body[data-theme="hp"] .section-num-big{
  font-size:clamp(140px, 20vw, 320px);
  color:rgba(234,254,83,.08);
  transform:translateY(80px);
  transition:opacity 1.6s ease, transform 1.6s cubic-bezier(.2,.8,.2,1);
}
body[data-theme="hp"] .has-num.in .section-num-big{
  opacity:1;transform:none;
}

/* RECRUITセクション（黄色背景）の番号は別色 */
body[data-theme="hp"] section.recruit .section-num-big{
  color:rgba(12,0,172,.08);
}

/* ============================================
   HEROPICTURES 縦カーテン トランジション
   - 7本の縦バーが上から下へ垂れ下がる
   - 順番にスタガード
   ============================================ */
body[data-theme="hp"] .blind-divider{
  display:flex;
  flex-direction:row;       /* 横並び＝縦バーを並べる */
  height:160px;             /* 縦カーテンの高さ */
  overflow:hidden;
  pointer-events:none;
}
body[data-theme="hp"] .blind-divider .stripe{
  flex:1;
  background:var(--y, #EAFE53);
  transform:scaleY(0);
  transform-origin:top center;  /* 上から伸びる＝縦方向ドロップ */
  transition:transform 1.2s cubic-bezier(.86,0,.07,1);
}
body[data-theme="hp"] .blind-divider.in .stripe{transform:scaleY(1);}
body[data-theme="hp"] .blind-divider.in .stripe:nth-child(1){transition-delay:0s;}
body[data-theme="hp"] .blind-divider.in .stripe:nth-child(2){transition-delay:.07s;}
body[data-theme="hp"] .blind-divider.in .stripe:nth-child(3){transition-delay:.14s;}
body[data-theme="hp"] .blind-divider.in .stripe:nth-child(4){transition-delay:.21s;}
body[data-theme="hp"] .blind-divider.in .stripe:nth-child(5){transition-delay:.28s;}
body[data-theme="hp"] .blind-divider.in .stripe:nth-child(6){transition-delay:.35s;}

/* ============================================
   VERTICAL LIGHT COLUMNS（HERO背景・両者共通だが色違い）
   ============================================ */
.vlight-bg{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  display:grid;grid-template-columns:repeat(7,1fr);
  overflow:hidden;
}
.vlight-bg span{
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(40,80,190,.08) 30%,
    rgba(40,80,190,.04) 50%,
    transparent 100%);
  transform:translateY(-100%);
  animation:vlight-drop 9s ease-out infinite;
}
.vlight-bg span:nth-child(1){animation-delay:0s; background:linear-gradient(180deg, transparent, rgba(40,80,190,.10), transparent);}
.vlight-bg span:nth-child(2){animation-delay:1.3s; background:linear-gradient(180deg, transparent, rgba(255,60,50,.06), transparent);}
.vlight-bg span:nth-child(3){animation-delay:2.6s; background:linear-gradient(180deg, transparent, rgba(40,80,190,.05), transparent);}
.vlight-bg span:nth-child(4){animation-delay:3.9s; background:linear-gradient(180deg, transparent, rgba(255,60,50,.10), transparent);}
.vlight-bg span:nth-child(5){animation-delay:5.2s; background:linear-gradient(180deg, transparent, rgba(40,80,190,.07), transparent);}
.vlight-bg span:nth-child(6){animation-delay:6.5s; background:linear-gradient(180deg, transparent, rgba(255,60,50,.04), transparent);}
.vlight-bg span:nth-child(7){animation-delay:7.8s; background:linear-gradient(180deg, transparent, rgba(40,80,190,.06), transparent);}
@keyframes vlight-drop{
  0%   {transform:translateY(-100%);opacity:0;}
  20%  {opacity:1;}
  80%  {opacity:1;}
  100% {transform:translateY(100%);opacity:0;}
}
body[data-theme="hp"] .vlight-bg span:nth-child(1){background:linear-gradient(180deg, transparent, rgba(234,254,83,.10), transparent);}
body[data-theme="hp"] .vlight-bg span:nth-child(2){background:linear-gradient(180deg, transparent, rgba(255,255,255,.04), transparent);}
body[data-theme="hp"] .vlight-bg span:nth-child(3){background:linear-gradient(180deg, transparent, rgba(234,254,83,.06), transparent);}
body[data-theme="hp"] .vlight-bg span:nth-child(4){background:linear-gradient(180deg, transparent, rgba(255,255,255,.06), transparent);}
body[data-theme="hp"] .vlight-bg span:nth-child(5){background:linear-gradient(180deg, transparent, rgba(234,254,83,.08), transparent);}
body[data-theme="hp"] .vlight-bg span:nth-child(6){background:linear-gradient(180deg, transparent, rgba(255,255,255,.03), transparent);}
body[data-theme="hp"] .vlight-bg span:nth-child(7){background:linear-gradient(180deg, transparent, rgba(234,254,83,.05), transparent);}

/* ============================================
   PARALLAX SCROLL FRAGMENT
   - HEROPICTURES のセクションタイトル部にだけ縦パララックス
   ============================================ */
body[data-theme="hp"] section.about .pull,
body[data-theme="hp"] section.cases h2,
body[data-theme="hp"] section.recruit h2,
body[data-theme="hp"] section.contact h2{
  /* 視差っぽい縦スライドアップ */
  opacity:0;transform:translateY(60px);
  transition:opacity 1.2s ease, transform 1.2s cubic-bezier(.16,1,.3,1);
}
body[data-theme="hp"] section.about.in .pull,
body[data-theme="hp"] section.cases.in h2,
body[data-theme="hp"] section.recruit.in h2,
body[data-theme="hp"] section.contact.in h2{
  opacity:1;transform:none;
}

/* ============================================
   NEWHERO 微細なフェードアップ（控えめ）
   - .reveal は既存。色や強さは変更しない（既に作動済み）
   ============================================ */