/* ============================================================
   CODSHIPX AI R18-R10
   CINEMATIC MASTER SCALE

   The MP4 itself contains large black margins.
   R18-R10 optically zooms the source frame instead of merely
   enlarging the HTML video element.
   ============================================================ */

/* CODSHIPX_AI_R18_R10_BEGIN */


/* ============================================================
   MASTER STAGE
   ============================================================ */

.r7-r24-cinematic,
.r7-r24-codi-entry{
  background:#000 !important;
  overflow:hidden !important;
}


/* ============================================================
   DESKTOP MASTER OPTICAL ZOOM

   Important:
   width/height stay viewport-sized.
   transform scale crops BLACK padding inside the source video.
   ============================================================ */

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

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

  width:100vw !important;

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

  min-width:100vw !important;
  min-height:100vh !important;

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

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

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

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

  background:#000 !important;
  box-shadow:none !important;

  /*
   * MASTER CINEMA CROP
   *
   * Source has large baked-in black padding.
   * 2.65x removes that dead frame and gives the circuitry /
   * Codi reveal the intended premium visual presence.
   */
  transform:
    translate3d(-50%,-50%,0)
    scale(2.65) !important;

  transform-origin:50% 50% !important;

  filter:
    brightness(1.03)
    contrast(1.045)
    saturate(1.035) !important;

  opacity:1 !important;

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

  backface-visibility:hidden !important;
  will-change:transform !important;
}


/* ============================================================
   CINEMA VIGNETTE

   Keeps the scene deep-black and prevents the enlarged source
   from ever feeling like a cropped rectangle.
   ============================================================ */

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

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

  z-index:5 !important;
  pointer-events:none !important;

  background:

    linear-gradient(
      to bottom,
      rgba(0,0,0,.18) 0%,
      rgba(0,0,0,.035) 13%,
      rgba(0,0,0,0) 28%,
      rgba(0,0,0,0) 70%,
      rgba(0,0,0,.055) 86%,
      rgba(0,0,0,.25) 100%
    ),

    radial-gradient(
      ellipse 79% 72% at 50% 49%,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 51%,
      rgba(0,0,0,.045) 65%,
      rgba(0,0,0,.16) 82%,
      rgba(0,0,0,.44) 100%
    ) !important;
}


/* ============================================================
   CENTRAL ENERGY DEPTH

   Extremely subtle. No fake graphic, no generated image.
   ============================================================ */

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

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

  z-index:4 !important;
  pointer-events:none !important;

  background:
    radial-gradient(
      circle at 50% 49%,
      rgba(128,255,56,.055) 0%,
      rgba(103,255,49,.021) 12%,
      rgba(62,255,37,.006) 27%,
      transparent 43%
    ) !important;

  opacity:.68 !important;
  mix-blend-mode:screen !important;
}


/* ============================================================
   PREMIUM POWERED-BY SAFE AREA

   The source-video footer is intentionally cropped when the
   cinematic zoom is applied, therefore the branding is rendered
   independently in the website safe-zone.
   ============================================================ */

.r7-r24-codi-entry::before{
  content:"POWERED BY" !important;

  position:absolute !important;

  left:calc(50% - 8px) !important;
  bottom:28px !important;

  z-index:20 !important;

  display:block !important;

  color:rgba(191,198,207,.56) !important;

  font-family:
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;

  font-size:10px !important;
  font-weight:500 !important;

  letter-spacing:.11em !important;
  line-height:1 !important;

  white-space:nowrap !important;

  transform:translateX(-100%) !important;

  pointer-events:none !important;
}


.r7-r24-codi-entry::after{
  content:"POWER LANKA" !important;

  position:absolute !important;

  left:calc(50% + 2px) !important;
  bottom:27px !important;

  z-index:20 !important;

  display:block !important;

  color:rgba(255,255,255,.93) !important;

  font-family:
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;

  font-size:11px !important;
  font-weight:800 !important;

  letter-spacing:.055em !important;
  line-height:1 !important;

  white-space:nowrap !important;

  pointer-events:none !important;

  text-shadow:
    0 0 18px rgba(255,255,255,.035) !important;
}


/* ============================================================
   VERY LARGE DESKTOP
   ============================================================ */

@media (min-width:1800px) and (min-height:850px){

  .r7-r24-codi-entry video[data-codi-cinematic="1"],
  video[data-codi-cinematic="1"]{
    transform:
      translate3d(-50%,-50%,0)
      scale(2.72) !important;
  }

}


/* ============================================================
   STANDARD LAPTOP / 1366 x 768
   Slightly safer vertical crop.
   ============================================================ */

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

  .r7-r24-codi-entry video[data-codi-cinematic="1"],
  video[data-codi-cinematic="1"]{
    transform:
      translate3d(-50%,-50%,0)
      scale(2.42) !important;
  }

  .r7-r24-codi-entry::before{
    bottom:20px !important;
  }

  .r7-r24-codi-entry::after{
    bottom:19px !important;
  }

}


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

@media (max-width:900px) and (orientation:landscape){

  .r7-r24-codi-entry video[data-codi-cinematic="1"],
  video[data-codi-cinematic="1"]{
    transform:
      translate3d(-50%,-50%,0)
      scale(2.12) !important;
  }

}


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

@media (max-width:900px) and (orientation:portrait){

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

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

}


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

@media (max-width:520px){

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

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

  .r7-r24-codi-entry::before{
    left:calc(50% - 6px) !important;
    bottom:18px !important;

    font-size:8px !important;
    letter-spacing:.1em !important;
  }

  .r7-r24-codi-entry::after{
    left:calc(50% + 1px) !important;
    bottom:17px !important;

    font-size:9px !important;
  }

}


/* ============================================================
   REDUCED MOTION

   We do not disable the authored video here because the existing
   app controls the cinematic playback lifecycle.
   ============================================================ */

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

  .r7-r24-codi-entry video[data-codi-cinematic="1"],
  video[data-codi-cinematic="1"]{
    will-change:auto !important;
  }

}


/* CODSHIPX_AI_R18_R10_END */