/* =========================================================
   BazaarSe — Motion design system
   Subtle & polished micro-interactions + scroll reveals.
   Loaded after dark-mode.css on every page.

   Reveal elements are hidden ONLY when JS is active (html.js),
   so the page stays fully visible if JS fails or is disabled.
   All animation respects prefers-reduced-motion.
   ========================================================= */

:root {
    --bs-ease:        cubic-bezier(0.22, 1, 0.36, 1); /* gentle ease-out  */
    --bs-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    --bs-dur:         0.6s;       /* reveal duration       */
    --bs-stagger:     80ms;       /* delay between siblings */
}

/* ----------------------------------------------------------
   1. Scroll reveals  —  add  data-reveal="<dir>"  + optional style="--i:N"
   ---------------------------------------------------------- */
html.js [data-reveal] {
    opacity: 0;
    transition:
        opacity var(--bs-dur) var(--bs-ease),
        transform var(--bs-dur) var(--bs-ease),
        filter var(--bs-dur) var(--bs-ease);
    transition-delay: calc(var(--i, 0) * var(--bs-stagger));
    will-change: opacity, transform;
}
html.js [data-reveal="up"]      { transform: translate3d(0, 32px, 0); }
html.js [data-reveal="down"]    { transform: translate3d(0, -32px, 0); }
html.js [data-reveal="left"]    { transform: translate3d(-40px, 0, 0); }
html.js [data-reveal="right"]   { transform: translate3d(40px, 0, 0); }
html.js [data-reveal="scale"]   { transform: scale(0.94); }
html.js [data-reveal="blur"]    { filter: blur(10px); }

html.js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
    filter: none;
}

/* ----------------------------------------------------------
   2. Ambient / decorative keyframes
   ---------------------------------------------------------- */
@keyframes bs-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-16px); }
}
@keyframes bs-float-slow {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-26px) rotate(1.5deg); }
}
@keyframes bs-shimmer {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}
@keyframes bs-gradient-pan {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
@keyframes bs-pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
    50%      { box-shadow: 0 0 34px 0 rgba(34, 197, 94, 0.35); }
}
@keyframes bs-rise {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

.animate-float      { animation: bs-float 6s var(--bs-ease) infinite; }
.animate-float-slow { animation: bs-float-slow 9s var(--bs-ease) infinite; }
.animate-pulse-glow { animation: bs-pulse-glow 3.6s ease-in-out infinite; }

/* Entrance for above-the-fold hero content (runs once on load) */
.animate-rise {
    opacity: 0;
    animation: bs-rise 0.7s var(--bs-ease) forwards;
    animation-delay: calc(var(--i, 0) * var(--bs-stagger));
}

/* Gradient shimmer text (use on light text over a colored hero) */
.text-shimmer {
    background: linear-gradient(100deg,
        currentColor 30%,
        rgba(255, 255, 255, 0.85) 50%,
        currentColor 70%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: bs-shimmer 6s linear infinite;
}

/* Slowly panning gradient background for hero / CTA bands */
.bg-pan {
    background-size: 200% 200%;
    animation: bs-gradient-pan 14s ease infinite;
}

/* ----------------------------------------------------------
   3. Hover micro-interactions
   ---------------------------------------------------------- */
/* Unified card lift (canonical definition; page inline styles may override) */
.card-hover,
.lift {
    transition:
        transform 0.35s var(--bs-ease),
        box-shadow 0.35s var(--bs-ease);
}
.card-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 45px -16px rgba(0, 0, 0, 0.22);
}
.lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.18);
}

/* Button press feedback */
.press {
    transition:
        transform 0.15s var(--bs-ease),
        filter 0.2s ease,
        box-shadow 0.2s ease;
}
.press:hover  { filter: brightness(1.06); }
.press:active { transform: scale(0.96); }

/* Nav link underline grow (pure CSS) */
.nav-underline { position: relative; }
.nav-underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    height: 2px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.3s var(--bs-ease);
}
.nav-underline:hover::after,
.nav-underline:focus-visible::after { transform: scaleX(1); }

/* Image / media zoom on hover (wrap in overflow-hidden parent) */
.zoom { transition: transform 0.5s var(--bs-ease); }
.group:hover .zoom,
.zoom:hover { transform: scale(1.06); }

/* ----------------------------------------------------------
   4. Navbar shrink-on-scroll  (motion.js toggles .nav-scrolled)
   ---------------------------------------------------------- */
[data-nav-scroll] {
    transition:
        padding 0.3s var(--bs-ease),
        box-shadow 0.3s var(--bs-ease),
        background-color 0.3s var(--bs-ease),
        border-color 0.3s var(--bs-ease);
}
[data-nav-scroll] .nav-inner { transition: height 0.3s var(--bs-ease); }
[data-nav-scroll].nav-scrolled {
    box-shadow: 0 8px 30px -12px rgba(0, 0, 0, 0.18);
    border-color: transparent;
}

/* ----------------------------------------------------------
   5. Count-up numbers (motion.js animates; this just styles)
   ---------------------------------------------------------- */
[data-countup] { font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------
   6. Reduced motion — disable everything decorative
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html.js [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
    /* Legacy fade-up system (index.html) */
    .fade-up,
    .fade-up.visible {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .animate-float,
    .animate-float-slow,
    .animate-pulse-glow,
    .animate-rise,
    .text-shimmer,
    .bg-pan,
    [class*="animate-"] {
        animation: none !important;
    }
    html { scroll-behavior: auto !important; }
}