.fp-creative-studio-event-countdown-ticket-ui {
  --fp-container-width: 100%;
  --fp-max-width: 500px;
  --fp-aspect-ratio: 1 / 1;

  --fp-primary-color: #f4f4f5;
  --fp-secondary-color: #e4e4e7;
  --fp-muted-color: #a1a1aa;
  --fp-soft-color: #ffffff;
  --fp-background-color: transparent;

  --fp-info-color: #18181b;
  --fp-warning-color: #52525b;
  --fp-danger-color: #09090b;
  --fp-accent-color: #3f3f46;

  all: unset;
  display: block;
  width: var(--fp-container-width);
  max-width: var(--fp-max-width);
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  box-sizing: border-box;
  color: var(--fp-info-color);
}

.fp-creative-studio-event-countdown-ticket-ui * {
  box-sizing: border-box;
}

.fp-creative-studio-event-countdown-ticket-ui-stage {
  position: relative;
  width: 100%;
  aspect-ratio: var(--fp-aspect-ratio);
  background: var(--fp-primary-color);
  border: 1px solid var(--fp-secondary-color);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fp-creative-studio-event-countdown-ticket-ui-noise {
  position: absolute;
  inset: -50%;
  background-image: radial-gradient(circle at 50% 50%, var(--fp-secondary-color) 2px, transparent 2.5px);
  background-size: 32px 32px;
  opacity: 0.4;
  animation: fp-creative-studio-event-countdown-ticket-ui-breathe 10s ease-in-out infinite alternate;
  pointer-events: none;
}

.fp-creative-studio-event-countdown-ticket-ui-orbit {
  position: absolute;
  width: 120%;
  height: 120%;
  border: 1px dashed var(--fp-muted-color);
  border-radius: 50%;
  opacity: 0.15;
  animation: fp-creative-studio-event-countdown-ticket-ui-spin 40s linear infinite;
  pointer-events: none;
}

.fp-creative-studio-event-countdown-ticket-ui-ticket {
  position: relative;
  z-index: 10;
  width: 75%;
  height: 80%;
  background: var(--fp-soft-color);
  border: 1px solid var(--fp-secondary-color);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.02);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.fp-creative-studio-event-countdown-ticket-ui-header {
  padding: 24px 24px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px dashed var(--fp-secondary-color);
}

.fp-creative-studio-event-countdown-ticket-ui-badge {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fp-soft-color);
  background: var(--fp-info-color);
  padding: 4px 10px;
  border-radius: 20px;
}

.fp-creative-studio-event-countdown-ticket-ui-title {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--fp-accent-color);
  text-transform: uppercase;
}

.fp-creative-studio-event-countdown-ticket-ui-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
}

.fp-creative-studio-event-countdown-ticket-ui-label {
  font-size: 0.8rem;
  color: var(--fp-muted-color);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: 12px;
}

.fp-creative-studio-event-countdown-ticket-ui-countdown {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 3rem;
  font-weight: 300;
  color: var(--fp-danger-color);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  line-height: 1;
  letter-spacing: -0.05em;
}

