/* v2-serif-amber — ヒーローの構図（Signature Idea）
   出所: P003 清水アンサナ合同事務所。構図・見出し寸法・筆書きの現れ方は Codex の決定。

   base.css の後、case.css の前に読み込む。
   **このファイルはバリエーション共通。案件ごとに編集しない。**
   案件で変えるのは case.css の :root トークンだけ。

   考え方: 不透明な地の上に、筆で一筆ずつなぞるようにして写真を現す。
   写真を全面に敷かない。見出しは中央、写真は見出しの周囲に現れる。

   P003の実装から、検討過程で無効化された指定（.hero-photo-slot / #concept /
   118pxの帯）を取り除いてある。挙動は同じ。 */

body{background:var(--page)}
.site-header{background:var(--page-97)}
.scroll-hint{background:var(--page-90)}

.hero{min-height:680px;height:min(820px,84vh);display:flex;align-items:center;justify-content:center;text-align:center;background:var(--page);color:var(--ink)}
.hero:before,.hero:after{display:none}

/* 写真を一筆ずつなぞって現す。描き終えたSVGを残し、別レイヤーへ切り替えない。
   マスクの4本のストロークは TOP_TEMPLATE.html にインラインで置いてある（SVG mask）。
   外部の .svg マスクファイルは使わない。 */
/* ヒーローの写真そのものには filter を掛けない（生成原本の色を保つ）。
   明るさ調整は下の帯だけに掛ける。 */
.hero-photo-reveal{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}
.brush-stroke{stroke-dasharray:1;stroke-dashoffset:1;animation:brush-trace 1.7s cubic-bezier(.6,.02,.22,1) forwards}
.brush-stroke.stroke-2{animation-delay:.16s}
.brush-stroke.stroke-3{animation-delay:.34s}
.brush-stroke.stroke-4{animation-delay:.54s}
@keyframes brush-trace{to{stroke-dashoffset:0}}

.hero-copy{position:relative;z-index:2;width:100%;max-width:1180px;padding:90px 24px 100px;margin:auto}
.hero h1{font:600 clamp(62px,7.6vw,112px)/1.32 var(--serif);letter-spacing:.08em;margin:0 0 48px;color:var(--ink)}
.hero h1 span{white-space:nowrap}
.hero .button{background:var(--ink);color:#fff;margin:auto;min-width:220px}
.hero .button:hover{background:var(--ink-hover);color:#fff}
.hero .image-note{z-index:3;right:22px;bottom:18px;box-shadow:none;background:var(--page-90);color:var(--ink)}

/* 文字は小さな移動量と時間差だけで静かに立ち上げる。 */
.hero-copy>*{opacity:0;transform:translateY(8px);animation:hero-copy-in .72s cubic-bezier(.2,.7,.2,1) forwards}
.hero-copy h1{animation-delay:.34s}
.hero-copy .button{animation-delay:.62s}
@keyframes hero-copy-in{to{opacity:1;transform:translateY(0)}}

/* セクションの境界。ヒーローと同じ写真を、28pxの直線的な帯として使う。
   本文に重ねない。区切りであって絵ではない。 */
.hero-seam{position:relative;height:28px;overflow:hidden;background:var(--photo-under) var(--hero-l) center center/cover fixed no-repeat;filter:var(--photo-filter)}

@media(max-width:850px){
  .hero{height:75vh;min-height:620px}
  .hero-copy{padding:100px 24px}
  .hero h1{font-size:clamp(58px,9vw,80px)}
  .hero-seam{background-image:var(--hero-m)}
  .scroll-hint{display:none}
}
@media(max-width:600px){
  .hero{height:calc(100svh - 110px);min-height:610px;max-height:760px}
  .hero-copy{padding:80px 20px}
  .hero h1{font-size:clamp(46px,12vw,60px);line-height:1.42;margin:0 0 40px}
  .hero-seam{height:20px;background-image:var(--hero-s)}
  .hero .image-note{left:12px;right:auto;bottom:10px;font-size:10px;max-width:calc(100% - 24px)}
}
@media(prefers-reduced-motion:reduce){
  .brush-stroke{animation:none;stroke-dashoffset:0}
  .hero-copy>*{opacity:1;transform:none;animation:none}
}