/* Shop My Quote — custom styles (ported from globals.css + framer-motion reveals) */

:root {
    --navy: #1B2B4B;
    --orange: #FF6B35;
    --orange-hover: #E55A2B;
    --bg: #FFFFFF;
    --bg-soft: #F7F8FC;
    --text: #1B2B4B;
    --muted: #6B7280;
    --border: #E5E7EB;
    --font-display: 'Merriweather', serif;
    --font-body: 'Inter', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: var(--font-body); }

/* ── Keyframes (from globals.css) ─────────────────────────────────────────── */
@keyframes fade-rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes blob-morph { 0%,100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } 50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; } }
@keyframes shimmer-sweep { 0% { transform: translateX(-100%) skewX(-12deg); } 100% { transform: translateX(200%) skewX(-12deg); } }
@keyframes ken-burns { from { transform: scale(1); } to { transform: scale(1.07); } }
@keyframes savingsTicker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes spin { to { transform: rotate(360deg); } }

.fade-rise { animation: fade-rise 0.9s ease-out both; }
.delay-1 { animation-delay: 0.15s; }
.delay-2 { animation-delay: 0.3s; }
.delay-3 { animation-delay: 0.5s; }
.float-slow { animation: float 9s ease-in-out infinite; }
.float-slow-2 { animation: float 12s ease-in-out 2s infinite; }
.blob-morph { animation: blob-morph 10s ease-in-out infinite; }
.ken-burns { animation: ken-burns 10s ease-out both; }

.animate-shimmer-sweep { animation: shimmer-sweep 1.2s ease-in-out infinite; }

/* ── Reveal-on-scroll (replaces framer-motion whileInView) ────────────────── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-30px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal-left.is-visible { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal-right.is-visible { opacity: 1; transform: translateX(0); }

/* Range slider (Quote calculator) */
input[type="range"].accent-orange { accent-color: var(--orange); }

/* Savings ticker */
.savings-ticker-track { animation: savingsTicker 40s linear infinite; }

/* Liquid-glass effect used on blog article pages */
.liquid-glass {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Blog article body typography (prose-custom) */
.prose-custom h2 { font-family: var(--font-display); color: #fff; margin-top: 2rem; margin-bottom: 1rem; font-size: 1.5rem; font-weight: 300; }
.prose-custom h3 { font-family: var(--font-display); color: #fff; margin-top: 1.5rem; margin-bottom: 0.65rem; font-size: 1.15rem; font-weight: 400; }
.prose-custom p { color: rgba(255,255,255,0.7); margin-bottom: 1rem; }
.prose-custom strong { color: #fff; font-weight: 600; }
.prose-custom ul { margin: 0 0 1.15rem 1.25rem; list-style: disc; color: rgba(255,255,255,0.7); }
.prose-custom ol { margin: 0 0 1.15rem 1.25rem; list-style: decimal; color: rgba(255,255,255,0.7); }
.prose-custom li { margin-bottom: 0.5rem; padding-left: 0.25rem; }
.prose-custom a { color: #FF6B35; text-decoration: underline; }
.prose-custom .callout { background: rgba(255,107,53,0.12); border: 1px solid rgba(255,107,53,0.3); border-radius: 0.75rem; padding: 1rem 1.25rem; margin: 0 0 1.25rem; color: rgba(255,255,255,0.8); font-size: 0.92rem; }

/* line clamp helpers */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Admin: force light mode inputs */
.admin-light { background-color: #f3f4f6; color: #111827; }
.admin-light input, .admin-light select, .admin-light textarea { color: #111827 !important; background-color: #fff !important; }
.admin-light input::placeholder { color: #9ca3af !important; }