// Logo-driven motion for Crease — using the real logo pixels.
// The crease mark is split into two layer PNGs (crease-A = long thin wedge,
// crease-B = parallelogram) so each "crease line" can be animated
// independently while matching the brand exactly.
//
// Reference loading pattern (applied to splash + loading + others):
//   1. Crease A slides in from the LEFT, Crease B from the RIGHT
//   2. Both lock into place; metallic shimmer sweeps across the shapes
//      (mask-clipped to the union of both lines so only the chalk lights up)
//   3. "Crease" wordmark fades up from below with smooth easing

// ─────────────────────────────────────────────────────────────
// Keyframes
// ─────────────────────────────────────────────────────────────
if (typeof document !== 'undefined') {
  const old = document.getElementById('crease-logo-motion');
  if (old) old.remove();
  const s = document.createElement('style');
  s.id = 'crease-logo-motion';
  s.textContent = `
@keyframes cl-line-L {
  0%   { transform: translateX(-160%); opacity: 0; }
  20%  { opacity: 1; }
  55%  { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes cl-line-R {
  0%   { transform: translateX(160%); opacity: 0; }
  20%  { opacity: 1; }
  55%  { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes cl-shimmer-sweep {
  0%   { transform: translateX(-50%); opacity: 0; }
  10%  { opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: translateX(150%); opacity: 0; }
}
@keyframes cl-shimmer-loop {
  0%   { transform: translateX(-60%); }
  100% { transform: translateX(160%); }
}
@keyframes cl-word-rise {
  0%   { transform: translateY(22px); opacity: 0; letter-spacing: 1px; }
  55%  { opacity: 0; transform: translateY(22px); }
  100% { transform: translateY(0); opacity: 1; letter-spacing: -1px; }
}
@keyframes cl-dots {
  0%, 80%, 100% { transform: scale(0.4); opacity: 0.3; }
  40%           { transform: scale(1);   opacity: 1; }
}
@keyframes cl-progressFill {
  0%   { transform: scaleX(0); }
  60%  { transform: scaleX(0.65); }
  90%  { transform: scaleX(0.95); }
  100% { transform: scaleX(1); }
}
@keyframes cl-pullDown {
  0%   { transform: translateY(-50px); opacity: 0; }
  35%  { transform: translateY(0); opacity: 1; }
  65%  { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(60px); opacity: 0; }
}
@keyframes cl-checkDraw {
  0%, 25% { stroke-dashoffset: 60; opacity: 0; }
  40%     { opacity: 1; }
  60%     { stroke-dashoffset: 0; opacity: 1; }
  100%    { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes cl-successRing {
  0%, 30% { transform: scale(0.5); opacity: 0; }
  60%     { transform: scale(1.2); opacity: 0.6; }
  100%    { transform: scale(1.6); opacity: 0; }
}
@keyframes cl-shake {
  0%, 100%   { transform: translateX(0); }
  15%        { transform: translateX(-7px); }
  30%        { transform: translateX(7px); }
  45%        { transform: translateX(-5px); }
  60%        { transform: translateX(5px); }
  75%        { transform: translateX(-3px); }
  90%        { transform: translateX(3px); }
}
@keyframes cl-errorPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
  20%      { box-shadow: 0 0 0 0 rgba(239,68,68,0.55); }
  80%      { box-shadow: 0 0 0 26px rgba(239,68,68,0); }
}
@keyframes cl-emptyBreathe {
  0%, 100% { transform: scale(1); opacity: 0.55; }
  50%      { transform: scale(1.03); opacity: 0.85; }
}
@keyframes cl-spark {
  0%   { transform: translate(0,0) scale(0); opacity: 0; }
  20%  { opacity: 1; transform: translate(var(--sx,0px), var(--sy,0px)) scale(1); }
  100% { opacity: 0; transform: translate(calc(var(--sx,0px) * 2.2), calc(var(--sy,0px) * 2.2)) scale(0.4); }
}
@keyframes cl-ball-x {
  0%   { transform: translateX(-50px); }
  100% { transform: translateX(180px); }
}
@keyframes cl-ball-y {
  0%   { transform: translateY(20px); }
  35%  { transform: translateY(-90px); }
  70%  { transform: translateY(-90px); }
  100% { transform: translateY(-160px); }
}
@keyframes cl-ball-fade {
  0%, 10% { opacity: 1; }
  85%     { opacity: 1; }
  100%    { opacity: 0; }
}
@keyframes cl-trail-dash {
  0%, 5%  { stroke-dashoffset: 280; opacity: 0; }
  20%     { opacity: 1; }
  80%     { stroke-dashoffset: 0; opacity: 0.7; }
  100%    { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes cl-confetti {
  0%   { transform: translateY(-30px) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(180px) rotate(720deg); opacity: 0; }
}
@keyframes cl-six {
  0%, 50%  { transform: scale(0) translateY(20px); opacity: 0; letter-spacing: 4px; }
  68%      { transform: scale(1.25) translateY(0); opacity: 1; letter-spacing: -1px; }
  78%      { transform: scale(1) translateY(0); }
  92%      { opacity: 1; }
  100%     { transform: scale(1) translateY(-6px); opacity: 0; }
}
@keyframes cl-count {
  0%, 30%  { opacity: 0; transform: translateY(8px); }
  45%      { opacity: 1; transform: translateY(0); }
  100%     { opacity: 1; transform: translateY(0); }
}
@keyframes cl-celebrate {
  0%   { transform: translateY(0) scale(1); }
  40%  { transform: translateY(-6px) scale(1.05); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes cl-thump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.18); filter: brightness(1.4) drop-shadow(0 0 14px rgba(255,215,90,0.6)); }
  60%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}
@keyframes cl-impactRing {
  0%   { transform: scale(0.2); opacity: 0; border-width: 4px; }
  20%  { opacity: 0.9; }
  100% { transform: scale(2.6); opacity: 0; border-width: 1px; }
}
@keyframes cl-streamer {
  0%   { transform: translate(-120%, -40%) rotate(-22deg); opacity: 0; }
  20%  { opacity: 0.85; }
  80%  { opacity: 0.85; }
  100% { transform: translate(120%, 40%) rotate(-22deg); opacity: 0; }
}
@keyframes cl-streamerR {
  0%   { transform: translate(120%, -40%) rotate(22deg); opacity: 0; }
  20%  { opacity: 0.85; }
  80%  { opacity: 0.85; }
  100% { transform: translate(-120%, 40%) rotate(22deg); opacity: 0; }
}
@keyframes cl-confetti {
  0%   { transform: translateY(-40px) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(160px) rotate(var(--cr, 360deg)); opacity: 0; }
}
@keyframes cl-numberPop {
  0%   { transform: translateY(20px) scale(0.6); opacity: 0; filter: blur(6px); }
  60%  { transform: translateY(-3px) scale(1.12); opacity: 1; filter: blur(0); }
  80%  { transform: translateY(0) scale(0.96); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes cl-underline {
  0%   { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}
@keyframes cl-labelRise {
  0%   { transform: translateY(10px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
`;
  document.head.appendChild(s);
}

