/* ═══ Hitofude film stage + coda + pill ═══ */

.film {
  position: relative;
  height: 100svh;
  background: var(--paper);
  overflow: hidden;
}
#filmCanvas, #filmVideo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
#filmVideo { display: none; }

/* ── act-6 vignette: the film settles into evening as the letter card lands ── */
#entryDim {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% 48%, rgba(23, 18, 14, 0.22), rgba(23, 18, 14, 0.52) 80%);
  opacity: 0;
}

/* ── spotlight: warm reveal layer masked to cursor by JS ── */
#spotlight {
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(232, 177, 143, 0.22), rgba(201, 111, 74, 0.08) 60%, transparent 80%);
  opacity: 0;
  mix-blend-mode: soft-light;
}

#ribbonSvg {
  position: absolute; inset: 0; z-index: 4;
  width: 100%; height: 100%;
  pointer-events: none;
  filter: drop-shadow(0 2px 14px rgba(201, 111, 74, 0.5));
}

#filmDom { position: absolute; inset: 0; z-index: 5; }
.act { position: absolute; opacity: 0; will-change: transform, opacity, filter; }
.act[aria-hidden="true"] { pointer-events: none; }

/* Act 2: glass quote chips */
.act--chips { inset: 0; }
.fchip {
  position: absolute;
  font-family: 'Klee One', serif; font-weight: 600;
  font-size: clamp(14px, 1.6vw, 19px); letter-spacing: 0.04em;
  color: #fffdf9;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 44px;
  backdrop-filter: blur(14px);
  padding: 14px 26px;
  box-shadow: 0 14px 44px rgba(23, 18, 14, 0.25);
  white-space: nowrap;
}
.fchip .fch { display: inline-block; opacity: 0.2; }
.fchip--1 { left: 12%; top: 24%; rotate: -4deg; }
.fchip--2 { right: 10%; top: 40%; rotate: 3deg; }
.fchip--3 { left: 18%; bottom: 24%; rotate: -2deg; }

/* Act 3: taste keywords */
.act--keywords {
  inset: 0;
  display: flex; align-items: center; align-content: center; justify-content: center;
  gap: clamp(18px, 4vw, 56px); flex-wrap: wrap;
  padding: 0 8vw;
}
.fkw {
  font-family: var(--serif); font-weight: 800;
  font-size: clamp(26px, 4.4vw, 58px);
  color: #fffdf9;
  text-shadow: 0 0 30px rgba(232, 177, 143, 0.65), 0 2px 18px rgba(23, 18, 14, 0.5);
  opacity: 0; filter: blur(10px); transform: translateY(50px);
}
.act--caption {
  left: 0; right: 0; bottom: 12svh;
  text-align: center;
  font-family: 'Klee One', serif; font-weight: 600;
  font-size: clamp(15px, 1.8vw, 21px);
  color: rgba(255, 253, 249, 0.92);
  text-shadow: 0 1px 12px rgba(23, 18, 14, 0.6);
}
.act--intro {
  bottom: auto; top: 16svh;
  font-size: clamp(17px, 2.3vw, 27px);
  letter-spacing: 0.1em;
}

/* Act 5: gift card fan */
.act--cards {
  left: 50%; bottom: 8svh;
  width: min(90vw, 980px); height: 40svh;
  transform: translateX(-50%);
}
.fcard {
  position: absolute; left: 50%; bottom: 0;
  width: clamp(120px, 13vw, 172px);
  margin: 0;
  background: rgba(255, 255, 255, 0.9);
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  padding: 8px 8px 10px;
  box-shadow: 0 20px 60px rgba(23, 18, 14, 0.35);
  transform-origin: 50% 130%;
  /* fan: JS drives progress; final pose via --i (0..4) */
  --fan-rot: calc((var(--i) - 2) * 9deg);
  --fan-x: calc((var(--i) - 2) * 108%);
}
.fcard img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; background: var(--paper-deep); }
.fcard figcaption {
  font-family: 'Klee One', serif; font-size: 11.5px; font-weight: 600;
  color: var(--ink); text-align: center; padding-top: 7px; line-height: 1.5;
}

