/* ============================================================================
   SCENARIO HERO FILM
   A four-beat explainer that narrates one scenario end to end: the trigger
   fires, uxjo acts on a named channel, a guardrail is checked, the outcome is
   recorded. Every page carries its own copy, so no two play the same story.

   Pure CSS on one shared 11s timeline: every element animates for the same
   duration and differs only in its keyframe stops, so the beats stay in sync
   forever with no JS and no drift.
   ========================================================================== */

.sfilm{--dur:11s;position:relative;width:100%;max-width:460px;margin-inline:auto}

.sf-win{background:var(--bg-surface);border:1px solid var(--border-1);border-radius:var(--r-2xl);
  box-shadow:var(--sh-lg);overflow:hidden;display:grid;grid-template-rows:auto 1fr auto}

/* ---- title bar ---- */
.sf-bar{display:flex;align-items:center;gap:.5rem;padding:.6rem .8rem;
  border-bottom:1px solid var(--border-1);background:var(--neutral-50)}
.sf-bar .bi{width:16px;height:16px;flex:none}
.sf-bar b{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--fg-1);letter-spacing:-.01em}
.sf-bar .live{margin-left:auto;display:inline-flex;align-items:center;gap:.35rem;
  font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.09em;text-transform:uppercase;
  color:var(--fg-4)}
.sf-bar .live i{width:6px;height:6px;border-radius:50%;background:var(--grass);display:block;
  animation:sfPulse 2s ease-in-out infinite}
@keyframes sfPulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---- the feed ---- */
.sf-body{display:grid;gap:.55rem;align-content:start;padding:.8rem;min-height:0}

.sf-row{opacity:0;transform:translateY(8px)}

/* 1 · the trigger event */
.sf-ev{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:.55rem;align-items:center;
  border:1.5px solid var(--c);background:var(--cs);border-radius:var(--r-md);padding:.5rem .6rem}
.sf-ev .ic{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;
  background:var(--bg-surface);color:var(--cd)}
.sf-ev .ic svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.2;fill:none}
.sf-ev b{display:block;font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--fg-1);
  line-height:1.25;letter-spacing:-.01em}
.sf-ev small{display:block;font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--fg-4);
  letter-spacing:.05em}
.sf-ev .t{font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--fg-4);white-space:nowrap}

/* 2 · uxjo composes, then sends */
.sf-type{display:inline-flex;align-items:center;gap:.3rem;background:var(--bg-subtle);
  border-radius:var(--r-pill);padding:.42rem .7rem;justify-self:start}
.sf-type i{width:5px;height:5px;border-radius:50%;background:var(--fg-4);display:block;
  animation:sfDot 1.1s ease-in-out infinite}
.sf-type i:nth-child(2){animation-delay:.14s}
.sf-type i:nth-child(3){animation-delay:.28s}
@keyframes sfDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}

.sf-msg{position:relative;border-radius:14px 14px 14px 4px;padding:.6rem .7rem;
  background:var(--bg-subtle);border:1px solid var(--border-1)}
.sf-msg p{font-size:var(--fs-sm);line-height:1.5;color:var(--fg-1);text-wrap:pretty}
.sf-msg .via{display:flex;align-items:center;gap:.3rem;margin-top:.4rem;
  font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.06em;color:var(--fg-4)}
.sf-msg .via .bi{width:11px;height:11px;flex:none}

/* 3 · the guardrail */
.sf-guard{display:grid;grid-template-columns:18px minmax(0,1fr);gap:.5rem;align-items:center;
  background:var(--bg-subtle);border-radius:var(--r-md);padding:.45rem .6rem}
.sf-guard .sh{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;
  background:var(--indigo-soft);color:var(--indigo-deep)}
.sf-guard .sh svg{width:10px;height:10px;stroke:currentColor;stroke-width:2.6;fill:none}
.sf-guard span{font-size:var(--fs-xs);color:var(--fg-2);line-height:1.4}
.sf-guard b{color:var(--fg-1);font-weight:var(--fw-bold)}

/* 4 · the outcome, written back */
.sf-foot{display:flex;align-items:center;gap:.5rem;padding:.6rem .8rem;
  border-top:1px solid var(--border-1);background:var(--neutral-50)}
.sf-out{display:inline-flex;align-items:center;gap:.4rem;background:var(--grass-soft);
  color:var(--grass-deep);border-radius:var(--r-pill);padding:.3rem .7rem;
  font-size:var(--fs-xs);font-weight:var(--fw-extra);white-space:nowrap}
.sf-out svg{width:12px;height:12px;stroke:currentColor;stroke-width:3;fill:none}
.sf-rec{margin-left:auto;font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--fg-4);
  letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- beat rail ---- */
