/* FAMA Bureau — transitions.
 * Everything here is opt-in: the <head> script adds .motion to <html> only when the visitor
 * has not asked for reduced motion. Without it (or without JavaScript) every element is
 * simply visible. A fail-safe animation reveals anything still hidden after 3.5 s.
 * Character: quiet and exact — wipes, scans and hairlines drawing, never bounces.
 */

/* ---------------------------------------------------------------- page-to-page */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .38s var(--ease-in-out) both; }
::view-transition-new(root) { animation: vt-in .75s var(--ease-out) both; }
::view-transition-group(site-header) { animation-duration: 0s; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-14px); } }
@keyframes vt-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* The scan bar that accompanies each page reveal */
.page-scan { position: fixed; left: 0; right: 0; top: 0; z-index: 90; height: var(--hairline); background: var(--accent); box-shadow: var(--scan-glow); opacity: 0; pointer-events: none; }
.motion .page-scan.run { animation: page-scan .9s var(--ease-out) both; }
@keyframes page-scan { 0% { opacity: 1; transform: translateY(0); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(100vh); } }

/* Fallback for browsers without cross-document view transitions */
.motion.leaving main, .motion.leaving .site-footer { opacity: 0; transform: translateY(-10px); transition: opacity .3s var(--ease-in-out), transform .3s var(--ease-in-out); }

