/* Layered explorer: the Loft plate never moves. Replace accessoryArtwork's PNG to swap products. */
.stage{background:#151313 url('loft-empty-v4.png') center/cover no-repeat;touch-action:pan-y}
.stage::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(0deg,rgba(0,0,0,.52),transparent 27%),linear-gradient(90deg,rgba(0,0,0,.12),transparent 35%)}
.stage .scene,.stage .scene.active,.stage .scene.depart-pan,.stage .scene.enter-pan,.stage .scene.return-pan{transform:none;filter:none;transition:opacity .24s ease;will-change:opacity}
.stage .scene{z-index:5;opacity:0;pointer-events:none}
.stage .scene.active{opacity:1;z-index:5;pointer-events:auto}
.stage .scene>img,.stage .scene::after{display:none}
.car-rig,.accessory-rig{position:absolute;inset:0;pointer-events:none;will-change:transform,opacity}
.car-rig{z-index:2;transform-origin:58% 49%;transform:translate3d(0,0,0) scale(1);transition:transform 1.3s cubic-bezier(.22,.72,.12,1)}
.car-cutout,.accessory-rig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.car-cutout{z-index:2;transition:opacity .3s ease}
.car-body{z-index:1;opacity:1;-webkit-mask-image:linear-gradient(90deg,#000 0 41%,transparent 47% 74%,#000 80% 100%);mask-image:linear-gradient(90deg,#000 0 41%,transparent 47% 74%,#000 80% 100%)}
.car-closed,.car-ajar,.car-open{-webkit-mask-image:linear-gradient(90deg,transparent 0 41%,#000 47% 74%,transparent 80% 100%);mask-image:linear-gradient(90deg,transparent 0 41%,#000 47% 74%,transparent 80% 100%)}
.car-closed{opacity:1}.car-ajar,.car-open{opacity:0}
.car-shadow{position:absolute;z-index:1;left:13%;right:9%;bottom:16%;height:12%;border-radius:50%;background:radial-gradient(ellipse,#000b 0%,#0005 48%,transparent 74%);filter:blur(12px)}
.accessory-rig{z-index:3;opacity:0;transform:translate3d(-92%,0,0) scale(.9);transition:transform 1.3s cubic-bezier(.22,.72,.12,1),opacity .3s ease;filter:drop-shadow(0 25px 20px #0009)}
.stage[data-view="interior"] .car-rig{transform:translate3d(-18%,8%,0) scale(1.68)}
.stage[data-view="interior"] .car-closed,.stage[data-view="accessories"] .car-open{opacity:0}
.stage[data-view="interior"] .car-open{opacity:1}
.stage[data-view="accessories"] .car-rig{transform:translate3d(-112%,0,0) scale(.94)}
.stage[data-view="accessories"] .accessory-rig{opacity:1;transform:translate3d(0,0,0) scale(1)}
.stage.is-opening .car-rig{transition-delay:.1s}
.stage.is-opening .car-closed{animation:doorClosedOut 1.15s linear both}
.stage.is-opening .car-ajar{animation:doorAjarPulse 1.15s linear both}
.stage.is-opening .car-open{animation:doorOpenIn 1.15s linear both}
.stage.is-closing .car-closed{animation:doorOpenIn 1.15s linear .15s both}
.stage.is-closing .car-ajar{animation:doorAjarPulse 1.15s linear .15s both}
.stage.is-closing .car-open{animation:doorClosedOut 1.15s linear .15s both}
.stage.is-to-accessories .car-rig{animation:panPastTail 1.35s cubic-bezier(.2,.75,.12,1) both}
.stage.is-to-accessories .accessory-rig{animation:accessoriesEnterRight 1.35s cubic-bezier(.2,.75,.12,1) both}
.stage.is-from-accessories .car-rig{animation:returnFromLeft 1.35s cubic-bezier(.2,.75,.12,1) both}
.stage.is-from-accessories .accessory-rig{animation:accessoriesExitRight 1.35s cubic-bezier(.2,.75,.12,1) both}
.stage.is-acc-to-exterior .car-rig{animation:carEnterRight 1.35s cubic-bezier(.2,.75,.12,1) both}
.stage.is-acc-to-exterior .accessory-rig{animation:accessoriesExitLeft 1.35s cubic-bezier(.2,.75,.12,1) both}
.stage.is-exterior-to-acc .car-rig{animation:carExitRight 1.35s cubic-bezier(.2,.75,.12,1) both}
.stage.is-exterior-to-acc .accessory-rig{animation:accessoriesEnterLeft 1.35s cubic-bezier(.2,.75,.12,1) both}
@keyframes doorClosedOut{0%,24%{opacity:1}48%,100%{opacity:0}}
@keyframes doorOpenIn{0%,52%{opacity:0}76%,100%{opacity:1}}
@keyframes doorAjarPulse{0%,24%{opacity:0}48%,52%{opacity:1}76%,100%{opacity:0}}
@keyframes panPastTail{0%{transform:translate3d(-18%,8%,0) scale(1.68)}28%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-112%,0,0) scale(.94)}}
@keyframes returnFromLeft{0%{transform:translate3d(-112%,0,0) scale(.94)}45%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-18%,8%,0) scale(1.68)}}
@keyframes carEnterRight{0%{transform:translate3d(112%,0,0) scale(.94)}100%{transform:translate3d(0,0,0) scale(1)}}
@keyframes carExitRight{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(112%,0,0) scale(.94)}}
@keyframes accessoriesEnterRight{0%{transform:translate3d(112%,0,0) scale(.9);opacity:0}25%{opacity:1}100%{transform:translate3d(0,0,0) scale(1);opacity:1}}
@keyframes accessoriesEnterLeft{0%{transform:translate3d(-112%,0,0) scale(.9);opacity:0}25%{opacity:1}100%{transform:translate3d(0,0,0) scale(1);opacity:1}}
@keyframes accessoriesExitRight{0%{transform:translate3d(0,0,0) scale(1);opacity:1}75%{opacity:1}100%{transform:translate3d(112%,0,0) scale(.9);opacity:0}}
@keyframes accessoriesExitLeft{0%{transform:translate3d(0,0,0) scale(1);opacity:1}75%{opacity:1}100%{transform:translate3d(-112%,0,0) scale(.9);opacity:0}}
@media(max-width:850px){
  .stage{background-position:center}
  .car-cutout,.accessory-rig img{object-fit:contain}
  .car-rig{transform:translate3d(0,0,0) scale(1.03)}
  .stage[data-view="interior"] .car-rig{transform:translate3d(-18%,6%,0) scale(2.12)}
  .stage[data-view="accessories"] .car-rig{transform:translate3d(-120%,0,0) scale(1.06)}
  .stage[data-view="accessories"] .accessory-rig{transform:translate3d(0,0,0) scale(1)}
  .car-shadow{bottom:34%;height:6%}
  .stage .hotspot{width:20px;height:20px;animation:none;box-shadow:0 0 0 5px #d92c2740,0 0 14px #d92c27}
  .stage .hotspot::after{inset:6px}
  .stage .hotspot span{opacity:0}
  .stage .hotspot:focus-visible span{opacity:1}
  .stage .hotspot::before{content:"";position:absolute;inset:-12px}
  .stage .scene[data-scene="0"] .hotspot[data-product="กระจก"]{left:54%!important;top:41%!important}
  .stage .scene[data-scene="0"] .hotspot[data-product="พื้นผิวภายนอก"]{left:49%!important;top:47%!important}
  .stage .scene[data-scene="1"] .hotspot[data-product="เพดาน"]{left:21%!important;top:39%!important}
  .stage .scene[data-scene="1"] .hotspot[data-product="คอนโซล"]{left:43%!important;top:45%!important}
  .stage .scene[data-scene="1"] .hotspot[data-product="เบาะ"]{left:30%!important;top:62%!important}
  .stage .scene[data-scene="1"] .hotspot[data-product="พรม"]{left:44%!important;top:67%!important}
  .stage .scene-label{bottom:17px;max-width:65%}
  .stage .scene-label small{font-size:10px;letter-spacing:.1em}
  .stage .scene-label h3{font-size:18px;line-height:1.2}
  .stage .progress{left:18px;top:22px;bottom:auto;transform:none}
  .stage .scene[data-scene="0"] .hotspot[data-product="ล้อและยาง"]{top:58%!important}
  @keyframes panPastTail{0%{transform:translate3d(-18%,6%,0) scale(2.12)}28%{transform:translate3d(0,0,0) scale(1.03)}100%{transform:translate3d(-120%,0,0) scale(1.06)}}
  @keyframes returnFromLeft{0%{transform:translate3d(-120%,0,0) scale(1.06)}45%{transform:translate3d(0,0,0) scale(1.03)}100%{transform:translate3d(-18%,6%,0) scale(2.12)}}
  @keyframes carEnterRight{0%{transform:translate3d(120%,0,0) scale(1.06)}100%{transform:translate3d(0,0,0) scale(1.03)}}
  @keyframes carExitRight{0%{transform:translate3d(0,0,0) scale(1.03)}100%{transform:translate3d(120%,0,0) scale(1.06)}}
}
@media(prefers-reduced-motion:reduce){.car-rig,.accessory-rig,.car-cutout,.stage .scene{transition:none!important;animation:none!important}}