/* ==========================================================================
   EITRI — the story loop

   Five beats, one clock: a creator shoots something, tries to cut it himself,
   loses the evening to it, sends it here, and gets it back while he is doing
   something else. That is the whole product, and it is faster to watch than
   to read.

   Drawn rather than filmed, in the same vocabulary as the rest of the site:
   near-black ground, silver line, exactly one warm thing. The character is
   built from primitives — circles, rounded rects, two dots for eyes — because
   a face with detail invites you to read the face, and the thing worth
   reading is what is happening to his evening.

   ONE 20s clock drives every layer. Each beat owns a slice of it, so nothing
   needs to be sequenced in JavaScript and the beats cannot drift apart.
   ========================================================================== */

.story{
  position:relative;
  margin-top:26px;
  border:1px solid var(--line);
  border-radius:var(--r-card);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,106,31,.07) 0%, transparent 62%),
    var(--panel);
  overflow:hidden;
  isolation:isolate;
}
.story-svg{display:block;width:100%;height:auto}

/* The caption changes with the beat. Mono, because it is a label on a
   diagram, not a line of prose. */
.story-cap{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:center;gap:9px;
  padding:11px 14px;
  border-top:1px solid var(--line);
  background:rgba(10,10,12,.72);
  backdrop-filter:blur(7px);
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-2);
  min-height:40px;
}
.story-cap i{
  flex:0 0 auto;width:5px;height:5px;border-radius:50%;
  background:var(--orange);
}
.story-cap span{
  position:absolute;left:30px;right:14px;
  opacity:0;
  animation:story-cap 20s linear infinite;
}
.story-cap span:nth-child(2){animation-delay:0s}
.story-cap span:nth-child(3){animation-delay:4s}
.story-cap span:nth-child(4){animation-delay:8s}
.story-cap span:nth-child(5){animation-delay:11.4s}
.story-cap span:nth-child(6){animation-delay:14.2s}
@keyframes story-cap{
  0%      {opacity:0;transform:translateY(4px)}
  1.5%,17%{opacity:1;transform:translateY(0)}
  19%,100%{opacity:0;transform:translateY(-4px)}
}

/* ------------------------------------------------------------- the beats */
/* Each beat holds the stage for its slice and hands over with a short
   crossfade. Percentages are of 20s: 0-4, 4-8, 8-11.4, 11.4-14.2, 14.2-20. */
.beat{opacity:0;animation:20s linear infinite}
.beat-1{animation-name:beat-1}
.beat-2{animation-name:beat-2}
.beat-3{animation-name:beat-3}
.beat-4{animation-name:beat-4}
.beat-5{animation-name:beat-5}

@keyframes beat-1{ 0%{opacity:0} 2%,17%{opacity:1} 21%,100%{opacity:0} }
@keyframes beat-2{ 0%,19%{opacity:0} 22%,37%{opacity:1} 41%,100%{opacity:0} }
@keyframes beat-3{ 0%,39%{opacity:0} 42%,53%{opacity:1} 57%,100%{opacity:0} }
@keyframes beat-4{ 0%,55%{opacity:0} 58%,68%{opacity:1} 71%,100%{opacity:0} }
@keyframes beat-5{ 0%,69%{opacity:0} 72%,97%{opacity:1} 100%{opacity:0} }

