/* =========================================================
   PACKAGESEAL EXPERIENCE ENGINE
   Nonblocking customer-page effects
   ========================================================= */

:root {
    --experience-accent: #4f46e5;
    --experience-glow: rgba(79, 70, 229, 0.30);
    --experience-sparkle: #f4cf67;
}


/* =========================================================
   INITIAL PAGE ENTRANCE
   ========================================================= */

[data-experience-root] {
    position: relative;
    isolation: isolate;

    opacity: 0;
    transform: translateY(16px);

    animation:
        experience-page-arrive
        0.75s
        cubic-bezier(0.22, 1, 0.36, 1)
        forwards;
}


/* =========================================================
   PRODUCT CARD
   ========================================================= */

.product-card {
    position: relative;
    isolation: isolate;
}

.product-card.experience-glow {
    animation:
        experience-card-glow
        2.2s
        ease-in-out
        1;
}


/* =========================================================
   PRODUCT IMAGE
   ========================================================= */

.product-image {
    transform:
        translateY(10px)
        scale(0.985);

    opacity: 0;

    animation:
        experience-image-arrive
        0.85s
        0.18s
        cubic-bezier(0.22, 1, 0.36, 1)
        forwards;
}


/* =========================================================
   PROCEDURAL SPARKLES
   ========================================================= */

.experience-sparkle-layer {
    position: absolute;
    inset: -16px;

    z-index: 4;

    overflow: hidden;
    pointer-events: none;
}

.experience-sparkle {
    position: absolute;

    width: var(--sparkle-size);
    height: var(--sparkle-size);

    border-radius: 50%;

    background: var(--experience-sparkle);

    box-shadow:
        0 0 7px var(--experience-sparkle),
        0 0 16px var(--experience-sparkle);

    opacity: 0;

    animation:
        experience-sparkle
        var(--sparkle-duration)
        var(--sparkle-delay)
        ease-in-out
        var(--sparkle-iterations);
}

.experience-sparkle::before,
.experience-sparkle::after {
    content: "";

    position: absolute;
    top: 50%;
    left: 50%;

    background: var(--experience-sparkle);

    transform: translate(-50%, -50%);
}

.experience-sparkle::before {
    width: 280%;
    height: 1px;
}

.experience-sparkle::after {
    width: 1px;
    height: 280%;
}


/* =========================================================
   LIGHT SWEEP
   ========================================================= */

.experience-light-sweep {
    position: absolute;
    inset: 0;

    z-index: 3;

    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

.experience-light-sweep::before {
    content: "";

    position: absolute;
    top: -25%;
    left: -45%;

    width: 28%;
    height: 150%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.62),
            transparent
        );

    filter: blur(4px);

    transform:
        translateX(-180%)
        rotate(12deg);

    animation:
        experience-light-pass
        1.25s
        0.35s
        ease-out
        1;
}


/* =========================================================
   THEME HOOKS
   ========================================================= */

[data-experience-theme="rustic"] {
    --experience-accent: #8b5a32;
    --experience-glow: rgba(139, 90, 50, 0.30);
    --experience-sparkle: #d3a15d;
}

[data-experience-theme="luxury"] {
    --experience-accent: #8a6a22;
    --experience-glow: rgba(183, 148, 61, 0.30);
    --experience-sparkle: #e5c66d;
}

[data-experience-theme="playful"] {
    --experience-accent: #7c3aed;
    --experience-glow: rgba(124, 58, 237, 0.28);
    --experience-sparkle: #f8b4d9;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    [data-experience-root],
    .product-image,
    .product-card.experience-glow,
    .experience-sparkle,
    .experience-light-sweep::before {
        animation: none !important;
    }

    [data-experience-root],
    .product-image {
        opacity: 1;
        transform: none;
    }
}


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes experience-page-arrive {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes experience-image-arrive {
    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}

@keyframes experience-card-glow {
    0% {
        box-shadow:
            0 5px 18px
            rgba(15, 23, 42, 0.06);
    }

    40% {
        box-shadow:
            0 20px 55px
            var(--experience-glow);
    }

    100% {
        box-shadow:
            0 5px 18px
            rgba(15, 23, 42, 0.06);
    }
}

@keyframes experience-sparkle {
    0%,
    100% {
        opacity: 0;

        transform:
            scale(0.25)
            rotate(0deg);
    }

    45% {
        opacity: 1;
    }

    65% {
        opacity: 0.82;

        transform:
            scale(1)
            rotate(45deg);
    }
}

@keyframes experience-light-pass {
    from {
        transform:
            translateX(-180%)
            rotate(12deg);
    }

    to {
        transform:
            translateX(650%)
            rotate(12deg);
    }
}