/* ============================================================
   ESTAM — Landing Page styles

   白基調・清潔感のライトテーマ。
   背景画像: img/bg-hero.jpg（チーム）/ img/bg-company.jpg（神戸）/
   img/bg-cta.jpg（ウェーブ）。命名は役割ベース（bg-<セクション>）。
   英数字フォント: Open Sans（hero・見出しは 800 italic）。
   hero にはニューラル canvas（estam.js・色は --neural-* で制御）。

   CSS設計: BEM（block__element--modifier）。
   状態はモディファイア（.nav--scrolled / .reveal--visible）で表現。
   .wrap は唯一のレイアウトユーティリティ（BEM対象外）。
   トークン外の生値が許されるのは:
   - レスポンシブ大見出しの clamp()（viewport連動）
   - 装飾的な巨大数字・図形（.deco-num 等）
   - 1〜3px の微調整・アニメ用 transform・線幅・装飾寸法
   ============================================================ */

:root {
  /* ---- Surfaces（ライト基調）---- */
  --bg:        oklch(0.99 0.003 240);
  --bg-2:      oklch(0.965 0.010 235);
  --bg-3:      oklch(0.92 0.018 235);
  --panel:     oklch(1 0 0 / 0.7);
  --line:      oklch(0.85 0.02 240);
  --line-soft: oklch(0.90 0.015 240);

  /* ---- Text ---- */
  --text:      oklch(0.30 0.03 256);
  --text-dim:  oklch(0.45 0.025 256);
  --text-faint:oklch(0.60 0.02 256);

  /* ---- Accents（白背景向けに濃度を上げた青系）---- */
  --accent:    oklch(0.55 0.16 252);
  --accent-2:  oklch(0.52 0.12 220);
  --accent-deep: oklch(0.42 0.15 256);
  --glow:      oklch(0.55 0.16 252 / 0.22);

  /* ---- Neural canvas（estam.js が参照・白で写真に重ねる）---- */
  --neural-link: oklch(1 0 0);
  --neural-node: oklch(1 0 0 / 0.9);

  /* ---- Font Size（9段: 10 12 14 16 / 20 24 32 40 64）---- */
  --font-size-xxxs: 0.625rem; /* 10px 極小ラベル・en小字 */
  --font-size-xxs:  0.75rem;  /* 12px バッジ・nav・補助 */
  --font-size-xs:   0.875rem; /* 14px キャプション・ラベル・ボタン */
  --font-size-s:    1rem;     /* 16px 本文（基準） */
  --font-size-m:    1.25rem;  /* 20px 小見出し */
  --font-size-l:    1.5rem;   /* 24px セクション見出し（card title 等） */
  --font-size-xl:   2rem;     /* 32px 大見出し */
  --font-size-xxl:  2.5rem;   /* 40px 最大見出し */
  --font-size-xxxl: 4rem;     /* 64px 強調数値・特大 */

  /* ---- Line Height（5段・等差0.25）---- */
  --line-height-xs: 1;    /* ラベル・数字・単行ディスプレイ */
  --line-height-s:  1.25; /* 大見出し */
  --line-height-m:  1.5;  /* 小見出し・UI・短文 */
  --line-height-l:  1.75; /* 本文 */
  --line-height-xl: 2;    /* 長文・記事 */

  /* ---- Spacing（9段・√2幾何: 4 8 12 16 24 32 48 64 96）---- */
  --space-xxxs: 0.25rem; /*  4px */
  --space-xxs:  0.5rem;  /*  8px */
  --space-xs:   0.75rem; /* 12px */
  --space-s:    1rem;    /* 16px */
  --space-m:    1.5rem;  /* 24px */
  --space-l:    2rem;    /* 32px */
  --space-xl:   3rem;    /* 48px */
  --space-xxl:  4rem;    /* 64px */
  --space-xxxl: 6rem;    /* 96px */

  /* ---- Layout spacing（viewport連動・セクションリズム用）---- */
  --space-section: clamp(90px, 12vw, 170px); /* セクションの天地 */
  --space-layout:  clamp(48px, 6vw, 88px);   /* 大グリッドgap・section-head下 */
  --space-card:    clamp(32px, 3.5vw, 56px); /* カード内padding */
  --space-card-lg: clamp(48px, 8vw, 96px);   /* 特大カード（CTA）内padding */

  /* ---- Border Radius ---- */
  --radius-sm:   4px;   /* バッジ・小要素 */
  --radius-md:   8px;   /* ボタン・入力・カード（標準） */
  --radius-lg:   16px;  /* 大きいカード・モーダル */
  --radius-pill: 999px; /* スタジアム形（タグ・チップ・ピル） */
  --radius-full: 50%;   /* 真円（アバター・ドット） */

  /* ---- Elevation Shadows（3段・ライト基準値）---- */
  --shadow-sm: 0 1px 2px rgba(50, 50, 58, .04), 0 0 0 1px rgba(50, 50, 58, .04);
  --shadow-md: 0 4px 12px rgba(50, 50, 58, .06), 0 1px 2px rgba(50, 50, 58, .04);
  --shadow-lg: 0 12px 32px rgba(50, 50, 58, .08), 0 2px 6px rgba(50, 50, 58, .04);

  /* ---- Typography / layout ----
     英数字=Open Sans（太めウェイト運用）/ 和文=Zen Kaku Gothic New */
  --font-jp:  "Zen Kaku Gothic New", system-ui, sans-serif;
  --font-en:  "Open Sans", var(--font-jp);
  --font-mono:"Open Sans", ui-monospace, monospace;

  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 80px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-jp);
  background: var(--bg);
  color: var(--text);
  font-size: var(--font-size-s);
  font-weight: 500; /* フォント実験: 全体太め */
  line-height: var(--line-height-l);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  font-feature-settings: "palt" 1;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ============================================================
   layout utility
   ============================================================ */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }

