/**
 * Section: メニューページリード（世界観継続）
 * Page:    メニューページ (order: 1)
 */

/* ============================================================
  :root — Section-specific design tokens (men-s01)
   ============================================================ */
:root {
  /* --- 背景画像・オーバーレイ --- */
  --men-s01-overlay-color:        #FDF2F8;
  --men-s01-overlay-opacity:      0.55;

  /* --- Colors --- */
  --men-s01-color-bg:             #FDF2F8;
  --men-s01-color-text-primary:   #831843;
  /* --men-s01-color-text-secondary: #64748B; */
  --men-s01-color-text-secondary: #2c2c2c;
  --men-s01-color-accent-line:    #EC4899;
  --men-s01-color-focus:          #8B5CF6;

  /* --- Typography: key_message heading --- */
  --men-s01-font-family-display:  'Playfair Display', Georgia, serif;
  --men-s01-font-family-body:     'Inter', -apple-system, BlinkMacSystemFont,
                                  'Segoe UI', sans-serif;
  --men-s01-font-size-heading:    clamp(2.5rem, 5vw, 4rem);
  --men-s01-font-weight-heading:  600;
  --men-s01-line-height-heading:  1.25;

  /* --- Typography: category label --- */
  --men-s01-font-size-label:      1rem;
  --men-s01-font-weight-label:    400;
  --men-s01-letter-spacing-label-desktop: 0.25em;
  --men-s01-letter-spacing-label-mobile:  0.2em;

  /* --- Typography: subheadline & body copy --- */
  --men-s01-font-size-body:       1rem;
  --men-s01-font-weight-body:     300;
  --men-s01-line-height-body:     1.75;

  /* --- Spacing --- */
  --men-s01-padding-top-mobile:    96px;
  --men-s01-padding-top-desktop:   96px;
  --men-s01-padding-bottom-mobile: 96px;
  --men-s01-padding-bottom-desktop:128px;
  --men-s01-gap-heading-to-sub:    32px;
  --men-s01-gap-sub-to-body:       16px;
  --men-s01-margin-inline-mobile:  24px;
  --men-s01-margin-inline-desktop: 64px;

  /* --- Grid --- */
  --men-s01-max-width:       1200px;
  --men-s01-label-col-width: 96px;

  /* --- Supplement block backdrop --- */
  --men-s01-supplement-bg:     rgba(253, 242, 248, 0.45);
  --men-s01-supplement-blur:   12px;
  --men-s01-supplement-radius: 8px;
  --men-s01-supplement-padding: 24px;

  /* --- Animation: MI-1 (key_message) --- */
  --men-s01-animate-duration-primary:  800ms;
  --men-s01-animate-easing-primary:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --men-s01-animate-translate-y:       24px;
  --men-s01-animate-letter-spacing-start: 0.04em;

  /* --- Animation: MI-2 (supplement) --- */
  --men-s01-animate-duration-secondary: 600ms;
  --men-s01-animate-delay-secondary:    200ms;
  --men-s01-animate-easing-secondary:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* MI-2 の translateY 開始値（MI-1 と同じ距離感で統一） */
  --men-s01-animate-translate-y-secondary: 24px;

  /* --- Animation: category label --- */
  --men-s01-label-opacity-initial:  0.4;
  --men-s01-label-duration:         600ms;
  --men-s01-label-easing:           cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ============================================================
  Section root
   ============================================================ */
.men-s01 {
  position:       relative;
  overflow:       hidden;
  isolation:      isolate;
  /* background-color: var(--men-s01-color-bg); */
  padding-top:    var(--men-s01-padding-top-mobile);
  padding-bottom: var(--men-s01-padding-bottom-mobile);
}

/* ============================================================
  背景画像ブロック — 絶対配置・セクション全体を覆う
   ============================================================ */
.men-s01__bg {
  position: absolute;
  inset:    0;
  z-index:  0;
}

/* ============================================================
  背景画像 <img> — object-fit: cover でフルスクリーン表示
   ============================================================ */
.men-s01__bg-image {
  display:        block;
  width:          100%;
  height:         100%;
  object-fit:     cover;
  object-position: center;
}

/* ============================================================
  Inner wrapper — 12-column grid container
  背景より前面に配置（z-index: 2）
  ============================================================ */
.men-s01__inner {
  position:               relative;
  z-index:                2;
  display:                grid;
  grid-template-columns:  1fr;
  row-gap:                16px;
  max-width:  var(--men-s01-max-width);
  margin-inline: auto;
  padding-inline: var(--men-s01-margin-inline-mobile);
}

/* ============================================================
  Category label — col 1–2
  Mobile: horizontal writing / Desktop: vertical writing
   ============================================================ */
.men-s01__category-label {
  /* Mobile-first: horizontal writing */
  writing-mode:      horizontal-tb;
  font-family:       var(--men-s01-font-family-body);
  font-weight:       300;
  font-size:         var(--men-s01-font-size-label);
  line-height:       1.0;
  letter-spacing:    var(--men-s01-letter-spacing-label-mobile);
  color:             var(--color--text--3);
  text-transform:    uppercase;
  /* Align label to the top of the content column */
  align-self:        start;
  padding-top:       0.25em;
  /* font-display: swap is handled in @font-face / Google Fonts URL */
}

/* ============================================================
  Main typography zone — col 3–9 (approx 560px, max 680px)
   ============================================================ */
.men-s01__content {
  /* Cap the text read-width at ~680px (col 3–9 intent) */
  max-width: fit-content;
}

/* ============================================================
  Key-message block (heading + accent line wrapper)
   ============================================================ */
.men-s01__key-message-block {
  display:        flex;
  flex-direction: row;
  align-items:    flex-start;
  /* gap:            var(--men-s01-accent-line-gap); */
}

/* ============================================================
  Heading (h2)
   ============================================================ */
.men-s01__heading {
  font-family:    var(--men-s01-font-family-display);
  font-weight:    var(--men-s01-font-weight-heading);
  font-size:      var(--men-s01-font-size-heading);
  line-height:    var(--men-s01-line-height-heading);
  letter-spacing: var(--men-s01-animate-letter-spacing-start);
  color:          var(--color--text--3);
  text-align:     left;
  /* letter-spacing transition: "quietly landing" tactile quality (interaction_hint) */
  transition:
    letter-spacing
    var(--men-s01-animate-duration-primary)
    var(--men-s01-animate-easing-primary);
}

/* Heading: letter-spacing collapses to normal on visible state */
.men-s01-js-animate-visible .men-s01__heading {
  letter-spacing: normal;
}

  .men-s01__pc-br {
    display: none;
  }

/* ============================================================
  Supplement block (subheadline + body copy)
   ============================================================ */
.men-s01__supplement-block {
  margin-top: var(--men-s01-gap-heading-to-sub);

  /* 白系ブラー背景 */
  background-color: var(--men-s01-supplement-bg);
  backdrop-filter:  blur(var(--men-s01-supplement-blur));
  -webkit-backdrop-filter: blur(var(--men-s01-supplement-blur)); /* Safari対応 */
  border-radius:    var(--men-s01-supplement-radius);
  padding:          var(--men-s01-supplement-padding);
}

.men-s01__subheadline {
  font-family:    var(--men-s01-font-family-body);
  font-weight:    var(--men-s01-font-weight-body);
  font-size:      var(--men-s01-font-size-body);
  line-height:    var(--men-s01-line-height-body);
  letter-spacing: normal;
  color:          var(--men-s01-color-text-secondary);
  text-align:     left;

}

.men-s01__body-copy {
  font-family:    var(--men-s01-font-family-body);
  font-weight:    var(--men-s01-font-weight-body);
  font-size:      var(--men-s01-font-size-body);
  line-height:    var(--men-s01-line-height-body);
  letter-spacing: normal;
  color:          var(--men-s01-color-text-secondary);
  text-align:     left;
  margin-top:     var(--men-s01-gap-sub-to-body);
}

/* ============================================================
  Focus indicator — applied to any incidental interactive
  elements (none expected in this section per spec cta: none)
   ============================================================ */
.men-s01 a:focus-visible,
.men-s01 button:focus-visible {
  outline:        2px solid var(--men-s01-color-focus);
  outline-offset: 3px;
}

/* ============================================================
  ANIMATION — Initial states (CSS-set, JS adds visible class)
   ============================================================ */

/**
 * MI-1: key_message block
 * Initial: translateY(24px) + opacity 0 + letter-spacing expanded
 * Visible: translateY(0)    + opacity 1 + letter-spacing normal
 */
.men-s01-js-animate-hidden {
  opacity:   0;
  transform: translateY(var(--men-s01-animate-translate-y));

}

.men-s01-js-animate-visible {
  opacity:   1;
  /* transition:
    opacity
      var(--men-s01-animate-duration-primary)
      var(--men-s01-animate-easing-primary),
    transform
      var(--men-s01-animate-duration-primary)
      var(--men-s01-animate-easing-primary); */
}

/**
 * MI-2: supplement block (subheadline + body copy)
 * Initial: opacity 0 only — no translateY (secondary hierarchy)
 * Visible: opacity 1
 */
.men-s01-js-supplement-hidden {
  opacity:   0;
  transform: translateY(var(--men-s01-animate-translate-y-secondary));
}

.men-s01-js-supplement-visible {
  opacity: 1;
  transition:
    opacity
      var(--men-s01-animate-duration-secondary)
      var(--men-s01-animate-easing-secondary),
    transform
      var(--men-s01-animate-duration-secondary)
      var(--men-s01-animate-easing-secondary);
}

/**
 * Category label: faint initial state (interaction_hint)
 * opacity 0.4 — visible but understated before scroll trigger
 */
.men-s01-js-label-hidden {
  opacity: var(--men-s01-label-opacity-initial);
}

.men-s01-js-label-visible {
  opacity: 1;
}

/* ============================================================
  Responsive — Desktop (width >= 375px breakpoint entry point)
  Mobile-first: styles above are mobile baseline
   ============================================================ */

/* Tablet and above: switch label to vertical writing */
@media (width >= 768px) {
  .men-s01__inner {
    /* タブレット以上: Menuラベル列 */
    grid-template-columns: var(--men-s01-label-col-width) 1fr;
    row-gap: 0;
  }

  .men-s01__category-label {
    font-family:     var(--men-s01-font-family-display);
    font-weight:     var(--men-s01-font-weight-label);
    letter-spacing:  var(--men-s01-letter-spacing-label-desktop);
    /* Center the label text vertically within the grid row */
    align-self:      start;
    padding-top:     0;
  }

  /* タブレット以上: PC用改行タグを表示 */
  .men-s01__pc-br {
    display: block;
  }

}

/* Desktop: larger spacing and page margins */
@media (width >= 1024px) {
  .men-s01 {
    padding-top:    var(--men-s01-padding-top-desktop);
    padding-bottom: var(--men-s01-padding-bottom-desktop);
  }

  .men-s01__inner {
    padding-inline: var(--men-s01-margin-inline-desktop);
  }
}

/* ============================================================
  prefers-reduced-motion: reduce
  All animated elements fully visible with no transitions
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  /* Scope to this section only — do not override global reset */
  .men-s01 *,
  .men-s01 *::before,
  .men-s01 *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:       0.01ms !important;
  }

  /* Force all animated elements to fully visible state */
  .men-s01-js-animate-hidden,
  .men-s01-js-label-hidden {
    opacity:   1;
    transform: none;
  }

  .men-s01__heading {
    letter-spacing: normal;
  }

  .men-s01-js-supplement-hidden {
    transform: none;
  }
}