/* ════════════════════════════════════════════════════════════════
   story.css — clean responsive scroll-story (hero / scatter / platform)
   Single source of truth: --card drives hero-landing == every card == 仮面-small.
   Layout = one CSS grid per scatter → bottom-row level + Mampei baseline are
   pure grid invariants (no JS alignment). Linked AFTER scale-images-mobile.css.
   ════════════════════════════════════════════════════════════════ */
:root{
  --card: clamp(110px, 9.236vw, 168px);   /* 133/1440 = 9.236vw */
  /* row-gap は画面高さ連動。grid総高 = 4*card + 3*gap が pin(150svh)に収まり、
     かつ8011比率(@900h で gap273)を保つ。gap = (150svh - 4*card)/3 を上限88..400で。*/
  --row-gap: clamp(40px, calc((150svh - 4 * var(--card)) / 3), 420px);
}

/* ═══ SCATTER (section 2) — 連続フロー(8011と同じ非pin) ═══
   pin しない。グリッドはページと一緒に流れ(=inner列 1.0x)、JS が外側列に
   追加上昇を与えて 1.53x にする。途中で止まらない=ふわふわ流れ続ける。 */
[data-section="scale-images"]{ position:relative; background:#fff; overflow:clip; height:150vh; }  /* 8011と同一=1350px@900h */
.scatter-pin{
  position:relative; height:100%;
  display:flex; align-items:center; justify-content:center;
}
.scatter-grid{
  display:grid;
  /* card / gutter alternation. gutter fr ratio 1:6:6:1 reproduces the original
     column x-positions (A≈60, B≈240, center≈653, C≈1067, D≈1247 @1440). */
  grid-template-columns:
    var(--card) 1fr
    var(--card) 3.38fr
    var(--card) 3.38fr
    var(--card) 1fr
    var(--card);
  grid-template-rows: repeat(4, var(--card));
  row-gap: var(--row-gap);
  align-items: end;                         /* bottom-align each row → bottom row level */
  width: min(160rem, calc(100% - 4.8rem));   /* 4.8rem = 2.4rem(=24px) margin each side, 8011一致 */
  margin-inline: auto;
  position: relative;
}
.sc-card{
  width:var(--card); height:var(--card);
  background:var(--color-cream,#e8e6e3);
  overflow:clip; position:relative; border-radius:0;
  opacity:0; transform:translateY(36px);
  will-change:opacity, transform;
}
.sc-card > *, .sc-media{ border-radius:0; }
.sc-media{ width:100%; height:100%; object-fit:cover; display:block; }
.sc-card--mampei{ z-index:2; }

/* s09 = optional card: hidden on desktop (matches original md:opacity-0), shown on mobile */
@media (min-width:769px){ .sc-card--optional{ opacity:0 !important; visibility:hidden; } }

/* center concept message — above cards, soft white halo for legibility */
.scatter-message{
  grid-column: 4 / 7;            /* central empty region (gutter+center+gutter) */
  grid-row: 1 / 5;
  align-self:center; justify-self:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.8rem; text-align:center; max-width:min(55.8rem, 86vw);
  pointer-events:none; position:relative; z-index:6;
  opacity:0; transform:translateY(-30px); will-change:opacity, transform;
}
.scatter-message__halo{
  position:absolute; left:50%; top:50%; width:60rem; max-width:90vw; aspect-ratio:1;
  transform:translate(-50%,-50%); background:#fff; filter:blur(40px); border-radius:9999px; z-index:-1;
}
.scatter-message p{ max-width:55.8rem; }
.scatter-origin{ line-height:1.9; font-size:1.6rem; }          /* migrated from mt-v203 */
@media (min-width:768px){ .scatter-origin{ font-size:2.4rem; } }

/* ═══ PLATFORM 仮面 photo (section 3) ═══ */
[data-story-scale1]{ border-radius:0 !important; will-change:transform; }
[data-story-scale2]{ will-change:transform; }

/* ═══ hero subtext sizing (migrated from [data-vid="mt-v92"] p) ═══ */
@media (min-width:768px){ [data-story-hero-sub] p{ font-size:2.88rem !important; } }
@media (max-width:768px){ [data-story-hero-sub] p{ font-size:1.9rem !important; } }

/* ═══ MOBILE (≤768): static centered 2-col stack; no pin, no parallax ═══ */
@media (max-width:768px){
  :root{ --card: clamp(120px, 40vw, 200px); }
  [data-section="scale-images"]{ min-height:auto; }
  .scatter-pin{ position:static; height:auto; padding-block:12vh; overflow:visible; }
  .scatter-grid{
    grid-template-columns: repeat(2, var(--card));
    grid-template-rows:none; grid-auto-rows:var(--card);
    justify-content:center; align-content:start;
    row-gap:24px; column-gap:24px; width:auto;
  }
  .scatter-grid > .sc-card{ grid-area:auto !important; opacity:1 !important; transform:none !important; }
  .sc-card--optional{ opacity:1 !important; visibility:visible !important; }
  .sc-card--mampei{ grid-column:1 / -1; justify-self:center; }
  .scatter-message{
    grid-column:1 / -1 !important; grid-row:auto !important; order:99;
    margin-top:8vh; transform:none !important; opacity:1 !important;
  }
}