/* ============================================================
   eyebrow（汎用ラベル block）
   ============================================================ */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--font-size-xxs);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: 600;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px; /* 装飾線（スケール外） */
  background: var(--accent);
  display: inline-block;
  transform-origin: left;
}
.eyebrow--center { justify-content: center; }

/* ============================================================
   section-head（セクション見出し block）
   ============================================================ */
.section-head { margin-bottom: var(--space-layout); }
.section-head--compact { margin-bottom: var(--space-l); }
.section-head__title {
  font-family: var(--font-en);
  font-size: clamp(2.6rem, 7vw, 5rem); /* レスポンシブ大見出し（スケール外） */
  font-weight: 800; font-style: italic;
  letter-spacing: -0.02em;
  line-height: var(--line-height-xs);
  margin-top: var(--space-m);
  color: var(--accent-deep);
}
.section-head__lead {
  margin-top: var(--space-m);
  max-width: 46ch;
  color: var(--text-dim);
  font-size: var(--font-size-s);
}

section { position: relative; }

/* ============================================================
   nav
   ============================================================ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-s) var(--gutter);
  transition: background .5s var(--ease), border-color .5s var(--ease), padding .4s var(--ease), box-shadow .5s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav--scrolled {
  background: oklch(1 0 0 / 0.8);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
  box-shadow: var(--shadow-sm);
  padding-block: var(--space-xs);
}
.nav__links { display: flex; align-items: center; gap: var(--space-l); }
.nav__link {
  font-family: var(--font-mono);
  font-size: var(--font-size-xxs); letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--text-dim);
  transition: color .3s;
  position: relative;
}
.nav__link:hover { color: var(--text); }
.nav__link--cta {
  letter-spacing: 0.12em;
  padding: var(--space-xxs) var(--space-s);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--text);
  background: oklch(1 0 0 / 0.7);
  transition: border-color .3s, background .3s, color .3s;
}
.nav__link--cta:hover { border-color: var(--accent); background: var(--accent); color: #fff; }
@media (max-width: 860px) {
  .nav__link:not(.nav__link--cta) { display: none; }
}

/* ============================================================
   brand（nav / footer 共用 block）
   ============================================================ */
.brand {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: var(--font-size-m);
  letter-spacing: 0.04em;
  display: flex; align-items: center;
  color: var(--accent-deep);
}

/* ============================================================
   hero（背景: チーム写真 + 白グラデで可読性確保）
   ============================================================ */
.hero {
  min-height: 100svh;
  display: flex; align-items: center;
  padding-top: var(--space-xxxl); padding-bottom: var(--space-xxl);
  overflow: hidden;
  background:
    linear-gradient(90deg, oklch(1 0 0 / 0.95) 0%, oklch(1 0 0 / 0.82) 38%, oklch(1 0 0 / 0.30) 72%, oklch(1 0 0 / 0.12) 100%),
    url("img/bg-hero.jpg") right center / cover no-repeat;
}
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 18%; z-index: 2;
  background: linear-gradient(180deg, transparent, var(--bg));
  pointer-events: none;
}
.hero__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1; opacity: 0.5; /* 写真の上に淡く重ねる */
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 3; width: 100%; }

