:root{
  --a-ease:cubic-bezier(.2,.65,.25,1);
}

.topbar          { view-transition-name:pr17-topbar }
#siteHeader      { view-transition-name:pr17-nav }
.site-footer     { view-transition-name:pr17-footer }

::view-transition-old(root){
  mix-blend-mode:normal;
  animation:none;
  opacity:0;
}
::view-transition-new(root){
  mix-blend-mode:normal;
  animation:none;
  opacity:1;
  transform:none;
}

html.pr17-fondu::view-transition-old(root){ animation:none; opacity:1 }
html.pr17-fondu::view-transition-new(root){ animation:pr17Fondu .22s cubic-bezier(.2,.65,.25,1) both }
@keyframes pr17Fondu{ from{opacity:0} to{opacity:1} }

::view-transition-group(pr17-topbar),
::view-transition-group(pr17-nav),
::view-transition-group(pr17-footer){ animation-duration:.18s }

@media (prefers-reduced-motion:no-preference){
  @view-transition{ navigation:auto }
}

@media (prefers-reduced-motion:no-preference){

  .cf-tile:active,.tab:active,.season button:active,.qn:active,.sv:active,
  .dtv:active,.step-tab:active,.val-btn:active,.logo-btn:active,
  .compare-pill:not(.disabled):active,.svc-opt:active,.tc-add:active,
  .tc-qty button:active{ transform:scale(.97) }

  .faq-item>summary:active{ transform:scale(.995) }

}

.nav-links a::after{
  right:0;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform var(--t);
}
.nav-links a:hover::after,
.nav-links a.is-active::after{ right:0; transform:scaleX(1) }

@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .svc-art.has-photo::before{
    transform:scale(1);
    transition:transform .5s var(--a-ease);
  }
  .svc-card:hover .svc-art.has-photo::before,
  .svc-card:focus-within .svc-art.has-photo::before{ transform:scale(1.045) }
}

@media (prefers-reduced-motion:no-preference){
  #s-go:enabled,#tfGo:enabled{ animation:pr17Ready .42s var(--a-ease) 1 }
  @keyframes pr17Ready{
    0%  { transform:scale(1) }
    45% { transform:scale(1.015) }
    100%{ transform:scale(1) }
  }
}

.rv-pre{
  transition-duration:.42s;
  transition-timing-function:var(--a-ease);
}

@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*),

  ::view-transition-image-pair(*){ animation:none !important }
  .rv-pre{ opacity:1; transform:none }
}

@media (min-width:1100px){
  html:not(.vt-local) svg.pp-tyre{ view-transition-name:pr17-pneu }
}

::view-transition-group(pr17-pneu){
  animation-duration:.40s;
  animation-timing-function:cubic-bezier(.2,.65,.25,1);
}

html:has(body[data-page="catalogue"])::view-transition-image-pair(pr17-pneu){

  animation:pr17RouleDroite .40s cubic-bezier(.2,.65,.25,1) both;
}
html:has(body[data-page="accueil"])::view-transition-image-pair(pr17-pneu){

  animation:pr17RouleGauche .40s cubic-bezier(.2,.65,.25,1) both;
}

@keyframes pr17RouleDroite{ from{ rotate:-144deg } to{ rotate:0deg } }
@keyframes pr17RouleGauche{ from{ rotate: 144deg } to{ rotate:0deg } }

::view-transition-old(pr17-pneu){ mix-blend-mode:normal; animation:none; opacity:0 }
::view-transition-new(pr17-pneu){ mix-blend-mode:normal; animation:none; opacity:1 }

@media (prefers-reduced-motion:no-preference){
  html.pr17-douce .hero-copy>*,
  html.pr17-douce .hero .wrap>.finder,
  html.pr17-douce .finder-pane.on{
    animation:none;
    opacity:1;
    transform:none;
  }
}

@media (prefers-reduced-motion:no-preference){
  .tire-grid>.tire-card{animation:pr17Monte .26s var(--a-ease) backwards}
  .tire-grid>.tire-card:nth-child(2){animation-delay:38ms}
  .tire-grid>.tire-card:nth-child(3){animation-delay:76ms}
  .tire-grid>.tire-card:nth-child(4){animation-delay:114ms}
  .tire-grid>.tire-card:nth-child(5){animation-delay:152ms}
  .tire-grid>.tire-card:nth-child(6){animation-delay:190ms}
  .tire-grid>.tire-card:nth-child(7){animation-delay:228ms}
  .tire-grid>.tire-card:nth-child(8){animation-delay:266ms}
  .tire-grid>.tire-card:nth-child(9){animation-delay:304ms}
  .tire-grid>.tire-card:nth-child(10){animation-delay:342ms}
  .tire-grid>.tire-card:nth-child(11){animation-delay:380ms}
  .tire-grid>.tire-card:nth-child(12){animation-delay:418ms}
  @keyframes pr17Monte{from{opacity:0;transform:translateY(10px)}}

  .tc-add[data-in-cart]{animation:pr17Tap .32s ease-out}
  @keyframes pr17Tap{45%{transform:scale(.94)}}
  #qb-n{transition:transform .22s cubic-bezier(.2,1.6,.4,1)}
  @starting-style{ #qb-n{transform:scale(1.35)} }

  @supports (animation-timeline:view()){
    .pband::before{animation:pr17Respire linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    @keyframes pr17Respire{from{transform:scale(1.10)}to{transform:scale(1.02)}}
  }
}