/* V18: spatial geometry is rendered by experience-v18.js above the approved photograph. */
.experience-hero .hero-image{
  z-index:-3;
  animation:none;
  transform:translate3d(var(--bg-x,0px),var(--bg-y,0px),0) scale(1.085);
  transition:transform .24s ease-out;
  will-change:transform
}
.experience-hero .hero-image::after{animation:none}
.experience-hero .hero-shade{z-index:-2}
.experience-hero .spatial-scene{
  position:absolute;inset:0;width:100%;height:100%;z-index:-1;
  display:block;pointer-events:none;opacity:.72;
  animation:v18-scene-entrance 1.6s ease-out both
}
@keyframes v18-scene-entrance{from{opacity:0;filter:blur(9px)}to{opacity:.72;filter:blur(0)}}
.experience-hero .studio-panel,.interactive-frame{--light-x:50%;--light-y:50%}
.experience-hero .studio-panel{
  transition:transform .18s ease-out,box-shadow .24s ease-out,border-color .24s ease-out;
  transform-origin:center center
}
.experience-hero .studio-panel:hover,.experience-hero .studio-panel:focus-visible{
  transform:perspective(900px) translateZ(14px) translateY(-6px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(1.085);
  box-shadow:0 0 0 1px #b8f5ff,0 0 44px #57dfff8c,0 34px 58px #000d
}
.experience-hero .studio-panel::before{
  background:radial-gradient(circle at var(--light-x) var(--light-y),#b8f5ff50,transparent 43%),linear-gradient(180deg,#07111c5e 0%,transparent 33%,#07111c11 54%,#07111cf5 100%)
}
.interactive-frame{
  transition:transform .18s ease-out,box-shadow .24s ease-out,border-color .24s ease-out
}
.scene-teasers a,.showcase-film a{
  --tilt-x:0deg;--tilt-y:0deg;--light-x:50%;--light-y:50%;
  position:relative;transform-style:preserve-3d;
  transition:transform .18s ease-out,box-shadow .24s ease-out
}
.scene-teasers a:hover,.scene-teasers a:focus-visible,
.showcase-film a:hover,.showcase-film a:focus-visible{
  z-index:4;
  transform:perspective(850px) translateZ(9px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(1.035);
  box-shadow:0 0 28px #5ddfff70,0 20px 36px #000b
}
.interactive-frame:hover,.interactive-frame:focus-visible,.interactive-frame:focus-within{
  transform:perspective(1000px) translateZ(9px) translateY(-5px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(1.035)
}
.interactive-frame::before{
  background:radial-gradient(circle at var(--light-x) var(--light-y),#b8f5ff32,transparent 48%),linear-gradient(112deg,transparent 30%,#ffffff12 47%,transparent 63%)
}
.hero-showcase .showcase-browser{
  transform:perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateZ(8px);
  transition:transform .18s ease-out,box-shadow .3s
}
.motion-off .experience-hero .studio-panel:hover,
.motion-off .experience-hero .studio-panel:focus-visible,
.motion-off .interactive-frame:hover,
.motion-off .interactive-frame:focus-visible,
.motion-off .interactive-frame:focus-within,
.motion-off .scene-teasers a:hover,.motion-off .showcase-film a:hover{transform:none}
.motion-off .experience-hero .hero-image{transform:scale(1.085)}
.motion-off .experience-hero .spatial-scene{animation:none;opacity:.45}
.motion-off .hero-showcase .showcase-browser{transform:none}
.v18-motion-note{display:none;align-items:center;gap:12px;flex-wrap:wrap;
  width:fit-content;max-width:min(100%,720px);margin:18px auto 0;padding:9px 12px;
  border:1px solid #95e9f49c;border-radius:9px;background:#061728e8;
  color:#e6f5fa;font-size:12px;box-shadow:0 8px 25px #0007}
.motion-off .v18-motion-note{display:flex}
.v18-motion-note button{border:1px solid #f0d295;border-radius:6px;background:#e9d09d;
  color:#0b2438;padding:5px 9px;font-size:11px;font-weight:750}
@media(hover:none){
  .experience-hero .studio-panel{transform:none!important}
  .experience-hero .studio-panel:active,.interactive-frame:active{filter:brightness(1.12)}
  .experience-hero .panel-detail{display:block;max-height:none;opacity:1;margin-top:5px}
  .experience-hero .panel-peek{max-height:35px;opacity:1;margin-top:4px}
  .interactive-frame .card-hover-info{position:relative;inset:auto;opacity:1;transform:none;margin:10px 0 0}
  .interactive-frame{transform:none!important}
  .scene-teasers a,.showcase-film a{transform:none!important}
}
@media(max-width:800px){
  .experience-hero .spatial-scene{opacity:.45}
  .experience-hero .studio-panel:hover,.experience-hero .studio-panel:focus-visible{transform:perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(1.035)}
  .experience-hero .panel-detail{display:block;max-height:none;opacity:1;margin-top:4px}
  .experience-hero .panel-peek{max-height:35px;opacity:1;margin-top:4px}
  .interactive-frame .card-hover-info{position:relative;inset:auto;opacity:1;transform:none;margin:10px 0 0}
}
@media(prefers-reduced-motion:reduce){
  .experience-hero .spatial-scene{animation:none}
}