// ─────────────────────────────────────────────────────────────
// CreaseLogo — real-pixel logo with split layers per line.
// Each PNG fills the same aspect-ratio container; their pixel content lives
// in different positions so they overlay correctly into the original mark.
// ─────────────────────────────────────────────────────────────
//
// Asset coordinates (370 x 115):
//   A · long thin wedge — point at upper-right, base bottom-left
//   B · parallelogram — sits lower-right
//
// Modes:
//   play   = each line slides in from its side, shimmer sweeps once
//   loop   = lines static; shimmer sweeps continuously
//   static = no motion (used inside error/empty wrappers that supply their own)
const ASPECT = 370 / 115; // image native aspect

const CreaseLogo = ({
  height = 60,
  mode = 'play',
  // Whether to tint the chalk via CSS filter (e.g. red for error, gold for POTM)
  tint = 'none',
  shimmerColor = 'rgba(255,255,255,0.85)',
  shimmerDelay = 1.0,
  loopDelay = 0,
}) => {
  const width = height * ASPECT;
  const filter = {
    none:   'none',
    red:    'hue-rotate(180deg) saturate(2) brightness(1.1)',
    green:  'hue-rotate(-70deg) saturate(1.5) brightness(1.1)',
    gold:   'hue-rotate(-180deg) saturate(2.2) brightness(1.3) sepia(0.3)',
    muted:  'grayscale(0.55) brightness(1.05)',
  }[tint];

  const lineStyle = (which) => ({
    position: 'absolute', inset: 0,
    width: '100%', height: '100%',
    objectFit: 'contain',
    transformOrigin: '50% 50%',
    animation: mode === 'play'
      ? `${which === 'L' ? 'cl-line-L' : 'cl-line-R'} 1.1s cubic-bezier(.2,.7,.3,1) both`
      : 'none',
    transform: mode === 'static' ? 'translateX(0)' : undefined,
    filter,
  });

  return (
    <div style={{
      position: 'relative', width, height,
      // The shimmer gets clipped to the union of both lines via CSS mask.
      // Using the original full mark PNG as a luminance mask means the
      // shimmer only paints over the chalk.
    }}>
      {/* Crease A — long thin wedge, slides in from the LEFT */}
      <img src="assets/crease-A.png" alt="" style={lineStyle('L')} />
      {/* Crease B — parallelogram, slides in from the RIGHT */}
      <img src="assets/crease-B.png" alt="" style={lineStyle('R')} />

      {/* Shimmer overlay — clipped to the logo via mask. */}
      <div style={{
        position: 'absolute', inset: 0, overflow: 'hidden',
        WebkitMaskImage: 'url(assets/crease-mark.png)',
        maskImage: 'url(assets/crease-mark.png)',
        WebkitMaskSize: '100% 100%', maskSize: '100% 100%',
        WebkitMaskRepeat: 'no-repeat', maskRepeat: 'no-repeat',
        WebkitMaskPosition: 'center', maskPosition: 'center',
        pointerEvents: 'none',
      }}>
        <div style={{
          position: 'absolute', top: 0, bottom: 0, width: '40%',
          background: `linear-gradient(110deg, transparent 0%, ${shimmerColor} 50%, transparent 100%)`,
          transform: 'translateX(-60%)',
          animation: mode === 'play'
            ? `cl-shimmer-sweep 1.1s cubic-bezier(.4,0,.2,1) ${shimmerDelay}s both`
            : mode === 'loop'
              ? `cl-shimmer-loop 2.6s linear ${loopDelay}s infinite`
              : 'none',
          mixBlendMode: 'screen',
        }} />
      </div>
    </div>
  );
};

