/* ==========================================================================
   Motion layer — loaded after the component styles.
   All of it is neutralised by the prefers-reduced-motion rule in storefront.css,
   and scroll reveals only apply once animations.js has tagged an element.
   ========================================================================== */

/* ---------- Scroll reveal ------------------------------------------------- */
.js-motion [data-reveal] {
    transition: opacity .75s var(--ease) var(--reveal-delay, 0ms), transform .9s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms) !important;
}
.js-motion [data-reveal]:not(.in-view) { opacity: 0; transform: translate3d(0, 34px, 0); }
.js-motion [data-reveal="zoom"]:not(.in-view) { transform: translate3d(0, 24px, 0) scale(.965); }
.js-motion [data-reveal="fade"]:not(.in-view) { transform: translate3d(0, 10px, 0); }

/* ---------- Sticky, glassy header ----------------------------------------- */
.site-header { position: sticky; top: 0; transition: box-shadow .35s var(--ease), background .35s; }
.site-header::before { /* blur lives on a pseudo so the fixed mobile drawer inside keeps the viewport as containing block */
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
    opacity: 0; transition: opacity .35s var(--ease);
}
.site-header.is-scrolled { background: transparent; box-shadow: 0 12px 34px rgba(17, 17, 17, .07); }
.site-header.is-scrolled::before { opacity: 1; }
.header-main { transition: min-height .4s var(--ease); }
.site-header .brand-logo img { transition: height .4s var(--ease); }
.header-main { transition: min-height .4s var(--ease), padding .4s var(--ease); }
.site-header.is-scrolled .header-main { min-height: 52px; padding-top: 5px; padding-bottom: 8px; }
.site-header.is-scrolled .brand-logo img { height: 34px; }
@media (min-width: 992px) {
    .site-header.is-scrolled .header-main { min-height: 78px; padding-top: 0; padding-bottom: 0; }
    .site-header.is-scrolled .brand-logo img { height: 52px; }
}

/* ---------- Gold buttons: light sweep ------------------------------------- */
.btn-gold { position: relative; overflow: hidden; isolation: isolate; }
.btn-gold::before {
    content: ""; position: absolute; top: -10%; bottom: -10%; left: -75%; width: 50%; z-index: -1; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-22deg);
    transition: left .75s var(--ease);
}
.btn-gold:hover::before { left: 135%; }
.btn-gold:active { transform: translateY(0) scale(.98); }

/* ---------- Hero ---------------------------------------------------------- */
.hero-slide.is-active .hero-content > * { animation: hero-rise 1s cubic-bezier(.16, 1, .3, 1) both; }
.hero-slide.is-active .hero-content > :nth-child(1) { animation-delay: .05s; }
.hero-slide.is-active .hero-content > :nth-child(2) { animation-delay: .17s; }
.hero-slide.is-active .hero-content > :nth-child(3) { animation-delay: .29s; }
.hero-slide.is-active .hero-content > :nth-child(4) { animation-delay: .41s; }
.hero-slide.is-active .hero-content > :nth-child(5) { animation-delay: .53s; }
.hero-title span {
    background-image: linear-gradient(100deg, #D9B064 0%, #F3D58C 30%, #FFF4D2 40%, #F3D58C 50%, #D9B064 75%, #D9B064 100%);
    background-size: 220% auto; animation: gold-shimmer 7s linear infinite;
}
.hero-content { translate: calc(var(--px, 0px) * -.35) calc(var(--py, 0px) * -.35); transition: translate .8s cubic-bezier(.16, 1, .3, 1); }
.hero-media { translate: var(--px, 0px) var(--py, 0px); transition: translate .8s cubic-bezier(.16, 1, .3, 1); }
.hero-slide.is-active .hero-media { animation: hero-media-in 1.3s cubic-bezier(.16, 1, .3, 1) both; }
.hero-slide.is-active .hero-badge { animation: badge-in .9s .55s cubic-bezier(.34, 1.56, .64, 1) both, badge-float 5.5s 1.5s ease-in-out infinite; }
.hero-badge::after { /* rotating gold sheen on the ring */
    content: ""; position: absolute; inset: -2px; border-radius: 50%; pointer-events: none;
    background: conic-gradient(from 0deg, transparent 0 70%, rgba(243, 213, 140, .9) 80%, transparent 90%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    animation: spin 6s linear infinite;
}
.hero-slide.is-active::after { /* slow drifting vapour behind the copy */
    content: ""; position: absolute; inset: -25%; z-index: -2; pointer-events: none;
    background:
        radial-gradient(28% 22% at 28% 62%, rgba(255, 238, 210, .09), transparent 70%),
        radial-gradient(22% 18% at 48% 30%, rgba(255, 226, 180, .07), transparent 70%),
        radial-gradient(30% 20% at 15% 25%, rgba(255, 245, 230, .05), transparent 70%);
    filter: blur(18px); animation: vapour-drift 24s ease-in-out infinite alternate;
}
.hero-particles {
    position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .55;
    background-image: radial-gradient(circle, rgba(243, 213, 140, .95) 0 1.2px, transparent 1.8px), radial-gradient(circle, rgba(255, 255, 255, .5) 0 .9px, transparent 1.4px);
    background-size: 130px 150px, 130px 150px; background-position: 0 0, 65px 75px;
    -webkit-mask-image: linear-gradient(90deg, transparent 38%, #000 75%), linear-gradient(0deg, transparent, #000 30%, #000 70%, transparent);
    -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 38%, #000 75%), linear-gradient(0deg, transparent, #000 30%, #000 70%, transparent); mask-composite: intersect;
    animation: particles-rise 16s linear infinite, particles-twinkle 4s ease-in-out infinite alternate;
}
.hero.is-autoplay .hero-dots button.is-active { width: 34px; background: rgba(255, 255, 255, .25); box-shadow: none; position: relative; overflow: hidden; }
.hero.is-autoplay .hero-dots button.is-active::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--color-primary-light);
    transform-origin: left center; animation: dot-fill 6.5s linear forwards;
}
.hero.is-paused .hero-dots button.is-active::after { animation-play-state: paused; }
.hero-arrow { transition: transform .3s var(--ease), background .25s, box-shadow .3s; }
.hero-arrow:hover { box-shadow: 0 0 0 6px rgba(243, 213, 140, .25), 0 8px 22px rgba(0, 0, 0, .3); }

/* ---------- Cards: 3D tilt + glare ---------------------------------------- */
.has-tilt::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 3; pointer-events: none; opacity: 0;
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .55), transparent 55%);
    mix-blend-mode: soft-light; transition: opacity .35s var(--ease);
}
.has-tilt:hover::before { opacity: 1; }
.product-card.has-tilt:hover { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); }
.category-card.has-tilt:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); }
.promo-card.has-tilt:hover { transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-5px); }

