/*
  Enqueue in functions.php:
  wp_enqueue_style(
    'top-style',
    get_template_directory_uri() . '/assets/css/top.css',
    array(),
    '1.0.0'
  );
*/

/* ============================================================
   Section-scoped CSS Custom Properties (top-s04)
   ============================================================ */
:root {
  /* --- Colors --- */
  --top-s04-color-bg:              #3A3332;
  --top-s04-color-primary:         #EC4899;
  --top-s04-color-secondary:       #EDE0DC;
  --top-s04-color-accent:          #8B5CF6;
  --top-s04-color-text-primary:    #831843;
  --top-s04-color-text-secondary:  #F9A8D4;
  --top-s04-color-overlay-bg:      rgba(253, 242, 248, 0.40);

  /* --- Typography: Typewriter title (Space / 雰囲気) --- */
  --top-s04-typewriter-en-size:    clamp(2.5rem, 5vw, 4rem);
  --top-s04-typewriter-ja-size:    clamp(1.75rem, 3.5vw, 2.75rem);
  --top-s04-typewriter-text-gap:   32px;

  /* --- Typography: Japanese main heading --- */
  --top-s04-heading-size:          clamp(2.25rem, 4vw, 3.25rem);
  --top-s04-heading-lh:            1.2;
  --top-s04-heading-ls:            0.04em;
  --top-s04-heading-weight:        600;

  /* --- Typography: Cell A overlay quote --- */
  --top-s04-overlay-size:          clamp(0.813rem, 0.725rem + 0.44vw, 1.25rem);
  --top-s04-overlay-lh:            1.5;
  --top-s04-overlay-ls:            0.06em;

  /* --- Typography: Copy band --- */
  --top-s04-copy-size:             clamp(0.875rem, 1.2vw, 1rem);
  --top-s04-copy-lh:               1.8;
  --top-s04-copy-ls:               0.08em;

  /* --- Typography: Cell B caption --- */
  --top-s04-caption-size:          clamp(0.6875rem, 0.9vw, 0.75rem);
  --top-s04-caption-lh:            1.4;
  --top-s04-caption-ls:            0.12em;
  --top-s04-caption-ls-initial:    0.2em;

  /* --- Spacing --- */
  --top-s04-pt-mobile:             64px;
  --top-s04-pb-mobile:             80px;
  --top-s04-pt-desktop:            96px;
  --top-s04-pb-desktop:            128px;
  --top-s04-typewriter-mb:         12px;
  --top-s04-heading-grid-gap:      32px;
  --top-s04-gap-col:               16px;
  --top-s04-gap-row:               8px;
  --top-s04-copy-band-py:          32px;
  --top-s04-copy-rule-text-gap:    16px;
  --top-s04-copy-rule-h:           1px;
  --top-s04-copy-rule-w:           40px;
  --top-s04-overlay-pill-py:       10px;
  --top-s04-overlay-pill-px:       24px;
  --top-s04-cell-a-top-offset:     0px;

  /* --- Grid --- */
  --top-s04-max-width:             1200px;
  --top-s04-px-desktop:            64px;
  --top-s04-px-mobile:             24px;
  --top-s04-cell-a-h-desktop:      520px;
  --top-s04-cell-bc-h-desktop:     256px;
  --top-s04-cell-d-h-desktop:      120px;
  --top-s04-cell-a-h-mobile:       260px;
  --top-s04-cell-bc-h-mobile:      160px;
  --top-s04-cell-radius:           4px;
  --top-s04-shadow-a:              0 8px 32px rgba(131, 24, 67, 0.08);
  --top-s04-shadow-bc:             0 4px 16px rgba(131, 24, 67, 0.06);

  /* --- Animation --- */
  --top-s04-ease-standard:         cubic-bezier(0.33, 1, 0.68, 1);
  --top-s04-ease-spring:           cubic-bezier(0.16, 1, 0.3, 1);
  --top-s04-dur-mi1-p1:       900ms;   /* 700ms  → 900ms  （タイプライター文字） */
  --top-s04-dur-mi1-p2:      1000ms;   /* 800ms  → 1000ms （見出しフェードイン） */
  --top-s04-dur-mi2:         1200ms;   /* 900ms  → 1200ms （オーバーレイ） */
  --top-s04-dur-mi3-cell:    1400ms;   /* 1000ms → 1400ms （画像セルのフェードイン） */
  --top-s04-dur-mi3-caption:  700ms;   /* 500ms  → 700ms  （キャプション） */
  --top-s04-dur-mi4-p1:       700ms;   /* 500ms  → 700ms  （ルール線） */
  --top-s04-dur-mi4-p2:       900ms;   /* 700ms  → 900ms  （コピーテキスト） */
}

