/* Reset & base */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: Arial, sans-serif;
  background: #000;
}

.content {
  position: relative;
  width: 1920px;
  height: 1080px;
  transform-origin: top left;
}

.rotate-message {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  color: #fff;
  z-index: 9999;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem;
  font-family: Arial, sans-serif;
}

/* Layers */
.layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.background {
  z-index: 1;
  background-image: url('images/background.png');
  background-size: cover;
  background-position: center;
  pointer-events: none;
}
.layer1 {
  z-index: 2;
  background-image: url('images/layer1.png');
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}
.layer2 { z-index: 3; pointer-events: none; }
.layer3 { pointer-events: none; }  /* lights never block the mouse */
.layer4 { z-index: 20; }           /* icons on top for hover/click */
.layer5 { z-index: 6; pointer-events: none; }   /* illustrations */
.layer6 { z-index: 30; width: auto; height: auto;}                          /* CA */

/* Overhead */
.overhead { position: absolute; left: 0; top: 0; }

/* Lights (default dim; brighten via JS class toggle) */
/* Lights (Layer 3) */
.light {
  position: absolute;
  width: 50px;

  /* Invisible until hovered */
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease, filter 0.25s ease;
}

.light.active {
  opacity: 1; /* shows when hovered */
  transform: scale(1.15);
  filter: drop-shadow(0 0 15px yellow);
  z-index: 9; /* above other art but still below icons */
}

/* Light positions */
.light1 { left: 662px; top: 245px; }
.light2 { left: 760px; top: 245px; }
.light3 { left: 860px; top: 245px; }
.light4 { left: 957px; top: 245px; }
.light5 { left: 1041px; top: 245px; }

/* Icons */
.icon-link { position: absolute; display: inline-block; }
.icon { display: block; cursor: pointer; }

/* Icon positions/sizes (match original) */
.icon-community { width: 40px; }
.icon-twitter   { width: 31px; }
.icon-pumpfun   { width: 38px; }
.icon-dexscreener { width: 40px; }
.icon-lore      { width: 45px; }

.icon-link[aria-label="Community"]   { left: 667px; top: 255px; }
.icon-link[aria-label="Twitter"]     { left: 770px; top: 253px; }
.icon-link[aria-label="Pumpfun"]     { left: 866px; top: 250px; }
.icon-link[aria-label="Dexscreener"] { left: 962px; top: 248px; }
.icon-link[aria-label="Lore"]        { left: 1045px; top: 262px; }

/* Illustrations (Layer 5) */
.Illustrations {
  position: absolute;
  left: 1253px;
  top: 66px;
  width: 264px;

  /* Always in flow; visibility controlled via opacity for smoother, reliable rotation */
  opacity: 0;
  transition: opacity 300ms ease-in-out;
  pointer-events: none; /* already on layer5, but safe */
}

/* The one currently shown */
.Illustrations.show {
  opacity: 1;
}


/* CA elements */
.CA { 
  pointer-events: none; 
  position: absolute; 
  left: 655px; 
  top: 105px; 
  width: 100px; 
  cursor: default; 
}
#caAddress {
  pointer-events: auto;             /* MUST be clickable */
  position: absolute;               /* keep its positioning */
  left: 765px;                      /* keep your coordinates */
  top: 105px;
  z-index: 31;                      /* on top of everything nearby */
  width: auto; height: auto;        /* avoid giant invisible hitbox */
}