/* Homepage. Loaded only by index.html. Light page; amber marks replies and
   emphasis; dark only for confidentiality and the footer.
   Without JavaScript, or with reduced motion, every element rests in its
   final state. home.js adds .scrub to <html> and either .scrub-native (CSS
   scroll timelines) or .scrub-js (it sets --p, 0..1, on [data-scrub]). */

@font-face { font-family: "Tellhaven Voice"; src: url("/fonts/noto-latin.woff2") format("woff2"); font-display: swap; unicode-range: U+0000-024F, U+1E00-1EFF, U+2000-206F; }
@font-face { font-family: "Tellhaven Voice"; src: url("/fonts/noto-deva.woff2") format("woff2"); font-display: swap; unicode-range: U+0900-097F, U+200C-200D; }
@font-face { font-family: "Tellhaven Voice"; src: url("/fonts/noto-beng.woff2") format("woff2"); font-display: swap; unicode-range: U+0980-09FF; }
@font-face { font-family: "Tellhaven Voice"; src: url("/fonts/noto-arab.woff2") format("woff2"); font-display: swap; unicode-range: U+0600-06FF; }
@font-face { font-family: "Tellhaven Voice"; src: url("/fonts/noto-hans.woff2") format("woff2"); font-display: swap; unicode-range: U+3000-303F, U+4E00-9FFF, U+FF00-FFEF; }

@property --n { syntax: "<integer>"; inherits: false; initial-value: 6; }
@property --r { syntax: "<percentage>"; inherits: true; initial-value: 100%; }

.home {
  --voice: "Tellhaven Voice", system-ui, sans-serif;
}

/* 1. Hero: the promise */
.home-hero { display: grid; align-items: center; min-height: min(calc(100svh - var(--header-h)), 46rem); padding-block: clamp(4rem, 10vh, 7rem) !important; }
.home-hero h1 { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.4rem); line-height: 1.04; letter-spacing: -0.038em; }
.home-hero .lede { margin-top: 1.5rem; max-width: 30rem; }

/* The hero's product moment: a concern and its reply over a real place */
.hero-moment { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.75rem; aspect-ratio: 4 / 5; max-height: 36rem; padding: 1.25rem; border-radius: 1.5rem; overflow: hidden; box-shadow: var(--card-shadow); }
.hero-moment picture, .hero-moment img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.hero-moment .pane-label { position: absolute; top: 1rem; left: 1rem; padding: 0.35rem 0.75rem; border-radius: 999px; background: oklch(1 0 0 / 0.9); color: var(--ink); }
.hero-moment .bubble { max-width: 85%; font-size: 0.9rem; }
@media (prefers-reduced-motion: no-preference) {
  .home-hero .mark-amber { animation: draw-mark 0.9s var(--ease) 0.35s both; }
}

/* 2. In their own words: one example concern at a time, on amber */
.voices-band { background: var(--lamp); color: var(--ink); }
.voices-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 2rem clamp(2rem, 6vw, 5rem); align-items: center; }
.voices-band .lede { margin-top: 1rem; max-width: 26rem; color: var(--ink-soft); }
.feed { display: grid; }
.feed-item { grid-area: 1 / 1; align-self: start; opacity: 0; }
.feed-item:first-child { opacity: 1; }
.feed-text { font-family: var(--voice); font-size: clamp(1.4rem, 1rem + 1.5vw, 2.3rem); line-height: 1.4; text-wrap: balance; }
.feed-text[dir="rtl"] { text-align: start; }
.feed-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; margin-top: 0.9rem; }
.feed-en { color: var(--ink-soft); }
.feed-label { font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
.feed-progress { display: none; gap: 0.35rem; margin-bottom: 1.5rem; }
.feed-progress span { position: relative; overflow: hidden; width: 1.75rem; height: 2px; border-radius: 1px; background: oklch(0.15 0.025 262 / 0.18); }
.feed-progress span::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; }
@media (prefers-reduced-motion: no-preference) {
  .feed-item { animation: feed 30s linear infinite both; }
  .feed-item:nth-child(2) { animation-delay: 5s; }
  .feed-item:nth-child(3) { animation-delay: 10s; }
  .feed-item:nth-child(4) { animation-delay: 15s; }
  .feed-item:nth-child(5) { animation-delay: 20s; }
  .feed-item:nth-child(6) { animation-delay: 25s; }
  .feed-item:first-child { animation-delay: -1.2s; }
  .feed-progress { display: flex; }
  .feed-progress span::after { animation: feed-bar 30s linear infinite both; }
  .feed-progress span:nth-child(1)::after { animation-delay: -1.2s; }
  .feed-progress span:nth-child(2)::after { animation-delay: 5s; }
  .feed-progress span:nth-child(3)::after { animation-delay: 10s; }
  .feed-progress span:nth-child(4)::after { animation-delay: 15s; }
  .feed-progress span:nth-child(5)::after { animation-delay: 20s; }
  .feed-progress span:nth-child(6)::after { animation-delay: 25s; }
}
/* Each item owns 5s of a 30s loop: blur in, hold, lift away. */
@keyframes feed {
  0% { opacity: 0; transform: translateY(0.6rem); filter: blur(6px); }
  3%, 14% { opacity: 1; transform: none; filter: blur(0); }
  16.6%, 100% { opacity: 0; transform: translateY(-0.6rem); filter: blur(6px); }
}
@keyframes feed-bar { 0% { transform: scaleX(0); } 16.6% { transform: scaleX(1); } 16.7%, 100% { transform: scaleX(0); } }

