/* Tailwind handles the site layout. Only tiny reusable pieces live here. */
html { scroll-behavior: smooth; }
.social-pill {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.08);
    font-weight: 800;
    transition: transform .18s ease, background-color .18s ease;
}
.social-pill:hover { transform: translateY(-2px); background: rgba(255,255,255,.16); }


/* =========================================================
   ORDER SUCCESS ANIMATION
========================================================= */

.order-confirmed-card {
    opacity: 0;
    transform: translateY(16px) scale(0.985);
    animation: orderConfirmedCardIn 0.65s cubic-bezier(.22, 1, .36, 1) forwards;
}

.order-confirmed-check {
    opacity: 0;
    transform: scale(0.45) rotate(-10deg);
    animation: orderConfirmedCheckIn 0.55s cubic-bezier(.34, 1.56, .64, 1) 0.22s forwards;
}

.order-confirmed-check::before {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: 9999px;
    border: 1px solid rgba(190, 242, 100, 0.35);
    opacity: 0;
    transform: scale(0.7);
    animation: orderConfirmedRing 0.8s ease-out 0.45s forwards;
}

.order-confirmed-check svg {
    width: 26px;
    height: 26px;
}

.order-confirmed-check-path {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    animation: orderConfirmedDraw 0.45s ease-out 0.62s forwards;
}

.order-confirmed-label,
.order-confirmed-title,
.order-confirmed-description,
.order-confirmed-number {
    opacity: 0;
    transform: translateY(8px);
    animation: orderConfirmedTextIn 0.48s ease-out forwards;
}

.order-confirmed-label {
    animation-delay: 0.52s;
}

.order-confirmed-title {
    animation-delay: 0.62s;
}

.order-confirmed-description {
    animation-delay: 0.72s;
}

.order-confirmed-number {
    animation-delay: 0.82s;
}


/* subtle success glow */
.order-confirmed-glow {
    opacity: 0;
    transform: scale(0.5);
    animation: orderConfirmedGlow 1.2s ease-out 0.25s forwards;
}


@keyframes orderConfirmedCardIn {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes orderConfirmedCheckIn {
    to {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

@keyframes orderConfirmedRing {
    0% {
        opacity: 0;
        transform: scale(0.65);
    }

    35% {
        opacity: 0.65;
    }

    100% {
        opacity: 0;
        transform: scale(1.45);
    }
}

@keyframes orderConfirmedDraw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes orderConfirmedTextIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes orderConfirmedGlow {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    45% {
        opacity: 0.45;
    }

    100% {
        opacity: 0.12;
        transform: scale(1.15);
    }
}


/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .order-confirmed-card,
    .order-confirmed-check,
    .order-confirmed-check::before,
    .order-confirmed-check-path,
    .order-confirmed-label,
    .order-confirmed-title,
    .order-confirmed-description,
    .order-confirmed-number,
    .order-confirmed-glow {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        stroke-dashoffset: 0 !important;
    }
}


/* =========================================================
   HOME HERO ANIMATION
========================================================= */

#hero-section [data-hero-item] {
    opacity: 0;
    transform: translateY(16px);
    animation: hayatHeroReveal 0.7s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: var(--hero-delay, 0ms);
}

#hero-section [data-hero-item="pop"] {
    transform: translateY(12px) scale(0.95);
    animation-name: hayatHeroPop;
}

