/* ===================================================================
   P&Aプロダクト公式サイト v6試作 — 「紙と墨」幕1(ループ動画)
   世界: 温かい白の和紙 × 墨 × 朱 × 金箔
   ルール: アニメは transform / opacity / clip-path のみ
   =================================================================== */

:root {
  --washi: #F6F1E8;
  --washi-deep: #EFE8DA;
  --ink: #1F1B16;
  --ink-soft: #59503F;
  --shu: #B5402A;
  --gold: #C8A24B;

  --font-min: "Toppan Bunkyu Midashi Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-body-min: "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-goth: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-latin: "Avenir Next", Avenir, sans-serif;

  --pad-x: clamp(24px, 6vw, 88px);
}

* { box-sizing: border-box; }

html { background: var(--washi); }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-goth);
  font-size: 15px;
  line-height: 2;
  letter-spacing: .04em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ===== 紙の質感(全画面グレイン) ===== */
.grain {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: multiply;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.75" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="matrix" values="0 0 0 0 0.62 0 0 0 0 0.58 0 0 0 0 0.5 0 0 0 0.05 0"/></filter><rect width="240" height="240" filter="url(%23n)"/></svg>');
}

.sp-only { display: none; }
@media (max-width: 720px) {
  .sp-only { display: inline; }
}

/* ===== ヘッダー ===== */
.site-head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px var(--pad-x);
  color: var(--ink);
}
.site-head .brand {
  margin: 0;
  font-family: var(--font-latin);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: .24em;
}
.proto-tag {
  margin: 0;
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--ink-soft);
}

/* ===== 幕1: 墨が咲く ===== */
.act { position: relative; overflow: hidden; }
.act-ink {
  height: 100svh;
  display: flex;
  align-items: center;
}
.paper-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  will-change: transform;
}
.paper-video video,
.paper-video .poster-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 動画の透明→フェードインはJS(モーション許可時)側で制御する。
   CSSで隠すと reduced-motion/JS無効環境で動画が永久に見えなくなる */
@media (max-width: 720px) {
  .paper-video video, .paper-video .poster-img { object-position: 18% 50%; }
}

.act-inner { position: relative; z-index: 2; }
.hero-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: left;
}
.act-ink h1 {
  font-family: var(--font-min);
  font-weight: 600;
  font-size: clamp(40px, 7vw, 84px);
  line-height: 1.42;
  letter-spacing: .06em;
  margin: 0 0 .5em;
  color: var(--ink);
  text-wrap: balance;
}
.act-ink h1 .ch { display: inline-block; }
.lead { margin: 0; }
.lead-line {
  display: block;
  font-family: var(--font-body-min);
  font-size: 16px;
  letter-spacing: .06em;
  color: var(--ink-soft);
}
.lead-line.meishi {
  margin-top: 1.1em;
  font-family: var(--font-goth);
  font-size: 13px;
  letter-spacing: .08em;
  color: rgba(89, 80, 63, .8);
}
.seal {
  width: clamp(44px, 5vw, 60px);
  height: auto;
  margin-top: clamp(20px, 4vh, 36px);
  filter: drop-shadow(0 2px 6px rgba(181, 64, 42, .25));
}
@media (max-width: 720px) {
  .hero-inner { align-items: flex-start; justify-content: flex-end; height: 100%; padding-bottom: 14svh; }
  .act-ink { align-items: stretch; }
}

.scroll-cue { transition: opacity .45s ease; }
.scroll-cue.is-hidden { opacity: 0 !important; }
.scroll-cue {
  position: absolute;
  bottom: 30px;
  right: var(--pad-x);
  z-index: 2;
  font-size: 10.5px;
  letter-spacing: .3em;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
}
.cue-line { width: 56px; height: 1px; background: rgba(31, 27, 22, .4); display: inline-block; }

/* ===== 墨のワイプ(幕転換) ===== */
.ink-wipe {
  position: absolute;
  inset: -2%;
  z-index: 3;
  pointer-events: none;
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}
.ink-wipe-1 { background: var(--ink); }
.ink-wipe-2 { background: #35291C; }

/* ===== 試作の締め ===== */
.act-note {
  min-height: 76svh;
  display: flex;
  align-items: center;
  background: var(--washi);
  color: var(--ink);
  text-align: center;
}
.note-inner { width: 100%; padding: clamp(7rem, 16vh, 12rem) var(--pad-x) clamp(5rem, 10vh, 8rem); }
.note-line {
  font-family: var(--font-min);
  font-weight: 600;
  font-size: clamp(22px, 3.4vw, 34px);
  letter-spacing: .12em;
  margin: 0 0 .8em;
}
.note-sub {
  color: var(--ink-soft);
  font-size: 14px;
  margin: 0;
}