/* ---------------------------
   RESET / BASE STYLES
---------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: sans-serif;
}

/* ---------------------------
   BACKGROUND
---------------------------- */
.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("background.png") no-repeat center center / cover;
  z-index: -1;
}

/* ---------------------------
   PAGE BORDER FRAME
---------------------------- */
.page-frame {
  position: relative;
  width: 100%;
  height: 100vh;
  border: 20px solid black;
  box-sizing: border-box;
  z-index: 1; /* Above background */
  overflow: hidden;
}

/* ---------------------------
   TITLE / LOGO
---------------------------- */
.title-logo {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  max-width: 600px;
  z-index: 2;
}

/* ---------------------------
   LAYERED IMAGES (ANCHOR: LOWER RIGHT)
---------------------------- */
.image-stack {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1;             /* Above border, below iframe */
  pointer-events: none;   /* Don't block clicks */
}

.layer {
  position: absolute;
  bottom: 0;
  left: 0;
  max-width: 55vw;                /* Responsive size */
  transform: translate(0px, 0px); /* Shared inward offset */
}

.layer1 {
  z-index: 2;
}

.layer2 {
  z-index: 3;
}

/* ---------------------------
   DEMO BUTTON
---------------------------- */
.demo-button {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1rem 2rem;
  font-size: 1.25rem;
  border: none;
  border-radius: 0.05rem;
  background-color: #111111;
  color: white;
  cursor: pointer;
  transition: background 0.2s ease;
  z-index: 2;
}

.demo-button:hover {
  background-color: #000000;
}

/* ---------------------------
   IFRAME CONTAINER
---------------------------- */
.iframe-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80vw;             /* scales responsively */
  aspect-ratio: 16 / 9;    /* maintains perfect 16:9 */
  max-width: 1280px;       /* optional max width for large screens */
  max-height: 720px;       /* optional safety cap */
  display: none;
  z-index: 10;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  background: black;       /* fills behind iframe if letterboxed */
}

.iframe-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* ---------------------------
   FOOTER LOGOS
---------------------------- */
footer {
  position: fixed;
  bottom: 2%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4rem;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

footer img {
  height: 40px;
  transition: transform 0.2s ease;
}

footer img:hover {
  transform: scale(1.1);
}

/* ---------------------------
   DARK OVERLAY (initially hidden)
---------------------------- */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6); /* adjust opacity */
  opacity: 0;
  pointer-events: none; /* ignore clicks */
  transition: opacity 0.4s ease; /* smooth fade */
  z-index: 1; /* Above background, below content */
}

.overlay.active {
  opacity: 1;
}