/* ===== Depth & motion layer =====
   Soft layered shadows, hover lift, image zoom, photo backdrops, scroll reveal.
   All motion is disabled for prefers-reduced-motion. */
:root{
  --ease:cubic-bezier(.22,.61,.36,1);
  --sh-1:0 1px 2px rgba(15,23,42,.05),0 4px 12px -6px rgba(15,23,42,.10);
  --sh-2:0 2px 4px rgba(15,23,42,.05),0 14px 30px -12px rgba(15,23,42,.22);
  --sh-3:0 4px 8px rgba(15,23,42,.06),0 24px 48px -18px rgba(15,23,42,.35);
  --sh-red:0 10px 24px -10px rgba(124,58,237,.55);
}

/* Header: sticky with frosted glass once the page scrolls */
.zm-header{position:sticky;top:0;transition:box-shadow .3s var(--ease)}
.zm-header .zm-main{transition:background .3s var(--ease)}
body.is-scrolled .zm-header{box-shadow:0 10px 30px -18px rgba(15,23,42,.45)}
body.is-scrolled .zm-header .zm-main{background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(1.6) blur(12px);backdrop-filter:saturate(1.6) blur(12px)}
.admin-bar .zm-header{top:32px}
.zm-leaguebar a{transition:color .2s,background .2s}
.zm-leaguebar a[data-mega]:hover{background:#fff;box-shadow:var(--sh-1)}
.zm-mega:not([hidden]){animation:zmDrop .22s var(--ease)}
@keyframes zmDrop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.zm-search{transition:box-shadow .25s var(--ease),border-color .25s}
.zm-search:focus-within{box-shadow:0 0 0 4px rgba(124,58,237,.08),var(--sh-1);border-color:#fca5a5}
.zm-bag,.zm-iconbtn--box{transition:transform .2s var(--ease),box-shadow .2s}
.zm-bag:hover,.zm-iconbtn--box:hover{transform:translateY(-1px);box-shadow:var(--sh-1)}

/* Buttons: lift + glow, light sweep on red CTAs */
.zm-btn,.zm-atc,.zm-buynow,.zm-hero__btn{transition:transform .2s var(--ease),box-shadow .25s var(--ease),background .2s}
.zm-btn:hover,.zm-atc:hover{transform:translateY(-2px)}
.zm-btn--red,.zm-atc{position:relative;overflow:hidden}
.zm-btn--red{background:linear-gradient(180deg,#ef3b3b,#d92626);box-shadow:var(--sh-red)}
.zm-btn--red:hover{box-shadow:0 14px 28px -10px rgba(124,58,237,.7)}
.zm-btn--red::after,.zm-atc::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .6s var(--ease);pointer-events:none}
.zm-btn--red:hover::after,.zm-atc:hover::after{left:120%}
.zm-atc{box-shadow:0 10px 22px -12px rgba(15,23,42,.8)}
.zm-btn--white{box-shadow:var(--sh-1)}
.zm-btn--white:hover{box-shadow:var(--sh-2)}

/* Product cards: resting shadow, lift + image zoom on hover */
.zm-card{box-shadow:var(--sh-1);border-color:#edf0f4;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.zm-card:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:transparent}
.zm-card__media img{transition:transform .6s var(--ease)}
.zm-card:hover .zm-card__media img{transform:scale(1.06)}
.zm-card__title{transition:color .2s}
.zm-card:hover .zm-card__title{color:var(--red)}
.zm-wish{transition:transform .2s var(--ease),background .2s,color .2s;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:rgba(255,255,255,.75);box-shadow:var(--sh-1)}
.zm-wish:hover{transform:scale(1.1)}
.zm-mini .img{box-shadow:var(--sh-1);transition:transform .3s var(--ease),box-shadow .3s}
.zm-mini:hover .img{transform:translateY(-3px);box-shadow:var(--sh-2)}
.zm-mini .img img{transition:transform .5s var(--ease)}
.zm-mini:hover .img img{transform:scale(1.05)}

/* Panels & tiles */
.zm-trend,.zm-benefits,.zm-filters,.zm-pricebox,.zm-bundle,.zm-eta,.zm-tabs,.zm-custom{box-shadow:var(--sh-1)}
.zm-teamtile,.zm-ltile,.zm-tier,.zm-fbt__item,.zm-teamlist a,.zm-tourgrid a{transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
.zm-teamtile:hover,.zm-fbt__item:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.zm-teamlist a:hover{transform:translateX(3px)}
.zm-ltile{box-shadow:var(--sh-2)}
.zm-ltile:hover{transform:translateY(-5px);box-shadow:var(--sh-3)}
.zm-ltile i{transition:transform .25s var(--ease),background .25s}
.zm-ltile:hover i{transform:translateX(3px);background:rgba(255,255,255,.28)}
.zm-tier:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.zm-tier .shirt svg{transition:transform .35s var(--ease)}
.zm-tier:hover .shirt svg{transform:scale(1.06) rotate(-2deg)}
.zm-swatches button{transition:border-color .15s,background .15s,box-shadow .15s,transform .15s}
.zm-swatches button:hover{transform:translateY(-1px);box-shadow:var(--sh-1)}
.zm-swatches button.is-active{box-shadow:0 0 0 3px rgba(124,58,237,.12)}
.zm-stage{box-shadow:var(--sh-1);border:0;border-radius:14px}
.zm-thumbs button{transition:transform .2s,box-shadow .2s}
.zm-thumbs button:hover{transform:translateY(-1px);box-shadow:var(--sh-1)}
.zm-chip{transition:box-shadow .2s,transform .2s}
.zm-chip:hover{box-shadow:var(--sh-1);transform:translateY(-1px)}
.zm-review{box-shadow:var(--sh-1);transition:box-shadow .25s}
.zm-review:hover{box-shadow:var(--sh-2)}

/* Photo backdrops (hero, promos, CTA) */
.has-photo{background-color:#05070d}
.zm-photo{position:absolute;inset:0;z-index:-3;overflow:hidden}
.zm-photo img{width:100%;height:100%;object-fit:cover;display:block}
.has-photo::before{background:linear-gradient(90deg,rgba(5,8,15,.9) 0%,rgba(5,8,15,.62) 36%,rgba(5,8,15,.12) 70%,rgba(5,8,15,.05) 100%),radial-gradient(70% 90% at 90% 50%,color-mix(in srgb,var(--lc,#7c3aed) 45%,transparent) 0%,transparent 65%)!important}
.has-photo::after{opacity:.05!important}
.zm-hs__slide.is-active .zm-photo img{animation:zmKen 14s ease-out both}
@keyframes zmKen{from{transform:scale(1.12)}to{transform:scale(1)}}
.zm-hs__slide.is-active .zm-hs__txt>*{animation:zmFadeUp .7s var(--ease) both}
.zm-hs__slide.is-active .zm-hs__txt>*:nth-child(2){animation-delay:.08s}
.zm-hs__slide.is-active .zm-hs__txt>*:nth-child(3){animation-delay:.16s}
.zm-hs__slide.is-active .zm-hs__txt>*:nth-child(4){animation-delay:.22s}
.zm-hs__slide.is-active .zm-hs__txt>*:nth-child(5){animation-delay:.3s}
@keyframes zmFadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.zm-hs__txt h2{text-shadow:0 6px 30px rgba(0,0,0,.45)}
.zm-hs__card{transition:transform .5s var(--ease),box-shadow .5s}
.zm-hs__slide.is-active .zm-hs__card.c1{animation:zmFloatL 6s ease-in-out 1s infinite}
.zm-hs__slide.is-active .zm-hs__card.c2{animation:zmFloatR 7s ease-in-out 1.4s infinite}
@keyframes zmFloatL{0%,100%{transform:rotate(-9deg) scale(.88) translateY(0)}50%{transform:rotate(-8deg) scale(.88) translateY(-10px)}}
@keyframes zmFloatR{0%,100%{transform:rotate(8deg) scale(.86) translateY(0)}50%{transform:rotate(7deg) scale(.86) translateY(-12px)}}
.zm-hs__card:hover{box-shadow:0 40px 70px -20px rgba(0,0,0,.7)}
.zm-promo{box-shadow:var(--sh-2);transition:transform .35s var(--ease),box-shadow .35s}
.zm-promo:hover{transform:translateY(-4px);box-shadow:var(--sh-3)}
.zm-promo .zm-photo img{transition:transform 1.2s var(--ease)}
.zm-promo:hover .zm-photo img{transform:scale(1.06)}
.zm-promo .art a{transition:transform .4s var(--ease)}
.zm-promo:hover .art a:first-child{transform:translateY(-6px) rotate(-2deg)}
.zm-promo:hover .art a:nth-child(2){transform:translateY(14px) rotate(2deg)}
.zm-cta{box-shadow:var(--sh-3)}
.zm-cta.has-photo::before{background:linear-gradient(90deg,rgba(5,8,15,.92) 0%,rgba(5,8,15,.7) 55%,rgba(127,17,17,.55) 100%)!important}

/* Scroll reveal */
.zm-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.zm-reveal.is-in{opacity:1;transform:none}

/* Section headings: small red accent bar */
.zm-sec__head .zm-h2,.zm-related .zm-h2,.zm-pdp__fbt .zm-h2{position:relative}
.zm-home .zm-sec__head .zm-h2::after{content:"";display:block;width:36px;height:3px;border-radius:2px;background:var(--red);margin-top:8px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .zm-reveal{opacity:1;transform:none}
}
@media (max-width:767px){
  .zm-card:hover{transform:none}
  .has-photo::before{background:linear-gradient(180deg,rgba(5,8,15,.6) 0%,rgba(5,8,15,.86) 55%,rgba(5,8,15,.95) 100%)!important}
}