/* =========================================================
   xxxxnese — Hero (Editorial / Metaball)
   ---------------------------------------------------------
   トップページの Hero。
   構造:
     .hero-editorial               クリーム背景の帯
       └ .hero-editorial__inner    grid: 左テキスト / 右ビジュアル
           ├ .headline             eyebrow + h1 + subcopy
           └ .hero-metaballs       CSSメタボール
   メタボール表現:
     親要素に filter: blur() contrast() をかけ、
     子の真円が近づくと有機的に融合する古典的トリック。
     JS / SVG / 画像なし。
   ========================================================= */


.hero-editorial {
  /* ----- スコープ tokens ----- */
  --mk-bg:          #ffffff;
  --mk-fg:          #0a0a0a;
  --mk-fg-dim:      #3a3a38;
  --mk-dim:         #7d7d7a;
  --mk-line:        rgba(0, 0, 0, 0.10);
  --mk-line-strong: rgba(0, 0, 0, 0.22);

  background: var(--mk-bg);
  color: var(--mk-fg);
  position: relative;
  overflow: hidden;
  /* isolation で stacking context root を作り、h1 の mix-blend-mode を
     hero の中だけにスコープする（header やページ全体に漏らさない） */
  isolation: isolate;
  /* body.page-top で padding-top を 0 にしてヘッダーが overlay する。
     よって hero の top padding にヘッダー高さを足し、コンテンツが
     ヘッダー裏に潜らないようにする */
  padding: calc(64px + var(--header-height)) 0 128px;
  /* min-height を blob の高さ（80vw / 1140px max）に合わせて、
     blob 下端がクリップされないようにする */
  min-height: clamp(720px, 80vw, 1140px);
  display: flex;
  align-items: center;
}

/* =========================================================
   コンテンツ本体
   ========================================================= */
.hero-editorial__inner {
  position: relative;
  /* z-index / transform は付けない: 付けると新しい stacking context が生まれて
     h1 の mix-blend-mode が外側の blob に届かなくなる。
     document 順 (blob → inner) で inner が上に乗る */
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  /* テキストエリアをやや上に。margin は stacking context を作らないので blend に影響しない */
  margin-top: -5vh;
}

.hero-editorial__inner .headline {
  position: relative;
  /* テキストゾーンとメタボールゾーンが交わらないよう、左 ≈60% にコントロール */
  max-width: min(820px, 62vw);
}

.hero-editorial [lang="en"] {
  font-family: var(--font-display);
  font-feature-settings: "ss01" 1, "kern" 1;
}

/* eyebrow ─ 001 — Global Commerce, Redesigned */
.hero-editorial .eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--mk-dim);
  margin-bottom: 36px;
}
.hero-editorial .eyebrow .idx {
  letter-spacing: 0.12em;
  color: var(--mk-fg);
}
.hero-editorial .eyebrow .rule {
  flex: 0 0 52px;
  height: 1px;
  background: var(--mk-fg);
  opacity: 0.45;
}

/* h1 ─ ONE COMMERCE. NO BORDERS.
   背景に黒 blob が来た時に自動反転するため:
     color: #fff + mix-blend-mode: difference
     → 白bg上=黒、黒blob上=白 に切替
   Safari は isolation + overflow:hidden 下で difference が機能しないため
   .is-safari スコープで黒固定に切替（script.js で付与） */
.hero-editorial .ja-hero {
  font-weight: 500;
  font-size: clamp(52px, 7vw, 96px);
  line-height: 1.18;
  letter-spacing: -0.016em;
  text-transform: uppercase;
  color: #ffffff;
  mix-blend-mode: difference;
  text-wrap: balance;
  word-break: keep-all;
  margin-bottom: 28px;
}

.is-safari .hero-editorial .ja-hero,
.is-safari .hero-editorial .hero-brand {
  color: var(--mk-fg);
  mix-blend-mode: normal;
}

/* ブランド行（h1 の続き）— "xxxxnese Inc." 表記。
   小文字／大文字混在をそのまま見せるため text-transform は無し。
   h1 と同じ blend-mode で背景に追従反転。 */
