/* ============================================================
   vintagecarpet — home2.css : v3 dynamic modules
   写真主役・横スクロール・全幅パララックス・大型産地リスト・劇的ヒーロー。
   tokens.css → app.css → home.css の後に読み込む。
   ============================================================ */
@layer page {
  /* —— HERO「言葉が絨毯」: 巨大見出し＋核を絨毯テクスチャで切り抜き ——
     アートディレクション統合（qoobo流: type×image を一体化） —— */
  .hero { padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 8vw, 6rem); position: relative;
    background:
      radial-gradient(120% 90% at 88% 10%, var(--red-tint), transparent 60%),
      linear-gradient(180deg, var(--paper), var(--paper-2)); overflow: clip; }
  .hero__grid { align-items: center; }
  .hero h1 { font-size: clamp(3.4rem, 1rem + 10vw, 9.5rem); line-height: .98; letter-spacing: -.01em; }
  .hero h1 .l { display: block; }
  .hero h1 .l-1 { font-size: .42em; color: var(--ink-2); letter-spacing: .12em; line-height: 1.3; margin-block-end: .15em; }
  /* 核の「美しい。」を実物の絨毯写真で切り抜く（文字が絨毯でできている） */
  .hero__fill {
    display: inline-block; font-weight: 1000;
    background-image: var(--hero-rug, url("../img/rugs/medallion-madder.svg"));
    background-size: 180% auto; background-position: 50% 42%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    /* Zen Old Mincho は900が上限。極細の縁取りでさらに太く見せる（テクスチャは内側に保つ） */
    -webkit-text-stroke: 1px rgba(38,20,12,.42);
    paint-order: stroke fill;
    /* テキストの可読性のため極細の朱の縁取り（クリップ失敗時のフォールバックにもなる） */
    text-shadow: 0 0 1px rgba(140,20,30,.15);
    animation: huePan 24s ease-in-out infinite alternate;
  }
  @supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .hero__fill { color: var(--red); -webkit-text-fill-color: currentColor; }
  }
  @keyframes huePan { from { background-position: 42% 38%; } to { background-position: 58% 52%; } }
  .hero__frame { box-shadow: var(--shadow-red); }
  @media (min-width: 941px) {
    .hero__grid { grid-template-columns: 1.18fr .82fr; }
    .hero__copy { position: relative; z-index: 2; }
    .hero h1 { margin-inline-end: -16%; }
  }

  /* —— 横スクロール 新着ストリップ —— */
  .hstrip-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-md); margin-block-end: var(--s-sm); }
  .hstrip-head .hint { font-family: var(--grotesk); font-size: var(--t-2xs); letter-spacing: .2em;
    text-transform: uppercase; color: var(--ink-3); display: inline-flex; align-items: center; gap: .5em; }
  .hstrip {
    display: grid; grid-auto-flow: column; grid-auto-columns: clamp(220px, 26vw, 300px);
    gap: var(--s-md); overflow-x: auto; scroll-snap-type: x mandatory;
    padding-block: var(--s-sm) var(--s-lg); margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter); cursor: grab; scrollbar-width: thin;
  }
  .hstrip.is-grabbing { cursor: grabbing; scroll-snap-type: none; }
  .hstrip::-webkit-scrollbar { height: 3px; }
  .hstrip::-webkit-scrollbar-thumb { background: var(--line-2); }
  .hstrip > * { scroll-snap-align: start; }
  .hstrip .plate__media { aspect-ratio: 3 / 4; }

  /* —— 全幅 写真パララックス帯 —— */
  .bleed { position: relative; min-height: clamp(420px, 70vh, 760px); overflow: clip;
    display: grid; place-items: center; color: var(--paper); margin-block: var(--s-2xl); }
  .bleed__bg { position: absolute; inset: -14% 0; z-index: 0; }
  .bleed__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .bleed::after { content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(20,12,8,.52), rgba(20,12,8,.26) 45%, rgba(20,12,8,.64)); }
  .bleed__inner { position: relative; z-index: 2; text-align: center; padding: var(--gutter); max-width: 60ch; }
  .bleed .eyebrow { color: var(--paper); opacity: .9; }
  .bleed h2 { font-family: var(--serif); color: var(--paper); font-size: clamp(1.8rem, 1rem + 4vw, 4rem);
    line-height: 1.28; margin-block: var(--s-sm); text-shadow: 0 2px 30px rgba(0,0,0,.5); }
  .bleed h2 em { font-style: normal; color: var(--red-bright); }
  .bleed p { color: rgba(255,255,255,.92); }

  /* —— 産地 大型リスト —— */
  .origins-list { border-block-start: var(--rule); }
  .origins-list a { display: grid; grid-template-columns: auto 1fr auto auto; gap: var(--s-md);
    align-items: baseline; padding-block: clamp(.7rem, 2vw, 1.3rem); border-block-end: var(--hair);
    transition: color var(--d1), padding-inline-start var(--d2) var(--ease); }
  .origins-list a:hover { color: var(--red); padding-inline-start: var(--s-sm); }
  .origins-list .n { font-family: var(--grotesk); font-weight: 600; font-size: var(--t-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
  .origins-list .nm { font-family: var(--serif); font-size: clamp(1.2rem, .8rem + 1.6vw, 2.1rem); }
  .origins-list .en { font-family: var(--grotesk); font-size: var(--t-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
  .origins-list .ct { font-family: var(--grotesk); font-size: var(--t-sm); color: var(--red); font-variant-numeric: tabular-nums; }
  .origins-list a:hover .en, .origins-list a:hover .n { color: var(--red); }
  @media (max-width: 640px) {
    .origins-list a { grid-template-columns: auto 1fr auto; }
    .origins-list .en { display: none; }
  }

  /* —— スクロールキュー —— */
  .scrollcue { position: absolute; inset-block-end: var(--s-sm); inset-inline-end: var(--gutter);
    writing-mode: vertical-rl; font-family: var(--grotesk); font-size: var(--t-2xs); letter-spacing: .3em;
    text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: .8em; }
  .scrollcue::after { content: ""; inline-size: 1px; block-size: 2.6em; background: var(--red);
    animation: cue 1.8s var(--ease) infinite; transform-origin: top; }
  @keyframes cue { 0%,100% { transform: scaleY(.3); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }
  @media (max-width: 940px) { .scrollcue { display: none; } }
}