@keyframes soft-breath {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.85;
  }
}

.breath-on-hover:hover .breath-dot {
  animation: soft-breath 1.8s ease-in-out infinite;
}

body {
    font-family: 'Inter', sans-serif;
}

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    background: white;
    border: 1px solid rgba(0,0,0,0.08);
    padding: 16px 20px;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.12);
    font-size: 14px;
    color: #111827;
}

    #blazor-error-ui .reload {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: 12px;
        padding: 8px 14px;
        border-radius: 12px;
        background: #485C11;
        color: white;
        text-decoration: none;
        font-weight: 600;
        transition: background 0.2s ease;
    }

        #blazor-error-ui .reload:hover {
            background: #556A18;
        }

    #blazor-error-ui .dismiss {
        margin-left: 10px;
        cursor: pointer;
        opacity: 0.7;
    }
/* ── UI animations ──────────────────────────────────────────────────────────
   Micro-interactions: add-to-cart flight, cart bump, badge pop, entrance
   fades. Everything is disabled for users who prefer reduced motion. */

/* Dot that flies from the add-to-cart button to the cart icon (JS-driven). */
.fly-to-cart-dot {
    position: fixed;
    z-index: 9999;
    width: 18px;
    height: 18px;
    border-radius: 9999px;
    background: #485C11;
    box-shadow: 0 0 0 6px rgba(72, 92, 17, 0.18), 0 4px 14px rgba(72, 92, 17, 0.45);
    pointer-events: none;
    transform: translate(-50%, -50%);
}

/* Cart icon bump — quick scale + tilt to pull the eye to the cart. */
@keyframes cart-bump {
    0%   { transform: scale(1); }
    25%  { transform: scale(1.25) rotate(-8deg); }
    50%  { transform: scale(0.95) rotate(6deg); }
    75%  { transform: scale(1.12) rotate(-3deg); }
    100% { transform: scale(1); }
}
.cart-bump {
    animation: cart-bump 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* Badge pop — plays when the cart count changes. */
@keyframes badge-pop {
    0%   { transform: scale(0.4); }
    60%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}
.badge-pop {
    animation: badge-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Soft glow ring that briefly highlights the cart after an item is added. */
@keyframes cart-glow {
    0%   { box-shadow: 0 0 0 0 rgba(183, 211, 90, 0.7); }
    100% { box-shadow: 0 0 0 14px rgba(183, 211, 90, 0); }
}
.cart-bump::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    animation: cart-glow 0.7s ease-out both;
    pointer-events: none;
}

/* Entrance: fade in while sliding up. Apply per element; combine with
   .stagger-* for list/grid children. */
@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up {
    animation: fade-in-up 0.5s cubic-bezier(0.21, 0.6, 0.35, 1) both;
}
.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.10s; }
.stagger-3 { animation-delay: 0.15s; }
.stagger-4 { animation-delay: 0.20s; }
.stagger-5 { animation-delay: 0.25s; }
.stagger-6 { animation-delay: 0.30s; }

/* Tactile press feedback for primary action buttons. */
.btn-press {
    transition: transform 0.12s ease;
}
.btn-press:active {
    transform: scale(0.96);
}

/* Accessibility: switch all of the above off under reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .cart-bump,
    .badge-pop,
    .fade-in-up,
    .fly-to-cart-dot {
        animation: none !important;
    }
    .cart-bump::after { animation: none !important; }
    .btn-press, .btn-press:active { transform: none; transition: none; }
}

/* ── Cart "added" popup ─────────────────────────────────────────────────────
   Anchored under the cart icon; slides in from the right edge, auto-dismisses
   with a shrinking progress bar. */
@keyframes cart-popup-in {
    0%   { transform: translateX(115%); opacity: 0; }
    70%  { transform: translateX(-6px); opacity: 1; }
    100% { transform: translateX(0); opacity: 1; }
}
.cart-popup-in {
    animation: cart-popup-in 0.45s cubic-bezier(0.21, 1.02, 0.55, 1) both;
}

@keyframes cart-popup-out {
    from { transform: translateX(0); opacity: 1; }
    to   { transform: translateX(120%); opacity: 0; }
}
.cart-popup-out {
    animation: cart-popup-out 0.35s cubic-bezier(0.55, 0.05, 0.9, 0.4) both;
}

/* Shrinks from full width to zero over the configured display time. */
@keyframes cart-popup-progress {
    from { width: 100%; }
    to   { width: 0%; }
}
.cart-popup-progress {
    animation-name: cart-popup-progress;
    animation-timing-function: linear;
    animation-fill-mode: both;
}

@media (prefers-reduced-motion: reduce) {
    .cart-popup-in, .cart-popup-out { animation: none !important; }
    .cart-popup-progress { animation-duration: 0.001s !important; }
}