.hero-editorial .hero-brand {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: #ffffff;
  mix-blend-mode: difference;
  margin: 0 0 24px;
}

/* サブコピー — desktop は 1 行で表示 */
.hero-editorial .hero-subcopy {
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--mk-fg-dim);
  max-width: none;
  white-space: nowrap;
}

/* =========================================================
   メタボール
   ---------------------------------------------------------
   .metaballs__stage の filter:
     blur(N) で形が滲み、contrast(M) で滲んだエッジを
     ピシッと再二値化する。これで真円同士が「滴」のように
     有機的に融合して見える。
   ========================================================= */
.hero-metaballs {
  position: absolute;
  top: 47%;
  right: -12vw;
  transform: translateY(-50%);
  width: min(1140px, 80vw);
  aspect-ratio: 1 / 1;
  /* z-index は付けない: document 順で inner が上に乗るのに任せる。
     付けると hero の stacking context 内で blob が上になり、
     h1 の mix-blend-mode が逆に効かなくなる */
  pointer-events: none;
  container-type: inline-size;
}

.metaballs__filter-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.metaballs__stage {
  position: absolute;
  inset: 0;
  filter: url(#heroGoo);
  will-change: filter;
}

/* ===== 外周軌道（中心への集結／拡散） ===== */
.orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  animation: continent-cycle 18s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

/* ===== 大陸本体（形・自転） ===== */
.blob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--size);
  height: var(--size);
  margin-top: calc(var(--size) / -2);
  margin-left: calc(var(--size) / -2);
  background: #0a0a0a;
  /* 初期形状は楕円ベース。アニメで4つの有機形状を巡回 */
  border-radius: 60% 40% 48% 52% / 42% 58% 38% 62%;
  animation:
    shape-morph var(--shape-dur, 11s) ease-in-out infinite,
    blob-spin var(--spin-dur, 22s) linear infinite;
  animation-delay: var(--shape-delay, 0s), var(--spin-delay, 0s);
}

/*
  6大陸 — 配置角・サイズ・軌道半径を不均一に。
  サイズは実大陸の面積比を緩く反映:
    o1 Asia(最大) / o2 Africa / o3 N. America / o4 S. America / o5 Europe / o6 Oceania
  --angle は厳密な60度等分を崩して大陸らしい乱雑感を出す
*/
.orbit.o1 { --angle:   6deg; --r-out: 34cqw; --delay:    0s; }
.orbit.o2 { --angle:  68deg; --r-out: 40cqw; --delay: -0.6s; }
.orbit.o3 { --angle: 142deg; --r-out: 36cqw; --delay: -1.2s; }
.orbit.o4 { --angle: 204deg; --r-out: 42cqw; --delay: -0.4s; }
.orbit.o5 { --angle: 258deg; --r-out: 38cqw; --delay: -1.4s; }
.orbit.o6 { --angle: 318deg; --r-out: 33cqw; --delay: -0.8s; }

.orbit.o1 .blob { --size: 32cqw; --shape-dur:  9s; --spin-dur: 26s; --shape-delay:   0s; --spin-delay:    0s; }
.orbit.o2 .blob { --size: 26cqw; --shape-dur: 12s; --spin-dur: 22s; --shape-delay: -3s; --spin-delay: -10s; }
.orbit.o3 .blob { --size: 22cqw; --shape-dur: 10s; --spin-dur: 19s; --shape-delay: -5s; --spin-delay:  -4s; }
.orbit.o4 .blob { --size: 18cqw; --shape-dur: 13s; --spin-dur: 24s; --shape-delay: -7s; --spin-delay: -12s; }
.orbit.o5 .blob { --size: 14cqw; --shape-dur: 11s; --spin-dur: 18s; --shape-delay: -2s; --spin-delay:  -7s; }
.orbit.o6 .blob { --size: 11cqw; --shape-dur:  8s; --spin-dur: 16s; --shape-delay: -4s; --spin-delay:  -2s; }