/* ---------------------------------------------------------------- monogram intro (first visit per session) */
.motion.intro .site-header .brand svg path { stroke: var(--ink); stroke-width: .7; stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; animation: draw 1.6s var(--ease-in-out) .1s forwards, fill .8s ease 1.3s forwards; }
.motion.intro .site-header .brand .name { animation: name-in 1.2s var(--ease-out) .6s both; }
.motion.intro .site-header .brand .divider { transform-origin: top; animation: grow-y .8s var(--ease-out) .4s both; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fill { to { fill-opacity: 1; stroke-width: 0; } }
@keyframes name-in { from { opacity: 0; letter-spacing: .5em; } to { opacity: 1; letter-spacing: .2em; } }
@keyframes grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Header status dot */
.motion .status::before { animation: ping 3.2s ease-out infinite 2s; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(194,181,151,.55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(194,181,151,0); } }

/* ---------------------------------------------------------------- hero sequence */
.motion .hero h1 .ln, .motion .hero-h .ln { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.motion .hero h1 .ln > span, .motion .hero-h .ln > span { display: block; transform: translateY(105%); animation: rise 1.1s var(--ease-out) forwards; animation-delay: calc(.25s + var(--i, 0) * .12s); }
@keyframes rise { to { transform: translateY(0); } }

.motion .hero .hero-media .canvas, .motion .hero .hero-media > picture { animation: develop 2s var(--ease-out) both; }
@keyframes develop { from { opacity: 0; filter: blur(8px) brightness(.5); scale: 1.08; } to { opacity: 1; filter: none; scale: 1; } }

.motion .hero .fb-scan { animation: scan-in 2.2s var(--ease-in-out) .5s both, scan-drift 7s ease-in-out 2.7s infinite alternate; }
@keyframes scan-in { from { top: 0; opacity: 0; } 10% { opacity: 1; } to { top: var(--scan-y); opacity: 1; } }
@keyframes scan-drift { from { top: var(--scan-y); } to { top: calc(var(--scan-y) - 4%); } }
.hero .fb-scan { top: var(--scan-y); }

.motion .hero .fb-face { animation: lock 1s var(--ease-out) 1.7s both; }
@keyframes lock { from { opacity: 0; transform: scale(1.25); } 60% { opacity: 1; } to { opacity: 1; transform: scale(1); } }
.motion .hero .fb-face > span { animation: fade 0.6s ease 2.5s both; }

.motion .hero-overlay, .motion .hero-coords { animation: fade-up .9s var(--ease-out) 1.6s both; }
.motion .fb-stamp.stamp-in { animation: stamp .7s var(--ease-out) 1.4s both; }
@keyframes stamp { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: scale(1); } }
.motion .fb-readout .fb-redact { animation: redact .8s var(--ease-in-out) 2.6s both; }
@keyframes redact { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- scroll reveals */
.motion [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease-out), transform 1s var(--ease-out); transition-delay: calc(var(--d, 0) * 1s); animation: failsafe 0s 3.5s forwards; }
.motion [data-reveal].in { opacity: 1; transform: none; animation: none; }
@keyframes failsafe { to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }

/* Framed photographs wipe open, then the brackets settle */
.motion .fb-frame[data-reveal] { opacity: 1; transform: none; }
.motion .fb-frame[data-reveal] .veil { display: block; transform-origin: right; transition: transform 1.3s var(--ease-in-out); transition-delay: calc(var(--d, 0) * 1s); animation: failsafe-veil 0s 3.5s forwards; }
.motion .fb-frame[data-reveal].in .veil { transform: scaleX(0); }
@keyframes failsafe-veil { to { transform: scaleX(0); } }
.motion .fb-frame[data-reveal] img { scale: 1.12; transition: scale 1.8s var(--ease-out), transform 1.2s var(--ease-out); }
.motion .fb-frame[data-reveal].in img { scale: 1; }
.motion .fb-frame[data-reveal] .brackets { opacity: 0; inset: -4px; transition: opacity .6s ease 1s, inset .8s var(--ease-out) 1s; }
.motion .fb-frame[data-reveal].in .brackets { opacity: 1; inset: 6px; }
.motion .fb-frame[data-reveal] .fb-tag { opacity: 0; transition: opacity .5s ease 1.3s; }
.motion .fb-frame[data-reveal].in .fb-tag { opacity: 1; }
.motion .fb-frame[data-reveal] .fb-stamp { opacity: 0; transition: opacity .6s ease 1.2s, transform .6s var(--ease-out) 1.2s; transform: scale(1.12); }
.motion .fb-frame[data-reveal].in .fb-stamp { opacity: 1; transform: none; }

/* Hairlines draw from the left */
.motion .short-rule[data-reveal], .motion .fb-eyebrow.ruled[data-reveal]::after { transform: scaleX(0); opacity: 1; transition: transform 1.1s var(--ease-in-out) .2s; }
.motion .short-rule[data-reveal].in, .motion .fb-eyebrow.ruled[data-reveal].in::after { transform: scaleX(1); }
.motion .fb-eyebrow[data-reveal] { transform: none; }

/* Process flow: nodes light in order, connectors draw */
.motion .fb-flow[data-reveal] { opacity: 1; transform: none; }
.motion .fb-flow[data-reveal] span { opacity: 0; transition: opacity .5s ease; }
.motion .fb-flow[data-reveal] i { transform: scaleX(0); transition: transform .5s var(--ease-in-out); }
.motion .fb-flow[data-reveal] span:last-child::before { background: transparent; }
.motion .fb-flow[data-reveal].in span, .motion .fb-flow[data-reveal].in i { opacity: 1; transform: none; }
.motion .fb-flow[data-reveal].in > * { transition-delay: calc(var(--n) * .22s); }
.motion .fb-flow[data-reveal].in span:last-child::before { background: var(--accent); transition: background .4s ease calc(var(--n) * .22s + .3s); }

/* Status chips arrive one after another */
.motion .chips[data-reveal] { opacity: 1; transform: none; }
.motion .chips[data-reveal] .fb-chip { opacity: 0; transform: translateY(6px); transition: opacity .5s ease, transform .5s var(--ease-out); }
.motion .chips[data-reveal].in .fb-chip { opacity: 1; transform: none; transition-delay: calc(var(--n) * .08s + .2s); }

/* Eyebrow decode (characters resolve; real text stays in the accessibility tree) */
.decode { white-space: pre; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* Hero parallax (set by motion.js) */
.motion .hero .hero-media .canvas, .motion .hero .hero-media > picture { translate: 0 var(--py, 0px); }

/* Content-bearing children also get the fail-safe */
.motion .chips[data-reveal] .fb-chip, .motion .fb-flow[data-reveal] span, .motion .fb-flow[data-reveal] i,
.motion .fb-frame[data-reveal] .brackets, .motion .fb-frame[data-reveal] .fb-tag, .motion .fb-frame[data-reveal] .fb-stamp { animation: failsafe 0s 3.5s forwards; }
.motion [data-reveal].in * { animation: none; }

/* ================================================================ INTRO FILM (home page, once per session)
 * Act 1 — noise: news items pop up around the screen and the mention count climbs.
 * Act 2 — order: the logo draws itself while a scan line passes and clears each item.
 * Act 3 — calm: soft light, the full lock-up and the tagline; then the site is revealed.
 * The items are fictional and generic; names appear only as redaction bars.
 */
.film { display: none; }
.intro-playing .film { display: block; position: fixed; inset: 0; z-index: 200; background: var(--surface); overflow: hidden; color: var(--ink); }
.intro-playing body { overflow: hidden; }
.intro-playing .hero, .intro-playing .hero *, .intro-playing .site-header *, .intro-playing .page-scan { animation-play-state: paused !important; }
.film-stage { position: absolute; inset: 0; }

/* soft light that arrives in act 3 */
.film-glow { position: absolute; inset: -20%; opacity: 0; transition: opacity 1.8s ease;
  background: radial-gradient(closest-side at 50% 46%, rgba(239,232,217,.13), rgba(239,232,217,.04) 55%, rgba(239,232,217,0) 80%),
              radial-gradient(var(--grid-dot) .7px, transparent 1.1px) 0 0 / var(--grid-pitch) var(--grid-pitch); }
.film.is-calm .film-glow { opacity: 1; }

/* the clippings */
.clip { position: absolute; left: var(--x); top: var(--y); width: clamp(176px, 16.5vw, 250px); padding: 14px 16px 16px; background: #efede8; color: #0a0a0a; border: 1px solid #dedad2; opacity: 0; transform: translate(-50%, -50%) rotate(var(--r)); will-change: transform, opacity, filter; }
.clip:nth-child(3n) { background: #e4e0d6; }
.clip:nth-child(4n+1) { width: clamp(200px, 19vw, 290px); }
.clip-meta { margin: 0 0 8px; max-width: none; font: 400 9px/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: #5b574f; display: flex; align-items: center; gap: 8px; }
.clip-meta::before { content: ""; width: 6px; height: 6px; background: #0a0a0a; }
.clip-head { margin: 0 0 12px; font: 500 clamp(16px, 1.45vw, 21px)/1.14 var(--font-serif); color: #0a0a0a; letter-spacing: -.005em; }
.clip-head .rd { display: inline-block; width: var(--w); height: .78em; background: #0a0a0a; vertical-align: -.06em; }
.clip-line { display: block; height: 5px; background: #cfcabf; margin-top: 7px; }
.clip-line.short { width: 62%; }

.film.is-pop .clip { animation: clip-pop .55s cubic-bezier(.2, 1.4, .4, 1) var(--t, 0s) forwards; }
@keyframes clip-pop {
  0% { opacity: 0; transform: translate(-50%, -42%) rotate(calc(var(--r) - 7deg)) scale(.72); }
  100% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r)) scale(1); }
}
.film.is-clean .clip { animation: clip-clear .8s var(--ease-out) var(--c) forwards; }
@keyframes clip-clear {
  from { opacity: 1; filter: blur(0); transform: translate(-50%, -50%) rotate(var(--r)) scale(1); }
  to { opacity: 0; filter: blur(10px); transform: translate(-50%, -58%) rotate(calc(var(--r) * .3)) scale(.94); }
}

/* the scan line that restores order */
.film-scan { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--accent); box-shadow: var(--scan-glow), 0 0 40px 6px rgba(194,181,151,.18); opacity: 0; }
.film.is-clean .film-scan { animation: film-scan 1.6s var(--ease-in-out) forwards; }
@keyframes film-scan { 0% { opacity: 0; top: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; top: 100%; } }

/* the logo */
.film-centre { position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%); width: min(360px, 62vw); text-align: center; opacity: 0; }
.film-logo { display: block; width: 100%; height: auto; overflow: visible; }
.film-logo path { fill: var(--ink); fill-opacity: 0; stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; }
.film.is-clean .film-centre { opacity: 1; transition: opacity .4s ease .5s; }
.film.is-clean .film-logo path { animation: draw 2s var(--ease-in-out) .5s forwards; }
.film.is-calm .film-logo path { animation: draw 0s forwards, film-fill 1.2s ease forwards; }
@keyframes film-fill { from { fill-opacity: 0; stroke-width: 1.4; } to { fill-opacity: 1; stroke-width: 0; } }
.film-tag { margin: 34px 0 0; max-width: none; font: italic 400 clamp(18px, 1.8vw, 24px)/1.4 var(--font-serif); color: var(--ink-body); letter-spacing: .04em; opacity: 0; transform: translateY(10px); transition: opacity 1.2s ease .5s, transform 1.4s var(--ease-out) .5s; }
.film.is-calm .film-tag { opacity: 1; transform: none; }

/* the mention counter */
.film-count { position: absolute; left: var(--gutter); bottom: 30px; margin: 0; max-width: none; display: flex; align-items: baseline; gap: 12px; font: 400 10px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); transition: opacity .8s ease; }
.film-count-n { font-size: 22px; letter-spacing: .04em; color: var(--accent); min-width: 2.6ch; text-align: right; font-variant-numeric: tabular-nums; }
.film.is-calm .film-count { opacity: 0; }

/* skip */
.film-skip { position: absolute; right: var(--gutter); bottom: 22px; z-index: 3; background: none; border: 1px solid var(--rule-strong); color: var(--ink-body); padding: 10px 16px; font: 400 10px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: color .25s, border-color .25s; }
.film-skip:hover, .film-skip:focus-visible { color: var(--ink); border-color: var(--ink); }

/* exit: the film lifts away to reveal the page */
.film.is-exit { animation: film-exit 1s var(--ease-in-out) forwards; pointer-events: none; }
.film.is-exit .film-centre { transition: transform 1s var(--ease-in-out), opacity .8s ease; transform: translate(-50%, -56%) scale(.96); opacity: 0; }
@keyframes film-exit { 0% { opacity: 1; } 100% { opacity: 0; } }

@media (max-width: 820px) {
  .clip { width: 150px; padding: 10px 12px 12px; }
  .clip:nth-child(4n+1) { width: 168px; }
  .clip:nth-child(n+11) { display: none; }
  .clip-head { font-size: 15px; }
  .film-count { bottom: 84px; }
}
.intro-playing [data-reveal], .intro-playing [data-reveal] * { animation-play-state: paused !important; }
/* act 3: the calm, positive picture */
.film-centre { width: min(720px, 90vw); }
.film-logo { width: min(340px, 60vw); margin: 0 auto; }
.film-good { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 38px; text-align: left; }
.film-good p { margin: 0; max-width: none; padding: 14px 16px 16px; border: 1px solid var(--rule-strong); background: rgba(19,18,16,.6); font: 400 17px/1.3 var(--font-serif); color: var(--ink); opacity: 0; transform: translateY(12px); transition: opacity 1s ease, transform 1.2s var(--ease-out); }
.film-good span { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font: 400 9px/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.film-good span::before { content: ""; width: 6px; height: 6px; background: var(--accent); }
.film.is-calm .film-good p { opacity: 1; transform: none; }
.film.is-calm .film-good p:nth-child(1) { transition-delay: 1s; }
.film.is-calm .film-good p:nth-child(2) { transition-delay: 1.25s; }
.film.is-calm .film-good p:nth-child(3) { transition-delay: 1.5s; }
.clip:nth-child(n+15) { width: clamp(160px, 14vw, 215px); }
@media (max-width: 820px) {
  .film-good { grid-template-columns: 1fr; gap: 10px; margin-top: 28px; }
  .film-good p { font-size: 16px; padding: 10px 14px 12px; }
  .film-centre { top: 44%; }
}
@media (max-width: 820px) {
  .clip, .clip:nth-child(4n+1), .clip:nth-child(n+15) { width: 136px; padding: 9px 10px 11px; }
  .clip:nth-child(n+11) { display: block; }
  .clip:nth-child(n+19) { display: none; }
  .clip-head { font-size: 13.5px; margin-bottom: 8px; }
  .clip-meta { font-size: 8px; margin-bottom: 6px; }
}
.film-stage { z-index: 0; }
.film-clips { position: absolute; inset: 0; z-index: 1; }
.film-count { z-index: 5; background: var(--surface); padding: 8px 12px 8px 0; }
.film-skip { z-index: 10; background: var(--surface); }