/* ============================================================
   vintagecarpet — home3.css : 大胆不敵モード
   全画面ヒーロー(裁ち落とし)・巨大キネティック文字・大コントラスト。
   tokens → app → home → home2 → home3 の順で最後に読み込む。
   ============================================================ */
@layer page {
  /* —— 全画面ヒーロー —— */
  .hero {
    position: relative; min-height: clamp(660px, 94svh, 1040px);
    display: flex; align-items: center; overflow: clip;
    padding-block: clamp(5rem, 12vh, 9rem) 0;
    background: var(--paper); /* 真っ白 */
  }
  .hero__geo { inset-block-start: 2%; inset-inline-end: 50%; inline-size: min(46vw, 34rem); opacity: .06; }

  /* 右側の絨毯写真を裁ち落としで大きく（額装をやめる） */
  .hero__bleed { position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: min(50%, 900px); z-index: 0; }
  .hero__bleed img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  /* 背景の絨毯スライド（クロスフェード）。デザインは現状維持し、画像だけ切り替える */
  .hero__slides { position: absolute; inset: 0; z-index: 0; }
  .hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s var(--ease); }
  .hero__slide.is-active { opacity: 1; }
  @media (prefers-reduced-motion: reduce) { .hero__slide { transition: none; } }
  .hero__bleed::before { content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, var(--paper) 6%, color-mix(in oklab, var(--paper) 55%, transparent) 34%, transparent 78%); }
  .hero__bleed::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 1px; background: var(--red); z-index: 2; opacity: .5; }
  .hero__tag { position: absolute; z-index: 3; inset-block-start: clamp(5rem, 12vh, 9rem); inset-inline-end: var(--gutter);
    background: var(--red); color: var(--gofun); font-family: var(--grotesk); font-weight: 600;
    font-size: var(--t-2xs); letter-spacing: .16em; text-transform: uppercase; padding: .4em .9em; }
  .hero__credit { position: absolute; z-index: 3; inset-block-end: clamp(2rem, 6vh, 4rem); inset-inline-end: var(--gutter);
    writing-mode: vertical-rl; font-family: var(--serif); font-size: var(--t-sm); letter-spacing: .2em;
    color: var(--gofun); background: color-mix(in oklab, var(--ink) 78%, transparent); padding: .8em .5em; }

  .hero__content { position: relative; z-index: 4; max-inline-size: min(58%, 720px); }
  .hero h1 { font-size: clamp(3.4rem, .5rem + 11vw, 10rem); line-height: .96; letter-spacing: -.015em; margin-inline-end: 0; }
  .hero h1 .l-1 { font-size: .36em; }
  .hero__fill { background-size: 200% auto; }
  .hero__lead { font-size: clamp(1rem, .9rem + .3vw, 1.2rem); max-inline-size: 32ch; }

  @media (max-width: 940px) {
    /* スマホ: 写真は薄い背景に落とし、文字を確実に読ませる（白基調で統一） */
    .hero { min-height: auto; padding-block: clamp(2.5rem, 9vh, 4.5rem) var(--s-xl); }
    .hero__bleed { inline-size: 100%; }
    .hero__bleed::before { background:
      linear-gradient(180deg,
        var(--paper) 14%,
        color-mix(in oklab, var(--paper) 80%, transparent) 48%,
        color-mix(in oklab, var(--paper) 86%, transparent)); }
    .hero__content { max-inline-size: 100%; }
    .hero h1 { font-size: clamp(3rem, 11vw, 4.6rem); }
    /* 「美しい。」は絨毯テクスチャ切り抜きデザインを維持（薄背景なので可読）。
       読みやすさのため文字を少し濃く締める。 */
    .hero h1 .hero__fill { background-size: 220% auto; background-position: 50% 45%;
      text-shadow: 0 0 1px rgba(146,22,36,.35); }
    .hero__credit, .hero__tag { display: none; }
  }

  /* —— 結び目イントロ —— */
  .knotintro__grid { display: grid; grid-template-columns: auto auto minmax(0, 1fr);
    gap: clamp(1.2rem, 4vw, 3rem); align-items: center; }
  .knotintro__fig { text-align: center; }
  .knotintro__fig svg { inline-size: clamp(96px, 14vw, 150px); height: auto; }
  .knotintro__fig figcaption { font-family: var(--serif); font-size: var(--t-sm); margin-block-start: .3em; }
  .knotintro__fig .en { display: block; font-family: var(--grotesk); font-size: var(--t-2xs);
    letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
  .knotintro__text p { color: var(--ink-2); margin-block-end: var(--s-sm); }
  @media (max-width: 760px) {
    .knotintro__grid { grid-template-columns: 1fr 1fr; }
    .knotintro__text { grid-column: 1 / -1; }
  }

  /* —— 通常の商品グリッド（横スクロール廃止・参考各店に準拠） —— */
  .grid-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-lg) var(--s-md); }
  @media (max-width: 980px) { .grid-cards { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 640px)  { .grid-cards { grid-template-columns: 1fr 1fr; gap: var(--s-md) var(--s-sm); } }

  /* —— 巨大キネティック・マーキー —— */
  .megamarquee { overflow: clip; background: var(--ink); color: var(--gofun); border-block: var(--rule);
    padding-block: clamp(.4rem, 1.4vw, .9rem); }
  .megamarquee__track { display: flex; gap: 1.4em; inline-size: max-content;
    font-family: var(--serif); font-weight: 600; font-size: clamp(2.2rem, 7vw, 6rem);
    line-height: 1.05; letter-spacing: .02em; animation: megamarq 26s linear infinite; }
  .megamarquee__track span { display: inline-flex; align-items: center; gap: 1.4rem; }
  .megamarquee__track span::after { content: "❋"; color: var(--red); font-size: .5em; }
  .megamarquee em { font-style: normal; color: var(--red-bright); }
  .megamarquee:hover .megamarquee__track { animation-play-state: paused; }
  @keyframes megamarq { to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) { .megamarquee__track { animation: none; } }

  /* —— セクション間コントラストを強める（明↔暗の振れ幅） —— */
  .philo { background: var(--paper-2); }
  .prov { background: #1a130c; }
  .sizes { background: var(--paper-3); }
}