/* ==========================================================================
   PRESTIGE MOTION LAYER
   Scroll-driven choreography, RTL directional entrances, paw accents,
   spring-like interaction. Animate transform + opacity only.
   Apply later with: .pn-anim | data-motion | data-motion-stagger | data-paw
   ========================================================================== */

:root{
  --pn-ease:cubic-bezier(.16,1,.3,1);
  --pn-ease-spring:cubic-bezier(.22,1.16,.36,1);
  --pn-inline:-1;
  --pn-paw:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'><ellipse cx='0' cy='4.2' rx='6.8' ry='5.4'/><ellipse cx='-7.4' cy='-3.2' rx='2.9' ry='3.9'/><ellipse cx='-2.5' cy='-6.6' rx='2.9' ry='4.1'/><ellipse cx='2.5' cy='-6.6' rx='2.9' ry='4.1'/><ellipse cx='7.4' cy='-3.2' rx='2.9' ry='3.9'/></svg>");
}
html[dir="rtl"]{--pn-inline:1}

/* --------------------------------------------------------------------------
   Page transition

   Keep this in the external motion sheet. React may recreate a component's
   inline <style> node during hydration or client navigation; WebKit then
   correctly re-applies CSP and can reject that dynamically-created sheet even
   when the server-rendered copy had a matching hash.
   -------------------------------------------------------------------------- */
/* The logo is intentionally excluded from scroll timelines. Keep it visible
   even when the JS selects that path instead of installing the IO observer. */
.pn-logo.pn-anim{opacity:1;transform:none}
.pn-logo.pn-anim:hover{transform:rotate(5deg)}

/* --------------------------------------------------------------------------
   Reveal language — IO fallback (no view() timeline)
   -------------------------------------------------------------------------- */
.pn-anim{
  opacity:0;
  transform:translate3d(calc(var(--pn-inline) * 18px),24px,0);
  transition:opacity .75s var(--pn-ease),transform .75s var(--pn-ease);
}
.pn-anim.pn-in{opacity:1;transform:none}
.pn-anim[data-anim="zoomIn"],
.pn-anim[data-motion="zoom"]{transform:scale(1.06)}
.pn-anim[data-anim="zoomIn"].pn-in,
.pn-anim[data-motion="zoom"].pn-in{transform:none;transition-duration:1.15s}
.pn-anim[data-motion="start"]{transform:translate3d(calc(var(--pn-inline) * 36px),8px,0)}
.pn-anim[data-motion="end"]{transform:translate3d(calc(var(--pn-inline) * -36px),8px,0)}
.pn-anim[data-motion="rise"]{transform:translate3d(0,28px,0)}
.pn-anim[data-motion="fade"]{transform:none}

[data-motion-stagger] > .pn-anim:nth-child(1){transition-delay:0ms}
[data-motion-stagger] > .pn-anim:nth-child(2){transition-delay:80ms}
[data-motion-stagger] > .pn-anim:nth-child(3){transition-delay:160ms}
[data-motion-stagger] > .pn-anim:nth-child(4){transition-delay:240ms}
[data-motion-stagger] > .pn-anim:nth-child(5){transition-delay:320ms}
[data-motion-stagger] > .pn-anim:nth-child(6){transition-delay:400ms}
[data-motion-stagger] > .pn-anim:nth-child(7){transition-delay:480ms}
[data-motion-stagger] > .pn-anim:nth-child(8){transition-delay:560ms}

/* --------------------------------------------------------------------------
   Scroll-driven choreography (Chrome 115+, Safari 26+)
   -------------------------------------------------------------------------- */