// Word "Crease" — fades up from below
const CreaseWord = ({ size = 38, delay = 1.4, color = '#9CC8F0' }) => (
  <div style={{
    fontFamily: "'Inter', system-ui, sans-serif",
    fontSize: size, fontWeight: 800, color,
    letterSpacing: -1, lineHeight: 1,
    animation: `cl-word-rise 1.0s cubic-bezier(.2,.7,.3,1) ${delay}s both`,
  }}>Crease</div>
);

// LoopShell — re-key children on an interval so CSS animations restart
const LoopShell = ({ period = 3.6, children }) => {
  const [k, setK] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setK(x => x + 1), period * 1000);
    return () => clearInterval(t);
  }, [period]);
  return <div key={k} style={{ display: 'contents' }}>{children}</div>;
};

// ─────────────────────────────────────────────────────────────
// Stage wrapper
// ─────────────────────────────────────────────────────────────
const LM_W = 280;
const LM_H = 460;

const LogoStage = ({ children, caption, captionSub, accent = 'sky' }) => (
  <div style={{
    width: '100%', height: '100%',
    background: COLORS.bg, color: 'white', fontFamily: "'Inter', system-ui, sans-serif",
    display: 'flex', flexDirection: 'column',
    border: `1px solid ${COLORS.border}`, borderRadius: 28, overflow: 'hidden',
  }}>
    <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', overflow: 'hidden' }}>
      {children}
    </div>
    <div style={{ padding: '18px 22px 24px', borderTop: `1px solid ${COLORS.border}` }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
        <div style={{ width: 6, height: 6, borderRadius: 999, background: COLORS[accent] }} />
        <div style={{ color: COLORS.textMuted, fontSize: 10, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase' }}>{caption}</div>
      </div>
      {captionSub && <div style={{ color: COLORS.textSecondary, fontSize: 13, lineHeight: 1.4 }}>{captionSub}</div>}
    </div>
  </div>
);

// ─────────────────────────────────────────────────────────────
// 01 · Splash / cold start — canonical sequence
// ─────────────────────────────────────────────────────────────
const SplashLogo = () => (
  <LogoStage
    caption="Splash · cold start"
    captionSub="Crease lines slide in from opposite sides, lock with a metallic shimmer, then the wordmark fades up from below"
    accent="sky"
  >
    <LoopShell period={3.8}>
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14 }}>
        <CreaseLogo height={70} mode="play" shimmerDelay={1.1} />
        <CreaseWord size={44} delay={1.7} />
      </div>
    </LoopShell>
  </LogoStage>
);

// ─────────────────────────────────────────────────────────────
// 02 · Loading inline — lines static, shimmer loops continuously
// ─────────────────────────────────────────────────────────────
const LoadingLogo = () => (
  <LogoStage
    caption="Loading · inline"
    captionSub="Crease lines lock immediately; the metallic shimmer sweeps across them on a continuous loop"
    accent="sky"
  >
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 22 }}>
      <CreaseLogo height={56} mode="loop" loopDelay={0} />
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <span style={{ color: COLORS.textSecondary, fontSize: 13, fontWeight: 500 }}>Loading fixtures</span>
        <span style={{ display: 'inline-flex', gap: 3 }}>
          {[0, 1, 2].map(i => (
            <span key={i} style={{
              width: 4, height: 4, borderRadius: 999, background: COLORS.sky,
              animation: `cl-dots 1.2s ease-in-out ${i * 0.18}s infinite`,
            }} />
          ))}
        </span>
      </div>
    </div>
  </LogoStage>
);

