/* =========================================================================
   Home page pipeline: one recording travelling the pipe
   A card above each stage (.pc-strip > .pc) shows that stage at work on the
   same file; assets/js/pipeline.js moves .on along the stages, marks them
   .is-on / .is-done, and fills the tube to the active node (--p, 0..1).
   Scoped to .pipe-track.has-cards so the other pages' pipelines are untouched.
   Every card's resting style is its final frame: the keyframes only run
   under .pc.on, so with reduced motion each card still reads complete.
   ========================================================================= */

.pipe-track.has-cards{margin-top:60px}

/* ---- Card strip, one column per stage, sitting on top of the track ---- */
.pc-strip{position:absolute;left:0;right:0;bottom:100%;height:60px;display:grid;grid-template-columns:repeat(5,1fr);gap:20px;z-index:2;pointer-events:none}
.pc{position:relative}
.pc-lbl{display:none}
.pc-card{position:absolute;left:0;bottom:-6px;height:60px;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 14px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px -14px rgba(20,33,61,.3);font-size:12px;line-height:1.2;color:var(--ink);white-space:nowrap}
.pc:last-child .pc-card{left:auto;right:0}
/* caret pointing at the node's centre, 42px into the column */
.pc::after{content:"";position:absolute;left:37px;bottom:-11px;width:10px;height:10px;background:#fff;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.pc-card,.pc-lbl{opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s}
.pc::after{opacity:0;visibility:hidden;transform:translateY(6px) rotate(45deg);transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s}
.pc.on .pc-card,.pc.on .pc-lbl{opacity:1;visibility:visible;transform:none}
.pc.on::after{opacity:1;visibility:visible;transform:rotate(45deg)}

.pc-row{display:flex;align-items:center;gap:8px}
.pc-mono{font-family:var(--mono);font-size:11.5px}
.pc-sub{font-size:11px;color:var(--slate)}
.pc-sub .pc-mono{font-size:11px;color:var(--ink)}

/* 1. Record: REC, timer, levels, bytes already streamed */
.pc-dot{width:8px;height:8px;border-radius:50%;background:var(--rec)}
.pc-bars{display:flex;align-items:center;gap:2px;height:14px}
.pc-bars i{width:3px;height:14px;border-radius:2px;background:var(--ink)}
.pc-bars i:nth-child(1){transform:scaleY(.5)}
.pc-bars i:nth-child(2){transform:scaleY(.9)}
.pc-bars i:nth-child(3){transform:scaleY(.6)}
.pc-bars i:nth-child(4){transform:scaleY(1)}
.pc-bars i:nth-child(5){transform:scaleY(.4)}
.pc.on .pc-dot{animation:blink 1.2s infinite}
.pc.on .pc-bars i{animation:pc-bar .45s ease-in-out infinite alternate}
.pc.on .pc-bars i:nth-child(2){animation-duration:.6s;animation-delay:-.2s}
.pc.on .pc-bars i:nth-child(3){animation-duration:.38s;animation-delay:-.1s}
.pc.on .pc-bars i:nth-child(4){animation-duration:.52s;animation-delay:-.3s}
.pc.on .pc-bars i:nth-child(5){animation-duration:.42s}

/* 2. Process: webm to mp4, the sideways phone frame turns upright, checks */
.pc-thumb{width:10px;height:15px;border:1.5px solid var(--ink);border-radius:2px;background:var(--ink-soft)}
.pc-prog{width:36px;height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.pc-prog i{display:block;height:100%;background:var(--ok);transform-origin:left}
.pc-tick{font-size:11px;font-weight:600;color:var(--ok)}
.pc.on .pc-prog i{animation:pc-grow 1.2s .3s var(--ease) both}
.pc.on .pc-thumb{animation:pc-upright .5s 1.4s var(--ease) both}
.pc.on .pc-tick{animation:pc-in .35s var(--ease) both}
.pc.on .pc-tick:nth-child(1){animation-delay:1.2s}
.pc.on .pc-tick:nth-child(2){animation-delay:1.9s}
.pc.on .pc-tick:nth-child(3){animation-delay:2.5s}

/* 3. Manage: the new recording slides into the dashboard list */
.pc-list{height:44px;overflow:hidden;margin:0 -6px}
.pc-rows{display:grid;gap:4px}
.pc-item{height:20px;display:flex;align-items:center;gap:7px;padding:0 6px;border-radius:5px;font-size:11.5px}
.pc-item i{width:14px;height:10px;border-radius:2px;background:linear-gradient(160deg,#3D4F7A,#1B2A4A)}
.pc-item span{font-family:var(--mono);font-size:10.5px;color:var(--slate)}
.pc-item.new{background:var(--ok-soft)}
.pc.on .pc-rows{animation:pc-slide .6s .5s var(--ease) both}
.pc.on .pc-item.new{animation:pc-fade .6s .5s both}

/* 4. Store: the path is written out in your bucket, then the webhook fires */
.pc-type{clip-path:inset(0)}
.pc-ok{color:var(--ok);font-weight:700}
.pc-hook{font-size:11px;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--ok-soft);color:var(--ok)}
.pc.on .pc-type{animation:pc-type 1.3s .2s steps(var(--n,30)) both}
.pc.on .pc-ok{animation:pc-in .3s 1.6s var(--ease) both}
.pc.on .pc-hook{animation:pc-in .35s 2.1s var(--ease) both}

/* 5. Play: it plays through, and the links are ready */
.pc-play{position:relative;width:12px;height:12px}
.pc-play svg{position:absolute;inset:0;width:12px;height:12px;fill:var(--ink)}
.pc-play svg+svg{opacity:0}
.pc-track{width:110px;height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.pc-track i{display:block;height:100%;background:var(--rec);transform-origin:left}
.pc-chip{font-size:11px;font-weight:600;padding:2px 9px;border:1px solid var(--line);border-radius:999px}
.pc.on .pc-play svg{animation:pc-playi 3.3s .2s both}
.pc.on .pc-play svg+svg{animation-name:pc-pause}
.pc.on .pc-track i{animation:pc-grow 3s .3s linear both}
.pc.on .pc-chip{animation:pc-in .35s .7s var(--ease) both}
.pc.on .pc-chip+.pc-chip{animation-delay:1.1s}

@keyframes pc-bar{to{transform:scaleY(.25)}}
@keyframes pc-grow{from{transform:scaleX(0)}}
@keyframes pc-upright{from{transform:rotate(-90deg)}}
@keyframes pc-in{from{opacity:0;transform:translateY(4px)}}
@keyframes pc-fade{from{opacity:0}}
@keyframes pc-slide{from{transform:translateY(-24px)}}
@keyframes pc-type{from{clip-path:inset(0 100% 0 0)}}
@keyframes pc-playi{0%,100%{opacity:1}6%,94%{opacity:0}}
@keyframes pc-pause{0%,100%{opacity:0}6%,94%{opacity:1}}
@keyframes pc-ring{from{transform:scale(1);opacity:.6}to{transform:scale(1.3);opacity:0}}

/* ---- Cards used by the video and audio recorder pages ---- */

/* A card laid out sideways: a small picture, then two rows */
.pc-card.pc-h{flex-direction:row;align-items:center;gap:10px}
.pc-col{display:flex;flex-direction:column;gap:6px}
.pc-h .pc-col b{font-size:12px}

/* Capture (video): the face drifts into the positioning outline, which turns green */
.pc-vf{position:relative;width:52px;height:38px;border-radius:5px;background:linear-gradient(160deg,#1B2A4A,#0F1A33);overflow:hidden;flex-shrink:0}
.pc-vf::before,.pc-vf::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:26px;margin:-15px 0 0 -10px;border-radius:50%;z-index:1}
.pc-vf::before{border:1.5px dashed rgba(255,255,255,.5)}
.pc-vf::after{border:1.5px solid var(--ok)}
.pc-face{position:absolute;inset:0}
.pc-face i{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-11px 0 0 -6px;border-radius:50%;background:#C9B7A3}
.pc-face b{position:absolute;left:50%;bottom:-7px;width:30px;height:16px;margin-left:-15px;border-radius:50% 50% 0 0;background:#2C3D63}
.pc.on .pc-face{animation:pc-drift .8s .3s var(--ease) both}
.pc.on .pc-vf::after{animation:pc-fade .3s 1.1s both}

/* Text that swaps in place: .pc-swap stacks its spans in one cell and the last
   is the final state. .was leaves at --a, an optional .blip shows from --a, and
   the last arrives at --b (--a when there is no blip). */
.pc-swap{display:grid}
.pc-swap>*{grid-area:1/1}
.pc-swap>.was,.pc-swap>.blip{opacity:0}
.pc-warn{font-size:11px;font-weight:600;color:#9A6B00}
.pc.on .pc-swap>.was{animation:pc-out var(--a,1.2s) both}
.pc.on .pc-swap>.blip{animation:pc-blip calc(var(--b) - var(--a,1.2s)) var(--a,1.2s) both}
.pc.on .pc-swap>:last-child{animation:pc-in .35s var(--b,var(--a,1.2s)) var(--ease) both}

/* Transcription: the first words written out after the language is detected */
.pc-say{font-size:11.5px;font-style:italic;color:var(--slate)}
.pc.on .pc-say{animation:pc-type 1.8s 1.1s steps(var(--n,30)) both}

/* Convert (video): snapshot and filmstrip frames pop out one by one */
.pc-film{display:flex;gap:2px}
.pc-film i{width:10px;height:7px;border-radius:1.5px;background:linear-gradient(160deg,#3D4F7A,#1B2A4A)}
.pc-film i:first-child{width:14px;height:10px;margin-right:3px;outline:1.5px solid var(--ok);outline-offset:1px}
.pc.on .pc-film i{animation:pc-pop .3s var(--ease) both}
.pc.on .pc-film i:nth-child(1){animation-delay:1.2s}
.pc.on .pc-film i:nth-child(2){animation-delay:1.5s}
.pc.on .pc-film i:nth-child(3){animation-delay:1.6s}
.pc.on .pc-film i:nth-child(4){animation-delay:1.7s}
.pc.on .pc-film i:nth-child(5){animation-delay:1.8s}
.pc.on .pc-film i:nth-child(6){animation-delay:1.9s}
.pc.on .pc-film i:nth-child(7){animation-delay:2s}
.pc.on .pc-film+.pc-sub{animation:pc-in .35s 2.1s var(--ease) both}

/* Capture (audio): a device list, where a newly plugged-in mic appears on top */
.pc-item.dev i{width:8px;height:8px;margin:0 3px;border-radius:50%;background:var(--line)}
.pc-item.dev.new i{background:var(--ok)}

/* Encode (audio): a wider waveform */
.pc-wave{display:flex;align-items:center;gap:2px;height:16px}
.pc-wave i{width:3px;height:16px;border-radius:2px;background:var(--ink);transform:scaleY(.5)}
.pc-wave i:nth-child(3n){transform:scaleY(.9)}
.pc-wave i:nth-child(3n+1){transform:scaleY(.35)}
.pc.on .pc-wave i{animation:pc-bar .5s ease-in-out infinite alternate}
.pc.on .pc-wave i:nth-child(3n){animation-duration:.37s;animation-delay:-.2s}
.pc.on .pc-wave i:nth-child(3n+1){animation-duration:.61s;animation-delay:-.4s}
.pc.on .pc-wave i:nth-child(4n){animation-duration:.44s}
.pc.on .pc-hook.late{animation:pc-in .35s 1.2s var(--ease) both}

@keyframes pc-drift{from{transform:translate(13px,3px)}}
@keyframes pc-out{0%,90%{opacity:1}to{opacity:0}}
@keyframes pc-blip{0%,100%{opacity:0}12%,88%{opacity:1}}
@keyframes pc-pop{from{opacity:0;transform:scale(.4)}}

/* ---- Tube fill: from node 1's centre to the active node's ----
   A column plus its gap is (100% + 20px) / 5, so node 5 sits 4/5 of that in. */
.pipe-fill{position:absolute;left:42px;top:62px;height:4px;width:calc((100% + 20px) * .8);border-radius:2px;background:var(--rec);transform-origin:left;transform:scaleX(var(--p,0));transition:transform .7s var(--ease),background .3s;z-index:1}
.pipe-track.is-done .pipe-fill{background:var(--ok)}
.pipe-track.live .pipe-svg .flow{display:none}

/* ---- Nodes are buttons that jump to their stage ---- */
.pipe-track.has-cards .node{position:relative;padding:0;font:inherit;cursor:pointer}
.pipe-track.has-cards .node:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.pipe-track.live .stage .node{border-color:var(--line);background:#fff;transition:border-color .3s,background .3s}
.pipe-track.live .stage .node svg{stroke:var(--ink);transition:stroke .3s}
.pipe-track.live .stage.is-done .node{border-color:var(--ok);background:var(--ok-soft)}
.pipe-track.live .stage.is-done .node svg{stroke:var(--ok)}
.pipe-track.live .stage.is-on .node{border-color:var(--rec);background:var(--rec-soft)}
.pipe-track.live .stage.is-on .node svg{stroke:var(--rec)}
.pipe-track.live .stage.is-on .node::before{content:"";position:absolute;inset:-1.5px;border-radius:50%;border:2px solid var(--rec);animation:pc-ring 1.6s ease-out infinite;pointer-events:none}
.pipe-track.live .stage.is-done .node::after{content:"✓";position:absolute;right:-2px;top:-2px;width:22px;height:22px;border-radius:50%;background:var(--ok);color:#fff;font-size:12px;font-weight:700;line-height:22px;text-align:center;animation:pc-in .3s var(--ease) both}

/* ---- Stacked stages: one card slot above them, labelled with the step ---- */
@media (max-width:1000px){
  .pipe-track.has-cards{margin-top:16px}
  .pc-strip{position:relative;bottom:auto;height:auto;grid-template-columns:1fr;gap:0;margin-bottom:28px}
  .pc{grid-area:1/1;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
  .pc::after{display:none}
  .pc-lbl{display:block;font-family:var(--mono);font-size:12px;color:var(--slate)}
  .pc-card,.pc:last-child .pc-card{position:relative;left:auto;right:auto;bottom:auto}
  .pipe-fill{display:none}
  /* the active stage reads as a raised card rather than an outline */
  .pipe-track.has-cards .stage{padding:16px;border:1px solid transparent;border-radius:var(--r-md);transition:background .3s,border-color .3s,box-shadow .3s}
  .pipe-track.live .stage.is-on{background:#fff;border-color:var(--line);box-shadow:0 18px 36px -24px rgba(20,33,61,.4)}
}
/* Phones: each stage is one row, node beside its text */
@media (max-width:640px){
  .pipe-track.has-cards .stages{gap:14px}
  .pipe-track.has-cards .stage{display:grid;grid-template-columns:52px 1fr;column-gap:16px;align-items:start;margin:0;padding:14px}
  .pipe-track.has-cards .stage .node{grid-row:1/span 3;width:52px;height:52px;margin:0}
  .pipe-track.has-cards .stage .node svg{width:22px;height:22px}
  .pipe-track.has-cards .stage .num{display:none}
  .pipe-track.has-cards .stage h3{font-size:18px;margin:2px 0 4px}
  .pipe-track.live .stage.is-done .node::after{width:18px;height:18px;line-height:18px;font-size:10px;right:-4px;top:-4px}
}