/* ==========================================================================
   Perfect Pack — custom styles, animations & micro-interactions
   Complements Tailwind utility classes.
   ========================================================================== */

:root {
    --brand-900: #1c1d20;
    --brand-500: #4b4d53;
    --accent-500: #e11d18;
    --accent-600: #bb1611;
}

html { scroll-behavior: smooth; scroll-padding-top: 7rem; }
body { overflow-x: hidden; }

/* ----- Header: transparent over hero, solid on scroll -------------------- */
#site-header { background: transparent; }
#site-header .nav-brand,
#site-header .nav-link { color: #ffffff; }

#site-header.scrolled {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 8px 24px -16px rgba(11, 37, 69, .4);
}
#site-header.scrolled .nav-brand,
#site-header.scrolled .nav-link { color: var(--brand-900); }

/* On light (non-hero) pages, force solid styling immediately */
#site-header.solid {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}
#site-header.solid .nav-brand,
#site-header.solid .nav-link { color: var(--brand-900); }

/* Logo light/dark swap: colour logo on light header, reversed (white wordmark)
   logo while the header is transparent over the dark hero. */
.logo-color   { display: block; }
.logo-reverse { display: none; }
#site-header:not(.scrolled):not(.solid) .logo-color   { display: none; }
#site-header:not(.scrolled):not(.solid) .logo-reverse { display: block; }

/* Nav link underline micro-interaction */
.nav-link { position: relative; padding-bottom: 2px; transition: color .25s ease; }
.nav-link::after {
    content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
    background: var(--accent-500); transition: width .3s ease;
}
.nav-link:hover::after,
.nav-link.is-active::after { width: 100%; }
.nav-link.is-active { color: var(--accent-500) !important; }

/* ----- Reveal-on-scroll -------------------------------------------------- */
.reveal {
    opacity: 0; transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
    will-change: opacity, transform;
}
.reveal.in-view { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1 !important; transform: none !important; transition: none; }
    html { scroll-behavior: auto; }
}

/* ----- Hero ------------------------------------------------------------- */
.hero-overlay {
    background: linear-gradient(180deg, rgba(28,29,32,.72) 0%, rgba(28,29,32,.55) 45%, rgba(28,29,32,.78) 100%);
}
.hero-float { animation: heroFade 1.1s cubic-bezier(.16,1,.3,1) both; }
.hero-float-2 { animation: heroFade 1.1s cubic-bezier(.16,1,.3,1) .18s both; }
.hero-float-3 { animation: heroFade 1.1s cubic-bezier(.16,1,.3,1) .34s both; }
@keyframes heroFade { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }

/* Subtle scroll cue */
.scroll-cue { animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

/* ----- Cards ------------------------------------------------------------ */
.product-card {
    transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .3s ease;
}
.product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px -24px rgba(28,29,32,.35);
}
.product-card img { transition: transform .6s cubic-bezier(.16,1,.3,1); }
.product-card:hover img { transform: scale(1.06); }

.icon-card { transition: transform .35s ease, box-shadow .35s ease, background .35s ease; }
.icon-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -22px rgba(28,29,32,.35); }

/* ----- Counters / stats ------------------------------------------------- */
.stat-num { font-variant-numeric: tabular-nums; }

/* ----- Buttons ---------------------------------------------------------- */
.btn-primary {
    background: var(--accent-500); color: #fff;
    transition: transform .2s ease, box-shadow .25s ease, background .25s ease;
}
.btn-primary:hover { background: var(--accent-600); transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(187,22,17,.7); }
.btn-ghost { transition: background .25s ease, color .25s ease, border-color .25s ease; }

/* ----- WhatsApp floating button ----------------------------------------- */
.whatsapp-fab {
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 50;
    display: inline-flex; align-items: center; justify-content: center;
    width: 3.5rem; height: 3.5rem; border-radius: 9999px;
    background: #25D366; color: #fff;
    box-shadow: 0 10px 30px -8px rgba(37,211,102,.7);
    transition: transform .25s ease, box-shadow .25s ease;
    animation: waPulse 2.4s ease-in-out infinite;
}
.whatsapp-fab:hover { transform: scale(1.08); }
.whatsapp-tooltip {
    position: absolute; right: 4.25rem; white-space: nowrap;
    background: var(--brand-900); color: #fff; font-size: .8rem; font-weight: 600;
    padding: .4rem .7rem; border-radius: .5rem; opacity: 0; pointer-events: none;
    transform: translateX(8px); transition: opacity .25s ease, transform .25s ease;
}
.whatsapp-fab:hover .whatsapp-tooltip { opacity: 1; transform: translateX(0); }
@keyframes waPulse { 0%,100% { box-shadow: 0 10px 30px -8px rgba(37,211,102,.7), 0 0 0 0 rgba(37,211,102,.4); } 50% { box-shadow: 0 10px 30px -8px rgba(37,211,102,.7), 0 0 0 12px rgba(37,211,102,0); } }

/* ----- Back to top ------------------------------------------------------ */
.back-to-top {
    position: fixed; right: 1.4rem; bottom: 5.25rem; z-index: 49;
    width: 2.75rem; height: 2.75rem; border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand-900); color: #fff;
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity .3s ease, transform .3s ease, background .25s ease;
    box-shadow: 0 8px 20px -8px rgba(28,29,32,.6);
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--accent-500); }

/* ----- Marquee / logos -------------------------------------------------- */
.lazyload { background: #eef2f7; }

/* ----- Forms ------------------------------------------------------------ */
.form-input {
    width: 100%; border: 1px solid #d7dee8; border-radius: .75rem;
    padding: .8rem 1rem; font-size: .95rem; background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.form-input:focus {
    outline: none; border-color: var(--accent-500);
    box-shadow: 0 0 0 4px rgba(225,29,24,.14);
}
.form-label { font-size: .85rem; font-weight: 600; color: #334155; margin-bottom: .35rem; display: block; }

/* ----- Filter chips ----------------------------------------------------- */
.filter-chip { transition: all .25s ease; }
.filter-chip.active { background: var(--brand-900); color: #fff; border-color: var(--brand-900); }

/* Section heading accent rule */
.eyebrow { letter-spacing: .18em; }