/* Canadian Outlet — seasonal motion system
   Easing: out-expo for entrances, back-out for pops, linear for loops. */
:root{
  --m-out: cubic-bezier(.16,1,.3,1);
  --m-back: cubic-bezier(.34,1.56,.64,1);
  --m-snap: cubic-bezier(.7,0,.2,1);
}

/* ---------- core keyframes ---------- */
@keyframes m-rise{from{opacity:0;transform:translate3d(0,28px,0)}to{opacity:1;transform:none}}
@keyframes m-fade{from{opacity:0}to{opacity:1}}
@keyframes m-slam{
  0%{opacity:0;transform:translate3d(0,.35em,0) scale(1.12) skewY(5deg);filter:blur(10px)}
  55%{opacity:1;filter:blur(0)}
  75%{transform:translate3d(0,-.03em,0) scale(.99) skewY(-.5deg)}
  100%{opacity:1;transform:none}
}
@keyframes m-pop{0%{transform:scale(1)}35%{transform:scale(1.35)}70%{transform:scale(.92)}100%{transform:scale(1)}}
@keyframes m-pop2{0%{transform:scale(1)}35%{transform:scale(1.35)}70%{transform:scale(.92)}100%{transform:scale(1)}}
@keyframes m-ping{0%{transform:scale(1);opacity:.75}100%{transform:scale(2.8);opacity:0}}
@keyframes m-sweep{0%{transform:translateX(-120%) skewX(-20deg)}60%,100%{transform:translateX(320%) skewX(-20deg)}}
@keyframes m-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes m-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes m-draw{to{stroke-dashoffset:0}}
@keyframes m-scale-in{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes m-swap-a{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
@keyframes m-swap-b{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
@keyframes m-route{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes m-dash{to{stroke-dashoffset:-40}}
@keyframes m-grow-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes m-grow-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes m-spin{to{transform:rotate(360deg)}}
@keyframes m-tick{0%{transform:translateY(-35%);opacity:0}100%{transform:none;opacity:1}}

/* ---------- utility classes (shared pages) ---------- */
.m-rise{animation:m-rise .8s var(--m-out) both}
.m-fade{animation:m-fade .6s ease both}
.m-slam{display:inline-block;animation:m-slam 1s var(--m-out) both}
.m-scale-in{animation:m-scale-in .6s var(--m-back) both}
.m-float{animation:m-float 4s ease-in-out infinite}
.m-bump-a{animation:m-pop .5s var(--m-back)}
.m-bump-b{animation:m-pop2 .5s var(--m-back)}
.m-swap-a{animation:m-swap-a .55s var(--m-out) both}
.m-swap-b{animation:m-swap-b .55s var(--m-out) both}
.m-tick{display:inline-block;animation:m-tick .35s var(--m-out)}
.m-lift{transition:transform .35s var(--m-out),box-shadow .35s var(--m-out),border-color .35s}
.m-lift:hover{transform:translateY(-6px);box-shadow:0 18px 40px -18px rgba(0,0,0,.45)}
.m-press{transition:transform .15s var(--m-out),filter .2s,background-color .3s,color .3s}
.m-press:hover{filter:brightness(1.08)}
.m-press:active{transform:scale(.96)}
.m-arrow svg{transition:transform .35s var(--m-out)}
.m-arrow:hover svg{transform:translateX(5px)}
.m-live{position:relative}
.m-live::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:m-ping 1.6s var(--m-out) infinite}
.m-sheen{position:relative;overflow:hidden}
.m-sheen::after{content:"";position:absolute;top:0;bottom:0;left:0;width:30%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);animation:m-sweep 3.6s var(--m-snap) infinite;pointer-events:none}
.m-skeleton{background-size:400% 100% !important;animation:m-shimmer 2.8s linear infinite}
.m-draw{stroke-dasharray:var(--len,200);stroke-dashoffset:var(--len,200);animation:m-draw 1s var(--m-out) .25s forwards}
.m-route{offset-rotate:auto;animation:m-route 9s var(--m-snap) infinite alternate}
.m-dash{animation:m-dash 1.2s linear infinite}
.m-grow-x{transform-origin:left center;animation:m-grow-x 1.4s var(--m-out) both}
.m-grow-y{transform-origin:top center;animation:m-grow-y 1.4s var(--m-out) both}
.m-bar{transition:width .8s var(--m-out),left .5s var(--m-out),transform .5s var(--m-out),background-color .3s}

@supports (animation-timeline: view()){
  .m-reveal{animation:m-rise linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
}

/* ---------- homepages (tagged with data-theme on the root) ---------- */
[data-theme] > div:first-child{position:relative;overflow:hidden}
[data-theme] > div:first-child::after{content:"";position:absolute;top:0;bottom:0;left:0;width:22%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:m-sweep 5s var(--m-snap) 1.2s infinite;pointer-events:none}
[data-theme] header{animation:m-fade .6s ease both}
[data-theme] main > section:first-child h1 > span{display:block;animation:m-slam 1.1s var(--m-out) both}
[data-theme] main > section:first-child h1 > span:nth-child(1){animation-delay:.1s}
[data-theme] main > section:first-child h1 > span:nth-child(2){animation-delay:.28s}
[data-theme] main > section:first-child h1 ~ p{animation:m-rise .9s var(--m-out) .5s both}
[data-theme] main > section:first-child h1 ~ div{animation:m-rise .9s var(--m-out) .62s both}
[data-theme] main > section:first-child h1 + p + div a{transition:transform .3s var(--m-out),filter .2s}
[data-theme] main > section:first-child h1 + p + div a:hover{transform:translateY(-3px);filter:brightness(1.06)}
[data-theme] main > section:first-child > div > div:first-child > div:first-child{animation:m-rise .7s var(--m-out) .02s both}
[data-theme] main > section:first-child > div > div:last-child{animation:m-rise 1s var(--m-out) .45s both}
[data-theme] [role="timer"] > div{animation:m-scale-in .7s var(--m-back) both}
[data-theme] [role="timer"] > div:nth-child(1){animation-delay:.7s}
[data-theme] [role="timer"] > div:nth-child(2){animation-delay:.8s}
[data-theme] [role="timer"] > div:nth-child(3){animation-delay:.9s}
[data-theme] [role="timer"] > div:nth-child(4){animation-delay:1s}
[data-theme] [role="timer"] > div:nth-child(4) > div:first-child{animation:m-float 1s ease-in-out infinite}
[data-theme] article{animation:m-rise .8s var(--m-out) both;transition:transform .4s var(--m-out),box-shadow .4s var(--m-out)}
[data-theme] article:hover{transform:translateY(-8px);box-shadow:0 24px 48px -24px rgba(0,0,0,.5)}
[data-theme] article:nth-child(2){animation-delay:.07s}
[data-theme] article:nth-child(3){animation-delay:.14s}
[data-theme] article:nth-child(4){animation-delay:.21s}
[data-theme] article:nth-child(5){animation-delay:.28s}
[data-theme] article:nth-child(6){animation-delay:.35s}
[data-theme] article:nth-child(7){animation-delay:.42s}
[data-theme] article:nth-child(8){animation-delay:.49s}
[data-theme] article button{transition:transform .15s var(--m-out),filter .2s}
[data-theme] article button:hover{filter:brightness(1.1)}
[data-theme] article button:active{transform:scale(.96)}
[data-theme] main a[href="#"]{transition:transform .35s var(--m-out),border-color .3s}
[data-theme] main section a[href="#"]:hover{transform:translateY(-4px)}
[data-theme] main section a[href="#"] svg{transition:transform .35s var(--m-out)}
[data-theme] main section a[href="#"]:hover svg{transform:translate(3px,-3px)}
[data-theme] button[aria-pressed]{transition:background-color .3s,color .3s,transform .15s}
[data-theme] button[aria-pressed]:active{transform:scale(.95)}
@supports (animation-timeline: view()){
  [data-theme] main > section:not(:first-child) > div{animation:m-rise linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
}

/* Black Friday */
[data-theme] main > section:first-child > div > div:first-child > div:first-child > span:first-child{display:inline-block}
[data-theme="light"] main > section:first-child > div > div:first-child > div:first-child > span:first-child,
[data-theme="dark"] main > section:first-child > div > div:first-child > div:first-child > span:first-child{animation:m-pop 1.6s ease-in-out infinite}
[data-theme="light"] main > section:first-child h1 > span:nth-child(2){transform-origin:left bottom}
[data-theme="dark"] main > section:first-child h1 > span:nth-child(2){text-shadow:0 0 0 currentColor;animation:m-slam 1.1s var(--m-out) .28s both,bf-glow 3s ease-in-out 1.4s infinite}
@keyframes bf-glow{0%,100%{text-shadow:0 0 0 rgba(255,225,26,0)}50%{text-shadow:0 0 42px rgba(255,225,26,.45)}}

/* Halloween */
@keyframes hw-flap{0%,100%{transform:translateY(0) scaleY(1)}25%{transform:translateY(-10px) scaleY(.55)}50%{transform:translateY(-4px) scaleY(1)}75%{transform:translateY(-14px) scaleY(.6)}}
@keyframes hw-drift{0%{translate:0 0}50%{translate:-60px 24px}100%{translate:0 0}}
@keyframes hw-moon{0%,100%{box-shadow:0 0 80px 20px rgba(246,231,193,.16)}50%{box-shadow:0 0 120px 40px rgba(246,231,193,.30)}}
@keyframes hw-flicker{0%,19%,21%,23%,55%,57%,100%{opacity:1;text-shadow:0 0 24px rgba(255,122,26,.55)}20%,22%,56%{opacity:.35;text-shadow:none}}
@keyframes hw-rise-moon{from{transform:translateY(120px);opacity:0}to{transform:none;opacity:.9}}
[data-theme="halloween"] main > section:first-child > div[aria-hidden]{animation:hw-rise-moon 2.4s var(--m-out) both,hw-moon 5s ease-in-out 2.4s infinite}
[data-theme="halloween"] main > section:first-child > svg{animation:hw-flap .9s ease-in-out infinite,hw-drift 9s ease-in-out infinite}
[data-theme="halloween"] main > section:first-child > svg:nth-of-type(2){animation-duration:.7s,7s;animation-delay:-.3s,-2s}
[data-theme="halloween"] main > section:first-child h1 > span:nth-child(1){animation:m-slam 1.1s var(--m-out) .1s both,hw-flicker 4.5s linear 1.6s infinite}

/* Cyber Monday */
@keyframes cy-grid{from{background-position:0 0,0 0}to{background-position:0 48px,48px 0}}
@keyframes cy-glitch{
  0%,86%,100%{transform:none;text-shadow:none}
  87%{transform:translate(-4px,1px);text-shadow:3px 0 #FF3DCB,-3px 0 #00E5FF}
  89%{transform:translate(4px,-2px);text-shadow:-3px 0 #FF3DCB,3px 0 #00E5FF}
  91%{transform:translate(-2px,0) skewX(-6deg)}
  93%{transform:none}
}
@keyframes cy-stroke{0%{-webkit-text-stroke-width:0;letter-spacing:.2em;opacity:0}100%{-webkit-text-stroke-width:2px;letter-spacing:0;opacity:1}}
[data-theme="cyber"] main > section:first-child{animation:cy-grid 2.4s linear infinite}
[data-theme="cyber"] main > section:first-child h1 > span:nth-child(1){animation:cy-stroke 1.4s var(--m-out) .1s both,cy-glitch 3.8s steps(1) 1.6s infinite}
[data-theme="cyber"] main > section:first-child h1 > span:nth-child(2){animation:m-slam 1.1s var(--m-out) .35s both,cy-glitch 3.8s steps(1) 2.2s infinite}
[data-theme="cyber"] main section span[style*="dashed"]{animation:m-pop 2.4s ease-in-out infinite}

/* Christmas */
@keyframes xm-snow{from{background-position:0 0}to{background-position:30px 300px}}
@keyframes xm-gold{0%{background-position:-150% 0}100%{background-position:250% 0}}
[data-theme="christmas"] main > section:first-child{animation:xm-snow 12s linear infinite}
[data-theme="christmas"] main > section:first-child h1 > span:nth-child(2){background:linear-gradient(100deg,currentColor 40%,#FFF6D8 50%,currentColor 60%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:m-slam 1.1s var(--m-out) .28s both,xm-gold 4.5s ease-in-out 1.5s infinite}

/* Boxing Day */
@keyframes bx-stripes{from{background-position:0 0}to{background-position:240px 0}}
@keyframes bx-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
[data-theme="boxing"] main > section:first-child{animation:bx-wipe 1s var(--m-snap) both}
[data-theme="boxing"] main > section:first-child > div[aria-hidden]{animation:bx-stripes 6s linear infinite}
[data-theme="boxing"] main > section:first-child h1 > span{animation-duration:.9s}

/* New Year */
@keyframes ny-fall{0%{transform:translate3d(0,-140px,0) rotate(0)}100%{transform:translate3d(var(--dx,30px),760px,0) rotate(720deg)}}
@keyframes ny-shine{0%,100%{text-shadow:0 0 0 rgba(242,193,78,0)}50%{text-shadow:0 0 60px rgba(242,193,78,.55)}}
[data-theme="newyear"] main > section:first-child > div[aria-hidden] > span{animation:ny-fall 7s linear infinite}
[data-theme="newyear"] main > section:first-child > div[aria-hidden] > span:nth-child(2n){animation-duration:9s;--dx:-40px}
[data-theme="newyear"] main > section:first-child > div[aria-hidden] > span:nth-child(3n){animation-duration:6s;--dx:60px}
[data-theme="newyear"] main > section:first-child > div[aria-hidden] > span:nth-child(1){animation-delay:-1s}
[data-theme="newyear"] main > section:first-child > div[aria-hidden] > span:nth-child(2){animation-delay:-3s}
[data-theme="newyear"] main > section:first-child > div[aria-hidden] > span:nth-child(3){animation-delay:-5s}
[data-theme="newyear"] main > section:first-child > div[aria-hidden] > span:nth-child(4){animation-delay:-2s}
[data-theme="newyear"] main > section:first-child > div[aria-hidden] > span:nth-child(5){animation-delay:-6s}
[data-theme="newyear"] main > section:first-child > div[aria-hidden] > span:nth-child(6){animation-delay:-4s}
[data-theme="newyear"] main > section:first-child > div[aria-hidden] > span:nth-child(7){animation-delay:-.5s}
[data-theme="newyear"] main > section:first-child > div[aria-hidden] > span:nth-child(8){animation-delay:-2.5s}
[data-theme="newyear"] main > section:first-child > div[aria-hidden] > span:nth-child(9){animation-delay:-4.5s}
[data-theme="newyear"] main > section:first-child > div[aria-hidden] > span:nth-child(10){animation-delay:-3.5s}
[data-theme="newyear"] main > section:first-child h1 > span:nth-child(1){animation:m-slam 1.2s var(--m-out) .1s both,ny-shine 3.5s ease-in-out 1.4s infinite}

/* ---------- shared pages: title bands & headline treatments ---------- */
@keyframes hw-band{0%,100%{background-color:#1A0F29}50%{background-color:#23123C}}
.m-band-cyber{animation:cy-grid 2.4s linear infinite}
.m-band-christmas{animation:xm-snow 12s linear infinite}
.m-band-boxing{animation:bx-stripes 6s linear infinite}
.m-band-halloween{animation:hw-band 6s ease-in-out infinite}
.m-h1-halloween > span:first-child{animation:m-slam 1s var(--m-out) both,hw-flicker 4.5s linear 1.4s infinite}
.m-h1-cyber > span{animation:m-slam 1s var(--m-out) both,cy-glitch 3.8s steps(1) 1.6s infinite}
.m-h1-christmas > span:nth-child(2){background:linear-gradient(100deg,currentColor 40%,#FFF6D8 50%,currentColor 60%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:m-slam 1s var(--m-out) both,xm-gold 4.5s ease-in-out 1.4s infinite}
.m-h1-newyear > span:nth-child(2){animation:m-slam 1s var(--m-out) both,ny-shine 3.5s ease-in-out 1.4s infinite}
.m-h1-dark > span:nth-child(2){animation:m-slam 1s var(--m-out) both,bf-glow 3s ease-in-out 1.4s infinite}
.m-h1-boxing > span{animation-duration:.85s}

/* ---------- checkout: confirmation burst, step transitions ---------- */
@keyframes m-burst{0%{transform:translate(0,0) scale(.2) rotate(0);opacity:0}15%{opacity:1}100%{transform:translate(var(--bx),var(--by)) scale(1) rotate(var(--br,180deg));opacity:0}}
@keyframes m-ring{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes m-step-in{from{opacity:0;transform:translate3d(40px,0,0)}to{opacity:1;transform:none}}
@keyframes m-step-in2{from{opacity:0;transform:translate3d(40px,0,0)}to{opacity:1;transform:none}}
.m-burst{position:absolute;left:50%;top:50%;animation:m-burst 1.4s var(--m-out) .35s both}
.m-ring{animation:m-ring .8s var(--m-back) both}
.m-step-a{animation:m-step-in .6s var(--m-out) both}
.m-step-b{animation:m-step-in2 .6s var(--m-out) both}
.m-card3d{transition:transform .8s var(--m-out);transform-style:preserve-3d}
.m-card3d:hover{transform:rotateY(-10deg) rotateX(6deg)}

/* ---------- responsive: tablet & phone ---------- */
.m-filters-toggle{display:none}
[data-theme] header nav[aria-label="Departments"] > div{flex-wrap:nowrap !important;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
@media (max-width: 900px){
  .m-filters-toggle{display:inline-flex}
  .m-filters[data-open="false"]{display:none !important}
  .m-filters[data-open="true"]{flex-basis:100% !important;animation:m-rise .5s var(--m-out) both}
  .m-acct-nav{flex-direction:row !important;flex-basis:100% !important;overflow-x:auto;padding:8px !important;gap:4px !important;scrollbar-width:none}
  .m-acct-nav > div:first-child,.m-acct-nav > a{display:none !important}
  .m-acct-nav button{width:auto !important;flex:none;white-space:nowrap;transform:none !important}
}
@media (max-width: 640px){
  [data-theme="halloween"] main > section:first-child > div[aria-hidden]{width:130px !important;height:130px !important;right:16px !important;top:20px !important;opacity:.55}
  [data-theme="halloween"] main > section:first-child > svg{display:none}
  [data-theme="halloween"] main > section:first-child h1 > span:first-child{font-size:64px !important}
  [data-theme] [role="timer"] > div{padding-left:2px !important;padding-right:2px !important}
}
@media (max-width: 560px){
  .m-step-label:not([aria-current="step"]){display:none}
}

/* ---------- respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}