// ─────────────────────────────────────────────────────────────
// 03 · Pull to refresh
// ─────────────────────────────────────────────────────────────
const RefreshLogo = () => (
  <LogoStage
    caption="Pull to refresh"
    captionSub="Crease lines descend from above as the user pulls; shimmer loops while content refetches"
    accent="sky"
  >
    <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', paddingTop: 28 }}>
      <div style={{ display: 'flex', justifyContent: 'center', height: 60 }}>
        <div style={{ animation: 'cl-pullDown 2.6s ease-in-out infinite' }}>
          <CreaseLogo height={42} mode="loop" loopDelay={0} />
        </div>
      </div>
      <div style={{ padding: '12px 22px 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {[0, 1, 2].map(i => (
          <div key={i} style={{
            background: COLORS.surface, border: `1px solid ${COLORS.border}`,
            borderRadius: 12, padding: 12, opacity: 0.7 - i * 0.15,
          }}>
            <div style={{ height: 10, borderRadius: 4, background: COLORS.border, marginBottom: 8, width: '60%' }} />
            <div style={{ height: 8, borderRadius: 4, background: COLORS.surfaceAlt, width: '40%' }} />
          </div>
        ))}
      </div>
    </div>
  </LogoStage>
);

// ─────────────────────────────────────────────────────────────
// 04 · Progress — wordmark + fill bar with lines as the anchor
// ─────────────────────────────────────────────────────────────
const ProgressLogo = () => (
  <LogoStage
    caption="Progress · syncing scorecard"
    captionSub="Used for long-running tasks. Crease lines stay locked; the bar tracks progress underneath"
    accent="purple"
  >
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 22, width: '78%' }}>
      <CreaseLogo height={48} mode="loop" loopDelay={0.4} />
      <div style={{ width: '100%' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
          <span style={{ color: 'white', fontSize: 13, fontWeight: 600 }}>Syncing scorecard</span>
          <span style={{ color: COLORS.textMuted, fontSize: 12 }}>~3s</span>
        </div>
        <div style={{ height: 6, background: COLORS.border, borderRadius: 999, overflow: 'hidden' }}>
          <div style={{
            height: '100%', background: 'linear-gradient(90deg, #38BDF8, #22C55E)',
            borderRadius: 999, transformOrigin: 'left center',
            animation: 'cl-progressFill 2.6s cubic-bezier(.6,.1,.4,1) infinite',
          }} />
        </div>
        <div style={{ color: COLORS.textMuted, fontSize: 11, marginTop: 8 }}>Uploading 24 photos · merging entries · notifying squad</div>
      </div>
    </div>
  </LogoStage>
);

// ─────────────────────────────────────────────────────────────
// 05 · Success — lines flash green, check inks on
// ─────────────────────────────────────────────────────────────
const SuccessLogo = () => (
  <LogoStage
    caption="Success · saved"
    captionSub="Crease lines flash green and lock; checkmark inks on between them; ring expands"
    accent="accent"
  >
    <LoopShell period={2.8}>
      <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14 }}>
        <CreaseLogo
          height={56} mode="play" shimmerDelay={0.9}
          tint="green"
          shimmerColor="rgba(220,255,220,0.85)"
        />
        <div style={{ position: 'relative', width: 56, height: 56, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <div style={{
            position: 'absolute', inset: 0, borderRadius: 999, border: `2px solid ${COLORS.accent}`,
            animation: 'cl-successRing 2.8s ease-out 1.0s infinite',
          }} />
          <svg width="32" height="32" viewBox="0 0 24 24" fill="none">
            <polyline points="20 6 9 17 4 12" stroke={COLORS.accent} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"
              strokeDasharray="60"
              style={{ animation: 'cl-checkDraw 2.8s ease-in-out 1.1s infinite' }} />
          </svg>
        </div>
        <div style={{ color: COLORS.accent, fontSize: 13, fontWeight: 700 }}>Availability saved</div>
      </div>
    </LoopShell>
  </LogoStage>
);

// ─────────────────────────────────────────────────────────────
// 06 · Error — lines turn red, shake; danger ring pulses
// ─────────────────────────────────────────────────────────────
const ErrorLogo = () => (
  <LogoStage
    caption="Error · couldn't sync"
    captionSub="Crease lines turn red and shake inside a danger ring; retry copy below"
    accent="danger"
  >
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 20 }}>
      <div style={{
        padding: '18px 24px', borderRadius: 20,
        background: 'rgba(239,68,68,0.08)',
        border: '1px solid rgba(239,68,68,0.35)',
        animation: 'cl-errorPulse 2.4s ease-out infinite',
      }}>
        <div style={{ animation: 'cl-shake 2.4s ease-in-out infinite' }}>
          <CreaseLogo height={42} mode="static" tint="red" />
        </div>
      </div>
      <div style={{ textAlign: 'center' }}>
        <div style={{ color: COLORS.danger, fontSize: 14, fontWeight: 700 }}>Couldn't reach the server</div>
        <div style={{ color: COLORS.textMuted, fontSize: 12, marginTop: 4 }}>Tap to retry · last sync 4m ago</div>
      </div>
    </div>
  </LogoStage>
);

