/* Habibtea marketing site — motion layer */

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 800ms cubic-bezier(.22,.61,.36,1), transform 800ms cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 90ms; }
.reveal-delay-2 { transition-delay: 180ms; }
.reveal-delay-3 { transition-delay: 270ms; }
.reveal-delay-4 { transition-delay: 360ms; }

/* Slow, gentle drift on the hero arch silhouette */
@keyframes archDrift {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-6px) rotate(0.3deg); }
}
.arch-drift { animation: archDrift 7s ease-in-out infinite; transform-origin: center bottom; }

/* Steam wisps rising behind the hero photo */
@keyframes steamRise {
  0%   { transform: translate(0, 0) scale(0.6); opacity: 0; }
  20%  { opacity: 0.55; }
  100% { transform: translate(var(--drift, 8px), -180px) scale(1.6); opacity: 0; }
}
.steam {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,230,220,0.55) 0%, rgba(245,230,220,0) 70%);
  filter: blur(10px);
  animation: steamRise 5s ease-out infinite;
  pointer-events: none;
}

/* Soft shimmer on italic gold accents */
@keyframes goldShimmer {
  0%, 100% { color: #A07530; }
  50%      { color: #C8924A; }
}
.shimmer { animation: goldShimmer 4.5s ease-in-out infinite; }

/* Floating ingredient garnish dots in the cart section */
@keyframes float1 {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(8px, -12px); }
}
@keyframes float2 {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-10px, 8px); }
}
.float-1 { animation: float1 6s ease-in-out infinite; }
.float-2 { animation: float2 7s ease-in-out infinite; }

/* Card hover lift */
.card-lift {
  transition: transform 320ms cubic-bezier(.22,.61,.36,1), box-shadow 320ms cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.card-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(122,31,43,.14), 0 4px 8px rgba(122,31,43,.08);
}

/* Card stripe sheen on hover */
.card-stripe {
  background-size: 200% 100%;
  background-position: 0% 0%;
  transition: background-position 800ms cubic-bezier(.22,.61,.36,1);
}
.card-lift:hover .card-stripe { background-position: 100% 0%; }

/* Nav link underline animation */
.nav-link {
  position: relative;
  padding-bottom: 4px;
  border-bottom: none !important;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: #E85D2F;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms cubic-bezier(.22,.61,.36,1);
}
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.is-active::after { transform: scaleX(1); }

/* Pour pulse — a slow accent dot pulse on the "book the cart" pill */
@keyframes pourPulse {
  0%   { box-shadow: 0 0 0 0 rgba(232,93,47,0.45); }
  70%  { box-shadow: 0 0 0 14px rgba(232,93,47,0); }
  100% { box-shadow: 0 0 0 0 rgba(232,93,47,0); }
}
.pour-pulse { animation: pourPulse 2.6s cubic-bezier(.22,.61,.36,1) infinite; }

/* Tap arrow nudge */
@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}
.nudge { animation: nudge 1.8s ease-in-out infinite; display: inline-block; }

/* Slow rotation on the gazelle apex pearl */
@keyframes gentleSpin {
  0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }
}
.spin-slow { animation: gentleSpin 30s linear infinite; transform-origin: center; }

/* Button press */
.btn-press { transition: transform 140ms cubic-bezier(.22,.61,.36,1), background 220ms cubic-bezier(.22,.61,.36,1); }
.btn-press:active { transform: scale(0.97); }

/* Gradient border-bottom for nav, fading in on scroll */
.nav-shadow { transition: box-shadow 320ms ease, background-color 320ms ease; }
.nav-shadow.is-scrolled { box-shadow: 0 8px 24px rgba(122,31,43,0.06); background-color: rgba(245,230,220,0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* Form field focus glow */
.field-input:focus {
  outline: none;
  border-color: #7A1F2B !important;
  box-shadow: 0 0 0 3px rgba(122,31,43,0.15);
  transition: box-shadow 220ms ease, border-color 220ms ease;
}

/* Footer brand mark — cream rosette behind the logo */
.footer-mark {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #F5E6DC;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18), inset 0 0 0 1px rgba(212,162,76,0.4);
  flex-shrink: 0;
}
.footer-mark img { height: 56px; width: auto; display: block; }

/* Submit success bloom */
@keyframes bloom {
  0%   { transform: scale(0.92); opacity: 0; }
  100% { transform: scale(1);    opacity: 1; }
}
.bloom { animation: bloom 600ms cubic-bezier(.22,.61,.36,1) both; }