/* Advanced product motion: one dominant scene at a time. */
:root{
  --pdp-hero-frame-y:0px;
  --pdp-hero-frame-scale:1;
  --pdp-hero-frame-rotate:0deg;
  --pdp-hero-pointer-x:0px;
  --pdp-hero-pointer-y:0px;
  --pdp-buy-y:0px;
  --pdp-buy-scale:1;
  --pdp-story-image-y:0px;
  --pdp-detail-y:0px;
  --pdp-detail-scale:1.08;
  --pdp-velocity-shift:0px;
  --pdp-velocity-blur:0px;
  --pdp-lens-x:0px;
  --pdp-lens-y:0px;
}

/* Global scene choreography */
.pdp-hero,.pdp-story-pin,.pdp-detail-scene,.pdp-related{transform-style:preserve-3d}
.pdp-main-media{
  transform:translate3d(0,var(--pdp-hero-frame-y),0) scale(var(--pdp-hero-frame-scale)) rotate(var(--pdp-hero-frame-rotate));
  translate:var(--pdp-hero-pointer-x) var(--pdp-hero-pointer-y);
  transform-origin:54% 48%;
  transition:translate .5s cubic-bezier(.2,.8,.2,1),filter .45s ease;
  will-change:transform,translate,clip-path;
}
.pdp-buy-inner{
  transform:translate3d(0,var(--pdp-buy-y),0) scale(var(--pdp-buy-scale));
  transform-origin:50% 46%;
  will-change:transform;
}

/* Hero typography gets its own timing inside the existing cross-page handoff. */
.pdp-title-word{
  display:inline-block;
  transform-origin:50% 76%;
  will-change:transform,opacity,letter-spacing;
}
body:not(.pdp-entered) .pdp-title-word{
  opacity:0;
  transform:translate3d(var(--pdp-word-x,0px),var(--pdp-word-y,24px),0) rotate(var(--pdp-word-r,0deg));
}
body.pdp-entered .pdp-title-word{
  opacity:1;
  transform:translate3d(0,0,0) rotate(0deg);
  transition:opacity .72s ease,transform 1.05s var(--ease),letter-spacing .9s var(--ease);
  transition-delay:var(--pdp-word-delay,0ms);
}

/* A small architecture line makes the first screen feel like a camera frame. */
.pdp-main-media::after{
  content:"";
  position:absolute;
  z-index:4;
  top:clamp(5.2rem,10vh,7rem);
  right:clamp(1.2rem,3vw,2.6rem);
  width:1px;
  height:clamp(76px,14vh,132px);
  background:rgba(255,255,255,.42);
  transform:scaleY(var(--pdp-hero-line,1));
  transform-origin:top;
  opacity:.72;
  pointer-events:none;
}

/* Storytelling changes depth between Matter, Gesture and Use. */
.pdp-story-pin{perspective:1500px}
.pdp-story-media,.pdp-story-copy{
  backface-visibility:hidden;
  transition:transform .95s var(--ease),clip-path .95s var(--ease),filter .65s ease;
  will-change:transform,clip-path;
}
.pdp-story-photo img{
  translate:0 var(--pdp-story-image-y);
  will-change:translate,scale,filter;
  transition:translate .55s cubic-bezier(.2,.8,.2,1),scale 1.2s var(--ease),filter .65s ease;
}
.pdp-story-word{
  translate:0 var(--pdp-velocity-shift);
  filter:blur(var(--pdp-velocity-blur));
  will-change:translate,filter,transform,opacity;
}
.pdp-story-panel::before{
  content:"";
  display:block;
  width:0;
  height:1px;
  margin-bottom:1.2rem;
  background:rgba(32,49,39,.42);
  transition:width .8s var(--ease) .12s;
}
.pdp-story-panel.is-active::before{width:clamp(36px,4vw,64px)}

body[data-pdp-story-step="0"] .pdp-story-media{transform:translate3d(-1.2vw,0,24px) scale(1.018) rotateY(-1.1deg);clip-path:inset(0 0 0 0)}
body[data-pdp-story-step="0"] .pdp-story-copy{transform:translate3d(.5vw,0,0) rotateY(.45deg)}
body[data-pdp-story-step="1"] .pdp-story-media{transform:translate3d(.65vw,0,54px) scale(1.035) rotateY(1.35deg);clip-path:inset(2.2% 1.8% 2.2% 1.8%)}
body[data-pdp-story-step="1"] .pdp-story-copy{transform:translate3d(-.7vw,0,10px) rotateY(-.6deg)}
body[data-pdp-story-step="2"] .pdp-story-media{transform:translate3d(0,0,18px) scale(1.008) rotateY(-.55deg);clip-path:inset(0 2.4% 0 0)}
body[data-pdp-story-step="2"] .pdp-story-copy{transform:translate3d(.4vw,0,0) rotateY(.35deg)}

body[data-pdp-story-step="0"] .pdp-story-word{transform:translate3d(0,0,0) scale(1)}
body[data-pdp-story-step="1"] .pdp-story-word{transform:translate3d(5vw,-1vh,0) scale(.9)}
body[data-pdp-story-step="2"] .pdp-story-word{transform:translate3d(-2vw,1vh,0) scale(1.06)}