@keyframes pnRiseView{
  from{opacity:0;transform:translate3d(calc(var(--pn-inline) * 22px),28px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes pnStartView{
  from{opacity:0;transform:translate3d(calc(var(--pn-inline) * 40px),0,0)}
  to{opacity:1;transform:none}
}
@keyframes pnEndView{
  from{opacity:0;transform:translate3d(calc(var(--pn-inline) * -40px),0,0)}
  to{opacity:1;transform:none}
}
@keyframes pnZoomView{
  from{opacity:0;transform:scale(1.07)}
  to{opacity:1;transform:none}
}
@keyframes pnFadeView{
  from{opacity:0}
  to{opacity:1}
}
@keyframes pnParallaxView{
  from{transform:translate3d(0,-5.5%,0)}
  to{transform:translate3d(0,5.5%,0)}
}
@keyframes pnPawStamp{
  from{opacity:0;transform:rotate(-12deg) scale(1.18)}
  to{opacity:.42;transform:rotate(-8deg) scale(1)}
}
@keyframes pnHeroTitleIn{
  from{opacity:0;transform:translate3d(calc(var(--pn-inline) * 28px),16px,0)}
  to{opacity:1;transform:none}
}
@keyframes pnHeroSubIn{
  from{opacity:0;transform:translate3d(0,14px,0)}
  to{opacity:1;transform:none}
}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .pn-anim:not(.pn-logo),
    .pn-anim.pn-in:not(.pn-logo){
      animation:pnRiseView linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 42%;
      transition:none;
    }
    .pn-anim[data-motion="start"],
    .pn-anim[data-motion="start"].pn-in{
      animation-name:pnStartView;
      animation-range:entry 0% entry 48%;
    }
    .pn-anim[data-motion="end"],
    .pn-anim[data-motion="end"].pn-in{
      animation-name:pnEndView;
      animation-range:entry 0% entry 48%;
    }
    .pn-anim[data-motion="zoom"],
    .pn-anim[data-anim="zoomIn"],
    .pn-anim[data-motion="zoom"].pn-in,
    .pn-anim[data-anim="zoomIn"].pn-in{
      animation-name:pnZoomView;
      animation-range:entry 0% entry 55%;
    }
    .pn-anim[data-motion="fade"],
    .pn-anim[data-motion="fade"].pn-in{
      animation-name:pnFadeView;
      animation-range:entry 0% entry 36%;
    }
    .pn-anim[data-motion="rise"],
    .pn-anim[data-motion="rise"].pn-in{
      animation-name:pnRiseView;
    }

    [data-motion-stagger] > .pn-anim:nth-child(1){animation-range:entry 0% entry 36%}
    [data-motion-stagger] > .pn-anim:nth-child(2){animation-range:entry 8% entry 44%}
    [data-motion-stagger] > .pn-anim:nth-child(3){animation-range:entry 16% entry 52%}
    [data-motion-stagger] > .pn-anim:nth-child(4){animation-range:entry 24% entry 58%}
    [data-motion-stagger] > .pn-anim:nth-child(5){animation-range:entry 32% entry 64%}
    [data-motion-stagger] > .pn-anim:nth-child(6){animation-range:entry 40% entry 70%}
    [data-motion-stagger] > .pn-anim:nth-child(7){animation-range:entry 48% entry 76%}
    [data-motion-stagger] > .pn-anim:nth-child(8){animation-range:entry 56% entry 82%}

    .hm-bs__card{
      animation:pnRiseView linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 40%;
    }
    .hm-bs__grid .hm-bs__card:nth-child(1){animation-range:entry 0% entry 34%}
    .hm-bs__grid .hm-bs__card:nth-child(2){animation-range:entry 8% entry 42%}
    .hm-bs__grid .hm-bs__card:nth-child(3){animation-range:entry 16% entry 50%}
    .hm-bs__grid .hm-bs__card:nth-child(4){animation-range:entry 24% entry 58%}
    .hm-bs__grid .hm-bs__card:nth-child(5){animation-range:entry 8% entry 42%}
    .hm-bs__grid .hm-bs__card:nth-child(6){animation-range:entry 16% entry 50%}
    .hm-bs__grid .hm-bs__card:nth-child(7){animation-range:entry 24% entry 58%}
    .hm-bs__grid .hm-bs__card:nth-child(8){animation-range:entry 32% entry 64%}

    .hm-stat{
      animation:pnStatIn linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 48%;
    }
    .hm-stats__row .hm-stat:nth-child(1){animation-range:entry 0% entry 40%}
    .hm-stats__row .hm-stat:nth-child(2){animation-range:entry 10% entry 50%}
    .hm-stats__row .hm-stat:nth-child(3){animation-range:entry 20% entry 60%}
    .hm-stats__row .hm-stat:nth-child(4){animation-range:entry 30% entry 70%}

    [data-motion="parallax"]{overflow:hidden}
    [data-motion="parallax"] img{
      scale:1.14;
      animation:pnParallaxView linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
    }

    .pn-paw-break > i:first-child{
      animation:pnPawStamp linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 36%;
    }

    .pn-hero.is-ready .pn-hero__title{
      animation:pnHeroTitleIn 1.05s var(--pn-ease) .08s both;
    }
    .pn-hero.is-ready .pn-hero__sub,
    .pn-hero.is-ready .pn-hero__flag{
      animation:pnHeroSubIn 1s var(--pn-ease) .28s both;
    }
    .pn-hero.is-ready .pn-hero__btn-wrap{
      animation:pnHeroSubIn .9s var(--pn-ease) .48s both;
    }
  }
}

@keyframes pnStatIn{
  from{opacity:0;transform:rotate(var(--stat-rot,0deg)) scale(.86) translateY(18px)}
  to{opacity:1;transform:rotate(var(--stat-rot,0deg)) scale(1)}
}

.hm-stat--navy{--stat-rot:-4deg}
.hm-stat--cream{--stat-rot:3deg}
.hm-stat--orange{--stat-rot:-2deg}
.hm-stat--cyan{--stat-rot:4deg}

.hm-stat__value{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  display:inline-block;
  min-width:2.4ch;
  text-align:center;
}

/* --------------------------------------------------------------------------
   Paw section accents — injected by initMotion into [data-paw]
   Brandbook language: one cream paw on navy. Never a grey row, never on
   a photograph. Absolutely positioned: no layout shift.
   -------------------------------------------------------------------------- */
[data-paw]{position:relative}
.pn-paw-break{
  display:none;
  position:absolute;
  inset-block-end:1.5rem;
  inset-inline-end:1.6rem;
  z-index:2;
  width:2.4rem;height:2.4rem;
  margin:0;padding:0;
  pointer-events:none;
  color:#f2e3ce;
}
.pn-paw-break > i{display:none}
.pn-paw-break > i:first-child{
  display:block;width:2.4rem;height:2.4rem;
  background:currentColor;
  -webkit-mask:var(--pn-paw) center / contain no-repeat;
  mask:var(--pn-paw) center / contain no-repeat;
  opacity:.42;transform:rotate(-8deg);
}

/* Photographs and cream fields cannot host a paw without it reading as dirt. */
.pn-hero > .pn-paw-break,
[data-paw="edge"] > .pn-paw-break,
.ab-hero > .pn-paw-break{display:none}

/* Never stamp the page-transition curtain over the family photograph. */

@media (max-width:1200px){
  .pn-shell-content:has(.ab-hero){padding-top:0}
}

/* Navy chapters — one mark, matching Guide Lines "Visual Elements". */
.hm-b2b__stage > .pn-paw-break,
.hm-club > .pn-paw-break,
.uh-club__band > .pn-paw-break{
  display:block;
}

/* --------------------------------------------------------------------------
   Spring-like interaction — hover and focus, transform only
   -------------------------------------------------------------------------- */
.pn-btn,.pn-hero__btn,.pn-header__biz,.ab-hero__btn,.rg-btn{
  transition:
    background-color .28s var(--pn-ease),
    color .28s var(--pn-ease),
    transform .42s var(--pn-ease-spring),
    box-shadow .42s var(--pn-ease-spring);
}
.pn-btn:hover,.pn-btn:focus-visible,
.pn-hero__btn:hover,.pn-hero__btn:focus-visible,
.pn-header__biz:hover,.pn-header__biz:focus-visible,
.ab-hero__btn:hover,.ab-hero__btn:focus-visible{
  transform:translateY(-3px) scale(1.03);
}
.pn-btn:active,.pn-hero__btn:active,.pn-header__biz:active,.ab-hero__btn:active{
  transform:scale(.98);
}

.pn-nav__text{
  display:inline-block;
  transition:transform .32s var(--pn-ease-spring),color .2s ease;
}
.pn-nav a:hover .pn-nav__text,
.pn-nav a:focus-visible .pn-nav__text{transform:translateY(-1px)}

.hm-gate,.hm-hub__card,.uh-card,.bz-card,.hm-bs__card{
  transition:transform .45s var(--pn-ease-spring),box-shadow .45s var(--pn-ease-spring);
}
.hm-gate:hover,.hm-gate:focus-visible,
.hm-hub__card:hover,.hm-hub__card:focus-visible,
.uh-card:hover,.uh-card:focus-visible,
.bz-card:hover,.bz-card:focus-visible{
  transform:translateY(-6px);
}
.hm-bs__card:hover .hm-bs__shot img,
.hm-bs__card:focus-within .hm-bs__shot img{
  transform:translateY(-10px);
}
.hm-bs__shot img{
  transition:transform .55s var(--pn-ease-spring),filter .55s var(--pn-ease-spring);
}

.uh-pill{
  transition:
    background-color .25s var(--pn-ease),
    color .25s var(--pn-ease),
    border-color .25s var(--pn-ease),
    transform .35s var(--pn-ease-spring);
}
.uh-pill:hover,.uh-pill:focus-visible{transform:translateY(-2px)}
.uh-pill:active{transform:scale(.98)}

.hm-stat{
  transition:transform .5s var(--pn-ease-spring);
}
.hm-stat:hover,.hm-stat:focus-within{
  transform:rotate(var(--stat-rot,0deg)) scale(1.06);
}

.hm-worlds__packs img{
  transition:transform .7s var(--pn-ease-spring),filter .7s var(--pn-ease-spring);
}

.bz-step{
  transition:transform .4s var(--pn-ease-spring);
}
.bz-step:hover{transform:translateY(-4px)}

/* --------------------------------------------------------------------------
   Reduced motion — honour OS pref and the a11y widget
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .pt{display:none!important}.pt__paw{animation:none!important}
  .pn-anim,.pn-anim.pn-in,
  .pn-anim[data-anim="zoomIn"],.pn-anim[data-anim="zoomIn"].pn-in,
  .pn-anim[data-motion],.pn-rev,.pn-rev.pn-rev-in,
  .hm-bs__card,.hm-stat,.hm-gate,.hm-hub__card,.uh-card,.bz-card,.bz-step,
  .pn-paw-break > i,[data-motion="parallax"] img,
  .pn-hero__title,.pn-hero__sub,.pn-hero__flag,.pn-hero__btn-wrap,
  .ab-hero__title,.ab-hero__sub,.ab-hero__btn,.ab-hero__paw{
    animation:none !important;
    transition:none !important;
    transform:none !important;
    opacity:1 !important;
    scale:none !important;
  }
  .hm-stat--navy{transform:rotate(-4deg) !important}
  .hm-stat--cream{transform:rotate(3deg) !important}
  .hm-stat--orange{transform:rotate(-2deg) !important}
  .hm-stat--cyan{transform:rotate(4deg) !important}
  .pn-btn,.pn-hero__btn,.pn-header__biz,.ab-hero__btn,.rg-btn,
  .pn-nav__text,.uh-pill,.hm-bs__shot img,.hm-worlds__packs img{
    transition:none !important;transform:none !important;
  }
  .pn-paw-break > i:first-child{opacity:.42 !important}
}

html.pn-a11y-no-motion .pn-anim,
html.pn-a11y-no-motion .pn-rev,
html.pn-a11y-no-motion .hm-bs__card,
html.pn-a11y-no-motion .hm-stat,
html.pn-a11y-no-motion .pn-paw-break > i,
html.pn-a11y-no-motion [data-motion="parallax"] img,
html.pn-a11y-no-motion .pn-hero__title,
html.pn-a11y-no-motion .pn-hero__sub,
html.pn-a11y-no-motion .pn-hero__btn-wrap,
html.pn-a11y-no-motion .ab-hero__title,
html.pn-a11y-no-motion .ab-hero__sub,
html.pn-a11y-no-motion .ab-hero__btn,
html.pn-a11y-no-motion .ab-hero__paw{
  animation:none !important;transition:none !important;
  transform:none !important;opacity:1 !important;scale:none !important;
}
html.pn-a11y-no-motion .hm-stat--navy{transform:rotate(-4deg) !important}
html.pn-a11y-no-motion .hm-stat--cream{transform:rotate(3deg) !important}
html.pn-a11y-no-motion .hm-stat--orange{transform:rotate(-2deg) !important}
html.pn-a11y-no-motion .hm-stat--cyan{transform:rotate(4deg) !important}
html.pn-a11y-no-motion .pn-paw-break > i:first-child{opacity:.42 !important}
html.pn-a11y-no-motion .pn-btn:hover,
html.pn-a11y-no-motion .pn-hero__btn:hover,
html.pn-a11y-no-motion .hm-gate:hover,
html.pn-a11y-no-motion .uh-card:hover,
html.pn-a11y-no-motion .bz-card:hover{
  transform:none !important;
}

/* Redesigned editorial pages always render their content. Entrance movement
   runs once through useEntranceMotion instead of reversible view timelines. */
.ph-home .pn-anim,.ph-home .hm-bs__card,.ph-home .hm-stat,
.product-page .pn-anim{animation:none!important;opacity:1!important;transform:none!important;transition:none!important}
@keyframes prestigeEntrance{from{transform:translateY(18px)}to{transform:translateY(0)}}
@media(prefers-reduced-motion:no-preference){
  html:not(.pn-a11y-no-motion) .prestige-entered{animation:prestigeEntrance .6s cubic-bezier(.16,1,.3,1) both}
}
@media print{.pn-anim,.hm-bs__card,.hm-stat{animation:none!important;opacity:1!important;transform:none!important}}
/* Walking dog-paw curtain: visible brand transition with 3D stamped depth. */
.pt.pt--paws{inset:0;height:100%;z-index:1400;background:#f2e3ce;overflow:hidden;pointer-events:none;perspective:900px;animation:prestigeCurtain 1.5s cubic-bezier(.76,0,.24,1) both}
.pt__trail{position:absolute;inset:0;transform-style:preserve-3d}.pt__step{position:absolute;width:clamp(34px,5vw,72px);color:#06324a;opacity:0;animation:prestigePawStamp .8s cubic-bezier(.16,1,.3,1) var(--stamp-delay) both;filter:drop-shadow(3px 7px 2px #06324a18)}.pt__step svg{display:block;width:100%}.pt__step:nth-child(5n){color:#e85e46}
.pt__signature{position:absolute;inset:42% 10% auto;display:flex;flex-direction:column;align-items:center;gap:16px;color:#06324a;font-weight:700;font-size:clamp(23px,3vw,44px);text-align:center;animation:prestigeSignature .9s cubic-bezier(.16,1,.3,1) both}.pt__signature svg{width:76px;color:#e85e46;filter:drop-shadow(0 8px 0 #b43a2730)}
@keyframes prestigeCurtain{0%,46%{transform:translateY(0);opacity:1}100%{transform:translateY(-108%);opacity:1}}
@keyframes prestigePawStamp{0%{opacity:0;transform:perspective(500px) rotateX(55deg) rotateZ(var(--stamp-angle)) translateZ(70px) scale(1.3)}28%{opacity:.45;transform:perspective(500px) rotateX(0) rotateZ(var(--stamp-angle)) translateZ(0) scale(1)}100%{opacity:.14;transform:rotateZ(var(--stamp-angle)) scale(1)}}
@keyframes prestigeSignature{0%{opacity:0;transform:perspective(700px) rotateX(25deg) translateY(30px)}45%,100%{opacity:1;transform:perspective(700px) rotateX(0) translateY(0)}}
@media(prefers-reduced-motion:no-preference){
  html:not(.pn-a11y-no-motion) .prestige-entered{animation:prestigeDepthEntrance .95s cubic-bezier(.16,1,.3,1) both}
  html:not(.pn-a11y-no-motion) .is-depth-active{transform:perspective(1100px) rotateX(var(--depth-x,0deg)) rotateY(var(--depth-y,0deg)) translateY(-6px)!important;transition:transform .22s ease-out!important;transform-style:preserve-3d;box-shadow:0 26px 45px -30px #06324a80}
  html:not(.pn-a11y-no-motion) .is-depth-active img{transform:translateZ(28px) scale(1.025);filter:drop-shadow(0 14px 10px #06324a26)}
  html:not(.pn-a11y-no-motion) .is-depth-active .ph-range__top,html:not(.pn-a11y-no-motion) .is-depth-active .ph-range__copy{transform:translateZ(22px)}
}
@keyframes prestigeDepthEntrance{from{transform:perspective(1400px) rotateX(9deg) translateY(42px) scale(.97)}to{transform:perspective(1400px) rotateX(0) translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.pt.pt--paws{display:none!important}.is-depth-active{transform:none!important}.hv-hero__slide{transform:none!important}}
html.pn-a11y-no-motion .pt.pt--paws{display:none!important}html.pn-a11y-no-motion .is-depth-active{transform:none!important}html.pn-a11y-no-motion .hv-hero__slide{transform:none!important}

@media print{.pt.pt--paws{display:none!important}}