/* =========================================================
   BASE PAGE STYLE
   ========================================================= */
body {
  color: black;
  font-family: Verdana;

  /* Full-screen background image. */
  background-image: url('hkjl.jpg');
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

html {
  overflow: hidden;
}

/* Hide the scrollbar visually (still scrollable) */
::-webkit-scrollbar {
  width: 0;
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: transparent;
}

/* Custom text-selection highlight color */
::selection {
  background: #f7abcf;
  color: #2e6f40;
}

a {
  text-decoration: none;
  color: black;
}

/* =========================================================
   CURSOR
   Using the browser's normal default cursor. If you want a
   custom one later, cursors-4u.net is a free public library:
   https://www.cursors-4u.com/
   ========================================================= */

/* =========================================================
   BANNER
   ========================================================= */
.banner-container {
  position: absolute;
  top: 10px;
  left: 20px;
  z-index: 5;
}

.banner-image {
  width: 300px;
  height: auto;
  display: block;
}

/* Visitor counter, pinned to the top-right of the whole page */
.top-right-counter {
  position: fixed;
  top: 16px;
  right: 20px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 6px;
}

.counter-label {
  font-family: 'Tahoma', sans-serif;
  font-size: 14px;
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

.counter {
  font-family: 'Courier New', monospace;
  font-size: 24px;
  font-weight: bold;
  background: #000;
  color: #a259ff;
  display: inline-block;
  padding: 2px 10px;
  letter-spacing: 3px;
}

/* =========================================================
   SOUNDCLOUD EMBED
   Sits just below the visitor counter, top-right of the page.
   ========================================================= */
.soundcloud-embed {
  position: fixed;
  top: 90px;
  right: 20px;
  z-index: 10;
  width: 300px;
}

/* On mobile, JS shrinks the iframe visually via CSS transform
   (see scaleSoundCloudEmbed() in the script) since SoundCloud's
   own widget doesn't scale its internal UI down cleanly on its
   own. This wrapper just clips the transformed iframe to its
   intended visible size. */
.soundcloud-scale-wrapper {
  overflow: hidden;
}

/* =========================================================
   BOTTOM-LEFT BLOCK
   Bio text stacked above the contact info, both pinned to the
   bottom-left where the background is darker/easier to read.
   ========================================================= */
.bottom-left-block {
  position: fixed;
  bottom: 16px;
  left: 20px;
  z-index: 10;
  width: 280px;
}

.bio-block {
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
  font-size: 13px;
  line-height: 1.5;
  text-align: justify;
  margin-bottom: 24px;
}

.bottom-left-contact {
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
  font-size: 17px;
}

.bottom-left-contact .dot {
  margin: 0 8px;
  opacity: 0.7;
}

.bottom-left-contact a {
  color: #fff;
  transition: color 0.2s ease;
}

.bottom-left-contact a:hover {
  color: #39ff14; /* neon green on hover */
  text-decoration: underline;
}

/* Libertinus Mono for body-copy text */
.libertinus-mono-regular {
  font-family: "Libertinus Mono", monospace;
  font-weight: 400;
  font-style: normal;
}

/* =========================================================
   PORTRAIT PHOTO
   ========================================================= */
.portrait-wrapper {
  position: fixed;
  bottom: 16px;
  right: 20px;
  z-index: 10;
}

.portrait-photo {
  display: block;
  width: 242px; /* 10% bigger than before (220px) */
  height: auto;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}

/* Same hover-label trick used on the floating icons */
.portrait-wrapper::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: "Libertinus Mono", monospace;
  font-size: 12px;
  color: #fff;
  background: rgba(0, 0, 0, 0.75);
  padding: 3px 8px;
  border-radius: 3px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.portrait-wrapper:hover::after {
  opacity: 1;
}

/* =========================================================
   FLOATING ICONS
   Positioned across the whole page (fixed to the viewport);
   their exact top/left values get overwritten randomly by the
   script in index.html on every page load.
   ========================================================= */
.floating-icons {
  position: fixed;
  inset: 0;
  pointer-events: none; /* lets clicks pass through the empty space */
  z-index: 3;
}

.floating-icon {
  position: absolute;
  width: 100px;
  height: 100px;
  pointer-events: auto; /* but the icons themselves stay clickable */
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
  transition: transform 0.15s ease, opacity 0.2s ease;
  opacity: 0; /* hidden until JS gives it a final position, avoids a flash */
}

.floating-icon:hover {
  transform: scale(1.08);
}

/* Little text label that appears above the icon on hover */
.floating-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: "Libertinus Mono", monospace;
  font-size: 12px;
  color: #fff;
  background: rgba(0, 0, 0, 0.75);
  padding: 3px 8px;
  border-radius: 3px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.floating-icon:hover::after {
  opacity: 1;
}

.floating-icon img,
.floating-icon video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* crops non-square media into a clean square */
  display: block;
}

/* =========================================================
   MOBILE SCALING
   ========================================================= */
@media (max-width: 600px) {
  .banner-image {
    width: 130px;
  }

  .top-right-counter {
    top: 8px;
    right: 8px;
    gap: 3px;
  }

  .counter-label {
    font-size: 8px;
  }

  .counter {
    font-size: 13px;
    padding: 1px 5px;
    letter-spacing: 1.5px;
  }

  .soundcloud-embed {
    top: 45px;
    right: 8px;
    width: 42vw;
    max-width: 150px;
  }

  .bottom-left-block {
    bottom: 10px;
    left: 10px;
    width: 48vw;
    max-width: 180px;
  }

  .bio-block {
    font-size: 9px;
    line-height: 1.35;
    margin-bottom: 10px;
  }

  .bottom-left-contact {
    font-size: 10px;
  }

  .bottom-left-contact .dot {
    margin: 0 4px;
  }

  .portrait-wrapper {
    bottom: 10px;
    right: 8px;
  }

  .portrait-photo {
    width: 22vw;
    max-width: 90px;
  }

  .floating-icon {
    width: 52px;
    height: 52px;
  }
}

@media (max-width: 380px) {
  .banner-image {
    width: 105px;
  }

  .bottom-left-block {
    width: 52vw;
    max-width: 160px;
  }

  .soundcloud-embed {
    width: 38vw;
    max-width: 130px;
  }

  .portrait-photo {
    width: 20vw;
    max-width: 74px;
  }
}

/* =========================================================
   FADE-OUT WHEN GALLERY IS OPEN
   ========================================================= */
body.gallery-open .soundcloud-embed,
body.gallery-open .portrait-wrapper,
body.gallery-open .floating-icons,
body.gallery-open .bottom-left-block {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.soundcloud-embed,
.portrait-wrapper,
.floating-icons,
.bottom-left-block {
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================================
   PORTFOLIO GALLERY
   ========================================================= */
.gallery-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.92);
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 90px 30px 40px;
  box-sizing: border-box;

  /* Kill the overlay/indicator scrollbar some browsers draw down
     the right edge while scrolling this panel (Firefox + old Edge
     need the properties below; ::-webkit-scrollbar above already
     handles Chrome/Safari, this just makes it explicit here too). */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.gallery-overlay::-webkit-scrollbar {
  display: none;
}

.gallery-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.gallery-close {
  position: fixed;
  top: 16px;
  right: 20px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: color 0.2s ease;
  z-index: 60;
}

.gallery-close:hover {
  color: #39ff14;
}

.gallery-intro {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  max-width: 1300px;
  margin: 0 auto 16px;
}

.gallery-intro-photo {
  display: block;
  flex: 0 0 220px;
  width: 220px;
  height: auto;
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.6);
}

.gallery-intro-text {
  flex: 1 1 0;
  align-self: center;
}

.gallery-intro-bio {
  margin: 0 0 12px;
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
  font-size: 15px;
  line-height: 1.6;
  text-align: justify;
}

.gallery-intro-contact {
  margin: 0;
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
  font-size: 16px;
}

.gallery-intro-contact .dot {
  margin: 0 8px;
  opacity: 0.7;
}

.gallery-intro-contact a {
  color: #fff;
  transition: color 0.2s ease;
}

.gallery-intro-contact a:hover {
  color: #39ff14;
  text-decoration: underline;
}

@media (max-width: 700px) {
  .gallery-intro {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  .gallery-intro-photo {
    flex-basis: auto;
    width: 45vw;
    max-width: 200px;
  }

  .gallery-intro-bio {
    font-size: 13.5px;
    line-height: 1.5;
    text-align: left;
  }

  .gallery-intro-contact {
    font-size: 13px;
  }
}

/* =========================================================
   CATEGORY TOGGLE (Concerts/Gigs vs Theatre)
   Right-aligned above the gallery. Uses plain links so it
   behaves visually like the Instagram/email links, without
   browser or XP.css button styling.
   ========================================================= */
.gallery-category-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  max-width: 1300px;
  margin: -27px auto 10px;
  padding: 0;
  box-sizing: border-box;
}

.category-btn {
  color: #fff;
  font-family: "Libertinus Mono", monospace;
  font-size: 15.75px;
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
  opacity: 0.52;
  transition: color 0.2s ease, opacity 0.2s ease;
  outline: none;
  border: none;
  background: transparent;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

.category-btn:hover {
  color: #39ff14;
  opacity: 1;
  text-decoration: underline;
}

.category-btn.active {
  color: #fff;
  opacity: 1;
}

.category-btn.active:hover {
  color: #39ff14;
}

.category-btn:focus,
.category-btn:focus-visible,
.category-btn:active {
  outline: none;
  box-shadow: none;
  background: transparent;
}

.category-divider {
  color: rgba(255, 255, 255, 0.38);
  font-family: "Libertinus Mono", monospace;
  font-size: 12px;
  line-height: 1;
  user-select: none;
}

@media (max-width: 700px) {
  .gallery-category-toggle {
    justify-content: center;
    margin: 8px auto 16px;
  }

  .category-btn {
    font-size: 13.65px;
  }
}

/* Masonry gallery layout (default/desktop). */
.gallery-grid {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 14px;
  max-width: 1300px;
  margin: 0 auto;
  transition: opacity 0.3s ease;
}

/* Applied briefly by switchCategory() while the photo set is
   being swapped underneath, so the change doesn't pop/flash. */
.gallery-grid.grid-fade-out {
  opacity: 0;
}

.gallery-column {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 1 0;
  min-width: 0;
}

.gallery-photo {
  position: relative;
  display: block;
  overflow: hidden;
  cursor: pointer;
}

.gallery-grid img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.6);
  transition: filter 0.3s ease;
}

.gallery-photo:hover img,
.gallery-photo.caption-active img {
  filter: brightness(0.4);
}

.gallery-caption-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.gallery-photo:hover .gallery-caption-overlay,
.gallery-photo.caption-active .gallery-caption-overlay {
  opacity: 1;
}

.gallery-caption-overlay span {
  color: #fff;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.5;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
}

.gallery-watermark {
  position: absolute;
  bottom: 4px;
  right: 4px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 11px;
  text-transform: lowercase;
  letter-spacing: 0.5px;
  color: #fff;
  opacity: 0.2;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  user-select: none;
}
@media (max-width: 850px) {
  .gallery-grid {
    gap: 10px;
  }
  .gallery-column {
    gap: 10px;
  }
  .gallery-watermark {
    font-size: 9px;
    bottom: 3px;
    right: 3px;
  }
}