.sf-rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem;margin-top:.85rem}
.sf-step{display:grid;gap:.3rem}
.sf-step .bar{height:3px;border-radius:99px;background:var(--border-2);overflow:hidden;position:relative}
.sf-step .bar i{position:absolute;inset:0;border-radius:99px;background:var(--c);
  transform:scaleX(0);transform-origin:left}
.sf-step span{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.07em;
  text-transform:uppercase;color:var(--fg-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ============================ the timeline ============================ */
@media (prefers-reduced-motion:no-preference){
  .sf-row{animation:sfIn var(--dur) linear infinite both}
  .sf-ev   {animation-name:sfEv}
  .sf-type {animation-name:sfType}
  .sf-msg  {animation-name:sfMsg}
  .sf-guard{animation-name:sfGuard}
  .sf-out  {animation:sfOut var(--dur) linear infinite both}
  .sf-rec  {animation:sfRec var(--dur) linear infinite both}
  .sf-step .bar i{animation:sfBar var(--dur) linear infinite both}
  .sf-step:nth-child(1) .bar i{animation-name:sfBar1}
  .sf-step:nth-child(2) .bar i{animation-name:sfBar2}
  .sf-step:nth-child(3) .bar i{animation-name:sfBar3}
  .sf-step:nth-child(4) .bar i{animation-name:sfBar4}
  .sf-step:nth-child(1) span{animation:sfLbl var(--dur) linear infinite both}
  .sf-step:nth-child(2) span{animation:sfLbl2 var(--dur) linear infinite both}
  .sf-step:nth-child(3) span{animation:sfLbl3 var(--dur) linear infinite both}
  .sf-step:nth-child(4) span{animation:sfLbl4 var(--dur) linear infinite both}
}

/* the event lands first and stays for the whole run */
@keyframes sfEv{
  0%{opacity:0;transform:translateY(10px) scale(.98)}
  4%{opacity:1;transform:none}
  93%{opacity:1;transform:none}
  98%,100%{opacity:0;transform:translateY(-6px)}
}
/* uxjo thinks, briefly */
@keyframes sfType{
  0%,12%{opacity:0;transform:translateY(6px);height:0;margin:0;padding-block:0}
  16%{opacity:1;transform:none;height:auto;padding-block:.42rem}
  26%{opacity:1;height:auto;padding-block:.42rem}
  29%,100%{opacity:0;height:0;margin:0;padding-block:0}
}
/* then the message it drafted */
@keyframes sfMsg{
  0%,28%{opacity:0;transform:translateY(8px)}
  33%{opacity:1;transform:none}
  93%{opacity:1;transform:none}
  98%,100%{opacity:0;transform:translateY(-6px)}
}
/* the guardrail that let it through */
@keyframes sfGuard{
  0%,50%{opacity:0;transform:translateY(8px)}
  55%{opacity:1;transform:none}
  93%{opacity:1;transform:none}
  98%,100%{opacity:0;transform:translateY(-6px)}
}
/* and the outcome on the record */
@keyframes sfOut{
  0%,70%{opacity:0;transform:translateY(6px) scale(.96)}
  75%{opacity:1;transform:none}
  94%{opacity:1;transform:none}
  99%,100%{opacity:0}
}
@keyframes sfRec{
  0%,76%{opacity:0}
  82%,94%{opacity:1}
  99%,100%{opacity:0}
}
@keyframes sfBar1{0%{transform:scaleX(0)}4%,100%{transform:scaleX(1)}}
@keyframes sfBar2{0%,28%{transform:scaleX(0)}33%,100%{transform:scaleX(1)}}
@keyframes sfBar3{0%,50%{transform:scaleX(0)}55%,100%{transform:scaleX(1)}}
@keyframes sfBar4{0%,70%{transform:scaleX(0)}75%,100%{transform:scaleX(1)}}
@keyframes sfLbl {0%{color:var(--fg-4)}4%,100%{color:var(--fg-2)}}
@keyframes sfLbl2{0%,28%{color:var(--fg-4)}33%,100%{color:var(--fg-2)}}
@keyframes sfLbl3{0%,50%{color:var(--fg-4)}55%,100%{color:var(--fg-2)}}
@keyframes sfLbl4{0%,70%{color:var(--fg-4)}75%,100%{color:var(--fg-2)}}

/* motion off: the finished story, all four beats visible at once */
@media (prefers-reduced-motion:reduce){
  .sf-row,.sf-out,.sf-rec{opacity:1;transform:none}
  .sf-type{display:none}
  .sf-step .bar i{transform:scaleX(1)}
  .sf-bar .live i{animation:none}
}

@media (max-width:899px){
  .sfilm{max-width:none}
  .sf-body{padding:.7rem;gap:.5rem}
  .sf-rail{gap:.3rem}
  .sf-step span{font-size:var(--fs-2xs)}
}
@media (max-width:400px){
  .sf-step:nth-child(2) span,.sf-step:nth-child(3) span{font-size:var(--fs-2xs)}
}