/* 3. The thread: one concern from 03:12 to a recorded outcome */
.thread { position: relative; background: var(--bg-alt); border-block: 1px solid var(--line); }
.thread-pin { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: clamp(1rem, 2.5vw, 2rem); }
.thread-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 2rem; }
.thread-head h2 { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.35rem); letter-spacing: -0.01em; color: var(--ink-muted); font-weight: 600; }
.thread-steps { display: flex; flex-wrap: wrap; gap: 0.25rem clamp(1rem, 2.5vw, 2.25rem); }
.ts { font-weight: 800; font-size: clamp(1.6rem, 1rem + 2.2vw, 2.9rem); line-height: 1.1; letter-spacing: -0.035em; color: var(--ink); }
.ts time { display: block; font-size: 0.8rem; letter-spacing: 0; font-weight: 700; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.ts-2, .ts-4 { padding-top: 1.05rem; }

.thread-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; min-height: 0; }

.site-pane { position: relative; isolation: isolate; height: 100%; min-height: 34rem; border-radius: 1.25rem; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.5rem; padding: 1.25rem; box-shadow: var(--card-shadow); }
.site-pane picture, .site-pane img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.pane-label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.01em; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.site-pane .pane-label { position: absolute; top: 1rem; left: 1rem; padding: 0.35rem 0.75rem; border-radius: 999px; background: oklch(1 0 0 / 0.88); color: var(--ink); backdrop-filter: blur(8px); }

.bubble { font-family: var(--voice); }
.bubble-in { display: grid; overflow: hidden; background: var(--bg); color: var(--ink); border-radius: 1.1rem 1.1rem 1.1rem 0.3rem; }
.bubble-in .msg { grid-area: 1 / 1; }
.msg-orig { clip-path: inset(0 0 0 100%); }
.scan { position: absolute; inset: 0; opacity: 0; background: linear-gradient(90deg, transparent calc(100% - 4rem), oklch(0.82 0.16 72 / 0.35) calc(100% - 2px), var(--amber-deep) calc(100% - 2px)); }
.bubble-note { align-self: flex-start; padding: 0.2rem 0.6rem; border-radius: 999px; background: oklch(1 0 0 / 0.88); color: var(--ink); font-size: 0.75rem; font-weight: 600; }
.bubble-out { align-self: flex-end; margin-top: 0.5rem; background: var(--lamp); color: var(--ink); border-radius: 1.1rem 1.1rem 0.3rem 1.1rem; }

.thread-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.thread-lines path { fill: none; stroke: var(--amber-deep); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }

