/* AER / FORM, motion refinement. The composition and photographs stay intact. */
.hero-rear {transition:transform 600ms cubic-bezier(.22,.8,.26,1);}
.hero-object {
  transform-origin:50% 17%;
  transform:translate(-50%,-50%) perspective(1400px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) rotateZ(var(--hero-roll,0deg)) translate3d(var(--product-x,0px),var(--product-y,0px),0);
  transition:transform 600ms cubic-bezier(.22,.8,.26,1);
}
.hero-stage.is-tracking .hero-object {transition-duration:140ms;will-change:transform;}
.hero-stage.is-tracking .hero-rear {transition-duration:190ms;}
.hero-float {position:relative;transform-origin:50% 17%;animation-duration:6.6s;}
.hero-object::before,.hero-object::after {
  content:"";position:absolute;inset:0;pointer-events:none;
  -webkit-mask:url("assets/puffer-hero-black.png") center / contain no-repeat;
  mask:url("assets/puffer-hero-black.png") center / contain no-repeat;
  transition:transform 600ms cubic-bezier(.22,.8,.26,1),opacity 280ms ease-out;
}
.hero-object::before {
  z-index:-2;background:#010305;opacity:.72;filter:blur(14px);
  transform:translate3d(var(--shadow-x,0px),calc(32px + var(--shadow-y,0px)),0) scale(.99);
}
.hero-object::after {
  z-index:-1;background:#87939b;opacity:var(--trace-opacity,.14);filter:url("#hero-trace-edge");
  transform:translate3d(var(--trace-x,-12px),var(--trace-y,6px),0) rotate(var(--trace-roll,1.2deg)) scale(1.025);
}
.hero-stage.is-tracking .hero-object::before,.hero-stage.is-tracking .hero-object::after {transition-duration:200ms;}
@keyframes float {
  0%,100% {transform:translateY(1px) rotate(-.7deg);}
  50% {transform:translateY(-5px) rotate(.7deg);}
}

.model-image {overflow:hidden;background:#070809;isolation:isolate;transition:border-color 180ms ease-out;}
.model-image:hover {transform:none;}
.model-visual {position:absolute;inset:0;pointer-events:none;transform:translate3d(var(--card-x,0px),var(--card-y,0px),0) scale(var(--card-scale,1));transition:transform 200ms var(--ease);}
.model-image::after {
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;
  background-image:radial-gradient(circle,#d1dad6 .65px,transparent .9px);
  background-size:7px 7px;
  -webkit-mask-image:radial-gradient(circle 95px at var(--dot-x,50%) var(--dot-y,50%),#000 5%,transparent 75%);
  mask-image:radial-gradient(circle 95px at var(--dot-x,50%) var(--dot-y,50%),#000 5%,transparent 75%);
  transition:opacity 180ms ease-out;
}
.model-index,.selection-mark {z-index:2;transition:color 180ms,opacity 180ms;}
.model-footer {position:relative;height:102px;}
.model-label {transition:opacity 180ms,transform 200ms var(--ease);}
.model-open {position:absolute;left:0;right:0;bottom:0;height:48px;min-height:48px;padding:0 12px;border:1px solid transparent;border-bottom-color:var(--line);font-size:11px;gap:5px;transition:transform 220ms var(--ease),background-color 160ms,color 160ms,border-color 180ms;}
.model-open>span[aria-hidden] {color:inherit;}
.model:focus-within .model-open {background:#e6e8e2;color:#141718;border-color:#e6e8e2;}
.model:focus-within .model-image {border-color:#aab5b9;}

.annotation-slot {height:250px;}
.material-annotation {transform:translateY(var(--annotation-y,0px));transition:transform 260ms var(--ease);}
.material-info[data-active="2"] {--annotation-y:26px;}
.material-info[data-active="3"] {--annotation-y:52px;}
.material-drawing[data-active] .callout {opacity:.16;}
.active-callout {stroke:#dce5e1;stroke-width:1;d:path("M404 131H505L565 90H654");transition:d 260ms var(--ease),opacity 180ms;}
.layer-list button {transition:color 160ms,background-color 160ms;}
.layer-list button[aria-pressed="true"] {background:linear-gradient(90deg,#d3dfd00a,transparent 70%);}
.layer-list button:focus-visible {outline-offset:4px;}
.hotspot {transition:background-color 160ms,color 160ms,border-color 160ms,transform 180ms var(--ease);}
.hotspot:focus-visible {border-color:#e8efea;}

@media (hover:hover) and (pointer:fine) {
  html[data-product-motion="on"] .model:hover .model-visual,html[data-product-motion="on"] .model:focus-within .model-visual {--card-scale:1.045;}
  html[data-product-motion="on"] .model-image:hover::after {opacity:.32;}
  html[data-product-motion="on"] .model:hover .model-image {border-color:#aab5b9;}
  html[data-product-motion="on"] .model:hover .model-index {color:#eef3ed;}
  html[data-product-motion="on"] .model:hover .model-label,html[data-product-motion="on"] .model:focus-within .model-label {opacity:0;transform:translateY(-7px);}
  html[data-product-motion="on"] .model:hover .model-open,html[data-product-motion="on"] .model:focus-within .model-open {background:#e6e8e2;color:#141718;border-color:#e6e8e2;transform:translateY(-26px);}
  html[data-product-motion="on"] .hotspot:hover {transform:scale(1.055);}
  html[data-product-motion="on"] .layer-list button:hover {background:linear-gradient(90deg,#d3dfd00d,transparent 80%);}
}
@media (max-width:760px) {
  .model-footer {height:90px;}
  .model-open {height:44px;min-height:44px;font-size:10px;padding-inline:8px;}
  .annotation-slot {height:auto;min-height:170px;}
  .material-annotation {transform:none;}
}
@media (prefers-reduced-motion:reduce),(pointer:coarse) {
  html:not([data-product-motion="on"]) .hero-object {transform:translate(-50%,-50%);}
  html:not([data-product-motion="on"]) .hero-object::before,html:not([data-product-motion="on"]) .hero-object::after {display:none;}
  html:not([data-product-motion="on"]) .hero-rear {transform:none;}
  html:not([data-product-motion="on"]) .hero-float {animation:none;}
  html:not([data-product-motion="on"]) .hero-object,html:not([data-product-motion="on"]) .hero-rear,html:not([data-product-motion="on"]) .material-annotation,html:not([data-product-motion="on"]) .model-visual {transition:none;}
  html:not([data-product-motion="on"]) .model-visual,html:not([data-product-motion="on"]) .material-annotation {transform:none;}
  html:not([data-product-motion="on"]) .model-image::after {display:none;}
  html:not([data-product-motion="on"]) .active-callout {transition:none;}
}
html[data-product-motion="off"] .hero-float {animation:none;}
html[data-product-motion="off"] .hero-object {transform:translate(-50%,-50%);}
html[data-product-motion="off"] .hero-rear,html[data-product-motion="off"] .model-visual,html[data-product-motion="off"] .material-annotation {transform:none;}
html[data-product-motion="off"] .hero-object::before,html[data-product-motion="off"] .hero-object::after,html[data-product-motion="off"] .model-image::after {display:none;}
html[data-product-motion="off"] .active-callout {transition:none;}
.motion-toggle {flex:none;min-height:28px;margin-left:8px;padding:3px 6px;border:1px solid #505a60;background:#101416;color:#c4cdd2;font-size:9px;line-height:1.3;white-space:nowrap;}
.motion-toggle[hidden] {display:none;}
.motion-toggle[aria-pressed="true"] {color:#e4eddf;border-color:#a0ad99;}