/* Act 6: entry card */
.act--entry {
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 6vw;
}
/* washi paper card: guaranteed contrast on any footage brightness (owner-confirmed A+C) */
.entry-card {
  width: min(640px, 92vw);
  text-align: center;
  background: rgba(247, 241, 232, 0.9);
  border: 1.5px solid rgba(255, 253, 249, 0.9);
  border-radius: 44px;
  backdrop-filter: blur(20px);
  padding: clamp(30px, 4.5vw, 56px) clamp(22px, 4vw, 52px);
  box-shadow: 0 30px 90px rgba(23, 18, 14, 0.4);
}
.entry-card__title {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(26px, 3.6vw, 42px);
  color: var(--ink); margin-bottom: 12px;
}
.entry-card__lead { color: var(--ink-soft); font-size: 14px; margin-bottom: 30px; }
.entry-card .input__err { color: var(--accent-deep); }
.entry-card .input__mode { color: var(--ink-soft); border-color: rgba(33, 28, 24, 0.35); }
.entry-card .input__mode:hover { color: var(--accent-deep); border-color: var(--accent-deep); }
.entry-card .input__note { color: rgba(92, 82, 72, 0.8); }
.entry-card .input__field { border-color: rgba(33, 28, 24, 0.14); }

/* ── chapter-mode fallback ── */
.film__chapters { display: none; }
.film--chapters { height: auto; overflow: visible; }
.film--chapters #filmCanvas, .film--chapters #filmVideo, .film--chapters #ribbonSvg, .film--chapters #spotlight, .film--chapters #entryDim { display: none; }
.film--chapters .film__chapters { display: block; }
.film__chapter { position: relative; height: 72svh; overflow: hidden; }
.film__chapter video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.film--chapters #filmDom { position: static; }
.film--chapters .act {
  position: relative; inset: auto;
  padding: 9svh 6vw;
  /* the "gentle reveals" the chapters comment always promised — acts rise in
     as they enter the viewport instead of sitting there pre-rendered
     (owner-reported 2026-08-04: stacked blocks read as a broken flow) */
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.film--chapters .act.is-rev { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .film--chapters .act { opacity: 1; transform: none; transition: none; }
}
.film--chapters .fchip { position: static; display: inline-block; margin: 8px; white-space: normal;
  background: var(--white); color: var(--ink); border-color: rgba(33,28,24,0.12); }
.film--chapters .fchip .fch { opacity: 1; }
.film--chapters .act--chips, .film--chapters .act--keywords { text-align: center; display: block; }
.film--chapters .fkw { color: var(--ink); text-shadow: none; opacity: 1; filter: none; transform: none;
  font-size: clamp(22px, 7vw, 34px); margin: 0 10px; }
.film--chapters .act--caption { position: static; color: var(--ink-soft); text-shadow: none; }
.film--chapters .act--cards { transform: none; left: auto; width: auto; height: auto;
  display: flex; gap: 14px; overflow-x: auto; padding: 4svh 6vw; }
.film--chapters .fcard { position: static; flex: 0 0 150px; }
/* Mobile flicks were sailing straight past the input (owner report 2026-07-31).
   Proximity snap: only the entry act carries a snap-align, so nothing else on
   the page is affected — a flick that lands NEAR the input settles onto it,
   while normal scrolling elsewhere feels unchanged. Touch scrolling is native
   (Lenis smooths wheel only), so CSS snap applies on phones. */
html:has(.film--chapters) { scroll-snap-type: y proximity; }
.film--chapters .act--entry {
  /* 100svh left a screenful of blank around the input on phones — enough to
     read as a break in the flow. 78svh still centers cleanly under the
     proximity snap without the dead air. */
  min-height: 78svh;
  display: flex; flex-direction: column; justify-content: center;
  scroll-snap-align: center;
}
.film--chapters .entry-card { background: var(--white); border-color: rgba(33,28,24,0.1); box-shadow: 0 14px 50px rgba(33,28,24,0.12); }
.film--chapters .entry-card__title { color: var(--ink); text-shadow: none; }
.film--chapters .entry-card__lead { color: var(--ink-soft); }
.film--chapters .entry-card .input__err { color: var(--accent-deep); }
.film--chapters .entry-card .input__mode { color: var(--ink-soft); border-color: rgba(33,28,24,0.35); }
.film--chapters .entry-card .input__note { color: rgba(92,82,72,0.65); }

/* ═══ CODA ═══ */
#coda {
  position: relative;
  background:
    radial-gradient(ellipse 90% 40% at 50% -5%, rgba(201, 111, 74, 0.12), transparent 70%),
    var(--paper);
  padding: 14svh 6vw 0;
}
.coda__inner { max-width: 760px; margin: 0 auto; }
.coda__trust {
  text-align: center;
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(17px, 2.2vw, 24px); line-height: 2.1;
  margin-bottom: 8svh;
}
.coda__faq { display: grid; gap: 14px; margin-bottom: 10svh; }
.faq {
  background: var(--white);
  border: 1px solid rgba(33, 28, 24, 0.09);
  border-radius: 18px;
  padding: 4px 26px;
  transition: box-shadow 0.4s var(--ease-out);
}
.faq:hover { box-shadow: 0 14px 44px rgba(33, 28, 24, 0.09); }
.faq summary {
  cursor: pointer; list-style: none;
  font-weight: 700; font-size: 15px;
  padding: 18px 0;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '＋'; position: absolute; right: 2px; top: 50%;
  transform: translateY(-50%);
  color: var(--accent); font-weight: 400;
  transition: transform 0.35s var(--ease-out);
}
.faq[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq[open] summary { border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, var(--accent-soft), transparent) 1;
  animation: faq-underline 1.6s ease-in-out infinite alternate; }
