/*
 * GEMCEREY 35th hero
 * 全セレクタを .gc-hero 配下（gc-hero__*）に閉じ、組み込み先のCSSと衝突しないようにしている。
 * フォント（Bodoni Moda / Bodoni Moda SC）の読み込みは組み込み先の <head> で行う（AGENTS.md 参照）。
 */

.gc-hero {
  --ink: #f6f1e7;
  /* JSが書き換える。-1〜1 に正規化したマウス／傾き位置（慣性付き） */
  --mx: 0;
  --my: 0;
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  perspective: 1200px;
  background: #07090a;
  color: var(--ink);
  font-family: "Bodoni Moda", serif;
}
.gc-hero,
.gc-hero * {
  box-sizing: border-box;
  margin: 0;
}

/* 各レイヤーは --depth に比例して動く。大きいほど手前＝よく動く */
.gc-hero__layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translate3d(calc(var(--mx) * var(--depth) * -1px), calc(var(--my) * var(--depth) * -1px), 0);
  will-change: transform;
}

/* 動画：はみ出し分を確保するため拡大し、わずかに3D回転させて奥行きを出す */
.gc-hero__layer--video { --depth: 36; }
.gc-hero__layer--video video {
  position: absolute;
  inset: -10%;
  width: 120%;
  height: 120%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  transform: rotateY(calc(var(--mx) * 3.5deg)) rotateX(calc(var(--my) * -2.6deg)) scale(1.02);
}

/* 光のにじみ：マウスの方向に光だまりが寄る */
.gc-hero__layer--glow {
  --depth: -36;
  scale: 1.2; /* パララックスで端が露出するのを隠す */
  background: radial-gradient(40% 50% at calc(50% + var(--mx) * 20%) calc(20% + var(--my) * 15%), rgba(255, 226, 170, .22), transparent 70%);
  mix-blend-mode: screen;
}

/* 可読性用の減光 */
.gc-hero__vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, .65), rgba(0, 0, 0, .3) 12%, transparent 26%), /* 上部メニューの下地 */
    radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, .35) 100%),
    radial-gradient(38% 32% at center, rgba(0, 0, 0, .5), transparent),
    radial-gradient(14% 16% at 50% 100%, rgba(0, 0, 0, .6), transparent); /* スクロール誘導の下地 */
  pointer-events: none;
}

/* 被写界深度：マウス位置だけピントが合い、離れるほどボケる */
.gc-hero__dof {
  --fx: calc(50% + var(--mx) * 50%);
  --fy: calc(50% + var(--my) * 50%);
  position: absolute;
  inset: 0;
  pointer-events: none;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  mask-image: radial-gradient(circle at var(--fx) var(--fy), transparent 12%, rgba(0, 0, 0, .6) 30%, #000 55%);
  -webkit-mask-image: radial-gradient(circle at var(--fx) var(--fy), transparent 12%, rgba(0, 0, 0, .6) 30%, #000 55%);
}

.gc-hero__layer--sparkle-far { --depth: 50; }
.gc-hero__layer--sparkle-near { --depth: 90; }
.gc-hero__sparkle {
  position: absolute;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(255, 236, 190, .8) 30%, transparent 70%);
  animation: gc-hero-twinkle var(--t) ease-in-out var(--d) infinite;
  opacity: 0;
}
@keyframes gc-hero-twinkle {
  0%, 100% { opacity: 0; transform: scale(.4); }
  50% { opacity: 1; transform: scale(1); }
}

/* テキストは固定（動かさない） */
.gc-hero__layer--content {
  transform: none;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 0 16px;
  pointer-events: auto;
}
/* 組み込み先の h1 スタイルを打ち消す */
.gc-hero__heading {
  font: inherit;
  font-weight: 400;
  color: inherit;
  letter-spacing: normal;
  text-transform: none;
}
.gc-hero__num,
.gc-hero__title {
  display: block;
}
.gc-hero__num {
  font-size: clamp(88px, 13vw, 200px);
  letter-spacing: -.01em;
  line-height: .9;
  text-shadow: 0 4px 40px rgba(0, 0, 0, .6);
}
.gc-hero__num sup { font-style: italic; font-size: .42em; vertical-align: .05em; margin-left: .04em; }
.gc-hero__title {
  font-style: italic;
  font-weight: 500;
  font-size: clamp(48px, 7vw, 108px);
  line-height: 1;
  text-shadow: 0 4px 40px rgba(0, 0, 0, .6);
}
.gc-hero__company {
  margin-top: 1.4em;
  font-size: clamp(11px, 1.1vw, 17px);
  letter-spacing: .12em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .8);
}
/* 小さい文字はスモールキャップス版。SC書体は小文字をスモールキャップスで描くので lowercase が必須 */
.gc-hero__company,
.gc-hero__scroll {
  font-family: "Bodoni Moda SC", serif;
  font-weight: 500;
  text-transform: lowercase;
}
/* 社名の後ろに細い縦線で区切って添える */
.gc-hero__est {
  margin-left: 1em;
  padding-left: 1em;
  border-left: 1px solid rgba(246, 241, 231, .5);
  letter-spacing: .12em;
}

/* スクロール誘導：縦線の上を光が流れ落ちる */
.gc-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 24px;
  translate: -50% 0;
  display: grid;
  justify-items: center;
  gap: 12px;
  font-size: 10px;
  letter-spacing: .4em;
  text-indent: .4em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .8);
  pointer-events: none;
}
.gc-hero__scroll::after {
  content: "";
  width: 1px;
  height: 56px;
  background:
    linear-gradient(to bottom, transparent, var(--ink) 50%, transparent) 0 -56px / 1px 56px no-repeat,
    rgba(246, 241, 231, .4);
  animation: gc-hero-scroll-flow 2.2s cubic-bezier(.6, 0, .4, 1) infinite;
}
@keyframes gc-hero-scroll-flow {
  to { background-position: 0 56px, 0 0; }
}