// ─────────────────────────────────────────────────────────────
// 07 · Empty state — lines dimmed, soft breathe
// ─────────────────────────────────────────────────────────────
const EmptyLogo = () => (
  <LogoStage
    caption="Empty state"
    captionSub="Crease lines sit dimmed with a gentle breathe; helpful copy + primary action"
    accent="slate"
  >
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 18, padding: 28, textAlign: 'center' }}>
      <div style={{ animation: 'cl-emptyBreathe 3.6s ease-in-out infinite' }}>
        <CreaseLogo height={40} mode="static" tint="muted" />
      </div>
      <div>
        <div style={{ color: 'white', fontSize: 16, fontWeight: 700, marginBottom: 4 }}>No fixtures yet</div>
        <div style={{ color: COLORS.textMuted, fontSize: 12, lineHeight: 1.5, maxWidth: 220 }}>Add your first match of the season and the squad gets notified to set their availability.</div>
      </div>
      <button style={{
        background: COLORS.accent, color: COLORS.accentInk, border: 'none',
        borderRadius: 10, padding: '10px 16px', fontWeight: 700, fontSize: 13,
        fontFamily: "'Inter', system-ui, sans-serif", cursor: 'pointer',
      }}>+ Add fixture</button>
    </div>
  </LogoStage>
);

