/*=======================================================
    HOORATOOR — PREMIUM MOTION LAYER
    Additive animation stylesheet.
    Loaded AFTER all existing stylesheets.

    Rules of engagement:
    - Never changes color, spacing, typography, layout.
    - Only adds transitions/animations/timing refinements.
    - All scroll-reveal effects are opt-in via classes that
      are added dynamically by JS/animations.js, so if JS
      is ever disabled, every element remains fully visible
      (no opacity:0 baked into raw selectors).
=======================================================*/

:root {
    --hr-ease: cubic-bezier(.22, .61, .36, 1);
    --hr-ease-soft: cubic-bezier(.16, .84, .44, 1);
    --hr-fast: .25s;
    --hr-med: .5s;
    --hr-slow: .8s;
}

/* Smooth in-page scrolling (anchors, etc.) */
html {
    scroll-behavior: smooth;
}

/*=======================================================
    SCROLL REVEAL (classes injected by animations.js)
=======================================================*/

.hr-reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity var(--hr-slow) var(--hr-ease-soft),
        transform var(--hr-slow) var(--hr-ease-soft);
    will-change: opacity, transform;
}

.hr-reveal-left {
    opacity: 0;
    transform: translateX(-38px);
    transition: opacity var(--hr-slow) var(--hr-ease-soft),
        transform var(--hr-slow) var(--hr-ease-soft);
    will-change: opacity, transform;
}

.hr-reveal-right {
    opacity: 0;
    transform: translateX(38px);
    transition: opacity var(--hr-slow) var(--hr-ease-soft),
        transform var(--hr-slow) var(--hr-ease-soft);
    will-change: opacity, transform;
}

.hr-reveal-zoom {
    opacity: 0;
    transform: scale(.94);
    transition: opacity var(--hr-slow) var(--hr-ease-soft),
        transform var(--hr-slow) var(--hr-ease-soft);
    will-change: opacity, transform;
}

.hr-reveal.hr-in,
.hr-reveal-left.hr-in,
.hr-reveal-right.hr-in,
.hr-reveal-zoom.hr-in {
    opacity: 1;
    transform: none;
}

/*=======================================================
    PREMIUM CARD LIFT / SCALE REFINEMENTS
    (existing lift kept, subtle scale layered on top)
=======================================================*/

.product-card,
.collection-card,
.feature-card,
.review-card,
.policy-card,
.promise-card {
    transition: transform .45s var(--hr-ease), box-shadow .45s var(--hr-ease) !important;
}

.product-card:hover {
    transform: translateY(-10px) scale(1.015) !important;
}

.collection-card:hover {
    transform: translateY(-6px) scale(1.012) !important;
}

.feature-card:hover,
.review-card:hover,
.policy-card:hover,
.promise-card:hover {
    transform: translateY(-8px) scale(1.015) !important;
}

/* Product image zoom gets a touch more luxurious easing */
.product-image img,
.collection-card img {
    transition: transform .65s var(--hr-ease) !important;
}

.product-hover-actions {
    transition: bottom .45s var(--hr-ease) !important;
}

/*=======================================================
    BUTTON "SHEEN" SWEEP
    A soft diagonal light sweep on hover — subtle luxury
    cue, does not alter size, color or spacing.
=======================================================*/

.hero-btn,
.quick-add-btn,
.collection-btn,
.write-review-btn,
.cart-checkout-btn,
.cart-continue-btn,
.contact-submit,
.checkout-place-order,
.add-cart,
.buy-now {
    position: relative;
    overflow: hidden;
    transition-property: transform, background, color, box-shadow, border-color;
    transition-duration: .4s;
    transition-timing-function: var(--hr-ease);
}

.hero-btn::before,
.quick-add-btn::before,
.collection-btn::before,
.write-review-btn::before,
.cart-checkout-btn::before,
.cart-continue-btn::before,
.contact-submit::before,
.checkout-place-order::before,
.add-cart::before,
.buy-now::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(115deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .35) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg);
    pointer-events: none;
    transition: left .65s var(--hr-ease);
}

.hero-btn:hover::before,
.quick-add-btn:hover::before,
.collection-btn:hover::before,
.write-review-btn:hover::before,
.cart-checkout-btn:hover::before,
.cart-continue-btn:hover::before,
.contact-submit:hover::before,
.checkout-place-order:hover::before,
.add-cart:hover::before,
.buy-now:hover::before {
    left: 130%;
}

.hero-btn:hover,
.write-review-btn:hover,
.add-cart:hover,
.buy-now:hover {
    transform: translateY(-2px);
}

.quick-add-btn:hover,
.collection-btn:hover {
    transform: translateY(-1px);
}

/*=======================================================
    LINKS, ICONS & MISC HOVER POLISH
=======================================================*/

.footer-column ul li a {
    display: inline-block;
    transition: color .3s ease, transform .3s var(--hr-ease), padding-left .3s var(--hr-ease);
}

.footer-column ul li a:hover {
    transform: translateX(4px);
}

