@charset "utf-8";
/* CSS Document */

body {
  margin: auto;
  font-family: sans-serif;
  background-color: black;
  overflow: hidden; /* Prevent scroll before enter */
}

body::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  background: url("/Entry button image hover.jpg") no-repeat -9999px -9999px;
}

h1 {
  color: white;
  z-index: 0;
}

img {
  height: 100%;
  margin: auto;
  position: fixed;
  display: block;
 
}

a {
  cursor: pointer;
  z-index: 1;
}

/* --- Layered cabinet images --- */
#link-container,
#backing {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* The background image (bottom layer) */
#backing {
  z-index: 0;
  pointer-events: none;
  height: 100dvh;
  width: 100%;
  object-fit: cover;
}

/* The foreground overlay (top layer that hides the links) */
#foreground {
  position: fixed;
  top: 0;
  left: 0;
  height: 100dvh;
  width: 100%;
  object-fit: cover;
  z-index: 3;
  pointer-events: none;
}

/* ---- Your link styling (unchanged) ---- */
/* (All your individual #cdct-link, #brands-link, etc. remain unchanged) */

#cdct-link {
	background-image: url("../FIGHT Vertical.png");
	background-position: center;
	height: 22.5dvh;
	width: 12.5dvh;
	background-size: cover;
	color: transparent;
	top: 50%;
	left: 50%;
	transform: translate(-185%, -154%);
	position: absolute;
}

#cdct-link:hover {
	transform: translate(-185%, -184%);
	transition: 0.5s ease-in-out;
}

#soar-link {
	background-image: url("../soarlinkimage.png");
	background-position: center;
	height: 15dvh;
	width: 10.5dvh;
	background-size: cover;
	color: transparent;
	top: 50%;
	left: 50%;
	transform: translate(+125%, -110%);
	position: absolute;
}

#soar-link:hover {
	transform: translate(+125%, -135%);
	transition: 0.5s ease-in-out;
}

#brands-link {
	background-image: url("../Designing Dialogue.png");
	background-position: center;
	height: 19dvh;
	width: 16.2dvh;
	background-size: cover;
	color: transparent;
	top: 50%;
	left: 50%;
	transform: translate(+35%, -255%);
	position: absolute;
}

#brands-link:hover {
	transform: translate(+35%, -275%);
	transition: 0.5s ease-in-out;
}

#photos-link {
	background-image: url("../Photo1.png");
	background-position: center;
	height: 15dvh;
	width: 13dvh;
	background-size: cover;
	color: transparent;
	top: 50%;
	left: 50%;
	transform: translate(-208%, +63%);
	position: absolute;
}

#photos-link:hover {
	transform: translate(-208%, +33%);
	transition: 0.5s ease-in-out;
}

#illustrations-link {
	background-image: url("../Drawing1.png");
	background-position: center;
	height: 14dvh;
	width: 10dvh;
	background-size: cover;
	color: transparent;
	top: 50%;
	left: 50%;
	transform: translate(-50%, +175%);
	position: absolute;
}

#illustrations-link:hover {
	transform: translate(-50%, +150%);
	transition: 0.5s ease-in-out;
}

#underdogs-link {
	background-image: url("../Underdog1.png");
	background-position: left;
	height: 18dvh;
	width: 10dvh;
	background-size: cover;
	color: transparent;
	top: 50%;
	left: 50%;
	transform: translate(-55%, -103%);
	position: absolute;
}

#underdogs-link:hover {
	transform: translate(-55%, -133%);
	transition: 0.5s ease-in-out;
}

#penguin-link {
	background-image: url("../Jekyll and Hyde.png");
	background-position: center;
	height: 8dvh;
	width: 16dvh;
	background-size: cover;
	color: transparent;
	top: 50%;
	left: 50%;
	transform: translate(-38%, +105%);
	position: absolute;
}

#penguin-link:hover {
	transform: translate(-25%, +63%);
	transition: 0.5s ease-in-out;
}

#commissions-link {
	background-image: url("../Commission1.png");
	background-position: center;
	height: 15dvh;
	width: 13dvh;
	background-size: cover;
	color: transparent;
	top: 50%;
	left: 50%;
	transform: translate(+78%, +197%);
	position: absolute;
}

#commissions-link:hover {
	transform: translate(+78%, +182%);
	transition: 0.5s ease-in-out;
}

/* ---- Overlay & Button System ---- */

/* Hide main content until overlay disappears */
#main-content {
  opacity: 0;
  transition: opacity 0.6s ease;
}

#main-content:target {
  opacity: 1;
}

/* Fullscreen overlay */
#overlay {
  position: fixed;
  inset: 0;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.5s ease;
}

#enter-btn {
  display: flex;
  justify-content: center;
  align-items: center;
}

#enter-img {
  height: 100dvh;
  width: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}

#enter-btn:hover #enter-img {
  content: url("/Entry button image hover.jpg");
  opacity: 0.9;
}

/* Fade overlay away */
#main-content:target ~ #overlay {
  opacity: 0;
  pointer-events: none;
}

/* Mobile fix: ensure button image fits vertically */
@media (max-aspect-ratio: 1/1) {
  #enter-btn {
    background-size: 100dvh auto; /* Scale image by height on vertical screens */
    background-position: center center;
  }
}