/* ============================================================
   Section base
   ============================================================ */
.top-s04 {
  background-color: var(--top-s04-color-bg);
  padding-block-start: var(--top-s04-pt-mobile);
  padding-block-end:   var(--top-s04-pb-mobile);
  overflow: hidden;
}

.top-s04__inner {
  max-inline-size: var(--top-s04-max-width);
  margin-inline: auto;
  padding-inline: var(--top-s04-px-mobile);
}

/* ============================================================
   Typewriter title block — "Space 雰囲気"
   ============================================================ */
.top-s04__typewriter-block {
  margin-block-end: var(--top-s04-typewriter-mb);
}

.top-s04__typewriter-heading {
  position: relative;
  display: block;
  align-items: baseline;
  gap: 0.1em;
  line-height: 1.1;
}

/* "Space" — Playfair Display italic ピンク */
.top-s04__title-en {
  display: block;
  align-items: baseline;
  font-family: var(--font--display);
  font-size: var(--top-s04-typewriter-en-size);
  font-weight: 400;
  font-style: italic;
  color: var(--top-s04-color-secondary);
}


/* "雰囲気" — serif 系 ディープローズ */
.top-s04__title-ja {
  display: block;
  align-items: baseline;
  font-family: var(--font--heading);
  font-size: var(--top-s04-typewriter-ja-size);
  font-weight: 700;
  font-style: normal;
  color: var(--top-s04-color-text-primary);

  line-height: 1;
  /* "Space" の文字幅の約40〜50%分だけ右にずらす */
  margin-inline-start: clamp(4rem, 3.2rem + 4vw, 8rem);
  /* Space の下端と雰囲気の上端が少し被るよう上に引き上げる */
  margin-block-start: -0.5em;
  margin-block-end: var(--top-s04-typewriter-text-gap);

}

/* 各文字 — 初期は非表示 */
.top-s04__title-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity  0.3s var(--top-s04-ease-standard),
    transform 0.3s var(--top-s04-ease-standard);
}

/* JS が付与するクラスで文字を表示 */
.top-s04__title-char.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   Heading block（既存: サブタイトル＋和文見出し）
   ============================================================ */
.top-s04__heading-block {
  margin-block-end: var(--top-s04-heading-grid-gap);

}

/* h2 → h3 に変更したため top-s04__heading はサイズ指定を維持 */
.top-s04__heading {
  font-family: var(--font--heading);
  font-size: var(--top-s04-heading-size);
  font-weight: var(--top-s04-heading-weight);
  font-style: normal;
  line-height: var(--top-s04-heading-lh);
  letter-spacing: var(--top-s04-heading-ls);
  color: var(--top-s04-color-secondary);
  text-align: left;
  transition:
    opacity   var(--top-s04-dur-mi1-p2) var(--top-s04-ease-standard),
    transform var(--top-s04-dur-mi1-p2) var(--top-s04-ease-standard);
}

/* ============================================================
   Bento Grid — mobile (default: 2列)
   ============================================================ */
.top-s04__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--top-s04-gap-col);
}

.top-s04__grid.js-grid-hidden {
  /* opacity と transform を初期状態として保持しない */
  /* → 各セルの js-animate-hidden に任せるため無効化 */
  opacity: 1;
  transform: none;
  transition: none;
}

