// Scenes 4-6: Funny moment, Emotional shift, Logo reveal

// ─────────────────────────────────────────────────────────────
// SCENE 4 — Funny Human Moment (25-38s = 13s)
// ─────────────────────────────────────────────────────────────
function Scene4Funny() {
  const { localTime } = useSprite();
  const t = localTime;

  // Beat sheet within 13s:
  // 0.0-0.5  fade in
  // 0.5-3.5  Alex: "I tried learning Japanese once."
  // 3.5-4.0  Yuki laughs
  // 4.0-7.0  Yuki: "That explains your pronunciation."
  // 7.0-9.5  Alex reacts: "Wow. AI translated the insult perfectly."
  // 9.5-11.5 both laugh
  // 11.5-13  "emotion preserved" UI highlight

  const inT = clamp(t / 0.5, 0, 1);

  // Camera shifts: when speaking, that side gets bigger
  const focusLeft  = t < 4.0 || (t > 7.0 && t < 9.5);   // alex speaking
  const focusRight = (t > 4.0 && t < 7.0) || (t > 9.5 && t < 11.5); // yuki speaking/laughing

  const leftScale = focusLeft ? 1.0 : 0.86;
  const rightScale = focusRight ? 1.0 : 0.86;

  // emotion preserved badge appears late
  const emoT = clamp((t - 11.0) / 0.6, 0, 1);

  // bottom caption that flips with the speaker
  let captionText = null;
  let captionOrig = null;
  let captionWho = null;
  let captionLang = null;

  if (t > 0.5 && t < 4.0) {
    captionText = "\"i tried learning japanese once.\"";
    captionOrig = "一回、日本語を勉強したことあるよ";
    captionWho = "ALEX"; captionLang = "EN→JP";
  } else if (t > 4.0 && t < 7.0) {
    captionText = "\"that explains your pronunciation.\"";
    captionOrig = "発音でだいたい分かるよ ふふ";
    captionWho = "YUKI"; captionLang = "JP→EN";
  } else if (t > 7.0 && t < 9.5) {
    captionText = "\"wow. the AI translated the insult perfectly.\"";
    captionOrig = "うわ、AI、ディスを完璧に訳したな";
    captionWho = "ALEX"; captionLang = "EN→JP";
  }

  // typewriter progress for caption
  let capP = 1;
  if (t > 0.5 && t < 4.0) capP = clamp((t - 0.6) / 2.4, 0, 1);
  if (t > 4.0 && t < 7.0) capP = clamp((t - 4.1) / 2.0, 0, 1);
  if (t > 7.0 && t < 9.5) capP = clamp((t - 7.1) / 1.6, 0, 1);

  // emoji reactions floating
  const reactions = [];
  if (t > 3.4 && t < 5.0) {
    reactions.push({ char: '😂', x: 1300, y: 220, delay: 3.4, life: 1.6 });
    reactions.push({ char: '🤣', x: 1380, y: 290, delay: 3.7, life: 1.4 });
  }
  if (t > 6.7 && t < 8.0) {
    reactions.push({ char: '😅', x: 460, y: 240, delay: 6.7, life: 1.3 });
  }
  if (t > 9.4 && t < 11.4) {
    reactions.push({ char: '💀', x: 460, y: 240, delay: 9.4, life: 1.8 });
    reactions.push({ char: '😂', x: 1320, y: 240, delay: 9.6, life: 1.8 });
  }

  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: V.paper2,
      opacity: inT,
    }}>
      <VPaperTexture />

      {/* LEFT — Alex face card */}
      <div style={{
        position: 'absolute', left: 110, top: '50%',
        transform: `translateY(-50%) scale(${leftScale})`,
        transformOrigin: 'left center',
        transition: 'transform 0.45s cubic-bezier(0.25,0.8,0.25,1)',
      }}>
        <FaceCard label="A" name="Alex" lang="EN" speaking={focusLeft} time={t} />
      </div>

      {/* RIGHT — Yuki face card */}
      <div style={{
        position: 'absolute', right: 110, top: '50%',
        transform: `translateY(-50%) scale(${rightScale})`,
        transformOrigin: 'right center',
        transition: 'transform 0.45s cubic-bezier(0.25,0.8,0.25,1)',
      }}>
        <FaceCard label="Y" name="Yuki" lang="JP" speaking={focusRight} time={t} laughing={t > 3.4 && t < 4.2} />
      </div>

      {/* CENTER caption */}
      {captionText && (
        <div style={{
          position: 'absolute', left: '50%', top: '50%',
          transform: 'translate(-50%, -50%)',
          width: 580,
        }}>
          <VCaption who={captionWho} lang={captionLang} original={captionOrig} progress={capP} width={580}>
            {captionText}
          </VCaption>
        </div>
      )}

      {/* Floating reactions */}
      {reactions.map((r, i) => {
        const age = t - r.delay;
        const aP = clamp(age / r.life, 0, 1);
        return (
          <div key={i} style={{
            position: 'absolute', left: r.x, top: r.y,
            fontSize: 80,
            opacity: 1 - aP,
            transform: `translateY(${-aP * 80}px) rotate(${(aP - 0.5) * 20}deg) scale(${0.6 + aP * 0.5})`,
            pointerEvents: 'none',
          }}>{r.char}</div>
        );
      })}

      {/* emotion preserved badge */}
      <div style={{
        position: 'absolute', left: '50%', bottom: 80,
        transform: `translateX(-50%) translateY(${(1 - emoT) * 24}px) scale(${0.85 + 0.15 * Easing.easeOutBack(emoT)})`,
        opacity: emoT,
        display: 'flex', alignItems: 'center', gap: 14,
        background: V.paper,
        border: `2.5px solid ${V.accent}`,
        borderRadius: 999,
        padding: '14px 28px',
        boxShadow: '5px 7px 0 rgba(0,0,0,0.08)',
      }}>
        <span style={{ fontSize: 32 }}>💛</span>
        <span style={{
          fontFamily: fontHead, fontSize: 30, fontWeight: 700,
          color: V.ink, letterSpacing: '-0.02em',
        }}>
          emotion preserved.
        </span>
        <span style={{
          fontFamily: fontMono, fontSize: 14, color: V.accent, letterSpacing: 1.2,
        }}>tone · laughter · pause</span>
      </div>

      {/* huggie bug — keeps brand present during the human moment */}
      <div style={{
        position: 'absolute', top: 50, left: '50%', transform: 'translateX(-50%)',
        display: 'flex', alignItems: 'center', gap: 14,
        padding: '8px 18px',
        border: `2px solid ${V.ink}`, borderRadius: 999,
        background: V.paper, boxShadow: '3px 4px 0 rgba(0,0,0,0.06)',
      }}>
        <span style={{
          width: 9, height: 9, borderRadius: 5, background: V.green,
          animation: 'vPulseDot 1.2s ease-out infinite',
        }} />
        <HuggieLogo size={26} color={V.ink} heartColor={V.accent} />
        <span style={{ fontFamily: fontMono, fontSize: 13, color: V.ink3, letterSpacing: 2 }}>
          02:14 · JP ⇆ EN
        </span>
      </div>
    </div>
  );
}

