/* ============================================================================
   store-animations.css — Animation & 3D layer for the CHIST ERP storefront

   Scope: additive only. Layers on top of store.css.
   ========================================================================== */

/* ── 1. Design tokens ── */
:root {
    --anim-cyan: #22d3ee;
    --anim-violet: #8b5cf6;
    --anim-glare: rgba(255, 255, 255, 0.22);
}

/* ── 1b. Header micro-interactions ── */
.site-header .container,
.site-header .navbar .container {
    position: relative;
    z-index: 1;
}

.dropdown-toggle::after {
    transition: transform 0.25s ease;
}
.dropdown-toggle.show::after,
.dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

.cart-count,
.badge-dot {
    animation: badge-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes badge-pop {
    0% { transform: scale(0); }
    70% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* ── 2. Hero 3D canvas layering ── */
.hero-slide {
    position: relative;
    overflow: hidden;
    /* Clip canvas bleed during resize reflows */
}

#hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    display: block;
}

.hero-slide .hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero-slide .hero-content {
    position: relative;
    z-index: 2;
}

/* ── 3. Card tilt + glare ─────────────────────────────────────────────────
   JS applies rotateX/rotateY via GSAP; CSS supplies the 3D context, GPU
   compositing hint, and the pointer-tracking radial highlight. */
.tilt-enabled {
    position: relative;
    /* Anchor for the injected .tilt-glare child */
    transform-style: preserve-3d;
    will-change: transform;
    /* Promote to its own layer — avoids tilt jank */
    overflow: hidden;
    /* Glare must not spill past rounded corners */
}

.tilt-glare {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    /* Never intercept card link clicks */
    opacity: 0;
    transition: opacity 0.3s ease;
    /* --glare-x / --glare-y are set per-pointermove by store-animations.js */
    background: radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 50%),
            var(--anim-glare) 0%,
            transparent 55%);
}

/* Lift shadow reinforces the tilt's depth illusion on hover. */
.tilt-enabled:hover {
    box-shadow:
        0 18px 40px rgba(99, 102, 241, 0.15),
        0 0 0 1px rgba(99, 102, 241, 0.2);
}

/* ── 4. Gradient text shimmer ── */
.gradient-text {
    background: linear-gradient(100deg,
            var(--anim-cyan) 0%,
            var(--anim-violet) 40%,
            var(--anim-cyan) 80%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-pan 5s linear infinite;
}

@keyframes gradient-pan {
    to {
        background-position: 220% center;
    }
}

/* Hero CTA buttons — subtle glow pulse on light hero */
.hero-default .btn-hero {
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);
    animation: btn-glow-pulse 3s ease-in-out infinite;
}

@keyframes btn-glow-pulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(99, 102, 241, 0.25); }
    50% { box-shadow: 0 6px 28px rgba(99, 102, 241, 0.45); }
}

/* Floating decorative dots on light hero */
.hero-default .hero-content::before,
.hero-default .hero-content::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
}
.hero-default .hero-content::before {
    width: 120px;
    height: 120px;
    top: 10%;
    right: 5%;
    background: radial-gradient(circle, rgba(99,102,241,0.15) 0%, transparent 70%);
    animation: hero-dot-float 6s ease-in-out infinite;
}
.hero-default .hero-content::after {
    width: 80px;
    height: 80px;
    bottom: 15%;
    left: 40%;
    background: radial-gradient(circle, rgba(14,165,233,0.12) 0%, transparent 70%);
    animation: hero-dot-float 8s ease-in-out infinite reverse;
}

@keyframes hero-dot-float {
    0%, 100% { transform: translate(0, 0); opacity: 0.7; }
    50% { transform: translate(-15px, -20px); opacity: 1; }
}

/* ── 5. CTA conic border glow ── */
@property --glow-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.cta-card {
    position: relative;
    z-index: 0;
    /* New stacking context so ::before can sit behind content */
}

.cta-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    /* 2px overhang = visible glowing rim */
    z-index: -1;
    border-radius: inherit;
    background: conic-gradient(from var(--glow-angle),
            var(--anim-cyan),
            var(--anim-violet),
            transparent 30%,
            transparent 70%,
            var(--anim-cyan));
    filter: blur(6px);
    /* Soften the rim into a glow rather than a hard line */
    animation: glow-rotate 6s linear infinite;
}

@keyframes glow-rotate {
    to {
        --glow-angle: 360deg;
    }
}

/* ── 6. Ambient float (hero fallback card) ────────────────────────────────
   Gentle bob for the .hero-float-card shown when the 3D canvas is absent
   (e.g. WebGL unavailable) — the page keeps some life either way. */
.hero-float-card {
    animation: ambient-float 5s ease-in-out infinite;
}

/* store-3d.js adds .has-hero-3d to <html> once WebGL init succeeds; the
   static fallback card is hidden so it never overlaps the 3D GPU model. */
.has-hero-3d .hero-float-card {
    display: none;
}

@keyframes ambient-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-16px);
    }
}

/* ── 7. Reduced-motion overrides ──────────────────────────────────────────
   Belt and braces: JS already exits early and removes the canvas, but CSS
   keyframes above run without JS, so they are neutralised here too. The
   .reduced-motion class mirrors the media query for JS-driven cases. */
@media (prefers-reduced-motion: reduce) {

    .gradient-text,
    .cta-card::before,
    .hero-float-card,
    .hero-default .btn-hero,
    .hero-default .hero-content::before,
    .hero-default .hero-content::after,
    .cart-count,
    .badge-dot {
        animation: none;
    }

    #hero-canvas {
        display: none;
    }
}

.reduced-motion .gradient-text,
.reduced-motion .cta-card::before,
.reduced-motion .hero-float-card,
.reduced-motion .hero-default .btn-hero {
    animation: none;
}