/* fx/about.css — lane 6: About + team + testimonials. Prefix .fxab-. */
:root{
  /* Worn-ink mask: speckled alpha so seals read as pressed ink, not flat plastic. */
  --fxab-worn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -13 0 0 0 9.75'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Hanko seal ─────────────────────────────────────────── */
.fxab-slot{position:relative;width:6rem;height:6rem;margin:0 auto 1.25rem;display:grid;place-items:center}
.fxab-seal{
  --fxab-ink:#c93812;
  position:relative;display:inline-grid;place-items:center;
  width:6rem;height:6rem;border-radius:20%;
  background:var(--fxab-ink);color:#fff;
  font-family:var(--fx-serif);font-size:2.4rem;line-height:1;
  box-shadow:inset 0 0 0 5px var(--fxab-ink),inset 0 0 0 7px rgba(255,255,255,.92);
  transform:rotate(-3deg);
  -webkit-mask-image:var(--fxab-worn);mask-image:var(--fxab-worn);
  -webkit-mask-size:140px 140px;mask-size:140px 140px;-webkit-mask-position:var(--fxab-mp,0 0);mask-position:var(--fxab-mp,0 0);
  transition:transform var(--fx-med) var(--fx-ease-out),filter var(--fx-med) ease;
}
.fxab-seal--sm{width:3.6rem;height:3.6rem;font-size:1.5rem;box-shadow:inset 0 0 0 3px var(--fxab-ink),inset 0 0 0 4.5px rgba(255,255,255,.92)}
.fxab-seal--xs{width:2.6rem;height:2.6rem;font-size:1rem;letter-spacing:-.02em;box-shadow:inset 0 0 0 2.5px var(--fxab-ink),inset 0 0 0 3.5px rgba(255,255,255,.92);opacity:.9}
a:hover .fxab-seal,a:focus-visible .fxab-seal{transform:rotate(0deg) scale(1.04);filter:saturate(1.25) brightness(1.06)}
/* ink squash halo, lives on the slot so the mask doesn't eat it */
.fxab-halo{position:absolute;inset:-14%;border-radius:30%;background:radial-gradient(closest-side,rgba(201,56,18,.28),rgba(201,56,18,0));opacity:0;pointer-events:none}

html.fxab-armed .fxab-stamp{opacity:0;transform:scale(1.4) rotate(-12deg)}
html.fxab-armed .fxab-stamp.fxab-pressed{animation:fxab-press .66s var(--fx-ease-forge) var(--fxab-d,0s) both}
html.fxab-armed .fxab-pressed + .fxab-halo,html.fxab-armed .fxab-pressed ~ .fxab-halo{animation:fxab-squash 1.1s ease-out calc(var(--fxab-d,0s) + .3s) both}
@keyframes fxab-press{
  0%{opacity:0;transform:scale(1.4) rotate(-12deg)}
  55%{opacity:1;transform:scale(.93) rotate(-3deg)}
  78%{transform:scale(1.03) rotate(-3deg)}
  100%{opacity:1;transform:scale(1) rotate(-3deg)}
}
@keyframes fxab-squash{0%{opacity:0;transform:scale(.7)}35%{opacity:1}100%{opacity:0;transform:scale(1.25)}}

/* embers that fly off a seal when someone types "forge" */
.fxab-ember{position:absolute;left:50%;top:45%;width:4px;height:4px;margin:-2px;border-radius:50%;background:var(--fx-gold);box-shadow:0 0 6px 2px rgba(249,115,82,.75);pointer-events:none;animation:fxab-rise 1.5s var(--fx-ease-out) var(--fxab-ed,0s) both}
@keyframes fxab-rise{0%{opacity:0;transform:translate(0,0) scale(1)}12%{opacity:1}100%{opacity:0;transform:translate(var(--dx,0),var(--dy,-80px)) scale(.25)}}

/* ── Drop cap that bleeds in like ink ───────────────────── */
.fxab-cap{float:left;position:relative;z-index:0;font-family:var(--fx-serif);font-size:4em;line-height:.8;margin:.05em .1em 0 0;color:var(--fx-navy);font-weight:400}
.fxab-cap::before{content:"";position:absolute;z-index:-1;left:-.28em;top:-.22em;width:1.25em;height:1.35em;
  border-radius:46% 54% 41% 59%/57% 43% 57% 43%;
  background:radial-gradient(60% 55% at 45% 50%,rgba(20,17,66,.10),rgba(20,17,66,.04) 65%,rgba(20,17,66,0));
  transform:rotate(-8deg)}
html.fxab-armed .fxab-cap.fxab-pre{opacity:0;filter:blur(9px);transform:scale(1.12)}
html.fxab-armed .fxab-cap.fxab-pre::before{opacity:0;transform:rotate(-8deg) scale(.25)}
.fxab-cap.fxab-inked{transition:opacity 1.3s ease,filter 1.7s var(--fx-ease-out),transform 1.7s var(--fx-ease-out)}
.fxab-cap.fxab-inked::before{transition:opacity 1.6s ease .15s,transform 2.4s var(--fx-ease-out) .15s}

/* ── Brush icons that draw themselves ───────────────────── */
.fxab-brush{display:block;width:3.5rem;height:3.5rem;margin:0 auto 1rem;overflow:visible}
.fxab-brush path{fill:none;stroke:var(--fx-ember-deep);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.fxab-brush .fxab-thin{stroke-width:1.8;opacity:.75}
.fxab-brush .fxab-dot{fill:var(--fx-navy);stroke:none}
html.fxab-armed .fxab-brush path{stroke-dasharray:1;stroke-dashoffset:1}
html.fxab-armed .fxab-brush .fxab-dot{opacity:0}
html.fxab-armed .fxab-brush.fxab-drawn path{stroke-dashoffset:0;transition:stroke-dashoffset 1.25s var(--fx-ease-forge) calc(var(--fxab-d,0s) + var(--fxab-p,0s))}
html.fxab-armed .fxab-brush.fxab-drawn .fxab-dot{opacity:1;transition:opacity .5s ease calc(var(--fxab-d,0s) + 1.1s)}

/* generic: ink-in text, self-drawing stroke icons */
/* a11y 2026-10-01: the ink lands as a left-to-right brush wipe at full colour; an opacity+blur fade let scanners read the stats at 2.2:1 mid-bleed */
html.fxab-armed .fxab-inkin.fxab-pre{clip-path:inset(-10% 100% -10% 0)}
.fxab-inkin.fxab-inked{clip-path:inset(-10% -2% -10% 0);transition:clip-path 1.1s var(--fx-ease-out) var(--fxab-d,0s)}
html.fxab-armed .fxab-draw path{stroke-dasharray:1;stroke-dashoffset:1}
html.fxab-armed .fxab-draw.fxab-drawn path{stroke-dashoffset:0;transition:stroke-dashoffset 1.4s var(--fx-ease-forge) var(--fxab-d,0s)}

/* ── Linger reveals ─────────────────────────────────────── */
.fxab-whisper{font-family:var(--fx-serif);font-style:italic;font-size:.95rem;color:var(--fx-ember-deep);min-height:1.4em;margin:.5rem 0 0;opacity:0;transform:translateY(4px);transition:opacity .7s ease,transform .7s var(--fx-ease-out)}
.fxab-whisper.fxab-say{opacity:1;transform:none}
.fxab-whisper--dark{color:var(--fx-gold)}

/* the Coke Zero tucked behind Eric's card */
.fxab-canwrap{position:relative;isolation:isolate}
.fxab-canwrap > a{display:block;height:100%}
.fxab-can{position:absolute;z-index:-1;right:18px;top:6px;width:28px;height:52px;pointer-events:none;
  transform:translateY(0) rotate(0deg);transition:transform .9s var(--fx-ease-out)}
.fxab-can svg{display:block;width:100%;height:100%;filter:drop-shadow(0 4px 5px rgba(0,0,0,.25))}
.fxab-canwrap.fxab-found .fxab-can{transform:translateY(-47px) rotate(7deg)}
.fxab-canline{position:absolute;right:56px;top:-30px;z-index:1;margin:0;font-size:.85rem;white-space:nowrap;pointer-events:none}
.fxab-bead{animation:none}
.fxab-canwrap.fxab-found .fxab-bead{animation:fxab-bead 2.8s ease-in 1s infinite}
@keyframes fxab-bead{0%{transform:translateY(0);opacity:0}15%{opacity:.85}80%{opacity:.85}100%{transform:translateY(24px);opacity:0}}

/* Bijan's layout grid */
.fxab-gridhost{position:relative}
.fxab-grid{position:absolute;inset:-1.5rem 0;display:grid;grid-template-columns:repeat(12,1fr);gap:24px;pointer-events:none;opacity:0;transition:opacity .9s ease;z-index:0;
  background:repeating-linear-gradient(to bottom,rgba(20,17,66,.07) 0 1px,transparent 1px 8px)}
.fxab-grid span{background:rgba(230,73,37,.075);border-left:1px solid rgba(230,73,37,.22);border-right:1px solid rgba(230,73,37,.22)}
.fxab-grid b{position:absolute;left:0;top:-1.6rem;font:500 .7rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;color:#b83310;background:#fff;padding:.3rem .5rem;border:1px solid rgba(230,73,37,.35);border-radius:4px}
.fxab-found .fxab-grid{opacity:1}
.fxab-gridhost > :not(.fxab-grid){position:relative;z-index:1}

/* Greg's cursor + terminal */
.fxab-caret{display:inline-block;width:.55em;height:1.05em;margin-left:.2em;vertical-align:-.15em;background:var(--fx-gold);animation:fxab-blink 1.1s steps(1) infinite}
.fxab-caret--dark{background:var(--fx-ember-deep)}
@keyframes fxab-blink{50%{opacity:0}}
.fxab-termhost{position:relative}
.fxab-term{position:absolute;left:0;top:100%;margin:.9rem 0 0;font:500 .82rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--fx-navy);opacity:0;transition:opacity .5s ease;white-space:nowrap}
.fxab-term i{font-style:normal;color:#b83310}
.fxab-found .fxab-term{opacity:1}

/* personal signature seal under each bio */
.fxab-sig{position:absolute;right:0;top:100%;margin-top:.9rem!important}

/* ── Testimonials as letters ────────────────────────────── */
.fxab-letter{background-color:#fffdf8!important;border-top-right-radius:0!important}
.fxab-letter::before{content:"";position:absolute;top:-1px;right:-1px;width:22px;height:22px;
  background:linear-gradient(225deg,#f6f6f6 0 50%,#e9e0cc 50% 100%);box-shadow:-2px 2px 3px rgba(20,17,66,.08);border-bottom-left-radius:3px}
.fxab-letter .ifs-testimonial-text{background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(1.75em - 1px),rgba(20,17,66,.07) calc(1.75em - 1px),rgba(20,17,66,.07) 1.75em)}
.fxab-lseal{position:absolute;right:16px;bottom:-15px;z-index:2;pointer-events:none}
.ifs-testimonial-featured .fxab-lseal{top:22px;right:26px;bottom:auto}
.ifs-testimonial-featured .ifs-quote-mark{transition:color 1.6s ease,transform 1.6s var(--fx-ease-out)}
.ifs-testimonial-featured.fxab-found .ifs-quote-mark{color:rgba(230,73,37,.2);transform:scale(1.12) rotate(-4deg)}
.fxab-letters-say{text-align:center}

@media (max-width:640px){
  .fxab-grid{grid-template-columns:repeat(4,1fr);gap:16px}
  .fxab-grid span:nth-child(n+6){display:none}
  .fxab-term{font-size:.75rem}
  .fxab-sig{margin-top:.3rem!important}
  .fxab-sig .fxab-seal--sm{width:3.1rem;height:3.1rem;font-size:1.3rem}
}

@media (prefers-reduced-motion: reduce){
  .fxab-stamp,.fxab-cap,.fxab-cap::before,.fxab-inkin,.fxab-draw path,.fxab-brush path,.fxab-brush .fxab-dot{animation:none!important;transition:none!important;opacity:1!important;filter:none!important;stroke-dashoffset:0!important;clip-path:none!important}
  .fxab-stamp{transform:rotate(-3deg)!important}
  .fxab-ember,.fxab-halo{display:none}
  .fxab-caret{animation:none}
  .fxab-can,.fxab-grid,.fxab-term,.fxab-whisper,.ifs-testimonial-featured .ifs-quote-mark{transition:none}
  .fxab-canwrap.fxab-found .fxab-bead{animation:none;opacity:.85}
}
.ifs-testimonial-featured.fxab-letter > blockquote{padding-right:3rem}
@media (max-width:640px){.ifs-testimonial-featured.fxab-letter > blockquote{padding-right:2.4rem}.ifs-testimonial-featured .fxab-lseal{top:16px;right:14px}}