/* セルA：2列スパン */
.top-s04__cell--a {
  grid-column: 1 / 3;
  position: relative;
  block-size: var(--top-s04-cell-a-h-mobile);
  /* border-radius: var(--top-s04-cell-radius); */
  overflow: hidden;
  box-shadow: var(--top-s04-shadow-a);
  margin-block-start: -16px;
  transition:
    opacity   var(--top-s04-dur-mi3-cell) var(--top-s04-ease-standard),
    transform var(--top-s04-dur-mi3-cell) var(--top-s04-ease-standard);
}

/* セルB・C */
.top-s04__cell--b,
.top-s04__cell--c {
  position: relative;
  opacity: 1;
  block-size: var(--top-s04-cell-bc-h-mobile);
  /* border-radius: var(--top-s04-cell-radius); */
  overflow: hidden;
  box-shadow: var(--top-s04-shadow-bc);
  transition:
    opacity   var(--top-s04-dur-mi3-cell) var(--top-s04-ease-standard),
    transform var(--top-s04-dur-mi3-cell) var(--top-s04-ease-standard);
}

/* セルD：2列スパン */
.top-s04__cell--d {
  grid-column: 1 / 3;
}

/* ============================================================
   Cell images
   ============================================================ */
.top-s04__cell picture,
.top-s04__cell img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}

.top-s04__cell--b img {
  object-position: center 75%;
}

/* ============================================================
   Cell A — Frosted glass overlay
   ============================================================ */
.top-s04__overlay {
  position: absolute;
  width: 100%;
  text-align: center;
  inset-block-end: 20px;
  /* 水平中央揃え */
  inset-inline-start: 50%;
  transform: translateX(-50%);
  padding-block: var(--top-s04-overlay-pill-py);
  padding-inline: var(--top-s04-overlay-pill-px);
  background-color: transparent;
  overflow: visible;
  isolation: isolate;
  white-space: nowrap;
  /* -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px); */
  transition:
    opacity   var(--top-s04-dur-mi2) var(--top-s04-ease-spring),
    transform var(--top-s04-dur-mi2) var(--top-s04-ease-spring);
}
/* ブラー背景層 — テキストとは独立した疑似要素で描画 */
.top-s04__overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;   /* 親と同じ 999px を継承 */
  background-color: var(--top-s04-color-overlay-bg);  /* 半透明ピンクホワイト */
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  z-index: -1;              /* テキストの後ろに配置 */

  transition:
    -webkit-backdrop-filter var(--top-s04-dur-mi2) var(--top-s04-ease-spring),
    backdrop-filter         var(--top-s04-dur-mi2) var(--top-s04-ease-spring),
    opacity                 var(--top-s04-dur-mi2) var(--top-s04-ease-spring);
}

/* 初期状態（JS が除去するまで非表示） */
.top-s04__overlay.js-animate-hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(20px);
}
.top-s04__overlay.js-animate-hidden::before {
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  opacity: 0;
}

.top-s04__overlay-text {
  position: relative;
  z-index: 1;
  font-family: var(--font--display);
  font-size: var(--top-s04-overlay-size);
  font-weight: 400;
  font-style: italic;
  line-height: var(--top-s04-overlay-lh);
  letter-spacing: var(--top-s04-overlay-ls);
  color: var(--top-s04-color-text-primary);
  white-space: nowrap;
}

/* ============================================================
   Cell B — caption
   ============================================================ */
.top-s04__cell-caption {
  position: absolute;
  inset-block-end: 12px;
  inset-inline-end: 12px;
}

.top-s04__cell-caption-text {
  font-family: var(--font--body);
  font-size: var(--top-s04-caption-size);
  font-weight: 300;
  line-height: var(--top-s04-caption-lh);
  letter-spacing: var(--top-s04-caption-ls);
  color: var(--top-s04-color-secondary);
  transition:
    opacity        var(--top-s04-dur-mi3-caption) var(--top-s04-ease-standard),
    letter-spacing var(--top-s04-dur-mi3-caption) var(--top-s04-ease-standard);
}

.top-s04__cell-caption.js-animate-hidden .top-s04__cell-caption-text {
  letter-spacing: var(--top-s04-caption-ls-initial);
}

/* ============================================================
   Cell D — Full-width copy band
   ============================================================ */
