.fp-greentech-event-countdown-ticket-ui {
  /* Layout Variables */
  --fp-container-width: 100%;
  --fp-max-width: 500px;
  --fp-aspect-ratio: 1 / 1;

  /* Semantic Color Variables - Matcha Organic */
  --fp-primary-color: #F9F8F3;       
  --fp-secondary-color: #EAECE6;     
  --fp-text-color: #1A3626;          
  --fp-muted-color: #728A7A;         
  --fp-soft-color: rgba(140, 179, 111, 0.15); 
  --fp-background-color: transparent;

  --fp-accent-color: #8CB36F;        
  --fp-info-color: #A3B899;          
  --fp-warning-color: #D4B483;       
  --fp-danger-color: #C87979;        

  width: var(--fp-container-width);
  max-width: var(--fp-max-width);
  margin: 0 auto;
  background: var(--fp-background-color);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  position: relative;
}

/* Main Stage */
.fp-greentech-event-countdown-ticket-ui-stage {
  aspect-ratio: var(--fp-aspect-ratio);
  width: 100%;
  background-color: var(--fp-primary-color);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 24px;
  box-shadow: inset 0 0 40px rgba(26, 54, 38, 0.03);
  border: 1px solid var(--fp-secondary-color);
}

/* Layer 1: Base Breathing Organic Blob */
.fp-greentech-event-countdown-ticket-ui-blob {
  position: absolute;
  width: 80%;
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle at center, var(--fp-soft-color) 0%, transparent 70%);
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  animation: fp-greentech-event-countdown-ticket-ui-breathe 8s ease-in-out infinite alternate;
  z-index: 1;
  pointer-events: none;
}

/* Ticket Container */
.fp-greentech-event-countdown-ticket-ui-card {
  position: relative;
  z-index: 3;
  width: 70%;
  background: #FFFFFF;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 15px 35px rgba(26, 54, 38, 0.08);
  border: 1px solid var(--fp-secondary-color);
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Layer 3: Reactive Spike State */
.fp-greentech-event-countdown-ticket-ui-card.is-spiking {
  transform: scale(1.02);
  box-shadow: 0 20px 45px rgba(140, 179, 111, 0.2);
  border-color: var(--fp-accent-color);
}

/* Ticket Top Section */
.fp-greentech-event-countdown-ticket-ui-top {
  padding: 32px 24px;
  position: relative;
  border-bottom: 2px dashed var(--fp-secondary-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Ticket Cutouts */
.fp-greentech-event-countdown-ticket-ui-top::before,
.fp-greentech-event-countdown-ticket-ui-top::after {
  content: '';
  position: absolute;
  bottom: -12px;
  width: 24px;
  height: 24px;
  background-color: var(--fp-primary-color);
  border-radius: 50%;
  border: 1px solid var(--fp-secondary-color);
  z-index: 4;
}
.fp-greentech-event-countdown-ticket-ui-top::before { left: -13px; }
.fp-greentech-event-countdown-ticket-ui-top::after { right: -13px; }

/* Header Badge */
.fp-greentech-event-countdown-ticket-ui-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #FFFFFF;
  background-color: var(--fp-text-color);
  padding: 6px 12px;
  border-radius: 20px;
  text-transform: uppercase;
  margin-bottom: 24px;
  display: inline-block;
}

/* Metronome / Ticker Area */
.fp-greentech-event-countdown-ticket-ui-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--fp-muted-color);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.fp-greentech-event-countdown-ticket-ui-ticker {
  font-family: 'Courier New', Courier, monospace;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-bottom: 16px;
}

.fp-greentech-event-countdown-ticket-ui-ticker-main {
  font-size: 3rem;
  font-weight: 900;
  color: var(--fp-text-color);
  line-height: 1;
  letter-spacing: -2px;
}

.fp-greentech-event-countdown-ticket-ui-ticker-decimal {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--fp-accent-color);
}

/* Layer 2: Metronome Swing Animation */
.fp-greentech-event-countdown-ticket-ui-metronome {
  width: 100%;
  height: 4px;
  background-color: var(--fp-secondary-color);
  border-radius: 2px;
  position: relative;
  overflow: visible;
  margin-bottom: 8px;
}

.fp-greentech-event-countdown-ticket-ui-metronome-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  background-color: var(--fp-accent-color);
  border-radius: 50%;
  margin-top: -6px;
  margin-left: -6px;
  box-shadow: 0 0 10px var(--fp-accent-color);
}

.fp-greentech-event-countdown-ticket-ui-unit {
  font-size: 10px;
  font-weight: 600;
  color: var(--fp-muted-color);
  text-transform: uppercase;
}