/* Material scene: magnifying lens follows the material, not the cursor globally. */
.pdp-detail-media{position:relative;isolation:isolate}
.pdp-detail-media img{translate:0 var(--pdp-detail-y);scale:var(--pdp-detail-scale)}
.pdp-material-lens{
  position:absolute;
  z-index:5;
  left:0;
  top:0;
  width:clamp(170px,17vw,260px);
  aspect-ratio:1;
  border-radius:50%;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  transform:translate3d(var(--pdp-lens-x),var(--pdp-lens-y),0) scale(.84);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 24px 70px rgba(27,42,33,.2),inset 0 0 0 8px rgba(255,255,255,.08);
  background-repeat:no-repeat;
  transition:opacity .3s ease,transform .45s var(--ease),box-shadow .35s ease;
  will-change:transform,background-position;
}
.pdp-detail-media.is-lens-active .pdp-material-lens{opacity:1;transform:translate3d(var(--pdp-lens-x),var(--pdp-lens-y),0) scale(1)}
.pdp-material-lens::after{
  content:"";
  position:absolute;
  inset:10%;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
}
.pdp-detail-copy{transform:translate3d(0,var(--pdp-detail-copy-y,0px),0);will-change:transform}

/* Scene navigation gives a narrative coordinate without competing with the product. */
.pdp-scene-rail{
  position:fixed;
  z-index:86;
  left:clamp(.8rem,1.4vw,1.35rem);
  top:50%;
  display:grid;
  gap:.5rem;
  transform:translateY(-50%);
  pointer-events:none;
  opacity:.62;
  transition:color .4s ease,opacity .35s ease,transform .45s var(--ease);
}
.pdp-scene-rail span{
  display:flex;
  align-items:center;
  gap:.55rem;
  font-size:.52rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  opacity:.36;
  transition:opacity .35s ease,transform .45s var(--ease);
}
.pdp-scene-rail span::before{content:"";width:12px;height:1px;background:currentColor;transition:width .45s var(--ease)}
.pdp-scene-rail span.is-active{opacity:1;transform:translate3d(3px,0,0)}
.pdp-scene-rail span.is-active::before{width:30px}
body[data-pdp-scene="hero"] .pdp-scene-rail{color:#fff}
body[data-pdp-scene="story"] .pdp-scene-rail,
body[data-pdp-scene="detail"] .pdp-scene-rail,
body[data-pdp-scene="related"] .pdp-scene-rail{color:var(--deep)}

/* Related objects arrive as three different camera planes. */
.related-card{
  --related-y:0px;
  --related-r:0deg;
  transform:translate3d(0,var(--related-y),0) rotate(var(--related-r));
  transform-origin:50% 70%;
  transition:transform .65s var(--ease),opacity .45s ease;
  will-change:transform;
}
.related-card>div{position:relative;isolation:isolate}
.related-card>div::after{
  content:"";
  position:absolute;
  inset:.55rem;
  border:1px solid rgba(255,255,255,0);
  pointer-events:none;
  transition:border-color .4s ease,inset .55s var(--ease);
}
.related-card:hover>div::after{inset:.8rem;border-color:rgba(255,255,255,.42)}
.related-card:hover{transform:translate3d(0,-10px,0) rotate(0deg)}
.related-card[data-related-index="0"]{--related-r:-.35deg}
.related-card[data-related-index="1"]{--related-r:.22deg}
.related-card[data-related-index="2"]{--related-r:-.18deg}

@supports(animation-timeline:view()){
  .related-card:nth-child(1){animation:pdp-related-one linear both;animation-timeline:view();animation-range:entry 0% entry 92%}
  .related-card:nth-child(2){animation:pdp-related-two linear both;animation-timeline:view();animation-range:entry 0% entry 92%}
  .related-card:nth-child(3){animation:pdp-related-three linear both;animation-timeline:view();animation-range:entry 0% entry 92%}
}
@keyframes pdp-related-one{from{translate:0 54px;scale:.965}to{translate:0 0;scale:1}}
@keyframes pdp-related-two{from{translate:0 86px;scale:.95}to{translate:0 0;scale:1}}
@keyframes pdp-related-three{from{translate:0 66px;scale:.96}to{translate:0 0;scale:1}}

/* Add-to-cart has a short material pulse instead of a generic bounce. */
.add-to-cart.is-added{animation:pdp-cart-material-pulse .62s var(--ease) both}
@keyframes pdp-cart-material-pulse{
  0%{transform:scale(1)}
  32%{transform:scale(.975)}
  65%{transform:scale(1.018)}
  100%{transform:scale(1)}
}

@media(max-width:1180px){.pdp-scene-rail{display:none}}
@media(max-width:1000px){
  .pdp-main-media,.pdp-buy-inner,.pdp-story-media,.pdp-story-copy,.related-card{transform:none!important;translate:none!important;filter:none!important}
  .pdp-material-lens{display:none!important}
  .pdp-story-photo img{translate:none!important}
}
@media(prefers-reduced-motion:reduce){
  .pdp-scene-rail,.pdp-material-lens{display:none!important}
  .pdp-main-media,.pdp-buy-inner,.pdp-story-media,.pdp-story-copy,.related-card,.pdp-title-word{transform:none!important;translate:none!important;filter:none!important;transition:none!important;animation:none!important;opacity:1!important}
  .pdp-story-photo img,.pdp-detail-media img{translate:none!important;scale:1!important;filter:none!important;animation:none!important}
}