/* ─── Theme 18 — Pet Care / Lifestyle ─────────────────────────────────────── */

/* CSS custom properties — available globally */
.theme-18 {
    --primary:       #667eea;
    --primary-dark:  #764ba2;
    --secondary:     #f093fb;
    --accent:        #f5576c;
    --success:       #43e97b;
    --warning:       #fa709a;
    --info:          #4facfe;
    --bg-base:       #0f0c29;
    --bg-surface:    #1a1a2e;
    --text-primary:  #f8fafc;
    --text-muted:    rgba(248,250,252,0.55);
    font-family: 'Inter', -apple-system, sans-serif;
}

/* ── Smooth scroll ── */
html { scroll-behavior: smooth; }

/* ── Scrollbar - removed for Theme 18 ── */
html.theme-18, body.theme-18 { overflow-x: hidden; max-width: 100vw; }
.theme-18 ::-webkit-scrollbar,
.theme-18::-webkit-scrollbar          { display: none !important; width: 0 !important; height: 0 !important; }
.theme-18 * { scrollbar-width: none !important; -ms-overflow-style: none !important; }

/* ── Utility animations ── */
@keyframes t18-float      { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-20px) rotate(5deg); } }
@keyframes t18-float-slow { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes t18-fade-in    { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes t18-slide-up   { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
@keyframes t18-pulse-slow { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(1.05); opacity:0.8; } }
@keyframes t18-shimmer    { 0% { background-position:-200% center; } 100% { background-position:200% center; } }

.theme-18 .animate-float       { animation: t18-float 6s ease-in-out infinite; }
.theme-18 .animate-float-slow  { animation: t18-float-slow 4s ease-in-out infinite; }
.theme-18 .animate-fade-in     { animation: t18-fade-in 0.8s ease-out forwards; opacity:0; }
.theme-18 .animate-slide-up    { animation: t18-slide-up 0.8s ease-out forwards; opacity:0; }
.theme-18 .animate-pulse-slow  { animation: t18-pulse-slow 2s ease-in-out infinite; }
.theme-18 .animate-shimmer     {
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: t18-shimmer 2s infinite;
}

/* ── Gradient text helper ── */
.theme-18 .gradient-text {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}