/* =========================================================
   site.css — Final Full Build (User-Specified Desktop + Mobile)
   ========================================================= */

:root {
  --brand-font: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ---------- Base Reset ---------- */
html,body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #0b0b0b;
  color: #111;
  font-family: var(--brand-font);
}

#scene,#world {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  will-change: transform;
}

.map-bg {
  position: absolute;
  inset: 0;
  background: #000 url("/assets/images/background.jpeg") center/cover no-repeat;
  z-index: 0;
}

/* ---------- Title / Wordmark ---------- */
.brand {
  position: fixed;
  top: 5%;
  left: 5%;
  z-index: 4;
}
.wordmark {
  width: 40vw;               /* fills roughly 5–40% width */
  max-width: 2000px;
  height: auto;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.35));
}

/* ---------- Badge Base ---------- */
.badge-link {
  position: absolute;
  transform: translate(-50%, -100%);
  z-index: 5;
}
.badge {
  display: block;
  width: auto;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.25));
  transition: transform .65s ease-in-out, filter .65s ease-in-out;
  transform-origin: 50% 50%;
}

/* =========================================================
   DESKTOP  (4K / Large Screens)
   ========================================================= */

/* Creation Station – 1× bigger, lower center */
.badge-link[href="/freelance/creation-station/"] {
  left: 46%;
  top: 44%;
}
.badge-link[href="/freelance/creation-station/"] .badge {
  width: 10vw;
}

/* Community – 2× bigger, centered bottom */
.badge-link[href="/freelance/community/"] {
  left: 47%;
  top: 89%;
}
.badge-link[href="/freelance/community/"] .badge {
  width: 24vw;
}

/* Contact Us – right bottom, ~15% width */
.badge-link[href="/freelance/contact/"] {
  left: 75%;
  top: 90%;
}
.badge-link[href="/freelance/contact/"] .badge {
  width: 15vw;
}

/* Events – left bottom zone, between left 5–40% and top 75–90% */
.badge-link[href="/freelance/events/"] {
  left: 25%;
  top: 85%;
  transform: translate(-50%, -50%);
}
.badge-link[href="/freelance/events/"] .badge {
  width: 30vw;
}

/* Tír na NÓg – small icon, 1× bigger, 10% lower */
.badge-link[href="/freelance/tir-na-nog/"] {
  left: 90%;
  top: 20%;
}
.badge-link[href="/freelance/tir-na-nog/"] .badge {
  width: 10vw;
}

/* ---------- Zoom Behaviour ---------- */
.badge-link.active {
  left: 50vw !important;
  top: 50vh !important;
  transform: translate(-50%, -50%) !important;
  z-index: 9999;
}
.badge-link.active .badge {
  transform: scale(2.5);
}
.badge-link[href$="/freelance/tir-na-nog/"].active .badge {
  transform: scale(7);
}

/* =========================================================
   MOBILE PORTRAIT ≤520px
   ========================================================= */
@media (max-width:520px) and (orientation:portrait) {
  .wordmark { width: 70vw; }

  /* Creation Station – 2× smaller */
  .badge-link[href="/freelance/creation-station/"] .badge { width: 5vw; }

  /* Events – 3× smaller, left 10%, top 65% */
  .badge-link[href="/freelance/events/"] {
    left: 10%;
    top: 65%;
  }
  .badge-link[href="/freelance/events/"] .badge { width: 6vw; }

  /* Contact Us – 2× bigger, slightly higher (top 48%) */
  .badge-link[href="/freelance/contact/"] {
    left: 75%;
    top: 48%;
  }
  .badge-link[href="/freelance/contact/"] .badge { width: 12vw; }

  /* Community – 3× bigger, left 75%, top 75% */
  .badge-link[href="/freelance/community/"] {
    left: 75%;
    top: 75%;
  }
  .badge-link[href="/freelance/community/"] .badge { width: 18vw; }

  /* Tír na NÓg – 4× bigger, hugging right corner */
  .badge-link[href="/freelance/tir-na-nog/"] {
    left: 108%;
    top: 5%;
    transform: translate(-100%, -50%);
  }
  .badge-link[href="/freelance/tir-na-nog/"] .badge { width: 14vw; }

  .badge-link.active .badge { transform: scale(2.5); }
  .badge-link[href$="/freelance/tir-na-nog/"].active .badge { transform: scale(3.5); }
}

/* =========================================================
   MOBILE LANDSCAPE ≤420px height
   ========================================================= */
@media (max-height:420px) and (orientation:landscape) {
  .wordmark { width: 45vw; }

  /* Creation Station – 1× bigger */
  .badge-link[href="/freelance/creation-station/"] .badge { width: 15vw; }

  /* Community – 1× bigger */
  .badge-link[href="/freelance/community/"] .badge { width: 18vw; }

  /* Events – same size as Contact, left edge 5% */
  .badge-link[href="/freelance/events/"] {
    left: 5%;
    top: 80%;
  }
  .badge-link[href="/freelance/events/"] .badge { width: 24vw; }

  /* Contact Us – opposite side, same visual size */
  .badge-link[href="/freelance/contact/"] {
    left: 85%;
    top: 80%;
  }
  .badge-link[href="/freelance/contact/"] .badge { width: 24vw; }

  /* Tír na NÓg – 1× bigger, 10% lower */
  .badge-link[href="/freelance/tir-na-nog/"] {
    left: 90%;
    top: 20%;
  }
  .badge-link[href="/freelance/tir-na-nog/"] .badge { width: 10vw; }

  .badge-link.active .badge { transform: scale(2); }
  .badge-link[href$="/freelance/tir-na-nog/"].active .badge { transform: scale(3); }
}

/* =========================================================
   END FILE
   ========================================================= */