/* LoyaltyLoop — Custom CSS */

/* ── Progress bar ─────────────────────── */
#ll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:9999;background:linear-gradient(90deg,#4f46e5,#7c3aed,#4f46e5);background-size:200% 100%;transform:scaleX(0);transform-origin:left;transition:transform .3s ease,opacity .3s ease;opacity:0}
#ll-progress.active{opacity:1;animation:prog-shimmer 1.5s linear infinite}
@keyframes prog-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── Scrollbar ────────────────────────── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}

/* ── Toast ────────────────────────────── */
@keyframes toast-in{from{opacity:0;transform:translateX(100%)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translateX(110%);max-height:0;padding:0;margin:0}}
.toast-item{animation:toast-in .28s cubic-bezier(0.175,0.885,0.32,1.275) both}
.toast-item.out{animation:toast-out .25s ease forwards}

/* ── Stamp ────────────────────────────── */
@keyframes stamp-pop{0%{transform:scale(2.5) rotate(-20deg);opacity:0}60%{transform:scale(.9) rotate(3deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
.stamp-animate{animation:stamp-pop .45s cubic-bezier(0.175,0.885,0.32,1.275) both}

/* ── Confetti ─────────────────────────── */
@keyframes fall{0%{transform:translateY(-10vh) rotate(0deg);opacity:1}100%{transform:translateY(110vh) rotate(720deg);opacity:0}}
.confetti-piece{position:fixed;width:8px;height:8px;z-index:9999;animation:fall linear forwards}

/* ── Modal ────────────────────────────── */
@keyframes modal-in{from{opacity:0;transform:scale(.95) translateY(8px)}to{opacity:1;transform:none}}
.modal-in{animation:modal-in .2s ease both}

/* ── Check draw ───────────────────────── */
@keyframes draw{from{stroke-dashoffset:30}to{stroke-dashoffset:0}}
.check-draw{stroke-dasharray:30;stroke-dashoffset:30;animation:draw .4s .2s ease forwards}

/* ── Pulse ring ───────────────────────── */
@keyframes ring{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.6);opacity:0}}
.pulse-ring{position:absolute;inset:0;border-radius:9999px;animation:ring 1.5s ease-out infinite}

/* ── Upgrade glow ─────────────────────── */
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(79,70,229,.4)}50%{box-shadow:0 0 0 8px rgba(79,70,229,0)}}
.upgrade-glow{animation:glow 2.5s ease infinite}

/* ── Scroll reveal ────────────────────── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.shown{opacity:1;transform:none}
.reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.2s}
.reveal.d3{transition-delay:.3s}.reveal.d4{transition-delay:.4s}

/* ── Gradient text ────────────────────── */
.text-gradient{background:linear-gradient(135deg,#4f46e5,#7c3aed 50%,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ── Glass ────────────────────────────── */
.glass{background:rgba(255,255,255,.75);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.5)}
.glass-dark{background:rgba(15,23,42,.65);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.08)}

/* ── Hero mesh ────────────────────────── */
.hero-bg{background-color:#f5f8ff;background-image:radial-gradient(ellipse 70% 50% at 10% -10%,rgba(99,102,241,.14) 0%,transparent 65%),radial-gradient(ellipse 50% 40% at 90% 15%,rgba(139,92,246,.12) 0%,transparent 60%),radial-gradient(ellipse 40% 35% at 55% 105%,rgba(79,70,229,.08) 0%,transparent 55%)}

/* ── Dark mode — divide lines & misc ──── */
.dark [class*="divide-ink-faint"] > * + * { border-color:rgba(255,255,255,.06) !important; }
.dark [class*="border-ink-faint"] { border-color:rgba(255,255,255,.08) !important; }
.dark [class*="border-white\/"] { border-color:rgba(255,255,255,.08) !important; }
.dark .bg-amber-50 { background:rgba(245,158,11,.08) !important; }
.dark .bg-brand-50 { background:rgba(99,102,241,.10) !important; }

/* ── Active nav indicator ─────────────── */
.nav-link.active{position:relative}
.nav-link.active::before{content:'';position:absolute;left:-8px;top:20%;bottom:20%;width:3px;border-radius:2px;background:#4f46e5}

/* ── Input focus glow ─────────────────── */
.input:focus{box-shadow:0 0 0 4px rgba(99,102,241,.1)!important}

/* ── Skeleton shimmer ─────────────────── */
@keyframes shimmer{from{background-position:-200% 0}to{background-position:200% 0}}
.skeleton{background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%);background-size:200% 100%;animation:shimmer 1.8s linear infinite;border-radius:.75rem}

/* ── Slide in from right ──────────────── */
@keyframes slide-in-right{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.slide-in-right{animation:slide-in-right .2s ease both}