.top-s04__copy-band {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--top-s04-copy-rule-text-gap);
  padding-block: var(--top-s04-copy-band-py);
}

.top-s04__copy-text {
  font-family: var(--font--body);
  font-size: var(--top-s04-copy-size);
  font-weight: 300;
  line-height: 1.8;
  letter-spacing: var(--top-s04-copy-ls);
  color: var(--top-s04-color-secondary);
  text-align: center;
  transition:
    opacity   var(--top-s04-dur-mi4-p2) var(--top-s04-ease-standard),
    transform var(--top-s04-dur-mi4-p2) var(--top-s04-ease-standard);
}

.top-s04__copy-rule {
  display: inline-block;
  block-size: var(--top-s04-copy-rule-h);
  inline-size: var(--top-s04-copy-rule-w);
  background-color: var(--top-s04-color-secondary);
  transition: width var(--top-s04-dur-mi4-p1) var(--top-s04-ease-standard);
}

.top-s04__copy-rule--left  { transform-origin: left center; }
.top-s04__copy-rule--right { transform-origin: right center; }

/* ============================================================
   js-animate-hidden — アニメーション初期状態
   ============================================================ */
.top-s04__heading-block.js-animate-hidden {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity   0.6s var(--top-s04-ease-standard),
    transform 0.6s var(--top-s04-ease-standard);
}

.top-s04__heading.js-animate-hidden {
  opacity: 0;
  transform: translateY(16px);
}

.top-s04__cell--a.js-animate-hidden {
  opacity: 0;
  transform: translateY(8px);
}

.top-s04__cell--b.js-animate-hidden {
  opacity: 0;
  transform: translateY(24px);
}

.top-s04__cell--c.js-animate-hidden {
  opacity: 0;
  transform: translateY(24px);
}

.top-s04__cell-caption.js-animate-hidden {
  opacity: 0;
}

.top-s04__copy-text.js-animate-hidden {
  opacity: 0;
  transform: translateY(6px);
}

.top-s04__copy-rule.js-animate-hidden {
  inline-size: 0;
}

/* ============================================================
   Desktop layout (>= 768px)
   ============================================================ */
@media (width >= 768px) {

  .top-s04 {
    padding-block-start: var(--top-s04-pt-desktop);
    padding-block-end:   var(--top-s04-pb-desktop);
  }

  .top-s04__grid {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows:
      var(--top-s04-cell-bc-h-desktop)
      var(--top-s04-cell-bc-h-desktop)
      var(--top-s04-cell-d-h-desktop);
    column-gap: var(--top-s04-gap-col);
    row-gap: var(--top-s04-gap-row);
  }

  .top-s04__cell--a {
    grid-column: 1 / 8;
    grid-row: 1 / 3;
    block-size: auto;
    margin-block-start: var(--top-s04-cell-a-top-offset);
  }

  .top-s04__cell--b {
    grid-column: 8 / 13;
    grid-row: 1;
    block-size: auto;
  }

  .top-s04__cell--b img {
    object-position: center 75%;
  }

  .top-s04__cell--c {
    grid-column: 8 / 13;
    grid-row: 2;
    block-size: auto;
  }

  .top-s04__cell--d {
    grid-column: 1 / 13;
    grid-row: 3;
    display: flex;
    align-items: center;
    block-size: var(--top-s04-cell-d-h-desktop);
  }

  .top-s04__copy-band {
    inline-size: 100%;
  }
}

/* ============================================================
   Focus visible
   ============================================================ */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--top-s04-color-accent);
  outline-offset: 3px;
}

/* ============================================================
   prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .top-s04__title-char {
    opacity: 1 !important;
    transform: none !important;
  }

  .top-s04__grid.js-grid-hidden,
  .top-s04__heading-block.js-animate-hidden {
    opacity: 1 !important;
    transform: none !important;
  }

  .js-animate-hidden {
    opacity: 1 !important;
    transform: none !important;
    letter-spacing: inherit !important;
    inline-size: var(--top-s04-copy-rule-w) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    backdrop-filter: blur(6px) !important;
  }
}