/* Full-screen overlay that will slide up (off the top) */
#svgSplash {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;         /* or a color if you want a splash bg */
  z-index: 9999;
  transform: translateY(0);        /* start on-screen */
  transition: transform 600ms ease;
}

/* When hidden, move entirely above the viewport */
.is-hidden {
  display: none !important;
  pointer-events: none;
  opacity: 0 !important;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  #svgSplash, #svgSplash1 { transition: none; }
}
:root{
  /* thickness (visual height/width of the border images) */
  --border-thickness: 40px;

  /* image sources */
  --img-top: url('../images/border/border-top.png');       /* e.g. /assets/border-top.png */
  --img-right: url('../images/border/border-right.png');
  --img-bottom: url('../images/border/border-bottom.png');
  --img-left: url('../images/border/border-left.png');

  /* corner overlap priority (bigger = on top) */
  --z-top: 40;
  --z-right: 30;
  --z-bottom: 20;
  --z-left: 10;
}

body{
  background: url('../images/svganim/launchpad_mask_main.svg');
  /* background-color: #0b1b31; */
  height: 100%;
  width: 100%;
} 

.containerIframeMain {
        max-width: 1024px !important;
        width: 100%;
        margin:auto;
        padding: 1% 0;
    }
.containerIframe {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 75%;
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  border: 0;
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  animation: slowDisplay 3s 1;
}
@keyframes slowDisplay { 0%{opacity:0} 100%{opacity:1} }

/* BORDER OVERLAYS */
.frame-border{
  position: absolute;
  pointer-events: none;       /* clicks go through to the iframe */
  background-repeat: repeat;  /* repeat along the edge */
  background-position: center;
}

/* Top */
.frame-border--top{
  left: 0; right: 0; top: 0;
  height: 20px;
  background-image: var(--img-top);
  background-size: auto 100%;       /* stretch vertically, repeat-x */
  background-repeat: repeat-x;
  z-index: var(--z-top);
  background-size: cover;
}

/* Right */
.frame-border--right{
  top: 0; bottom: 0; right: 0;
  width: 28px;
  background-image: var(--img-right);
  background-size: 100% auto;       /* stretch horizontally, repeat-y */
  background-repeat: repeat-y;
  z-index: var(--z-right);
  background-size: cover;
}

/* Bottom */
.frame-border--bottom{
  left: 0; right: 0; bottom: 0;
  height: var(--border-thickness);
  background-image: var(--img-bottom);
  background-size: auto 100%;
  background-repeat: repeat-x;
  z-index: var(--z-bottom);
  background-size: cover;
}

/* Left */
.frame-border--left{
  top: 0; bottom: 0; left: 0;
  width:23px;
  background-image: var(--img-left);
  background-size: 100% auto;
  background-repeat: repeat-y;
  z-index: var(--z-left);
  background-size: cover;
}

/* Optional: nudge outward a few px if you want borders to “overhang”
   the corners more aggressively while still overlapping cleanly */
.frame-border--top    { transform: translateY(calc(-1px)); }
.frame-border--right  { transform: translateX(calc( 1px)); }
.frame-border--bottom { transform: translateY(calc( 1px)); }
.frame-border--left   { transform: translateX(calc(-1px)); }

@media screen and (orientation: portrait) {
  .containerIframeMain {
    padding-top: 9%;
  }
    .containerIframe {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 200%;scale: 0.95;
}
}
@media screen and (orientation: portrait) and (min-width:500px) {
.responsive-iframe {
  height: 90% !important;
}
.border-r, .border-l{
   height: 90% !important;
}
.border-b{
    bottom: 10% !important;
}
.border-b-r {
    bottom: calc(10% + 15px) !important;
}
.border-b-l {
    bottom: 10% !important;
}
  .containerIframeMain {
        padding-top: 9%;
        height: 92vh !important;
    }
    .containerIframe {
        height: 90vh !important;
                padding-top: 20%;
    }
}
  /* All border pieces */
.border {
  position: absolute;
  pointer-events: none; /* keep iframe clickable */
  background-repeat: no-repeat;
  background-size:cover;
  z-index: 10;
}

/* Corners (fixed size) */
.border-t-l {
  top: 0; left: 0;
  width: 40px; height: 40px;
  background-image: url("../images/border/mask_t_l.png");
  background-size:cover;
}
.border-t-r {
  top: 0; right: 0;
  width: 40px; height: 40px;
  background-image: url("../images/border/mask_t_r.png");
  background-size:cover;
}
.border-b-l {
  bottom: 0; left: 0;
  width: 40px; height: 40px;
  background-image: url("../images/border/mask_b_l.png");
  background-size:cover;
}
.border-b-r {
      bottom: 25px;
    right: 20px;
    width: 40px;
    height: 40px;
    background-image: url("../images/border/mask_b_r.png");
    /* background-size: cover; */
    scale: 2;
}

/* Top / Bottom edges (stretch horizontally) */
.border-t {
    width: 100%;
    top: -1px;
    /* left: 40px; */
    /* right: 40px; */
    height: 15px;
    background-image: url("../images/border/mask_s_c_t.png");
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-size: contain;
}
.border-b {
    bottom: 0;
    left: 0px;
    right: 0px;
    height: 15px;
    background-image: url("../images/border/mask_s_c_b.png");
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-size: cover;
    width: 100%;
}

/* Left / Right edges (stretch vertically) */
.border-l {
    top: 0px;
    bottom: 0px;
    left: 0;
    width: 15px;
    background-image: url("../images/border/mask_s_c_l.png");
    background-repeat: repeat-y;
    background-size: 100% auto;
    background-size: cover;
    height: 100%;
}
.border-r {
top: 0px;
    bottom: 0px;
    right: -1px;
    width: 15px;
    background-image: url("../images/border/mask_s_c_r.png");
    background-repeat: repeat-y;
    background-size: 100% auto;
    background-size: cover;
    height: 100%;
}