/* ============================================================
   WORKFLOW STEP ANIMATIONS — automation-steps.css
   Scroll-triggered: animations play once per viewport entry.
   .is-playing is added/removed by automation.js observer.
   ============================================================ */

/* ── 0. SHARED BASE ──────────────────────────────────────── */

.wf-anim {
  width: 100%; height: 100%;
  position: relative; overflow: hidden;
  font-family: 'Manrope', system-ui, sans-serif;
  background: #ffffff;
  display: flex; flex-direction: column;
  padding: clamp(10px, 2%, 16px) clamp(12px, 2.5%, 20px);
  gap: 8px;
}

.wfa-chrome {
  flex-shrink: 0; display: flex; align-items: center; gap: 7px;
  padding: 5px 8px;
  background: rgba(74,69,96,0.04);
  border: 1px solid rgba(10,10,10,0.07);
  border-radius: 7px;
}
.wfa-dots { display: flex; gap: 4px; flex-shrink: 0; }
.wfa-dots span {
  width: 6px; height: 6px; border-radius: 50%; display: block;
}
.wfa-dots span:nth-child(1) { background: #f5b8b8; }
.wfa-dots span:nth-child(2) { background: #f5dea8; }
.wfa-dots span:nth-child(3) { background: #b8f5cc; }

.wfa-bar {
  flex: 1; display: flex; align-items: center; gap: 5px;
  background: #fff; border: 1px solid rgba(10,10,10,0.07);
  border-radius: 5px; padding: 4px 8px;
  position: relative; overflow: hidden;
}
.wfa-lock {
  flex-shrink: 0; width: 7px; height: 8px;
  background: rgba(74,69,96,0.22); border-radius: 1.5px;
}
.wfa-url-text {
  font-size: clamp(8px, 1.3vw, 11px); font-weight: 600;
  color: rgba(74,69,96,0.85); white-space: nowrap;
  overflow: hidden; display: inline-block;
  clip-path: inset(0 100% 0 0); /* hidden by default */
}
.wfa-cursor {
  display: inline-block; width: 1px; height: 10px;
  background: rgba(74,69,96,0.6); vertical-align: middle;
  margin-left: 1px; flex-shrink: 0;
  /* ambient blink always running */
  animation: wfa-blink 0.85s step-end infinite;
}
@keyframes wfa-blink {
  0%, 100% { opacity: 1; } 50% { opacity: 0; }
}
.wfa-scan-bar {
  position: absolute; bottom: 0; left: 0; height: 2px; width: 0%;
  background: linear-gradient(90deg, #c5c0df, rgba(74,69,96,0.5));
  border-radius: 0 2px 2px 0;
}
.wfa-card {
  border-radius: 8px; border: 1px solid rgba(10,10,10,0.08);
  background: rgba(74,69,96,0.04);
  padding: clamp(7px, 1.5%, 11px);
}
.wfa-eyebrow {
  font-size: clamp(7px, 1vw, 9px); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #6b7280; display: block; margin-bottom: 6px;
}
.wfa-line {
  height: 7px; border-radius: 4px;
  background: rgba(74,69,96,0.18); margin-bottom: 4px;
}
.wfa-line.dark  { background: rgba(74,69,96,0.35); height: 9px; }
.wfa-line.light { background: rgba(74,69,96,0.10); }
.wfa-line.w45   { width: 45%; }
.wfa-line.w60   { width: 60%; }
.wfa-line.w75   { width: 75%; }
.wfa-line.w85   { width: 85%; }
.wfa-img-thumb {
  width: 100%; aspect-ratio: 1;
  background: linear-gradient(135deg, #e0ddec, #c5c0df);
  border-radius: 6px; margin-bottom: 6px;
  position: relative; overflow: hidden;
}
.wfa-img-thumb::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(255,255,255,0.3) 0%, transparent 60%);
}


/* ── 1. STEP 01 — PRODUKT INPUT ──────────────────────────── */

.wf-anim--01 .s01-body {
  flex: 1;
  display: flex;
  flex-direction: row;
  gap: 6px;
  align-items: stretch;
  min-height: 0;
}

.s01-img-card {
  flex: 1;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(10,10,10,0.07);
  background: rgba(74,69,96,0.05);
  opacity: 0;
  transform: translateY(-18px);
  min-width: 0;
}

.s01-img-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Keyframes */
@keyframes s01-url-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes s01-scanbar {
  0%   { width: 0%;   opacity: 1; }
  75%  { width: 100%; opacity: 1; }
  100% { width: 100%; opacity: 0; }
}
@keyframes s01-cursor-out {
  to { opacity: 0; }
}
@keyframes s01-imgdrop {
  from { opacity: 0; transform: translateY(-18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Triggered — URL animation first, then images drop in one by one */
.wf-anim--01.is-playing .wfa-url-text {
  animation: s01-url-reveal 1.1s ease-out 0.15s forwards;
}
.wf-anim--01.is-playing .wfa-cursor {
  animation: wfa-blink 0.85s step-end infinite,
             s01-cursor-out 0.2s ease 1.4s forwards;
}
.wf-anim--01.is-playing .wfa-scan-bar {
  animation: s01-scanbar 1.1s ease 1.0s forwards;
}
.wf-anim--01.is-playing .s01-img-card:nth-child(1) {
  animation: s01-imgdrop 0.4s cubic-bezier(0.22,1,0.36,1) 1.9s forwards;
}
.wf-anim--01.is-playing .s01-img-card:nth-child(2) {
  animation: s01-imgdrop 0.4s cubic-bezier(0.22,1,0.36,1) 2.25s forwards;
}
.wf-anim--01.is-playing .s01-img-card:nth-child(3) {
  animation: s01-imgdrop 0.4s cubic-bezier(0.22,1,0.36,1) 2.6s forwards;
}
.wf-anim--01.is-playing .s01-img-card:nth-child(4) {
  animation: s01-imgdrop 0.4s cubic-bezier(0.22,1,0.36,1) 2.95s forwards;
}
.wf-anim--01.is-playing .s01-img-card:nth-child(5) {
  animation: s01-imgdrop 0.4s cubic-bezier(0.22,1,0.36,1) 3.3s forwards;
}


/* ── 2. STEP 02 — MODEL PICKER ───────────────────────────── */

.wf-anim--02 .s02-model-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr;
  gap: 7px;
  align-items: center;   /* vertically centre the portrait cards */
  min-height: 0;
}

.s02-model-card {
  position: relative;
  aspect-ratio: 9 / 16;  /* portrait format */
  border-radius: 8px;
  border: 2px solid rgba(10,10,10,0.08);
  overflow: hidden;
  opacity: 0;
  transform: scale(0.9);
  background: rgba(74,69,96,0.06);
  width: 100%;            /* fill grid column */
}

.s02-model-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.s02-model-name {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 20px 5px 6px;
  background: linear-gradient(to top, rgba(10,8,24,0.75) 0%, transparent 100%);
  font-size: clamp(6px, 0.85vw, 8px);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  text-align: center;
}

.s02-model-check {
  position: absolute;
  top: 6px; right: 6px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(74,69,96,0.9);
  color: #fff;
  font-size: 9px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transform: scale(0.4);
}

/* ── Keyframes ── */
@keyframes s02-card-appear {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

/* Cursor browses: border glows then resets */
@keyframes s02-browse {
  0%   { border-color: rgba(10,10,10,0.08); transform: scale(1); }
  25%  { border-color: rgba(74,69,96,0.75); transform: scale(1.03);
         box-shadow: 0 0 0 3px rgba(74,69,96,0.15); }
  75%  { border-color: rgba(74,69,96,0.75); transform: scale(1.03);
         box-shadow: 0 0 0 3px rgba(74,69,96,0.15); }
  100% { border-color: rgba(10,10,10,0.08); transform: scale(1);
         box-shadow: none; }
}

/* Final confirmed selection stays */
@keyframes s02-confirm {
  from { border-color: rgba(10,10,10,0.08); }
  to   { border-color: rgba(74,69,96,0.9);
         box-shadow: 0 0 0 3px rgba(74,69,96,0.18);
         transform: scale(1.03); }
}

@keyframes s02-check-pop {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Triggered: all 4 cards appear, then cursor browses 1→2→3, confirms on 4 ── */
.wf-anim--02.is-playing .s02-card--1 {
  animation: s02-card-appear 0.35s ease 0.10s forwards,
             s02-browse      0.70s ease 0.80s 1;
}
.wf-anim--02.is-playing .s02-card--2 {
  animation: s02-card-appear 0.35s ease 0.20s forwards,
             s02-browse      0.70s ease 1.55s 1;
}
.wf-anim--02.is-playing .s02-card--3 {
  animation: s02-card-appear 0.35s ease 0.30s forwards,
             s02-browse      0.70s ease 2.30s 1;
}
/* Card 4 (Sandra) — final confirmed pick */
.wf-anim--02.is-playing .s02-card--4 {
  animation: s02-card-appear 0.35s ease 0.40s forwards,
             s02-confirm     0.45s ease 3.05s forwards;
}
.wf-anim--02.is-playing .s02-card--4 .s02-model-check {
  animation: s02-check-pop 0.30s cubic-bezier(0.34,1.56,0.64,1) 3.50s forwards;
}


/* ── 3. STEP 03 — LOCATIONS ──────────────────────────────── */

.wf-anim--03 .s03-body {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 6px;
  min-height: 0;
}

/* Each location tile */
.s03-loc {
  position: relative;
  border-radius: 7px;
  border: 1.5px solid rgba(10,10,10,0.08);
  overflow: hidden;
  opacity: 0;
  background: rgba(74,69,96,0.04);
  min-height: 0;
}

.s03-loc img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.s03-check {
  position: absolute; top: 5px; right: 5px;
  width: 13px; height: 13px; border-radius: 50%;
  background: rgba(74,69,96,0.55);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
}
.s03-check::after {
  content: '';
  width: 5px; height: 3px;
  border-left: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
}

/* Keyframes */
@keyframes s03-tempin {
  0%   { opacity: 0; transform: scale(0.94); }
  40%  { opacity: 1; transform: scale(1);
         border-color: rgba(74,69,96,0.6); }
  100% { opacity: 1; transform: scale(1);
         border-color: rgba(10,10,10,0.08); }
}
@keyframes s03-check-flash {
  0%, 35% { opacity: 0; }
  50%     { opacity: 1; }
  100%    { opacity: 0; }
}
@keyframes s03-confirm {
  from { border-color: rgba(10,10,10,0.08); }
  to   { border-color: rgba(74,69,96,0.9);
         box-shadow: 0 0 0 3px rgba(74,69,96,0.18); }
}
@keyframes s03-check-stay {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 1; transform: scale(1); }
}

/* Triggered — staggered appear + browse flash, loc05 confirmed last */
.wf-anim--03.is-playing .s03-loc:nth-child(1) { animation: s03-tempin 0.9s ease 0.1s forwards; }
.wf-anim--03.is-playing .s03-loc:nth-child(2) { animation: s03-tempin 0.9s ease 0.4s forwards; }
.wf-anim--03.is-playing .s03-loc:nth-child(3) { animation: s03-tempin 0.9s ease 0.7s forwards; }
.wf-anim--03.is-playing .s03-loc:nth-child(4) { animation: s03-tempin 0.9s ease 1.0s forwards; }
.wf-anim--03.is-playing .s03-loc:nth-child(5) { animation: s03-tempin 0.9s ease 1.3s forwards; }
/* Last tile — confirmed pick */
.wf-anim--03.is-playing .s03-loc:nth-child(6) {
  animation: s03-tempin 0.9s ease 1.6s forwards,
             s03-confirm 0.45s ease 2.5s forwards;
}

/* Check flashes on browse tiles 1–5 */
.wf-anim--03.is-playing .s03-loc:nth-child(1) .s03-check { animation: s03-check-flash 0.9s ease 0.1s forwards; }
.wf-anim--03.is-playing .s03-loc:nth-child(2) .s03-check { animation: s03-check-flash 0.9s ease 0.4s forwards; }
.wf-anim--03.is-playing .s03-loc:nth-child(3) .s03-check { animation: s03-check-flash 0.9s ease 0.7s forwards; }
.wf-anim--03.is-playing .s03-loc:nth-child(4) .s03-check { animation: s03-check-flash 0.9s ease 1.0s forwards; }
.wf-anim--03.is-playing .s03-loc:nth-child(5) .s03-check { animation: s03-check-flash 0.9s ease 1.3s forwards; }
/* Check stays on confirmed tile */
.wf-anim--03.is-playing .s03-loc:nth-child(6) .s03-check {
  animation: s03-check-stay 0.3s cubic-bezier(0.34,1.56,0.64,1) 2.95s forwards;
}


/* ── 4. STEP 04 — SCRIPT ─────────────────────────────────── */

.wf-anim--04 .s04-body {
  flex: 1; display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px; align-items: start;
}
.s04-sidebar {
  display: flex; flex-direction: column; gap: 6px; width: 48px;
}
.s04-sidebar-item {
  padding: 5px 6px; border-radius: 5px;
  border: 1px solid rgba(10,10,10,0.07);
  font-size: clamp(6px, 0.9vw, 8px); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(74,69,96,0.45); text-align: center;
}
.s04-sidebar-item.active {
  border-color: rgba(74,69,96,0.35);
  background: rgba(74,69,96,0.07);
  color: rgba(74,69,96,0.85);
}
.s04-doc { display: flex; flex-direction: column; gap: 10px; }
.s04-section {
  opacity: 0; /* default invisible */
}
.s04-section-label {
  font-size: clamp(7px, 0.9vw, 9px); font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(74,69,96,0.55); margin-bottom: 5px; display: block;
}
/* Ambient cursor blink — always */
@keyframes s04-blink {
  0%, 49%, 100% { opacity: 1; } 50%, 99% { opacity: 0; }
}
.s04-cursor-line {
  display: inline-block; width: 11px; height: 7px;
  background: rgba(74,69,96,0.3); border-radius: 2px;
  vertical-align: middle; margin-left: 2px;
  animation: s04-blink 0.7s step-end infinite;
}

/* Keyframes */
@keyframes s04-secin {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Triggered */
.wf-anim--04.is-playing .s04-section:nth-child(1) {
  animation: s04-secin 0.5s ease 0.3s forwards;
}
.wf-anim--04.is-playing .s04-section:nth-child(2) {
  animation: s04-secin 0.5s ease 1.1s forwards;
}
.wf-anim--04.is-playing .s04-section:nth-child(3) {
  animation: s04-secin 0.5s ease 1.9s forwards;
}


/* ── 5. STEP 05 — VIDEO RENDER ───────────────────────────── */

.wf-anim--05 .s05-body {
  flex: 1; display: flex; align-items: stretch; gap: 14px;
}
.s05-preview {
  flex-shrink: 0; width: 30%;
  /* no aspect-ratio — stretches to card height, video fills via object-fit: cover */
  border-radius: 7px; position: relative; overflow: hidden;
  background: #000;
}
.s05-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.s05-right { flex: 1; display: flex; flex-direction: column; gap: 9px; }

/* Status row — counter + done swap */
.s05-status-wrap { position: relative; height: clamp(16px,2.2vw,22px); }

.s05-generating-row {
  position: absolute; top: 0; left: 0;
  display: flex; align-items: center; gap: 4px;
  font-size: clamp(9px, 1.3vw, 12px); font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: rgba(74,69,96,0.7); line-height: 1;
}

/* Slot-machine number ticker */
.s05-count-wrap {
  overflow: hidden;
  height: 1em;
  line-height: 1;
}
.s05-count-track {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.s05-count-track span {
  display: block;
  height: 1em;
  font-variant-numeric: tabular-nums;
}

.s05-gen-label { line-height: 1; }

.s05-done-text {
  position: absolute; top: 0; left: 0;
  font-size: clamp(9px, 1.3vw, 12px); font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: #22c55e; opacity: 0; line-height: 1;
}

.s05-progress-track {
  height: 4px; background: rgba(74,69,96,0.12); border-radius: 2px; overflow: hidden;
}
.s05-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #c5c0df, rgba(74,69,96,0.7));
  border-radius: 2px;
}
.s05-steps { display: flex; flex-direction: column; gap: 5px; }
.s05-step-row {
  display: flex; align-items: center; gap: 6px;
  font-size: clamp(7px, 1vw, 9px); font-weight: 600;
  color: rgba(74,69,96,0.45);
}
.s05-step-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(74,69,96,0.18); flex-shrink: 0;
}

/* ── Keyframes ── */

/* Slot ticks through 1→8 in 7 steps over 3.2s */
@keyframes s05-slot {
  from { transform: translateY(0); }
  to   { transform: translateY(-7em); }
}
/* Progress bar grows 0 → 100% in sync with 8 videos (3.5s) */
@keyframes s05-fill {
  from { width: 0%; }
  to   { width: 100%; }
}
@keyframes s05-dot-on {
  to { background: rgba(74,69,96,0.7); }
}
@keyframes s05-counter-out {
  to { opacity: 0; }
}
@keyframes s05-done-in {
  to { opacity: 1; }
}

/* ── Triggered ── */

/* Slot machine: steps(7) ticks through numbers 1→8 */
.wf-anim--05.is-playing .s05-count-track {
  animation: s05-slot 3.2s steps(7, end) 0.3s forwards;
}
/* Bar grows in sync */
.wf-anim--05.is-playing .s05-progress-fill {
  animation: s05-fill 3.5s cubic-bezier(0.4,0,0.2,1) 0.3s forwards;
}
/* Step dots light up as videos complete */
.wf-anim--05.is-playing .s05-step-row:nth-child(1) .s05-step-dot {
  animation: s05-dot-on 0.3s ease 0.7s forwards;
}
.wf-anim--05.is-playing .s05-step-row:nth-child(2) .s05-step-dot {
  animation: s05-dot-on 0.3s ease 1.4s forwards;
}
.wf-anim--05.is-playing .s05-step-row:nth-child(3) .s05-step-dot {
  animation: s05-dot-on 0.3s ease 2.2s forwards;
}
.wf-anim--05.is-playing .s05-step-row:nth-child(4) .s05-step-dot {
  animation: s05-dot-on 0.3s ease 3.0s forwards;
}
/* Counter fades out, done text fades in */
.wf-anim--05.is-playing .s05-generating-row {
  animation: s05-counter-out 0.4s ease 3.7s forwards;
}
.wf-anim--05.is-playing .s05-done-text {
  animation: s05-done-in 0.4s ease 3.8s forwards;
}


/* ── 6. STEP 06 — EDITOR / CUT ───────────────────────────── */

.wf-anim--06 .s06-body {
  flex: 1; display: flex; flex-direction: column; gap: 8px;
}
.s06-preview-area {
  flex: 1; border-radius: 7px; overflow: hidden; min-height: 0;
  background: linear-gradient(150deg, #1c1829 0%, #2e2845 100%);
  position: relative;
}
.s06-preview-label {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  font-size: clamp(8px,1.2vw,11px); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.2);
}
.s06-timeline {
  flex-shrink: 0; padding: 7px 8px;
  background: rgba(74,69,96,0.04);
  border: 1px solid rgba(10,10,10,0.07);
  border-radius: 7px; position: relative;
}
.s06-tl-row {
  display: flex; gap: 3px; align-items: center;
  height: 14px; margin-bottom: 4px;
}
.s06-tl-row:last-child { margin-bottom: 0; }
.s06-tl-label {
  font-size: 7px; font-weight: 700; text-transform: uppercase;
  color: #6b7280; width: 26px; flex-shrink: 0; letter-spacing: 0.06em;
}
.s06-tl-track {
  flex: 1; display: flex; gap: 2px; align-items: center;
  position: relative; height: 100%;
}
.s06-clip {
  height: 10px; border-radius: 3px; flex-shrink: 0;
  opacity: 0; /* hidden by default */
}
.s06-clip.c1 { background: rgba(74,69,96,0.35); }
.s06-clip.c2 { background: rgba(197,192,223,0.75); }
.s06-clip.c3 { background: rgba(224,221,236,0.9); }
.s06-clip.c4 { background: rgba(74,69,96,0.55); }

.s06-wave {
  flex: 1; display: flex; gap: 2px; align-items: center; height: 100%;
}
.s06-wave-bar {
  width: 2px; border-radius: 1px;
  background: rgba(74,69,96,0.22); height: 4px;
}
.s06-wave-bar:nth-child(3n+1) { height: 8px; }
.s06-wave-bar:nth-child(5n)   { height: 10px; }
.s06-wave-bar:nth-child(7n)   { height: 12px; }
.s06-wave-bar:nth-child(11n)  { height: 6px; }
.s06-wave-bar:nth-child(13n)  { height: 9px; }

.s06-ph-wrap {
  position: absolute;
  top: 0; bottom: 0; left: 26px; right: 0;
  pointer-events: none; overflow: hidden;
}
.s06-ph-line {
  position: absolute; top: -2px; bottom: -2px;
  width: 1.5px; background: rgba(74,69,96,0.65);
  left: 0%;
}
.s06-ph-head {
  position: absolute; top: -2px; left: -3px;
  width: 8px; height: 5px; border-radius: 2px;
  background: rgba(74,69,96,0.65);
}

/* Keyframes */
@keyframes s06-clipin {
  from { opacity: 0; transform: scaleX(0.6); transform-origin: left; }
  to   { opacity: 1; transform: scaleX(1); }
}
@keyframes s06-playhead {
  from { left: 0%; }
  to   { left: 100%; }
}

/* Triggered */
.wf-anim--06.is-playing .s06-clip:nth-child(1) {
  animation: s06-clipin 0.4s ease 0.4s forwards;
}
.wf-anim--06.is-playing .s06-clip:nth-child(2) {
  animation: s06-clipin 0.4s ease 0.75s forwards;
}
.wf-anim--06.is-playing .s06-clip:nth-child(3) {
  animation: s06-clipin 0.4s ease 1.1s forwards;
}
.wf-anim--06.is-playing .s06-clip:nth-child(4) {
  animation: s06-clipin 0.4s ease 1.45s forwards;
}
/* Text track clips */
.wf-anim--06.is-playing .s06-tl-track .s06-clip.c2:nth-of-type(1) {
  animation: s06-clipin 0.4s ease 0.6s forwards;
}
.wf-anim--06.is-playing .s06-tl-track .s06-clip.c2 {
  animation: s06-clipin 0.4s ease 0.8s forwards;
}
.wf-anim--06.is-playing .s06-ph-line {
  animation: s06-playhead 4.5s cubic-bezier(0.4,0,0.6,1) 0.5s forwards;
}


/* ── 7. STEP 07 — EXPORT / DELIVERY ─────────────────────── */

.wf-anim--07 .s07-body {
  flex: 1; display: flex; flex-direction: row;
  gap: 12px; align-items: stretch;
}

/* Left: export video column */
.s07-video-col {
  flex-shrink: 0;
  aspect-ratio: 9 / 16;
  position: relative; overflow: hidden;
  border-radius: 6px; background: #000;
}
.s07-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* Right: platform bars column */
.s07-bars-col {
  flex: 1; display: flex; flex-direction: column;
  gap: 8px; justify-content: center;
}
.s07-platform {
  display: flex; align-items: center; gap: 8px;
  padding: clamp(6px,1%,9px) clamp(8px,1.5%,12px);
  border-radius: 8px; border: 1px solid rgba(10,10,10,0.08);
  background: rgba(74,69,96,0.03);
  opacity: 0; /* hidden by default */
}
.s07-icon {
  width: 22px; height: 22px; border-radius: 5px;
  background: rgba(74,69,96,0.1); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.s07-name {
  font-size: clamp(8px,1.1vw,10px); font-weight: 700;
  color: rgba(74,69,96,0.7); width: 52px; flex-shrink: 0;
}
.s07-bar-track {
  flex: 1; height: 4px;
  background: rgba(74,69,96,0.10); border-radius: 2px; overflow: hidden;
}
.s07-bar-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #c5c0df, rgba(74,69,96,0.65));
  border-radius: 2px;
}
.s07-tag {
  font-size: clamp(7px,0.9vw,9px); font-weight: 700;
  color: #6b7280; width: 28px; text-align: right; flex-shrink: 0;
}
.s07-badge {
  flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%;
  background: rgba(74,69,96,0.12);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
}
.s07-badge::after {
  content: '';
  width: 5px; height: 3px;
  border-left: 1.5px solid rgba(74,69,96,0.75);
  border-bottom: 1.5px solid rgba(74,69,96,0.75);
  transform: rotate(-45deg) translateY(-1px);
}

/* Keyframes */
@keyframes s07-platformin {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes s07-barfill {
  from { width: 0%; }
  to   { width: 100%; }
}
@keyframes s07-badgein {
  to { opacity: 1; }
}

/* Triggered */
.wf-anim--07.is-playing .s07-platform:nth-child(1) {
  animation: s07-platformin 0.4s ease 0.2s forwards;
}
.wf-anim--07.is-playing .s07-platform:nth-child(2) {
  animation: s07-platformin 0.4s ease 0.5s forwards;
}
.wf-anim--07.is-playing .s07-platform:nth-child(3) {
  animation: s07-platformin 0.4s ease 0.8s forwards;
}
.wf-anim--07.is-playing .s07-platform:nth-child(1) .s07-bar-fill {
  animation: s07-barfill 1.4s ease 1.0s forwards;
}
.wf-anim--07.is-playing .s07-platform:nth-child(1) .s07-badge {
  animation: s07-badgein 0.35s ease 2.5s forwards;
}
.wf-anim--07.is-playing .s07-platform:nth-child(2) .s07-bar-fill {
  animation: s07-barfill 1.4s ease 2.8s forwards;
}
.wf-anim--07.is-playing .s07-platform:nth-child(2) .s07-badge {
  animation: s07-badgein 0.35s ease 4.3s forwards;
}
.wf-anim--07.is-playing .s07-platform:nth-child(3) .s07-bar-fill {
  animation: s07-barfill 1.4s ease 4.6s forwards;
}
.wf-anim--07.is-playing .s07-platform:nth-child(3) .s07-badge {
  animation: s07-badgein 0.35s ease 6.1s forwards;
}