// Big face card used by Scene 4
function FaceCard({ label, name, lang, speaking, time, laughing }) {
  const tilt = laughing ? `rotate(${Math.sin(time * 18) * 4}deg)` : 'rotate(0deg)';
  return (
    <div style={{
      width: 460, padding: 28,
      background: V.paper,
      border: `3px solid ${V.ink}`,
      borderRadius: 28,
      boxShadow: '6px 9px 0 rgba(0,0,0,0.08)',
      textAlign: 'center',
      transform: tilt,
      willChange: 'transform',
    }}>
      <div style={{ position: 'relative', display: 'inline-block' }}>
        <VAvatar size={220} label={label} color={V.accent2} />
        {speaking && (
          <div style={{
            position: 'absolute', inset: -12, borderRadius: '50%',
            border: `3px solid ${V.accent}`,
            animation: 'vRing 1.4s ease-out infinite',
          }} />
        )}
        <div style={{
          position: 'absolute', bottom: -10, right: -10,
        }}>
          <VLang code={lang} size={56} color={V.accent} style={{ background: V.accent, color: '#fff' }} />
        </div>
      </div>
      <div style={{ fontFamily: fontHead, fontSize: 44, fontWeight: 700, marginTop: 16 }}>{name}</div>
      <div style={{ marginTop: 12 }}>
        <VWaveform width={360} height={56} time={time}
                   intensity={speaking ? 1 : 0.18}
                   color={V.accent} />
      </div>
      <div style={{
        marginTop: 10, fontFamily: fontMono, fontSize: 14, letterSpacing: 1.5,
        color: speaking ? V.accent : V.ink3,
      }}>
        {speaking ? '● SPEAKING' : '○ LISTENING'}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// SCENE 5 — Emotional Shift (38-50s = 12s)
// ─────────────────────────────────────────────────────────────
function Scene5Emotional() {
  const { localTime } = useSprite();
  const t = localTime;

  // 0-0.5 fade in
  // 0.5-2  vignette of laughing
  // 2-3.5  late night call
  // 3.5-5  walking outside
  // 5-6.5  voice notes
  // 6.5-8.5 map lighting up
  // 8.5-12  "not just translation. CONNECTION."

  const inT = clamp(t / 0.5, 0, 1);

  // Determine which vignette frame is centered (cycle of 4)
  const vignettes = [
    { id: 0, start: 0.4, end: 2.4 },
    { id: 1, start: 2.2, end: 4.0 },
    { id: 2, start: 3.8, end: 5.6 },
    { id: 3, start: 5.4, end: 7.2 },
  ];

  const head1T = t > 7.2 ? clamp((t - 7.2) / 0.5, 0, 1) - clamp((t - 9.5) / 0.4, 0, 1) : 0;
  const head2T = t > 9.5 ? clamp((t - 9.5) / 0.5, 0, 1) : 0;

  // World map state — pulses light up over time
  const mapAlive = t > 6.0;
  const pulses = [
    { x: 22, y: 36, delay: 6.0, label: 'tokyo' },
    { x: 47, y: 38, delay: 6.2, label: 'madrid' },
    { x: 30, y: 60, delay: 6.35, label: 'são paulo' },
    { x: 50, y: 28, delay: 6.45, label: 'london' },
    { x: 75, y: 50, delay: 6.55, label: 'jakarta' },
    { x: 65, y: 32, delay: 6.65, label: 'seoul' },
    { x: 18, y: 50, delay: 6.75, label: 'la' },
    { x: 60, y: 56, delay: 6.85, label: 'mumbai' },
    { x: 14, y: 42, delay: 6.95, label: 'sf', minor: true, labelDy: 4 },
    { x: 20, y: 31, delay: 7.0, label: 'vancouver', minor: true, labelDy: -20 },
    { x: 27, y: 45, delay: 7.05, label: 'mexico city', minor: true },
    { x: 35, y: 28, delay: 7.1, label: 'nyc', minor: true },
    { x: 42, y: 26, delay: 7.15, label: 'paris', minor: true, labelDy: -19 },
    { x: 52, y: 43, delay: 7.2, label: 'cairo', minor: true },
    { x: 54, y: 63, delay: 7.25, label: 'nairobi', minor: true },
    { x: 57, y: 35, delay: 7.3, label: 'istanbul', minor: true, labelDy: -19 },
    { x: 69, y: 42, delay: 7.35, label: 'bangkok', minor: true },
    { x: 73, y: 36, delay: 7.4, label: 'hong kong', minor: true, labelDy: -19 },
    { x: 80, y: 39, delay: 7.45, label: 'manila', minor: true },
    { x: 83, y: 65, delay: 7.5, label: 'sydney', minor: true },
    { x: 39, y: 54, delay: 7.55, label: 'lagos', minor: true },
    { x: 44, y: 66, delay: 7.6, label: 'cape town', minor: true },
  ].map(p => ({ ...p, delay: p.delay - 6.0 + 0.0 })); // adjust
  // Pairs of city indices to connect with arched dashed lines.
  // Each line is "a real connection" — the visual proof of the headline.
  const connections = [
    { from: 6, to: 0, weight: 0.45 },  // la → tokyo
    { from: 3, to: 1, weight: 0.45 },  // london → madrid
    { from: 2, to: 0, weight: 0.45 },  // são paulo → tokyo
    { from: 5, to: 7, weight: 0.45 },  // seoul → mumbai
    { from: 3, to: 4, weight: 0.45 },  // london → jakarta
    { from: 7, to: 4, weight: 0.45 },  // mumbai → jakarta
    { from: 8, to: 11 },
    { from: 9, to: 0 },
    { from: 10, to: 2 },
    { from: 11, to: 3 },
    { from: 12, to: 1 },
    { from: 12, to: 3 },
    { from: 13, to: 15 },
    { from: 13, to: 20 },
    { from: 14, to: 20 },
    { from: 14, to: 21 },
    { from: 15, to: 5 },
    { from: 15, to: 16 },
    { from: 16, to: 17 },
    { from: 16, to: 4 },
    { from: 17, to: 18 },
    { from: 18, to: 4 },
    { from: 18, to: 19 },
    { from: 19, to: 4, opacity: 0.55 },
    { from: 20, to: 2 },
    { from: 20, to: 12 },
    { from: 21, to: 14 },
    { from: 21, to: 7, opacity: 0.55 },
  ];
  const photoCards = [
    {
      x: 250, y: 220, delay: 6.55,
      label: 'tokyo ⇄ paris',
      src: 'https://images.pexels.com/photos/5080659/pexels-photo-5080659.jpeg?auto=compress&cs=tinysrgb&w=520&h=360&fit=crop',
      objectPosition: '50% 42%',
    },
    {
      x: 1485, y: 250, delay: 6.85,
      label: 'paris ⇄ seoul',
      src: 'https://images.pexels.com/photos/19254449/pexels-photo-19254449.jpeg?auto=compress&cs=tinysrgb&w=520&h=360&fit=crop',
      objectPosition: '50% 42%',
    },
    {
      x: 280, y: 585, delay: 7.15,
      label: 'kyoto ⇄ paris',
      src: 'https://images.pexels.com/photos/7730669/pexels-photo-7730669.jpeg?auto=compress&cs=tinysrgb&w=520&h=360&fit=crop',
      objectPosition: '50% 40%',
    },
    {
      x: 1498, y: 592, delay: 7.35,
      label: 'seoul ⇄ paris',
      src: 'https://images.pexels.com/photos/8686980/pexels-photo-8686980.jpeg?auto=compress&cs=tinysrgb&w=520&h=360&fit=crop',
      objectPosition: '50% 35%',
    },
  ];

  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: V.paper2, opacity: inT,
    }}>
      <VPaperTexture />

      {/* Vignettes — single centered slot, crossfade in place.
          Earlier this was a flex row that re-centered as cards
          mounted/unmounted, which made each card visibly jump
          sideways when its neighbour appeared. Stacking in one
          absolute slot keeps the crossfade smooth. */}
      <div style={{
        position: 'absolute', left: '50%', top: 130,
        transform: 'translateX(-50%)',
        width: 380, height: 520,
      }}>
        {vignettes.map(v => {
          const alive = t >= v.start - 0.4 && t <= v.end + 0.4;
          if (!alive) return null;
          const aT = clamp((t - v.start) / 0.4, 0, 1);
          const oT = 1 - clamp((t - v.end) / 0.4, 0, 1);
          const opacity = aT * oT;
          const y = (1 - aT) * 30;
          // Tiny horizontal drift so consecutive vignettes don't
          // feel like a stuck frame — left-to-right pan, 16px max.
          const drift = (v.id % 2 === 0 ? -1 : 1) * (1 - aT) * 16;
          return (
            <div key={v.id} style={{
              position: 'absolute', left: 0, top: 0,
              opacity,
              transform: `translate(${drift}px, ${y}px)`,
              willChange: 'transform, opacity',
            }}>
              <Vignette which={v.id} time={t - v.start} />
            </div>
          );
        })}
      </div>

      {/* World map — sized and positioned so the headlines below
          don't overlap the dots/cities. Was top:52% 1300x560 which
          dominated the canvas and forced the next headline to sit
          on top of it. */}
      {mapAlive && (
        <>
          {photoCards.map((card, i) => (
            <ConnectionPhotoCard key={i} card={card} time={t} />
          ))}
          <div style={{
            position: 'absolute', left: '50%', top: '42%',
            transform: 'translate(-50%, -50%)',
            opacity: clamp((t - 6.0) / 0.6, 0, 1) * (1 - clamp((t - 11.7) / 0.3, 0, 1)),
          }}>
            <VWorld width={1260} height={500}
                    pulses={pulses}
                    connections={connections}
                    time={t - 6.0} />
          </div>
        </>
      )}

      {/* Headlines live in a single bottom slot — first "not just
          translation." then "real connection." sequentially. They
          sit BELOW the map so the dot/line network stays visible. */}
      {head1T > 0 && (
        <div style={{
          position: 'absolute', left: '50%', top: 820,
          transform: `translate(-50%, -50%) translateY(${(1 - head1T) * 20}px)`,
          opacity: head1T,
          textAlign: 'center',
        }}>
          <div style={{
            fontFamily: fontHead, fontSize: 72, fontWeight: 700, color: V.ink2,
            letterSpacing: '-0.03em', lineHeight: 1.0,
          }}>
            not just translation.
          </div>
        </div>
      )}

      {head2T > 0 && (
        <div style={{
          position: 'absolute', left: '50%', top: 820,
          transform: `translate(-50%, -50%) scale(${0.92 + 0.08 * Easing.easeOutBack(head2T)})`,
          opacity: head2T,
          textAlign: 'center',
        }}>
          <div style={{
            fontFamily: fontHead, fontSize: 132, fontWeight: 700, color: V.accent,
            letterSpacing: '-0.04em', lineHeight: 0.95,
          }}>
            real connection.
          </div>
          <div style={{ display: 'flex', justifyContent: 'center', marginTop: 14 }}>
            <VUnderline w={420} thick={8} />
          </div>
        </div>
      )}
    </div>
  );
}

