/* Yooper Peptides — shared styles (extracted from the approved design mock) */

:root {
    --navy-900: #0b1120;
    --navy-800: #0f1a2e;
    --navy-700: #132238;
    --cyan-400: #22d3ee;
    --cyan-500: #06b6d4;
}

* { scroll-behavior: smooth; }

body {
    font-family: 'Inter', system-ui, sans-serif;
    background-color: var(--navy-900);
    color: #e2e8f0;
    overflow-x: hidden;
}

.font-display { font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; }

/* Floating orbs */
.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
    pointer-events: none;
    animation: floatOrb 12s ease-in-out infinite;
}
.orb-1 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(6, 182, 212, 0.5) 0%, transparent 70%); top: -10%; left: -5%; animation-delay: 0s; }
.orb-2 { width: 350px; height: 350px; background: radial-gradient(circle, rgba(99, 102, 241, 0.45) 0%, transparent 70%); top: 30%; right: -8%; animation-delay: -4s; }
.orb-3 { width: 300px; height: 300px; background: radial-gradient(circle, rgba(6, 182, 212, 0.4) 0%, transparent 70%); bottom: -5%; left: 20%; animation-delay: -8s; }
.orb-4 { width: 250px; height: 250px; background: radial-gradient(circle, rgba(34, 211, 238, 0.35) 0%, transparent 35%); top: 50%; left: 40%; animation-delay: -2s; opacity: 0.3; }
.orb-4 { background: radial-gradient(circle, rgba(34, 211, 238, 0.35) 0%, transparent 70%); }

@keyframes floatOrb {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25%      { transform: translate(40px, -30px) scale(1.1); }
    50%      { transform: translate(-20px, -60px) scale(0.9); }
    75%      { transform: translate(-50px, -15px) scale(1.05); }
}

/* Grid pattern overlay */
.grid-pattern {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
}

/* Card hover effect */
.product-card { transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.product-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(6, 182, 212, 0.25); }
.product-card .card-gradient { transition: all 0.35s ease; }
.product-card:hover .card-gradient { transform: scale(1.03); }

/* Cart drawer */
#cart-overlay { transition: opacity 0.3s ease, visibility 0.3s ease; }
#cart-drawer { transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
#cart-drawer.open { transform: translateX(0); }

/* Modal (auth + checkout) */
#auth-modal, #checkout-modal { transition: opacity 0.3s ease, visibility 0.3s ease; }
#auth-modal.open, #checkout-modal.open { opacity: 1; visibility: visible; pointer-events: auto; }

/* Toast */
#toast { transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
#toast.show { transform: translateX(0); opacity: 1; }

/* Pulse animation for cart badge */
@keyframes cartBounce {
    0%, 100% { transform: scale(1); }
    30%      { transform: scale(1.4); }
    60%      { transform: scale(0.9); }
    80%      { transform: scale(1.1); }
}
.cart-bounce { animation: cartBounce 0.5s ease; }

/* Button ripple */
.btn-ripple { position: relative; overflow: hidden; }
.btn-ripple::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}
.btn-ripple:active::after { width: 300px; height: 300px; }

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

/* Scrollbar styling */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0f1a2e; }
::-webkit-scrollbar-thumb { background: #1e3a5f; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #2a5080; }

/* Mobile menu */
#mobile-menu { transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); }

/* Stats counter */
.stat-number { font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
    .orb { filter: blur(50px); }
    .orb-1 { width: 200px; height: 200px; }
    .orb-2 { width: 180px; height: 180px; }
    .orb-3 { width: 160px; height: 160px; }
    .orb-4 { width: 140px; height: 140px; }
}