/* ------------------------------------------------------------ ink & fill */
.ln{fill:none;stroke:#C8CCD2;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ln-2{fill:none;stroke:#8E949C;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ln-3{fill:none;stroke:rgba(200,204,210,.34);stroke-width:1.6;stroke-linecap:round}
.sld{fill:#C8CCD2}
.sld-2{fill:#3A3E45}
.pan{fill:#17171B;stroke:rgba(255,255,255,.14);stroke-width:1.6}
.warm{fill:#FF6A1F}
.warm-ln{fill:none;stroke:#FF6A1F;stroke-width:2.4;stroke-linecap:round}
.bad{fill:none;stroke:#F2564B;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* -- beat 1: shooting -------------------------------------------------- */
/* The record dot is the only thing moving, because at this point in the
   story nothing has gone wrong yet. */
.rec{animation:rec 1.6s ease-in-out infinite}
@keyframes rec{0%,100%{opacity:1}50%{opacity:.25}}
.wave{transform-origin:462px 172px;animation:wave 1.9s ease-in-out infinite}
@keyframes wave{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(11deg)}}

/* -- beat 2: trying to cut it --------------------------------------------- */
/* A playhead scrubbing back and forth over the same two seconds. Anyone who
   has tried to cut their own footage recognises the motion. */
.scrub{animation:scrub 2.4s ease-in-out infinite}
@keyframes scrub{0%,100%{transform:translateX(0)}50%{transform:translateX(74px)}}
.type-a{animation:type-a 0.9s steps(2) infinite}
@keyframes type-a{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}

/* -- beat 3: it is not working ------------------------------------------- */
.slump{animation:slump 3s ease-in-out infinite}
@keyframes slump{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.flick{animation:flick 1.1s steps(1) infinite}
@keyframes flick{0%,49%{opacity:1}50%,100%{opacity:.25}}
.clock-h{transform-origin:520px 128px;animation:clock 3.2s linear infinite}
@keyframes clock{to{transform:rotate(360deg)}}

/* -- beat 4: sending it -------------------------------------------------- */
.lift{animation:lift 2.6s cubic-bezier(.16,1,.3,1) infinite}
@keyframes lift{
  0%{transform:translateY(0);opacity:0}
  14%{opacity:1}
  70%,100%{transform:translateY(-92px);opacity:0}
}
.lift-b{animation-delay:.55s}
.lift-c{animation-delay:1.1s}

/* -- beat 5: it comes back finished --------------------------------------- */
/* The bar fills and the playhead crosses it: work happening somewhere else,
   which is the point of the whole beat. */
.fill{transform-origin:left center;animation:fill 5.4s cubic-bezier(.4,0,.2,1) infinite}
@keyframes fill{0%{transform:scaleX(0)}72%,100%{transform:scaleX(1)}}
.head{animation:head 5.4s cubic-bezier(.4,0,.2,1) infinite}
@keyframes head{0%{transform:translateX(0)}72%,100%{transform:translateX(150px)}}
.steam{animation:steam 3.4s ease-in-out infinite}
@keyframes steam{
  0%{opacity:0;transform:translateY(0) scaleX(1)}
  30%{opacity:.55}
  100%{opacity:0;transform:translateY(-15px) scaleX(1.5)}
}
.steam-b{animation-delay:1.1s}
.done{animation:done 5.4s ease-out infinite}
@keyframes done{0%,72%{opacity:0;transform:scale(.9)}80%,100%{opacity:1;transform:scale(1)}}

/* --------------------------------------------------------------- stilled */
/* Reduced motion gets the last beat, held: the creator relaxed and the edit
   finished. If only one frame of this story is allowed to exist, it should be
   the one that shows the outcome. */
@media (prefers-reduced-motion:reduce){
  .beat,.story-cap span{animation:none;opacity:0}
  .beat-5{opacity:1}
  .story-cap span:nth-child(6){opacity:1;transform:none}
  .rec,.wave,.scrub,.type-a,.slump,.flick,.clock-h,.lift,.steam{animation:none}
  .fill{animation:none;transform:scaleX(1)}
  .head{animation:none;transform:translateX(150px)}
  .done{animation:none;opacity:1;transform:none}
}

/* ==========================================================================
   Step glyphs

   One drawing per step, in the same line vocabulary as the story above it.
   Decorative by construction: every glyph restates the heading beside it and
   nothing more, so each is hidden from the accessibility tree rather than
   given a label a screen reader would have to hear twice.
   ========================================================================== */
.flow .card{display:flex;flex-direction:column}
.step-art{
  display:block;width:100%;height:auto;
  margin:0 0 14px;
  border-radius:9px;
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(255,106,31,.06) 0%, transparent 64%),
    #0E0E11;
  border:1px solid var(--line);
}
/* The accent appears once per glyph — the thing that step is actually about. */
.step-art .a{fill:none;stroke:#C8CCD2;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.step-art .b{fill:none;stroke:#7A7F87;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.step-art .o{fill:none;stroke:#FF6A1F;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.step-art .of{fill:#FF6A1F}
.step-art .f{fill:#26262C}