/* =====================================================================
   Apothecary Coffee Co — Animations & Micro-interactions
   ===================================================================== */

/* ---- Flavor bubble (fires on product selection) ---- */
.flavor-bubble {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  pointer-events: none;
  z-index: 9999;
  /* (iii) 3× longer duration */
  animation: floatUp 6s ease-out forwards;
}

@keyframes floatUp {
  0%   { opacity: 0; transform: translateY(0) scale(0.6); }
  12%  { opacity: 1; transform: translateY(-20px) scale(1.05); }
  70%  { opacity: 0.75; transform: translateY(-160px) scale(0.97); }
  100% { opacity: 0; transform: translateY(-240px) scale(0.85); }
}

/* ---- Steam animation ---- */
@keyframes steam {
  0%   { stroke-dashoffset: 100; opacity: 0; }
  30%  { opacity: 0.6; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

.steam-path-1 { animation: steam 2.0s ease-in-out infinite; }
.steam-path-2 { animation: steam 2.0s ease-in-out infinite 0.6s; }
.steam-path-3 { animation: steam 2.0s ease-in-out infinite 1.2s; }

/* ---- Rotating coffee bean (hero) ---- */
@keyframes beanSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.hero-bean { animation: beanSpin 20s linear infinite; }

/* ---- Running total price flash ---- */
@keyframes priceFlash {
  0%   { color: var(--color-cream, #F0E8D0); }
  50%  { color: var(--color-amber-light, #F0A832); }
  100% { color: var(--color-amber, #D4860A); }
}

.price-changed { animation: priceFlash 0.4s ease-out; }

/* ---- Section entry (IntersectionObserver adds .visible) ---- */
/* Base state is set in main.css; this file only provides the transition. */
/* .form-section { opacity: 0; transform: translateY(16px); } is in main.css */
/* .form-section.visible { opacity: 1; transform: translateY(0); } is in main.css */

/* ---- Spinner for submit state ---- */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(240, 232, 208, 0.3);
  border-top-color: var(--color-cream, #F0E8D0);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ---- Pulse for loading states ---- */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

.loading-pulse { animation: pulse 1.5s ease-in-out infinite; }

/* ---- Coffee leaf background sway (xiv) ---- */
@keyframes leafSway {
  0%   { transform: rotate(-6deg) scale(1); }
  25%  { transform: rotate(-1deg) scale(1.02); }
  55%  { transform: rotate(-10deg) scale(0.98); }
  80%  { transform: rotate(-3deg) scale(1.01); }
  100% { transform: rotate(-6deg) scale(1); }
}

/* ---- Slide-in for tooltip card ---- */
.product-tooltip-card[x-cloak] { display: none; }

[x-cloak] { display: none !important; }