@keyframes faq-underline { from { border-image-source: linear-gradient(90deg, var(--accent-soft), transparent); }
  to { border-image-source: linear-gradient(90deg, var(--accent), transparent); } }
.faq p { font-size: 14px; color: var(--ink-soft); padding: 2px 0 20px; }

.coda__foot {
  border-top: 1px solid rgba(33, 28, 24, 0.1);
  padding: 34px 0 40px;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
}
.coda__mark { font-family: var(--serif); font-weight: 800; letter-spacing: 0.14em; font-size: 17px; }
.coda__line { font-size: 12px; color: var(--ink-soft); letter-spacing: 0.08em; }
/* Amazon OpA §5 requires the statement 目立つように — full opacity, readable size */
.coda__legal { flex-basis: 100%; font-size: 13px; color: var(--ink-soft); letter-spacing: 0.04em; }
.coda__privacy { font-size: 12px; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }

.reveal-up { opacity: 0; transform: translateY(8px); }
.reveal-up.is-in { opacity: 1; transform: translateY(0); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }

/* ═══ persistent CTA pill ═══ */
#ctaPill {
  position: fixed; right: 26px; bottom: 26px; z-index: 70;
  font-family: var(--sans); font-weight: 700; font-size: 14px; letter-spacing: 0.08em;
  color: var(--white); background: var(--ink);
  border: none; border-radius: 100px;
  padding: 15px 28px; cursor: pointer;
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), background 0.35s;
  animation: pill-breathe 2.4s ease-in-out infinite;
}
#ctaPill.is-on { opacity: 1; transform: translateY(0); pointer-events: auto; }
#ctaPill:hover { background: var(--accent); }
@keyframes pill-breathe {
  0%, 100% { box-shadow: 0 8px 30px rgba(201, 111, 74, 0.35); }
  50% { box-shadow: 0 8px 44px rgba(201, 111, 74, 0.65); }
}

@media (max-width: 780px) {
  .fchip { font-size: 13px; }
  #ctaPill { right: 16px; bottom: 16px; padding: 13px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  #ctaPill { animation: none; }
  .faq[open] summary { animation: none; }
}