.fp-creative-studio-event-countdown-ticket-ui-time {
  display: inline-block;
  width: 2ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.fp-creative-studio-event-countdown-ticket-ui-colon {
  color: var(--fp-secondary-color);
  animation: fp-creative-studio-event-countdown-ticket-ui-blink 1s step-end infinite;
}

.fp-creative-studio-event-countdown-ticket-ui-cursor {
  display: inline-block;
  width: 0.5ch;
  height: 0.8em;
  background-color: var(--fp-info-color);
  margin-left: 8px;
  animation: fp-creative-studio-event-countdown-ticket-ui-blink 1s step-end infinite;
}

.fp-creative-studio-event-countdown-ticket-ui-canvas-wrap {
  width: 100%;
  height: 40px;
  margin-top: 24px;
  position: relative;
}

.fp-creative-studio-event-countdown-ticket-ui-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.fp-creative-studio-event-countdown-ticket-ui-footer {
  padding: 16px 24px;
  background: var(--fp-primary-color);
  border-top: 1px dashed var(--fp-secondary-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fp-creative-studio-event-countdown-ticket-ui-barcode {
  font-family: ui-monospace, monospace;
  font-size: 1.2rem;
  color: var(--fp-info-color);
  letter-spacing: 1px;
  opacity: 0.8;
  user-select: none;
}

.fp-creative-studio-event-countdown-ticket-ui-id {
  font-size: 0.7rem;
  color: var(--fp-muted-color);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@keyframes fp-creative-studio-event-countdown-ticket-ui-breathe {
  0% { transform: scale(1) translateY(0); opacity: 0.3; }
  100% { transform: scale(1.05) translateY(-5%); opacity: 0.6; }
}

@keyframes fp-creative-studio-event-countdown-ticket-ui-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes fp-creative-studio-event-countdown-ticket-ui-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@media (max-width: 400px) {
  .fp-creative-studio-event-countdown-ticket-ui-ticket {
    width: 85%;
    height: 85%;
  }
  .fp-creative-studio-event-countdown-ticket-ui-countdown {
    font-size: 2.2rem;
  }
  .fp-creative-studio-event-countdown-ticket-ui-header {
    padding: 16px 16px 12px;
  }
  .fp-creative-studio-event-countdown-ticket-ui-body {
    padding: 16px;
  }
  .fp-creative-studio-event-countdown-ticket-ui-footer {
    padding: 12px 16px;
  }
}

document.querySelectorAll('.fp-creative-studio-event-countdown-ticket-ui').forEach(root => {
  const hrsEl = root.querySelector('.fp_creative_studio_event_countdown_ticket_ui_hrs');
  const minsEl = root.querySelector('.fp_creative_studio_event_countdown_ticket_ui_mins');
  const secsEl = root.querySelector('.fp_creative_studio_event_countdown_ticket_ui_secs');
  const canvas = root.querySelector('.fp-creative-studio-event-countdown-ticket-ui-canvas');
  
  if (!hrsEl || !minsEl || !secsEl || !canvas) return;

  const ctx = canvas.getContext('2d');
  let animationFrameId;
  let isVisible = true;
  let time = 0;
  
  let totalSeconds = 8 * 3600 + 45 * 60 + 32;
  let lastTick = performance.now();

  const resizeCanvas = () => {
    const rect = canvas.parentElement.getBoundingClientRect();
    canvas.width = rect.width * window.devicePixelRatio;
    canvas.height = rect.height * window.devicePixelRatio;
    ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
    canvas.style.width = `${rect.width}px`;
    canvas.style.height = `${rect.height}px`;
  };

  const pad = (num) => num.toString().padStart(2, '0');

  const typewriteText = (el, newText) => {
    if (el.innerText === newText) return;
    el.innerText = "_";
    setTimeout(() => {
      el.innerText = newText.charAt(0) + "_";
      setTimeout(() => {
        el.innerText = newText;
      }, 40);
    }, 40);
  };

  const updateCountdown = (currentTime) => {
    if (currentTime - lastTick >= 1000) {
      totalSeconds--;
      if (totalSeconds < 0) totalSeconds = 0;

      const h = Math.floor(totalSeconds / 3600);
      const m = Math.floor((totalSeconds % 3600) / 60);
      const s = totalSeconds % 60;

      typewriteText(hrsEl, pad(h));
      typewriteText(minsEl, pad(m));
      typewriteText(secsEl, pad(s));

      lastTick = currentTime;
    }
  };

  const drawMetronome = () => {
    if (!isVisible) return;
    
    const rect = canvas.parentElement.getBoundingClientRect();
    ctx.clearRect(0, 0, rect.width, rect.height);

    const width = rect.width;
    const height = rect.height;
    const centerY = height / 2;

    time += 0.05;

    ctx.beginPath();
    ctx.moveTo(0, centerY);
    ctx.lineTo(width, centerY);
    ctx.strokeStyle = '#e4e4e7';
    ctx.lineWidth = 1;
    ctx.stroke();

    const pendulumX = (width / 2) + Math.sin(time) * (width / 2.5);
    
    ctx.beginPath();
    ctx.moveTo(pendulumX, centerY - 8);
    ctx.lineTo(pendulumX, centerY + 8);
    ctx.strokeStyle = '#18181b';
    ctx.lineWidth = 2;
    ctx.stroke();

    for (let i = 1; i <= 3; i++) {
        const trailX = (width / 2) + Math.sin(time - (i * 0.1)) * (width / 2.5);
        ctx.beginPath();
        ctx.moveTo(trailX, centerY - 6);
        ctx.lineTo(trailX, centerY + 6);
        ctx.strokeStyle = `rgba(24, 24, 27, ${0.4 - (i * 0.1)})`;
        ctx.lineWidth = 1;
        ctx.stroke();
    }

    animationFrameId = requestAnimationFrame((now) => {
      updateCountdown(now);
      drawMetronome();
    });
  };

  const handleVisibilityChange = () => {
    isVisible = document.visibilityState === 'visible';
    if (isVisible) {
      lastTick = performance.now();
      drawMetronome();
    } else {
      cancelAnimationFrame(animationFrameId);
    }
  };

  const observer = new MutationObserver(() => {
    if (!document.body.contains(root)) {
      cancelAnimationFrame(animationFrameId);
      window.removeEventListener('resize', resizeCanvas);
      document.removeEventListener('visibilitychange', handleVisibilityChange);
      observer.disconnect();
    }
  });

  window.addEventListener('resize', resizeCanvas);
  document.addEventListener('visibilitychange', handleVisibilityChange);
  observer.observe(document.body, { childList: true, subtree: true });

  resizeCanvas();
  drawMetronome();
});