/* ==========================================================
   VIRELION_OS — PRE-LAUNCH RESPONSIVE GUARD
   Keeps rendered artwork + hotspot geometry synchronized.
========================================================== */

html {
  width:100%;
  max-width:100%;

  -webkit-text-size-adjust:100%;
}


body {
  width:100%;
  max-width:100%;

  overflow-x:hidden;

  overscroll-behavior-x:none;
}


img,
video,
canvas,
svg {
  max-width:100%;
}


.vos-page {
  width:100%;

  min-height:
    100vh;

  min-height:
    100svh;

  overflow:hidden;
}


/* ----------------------------------------------------------
   TABLET + MOBILE
   Scale the full reference stage instead of separately
   resizing the image and its hotspot layer.
---------------------------------------------------------- */

@media(max-width:1180px) {

  #page1 [class*="-reference-stage"],
  #page2 [class*="-reference-stage"],
  #page3 [class*="-reference-stage"],
  #page4 [class*="-reference-stage"],
  #page5 [class*="-reference-stage"],
  #page6 [class*="-reference-stage"] {

    position:absolute !important;

    top:50% !important;
    left:50% !important;

    width:
      max(
        100vw,
        calc(100svh * 1.7777778)
      ) !important;

    height:
      max(
        100svh,
        calc(100vw * .5625)
      ) !important;

    min-width:0 !important;
    min-height:0 !important;

    margin:0 !important;

    transform:
      translate(
        -50%,
        -50%
      ) !important;

    transform-origin:
      center center !important;

    overflow:hidden !important;
  }


  #page1 [class*="-reference-image"],
  #page2 [class*="-reference-image"],
  #page3 [class*="-reference-image"],
  #page4 [class*="-reference-image"],
  #page5 [class*="-reference-image"],
  #page6 [class*="-reference-image"] {

    position:absolute !important;

    inset:0 !important;

    width:100% !important;
    height:100% !important;

    max-width:none !important;

    object-fit:fill !important;

    object-position:
      center center !important;
  }


  /*
   * Keep interactive hotspot layers on the exact same
   * design coordinate plane as the artwork.
   */

  #page1 [class*="hotspot"],
  #page2 [class*="hotspot"],
  #page3 [class*="hotspot"],
  #page4 [class*="hotspot"],
  #page5 [class*="hotspot"],
  #page6 [class*="hotspot"] {

    touch-action:
      manipulation;
  }


  #vosManagedModal {
    padding:
      18px;
  }


  .vos-managed-panel {
    width:
      min(
        820px,
        100%
      );

    max-height:
      calc(
        100svh - 36px
      );
  }

}


/* ----------------------------------------------------------
   PHONE PORTRAIT
---------------------------------------------------------- */

@media(max-width:620px) {

  #vosManagedModal {
    padding:
      9px;
  }


  .vos-managed-panel {
    width:100%;

    max-height:
      calc(
        100svh - 18px
      );

    border-radius:
      18px;
  }


  .vos-managed-panel h2 {
    margin-right:
      42px;

    font-size:
      clamp(
        1.75rem,
        9vw,
        2.45rem
      );
  }


  .vos-managed-media {
    height:
      150px;
  }


  #mainPhotonCanvas {
    opacity:
      .48;
  }

}


/* ----------------------------------------------------------
   SHORT LANDSCAPE PHONE / TABLET
---------------------------------------------------------- */

@media(
  max-height:560px
)
and
(
  orientation:landscape
) {

  .vos-managed-panel {
    max-height:
      calc(
        100svh - 12px
      );

    padding:
      18px 20px;
  }


  .vos-managed-media {
    height:
      120px;
  }


  .vos-managed-panel h2 {
    font-size:
      1.85rem;
  }

}


/* ----------------------------------------------------------
   ACCESSIBILITY / MOTION
---------------------------------------------------------- */

@media(
  prefers-reduced-motion:reduce
) {

  .vos-managed-rail {
    scroll-behavior:auto;
  }


  .vos-managed-arrow {
    transition:none;
  }

}