/* Ticket Bottom Section */
.fp-greentech-event-countdown-ticket-ui-bottom {
  padding: 20px 24px;
  background: rgba(140, 179, 111, 0.05); 
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

/* Pure CSS Barcode */
.fp-greentech-event-countdown-ticket-ui-barcode {
  width: 80%;
  height: 24px;
  background-image: repeating-linear-gradient(
    to right,
    var(--fp-text-color),
    var(--fp-text-color) 2px,
    transparent 2px,
    transparent 5px,
    var(--fp-text-color) 5px,
    var(--fp-text-color) 6px,
    transparent 6px,
    transparent 10px,
    var(--fp-text-color) 10px,
    var(--fp-text-color) 14px,
    transparent 14px,
    transparent 16px
  );
  opacity: 0.6;
  margin-bottom: 8px;
}

.fp-greentech-event-countdown-ticket-ui-id {
  font-family: 'Courier New', Courier, monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--fp-text-color);
  letter-spacing: 2px;
}

/* Keyframes */
@keyframes fp-greentech-event-countdown-ticket-ui-breathe {
  0% { transform: scale(0.8) rotate(0deg); opacity: 0.6; }
  100% { transform: scale(1.2) rotate(45deg); opacity: 1; }
}

/* Responsive */
@media (max-width: 480px) {
  .fp-greentech-event-countdown-ticket-ui-card { width: 85%; }
  .fp-greentech-event-countdown-ticket-ui-ticker-main { font-size: 2.5rem; }
  .fp-greentech-event-countdown-ticket-ui-top { padding: 24px 16px; }
  .fp-greentech-event-countdown-ticket-ui-bottom { padding: 16px; }
}

document.querySelectorAll('.fp-greentech-event-countdown-ticket-ui').forEach(root => {
  const mainValEl = root.querySelector('#fp-greentech-event-countdown-ticket-ui-val-main');
  const msValEl = root.querySelector('#fp-greentech-event-countdown-ticket-ui-val-ms');
  const cardEl = root.querySelector('#fp-greentech-event-countdown-ticket-ui-card');
  const dotEl = root.querySelector('#fp-greentech-event-countdown-ticket-ui-dot');

  let reqId;
  let isVisible = true;
  let lastTime = 0;
  
  let baseValue = 8402150.00;
  
  let swingPhase = 0;
  const metronomeSpeed = 0.003; 
  let previousSwingDirection = 1;

  const formatNumber = (num) => {
    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  };

  function animate(time) {
    if (!lastTime) lastTime = time;
    const dt = time - lastTime;
    lastTime = time;

    baseValue += (dt * 0.045); 
    
    const wholeNumber = Math.floor(baseValue);
    const decimalPart = Math.floor((baseValue % 1) * 100).toString().padStart(2, '0');

    if (mainValEl) mainValEl.textContent = formatNumber(wholeNumber);
    if (msValEl) msValEl.textContent = decimalPart;

    swingPhase += (dt * metronomeSpeed);
    const swingAmplitude = 40; 
    const currentSwing = Math.sin(swingPhase) * swingAmplitude;
    
    if (dotEl) {
      dotEl.style.transform = `translateX(${currentSwing}px)`;
    }

    const currentDirection = Math.sign(Math.cos(swingPhase));
    
    if (currentDirection !== previousSwingDirection) {
       previousSwingDirection = currentDirection;
       
       if (cardEl) {
         cardEl.classList.add('is-spiking');
         setTimeout(() => {
           if (isVisible && cardEl) cardEl.classList.remove('is-spiking');
         }, 100);
       }
    }

    if (isVisible) {
      reqId = requestAnimationFrame(animate);
    }
  }

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      isVisible = entry.isIntersecting;
      if (isVisible) {
        lastTime = performance.now();
        if (!reqId) reqId = requestAnimationFrame(animate);
      } else {
        if (reqId) {
          cancelAnimationFrame(reqId);
          reqId = null;
        }
      }
    });
  });
  observer.observe(root);

  const handleVisibilityChange = () => {
    if (document.visibilityState === "hidden") {
      isVisible = false;
      if (reqId) {
        cancelAnimationFrame(reqId);
        reqId = null;
      }
    } else {
      isVisible = true;
      lastTime = performance.now();
      if (!reqId) reqId = requestAnimationFrame(animate);
    }
  };
  document.addEventListener("visibilitychange", handleVisibilityChange);

  const cleanupInterval = setInterval(() => {
    if (!document.body.contains(root)) {
      if (reqId) cancelAnimationFrame(reqId);
      observer.disconnect();
      document.removeEventListener("visibilitychange", handleVisibilityChange);
      clearInterval(cleanupInterval);
    }
  }, 1000);
});