// ─────────────────────────────────────────────────────────────
// 08 · POTM celebration — full sequence (~3.2s loop):
//   1) crease lines slide in + lock with gold shimmer
//   2) thump — lines pulse big with a brightness flash
//   3) two concentric impact rings expand from the meeting point
//   4) streamers sweep diagonally across (one from each top corner)
//   5) brand-shape confetti rains down through the scene
//   6) "PLAYER OF THE MATCH" label rises with a gold underline drawing in
//   7) score "81 (62)" pops big from below, name rises beneath
// ─────────────────────────────────────────────────────────────

// One falling confetti piece — small parallelogram shape echoing the logo.
const Confetti = ({ left, delay, color, size = 7, rot = 360, dur = 2.6 }) => (
  <span style={{
    position: 'absolute', top: 0, left,
    width: size * 2, height: size * 0.6,
    background: color, borderRadius: 1,
    transform: 'skewX(-22deg)',
    '--cr': `${rot}deg`,
    animation: `cl-confetti ${dur}s linear ${delay}s infinite`,
    pointerEvents: 'none',
  }} />
);

// One diagonal streamer — long thin chalk-coloured ribbon sweeps across.
const Streamer = ({ top, color, delay, dir = 'L', thick = 4, dur = 2.6 }) => (
  <span style={{
    position: 'absolute', top, left: '50%',
    width: 260, height: thick,
    background: `linear-gradient(90deg, transparent 0%, ${color} 30%, ${color} 70%, transparent 100%)`,
    borderRadius: 4,
    transformOrigin: 'center',
    animation: `${dir === 'L' ? 'cl-streamer' : 'cl-streamerR'} ${dur}s cubic-bezier(.6,.1,.4,1) ${delay}s infinite`,
    pointerEvents: 'none',
  }} />
);

