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

/* --- SPLASH SCREEN --- */
#splash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to bottom, rgb(255,0,127), rgb(127,0,255));
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 9999;
  cursor: pointer;
  transition: opacity 0.5s ease;
}

#splash-content {
  text-align: center;
  color: rgb(255,255,127);
  font-family: "Comic Sans MS", Arial, sans-serif;
  font-size: 48px;
  user-select: none;
}

#splash-arrow {
  font-size: 72px;
  margin-bottom: 20px;
  animation: bounce 1s infinite alternate;
}

@keyframes bounce {
  0% { transform: translateY(0); }
  100% { transform: translateY(-20px); }
}

/* ---------- FULLSCREEN BACKGROUND ---------- */
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(
    to bottom,
    rgb(255, 0, 127),
    rgb(127, 0, 255)
  );
  font-family: "Comic Sans MS", Arial, sans-serif;
}

/* ---------- SCALED STAGE ---------- */
#scaler {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 1280px;
  height: 668px;
  transform: translate(-50%, -50%);
  transform-origin: center center;
}

#stage {
  width: 100%;
  height: 100%;
  position: relative;
}

/* ---------- BANNER ---------- */
#banner {
  width: 100%;
  height: 120px;
  position: absolute;
  top: -140px;
  left: 0;
  transition: top 1s ease-out;
}

/* ---------- TITLE ---------- */
#title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: rgb(255, 255, 127);
  font-size: 48px;
  white-space: nowrap;
}

/* ---------- CURSOR ---------- */
#cursor {
  display: inline-block;
  margin-left: 6px;
  font-weight: bold;
  color: rgb(255, 255, 127); /* same as title */
  animation: blink 1s steps(2, start) infinite;
  visibility: hidden;
}

/* ---------- TOP CORNER LOGOS ---------- */

#aki,
#metro-logo {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  object-fit: contain;
  cursor: pointer;
}

/* AKI slightly smaller */
#aki {
  left: 20px;
  height: 96px;   /* was 48px → 80% */
}

/* Metro logo properly scaled */
#metro-logo {
  right: 20px;
  height: 84px;   /* adjust if needed */
}


@keyframes blink {
  to { visibility: hidden; }
}

/* ---------- ICON GRID ---------- */
#icon-grid {
  position: absolute;
  top: 120px;
  left: 0;
  width: 100%;
  height: calc(100% - 120px);

  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 24px;
  padding: 24px;
}

/* ---------- ICON BUTTON ---------- */
.icon {
  width: 140px;
  height: 140px;

  justify-self: center;
  align-self: center;
  cursor: pointer;

  border-radius: 12px;

  background-color: rgba(255, 255, 255, 0.25);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 140px 140px;
}

.icon:hover {
  animation: spinUnspin 0.6s ease-out forwards;
}

@keyframes spinUnspin {
  0%   { transform: scale(1) rotate(0deg); }
  25%  { transform: scale(1.1) rotate(360deg); }
  50%  { transform: scale(1) rotate(-360deg); }
  75%  { transform: scale(1.05) rotate(180deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.icon-link {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}