/* スマホ: 背景は縦幅いっぱい（cover）。人物が写る右寄りを表示位置にし、
   テキスト帯は縦グラデの白で可読性を確保 */
@media (max-width: 880px) {
  .hero {
    background:
      linear-gradient(180deg, oklch(1 0 0 / 0.30) 0%, oklch(1 0 0 / 0.72) 34%, oklch(1 0 0 / 0.90) 55%, oklch(1 0 0 / 0.94) 100%),
      url("img/bg-hero.jpg") 70% center / cover no-repeat;
  }
}

.hero__eyebrow { margin-bottom: var(--space-l); }
.hero__title {
  font-family: var(--font-en);
  font-weight: 800; font-style: italic; /* フォント実験: Open Sans 最太イタリック */
  font-size: clamp(4.5rem, 17vw, 10rem); /* ディスプレイ（スケール外） */
  line-height: var(--line-height-xs);
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, oklch(0.32 0.06 256), var(--accent));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero__sub {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.28em;
  color: var(--accent-2);
  margin-top: var(--space-m);
  text-transform: uppercase;
}
.hero__tagline {
  margin-top: var(--space-xl);
  font-size: clamp(1.25rem, 2.7vw, 2rem); /* レスポンシブ見出し（スケール外） */
  font-weight: 900;
  line-height: var(--line-height-m);
  letter-spacing: 0.01em;
}
.hero__copy {
  margin-top: var(--space-m);
  max-width: 52ch;
  color: var(--text-dim);
  font-size: var(--font-size-s);
}
.hero__actions { margin-top: var(--space-xl); display: flex; gap: var(--space-s); flex-wrap: wrap; }

.hero__scroll {
  position: absolute; bottom: var(--space-l); left: 50%; transform: translateX(-50%);
  z-index: 3;
  font-family: var(--font-mono); font-size: var(--font-size-xxxs); letter-spacing: 0.3em; font-weight: 600;
  color: var(--text-faint); text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-xs);
}
.hero__scroll-bar { width: 1px; height: 46px; background: linear-gradient(var(--accent), transparent); animation: scrollPulse 2.2s var(--ease) infinite; }
@keyframes scrollPulse { 0%,100% { transform: scaleY(0.4); opacity: .4; transform-origin: top; } 50% { transform: scaleY(1); opacity: 1; transform-origin: top; } }

/* ============================================================
   btn（汎用ボタン block）
   ============================================================ */
.btn {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs); letter-spacing: 0.1em;
  font-weight: 600;
  padding: var(--space-s) var(--space-l);
  border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; gap: var(--space-xs);
  transition: transform .35s var(--ease), background .35s, border-color .35s, box-shadow .35s;
}
.btn--primary {
  background: var(--accent); color: #fff;
  font-weight: 700;
  box-shadow: var(--shadow-md);
}
.btn--primary:hover { transform: translateY(-3px); box-shadow: 0 14px 40px -10px var(--glow), var(--shadow-md); }
.btn--ghost { border: 1px solid var(--line); color: var(--text); background: oklch(1 0 0 / 0.7); }
.btn--ghost:hover { border-color: var(--accent); transform: translateY(-3px); }
.btn__arrow { transition: transform .35s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(5px); }

/* ============================================================
   section（セクション骨格 block・bg違いは works/company/cta block を mix）
   ============================================================ */
.section { padding-block: var(--space-section); }

/* ============================================================
   deco-num（装飾数字・共用 block — service-card / strength-card に mix）
   タイトルの下に敷く特大ナンバー。少し左にずらしてリズムを出す。
   ============================================================ */
.deco-num {
  position: absolute; z-index: 0;
  font-family: var(--font-en); font-weight: 800; font-style: italic;
  font-size: clamp(3.5rem, 6.5vw, 6.5rem); /* 装飾数字（型ではなく図形・スケール外） */
  line-height: var(--line-height-xs); letter-spacing: -0.03em;
  color: oklch(0.90 0.03 245); /* 装飾専用色（ライト面に淡い青グレー） */
}

/* ============================================================
   service（縦積み・1業ごとに写真とテキストを横並び。行ごとに左右反転し、
   テキストボックスが写真に少し重なる。シャドウなし・角丸最小）
   ============================================================ */
