/* Option A: one film, three physically expanding arch openings.
   The old three-player panorama/portal crossfade remains in the DOM for
   compatibility but is never painted when the arch morph is enabled. */
body[data-arch-morph-enabled="true"] #panorama{opacity:0!important;visibility:hidden!important;pointer-events:auto}
body[data-arch-morph-enabled="true"] #portal-film,
body[data-arch-morph-enabled="true"] #hold-scene-film,
body[data-arch-morph-enabled="true"] .hold-scene-poster{opacity:0!important;visibility:hidden!important}
body[data-arch-morph-enabled="true"] .arch-morph-media{
 position:absolute;inset:0;z-index:5;display:block;pointer-events:none;
 overflow:hidden;isolation:isolate;
 background:linear-gradient(120deg,#251332,#321b47 60%,#180e28);
 will-change:clip-path;
}
body[data-arch-morph-enabled="true"] .arch-morph-media > img,
body[data-arch-morph-enabled="true"] .arch-morph-media > video{
 display:block;position:absolute;inset:0;width:100%;height:100%;
 object-fit:cover;object-position:center center;pointer-events:none;
}
body[data-arch-morph-enabled="true"] .arch-morph-media > img{
 opacity:1;filter:saturate(.87) contrast(1.01);
}
body[data-arch-morph-enabled="true"] .arch-morph-media > video{
 opacity:0;filter:saturate(.87) contrast(1.01);will-change:opacity;
}
body[data-arch-morph-enabled="true"] .arch-morph-media > video.is-ready{opacity:1}
body[data-arch-morph-enabled="true"] .arch-morph-outline{
 position:absolute;inset:0;width:100%;height:100%;z-index:5;
 pointer-events:none;overflow:visible;filter:drop-shadow(0 0 4px #dd94f677);
}
body[data-arch-morph-enabled="true"] .arch-morph-outline path{
 fill:none;stroke:rgba(232,209,250,.42);stroke-width:1.3;
}
body[data-arch-morph-enabled="true"] .arch-morph-mask-defs{
 width:0;height:0;position:absolute;overflow:hidden;pointer-events:none;
}
@media(max-width:760px){
 body[data-arch-morph-enabled="true"] .arch-morph-outline path{stroke-width:.9}
 body[data-arch-morph-enabled="true"] .arch-morph-media > video,
 body[data-arch-morph-enabled="true"] .arch-morph-media > img{
   object-position:center center;
 }
}
@media(prefers-reduced-motion:reduce){
 body[data-arch-morph-enabled="true"] .arch-morph-media{will-change:auto}
}

/* Original Silver Glass optical lens now follows the *visible* single-video
   arch mask. It is clipped by the exact same SVG as the selected film. */
body[data-arch-morph-enabled="true"] .arch-morph-lens{
  --lens-x:50%;--lens-y:50%;
  position:absolute;inset:0;z-index:3;pointer-events:none;
  opacity:0;visibility:hidden;will-change:opacity;
  background:radial-gradient(ellipse 104px 118px at var(--lens-x) var(--lens-y),
    rgba(247,252,255,.38) 0%,rgba(221,246,255,.14) 32%,
    rgba(214,233,255,.07) 53%,transparent 83%);
  -webkit-backdrop-filter:brightness(1.12) contrast(1.05) saturate(1.06);
  backdrop-filter:brightness(1.12) contrast(1.05) saturate(1.06);
  -webkit-mask-image:radial-gradient(ellipse 126px 140px at var(--lens-x) var(--lens-y),
    #000 5%,transparent 90%);
  mask-image:radial-gradient(ellipse 126px 140px at var(--lens-x) var(--lens-y),
    #000 5%,transparent 90%);
}
body[data-arch-morph-enabled="true"] .arch-morph-lens::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 26px 44px at var(--lens-x) var(--lens-y),
    rgba(255,255,255,.15),transparent 85%);
}
body.motion-off .arch-morph-lens{opacity:0!important;visibility:hidden!important}
@media(prefers-reduced-motion:reduce){
  body[data-arch-morph-enabled="true"] .arch-morph-lens{display:none!important}
}