/* ============================================================
   MIDORI (緑) — animations.css
   Keyframes · Scroll animations · Entrance classes
   ============================================================ */

/* ===== Shared initial hidden state ===== */
.animate-fade-up,
.animate-fade-right,
.animate-fade-left {
  opacity: 0;
  transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}

.animate-fade-up    { transform: translateY(36px); }
.animate-fade-right { transform: translateX(-40px); }
.animate-fade-left  { transform: translateX(40px); }

/* Add delays via data-delay attribute (handled in animations.js) */
.animate-fade-up[data-delay="100"],
.animate-fade-right[data-delay="100"],
.animate-fade-left[data-delay="100"]  { transition-delay: 0.10s; }

.animate-fade-up[data-delay="200"],
.animate-fade-right[data-delay="200"],
.animate-fade-left[data-delay="200"]  { transition-delay: 0.20s; }

.animate-fade-up[data-delay="300"],
.animate-fade-right[data-delay="300"],
.animate-fade-left[data-delay="300"]  { transition-delay: 0.30s; }

/* Visible state (added by IntersectionObserver) */
.animate-fade-up.is-visible,
.animate-fade-right.is-visible,
.animate-fade-left.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* ===== Comparison bar animation ===== */
.compare-bar__fill,
.flavor-bar__fill {
  width: 0 !important; /* start at 0, animated by JS */
}
.compare-bar__fill.is-visible,
.flavor-bar__fill.is-visible {
  width: var(--w) !important;
}

/* ===== Keyframes ===== */

/* Hero scroll line */
@keyframes scrollDown {
  0%   { top: -100%; }
  100% { top:  100%; }
}

/* Subtle float for stat boxes */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

/* Pulse glow on featured card */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 24px 64px rgba(26,58,42,0.14); }
  50%       { box-shadow: 0 32px 80px rgba(74,124,89,0.28); }
}

.product-card--featured { animation: pulseGlow 4s ease-in-out infinite; }

/* Newsletter JP character subtle animation */
@keyframes jpFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%       { transform: translateY(-10px) rotate(0deg); }
}
.newsletter__jp { animation: jpFloat 8s ease-in-out infinite; }

/* Loading spinner (for form submit) */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.btn-loading::after {
  content: '';
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin-left: var(--sp-2);
}

/* ===== Nav logo entrance on page load ===== */
@keyframes logoIn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nav__logo { animation: logoIn 0.8s var(--ease-slow) 0.2s both; }