.service-grid { display: flex; flex-direction: column; gap: var(--space-xxl); }
.service-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.service-card__media { border-radius: var(--radius-sm); overflow: hidden; grid-column: 1; grid-row: 1; }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.service-card__body {
  position: relative; z-index: 1;
  grid-column: 2; grid-row: 1;
  background: var(--bg);
  padding: var(--space-card);
  border-radius: var(--radius-sm);
  margin-left: calc(-1 * var(--space-xl)); /* 写真に少し重なる */
}
/* 奇数=写真左／偶数=写真右、で交互にリズムを出す */
.service-card:nth-child(even) .service-card__media { grid-column: 2; }
.service-card:nth-child(even) .service-card__body { grid-column: 1; margin-left: 0; margin-right: calc(-1 * var(--space-xl)); }
.service-card__no { top: calc(-0.5 * var(--space-xl)); left: var(--space-card); } /* body基準・少し上に */
.service-card__title {
  position: relative; z-index: 1; padding-top: var(--space-s);
  font-size: var(--font-size-l);
  font-weight: 700; margin-bottom: var(--space-m);
  line-height: var(--line-height-m);
}
.service-card__text { color: var(--text-dim); font-size: var(--font-size-s); }
@media (max-width: 720px) {
  /* スマホ: 写真の上にテキストを少し重ねた縦積み */
  .service-card { grid-template-columns: 1fr; }
  .service-card__media,
  .service-card:nth-child(even) .service-card__media { grid-column: 1; grid-row: 1; }
  .service-card__body,
  .service-card:nth-child(even) .service-card__body {
    grid-column: 1; grid-row: 2;
    margin: calc(-1 * var(--space-xl)) var(--space-m) 0; /* 上に重なる */
  }
}

/* ============================================================
   works
   ============================================================ */
.works { background: var(--bg-2); border-block: 1px solid var(--line-soft); }
.works__layout { display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--space-layout); align-items: center; }
@media (max-width: 900px) { .works__layout { grid-template-columns: 1fr; } }
.works__list { display: flex; flex-direction: column; }
.works__item {
  display: flex; align-items: center; gap: var(--space-m);
  padding: var(--space-m) var(--space-xxxs);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.works__item:first-child { border-top: 1px solid var(--line); }
.works__no { font-family: var(--font-mono); font-size: var(--font-size-xxs); font-weight: 600; color: var(--text-faint); width: 34px; flex: none; }
.works__name { font-size: var(--font-size-l); font-weight: 700; transition: transform .4s var(--ease), color .4s; }
.works__item::after {
  content: "→"; margin-left: auto; color: var(--accent); opacity: 0;
  transform: translateX(-8px); transition: all .4s var(--ease); font-family: var(--font-mono); /* アニメ移動量（機能値） */
}
.works__item:hover .works__name { transform: translateX(8px); color: var(--accent); }
.works__item:hover::after { opacity: 1; transform: translateX(0); }
.works__note { margin-top: var(--space-l); color: var(--text-faint); font-size: var(--font-size-xs); }

/* ============================================================
   strengths（白カード + ソフトシャドウ）
   ============================================================ */
.strengths { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-m); }
@media (max-width: 820px) { .strengths { grid-template-columns: 1fr; } }
.strength-card {
  background: #fff;
  padding: var(--space-card);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); /* sm はリング(0 0 0 1px)が線に見えるため md */
  position: relative; /* deco-num の基準 */
  transition: box-shadow .45s var(--ease), transform .45s var(--ease);
}
.strength-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.strength-card__head { margin-bottom: var(--space-s); }
.strength-card__no { top: calc(-1 * var(--space-xl)); left: var(--space-card); } /* card基準・カード上端から少し出る */
.strength-card__title { font-size: var(--font-size-l); font-weight: 700; line-height: var(--line-height-m); }
.strength-card__text { color: var(--text-dim); font-size: var(--font-size-s); }

/* ============================================================
   company（背景: 神戸ポートタワー + 白オーバーレイ）
   ============================================================ */
