* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; overflow-x: hidden; }

#scroll-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0%;
    background: linear-gradient(90deg, #059669, #fbbf24, #059669);
    z-index: 100; transition: width 0.1s linear;
}

/* Page transition */
.page-transition { animation: pageIn 0.5s ease; }
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }

/* Reveal */
.reveal {
    opacity: 0; transform: translateY(36px);
    transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
    will-change: opacity, transform;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Hero */
.hero-gradient {
    background: linear-gradient(135deg, rgba(6,78,59,0.92) 0%, rgba(27,67,50,0.88) 100%),
                url('https://images.unsplash.com/photo-1542601906990-b4d3fb778b09?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
}
@media (min-width: 1024px) { .hero-gradient { background-attachment: fixed; } }

/* Page banner gradient */
.page-banner {
    background: linear-gradient(135deg, #064e3b 0%, #1b4332 100%);
}

/* Cards */
.card-lift { transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease; }
.card-lift:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -12px rgba(5,150,105,0.25); }

/* Nav active */
.nav-link.active { color: #047857; background: #ecfdf5; font-weight: 600; }

/* Pokja fade */
.pokja-fade { animation: pokjaFade 0.5s cubic-bezier(0.16,1,0.3,1); }
@keyframes pokjaFade { from { opacity:0; transform:translateY(15px); } to { opacity:1; transform:translateY(0); } }

/* Modal */
.modal-backdrop { animation: backdropIn 0.25s ease forwards; }
@keyframes backdropIn { from { opacity:0; } to { opacity:1; } }
.modal-panel { animation: modalIn 0.4s cubic-bezier(0.16,1,0.3,1) forwards; }
@keyframes modalIn { from { opacity:0; transform:translateY(30px) scale(0.96); } to { opacity:1; transform:translateY(0) scale(1); } }

/* Toast */
.toast-in  { animation: toastIn 0.4s cubic-bezier(0.16,1,0.3,1); }
.toast-out { animation: toastOut 0.3s ease forwards; }
@keyframes toastIn  { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes toastOut { to { opacity:0; transform:translateY(20px); } }

/* Mobile drawer */
.mobile-drawer { transition: max-height 0.4s ease, opacity 0.3s ease; max-height: 0; opacity: 0; overflow: hidden; }
.mobile-drawer.open { max-height: 700px; opacity: 1; }

/* Back-to-top */
#back-to-top { transition: opacity 0.3s, transform 0.3s; }
#back-to-top.show { opacity: 1; transform: scale(1); pointer-events: auto; }

/* Scrollbar */
.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #10b981; border-radius: 4px; }

/* QR Botani */
.qr-scanner-box { position: relative; background: linear-gradient(135deg, #064e3b, #1b4332); overflow: hidden; }
.qr-scanner-box::before {
    content: ''; position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(251,191,36,0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(251,191,36,0.08) 1px, transparent 1px);
    background-size: 20px 20px; pointer-events: none;
}
.scan-line {
    position: absolute; left: 8%; right: 8%; height: 2px;
    background: linear-gradient(90deg, transparent, #fbbf24, transparent);
    box-shadow: 0 0 12px #fbbf24;
    animation: scanMove 2.4s ease-in-out infinite;
}
@keyframes scanMove { 0%,100% { top: 12%; } 50% { top: 88%; } }

.plant-card { transition: all 0.35s cubic-bezier(0.16,1,0.3,1); cursor: pointer; }
.plant-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 25px 50px -12px rgba(5,150,105,0.35); }
.plant-card.active { box-shadow: 0 0 0 3px #fbbf24, 0 20px 40px -12px rgba(251,191,36,0.4); transform: translateY(-4px) scale(1.01); }

.filter-chip { transition: all 0.3s ease; }
.filter-chip.active { background: #047857 !important; color: #fff !important; box-shadow: 0 4px 12px rgba(4,120,87,0.35); }

.scan-result { animation: scanResult 0.5s cubic-bezier(0.16,1,0.3,1); }
@keyframes scanResult { from { opacity:0; transform: translateX(-15px); } to { opacity:1; transform: translateX(0); } }

/* Timeline line (desktop) */
@media (min-width: 768px) {
    .timeline-wrap::before {
        content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px;
        background: linear-gradient(180deg, #059669, #fbbf24, #059669);
        transform: translateX(-50%); border-radius: 3px;
    }
}

/* Float animation for decorative icons */
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-float-slow { animation: float 9s ease-in-out infinite; }
@keyframes float {
    0%,100% { transform: translateY(0px); }
    50% { transform: translateY(-18px); }
}