/* Promo cards: diagonal light sweep */
.promo-card::after {
    content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%; z-index: 1; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent); transform: skewX(-20deg); transition: left 1s var(--ease);
}
.promo-card:hover::after { left: 130%; }
.promo-discount { animation: badge-float 4.5s ease-in-out infinite; }

/* ---------- Ambient floats ------------------------------------------------ */
.feature-banner-media, .newsletter-media { animation: float-y 7s ease-in-out infinite; }
.feature-item { transition: transform .35s var(--ease), border-color .35s, background .35s; }
.feature-item:hover { transform: translateX(-6px); border-color: var(--color-primary-light); background: rgba(30, 26, 20, .75); }
.feature-item .feature-icon { transition: transform .5s var(--ease), background .3s, color .3s; }
.feature-item:hover .feature-icon { transform: rotate(-12deg) scale(1.08); background: var(--gold-gradient); color: #fff; border-color: transparent; }
.section-head-icon.icon { transform-origin: 50% 90%; }
#best-sellers .section-head-icon, [aria-labelledby="sec-best-sellers"] .section-head-icon { animation: flicker 2.6s ease-in-out infinite; }
.benefit-icon { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), color .3s, box-shadow .3s; }
.benefit:hover .benefit-icon { transform: translateY(-5px) rotate(-8deg); color: var(--color-primary); box-shadow: 0 12px 24px rgba(184, 138, 53, .22); }
.brand-card .brand-wordmark { transition: color .3s, letter-spacing .4s var(--ease); }
.brand-card:hover .brand-wordmark { letter-spacing: .06em; }
.socials a:hover .icon { animation: wiggle .5s ease; }