.footer-socials a {
    transition: transform .35s var(--hr-ease), background .3s ease, color .3s ease;
}

.footer-socials a:hover {
    transform: translateY(-4px) rotate(8deg);
}

.cart-icon {
    transition: transform .3s var(--hr-ease);
}

.cart-icon:hover {
    transform: translateY(-2px) scale(1.06);
}

.search-icon-btn {
    transition: transform .3s var(--hr-ease);
}

.search-icon-btn:hover {
    /* base button is vertically centered with translateY(-50%);
       keep that and only add a subtle scale on top of it,
       otherwise the icon drops out of its centered position */
    transform: translateY(-50%) scale(1.08);
}

.hamburger {
    transition: transform .3s var(--hr-ease);
}

.hamburger:hover {
    transform: scale(1.1);
}

.dot {
    transition: width .35s var(--hr-ease), background .35s ease, transform .3s var(--hr-ease);
}

.dot:hover {
    transform: scale(1.15);
}

.gallery-btn {
    transition: transform .3s var(--hr-ease), background .3s ease, color .3s ease !important;
}

.gallery-btn:hover {
    transform: scale(1.1) !important;
}

.product-thumb {
    transition: transform .3s var(--hr-ease), border-color .25s ease !important;
}

.product-thumb:hover {
    transform: translateY(-3px) !important;
}

.journey-number,
.policy-icon,
.promise-icon,
.feature-icon {
    transition: transform .45s var(--hr-ease);
}

.journey-item:hover .journey-number,
.policy-card:hover .policy-icon,
.promise-card:hover .promise-icon,
.feature-card:hover .feature-icon {
    transform: scale(1.1) rotate(-4deg);
}

/*=======================================================
    CATEGORIES DROPDOWN — ELEGANT OPEN / CLOSE
=======================================================*/

/* Desktop hover dropdown: graceful scale + fade, and a
   deferred visibility so the fade-out actually gets seen
   instead of the menu vanishing instantly. */
@media (min-width: 993px) {

    .dropdown-menu {
        transform-origin: top left;
        transition: opacity .45s var(--hr-ease-soft),
            transform .45s var(--hr-ease-soft),
            visibility 0s linear .45s !important;
        transform: translateY(10px) scale(.96) !important;
    }

    .dropdown:hover .dropdown-menu {
        transition: opacity .45s var(--hr-ease-soft),
            transform .45s var(--hr-ease-soft),
            visibility 0s linear 0s !important;
        transform: translateY(0) scale(1) !important;
    }

    /* Stagger each item in as the menu opens */
    .dropdown-menu li {
        opacity: 0;
        transform: translateY(6px);
        transition: opacity .35s ease, transform .35s ease;
    }

    .dropdown-menu li:nth-child(1) {
        transition-delay: .05s;
    }

    .dropdown-menu li:nth-child(2) {
        transition-delay: .1s;
    }

    .dropdown-menu li:nth-child(3) {
        transition-delay: .15s;
    }

    .dropdown-menu li:nth-child(4) {
        transition-delay: .2s;
    }

    .dropdown:hover .dropdown-menu li {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile / tablet accordion: smoother curve + gentle fade
   of the revealed links instead of a flat height snap. */
@media (max-width: 1030px) {

    header .navbar .nav-links .dropdown-menu {
        transition: max-height .5s var(--hr-ease-soft) !important;
    }

    header .navbar .nav-links .dropdown-menu li {
        opacity: 0;
        transform: translateY(-4px);
        transition: opacity .35s ease, transform .35s ease;
    }

    header .navbar .nav-links li.dropdown.mobile-open .dropdown-menu li {
        opacity: 1;
        transform: translateY(0);
    }

    header .navbar .nav-links li.dropdown.mobile-open .dropdown-menu li:nth-child(1) {
        transition-delay: .08s;
    }

    header .navbar .nav-links li.dropdown.mobile-open .dropdown-menu li:nth-child(2) {
        transition-delay: .14s;
    }

    header .navbar .nav-links li.dropdown.mobile-open .dropdown-menu li:nth-child(3) {
        transition-delay: .2s;
    }

    header .navbar .nav-links li.dropdown.mobile-open .dropdown-menu li:nth-child(4) {
        transition-delay: .26s;
    }

    header .navbar .nav-links .dropdown-arrow {
        transition: transform .45s var(--hr-ease-soft) !important;
    }
}

/* Mobile nav drawer + search drawer + cart drawer:
   refine easing only, values/positions untouched */
.nav-links {
    transition: left .45s var(--hr-ease-soft) !important;
}

.search-box,
.cart-drawer {
    transition-timing-function: var(--hr-ease-soft) !important;
}

.cart-overlay,
.search-overlay {
    transition: opacity .4s var(--hr-ease-soft), visibility .4s var(--hr-ease-soft) !important;
}

/*=======================================================
    REDUCED MOTION — respect user preference
=======================================================*/

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

    html {
        scroll-behavior: auto;
    }

    .hr-reveal,
    .hr-reveal-left,
    .hr-reveal-right,
    .hr-reveal-zoom {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    * {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}