// Counter from 0 → target, easing out, locked to loop period.
const ScoreCount = ({ target = 81, durationMs = 900, delayMs = 1500, period = 3200 }) => {
  const [val, setVal] = React.useState(0);
  React.useEffect(() => {
    let raf = 0, t0 = 0;
    const tick = (t) => {
      if (!t0) t0 = t;
      const elapsed = t - t0;
      if (elapsed < delayMs) { raf = requestAnimationFrame(tick); return; }
      const p = Math.min(1, (elapsed - delayMs) / durationMs);
      const eased = 1 - Math.pow(1 - p, 3);
      setVal(Math.round(target * eased));
      if (elapsed < period) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [target, durationMs, delayMs, period]);
  return <>{val}</>;
};

const PotmLogo = () => {
  const PERIOD = 3.4; // seconds — also drives stagger numbers below
  // Confetti pieces — spread across the width, varied colors + delays
  const conf = [
    { l: '10%', d: 1.6, c: '#FCD34D' }, { l: '22%', d: 1.9, c: COLORS.accent },
    { l: '34%', d: 1.7, c: COLORS.sky }, { l: '46%', d: 2.0, c: '#FCD34D' },
    { l: '58%', d: 1.65, c: '#F472B6' }, { l: '70%', d: 1.85, c: COLORS.accent },
    { l: '82%', d: 1.95, c: COLORS.sky }, { l: '90%', d: 1.75, c: '#FCD34D' },
  ];
  return (
    <LogoStage
      caption="POTM · celebration"
      captionSub="Lines lock with a gold thump, impact rings ripple out, streamers cross-sweep, confetti rains in brand shapes, score ticks up to the final"
      accent="amber"
    >
      <LoopShell period={PERIOD}>
        <div style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
          {/* Streamers — entered from each top corner */}
          <Streamer top="32%" color="rgba(252,211,77,0.7)"  delay={1.05} dir="L" thick={3} dur={PERIOD - 0.6} />
          <Streamer top="42%" color="rgba(34,197,94,0.55)"  delay={1.15} dir="R" thick={3} dur={PERIOD - 0.6} />
          <Streamer top="52%" color="rgba(56,189,248,0.55)" delay={1.25} dir="L" thick={2} dur={PERIOD - 0.6} />

          {/* Falling confetti */}
          {conf.map((p, i) => (
            <Confetti key={i} left={p.l} color={p.c} delay={p.d} size={6 + (i % 3)} rot={(i % 2 ? 1 : -1) * (240 + i * 30)} dur={PERIOD - 0.4} />
          ))}

          {/* Center stack */}
          <div style={{
            position: 'absolute', inset: 0,
            display: 'flex', flexDirection: 'column', alignItems: 'center',
            justifyContent: 'center', gap: 18,
          }}>
            {/* Logo lock + thump + impact rings */}
            <div style={{ position: 'relative', width: 200, height: 80, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              {/* Concentric impact rings emanating from where the lines meet */}
              {[0, 1].map(i => (
                <div key={i} style={{
                  position: 'absolute', width: 80, height: 80, borderRadius: 999,
                  border: `3px solid ${i === 0 ? '#FCD34D' : COLORS.amber}`,
                  animation: `cl-impactRing 1.4s cubic-bezier(.2,.7,.3,1) ${1.15 + i * 0.18}s infinite`,
                  pointerEvents: 'none',
                }} />
              ))}
              <div style={{
                animation: `cl-thump .9s cubic-bezier(.2,1.3,.3,1) 1.1s infinite`,
                transformOrigin: 'center',
              }}>
                <CreaseLogo
                  height={56} mode="play" shimmerDelay={0.7}
                  tint="gold"
                  shimmerColor="rgba(255,235,160,0.95)"
                />
              </div>
            </div>

            {/* POTM label + gold underline */}
            <div style={{
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
              animation: 'cl-labelRise 0.5s cubic-bezier(.2,.7,.3,1) 1.4s both',
            }}>
              <div style={{
                fontSize: 11, fontWeight: 800, letterSpacing: '0.18em',
                textTransform: 'uppercase',
                background: 'linear-gradient(90deg, #FCD34D, #F59E0B, #FCD34D)',
                WebkitBackgroundClip: 'text', backgroundClip: 'text',
                color: 'transparent',
              }}>Player of the match</div>
              <div style={{
                height: 2, width: 84, background: 'linear-gradient(90deg, transparent, #FCD34D, transparent)',
                transformOrigin: 'center', borderRadius: 2,
                animation: 'cl-underline .55s cubic-bezier(.2,.7,.3,1) 1.55s both',
              }} />
            </div>

            {/* Big ticking score */}
            <div style={{
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
            }}>
              <div style={{
                display: 'flex', alignItems: 'baseline', gap: 6,
                animation: 'cl-numberPop .8s cubic-bezier(.2,1.5,.3,1) 1.5s both',
              }}>
                <span style={{
                  color: 'white', fontSize: 44, fontWeight: 900, letterSpacing: -1.5,
                  lineHeight: 1, fontVariantNumeric: 'tabular-nums',
                  textShadow: '0 0 18px rgba(252,211,77,0.35)',
                }}>
                  <ScoreCount target={81} delayMs={1500} durationMs={900} period={PERIOD * 1000} />
                </span>
                <span style={{ color: COLORS.textSecondary, fontSize: 16, fontWeight: 700 }}>(62)</span>
              </div>
              <div style={{
                color: COLORS.textMuted, fontSize: 12,
                animation: 'cl-labelRise 0.5s cubic-bezier(.2,.7,.3,1) 1.95s both',
              }}>Asha Patel · vs St Mary's</div>
            </div>
          </div>
        </div>
      </LoopShell>
    </LogoStage>
  );
};

Object.assign(window, {
  SplashLogo, LoadingLogo, RefreshLogo, SuccessLogo, ErrorLogo, EmptyLogo, PotmLogo, ProgressLogo,
  LM_W, LM_H, CreaseLogo, CreaseWord,
});