/* MESTÉA — acts.css
   幕（act）の骨格と昼夜。1 幕 = 1 画面・1 枚・1 文。夜の幕は幕のクラスで全トークンを再定義する。 */

.act { min-height: 100vh; display: grid; align-content: center; padding-block: var(--space-5); }
.act + .act { border-top: 0; }
.section.act { border-top: 0; }

/* 夜：五〜八幕。data-theme とは独立に、この幕の中だけ色が変わる */
.act--night {
  --ground: #12150E;
  --surface: #1A1E16;
  --sunken: #0C0E09;
  --ink: #EBEDE3;
  --body: #CFD2C4;
  --muted: #8C9080;
  --rule: #2C3127;
  --resin: #D4A74E;
  --resin-dim: #D4A74E;
  --on-resin: #12150E;
  background: var(--ground);
  color: var(--body);
}
.act--night .conditions li, .act--night .tiles li { background: var(--ground); }

/* 写真の統一処理：彩度をわずかに落とし、暖色へ、粒子を重ねる。元ファイルは触らない */
.act figure { position: relative; }
.act figure img { filter: saturate(.9) sepia(.06); }
.act figure::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  opacity: .06; mix-blend-mode: multiply;
}
.act--night figure::after { mix-blend-mode: screen; opacity: .05; }
.act figcaption { position: relative; z-index: 1; text-align: right; }
.act figure::after { bottom: 1.6rem; } /* キャプションには粒子を乗せない */

/* 幕の題は一画面に一文 */
.act h2 { max-width: 14em; }
.act .lead { font-size: 1.2em; font-weight: 300; }

/* ---- 十幕：名簿 ---- */
.waitlist { margin-top: var(--space-3); }
.waitlist-label { display: block; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; color: var(--muted); margin-bottom: .6rem; }
.waitlist-row { display: flex; gap: 0; border-bottom: 1px solid var(--ink); }
.waitlist input {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink);
  font: inherit; font-size: 1.1rem; padding: .7rem 0; outline: none;
}
.waitlist input::placeholder { color: var(--muted); }
.waitlist-row:focus-within { border-bottom-color: var(--resin); box-shadow: 0 1px 0 var(--resin); }
.waitlist button {
  border: 0; background: transparent; color: var(--ink); cursor: pointer;
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .16em; padding: .7rem 0 .7rem 1rem;
  transition: color 400ms var(--ease);
}
.waitlist button:hover { color: var(--resin-dim); }
.waitlist.is-sending button { opacity: .5; pointer-events: none; }
.waitlist-note { font-size: .78rem; color: var(--muted); margin: .8rem 0 0; }
.waitlist-done { display: grid; justify-items: start; gap: .6rem; margin-top: var(--space-3); }
.waitlist-done .drop { position: static; display: block; width: 12px; height: 40px; color: var(--resin); transform: none; opacity: 1; animation: settle 900ms var(--ease) both; }
.waitlist-done p { font-family: var(--font-display); font-size: 1.4rem; color: var(--ink); margin: 0; }
@keyframes settle { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
.site-footer .waitlist { margin: 0 0 var(--space-2); max-width: 28rem; }
.site-footer .waitlist-label { position: absolute; left: -999px; }
.site-footer .waitlist-note { display: none; }