/* =====================================================================
   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; }

/* ---- Volume discount tier (gamification — Track A) ----
   Restrained, on-brand: an amber glow pulse on the discount figure when a tier
   unlocks. Fires on a tier *crossing* only (form.js watches currentTierIndex). */
.tier-discount {
  font-weight: 700;
  display: inline-block;
  border-radius: 4px;
  padding: 0 2px;
}

.tier-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #111A14;
  background: #D4860A;
  border-radius: 999px;
  vertical-align: middle;
}

@keyframes tierGlow {
  0%   { text-shadow: 0 0 0 rgba(212,134,10,0); transform: scale(1); }
  30%  { text-shadow: 0 0 14px rgba(212,134,10,0.9); transform: scale(1.22); color: #F5C76A; }
  100% { text-shadow: 0 0 0 rgba(212,134,10,0); transform: scale(1); }
}

.tier-pulse { animation: tierGlow 1.6s ease-out; }

.tier-nudge {
  margin-top: 10px;
  font-size: 12.5px;
}

.tier-nudge__row {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--color-cream-muted, #B8A882);
  background: rgba(200, 169, 110, 0.07);
  border: 1px dashed var(--color-border, #2E4836);
  border-radius: 7px;
  padding: 7px 11px;
}

.tier-nudge__row--top {
  color: var(--color-cream, #F0E8D0);
  background: rgba(212, 134, 10, 0.12);
  border: 1px solid #6B4A0A;
  border-style: solid;
}

.tier-nudge__icon { flex: none; }

/* Respect reduced-motion: no glow animation, badge/nudge stay (they're static). */
@media (prefers-reduced-motion: reduce) {
  .tier-pulse { animation: none; }
}

/* ---- Suburb / zone lookup (clear outcome, not a clickable-looking list) ---- */
.zone-checking {
  display: flex;
  align-items: center;
  gap: 10px;
}

.zone-checking__bar {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: rgba(200, 169, 110, 0.15);
  overflow: hidden;
  max-width: 160px;
}

.zone-checking__bar span {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: 3px;
  background: var(--color-amber, #D4860A);
  animation: zoneScan 0.65s ease-in-out infinite;
}

@keyframes zoneScan {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(310%); }
}

.zone-resolved {
  background: rgba(73, 122, 90, 0.12);
  border: 1px solid var(--color-success, #4a8a5c);
  border-radius: 8px;
  padding: 10px 14px;
}

.zone-resolved__main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 14px;
}

.zone-resolved__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-success, #4a8a5c);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  flex: none;
}

.zone-resolved__fee {
  color: var(--color-amber, #D4860A);
  font-weight: 600;
}

.zone-resolved__change {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--color-cream-muted, #B8A882);
  cursor: pointer;
  font-size: 11px;
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .zone-checking__bar span { animation: none; width: 100%; }
}

/* ---- FAQ accordion ---- */
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  background: var(--color-bg-input, #192419);
  border: 1px solid var(--color-border, #2E4836);
  border-radius: 8px;
  padding: 14px 16px;
  color: var(--color-cream, #F0E8D0);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.faq-q:hover { border-color: var(--color-amber, #D4860A); }

.faq-q--open {
  border-color: var(--color-amber, #D4860A);
  background: rgba(212, 134, 10, 0.08);
}

.faq-q__chev {
  flex: none;
  color: var(--color-amber, #D4860A);
  font-size: 20px;
  line-height: 1;
}

.faq-answer {
  padding: 4px 16px 8px;
  color: var(--color-cream-muted, #B8A882);
  font-size: 14px;
  line-height: 1.6;
}

.faq-answer ul { margin: 6px 0; padding-left: 20px; }
.faq-answer li { margin-bottom: 6px; }
.faq-answer strong { color: var(--color-cream, #F0E8D0); }