function ConnectionPhotoCard({ card, time }) {
  const inT = clamp((time - card.delay) / 0.5, 0, 1);
  const outT = 1 - clamp((time - 11.6) / 0.3, 0, 1);
  const show = inT * outT;
  if (show <= 0) return null;

  return (
    <div style={{
      position: 'absolute',
      left: card.x, top: card.y,
      width: 184, height: 126,
      transform: `translate(-50%, -50%) translateY(${(1 - inT) * 18}px)`,
      opacity: show * 0.94,
      border: `2px solid ${V.ink}`,
      borderRadius: 8,
      overflow: 'hidden',
      background: V.paper,
      boxShadow: '4px 6px 0 rgba(0,0,0,0.08)',
      pointerEvents: 'none',
      zIndex: 1,
    }}>
      <img src={card.src} alt="" style={{
        width: '100%', height: '100%',
        objectFit: 'cover',
        objectPosition: card.objectPosition || '50% 50%',
        display: 'block',
        filter: 'saturate(1.04) contrast(0.98) brightness(1.02)',
      }} />
      <div style={{
        position: 'absolute', left: 8, bottom: 7,
        fontFamily: fontMono, fontSize: 10,
        color: V.ink,
        background: 'rgba(250,250,247,0.86)',
        border: `1px solid ${V.ink}`,
        borderRadius: 5,
        padding: '2px 5px',
        whiteSpace: 'nowrap',
      }}>
        {card.label}
      </div>
    </div>
  );
}