.office-pane { display: grid; gap: 1rem; padding: clamp(1.1rem, 2vw, 1.5rem); border-radius: 1.25rem; background: var(--bg); box-shadow: 0 0 0 1px var(--line), var(--card-shadow); }
.case { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; }
.case::before { content: ""; flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 0 3px var(--amber-soft); }
.reply { padding: 0.85rem 1rem; border-radius: 1.1rem 1.1rem 0.3rem 1.1rem; background: var(--amber-soft); box-shadow: inset 0 0 0 1.5px var(--lamp); }
.reply .msg { font-family: var(--voice); font-size: 0.95rem; line-height: 1.5; -webkit-mask-image: linear-gradient(to bottom, #000 var(--r), transparent calc(var(--r) + 1.5em)); mask-image: linear-gradient(to bottom, #000 var(--r), transparent calc(var(--r) + 1.5em)); }
.record { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 0.75rem 1.5rem; margin: 0; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.85rem; }
.record dt { color: var(--ink-muted); font-size: 0.75rem; }
.record dd { margin: 0.15rem 0 0; font-weight: 600; font-variant-numeric: tabular-nums; }

/* 4. Statement */
.statement p { font-size: clamp(2.5rem, 1rem + 5.4vw, 5.75rem); line-height: 1.02; letter-spacing: -0.04em; color: var(--ink); }
.st { display: block; }
.statement strong { display: inline; }

.home .governance { border-top: 0; }

/* Scroll-linked motion (enabled by home.js) */
.scrub-measure * { animation: none !important; }
.scrub .thread { height: 520vh; padding-block: 0 !important; }
.scrub .thread-pin { position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); padding-block: clamp(1rem, 3vh, 2rem); }
.scrub .site-pane { min-height: 0; }
.scrub .thread { view-timeline: --thread block; }

.scrub :is(.site-pane img, .site-pane .pane-label, .bubble-in, .msg-orig, .msg-en, .scan, .bubble-note, .office-pane, .line-out, .line-back, .row-flag, .count, .case, .reply, .bubble-out, .record, .ts),
.scrub .st, .scrub .statement strong {
  animation-duration: 1s; animation-timing-function: linear; animation-fill-mode: both;
}
.scrub-native :is(.site-pane img, .site-pane .pane-label, .bubble-in, .msg-orig, .msg-en, .scan, .bubble-note, .office-pane, .line-out, .line-back, .row-flag, .count, .case, .reply, .bubble-out, .record, .ts) {
  animation-duration: auto; animation-timeline: --thread; animation-range: contain 0% contain 100%;
}
.scrub-native :is(.st, .statement strong) { animation-duration: auto; animation-timeline: view(); animation-range: cover 0% cover 100%; }
.scrub-js :is(.site-pane img, .site-pane .pane-label, .bubble-in, .msg-orig, .msg-en, .scan, .bubble-note, .office-pane, .line-out, .line-back, .row-flag, .count, .case, .reply, .bubble-out, .record, .ts, .st, .statement strong) {
  animation-play-state: paused; animation-delay: calc(var(--p, 0) * -1s);
}

.scrub .site-pane img { animation-name: t-photo; }
.scrub .site-pane .pane-label { animation-name: t-label; }
.scrub .bubble-in { animation-name: t-bubble-in; }
.scrub .msg-orig { animation-name: t-orig; }
.scrub .msg-en { animation-name: t-en; }
.scrub .scan { animation-name: t-scan; }
.scrub .bubble-note { animation-name: t-note; }
.scrub .office-pane { animation-name: t-office; }
.scrub .line-out { animation-name: t-line-out; }
.scrub .row-flag { animation-name: t-flag; }
.scrub .count { animation-name: t-count; counter-reset: n var(--n); font-size: 0; }
.scrub .count::before { content: counter(n); font-size: 0.9rem; }
.scrub .case { animation-name: t-case; }
.scrub .reply { animation-name: t-reply; }
.scrub .line-back { animation-name: t-line-back; }
.scrub .bubble-out { animation-name: t-bubble-out; }
.scrub .record { animation-name: t-record; }
.scrub .ts-1 { animation-name: t-step-1; }
.scrub .ts-2 { animation-name: t-step-2; }
.scrub .ts-3 { animation-name: t-step-3; }
.scrub .ts-4 { animation-name: t-step-4; }
.scrub .st { animation-name: st-light; }
.scrub .statement strong { animation-name: st-light, st-mark; }

@keyframes t-photo { 0% { transform: scale(1.12); opacity: 0.2; } 14%, 100% { transform: scale(1); opacity: 1; } }
@keyframes t-label { 0%, 5% { opacity: 0; } 11%, 100% { opacity: 1; } }
@keyframes t-bubble-in { 0%, 9% { opacity: 0; transform: translateY(1.5rem); } 16%, 100% { opacity: 1; transform: none; } }
@keyframes t-orig { 0%, 21% { clip-path: inset(0 0 0 0); } 34%, 100% { clip-path: inset(0 0 0 100%); } }
@keyframes t-en { 0%, 21% { clip-path: inset(0 100% 0 0); } 34%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes t-scan { 0%, 20.9% { opacity: 0; transform: translateX(-100%); } 21% { opacity: 1; transform: translateX(-100%); } 34% { opacity: 1; transform: translateX(0); } 37%, 100% { opacity: 0; transform: translateX(0); } }
@keyframes t-note { 0%, 33% { opacity: 0; } 37%, 100% { opacity: 1; } }
@keyframes t-office { 0%, 36% { opacity: 0.45; } 44%, 100% { opacity: 1; } }
@keyframes t-line-out { 0%, 38% { stroke-dashoffset: 1; } 48%, 100% { stroke-dashoffset: 0; } }
@keyframes t-flag { 0%, 47% { background-color: transparent; } 51%, 100% { background-color: var(--amber-soft); } }
@keyframes t-count { 0%, 48% { --n: 5; } 49%, 100% { --n: 6; } }
@keyframes t-case { 0%, 51% { opacity: 0; transform: translateY(0.75rem); } 56%, 100% { opacity: 1; transform: none; } }
@keyframes t-reply { 0%, 57% { opacity: 0; --r: 0%; } 59% { opacity: 1; --r: 0%; } 70%, 100% { opacity: 1; --r: 100%; } }
@keyframes t-line-back { 0%, 71% { stroke-dashoffset: 1; } 79%, 100% { stroke-dashoffset: 0; } }
@keyframes t-bubble-out { 0%, 78% { opacity: 0; transform: translateY(1.5rem) scale(0.96); } 84%, 100% { opacity: 1; transform: none; } }
@keyframes t-record { 0%, 86% { opacity: 0; transform: translateY(0.75rem); } 93%, 100% { opacity: 1; transform: none; } }
@keyframes t-step-1 { 0%, 34% { color: var(--ink); } 38%, 100% { color: oklch(0.78 0.012 262); } }
@keyframes t-step-2 { 0%, 36% { color: oklch(0.78 0.012 262); } 40%, 54% { color: var(--ink); } 58%, 100% { color: oklch(0.78 0.012 262); } }
@keyframes t-step-3 { 0%, 55% { color: oklch(0.78 0.012 262); } 59%, 84% { color: var(--ink); } 88%, 100% { color: oklch(0.78 0.012 262); } }
@keyframes t-step-4 { 0%, 86% { color: oklch(0.78 0.012 262); } 90%, 100% { color: var(--ink); } }
@keyframes st-light { 0%, 18% { color: oklch(0.86 0.008 262); } 42%, 100% { color: var(--ink); } }
@keyframes st-mark { 0%, 38% { --hl: 0%; } 58%, 100% { --hl: 100%; } }

@media (max-width: 960px) {
  .voices-grid { grid-template-columns: 1fr; }
  .hero-moment { aspect-ratio: auto; height: 30rem; max-width: 34rem; }
  .home-hero { min-height: 0; }
}
@media (max-width: 760px) {
  .thread-stage { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 1rem; }
  .site-pane { padding: 0.9rem; min-height: 26rem; }
  .bubble, .reply .msg { font-size: 0.85rem; }
  .bubble { padding: 0.7rem 0.85rem; }
  .office-pane { gap: 0.65rem; padding: 0.9rem; }
  .office-table thead, .office-table tbody tr:not(.row-flag) { display: none; }
  .office-table th, .office-table td { padding: 0.5rem 0.6rem; }
  .record { grid-template-columns: auto auto minmax(0, 1fr); gap: 0.5rem 1rem; padding-top: 0.65rem; font-size: 0.8rem; }
  .thread-head h2 { display: none; }
  .thread-steps { display: grid; }
  .ts { grid-area: 1 / 1; font-size: 2rem; padding-top: 0 !important; }
  .ts time { display: inline; margin-right: 0.5rem; font-size: 0.9rem; }
  .scrub .ts { color: var(--ink); }
  .scrub .ts-1 { animation-name: m-step-1; }
  .scrub .ts-2 { animation-name: m-step-2; }
  .scrub .ts-3 { animation-name: m-step-3; }
  .scrub .ts-4 { animation-name: m-step-4; }
  .scrub .thread { height: 600vh; }
  .thread-lines { display: none; }
  :root:not(.scrub) .thread-steps { display: flex; }
  :root:not(.scrub) .ts { grid-area: auto; font-size: 1.5rem; }
}
@keyframes m-step-1 { 0%, 34% { opacity: 1; } 37%, 100% { opacity: 0; } }
@keyframes m-step-2 { 0%, 36% { opacity: 0; } 39%, 54% { opacity: 1; } 57%, 100% { opacity: 0; } }
@keyframes m-step-3 { 0%, 55% { opacity: 0; } 58%, 84% { opacity: 1; } 87%, 100% { opacity: 0; } }
@keyframes m-step-4 { 0%, 86% { opacity: 0; } 89%, 100% { opacity: 1; } }