/* ---------- Cart / wishlist feedback -------------------------------------- */
.fly-ghost { position: fixed; z-index: 500; pointer-events: none; object-fit: contain; background: #fff; border-radius: 14px; box-shadow: 0 20px 50px rgba(17, 17, 17, .25); }
.cart-icon.is-bump { animation: cart-bump .6s cubic-bezier(.34, 1.56, .64, 1); }
.cart-icon.is-bump .count { animation: count-pop .6s cubic-bezier(.34, 1.56, .64, 1); }
.wishlist-lg { position: relative; }
.wishlist-btn.is-burst .icon, .wishlist-lg.is-burst .icon { animation: heart-pop .6s cubic-bezier(.34, 1.56, .64, 1); }
.wishlist-btn.is-burst::after, .wishlist-lg.is-burst::after {
    content: ""; position: absolute; inset: -2px; border-radius: 50%; pointer-events: none;
    border: 2px solid var(--color-danger); animation: ring-out .6s ease-out forwards;
}
.wishlist-btn.is-burst::before, .wishlist-lg.is-burst::before { /* sparkle dots */
    content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; border-radius: 50%; pointer-events: none;
    box-shadow: 0 -20px 0 var(--color-danger), 17px -10px 0 var(--color-primary), 17px 10px 0 var(--color-danger), 0 20px 0 var(--color-primary), -17px 10px 0 var(--color-danger), -17px -10px 0 var(--color-primary);
    animation: sparkle .6s ease-out forwards;
}

/* ---------- Back-to-top progress ring ------------------------------------- */
.back-to-top .btt-ring { position: absolute; inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); transform: rotate(-90deg); pointer-events: none; }
.back-to-top .btt-ring circle { fill: none; stroke: var(--color-primary); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .15s linear; }
.back-to-top:hover .icon { animation: nudge-up .6s ease infinite; }

/* ---------- 3D vape smoke canvases (smoke.js) ----------------------------- */
.smoke-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; animation: smoke-in 1.6s ease both; }
/* Phones: copy sits above the photo, so smoke fades in from the top. Desktop: copy is on the left. */
.hero .smoke-canvas { z-index: 2; }
.hero .smoke-canvas, .feature-banner .smoke-canvas { -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.3) 20%, #000 60%); mask-image: linear-gradient(180deg, rgba(0,0,0,.3) 20%, #000 60%); }
@media (min-width: 992px) {
    .hero .smoke-canvas { -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.45) 25%, #000 48%); mask-image: linear-gradient(90deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.45) 25%, #000 48%); }
    .feature-banner .smoke-canvas { -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.3) 10%, #000 36%, #000 88%, rgba(0,0,0,.4)); mask-image: linear-gradient(90deg, rgba(0,0,0,.3) 10%, #000 36%, #000 88%, rgba(0,0,0,.4)); }
}
.newsletter .smoke-canvas { -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.2) 30%, #000 70%); mask-image: linear-gradient(90deg, rgba(0,0,0,.2) 30%, #000 70%); }
/* Keep copy crisp when thicker smoke drifts across it */
.hero-content, .feature-banner > div:not(.feature-banner-media), .newsletter h2, .newsletter p { text-shadow: 0 2px 18px rgba(0, 0, 0, .55); }
.hero-content, .feature-banner > div:not(.feature-banner-media), .feature-list, .newsletter > div:not(.newsletter-media) { position: relative; z-index: 3; }
/* Let slide children join the hero's stacking context: photo (-1) → smoke canvas (2) → copy (3).
   Inactive slides are visibility:hidden, so the active one no longer needs its own z-index. */
.hero-slide.is-active { z-index: auto; }
.site-footer { overflow: hidden; }
.footer-main, .footer-bottom { position: relative; z-index: 1; }
.age-gate-box { position: relative; z-index: 1; }
@keyframes smoke-in { from { opacity: 0; } }

/* ---------- Keyframes ----------------------------------------------------- */
@keyframes hero-rise { from { opacity: 0; transform: translateY(28px); filter: blur(8px); } }
@keyframes hero-media-in { from { opacity: 0; transform: translateX(40px) scale(1.04); } }
@keyframes badge-in { from { opacity: 0; transform: scale(.5) rotate(-25deg); } }
@keyframes badge-float { 50% { transform: translateY(-6px); } }
@keyframes gold-shimmer { to { background-position: -220% center; } }
@keyframes vapour-drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(7%, -5%, 0) scale(1.12); } }
@keyframes particles-rise { to { background-position: 0 -150px, 65px -75px; } }
@keyframes particles-twinkle { from { opacity: .35; } to { opacity: .65; } }
@keyframes dot-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes float-y { 50% { transform: translateY(-8px); } }
@keyframes flicker { 0%, 100% { transform: scale(1) rotate(0); } 30% { transform: scale(1.06, .96) rotate(-3deg); } 60% { transform: scale(.97, 1.05) rotate(2deg); } }
@keyframes wiggle { 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
@keyframes cart-bump { 30% { transform: scale(1.3) rotate(-10deg); } 60% { transform: scale(.92) rotate(6deg); } }
@keyframes count-pop { 40% { transform: scale(1.6); } }
@keyframes heart-pop { 0% { transform: scale(1); } 30% { transform: scale(.7); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes ring-out { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
@keyframes sparkle { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
@keyframes nudge-up { 50% { transform: translateY(-3px); } }