/* ============================================================
   GREEN LIFE FLOWERS — ANIMATIONS & TRANSITIONS
   ============================================================ */

/* ── Page Transition ────────────────────────────────────── */
@keyframes pageEnter {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body {
  animation: pageEnter 0.5s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
}

body.page-leaving {
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

/* ── @keyframes ──────────────────────────────────────────── */

/* ── Falling Leaves Keyframes ──────────────────────────── */
@keyframes leafFall {
  0%   { top: -80px; }
  100% { top: 110vh; }
}

@keyframes leafSway {
  0%   { transform: translateX(0); }
  100% { transform: translateX(var(--sway, 80px)); }
}

@keyframes leafSpin {
  0%   { rotate: var(--rotate-start, 0deg); }
  100% { rotate: var(--rotate-end, 360deg); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeRight {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleUp {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes scrollDot {
  0%   { transform: translateY(0); opacity: 1; }
  60%  { transform: translateY(8px); opacity: 0; }
  61%  { transform: translateY(-4px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes loaderPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.15); opacity: 0.7; }
}

@keyframes loaderBar {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

@keyframes float1 {
  0%, 100% { transform: translateY(0)   rotate(0deg)   scale(1); }
  25%       { transform: translateY(-18px) rotate(6deg)   scale(1.03); }
  50%       { transform: translateY(-8px)  rotate(-3deg)  scale(0.98); }
  75%       { transform: translateY(-22px) rotate(4deg)   scale(1.02); }
}

@keyframes float2 {
  0%, 100% { transform: translateY(0)   rotate(0deg)   scale(1); }
  30%       { transform: translateY(-14px) rotate(-8deg)  scale(1.04); }
  60%       { transform: translateY(-24px) rotate(5deg)   scale(0.97); }
  80%       { transform: translateY(-6px)  rotate(-2deg)  scale(1.01); }
}

@keyframes float3 {
  0%, 100% { transform: translateY(0)   rotate(0deg); }
  40%       { transform: translateY(-20px) rotate(10deg); }
  70%       { transform: translateY(-10px) rotate(-6deg); }
}

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes cartBounce {
  0%, 100% { transform: scale(1); }
  30%       { transform: scale(1.35); }
  60%       { transform: scale(0.9); }
  80%       { transform: scale(1.1); }
}

@keyframes dotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.85); }
}

@keyframes borderGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(61,140,68,0.45); }
  50%       { box-shadow: 0 0 0 8px rgba(61,140,68,0); }
}

@keyframes confetti {
  0%   { transform: translateY(-20px) rotate(0deg);  opacity: 1; }
  100% { transform: translateY(100px) rotate(720deg); opacity: 0; }
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

@keyframes slideOutRight {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}

@keyframes overlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Hero Entrance Animations ────────────────────────────── */
.hero-eyebrow {
  animation: fadeRight 0.7s var(--ease-out) 0.3s both;
}

.hero-title {
  animation: fadeUp 0.9s var(--ease-out) 0.5s both;
}

.hero-subtitle {
  animation: fadeUp 0.9s var(--ease-out) 0.7s both;
}

.hero-actions {
  animation: fadeUp 0.8s var(--ease-out) 0.9s both;
}

.hero-scroll-hint {
  animation: fadeIn 1s var(--ease-smooth) 1.4s both;
}

.hero-bg img {
  animation: fadeIn 1.2s var(--ease-smooth) 0s both;
}

/* ── Scroll Reveal System ────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s var(--ease-out),
              transform 0.7s var(--ease-out);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.7s var(--ease-out),
              transform 0.7s var(--ease-out);
}

.reveal-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.7s var(--ease-out),
              transform 0.7s var(--ease-out);
}

.reveal-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.6s var(--ease-out),
              transform 0.6s var(--ease-out);
}

.reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays for child elements */
.stagger-children > *:nth-child(1) { transition-delay: 0ms; }
.stagger-children > *:nth-child(2) { transition-delay: 80ms; }
.stagger-children > *:nth-child(3) { transition-delay: 160ms; }
.stagger-children > *:nth-child(4) { transition-delay: 240ms; }
.stagger-children > *:nth-child(5) { transition-delay: 320ms; }
.stagger-children > *:nth-child(6) { transition-delay: 400ms; }
.stagger-children > *:nth-child(7) { transition-delay: 480ms; }
.stagger-children > *:nth-child(8) { transition-delay: 560ms; }
.stagger-children > *:nth-child(9) { transition-delay: 640ms; }
.stagger-children > *:nth-child(10) { transition-delay: 720ms; }
.stagger-children > *:nth-child(11) { transition-delay: 800ms; }
.stagger-children > *:nth-child(12) { transition-delay: 880ms; }

/* ── Product Card Filter Transition ─────────────────────── */
.product-card {
  transition: opacity 0.35s var(--ease-smooth),
              transform 0.5s var(--ease-spring),
              box-shadow 0.35s var(--ease-smooth);
}

.product-card.filtered-out {
  opacity: 0;
  transform: scale(0.9) translateY(12px);
  pointer-events: none;
}

.product-card.filtered-in {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* ── Floating Background Elements ───────────────────────── */
.float-el:nth-child(1) { animation: float1 9s  ease-in-out infinite; }
.float-el:nth-child(2) { animation: float2 11s ease-in-out infinite 1s; }
.float-el:nth-child(3) { animation: float3 8s  ease-in-out infinite 2s; }
.float-el:nth-child(4) { animation: float1 13s ease-in-out infinite 0.5s; }
.float-el:nth-child(5) { animation: float2 10s ease-in-out infinite 3s; }
.float-el:nth-child(6) { animation: float3 12s ease-in-out infinite 1.5s; }
.float-el:nth-child(7) { animation: float1 7s  ease-in-out infinite 4s; }
.float-el:nth-child(8) { animation: float2 14s ease-in-out infinite 2s; }

/* ── Button Loading State ────────────────────────────────── */
.btn-loading {
  position: relative;
  pointer-events: none;
  color: transparent !important;
}

.btn-loading::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: white;
  border-radius: 50%;
  animation: spinSlow 0.7s linear infinite;
}

/* ── Cart Count Animation ────────────────────────────────── */
.cart-count.animate {
  animation: cartBounce 0.5s var(--ease-spring);
}

/* ── Add to Cart Success ─────────────────────────────────── */
.add-to-cart-btn.success {
  background: var(--leaf) !important;
  animation: borderGlow 0.6s ease-out;
}

.add-to-cart-btn.success svg {
  animation: scaleUp 0.3s var(--ease-spring);
}

/* ── Nav scroll state ────────────────────────────────────── */
.nav {
  transition: background 0.4s var(--ease-smooth),
              box-shadow 0.4s var(--ease-smooth),
              transform 0.3s var(--ease-smooth);
}

.nav.hidden {
  transform: translateY(-100%);
}

/* ── Page transition (checkout, confirmation) ────────────── */
.page-enter {
  animation: fadeUp 0.6s var(--ease-out) both;
}

/* ── Confirmation check animation ───────────────────────── */
.confirm-check {
  animation: scaleUp 0.6s var(--ease-spring) 0.3s both;
}

/* ── Product grid skeleton loading ──────────────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--cream-deep) 25%,
    rgba(250,246,240,0.8) 50%,
    var(--cream-deep) 75%
  );
  background-size: 200% auto;
  animation: shimmer 1.5s linear infinite;
  border-radius: var(--radius-md);
}

/* ── Mobile menu slide ───────────────────────────────────── */
.nav-links.mobile-open {
  animation: fadeDown 0.3s var(--ease-out) both;
}

/* ── Hover shimmer on cards ──────────────────────────────── */
.product-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0) 100%
  );
  opacity: 0;
  transition: opacity 0.4s var(--ease-smooth);
  pointer-events: none;
  z-index: 1;
}

.product-card:hover::before {
  opacity: 1;
}

/* ── Gold shimmer on price text ──────────────────────────── */
.product-card-price:hover {
  background: linear-gradient(
    90deg,
    var(--dark) 20%,
    var(--gold) 50%,
    var(--dark) 80%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 2s linear infinite;
}

/* ── Decorative floral divider ───────────────────────────── */
.floral-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: var(--space-xl) 0;
  opacity: 0.45;
}

.floral-divider-line {
  flex: 1;
  max-width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.floral-divider-icon {
  color: var(--gold);
  font-size: 0.875rem;
}

/* ── Petal rain on confirmation ──────────────────────────── */
.petal {
  position: fixed;
  top: -20px;
  pointer-events: none;
  z-index: 3000;
  font-size: 1.2rem;
  animation: confetti 3s ease-in forwards;
}

/* ── Status badge pulse ──────────────────────────────────── */
.status-dot-pending {
  animation: dotPulse 2s ease-in-out infinite;
}

/* ── Falling leaf element ────────────────────────────────── */
.falling-leaf {
  will-change: top, transform, rotate;
}
.falling-leaf svg {
  width: 100%;
  height: auto;
  display: block;
}

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

  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}