// Small montage vignette cards used in Scene 5
function Vignette({ which, time }) {
  // four kinds: laugh-call, night-call, walking, voice-note
  const w = 380, h = 480;
  const common = {
    width: w, height: h,
    background: V.paper, border: `3px solid ${V.ink}`,
    borderRadius: 24, padding: 22,
    boxShadow: '5px 7px 0 rgba(0,0,0,0.08)',
    overflow: 'hidden', position: 'relative',
    display: 'flex', flexDirection: 'column', gap: 12,
  };

  if (which === 0) {
    // Laughing on call (paper)
    return (
      <div style={common}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontFamily: fontMono, fontSize: 13, color: V.ink3 }}>
          <span>● 12:42</span><span>JP ⇆ EN</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 8 }}>
          <VAvatar size={86} label="Y" color={V.accent2} style={{ transform: `rotate(${Math.sin(time * 14) * 3}deg)` }} />
          <div>
            <div style={{ fontFamily: fontHead, fontSize: 24, fontWeight: 700 }}>Yuki</div>
            <div style={{ fontFamily: fontMono, fontSize: 12, color: V.accent }}>● laughing</div>
          </div>
        </div>
        <VWaveform width={320} height={48} time={time} intensity={1} color={V.accent} />
        <div style={{
          marginTop: 4, padding: '10px 14px', background: V.accent2,
          border: `2px solid ${V.accent}`, borderRadius: 14,
          fontFamily: fontHand, fontSize: 22, fontWeight: 700, lineHeight: 1.25,
        }}>
          "you didn't just say that 😂"
        </div>
        <div style={{ fontFamily: fontMono, fontSize: 12, color: V.ink3, fontStyle: 'italic' }}>
          そんなこと言わないでよ
        </div>
        <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ fontSize: 26 }}>😂</span><span style={{ fontSize: 26 }}>😂</span><span style={{ fontSize: 26 }}>😂</span>
        </div>
      </div>
    );
  }
  if (which === 1) {
    // Late night call (dark)
    return (
      <div style={{ ...common, background: V.dark, color: '#fff', borderColor: V.ink }}>
        <div style={{ fontFamily: fontMono, fontSize: 13, color: 'rgba(255,255,255,0.6)', letterSpacing: 2 }}>
          ◐ 2:17 AM · CALLING
        </div>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 14 }}>
          {/* stars */}
          <div style={{ position: 'absolute', top: 60, left: 30, fontSize: 12, color: '#fff', opacity: 0.6 }}>✦</div>
          <div style={{ position: 'absolute', top: 130, right: 50, fontSize: 16, color: '#fff', opacity: 0.4 }}>✧</div>
          <div style={{ position: 'absolute', top: 200, left: 60, fontSize: 10, color: '#fff', opacity: 0.5 }}>✦</div>
          <VAvatar size={140} label="Y" color={V.accent2} />
          <div style={{ fontFamily: fontHead, fontSize: 28, fontWeight: 700 }}>Yuki</div>
          <div style={{ fontFamily: fontMono, fontSize: 14, color: 'rgba(255,255,255,0.6)' }}>
            00:42:18 · still talking
          </div>
          <VWaveform width={280} height={42} time={time} intensity={0.4} color={V.accent2} />
        </div>
      </div>
    );
  }
  if (which === 2) {
    // Walking outside — banner / lock screen style
    return (
      <div style={{ ...common, justifyContent: 'space-between' }}>
        <div style={{
          display: 'flex', justifyContent: 'space-between',
          fontFamily: fontMono, fontSize: 13, color: V.ink3,
        }}>
          <span>walking · paris</span><span>9:24 PM</span>
        </div>
        <div style={{ flex: 1, position: 'relative' }}>
          {/* sketchy skyline */}
          <svg viewBox="0 0 100 60" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
            <path d="M 0 40 L 10 38 L 12 30 L 16 32 L 18 22 L 22 24 L 26 32 L 32 30 L 36 14 L 40 18 L 42 28 L 46 30 L 50 24 L 54 30 L 58 26 L 64 30 L 68 18 L 72 22 L 76 32 L 82 30 L 86 22 L 92 28 L 100 30 L 100 60 L 0 60 Z"
                  fill={V.ink} opacity="0.85" />
            <circle cx="78" cy="14" r="3" fill={V.accent2} stroke={V.ink} strokeWidth="0.4" />
            <g fill={V.accent2} opacity="0.5">
              <circle cx="20" cy="10" r="0.4" />
              <circle cx="40" cy="6" r="0.3" />
              <circle cx="60" cy="12" r="0.4" />
              <circle cx="84" cy="6" r="0.3" />
            </g>
          </svg>
        </div>
        <div style={{
          background: V.paper2, border: `2px solid ${V.ink}`, borderRadius: 14,
          padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <VAvatar size={42} label="Y" color={V.accent2} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontFamily: fontHead, fontSize: 17, fontWeight: 700 }}>Yuki · live</div>
            <div style={{ fontFamily: fontHand, fontSize: 16, color: V.ink2, lineHeight: 1.25 }}>
              "tell me what you see right now."
            </div>
          </div>
          <div style={{ width: 38, height: 38, borderRadius: 19, background: V.green, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 17 }}>☎</div>
        </div>
      </div>
    );
  }
  // which === 3 → voice note message thread
  return (
    <div style={common}>
      <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: fontMono, fontSize: 13, color: V.ink3 }}>
        <span>voice notes</span><span>JP ⇆ EN</span>
      </div>
      <div style={{ alignSelf: 'flex-start', maxWidth: '90%' }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 10,
          padding: '10px 14px',
          background: V.paper2, border: `2px solid ${V.ink}`,
          borderRadius: '18px 18px 18px 4px',
        }}>
          <div style={{ width: 32, height: 32, borderRadius: 16, background: V.accent, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>▶</div>
          <VWaveform width={170} height={28} time={time} intensity={0.85} color={V.accent} bars={20} />
          <span style={{ fontFamily: fontMono, fontSize: 12, color: V.ink3 }}>0:08</span>
        </div>
        <div style={{ fontFamily: fontHand, fontSize: 17, marginTop: 6, marginLeft: 6 }}>"hey, i miss your voice."</div>
        <div style={{ fontFamily: fontMono, fontSize: 11, color: V.ink3, fontStyle: 'italic', marginLeft: 6 }}>
          ↳ from yuki · ja
        </div>
      </div>
      <div style={{ alignSelf: 'flex-end', maxWidth: '90%', marginTop: 6 }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 10,
          padding: '10px 14px',
          background: V.accent, color: '#fff', border: `2px solid ${V.ink}`,
          borderRadius: '18px 18px 4px 18px',
        }}>
          <div style={{ width: 32, height: 32, borderRadius: 16, background: '#fff', color: V.accent, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>▶</div>
          <VWaveform width={170} height={28} time={time + 0.7} intensity={0.85} color="#fff" bars={20} />
          <span style={{ fontFamily: fontMono, fontSize: 12, opacity: 0.9 }}>0:06</span>
        </div>
        <div style={{ fontFamily: fontHand, fontSize: 17, marginTop: 6, marginRight: 6, textAlign: 'right' }}>"i miss yours more."</div>
      </div>
      <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, fontFamily: fontMono, fontSize: 12, color: V.accent }}>
        <span style={{ width: 8, height: 8, borderRadius: 4, background: V.accent }} />
        translated · 0.38s
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// SCENE 6 — Logo Reveal (50-60s = 10s)
// ─────────────────────────────────────────────────────────────
function Scene6Logo() {
  const { localTime } = useSprite();
  const t = localTime;

  // Beat sheet (10s):
  // 0.0-0.8   Two hearts converge, merge into one
  // 0.8-2.0   "huggie" wordmark scales in beneath the heart
  // 2.0-3.5   Hand underline draws under wordmark
  // 3.5-7.5   Official tagline fades in (serif italic)
  // 7.5-9.5   "connected." chip
  // 9.5-10    Hold

  const logoT      = clamp((t - 0.7) / 1.0, 0, 1);
  const underlineT = clamp((t - 1.8) / 1.2, 0, 1);
  const tag1T      = clamp((t - 3.3) / 0.6, 0, 1);
  const tag2T      = clamp((t - 4.0) / 0.6, 0, 1);
  const connT      = clamp((t - 6.8) / 0.4, 0, 1);

  // Hearts converging
  const heartTravelT = Easing.easeOutCubic(clamp(t / 0.7, 0, 1));
  const heart1X = -200 + heartTravelT * 200;
  const heart2X = 200 - heartTravelT * 200;
  const heartsCollideT = clamp((t - 0.55) / 0.2, 0, 1);
  const combinedHeartSize = 80 + heartsCollideT * 30;

  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: V.paper2,
    }}>
      <VPaperTexture />

      {/* Subtle radial glow */}
      <div style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(circle at 50% 42%, rgba(255,107,74,0.14), transparent 60%)`,
      }} />

      {/* Hearts converge above the wordmark */}
      <div style={{
        position: 'absolute', left: '50%', top: '30%',
        transform: 'translate(-50%, -50%)',
        width: 600, height: 160, pointerEvents: 'none',
      }}>
        {/* approaching hearts */}
        {heartsCollideT < 1 && (
          <>
            <div style={{
              position: 'absolute', left: '50%', top: '50%',
              transform: `translate(calc(-50% + ${heart1X}px), -50%)`,
              opacity: 1 - heartsCollideT,
            }}>
              <VHeart size={90} color={V.accent2} x={0} y={0} style={{ position: 'static' }} />
            </div>
            <div style={{
              position: 'absolute', left: '50%', top: '50%',
              transform: `translate(calc(-50% + ${heart2X}px), -50%)`,
              opacity: 1 - heartsCollideT,
            }}>
              <VHeart size={90} color={V.accent} x={0} y={0} style={{ position: 'static' }} />
            </div>
          </>
        )}
        {/* combined heart — heartbeat */}
        <div style={{
          position: 'absolute', left: '50%', top: '50%',
          transform: `translate(-50%, -50%) scale(${0.92 + 0.08 * Math.sin(t * 2.6)})`,
          opacity: heartsCollideT,
        }}>
          <VHeart size={combinedHeartSize} color={V.accent} x={0} y={0} style={{ position: 'static' }} />
        </div>
        {/* sparkles */}
        {heartsCollideT > 0.5 && [0, 1, 2, 3, 4].map(i => {
          const ang = (i / 5) * Math.PI * 2 + t * 0.3;
          const r = 90 + Math.sin(t * 3 + i) * 12;
          return (
            <div key={i} style={{
              position: 'absolute', left: '50%', top: '50%',
              transform: `translate(calc(-50% + ${Math.cos(ang) * r}px), calc(-50% + ${Math.sin(ang) * r}px))`,
            }}>
              <VSparkle size={22} color={V.accent} x={0} y={0} style={{ position: 'static' }} />
            </div>
          );
        })}
      </div>

      {/* HUGGIE WORDMARK — final logo reveal.
          noHeart: the big merged heart above already occupies the
          brand-heart slot for this scene. The wordmark's own heart
          would sit centred on the gg-cluster, which is offset RIGHT
          of canvas centre (because i/e are narrower than h/u) and
          reads as a competing second heart. */}
      <div style={{
        position: 'absolute', left: '50%', top: '46%',
        transform: `translate(-50%, -50%) scale(${0.7 + 0.3 * Easing.easeOutBack(logoT)})`,
        opacity: logoT,
        textAlign: 'center',
      }}>
        <HuggieLogo size={320} color={V.ink} heartColor={V.accent} noHeart />
        {/* hand underline */}
        <svg width="700" height="36" style={{ display: 'block', margin: '0 auto' }}>
          <path d="M 30 22 Q 220 38, 420 16 T 670 22"
                stroke={V.accent} strokeWidth="9" fill="none" strokeLinecap="round"
                strokeDasharray="900" strokeDashoffset={(1 - underlineT) * 900} />
        </svg>
      </div>

      {/* OFFICIAL TAGLINE — two-line serif, italic accent */}
      <div style={{
        position: 'absolute', left: '50%', bottom: 170,
        transform: 'translateX(-50%)',
        textAlign: 'center', width: 1400,
      }}>
        <div style={{
          fontFamily: fontSerif, fontSize: 78, fontWeight: 400, color: V.ink,
          letterSpacing: '-0.01em', lineHeight: 1.05,
          opacity: tag1T,
          transform: `translateY(${(1 - tag1T) * 18}px)`,
        }}>
          every call, in the
        </div>
        <div style={{
          fontFamily: fontSerif, fontStyle: 'italic',
          fontSize: 92, fontWeight: 400, color: V.accent,
          letterSpacing: '-0.01em', lineHeight: 1.05, marginTop: 4,
          opacity: tag2T,
          transform: `translateY(${(1 - tag2T) * 18}px)`,
        }}>
          language of your heart.
        </div>
      </div>

      {/* "connected." sound chip */}
      <div style={{
        position: 'absolute', left: '50%', bottom: 70,
        transform: `translateX(-50%) scale(${0.85 + 0.15 * Easing.easeOutBack(connT)})`,
        opacity: connT,
        display: 'flex', alignItems: 'center', gap: 10,
        background: V.paper,
        border: `2px solid ${V.ink}`,
        borderRadius: 999,
        padding: '8px 18px',
        boxShadow: '4px 5px 0 rgba(0,0,0,0.08)',
      }}>
        <span style={{
          width: 10, height: 10, borderRadius: 5, background: V.green,
          animation: 'vPulseDot 1.2s ease-out infinite',
        }} />
        <span style={{ fontFamily: fontMono, fontSize: 18, color: V.ink, fontWeight: 700, letterSpacing: 2 }}>
          CONNECTED.
        </span>
      </div>
    </div>
  );
}

Object.assign(window, { Scene4Funny, Scene5Emotional, Scene6Logo });