/*
  continent-cycle:
    0%  → 各 blob は --angle 方向、半径 --r-out の外周にいる（分離）
    35% → ゆるやかに連携し始める
    50% → 中心に収束 → metaball で one になる（scale 1.32）
    65% → 再び広がり始める
    100% → 外周に戻る。回転は +360deg かけて1周し次サイクルへ
*/
@keyframes continent-cycle {
  0% {
    transform: rotate(var(--angle))
               translateX(var(--r-out))
               scale(1);
  }
  35% {
    transform: rotate(calc(var(--angle) + 110deg))
               translateX(calc(var(--r-out) * 0.62))
               scale(1.08);
  }
  50% {
    transform: rotate(calc(var(--angle) + 180deg))
               translateX(0cqw)
               scale(1.32);
  }
  65% {
    transform: rotate(calc(var(--angle) + 250deg))
               translateX(calc(var(--r-out) * 0.62))
               scale(1.08);
  }
  100% {
    transform: rotate(calc(var(--angle) + 360deg))
               translateX(var(--r-out))
               scale(1);
  }
}

/* 有機的な border-radius モーフ（大陸の海岸線が呼吸する感じ） */
@keyframes shape-morph {
  0%   { border-radius: 64% 36% 48% 52% / 42% 58% 38% 62%; }
  25%  { border-radius: 48% 52% 60% 40% / 56% 44% 58% 42%; }
  50%  { border-radius: 38% 62% 55% 45% / 60% 40% 64% 36%; }
  75%  { border-radius: 56% 44% 42% 58% / 48% 52% 46% 54%; }
  100% { border-radius: 64% 36% 48% 52% / 42% 58% 38% 62%; }
}

/* 大陸本体の自転（border-radius と相まって有機的に揺らぐ） */
@keyframes blob-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 960px) {
  .hero-editorial { padding: calc(48px + var(--header-height)) 0 112px; }
}

@media (max-width: 900px) {
  /* モバイル/タブレットでは blob を絶対配置から解除しテキスト下へ縦並び */
  .hero-editorial {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }
  .hero-editorial__inner { order: 1; }
  /* desktop の 62vw 制約はメタボール右逃がし用。モバイルでは
     headline 横幅を制限すると "COMMERCE." が入りきらず単語の途中で
     破断したり eyebrow が3行に折れたりするので解除し inner 全幅を使う */
  .hero-editorial__inner .headline {
    max-width: none;
  }
  .hero-metaballs {
    order: 2;
    position: relative;
    top: auto;
    right: auto;
    /* 描画サイズを 10% 拡大（レイアウトは変わらず）、中央スケール */
    transform: scale(1.1);
    transform-origin: center;
    width: 100%;
    max-width: 420px;
    margin: 56px auto 0;
  }
}

@media (max-width: 640px) {
  .hero-editorial { padding: calc(40px + var(--header-height)) 0 88px; }
  /* デスクトップ用の負 margin-top をモバイルでは解除し、ヘッダーとの余白を確保 */
  .hero-editorial__inner { margin-top: 0; }
  .hero-editorial .eyebrow { margin-bottom: 48px; }
  /*
    モバイルでは h1 を縮めずに大きく保つが、
    「One / commerce. / No borders.」の 3 行レイアウトを崩さない
    上限を 60px に。letter-spacing を -0.02em に詰めて
    "No borders." が 1 行に収まる確率を上げる
  */
  .hero-editorial .ja-hero {
    /* uppercase で幅が増えるので font をやや抑え、letter-spacing をタイトに。
       「ONE / COMMERCE. / NO BORDERS.」の 3 行レイアウトを維持 */
    font-size: clamp(36px, 11.2vw, 48px);
    line-height: 1.16;
    letter-spacing: -0.035em;
    margin-bottom: 36px;
  }
  /* モバイルは subcopy を 1 行縛りから解除し、行末がガタつかないよう balance */
  .hero-editorial .hero-subcopy {
    white-space: normal;
    max-width: 40ch;
    text-wrap: balance;
  }
  .hero-metaballs {
    max-width: 360px;
    /* transform: scale(1.1) は 900 breakpoint で適用済み */
  }
}

/* =========================================================
   Reduced motion
   base.css のグローバル指定で animation-duration が ~0 になると
   ブロブが初期位置で固定される。これは静止画として成立するため
   そのままで OK だが、明示的に animation を無効化しておく。
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .orbit,
  .blob { animation: none; }
}