// Step 2 focused short — Classes & sections.
// Uses a taller frame (h=984) to accommodate class rows below the card.
const STEP2_FRAME = { x: 192, y: 48, w: 1536, h: 984 };

// Beat plan (~10s):
//  0.0 – 0.5   Scene fades in with chrome (Sunridge Academy populated)
//  0.5 – 1.5   Headline reveals word-by-word
//  1.5 – 1.9   Subtitle
//  1.9 – 2.4   Step strip slides in (School ✓ done, Classes active)
//  2.4 – 2.9   Classes & sections card slides up (empty state — 0 classes)
//  2.9 – 3.4   Quick-add chips cascade in
//  3.4 – 3.8   Cursor enters from right, glides to "Class 1" chip
//  3.8 – 5.6   Click chips 1 → 2 → 3 → 4 → 5 in quick succession.
//              Each click: chip flips to selected (green), a class row appears below, counter increments
//  5.6 – 6.5   Cursor moves to "+ Section" on Class 1 row; click → "B" circle appears
//  6.5 – 7.5   Cursor glides to Continue button (now active green)
//  7.5 – 7.8   Click — halo pulse
//  7.8 – 8.7   Step 2 ticks ✓, Step 3 activates
//  8.7 – 10.5  Hold on populated state
// 10.5 – 11.0  Fade out

const QUICK_ADD = [
  'Nursery', 'LKG', 'UKG',
  'Class 1', 'Class 2', 'Class 3', 'Class 4', 'Class 5',
  'Class 6', 'Class 7', 'Class 8', 'Class 9', 'Class 10', 'Class 11', 'Class 12',
];

// ─── 6-step strip with Step 1 already complete ──────────────────────────────
function StepStripStep2({ step2DoneT = 0, step3ActiveT = 0 }) {
  const steps = ['School', 'Classes', 'Periods', 'Subjects', 'Teachers', 'Review'];
  // Step 0: done. Step 1: active (then done as step2DoneT progresses). Step 2: activates.
  const step1Done = step2DoneT > 0.5;
  const step2Active = !step1Done;
  const step2NowActive = step3ActiveT > 0.5; // i.e. step 2 (index 2 = Periods) becomes active

  return (
    <div style={{
      display: 'flex', alignItems: 'center',
      background: '#fff', border: `1px solid ${BRAND.border}`,
      borderRadius: 14, padding: '18px 24px',
      gap: 0,
    }}>
      {steps.map((s, i) => {
        const isDone = (i === 0) || (i === 1 && step1Done);
        const isActive = i === 1 ? step2Active : (i === 2 ? step2NowActive : false);
        return (
          <React.Fragment key={s}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{
                width: 26, height: 26, borderRadius: 999,
                background: isDone ? BRAND.greenSoft : (isActive ? BRAND.green : '#f1efe8'),
                color: isDone ? BRAND.green : (isActive ? '#fff' : BRAND.inkSub),
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 12, fontWeight: 700,
                transition: 'background 240ms, color 240ms',
              }}>
                {isDone ? (
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M4 12l5 5 11-12"/>
                  </svg>
                ) : (i + 1)}
              </div>
              <span style={{
                fontSize: 14,
                fontWeight: isActive ? 700 : 500,
                color: isDone || isActive ? BRAND.ink : BRAND.inkSub,
                whiteSpace: 'nowrap',
                transition: 'all 240ms',
              }}>{s}</span>
            </div>
            {i < steps.length - 1 && (
              <div style={{
                flex: 1, height: 1,
                background: (i === 0) || (i === 1 && step1Done) ? BRAND.greenMid : BRAND.borderSoft,
                margin: '0 14px',
                transition: 'background 240ms',
              }}/>
            )}
          </React.Fragment>
        );
      })}
    </div>
  );
}

