/* ═══════════════════════════════════════════════════════════════════════════
   store-motion.css — store-wide motion layer (Interaction Demo v4, 2026-10-13)
   Page transitions (layers · iris · slats, random), the top bar
   (white panel over the hero, hide on scroll down, rolling nav labels + a
   sliding underline), scroll reveal and the hero "Cinematic Split" entrance.
   Everything is driven by js/pacco-motion.js; nothing here changes layout
   until that script adds its classes, and prefers-reduced-motion turns the
   motion off.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --pmx-out:cubic-bezier(.16,1,.3,1);
  --pmx-pop:cubic-bezier(.34,1.45,.55,1);
  --pmx-ease:cubic-bezier(.22,.75,.22,1);
  --pmx-yellow:#ffc800;
}

/* ── Hand-off cover: the previous page left the screen white; keep it white
      until pacco-motion.js takes over (it fades away by itself if the script
      never runs). ─────────────────────────────────────────────────────────── */
html.pmx-pending::after{content:"";position:fixed;inset:0;z-index:2147483000;background:#fff;pointer-events:none;animation:pmxSafety .4s ease 2.6s forwards}
@keyframes pmxSafety{to{opacity:0;visibility:hidden}}

/* ── Transition overlay ────────────────────────────────────────────────── */
.pmx{position:fixed;inset:0;z-index:2147482000;pointer-events:none;visibility:hidden;overflow:hidden;contain:strict}
.pmx.on{visibility:visible;pointer-events:auto}
.pmx>*{position:absolute;inset:0;display:none}
.pmx[data-mode="layers"] .pmx-layers,.pmx[data-mode="iris"] .pmx-iris,.pmx[data-mode="slats"] .pmx-slats{display:block}
.pmx i{position:absolute;display:block}
.pmx-layers i{inset:0;will-change:clip-path}
.pmx-layers .l1{background:#e7e7ec}
.pmx-layers .l2{background:#f3f3f6}
.pmx-layers .l3{background:#fff}
.pmx-iris i{inset:0;will-change:clip-path}
.pmx-iris .ring{background:#ececf0}
.pmx-iris .core{background:#fff}
.pmx-slats i{top:-1px;bottom:-1px;transform:scaleY(0);transform-origin:50% 100%;will-change:transform}
.pmx-slats .a{background:#ededf1}
.pmx-slats .b{background:#fff;box-shadow:inset -1px 0 0 rgba(12,11,15,.04)}

/* ── Top bar ───────────────────────────────────────────────────────────── */
.site-header.pmx-bar{transition:transform .5s var(--pmx-out),background-color .3s ease,border-color .3s ease,color .08s linear}
.site-header.pmx-bar.pmx-hidden{transform:translate3d(0,-100%,0)}
/* Rolling nav labels: the label slides down, its twin slides in from above */
.pmx-bar .nav-links a{overflow:visible}
.pmx-bar .nav-links a::after{display:none !important}
.pmx-roll{position:relative;display:inline-block;overflow:hidden;vertical-align:top;line-height:1.25}
.pmx-roll>.pmx-roll-t{display:block;transition:transform .55s var(--pmx-out)}
.pmx-roll::before{content:attr(data-roll);position:absolute;left:0;top:-100%;width:100%;transition:transform .55s var(--pmx-out)}
.pmx-bar .nav-links a:hover .pmx-roll>.pmx-roll-t,.pmx-bar .nav-links a:focus-visible .pmx-roll>.pmx-roll-t{transform:translateY(100%)}
.pmx-bar .nav-links a:hover .pmx-roll::before,.pmx-bar .nav-links a:focus-visible .pmx-roll::before{transform:translateY(100%)}
@media (max-width:1023px){.pmx-bar .nav-links{position:relative}}
.pmx-navline{position:absolute;left:0;bottom:-8px;height:3px;width:0;border-radius:3px;background:var(--pmx-yellow);opacity:0;pointer-events:none;transition:transform .55s var(--pmx-out),width .55s var(--pmx-out),opacity .25s}
/* Brand mark tilts on hover */
.pmx-bar .brand-link .brand-iconbtn{transition:transform .55s var(--pmx-pop)}
.pmx-bar .brand-link:hover .brand-iconbtn{transform:rotate(-14deg) scale(1.06)}
/* Cart count pops when something lands in the bag */
#cartCount.pmx-bump{animation:pmxBump .5s var(--pmx-pop)}
@keyframes pmxBump{0%{transform:scale(1)}40%{transform:scale(1.7)}100%{transform:scale(1)}}

/* Over the hero (desktop, cinematic hero first on the page): the bar floats
   over the picture; a white panel slides down on hover / focus / scroll.
   html.pmx-overhero-pre is set by the inline head script from the cached
   slides so the first paint already has the floating bar (no jump). */
@media (min-width:901px){
  body.pmx-overhero .site-header.pmx-bar,html.pmx-overhero-pre body .site-header{position:fixed;top:0;left:0;right:0;background:transparent !important;border-bottom-color:transparent !important}
  body.pmx-overhero .site-header.pmx-bar:not(.pmx-solid),html.pmx-overhero-pre body .site-header{color:#fff}
  body.pmx-overhero .site-header.pmx-bar::before{content:"";position:absolute;inset:0;z-index:0;background:#fff;border-bottom:1px solid #ececf0;transform:translate3d(0,-101%,0);transition:transform .36s cubic-bezier(.5,0,.75,0),box-shadow .3s;will-change:transform;pointer-events:none}
  body.pmx-overhero .site-header.pmx-bar.pmx-solid::before{transform:none;box-shadow:0 16px 36px -24px rgba(0,0,0,.35);transition:transform .42s var(--pmx-out),box-shadow .4s}
  body.pmx-overhero .site-header.pmx-bar>*{position:relative;z-index:1}
  body.pmx-overhero .site-header.pmx-bar:not(.pmx-solid) .nav-links a,
  body.pmx-overhero .site-header.pmx-bar:not(.pmx-solid) .nav-actions .icon-btn,
  body.pmx-overhero .site-header.pmx-bar:not(.pmx-solid) .nav-actions .pc-btn,
  body.pmx-overhero .site-header.pmx-bar:not(.pmx-solid) .nav-actions .pc-btn *,
  html.pmx-overhero-pre body .site-header .nav-links a,
  html.pmx-overhero-pre body .site-header .nav-actions .icon-btn,
  html.pmx-overhero-pre body .site-header .nav-actions .pc-btn,
  html.pmx-overhero-pre body .site-header .nav-actions .pc-btn *{color:#fff !important;text-shadow:0 1px 14px rgba(0,0,0,.45)}
  body.pmx-overhero .site-header.pmx-bar:not(.pmx-solid) .nav-actions .icon-btn svg{filter:drop-shadow(0 1px 8px rgba(0,0,0,.35))}
  /* Only the mono "payments" glyph flips white — never the profile photo. */
  /* !important: the img carries an inline filter:contrast() that would otherwise win and leave it black. */
  body.pmx-overhero .site-header.pmx-bar:not(.pmx-solid) #pendingPaymentToggle img,html.pmx-overhero-pre body .site-header #pendingPaymentToggle img{filter:invert(1) contrast(1.35) drop-shadow(0 1px 8px rgba(0,0,0,.35)) !important}
  body.pmx-overhero .site-header.pmx-bar:not(.pmx-solid) .nav-studio-btn{background:#fff !important;color:#111 !important;border-color:#fff !important}
  /* Labels turn dark as soon as the white panel lands (it covers them in
     ~0.1s) and only go white again once the panel has slid away. */
  body.pmx-overhero .site-header.pmx-bar .nav-links a,
  body.pmx-overhero .site-header.pmx-bar .nav-actions .icon-btn,
  body.pmx-overhero .site-header.pmx-bar .nav-actions .pc-btn,
  body.pmx-overhero .site-header.pmx-bar .nav-actions .pc-btn *,
  body.pmx-overhero .site-header.pmx-bar .brand-link{transition:color .22s ease .14s,text-shadow .22s ease .14s}
  body.pmx-overhero .site-header.pmx-bar.pmx-solid .nav-links a,
  body.pmx-overhero .site-header.pmx-bar.pmx-solid .nav-actions .icon-btn,
  body.pmx-overhero .site-header.pmx-bar.pmx-solid .nav-actions .pc-btn,
  body.pmx-overhero .site-header.pmx-bar.pmx-solid .nav-actions .pc-btn *,
  body.pmx-overhero .site-header.pmx-bar.pmx-solid .brand-link{transition:color .08s linear,text-shadow .08s linear}
  body.pmx-overhero .site-header.pmx-bar .nav-studio-btn{transition:background-color .08s linear,color .08s linear,border-color .08s linear}
  /* A soft dark wash under the floating bar keeps white labels readable on bright art */
  body.pmx-overhero #heroSlider::after,html.pmx-overhero-pre body #heroSlider::after{content:"";position:absolute;left:0;right:0;top:0;height:150px;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.34),rgba(0,0,0,0))}
}

/* ── Top notices (Pacco.topToast): black pill like the rest of the v4 UI ── */
.pacco-top-toast-host{top:14px;width:min(calc(100% - 32px),440px);gap:8px}
.pacco-top-toast-host .pacco-top-toast{gap:12px;padding:8px 10px 8px 8px;border:0;border-radius:999px;background:#0c0b0f;color:#fff;font-size:14px;font-weight:700;line-height:1.3;box-shadow:0 18px 36px -16px rgba(12,11,15,.55),0 0 0 1px rgba(255,255,255,.06) inset;opacity:0;transform:translate3d(0,-18px,0) scale(.96);transition:opacity .22s ease,transform .5s var(--pmx-pop)}
.pacco-top-toast-host .pacco-top-toast--show{opacity:1;transform:none}
.pacco-top-toast-host .pacco-top-toast--hide{opacity:0;transform:translate3d(0,-12px,0) scale(.97);transition:opacity .2s ease,transform .3s ease}
.pacco-top-toast-host .pacco-top-toast-icon{width:30px;height:30px;background:rgba(255,255,255,.14);color:#fff}
.pacco-top-toast-host .pacco-top-toast-icon svg{width:16px;height:16px}
.pacco-top-toast-host .pacco-top-toast-msg{padding:0 2px}
.pacco-top-toast-host .pacco-top-toast-close{width:30px;height:30px;padding:0;border-radius:50%;color:rgba(255,255,255,.6)}
.pacco-top-toast-host .pacco-top-toast-close:hover{background:rgba(255,255,255,.14);color:#fff}
.pacco-top-toast-host .pacco-top-toast--success,.pacco-top-toast-host .pacco-top-toast--info{background:#0c0b0f;color:#fff}
.pacco-top-toast-host .pacco-top-toast--success .pacco-top-toast-icon{background:#1a9b4b;color:#fff;animation:pmxToastOk .55s var(--pmx-pop) .08s backwards}
.pacco-top-toast-host .pacco-top-toast--info .pacco-top-toast-icon{background:rgba(255,255,255,.16)}
.pacco-top-toast-host .pacco-top-toast--error{background:#0c0b0f;color:#fff}
.pacco-top-toast-host .pacco-top-toast--error .pacco-top-toast-icon{background:#e5321f;color:#fff}
.pacco-top-toast-host .pacco-top-toast--warning{background:#0c0b0f;color:#fff;border:0}
.pacco-top-toast-host .pacco-top-toast--warning .pacco-top-toast-icon{background:#ffc800;color:#0c0b0f}
.pacco-top-toast-host .pacco-top-toast--warning .pacco-top-toast-close{color:rgba(255,255,255,.6)}
.pacco-top-toast-host .pacco-top-toast--warning .pacco-top-toast-close:hover{background:rgba(255,255,255,.14);color:#fff}
@keyframes pmxToastOk{from{transform:scale(.3) rotate(-30deg);opacity:0}}
/* Phones: notices are centred on the top bar (overlapping it is fine) and keep
   the compact size — the earlier full-width pill and side placements were both
   rejected in review. */
@media (max-width:640px){
  .pacco-top-toast-host{top:14px;left:50%;right:auto;transform:translateX(-50%);width:min(calc(100% - 24px),340px);align-items:center;gap:6px}
  .pacco-top-toast-host .pacco-top-toast{gap:10px;padding:7px 9px 7px 7px;font-size:13px}
  .pacco-top-toast-host .pacco-top-toast-icon{width:26px;height:26px}
  .pacco-top-toast-host .pacco-top-toast-icon svg{width:14px;height:14px}
  .pacco-top-toast-host .pacco-top-toast-close{width:26px;height:26px}
}

/* ── Newsletter box: the first time it scrolls into view it unrolls from the
   top, then its title / divider / text / form follow in. ─────────────────── */
html.pmx-js .promo-newsletter.pmx-nl{clip-path:inset(0 0 100% 0 round var(--psb-radius,32px));transform:translate3d(0,-14px,0)}
html.pmx-js .promo-newsletter.pmx-nl :is(.nl-title,.nl-divider,.nl-desc,.nl-form-col,.nl-right,.newsletter-form,h3,p){opacity:0;transform:translate3d(0,-12px,0)}
html.pmx-js .promo-newsletter.pmx-nl .nl-divider{transform:scaleY(0)}
html.pmx-js .promo-newsletter.pmx-nl.pmx-nl-in{clip-path:inset(0 0 0% 0 round var(--psb-radius,32px));transform:none;transition:clip-path 1s var(--pmx-out),transform 1s var(--pmx-out)}
html.pmx-js .promo-newsletter.pmx-nl.pmx-nl-in :is(.nl-title,.nl-divider,.nl-desc,.nl-form-col,.nl-right,.newsletter-form,h3,p){opacity:1;transform:none;transition:opacity .6s ease,transform .8s var(--pmx-out);transition-delay:calc(var(--nl-k,0) * 90ms + 260ms)}
html.pmx-js .promo-newsletter.pmx-nl.pmx-nl-in .newsletter-btn{animation:pmxNlBtn .7s var(--pmx-pop) .7s backwards}
@keyframes pmxNlBtn{from{transform:scale(.6);opacity:0}}

/* Slow network: a small pulse on the white cover so it never looks stuck */
.pmx-wait{position:absolute;left:50%;top:50%;display:flex !important;gap:7px;transform:translate(-50%,-50%);inset:auto !important}
.pmx-wait i{position:static;width:9px;height:9px;border-radius:50%;background:#111;opacity:.18;animation:pmxPulse 1s ease-in-out infinite}
.pmx-wait i:nth-child(2){animation-delay:.15s}.pmx-wait i:nth-child(3){animation-delay:.3s}
@keyframes pmxPulse{50%{opacity:.75;transform:translateY(-4px)}}

/* ── Scroll reveal ─────────────────────────────────────────────────────── */
.pmx-rv{opacity:0;transform:translate3d(0,56px,0)}
.pmx-rv.pmx-in{opacity:1;transform:none;transition:opacity .9s ease,transform 1.25s var(--pmx-out);transition-delay:var(--rd,0ms)}
.pmx-rv .product-media-visual{transform:scale(1.14);transform-origin:50% 60%}
.pmx-rv.pmx-in .product-media-visual{transform:none;transition:transform 1.6s var(--pmx-out);transition-delay:var(--rd,0ms)}
.pmx-rv.pmx-done,.pmx-rv.pmx-done .product-media-visual{transition:none}
/* Filter switch: cards drop away quickly, then re-enter */
.pmx-leave{opacity:0 !important;transform:translate3d(0,18px,0) scale(.98) !important;transition:opacity .22s ease,transform .3s ease !important}
/* Section heads: lines rise out of a mask */
.pmx-ln{display:block;overflow:hidden;padding:.08em 0 .12em;margin:-.08em 0 -.12em}
.pmx-ln>span{display:block;transform:translateY(112%)}
.pmx-ln.pmx-in>span{transform:none;transition:transform 1.1s var(--pmx-out);transition-delay:var(--rd,0ms)}
.pmx-fade{opacity:0;transform:translate3d(0,22px,0)}
.pmx-fade.pmx-in{opacity:1;transform:none;transition:opacity .8s ease,transform 1s var(--pmx-out);transition-delay:var(--rd,0ms)}

/* ── Hero: copy drifts and fades while the white page slides over it ───── */
.hero-section .pmx-hero-blur{position:absolute;left:0;right:0;bottom:0;height:46%;z-index:3;pointer-events:none;opacity:0}
.hero-section .pmx-hero-blur i{position:absolute;inset:0}
.hero-section .pmx-hero-blur i:nth-child(1){-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);-webkit-mask-image:linear-gradient(180deg,transparent,#000 45%);mask-image:linear-gradient(180deg,transparent,#000 45%)}
.hero-section .pmx-hero-blur i:nth-child(2){-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);-webkit-mask-image:linear-gradient(180deg,transparent 40%,#000 85%);mask-image:linear-gradient(180deg,transparent 40%,#000 85%)}
.hero-section .pmx-hero-blur i:nth-child(3){background:linear-gradient(180deg,rgba(12,11,16,0),rgba(12,11,16,.5))}

/* ── Rolling-letter buttons (hero CTA) ─────────────────────────────────── */
.pmx-rt{display:inline-flex;overflow:hidden;height:1.25em;line-height:1.25;vertical-align:middle}
.pmx-rt>span{display:inline-block;position:relative;transition:transform .55s var(--pmx-out);transition-delay:calc(var(--i) * 22ms)}
.pmx-rt>span::after{content:attr(data-l);position:absolute;left:0;top:100%}
a:hover>.pmx-rt>span,a:focus-visible>.pmx-rt>span,button:hover>.pmx-rt>span{transform:translateY(-100%)}

/* ── Smooth anchor scroll is JS; nothing here. Reduced motion: ─────────── */
@media (prefers-reduced-motion:reduce){
  .pmx{display:none !important}
  html.pmx-pending::after{display:none}
  .site-header.pmx-bar,.site-header.pmx-bar.pmx-hidden{transform:none !important;transition:none !important}
  .pmx-rv,.pmx-rv .product-media-visual,.pmx-ln>span,.pmx-fade{opacity:1 !important;transform:none !important;transition:none !important}
  .pmx-roll>.pmx-roll-t,.pmx-roll::before,.pmx-rt>span{transition:none !important}
  html.pmx-js .promo-newsletter.pmx-nl,html.pmx-js .promo-newsletter.pmx-nl *{clip-path:none !important;opacity:1 !important;transform:none !important;transition:none !important;animation:none !important}
  .pacco-top-toast-host .pacco-top-toast{transition:opacity .2s ease !important;transform:none !important}
}

/* Cart rows: − / + / Remove feedback */
.cart-item .qty-controls button{transition:transform .38s cubic-bezier(.34,1.45,.55,1),background-color .2s ease,box-shadow .2s ease;will-change:transform}
.cart-item .qty-controls button:hover{transform:scale(1.14);background:#e6e6ea;box-shadow:0 4px 10px -4px rgba(12,11,15,.35)}
.cart-item .qty-controls button:active{transform:scale(.82);transition-duration:.12s}
.cart-item .qty-controls button:focus-visible{outline:2px solid #0c0b0f;outline-offset:2px}
.cart-item .qty-controls{transition:border-color .25s ease,box-shadow .25s ease}
.cart-item .qty-controls:hover{border-color:#b8b8c2}
.cart-item .item-qty{display:inline-block;min-width:1.2em;text-align:center}
.cart-item .item-qty.qty-pop{animation:qtyPop .42s cubic-bezier(.34,1.45,.55,1)}
@keyframes qtyPop{0%{transform:scale(1)}35%{transform:scale(1.4)}100%{transform:scale(1)}}
.cart-item .cart-remove-btn{position:relative;transition:transform .3s cubic-bezier(.34,1.45,.55,1),color .2s ease,opacity .2s ease !important}
.cart-item .cart-remove-btn::after{content:"";position:absolute;left:6px;right:6px;bottom:1px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.cart-item .cart-remove-btn:hover{opacity:1 !important;color:#b91c1c !important;transform:translateX(-2px)}
.cart-item .cart-remove-btn:hover::after{transform:scaleX(1)}
.cart-item .cart-remove-btn:active{transform:scale(.9)}
@media (prefers-reduced-motion:reduce){.cart-item .qty-controls button,.cart-item .cart-remove-btn,.cart-item .cart-remove-btn::after{transition:none !important}.cart-item .item-qty.qty-pop{animation:none}}