@keyframes hayatHeroReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes hayatHeroPop {
    0% {
        opacity: 0;
        transform: translateY(12px) scale(0.95);
    }

    70% {
        opacity: 1;
        transform: translateY(0) scale(1.015);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* =========================================================
   SCROLL REVEAL
========================================================= */

html.scroll-reveal-enabled [data-scroll-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.7s cubic-bezier(.22, 1, .36, 1),
        transform 0.7s cubic-bezier(.22, 1, .36, 1);

    transition-delay: var(--reveal-delay, 0ms);

    will-change: opacity, transform;
}

html.scroll-reveal-enabled [data-scroll-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
}


/* Product cards get a slightly stronger entrance */
html.scroll-reveal-enabled
[data-reveal-group="products"] {
    transform: translateY(30px) scale(0.985);
}

html.scroll-reveal-enabled
[data-reveal-group="products"].is-revealed {
    transform: translateY(0) scale(1);
}


/* Trust cards */
html.scroll-reveal-enabled
[data-reveal-group="trust"] {
    transform: translateY(20px) scale(0.97);
}

html.scroll-reveal-enabled
[data-reveal-group="trust"].is-revealed {
    transform: translateY(0) scale(1);
}


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

@media (prefers-reduced-motion: reduce) {

    #hero-section [data-hero-item],
    html.scroll-reveal-enabled [data-scroll-reveal],
    html.scroll-reveal-enabled [data-reveal-group="products"],
    html.scroll-reveal-enabled [data-reveal-group="trust"] {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
}


/* =========================================================
   PRODUCT SCROLL REVEAL
========================================================= */

html.scroll-reveal-enabled .product-scroll-card {
    opacity: 0;
    transform: translateY(24px) scale(.99);
    transition:
        opacity .65s cubic-bezier(.22, 1, .36, 1),
        transform .65s cubic-bezier(.22, 1, .36, 1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

html.scroll-reveal-enabled .product-scroll-card.is-revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/*
 * Keep the image/content panels fixed.
 * Only animate elements inside them so no background gap appears.
 */
html.scroll-reveal-enabled
.product-scroll-card [data-product-reveal="image"],
html.scroll-reveal-enabled
.product-scroll-card [data-product-reveal="content"] {
    opacity: 1;
    transform: none;
}

/* Animate the actual product image */
html.scroll-reveal-enabled
.product-scroll-card [data-product-reveal="image"] img {
    opacity: 0;
    transform: translateY(12px) scale(.96);
    transition:
        opacity .6s cubic-bezier(.22, 1, .36, 1),
        transform .75s cubic-bezier(.22, 1, .36, 1);
}

/* Animate the content children */
html.scroll-reveal-enabled
.product-scroll-card [data-product-reveal="content"] > * {
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity .55s cubic-bezier(.22, 1, .36, 1),
        transform .55s cubic-bezier(.22, 1, .36, 1);
}

/* Revealed image */
html.scroll-reveal-enabled
.product-scroll-card.is-revealed
[data-product-reveal="image"] img {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: calc(var(--reveal-delay, 0ms) + 70ms);
}

/* Revealed content */
html.scroll-reveal-enabled
.product-scroll-card.is-revealed
[data-product-reveal="content"] > * {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger content inside each product card */
html.scroll-reveal-enabled
.product-scroll-card.is-revealed
[data-product-reveal="content"] > *:nth-child(1) {
    transition-delay: calc(var(--reveal-delay, 0ms) + 90ms);
}

html.scroll-reveal-enabled
.product-scroll-card.is-revealed
[data-product-reveal="content"] > *:nth-child(2) {
    transition-delay: calc(var(--reveal-delay, 0ms) + 130ms);
}

html.scroll-reveal-enabled
.product-scroll-card.is-revealed
[data-product-reveal="content"] > *:nth-child(3) {
    transition-delay: calc(var(--reveal-delay, 0ms) + 170ms);
}

html.scroll-reveal-enabled
.product-scroll-card.is-revealed
[data-product-reveal="content"] > *:nth-child(4) {
    transition-delay: calc(var(--reveal-delay, 0ms) + 210ms);
}

html.scroll-reveal-enabled
.product-scroll-card.is-revealed
[data-product-reveal="content"] > *:nth-child(5) {
    transition-delay: calc(var(--reveal-delay, 0ms) + 250ms);
}

html.scroll-reveal-enabled
.product-scroll-card.is-revealed
[data-product-reveal="content"] > *:nth-child(6) {
    transition-delay: calc(var(--reveal-delay, 0ms) + 290ms);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    html.scroll-reveal-enabled .product-scroll-card,
    html.scroll-reveal-enabled .product-scroll-card [data-product-reveal],
    html.scroll-reveal-enabled .product-scroll-card [data-product-reveal="image"] img,
    html.scroll-reveal-enabled .product-scroll-card [data-product-reveal="content"] > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* =========================================================
   PRODUCT PAGE LOAD ANIMATION
========================================================= */

.product-page-card {
    opacity: 0;
    transform: translateY(16px) scale(.99);
    animation: productPageCardIn .7s cubic-bezier(.22, 1, .36, 1) .05s forwards;
}

.product-page-image {
    opacity: 0;
    transform: translateY(14px) scale(.94);
    animation: productPageImageIn .85s cubic-bezier(.22, 1, .36, 1) .18s forwards;
}

.product-page-content > * {
    opacity: 0;
    transform: translateY(12px);
    animation: productPageContentIn .65s cubic-bezier(.22, 1, .36, 1) forwards;
}

.product-page-content > *:nth-child(1) { animation-delay: .20s; }
.product-page-content > *:nth-child(2) { animation-delay: .28s; }
.product-page-content > *:nth-child(3) { animation-delay: .36s; }
.product-page-content > *:nth-child(4) { animation-delay: .44s; }
.product-page-content > *:nth-child(5) { animation-delay: .52s; }
.product-page-content > *:nth-child(6) { animation-delay: .60s; }

@keyframes productPageCardIn {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes productPageImageIn {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes productPageContentIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-page-card,
    .product-page-image,
    .product-page-content > * {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}


/* =========================================================
   PLACE ORDER BUTTON HIGHLIGHT
========================================================= */

.product-place-order-btn {
    isolation: isolate;
}

.product-place-order-btn::before {
    content: "";
    position: absolute;
    top: -30%;
    bottom: -30%;
    left: -55%;
    width: 38%;
    transform: skewX(-22deg);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(217, 249, 157, .12),
        rgba(255, 255, 255, .78),
        rgba(103, 232, 249, .18),
        transparent
    );
    filter: blur(1px);
    pointer-events: none;
    animation: productOrderSweep 2.0s linear 1s infinite;
}

.product-place-order-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        rgba(190, 242, 100, 0),
        rgba(190, 242, 100, .10),
        rgba(94, 234, 212, .08),
        rgba(190, 242, 100, 0)
    );
    opacity: 0;
    pointer-events: none;
    animation: productOrderGlow 3.6s ease-in-out 1s infinite;
}

@keyframes productOrderSweep {
    0%, 28% {
        left: -55%;
        opacity: 0;
    }

    32% {
        opacity: 1;
    }

    78% {
        left: 120%;
        opacity: 1;
    }

    82%, 100% {
        left: 120%;
        opacity: 0;
    }
}

@keyframes productOrderGlow {
    0%, 28%, 84%, 100% {
        opacity: 0;
    }

    38%, 72% {
        opacity: 1;
    }
}


/* =========================================================
   PRODUCT DESCRIPTION SCROLL REVEAL
========================================================= */

html.product-scroll-enabled #product-description > * {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity .8s cubic-bezier(.22, 1, .36, 1),
        transform .8s cubic-bezier(.22, 1, .36, 1);
    transition-delay: var(--product-scroll-delay, 0ms);
    will-change: opacity, transform;
}

html.product-scroll-enabled #product-description > *.is-product-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Alternate subtle direction on desktop */
@media (min-width: 768px) {
    html.product-scroll-enabled #product-description > *:nth-child(even) {
        transform: translateY(24px) translateX(12px);
    }

    html.product-scroll-enabled #product-description > *:nth-child(odd) {
        transform: translateY(24px) translateX(-12px);
    }

    html.product-scroll-enabled #product-description > *.is-product-revealed {
        transform: translateY(0) translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    html.product-scroll-enabled #product-description > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}