/* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -ms-overflow-style: none; /* IE and Edge */
}

body {
  font-family: "IMB Plex Mono", monospace;
  padding-top: 95px;
}

ul {
  padding-left: 50px;
}

a:hover {
  color: rgba(255, 140, 0, 1);
}

/* Header */
.header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(210, 236, 245);
  box-shadow: 0px 2px 8px rgba(25, 98, 155, 0.5);
}

/* Navigation buttons */
.nav-vector-container {
  z-index: 3;
  position: relative;
  width: 75px;
  height: 75px;
  cursor: pointer;
  transition: transform 1s, width 1s, height 1s;
}

.nav-vector-innard {
  background-color: rgba(25, 98, 155, 0.8);
  position: absolute;
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%;
  border-radius: 50%;
  transition: transform 1s, width 1s, height 1s;
}

.nav-vector-cog {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 1s, width 1s, height 1s;
}

.options-menu {
  top: 10px;
  left: 10px;
  position: inherit;
  visibility: hidden;
  opacity: 0;
  transition: visibility 1s ease-in-out, opacity 1s ease-in-out;
}

.options-menu a {
  text-decoration: none;
}

.navButton {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(219, 241, 248);
  border-radius: 50%;
  height: 3rem;
  width: 3rem;
  background-color: rgba(25, 98, 155, 1);
  margin: 10px;
}

.navButton:hover {
  cursor: pointer;
}

.mini-cog {
  height: 120%;
  width: 120%;
  position: absolute;
  transition: transform 1s;
}

/* Body content grid */
.bodyContent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: start;
}

/* Left content / flipcard */
#leftContent {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-width: 800px; /* desktop minimum width */
  height: calc(100vh - 95px);
  position: relative;
  z-index: 1;
}

#leftContentInner {
  width: 100%;
  height: 100%; /* fill parent height on desktop */
  max-width: 100%;
  aspect-ratio: 8 / 6;
  perspective: 4000px;
  cursor: pointer;
  position: relative; /* flip sides inside */
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1);
}

#leftContentInner.flipped {
  transform: rotateY(180deg);
}

/* Front face */
.cardFront,
#bgCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

/* Back face */
#bgCanvasBackside {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotateY(180deg);
  backface-visibility: hidden;
  opacity: 0; /* start hidden */
  transition: opacity 0.8s ease-in-out; /* smooth fade */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(25, 98, 155, 0.1);
  box-shadow: 0px 2px 8px rgba(25, 98, 155, 0.5);
  overflow: hidden;
}

#backIframe {
  width: 100%;
  height: 100%;
  border: none;
}

#iframeOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: block;
}

#bgCanvasBackside h1 {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.75rem;
  background-color: red;
  z-index: 3;
  box-shadow: 0px 2px 8px rgba(25, 98, 155, 0.5);
  color: white;
  position: absolute;
  width: 2.75rem;
  height: 2.75rem;
  top: 1rem;
  right: 1rem;
}

#bgCanvasBackside iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1000px; /* your "internal" reference width */
  height: 750px; /* your "internal" reference height */
  transform-origin: top left;
  border: none;
}

/* Scale the iframe dynamically to fill the parent */
#bgCanvasBackside {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotateY(180deg) translateZ(0); /* force GPU compositing */
  backface-visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  will-change: transform, opacity; /* hint to GPU */
}

#backIframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1000px;
  height: 750px;
  transform-origin: top left;
  border: none;
  -webkit-transform: translateZ(0); /* iOS GPU layer */
}

/* Canvas */
#bgCanvas {
  width: 100%;
  height: 100%;
  display: block;
  aspect-ratio: 8 / 6;
}

/* Right content */
.rightContentWrapper {
  width: 100%;
  height: calc(100vh - 95px);
  overflow: hidden;
  position: relative;
}

#rightContent {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 20px;
  width: 100%;
}

#rightContent img {
  min-width: 250px;
  min-height: 150px;
  max-width: 300px;
  object-fit: contain;
  border-radius: 8px;
  display: block;
  visibility: hidden;
}

.caroselItem {
  position: relative;
}

.bidButton {
  position: absolute;
  bottom: 0;
  color: white;
  background-color: rgba(25, 98, 155, 1);
  width: 100%;
  font-family: "IBM Plex Mono", monospace;
  border-radius: 0 0 8px 8px;
  padding: 1rem;
  font-size: 1rem;
}

.bidButton a {
  text-decoration: none;
  color: white;
}

/* Spinner */
.spinner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 8px solid rgba(255, 255, 255, 0.3);
  border-top: 8px solid orange;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
  z-index: 9999;
}

/* Media Queries */
@media (max-width: 1079px) {
  .bodyContent {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    gap: 20px;
  }

  #leftContent {
    max-width: 100%;
    min-width: unset;
    height: auto;
  }

  #leftContentInner {
    width: 100%;
    height: calc(100vw * 6 / 8);
    height: auto; /* scale according to width */
  }

  #bgCanvas {
    width: 100%;
    height: auto;
  }

  .rightContentWrapper {
    height: auto;
    overflow-x: auto;
  }

  #rightContent {
    flex-wrap: nowrap;
    width: max-content;
  }

  #rightContent img {
    width: 250px;
  }
}

/* Spinner animation */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}