/* ============================================================
   CODSHIPX AI R18-R9
   CINEMATIC PREMIUM FULL-VIEWPORT ENTRY

   Scope:
   - cinematic entry only
   - no application UI changes
   - no backend changes
   - no JavaScript
   ============================================================ */

/* CODSHIPX_AI_R18_R9_BEGIN */

.r7-r24-cinematic{
  position:fixed !important;
  inset:0 !important;

  width:100vw !important;

  height:100vh !important;
  height:100dvh !important;

  overflow:hidden !important;

  margin:0 !important;
  padding:0 !important;

  background:#000 !important;

  border:0 !important;
  outline:0 !important;

  isolation:isolate !important;

  -webkit-font-smoothing:antialiased;
  backface-visibility:hidden;
}


/* ============================================================
   VIDEO STAGE
   ============================================================ */

.r7-r24-codi-entry{
  position:absolute !important;
  inset:0 !important;

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

  margin:0 !important;
  padding:0 !important;

  overflow:hidden !important;

  background:#000 !important;

  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;

  z-index:0 !important;
}


/* ============================================================
   TRUE CINEMATIC BACKGROUND VIDEO

   R18-R8 used fixed pixel widths.
   R18-R9 turns the actual video into the viewport itself.
   ============================================================ */

.r7-r24-codi-entry video[data-codi-cinematic="1"],
video[data-codi-cinematic="1"]{
  position:absolute !important;

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

  right:auto !important;
  bottom:auto !important;

  display:block !important;

  width:100vw !important;

  height:100vh !important;
  height:100dvh !important;

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

  max-width:none !important;
  max-height:none !important;

  margin:0 !important;
  padding:0 !important;

  object-fit:cover !important;

  /*
   * Slight lower-frame bias:
   * keeps the lower cinematic branding safer on wide screens
   * while retaining the neural/circuit core near optical center.
   */
  object-position:50% 55% !important;

  transform:
    translate3d(-50%,-50%,0)
    scale(1.035) !important;

  transform-origin:50% 50% !important;

  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;

  box-shadow:none !important;

  background:#000 !important;

  opacity:1 !important;

  /*
   * Preserve the source video's real colour grading.
   * No heavy browser filter = cleaner pixels + lower GPU load.
   */
  filter:none !important;

  pointer-events:none !important;
  user-select:none !important;

  -webkit-user-drag:none !important;

  backface-visibility:hidden !important;

  will-change:transform !important;
}


/* ============================================================
   PREMIUM EDGE INTEGRATION

   No rectangular video edge.
   Black source merges into the black stage and receives a
   very soft cinema-style perimeter falloff.
   ============================================================ */

.r7-r24-cinematic::before{
  content:"" !important;

  position:absolute !important;
  inset:-1px !important;

  z-index:2 !important;

  pointer-events:none !important;

  background:

    linear-gradient(
      180deg,
      rgba(0,0,0,.13) 0%,
      rgba(0,0,0,0) 15%,
      rgba(0,0,0,0) 80%,
      rgba(0,0,0,.17) 100%
    ),

    radial-gradient(
      ellipse 88% 80% at 50% 50%,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 48%,
      rgba(0,0,0,.025) 60%,
      rgba(0,0,0,.11) 75%,
      rgba(0,0,0,.34) 100%
    ) !important;
}


/* ============================================================
   SUBTLE CENTRAL LENS BLOOM

   This is CSS light only — not a generated image.
   It helps the circuit core feel embedded in the screen.
   ============================================================ */

.r7-r24-cinematic::after{
  content:"" !important;

  position:absolute !important;
  inset:0 !important;

  z-index:1 !important;

  pointer-events:none !important;

  background:

    radial-gradient(
      circle at 50% 49%,
      rgba(120,255,52,.052) 0%,
      rgba(93,255,43,.021) 13%,
      rgba(68,255,38,.008) 24%,
      transparent 39%
    ),

    radial-gradient(
      ellipse 55% 42% at 50% 50%,
      rgba(36,82,255,.018) 0%,
      transparent 66%
    ) !important;

  opacity:.72 !important;

  mix-blend-mode:screen !important;
}


/* ============================================================
   WEBSITE VERIFY TEXT MUST NOT RETURN
   ============================================================ */

.r7-r24-codi-entry::after{
  content:none !important;
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}


/* Hide native browser video chrome if any browser attempts it. */

.r7-r24-codi-entry
video[data-codi-cinematic="1"]::-webkit-media-controls{
  display:none !important;
}


/* ============================================================
   LARGE / CINEMA DESKTOP
   ============================================================ */

@media (min-width:1600px){

  .r7-r24-codi-entry video[data-codi-cinematic="1"],
  video[data-codi-cinematic="1"]{
    object-position:50% 55% !important;

    transform:
      translate3d(-50%,-50%,0)
      scale(1.045) !important;
  }

}


/* ============================================================
   LAPTOP / 1366 x 768 CLASS

   Still full viewport.
   No return to fixed 500px behaviour.
   ============================================================ */

@media (min-width:901px) and (max-height:800px){

  .r7-r24-codi-entry video[data-codi-cinematic="1"],
  video[data-codi-cinematic="1"]{
    width:100vw !important;

    height:100vh !important;
    height:100dvh !important;

    max-width:none !important;
    max-height:none !important;

    object-fit:cover !important;
    object-position:50% 55% !important;

    transform:
      translate3d(-50%,-50%,0)
      scale(1.035) !important;
  }

}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width:900px){

  .r7-r24-codi-entry video[data-codi-cinematic="1"],
  video[data-codi-cinematic="1"]{
    width:100vw !important;

    height:100vh !important;
    height:100dvh !important;

    max-width:none !important;
    max-height:none !important;

    object-fit:cover !important;
    object-position:50% 52% !important;

    transform:
      translate3d(-50%,-50%,0)
      scale(1.015) !important;
  }

  .r7-r24-cinematic::before{
    background:

      linear-gradient(
        180deg,
        rgba(0,0,0,.11) 0%,
        transparent 16%,
        transparent 82%,
        rgba(0,0,0,.15) 100%
      ),

      radial-gradient(
        ellipse 94% 84% at 50% 50%,
        transparent 0%,
        transparent 55%,
        rgba(0,0,0,.09) 78%,
        rgba(0,0,0,.28) 100%
      ) !important;
  }

}


/* ============================================================
   PORTRAIT

   Portrait screens naturally crop the 16:9 source horizontally.
   Keep the important central AI core perfectly centred.
   ============================================================ */

@media (orientation:portrait){

  .r7-r24-codi-entry video[data-codi-cinematic="1"],
  video[data-codi-cinematic="1"]{
    width:100vw !important;

    height:100vh !important;
    height:100dvh !important;

    object-fit:cover !important;
    object-position:50% 50% !important;

    transform:
      translate3d(-50%,-50%,0)
      scale(1.002) !important;
  }

}


/* ============================================================
   PHONE
   ============================================================ */

@media (max-width:520px){

  .r7-r24-codi-entry video[data-codi-cinematic="1"],
  video[data-codi-cinematic="1"]{
    width:100vw !important;

    height:100vh !important;
    height:100dvh !important;

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

    max-width:none !important;
    max-height:none !important;

    object-fit:cover !important;
    object-position:50% 50% !important;

    transform:
      translate3d(-50%,-50%,0)
      scale(1) !important;
  }

  .r7-r24-cinematic::after{
    opacity:.54 !important;
  }

}


/* CODSHIPX_AI_R18_R9_END */