.company {
  border-block: 1px solid var(--line-soft); overflow: hidden; position: relative;
  background:
    linear-gradient(90deg, oklch(1 0 0 / 0.92) 0%, oklch(1 0 0 / 0.78) 50%, oklch(1 0 0 / 0.45) 100%),
    url("img/bg-company.jpg") center / cover no-repeat;
}
/* スマホ: 背景は縦幅いっぱい（cover）。重要オブジェクトが右側にあるため右端基準で表示 */
@media (max-width: 880px) {
  .company {
    background:
      linear-gradient(180deg, oklch(1 0 0 / 0.92) 0%, oklch(1 0 0 / 0.80) 55%, oklch(1 0 0 / 0.50) 100%),
      url("img/bg-company.jpg") right center / cover no-repeat;
  }
}
.company__inner { position: relative; z-index: 1; }
.company__layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-layout); align-items: start; }
@media (max-width: 900px) { .company__layout { grid-template-columns: 1fr; } }
.company__title {
  font-family: var(--font-en); font-weight: 800; font-style: italic;
  font-size: clamp(2.4rem, 6vw, 4.6rem); /* レスポンシブ大見出し（スケール外） */
  line-height: var(--line-height-xs); letter-spacing: -0.03em;
  margin-top: var(--space-m);
  color: var(--accent-deep);
}
.company__name-ja { font-size: var(--font-size-m); font-weight: 700; margin-top: var(--space-s); }
.company__tagline { color: var(--text-dim); margin-top: var(--space-m); max-width: 38ch; }
.company__meta { font-family: var(--font-mono); font-size: var(--font-size-xxs); letter-spacing: 0.26em; font-weight: 600; color: var(--accent-2); margin-top: var(--space-l); text-transform: uppercase; }

/* ============================================================
   info-table（会社概要 block・線・背景なしの素組み）
   ============================================================ */
.info-table__row { display: grid; grid-template-columns: 120px 1fr; gap: var(--space-s); padding: var(--space-m) 0; }
.info-table__key { font-family: var(--font-mono); font-size: var(--font-size-xxs); letter-spacing: 0.12em; font-weight: 600; color: var(--text-faint); text-transform: uppercase; padding-top: 3px; } /* 3px=光学調整（機能値） */
.info-table__value { font-size: var(--font-size-s); color: var(--text); }
@media (max-width: 520px) { .info-table__row { grid-template-columns: 1fr; gap: var(--space-xxxs); } }

/* ============================================================
   cta（背景: ウェーブ + 白カード）
   ============================================================ */
.cta { text-align: center; }
.cta__inner {
  border-radius: var(--radius-lg);
  padding: var(--space-card-lg) var(--gutter);
  background:
    linear-gradient(180deg, oklch(1 0 0 / 0.78), oklch(1 0 0 / 0.55)),
    url("img/bg-cta.jpg") center / cover no-repeat;
  box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden;
}
.cta__inner > * { position: relative; z-index: 1; }
/* スマホ: 背景は縦幅いっぱい（cover）。重要オブジェクトが右側にあるため右端基準で表示 */
@media (max-width: 880px) {
  .cta__inner {
    background:
      linear-gradient(180deg, oklch(1 0 0 / 0.80), oklch(1 0 0 / 0.58)),
      url("img/bg-cta.jpg") right center / cover no-repeat;
  }
}
.cta__title { font-size: clamp(1.5rem, 3.4vw, 2.5rem); /* レスポンシブ大見出し・一段小さく（スケール外） */ font-weight: 900; line-height: var(--line-height-m); margin-top: var(--space-m); }
.cta__text { color: var(--text-dim); margin: var(--space-m) auto var(--space-l); max-width: 44ch; }
@media (max-width: 880px) {
  .cta__title { font-size: var(--font-size-m); } /* 折返しの孤立文字を防ぐ */
}

/* ============================================================
   footer
   ============================================================ */
.footer { padding: var(--space-xxl) var(--gutter) var(--space-xl); border-top: 1px solid var(--line-soft); background: var(--bg-2); }
.footer__inner { max-width: var(--maxw); margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-l); flex-wrap: wrap; }
.footer__brand { font-size: var(--font-size-l); }
.footer__meta { font-family: var(--font-mono); font-size: var(--font-size-xxs); letter-spacing: 0.1em; font-weight: 600; color: var(--text-faint); text-align: right; line-height: var(--line-height-xl); }

/* ============================================================
   reveal（スクロール出現・JSフック block）
   Base state = visible (safe for print / no-JS / reduced-motion).
   translateY(38px) はアニメ移動量（機能値・スケール外）。
   ============================================================ */
.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal:not(.reveal--visible) { opacity: 0; transform: translateY(38px); }
  html.js .reveal--visible { animation: revealIn .9s var(--ease) both; }
  html.js .reveal--visible[data-d="1"] { animation-delay: .08s; }
  html.js .reveal--visible[data-d="2"] { animation-delay: .16s; }
  html.js .reveal--visible[data-d="3"] { animation-delay: .24s; }
  html.js .reveal--visible[data-d="4"] { animation-delay: .32s; }
}
@keyframes revealIn {
  from { opacity: 0; transform: translateY(38px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll-bar { animation: none; }
}