// ─── Chrome (Sunridge Academy already populated, Trial · 6d left) ────────
function ChromeStep2() {
  return (
    <div style={{
      height: 88, padding: '0 36px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      borderBottom: `1px solid ${BRAND.borderSoft}`,
      background: BRAND.bg,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        <div style={{
          width: 48, height: 48, borderRadius: 12,
          background: BRAND.greenSoft,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke={BRAND.green} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M3 21h18M5 21V7l7-4 7 4v14M9 9h.01M15 9h.01M9 13h.01M15 13h.01M9 17h.01M15 17h.01"/>
          </svg>
        </div>
        <div>
          <div style={{ fontSize: 19, fontWeight: 700, color: BRAND.ink, lineHeight: 1.1, fontFamily: BRAND.font }}>
            Sunridge Academy
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 5 }}>
            <span style={{ fontSize: 13, color: BRAND.inkSoft, whiteSpace: 'nowrap' }}>2025-26</span>
            <span style={{
              fontSize: 11, fontWeight: 600,
              padding: '2px 7px', borderRadius: 6,
              background: '#fef3c7', color: '#92400e',
              whiteSpace: 'nowrap',
            }}>Admin</span>
          </div>
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        <div style={{
          padding: '8px 14px', borderRadius: 999,
          background: BRAND.greenSoft, color: BRAND.green,
          fontSize: 14, fontWeight: 600,
          display: 'flex', alignItems: 'center', gap: 8,
          whiteSpace: 'nowrap',
        }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M2 6l5 4 5-7 5 7 5-4-2 13H4z"/></svg>
          Trial · 6d left
        </div>
        <div style={{
          width: 34, height: 34, borderRadius: 999,
          border: `1px solid ${BRAND.border}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: BRAND.inkSoft,
        }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79z"/>
          </svg>
        </div>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 4,
          padding: '4px 4px 4px 12px', borderRadius: 999,
          border: `1px solid ${BRAND.border}`,
          background: '#fff',
        }}>
          <div style={{
            width: 28, height: 28, borderRadius: 999,
            background: BRAND.green, color: '#fff',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 13, fontWeight: 600,
          }}>C</div>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={BRAND.inkSub} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M6 9l6 6 6-6"/>
          </svg>
        </div>
      </div>
    </div>
  );
}

// ─── Chip — quick-add class button ──────────────────────────────────────────
function QuickChip({ label, selected, justAdded, opacity = 1, refCb }) {
  return (
    <div
      ref={refCb}
      style={{
        opacity,
        display: 'inline-flex', alignItems: 'center', gap: 6,
        padding: '10px 14px',
        borderRadius: 10,
        background: selected ? BRAND.greenSofter : '#fff',
        border: `1px solid ${selected ? BRAND.greenMid : BRAND.border}`,
        color: selected ? BRAND.green : BRAND.ink,
        fontSize: 14, fontWeight: 600,
        whiteSpace: 'nowrap',
        // Pop scale on selection
        transform: `scale(${justAdded ? 1.06 : 1})`,
        boxShadow: justAdded ? `0 0 0 4px ${BRAND.greenSoft}` : 'none',
        transition: 'background 200ms, border-color 200ms, color 200ms, transform 280ms cubic-bezier(.4,1.6,.6,1), box-shadow 280ms',
      }}
    >
      {selected ? (
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
          <path d="M4 12l5 5 11-12"/>
        </svg>
      ) : (
        <span style={{ color: BRAND.inkSub, fontWeight: 600 }}>+</span>
      )}
      {label}
    </div>
  );
}

// ─── Class row that lives below the card ────────────────────────────────────
function ClassRow({ name, sections = ['A'], opacity = 1, scale = 1, justAddedSection = false }) {
  return (
    <div style={{
      opacity,
      transform: `scale(${scale})`,
      transformOrigin: 'left center',
      background: '#fff',
      border: `1px solid ${BRAND.border}`,
      borderRadius: 12,
      padding: '18px 24px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      marginBottom: 10,
      transition: 'opacity 240ms, transform 240ms',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 28 }}>
        <div style={{ fontSize: 18, fontWeight: 700, color: BRAND.ink, fontFamily: BRAND.font, minWidth: 96 }}>
          {name}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          {sections.map((sec, i) => (
            <div key={sec} style={{
              width: 32, height: 32, borderRadius: 999,
              background: BRAND.greenSoft, color: BRAND.green,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 13, fontWeight: 700,
              transform: justAddedSection && i === sections.length - 1 ? 'scale(1.12)' : 'scale(1)',
              boxShadow: justAddedSection && i === sections.length - 1 ? `0 0 0 4px ${BRAND.greenSoft}` : 'none',
              transition: 'transform 280ms cubic-bezier(.4,1.6,.6,1), box-shadow 280ms',
            }}>{sec}</div>
          ))}
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 4,
            color: BRAND.green,
            fontSize: 13, fontWeight: 600,
            marginLeft: 4,
          }}>
            <span style={{ fontSize: 14 }}>+</span> Section
          </div>
        </div>
      </div>
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={BRAND.inkSub} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"/>
      </svg>
    </div>
  );
}

function Step2Video({ start = 0 }) {
  const t = useTime();
  const lt = t - start;

  const fadeIn = interpolate([0, 0.5], [0, 1], Easing.easeOutCubic)(lt);
  const fadeOut = interpolate([9.4, 10.0], [1, 0], Easing.easeInCubic)(lt);
  const sceneOp = fadeIn * fadeOut;

  // ── Headline (word-by-word) ───────────────────────────────────────────────
  const eyebrowOp = interpolate([0.5, 0.9], [0, 1], Easing.easeOutCubic)(lt);
  const wAt = (delay) => ({
    op: interpolate([delay, delay + 0.4], [0, 1], Easing.easeOutCubic)(lt),
    y:  interpolate([delay, delay + 0.4], [16, 0], Easing.easeOutCubic)(lt),
  });
  const w1 = wAt(0.7), w2 = wAt(0.82), w3 = wAt(0.94), w4 = wAt(1.06);
  const subOp = interpolate([1.5, 1.9], [0, 1], Easing.easeOutCubic)(lt);

  // ── Step strip ────────────────────────────────────────────────────────────
  const stripOp = interpolate([1.9, 2.4], [0, 1], Easing.easeOutCubic)(lt);
  const stripY  = interpolate([1.9, 2.4], [16, 0], Easing.easeOutCubic)(lt);

  // ── Classes card ──────────────────────────────────────────────────────────
  const cardOp = interpolate([2.4, 2.9], [0, 1], Easing.easeOutCubic)(lt);
  const cardY  = interpolate([2.4, 2.9], [24, 0], Easing.easeOutCubic)(lt);

  // ── Chip cascade ──────────────────────────────────────────────────────────
  const chipOp = (i) => interpolate([2.9 + i*0.025, 3.2 + i*0.025], [0, 1], Easing.easeOutCubic)(lt);

  // ── Per-class click moments ───────────────────────────────────────────────
  // 3 classes for a clean cascade (more fits within the frame)
  const classClickT = [3.9, 4.3, 4.7];
  const classSelected = (i) => lt >= classClickT[i];
  const justAdded = (i) => lt >= classClickT[i] && lt < classClickT[i] + 0.4;
  const classRowProgress = (i) => interpolate([classClickT[i], classClickT[i] + 0.3], [0, 1], Easing.easeOutCubic)(lt);

  const numClasses = classClickT.filter(ct => lt >= ct).length;

  // ── Section add (Section B on Class 1) ────────────────────────────────────
  const sectionClickT = 5.3;
  const hasSectionB = lt >= sectionClickT;
  const justAddedSection = lt >= sectionClickT && lt < sectionClickT + 0.4;
  const numSections = numClasses + (hasSectionB ? 1 : 0);

  // ── Continue activation & click ───────────────────────────────────────────
  const continueActive = interpolate([3.9, 4.3], [0, 1], Easing.easeOutCubic)(lt); // active once first class is added
  const continueClickT = 6.5;
  const continueHot = lt > 6.1 && lt < 6.8;
  const clickT = (lt - continueClickT) / 0.18;
  const clickSquish = clickT > 0 && clickT < 1 ? 0.05 * Math.sin(clickT * Math.PI) : 0;
  const haloOp = interpolate([continueClickT, continueClickT + 0.25, continueClickT + 0.7], [0, 0.7, 0], Easing.easeOutCubic)(lt);
  const haloScale = interpolate([continueClickT, continueClickT + 0.7], [1, 1.6], Easing.easeOutCubic)(lt);

  // ── Step strip transition ─────────────────────────────────────────────────
  const step2DoneT = interpolate([continueClickT + 0.1, continueClickT + 0.8], [0, 1], Easing.easeOutCubic)(lt);
  const step3ActiveT = interpolate([continueClickT + 0.4, continueClickT + 1.0], [0, 1], Easing.easeOutCubic)(lt);

  // ── Cursor path ───────────────────────────────────────────────────────────
  // Chip row sits roughly at y=565 absolute (inside frame after chrome/headline/strip/card-icon)
  // The card is at y≈540 (frame y=96 + ~444 for content). Quick-add chip row at y≈790.
  // Class 1 chip is the 4th chip in the row.
  // Estimated x-centers for chips (based on flex layout starting ~340 left, 110px/chip + 8gap):
  //   Class 1 → 905, Class 2 → 1023, Class 3 → 1141, Class 4 → 1259, Class 5 → 1377
  // (These are tuned by eye and adjustable.)
  // Frame is taller (y=48, h=984). Chip row at y≈690. "+ Section" on Class 1 row at y≈775.
  // Continue button at y≈975.
  const chipY = 690;
  const chipCx = { 1: 905, 2: 1023, 3: 1141 };
  const sectionBtnX = 502, sectionBtnY = 720;
  const contX = 1580, contY = 985;

  const path = [
    { t: 3.3, x: 1740, y: 1100 },           // entry, off frame right
    { t: 3.8, x: chipCx[1] - 6, y: chipY }, // hover Class 1
    { t: 4.0, x: chipCx[1] - 6, y: chipY }, // click hold
    { t: 4.2, x: chipCx[2] - 6, y: chipY },
    { t: 4.4, x: chipCx[2] - 6, y: chipY },
    { t: 4.6, x: chipCx[3] - 6, y: chipY },
    { t: 4.8, x: chipCx[3] - 6, y: chipY },
    { t: 5.2, x: sectionBtnX - 6, y: sectionBtnY }, // glide down to section btn
    { t: 5.4, x: sectionBtnX - 6, y: sectionBtnY },
    { t: 6.2, x: contX - 6, y: contY },             // glide to Continue
    { t: 6.5, x: contX - 6, y: contY },
    { t: 9.4, x: contX - 6, y: contY },
  ];
  // Compute cursor position by easing across segments
  const cursorFrom = (() => {
    if (lt < path[0].t) return { x: path[0].x, y: path[0].y, op: 0 };
    if (lt >= path[path.length-1].t) return { x: path[path.length-1].x, y: path[path.length-1].y, op: 1 };
    for (let i = 0; i < path.length - 1; i++) {
      if (lt >= path[i].t && lt <= path[i+1].t) {
        const seg = (lt - path[i].t) / (path[i+1].t - path[i].t || 1);
        const e = Easing.easeInOutCubic(seg);
        return {
          x: path[i].x + (path[i+1].x - path[i].x) * e,
          y: path[i].y + (path[i+1].y - path[i].y) * e,
          op: 1,
        };
      }
    }
    return { x: path[0].x, y: path[0].y, op: 1 };
  })();
  const cursorFadeOut = interpolate([8.8, 9.4], [1, 0], Easing.easeInCubic)(lt);
  const cursorOp = cursorFrom.op * cursorFadeOut;

  // Settle wobble after Continue click
  const settle = lt > continueClickT && lt < continueClickT + 0.4
    ? Math.sin((lt - continueClickT) * 30) * 1.5 * Math.exp(-(lt - continueClickT) * 8)
    : 0;

  return (
    <div style={{ position: 'absolute', inset: 0, opacity: sceneOp }}>
      <AppFrame x={STEP2_FRAME.x} y={STEP2_FRAME.y} width={STEP2_FRAME.w} height={STEP2_FRAME.h}>
        <ChromeStep2/>

        <div style={{ padding: '24px 56px' }}>
          {/* Continuation header — Step 2 is no longer treated as a
           *  brand-new introduction. We drop the "Setup wizard / Let's
           *  build your timetable" headline (which already played in
           *  Step 1) and replace it with a small, non-animated step
           *  label so the viewer sees this as a progression, not a
           *  restart. The headline you used to see here is now
           *  exclusive to Step 1, where it belongs. */}
          <div style={{
            fontSize: 13, fontWeight: 700, letterSpacing: '0.16em',
            textTransform: 'uppercase', color: BRAND.inkSub,
          }}>
            Step 2 · Classes &amp; sections
          </div>
          <div style={{
            fontSize: 28, fontWeight: 700, color: BRAND.ink,
            letterSpacing: '-0.01em', lineHeight: 1.1,
            marginTop: 6,
            fontFamily: BRAND.font,
          }}>
            Add the classes you run.
          </div>
          <div style={{
            fontSize: 15, color: BRAND.inkSoft, marginTop: 6,
            maxWidth: 800, lineHeight: 1.5,
          }}>
            Drag rows to reorder. Sections sit inside each class.
          </div>

          {/* Step strip */}
          <div style={{
            marginTop: 24,
            opacity: stripOp,
            transform: `translateY(${stripY}px)`,
          }}>
            <StepStripStep2 step2DoneT={step2DoneT} step3ActiveT={step3ActiveT}/>
          </div>

          {/* Classes & sections card */}
          <div style={{
            marginTop: 20,
            opacity: cardOp,
            transform: `translateY(${cardY}px)`,
          }}>
            <Card style={{ padding: '24px 28px' }}>
              <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 18 }}>
                <div style={{ display: 'flex', alignItems: 'flex-start', gap: 14 }}>
                  <div style={{
                    width: 42, height: 42, borderRadius: 11,
                    background: '#fef3c7',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    flexShrink: 0,
                  }}>
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#d97706" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M22 10L12 5 2 10l10 5 10-5z"/>
                      <path d="M6 12v5c0 1 3 3 6 3s6-2 6-3v-5"/>
                    </svg>
                  </div>
                  <div>
                    <div style={{ fontSize: 19, fontWeight: 700, color: BRAND.ink, letterSpacing: '-0.01em' }}>
                      Classes &amp; sections
                    </div>
                    <div style={{ fontSize: 14, color: BRAND.inkSoft, marginTop: 4 }}>
                      Add the grades you teach. Each class gets a Section A by default — add more if needed.
                    </div>
                  </div>
                </div>
                {/* Stats */}
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14, color: BRAND.inkSoft }}>
                  <span style={{ display: 'inline-flex', alignItems: 'baseline', gap: 4 }}>
                    <span style={{ fontSize: 17, fontWeight: 700, color: BRAND.ink, fontVariantNumeric: 'tabular-nums' }}>{numClasses}</span>
                    {numClasses === 1 ? 'class' : 'classes'}
                  </span>
                  <span style={{ color: BRAND.inkSub }}>·</span>
                  <span style={{ display: 'inline-flex', alignItems: 'baseline', gap: 4 }}>
                    <span style={{ fontSize: 17, fontWeight: 700, color: BRAND.ink, fontVariantNumeric: 'tabular-nums' }}>{numSections}</span>
                    {numSections === 1 ? 'section' : 'sections'}
                  </span>
                </div>
              </div>

              {/* QUICK ADD */}
              <div style={{
                fontSize: 11, fontWeight: 700, letterSpacing: '0.12em',
                textTransform: 'uppercase', color: BRAND.inkSub,
                marginBottom: 12,
              }}>
                Quick add
              </div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                {QUICK_ADD.map((label, i) => {
                  // Determine selection index for "Class N" (1-5)
                  let isSel = false, isJust = false;
                  const m = /^Class (\d+)$/.exec(label);
                  if (m) {
                    const n = parseInt(m[1], 10);
                    if (n >= 1 && n <= 5) {
                      isSel = classSelected(n - 1);
                      isJust = justAdded(n - 1);
                    }
                  }
                  return (
                    <QuickChip
                      key={label}
                      label={label}
                      selected={isSel}
                      justAdded={isJust}
                      opacity={chipOp(i)}
                    />
                  );
                })}
              </div>

              {/* OR ADD CUSTOM */}
              <div style={{
                fontSize: 11, fontWeight: 700, letterSpacing: '0.12em',
                textTransform: 'uppercase', color: BRAND.inkSub,
                marginTop: 22, marginBottom: 10,
              }}>
                Or add custom
              </div>
              <div style={{ display: 'flex', gap: 10 }}>
                <div style={{
                  flex: 1,
                  height: 48, padding: '0 16px',
                  background: '#fff',
                  border: `1px solid ${BRAND.border}`,
                  borderRadius: 10,
                  display: 'flex', alignItems: 'center',
                  fontSize: 15, color: BRAND.inkSub,
                  fontFamily: BRAND.font,
                }}>
                  e.g. Pre-Primary, Class 11 Commerce
                </div>
                <div style={{
                  display: 'inline-flex', alignItems: 'center', gap: 6,
                  padding: '0 18px',
                  borderRadius: 10,
                  border: `1px solid ${BRAND.border}`,
                  background: '#fff',
                  color: BRAND.ink,
                  fontSize: 15, fontWeight: 600,
                }}>
                  <span style={{ color: BRAND.inkSub }}>+</span> Add
                </div>
              </div>
            </Card>
          </div>

          {/* Class rows below the card (3 max) */}
          <div style={{ marginTop: 14 }}>
            {[0, 1, 2].map(i => {
              const op = classRowProgress(i);
              if (op === 0) return null;
              const name = `Class ${i + 1}`;
              const sections = (i === 0 && hasSectionB) ? ['A', 'B'] : ['A'];
              return (
                <ClassRow
                  key={name}
                  name={name}
                  sections={sections}
                  opacity={op}
                  scale={0.96 + 0.04 * op}
                  justAddedSection={i === 0 && justAddedSection}
                />
              );
            })}
          </div>

          {/* Footer separator + buttons */}
          <div style={{
            height: 1, background: BRAND.borderSoft, marginTop: 18,
            opacity: cardOp,
          }}/>
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            marginTop: 14,
            opacity: cardOp,
          }}>
            <div style={{
              display: 'flex', alignItems: 'center', gap: 6,
              color: BRAND.inkSub, fontSize: 15, fontWeight: 500,
            }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M15 18l-6-6 6-6"/>
              </svg>
              Back
            </div>
            <div style={{ position: 'relative' }}>
              <div style={{
                position: 'absolute', inset: 0,
                borderRadius: 10,
                background: BRAND.greenSoft,
                opacity: haloOp,
                transform: `scale(${haloScale})`,
                pointerEvents: 'none',
              }}/>
              <div style={{
                position: 'relative',
                display: 'inline-flex', alignItems: 'center', gap: 6,
                padding: '12px 22px', borderRadius: 10,
                background: continueActive > 0.5 ? BRAND.green : '#9bcdb6',
                color: '#fff',
                fontSize: 15, fontWeight: 600,
                transform: `scale(${1 - clickSquish})`,
                boxShadow: continueHot
                  ? `0 0 0 8px ${BRAND.greenSoft}, 0 8px 20px rgba(4,120,87,0.28)`
                  : continueActive > 0.5 ? '0 2px 6px rgba(4,120,87,0.18)' : 'none',
                transition: 'background 320ms, box-shadow 200ms',
                opacity: 0.5 + 0.5 * continueActive,
              }}>
                Continue
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M9 18l6-6-6-6"/>
                </svg>
              </div>
            </div>
          </div>
        </div>

        {/* Cursor */}
        {cursorOp > 0 && (
          <div style={{
            position: 'absolute',
            left: cursorFrom.x - STEP2_FRAME.x,
            top: cursorFrom.y - STEP2_FRAME.y + settle,
            pointerEvents: 'none',
          }}>
            <Cursor x={0} y={0} opacity={cursorOp}/>
          </div>
        )}
      </AppFrame>
    </div>
  );
}

function Step2App({ loop = true, persistKey = "step2video" }) {
  return (
    <Stage width={1920} height={1080} duration={10} background={BRAND.bg} loop={loop} persistKey={persistKey}>
      <Step2Video start={0}/>
    </Stage>
  );
}

Object.assign(window, { Step2Video, Step2App });

if (!window.__STEP2_NO_AUTOMOUNT) {
  ReactDOM.createRoot(document.getElementById('root')).render(<Step2App/>);
}