/* styles.css - Combined & Updated Dimensions */

@font-face {
  font-family: 'RainyHearts';
  src: url('rainyhearts.ttf') format('truetype');
}

:root {
  --bg-color: #ffff; /* White */
}

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

.on-top {
  z-index: 7 !important; /* Or any value higher than 6 */
}

.hide {
  display: none !important;
}

body {
  height: 100vh;
  overflow-y: auto; /* Allow scrolling if content exceeds height */
  overflow-x: hidden;
  position: relative;
  background: var(--bg-color);
  cursor: url('CD.png'), auto;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center vertically */
  align-items: center;   /* Center map/contact horizontally */
  padding: 20px 5px; /* Add some vertical padding */
}





a { color: black; }

button {
  box-shadow: none;
  border: 2px solid black;
  border-top: 0;
  margin-top: 0;
  padding: 1.2em 1em .5em;
  font-family: 'Verdana', sans-serif;
  font-weight: normal;
  font-size: 15px;
  background: var(--bg-color);
  cursor: pointer;
  transform: translateY(-.8em);
  transition: transform .5s ease;
}

button:hover {
  transform: translateY(0);
}

/* --- Map Container --- */
.map-container {
  aspect-ratio: 968 / 974;
  width: min(95vw, calc(95vh * (968 / 974)));
  height: min(95vh, calc(95vh * (968 / 974)));;
  max-width: min(968px, 95vw);
  max-height: min(974px, 95vh);
  margin: auto; /* Center horizontally */
  position: relative; /* Still needed for absolute children */
  user-select: none;
  overflow: visible; 

}

#map {
  width: 100%;
  height: 100%;
  position: relative;
  user-select: none;
}

/* --- Videos --- */
#map video#home-animated,
#map video#music-video,
#map video#music-video-reverse,
#map video#merch-video,        /* *** ADDED *** */
#map video#merch-video-reverse /* *** ADDED *** */ {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: auto;
  cursor: inherit;
}

#map video#home-animated {
  z-index: 5;
  transition: transform 2s ease-out, opacity 2s ease-out;
  transform-origin: center center;
}

#map video#music-video,
#map video#music-video-reverse,
#map video#merch-video,        /* *** ADDED *** */
#map video#merch-video-reverse /* *** ADDED *** */ {
  z-index: 6; /* Keep transition videos on same layer */
  pointer-events: none;
}


/* --- Hover Overlays --- */
#music-hover-overlay,
#merch-hover-overlay,
#contact-hover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 15;
  display: none;
  pointer-events: none;
}

/* --- CONTACT INFO SECTION --- */
#contact-info {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2; /* Below map container overlays/videos but above body */
  background-color: var(--bg-color);
  padding: 20px;
  /* Initially visible */
}

#contact-info p {
  margin: 0 0 15px 0;
  font-size: 1.6em;
  font-family: 'RainyHearts', 'Verdana', sans-serif;
}

#back-button { /* Contact Back Button */
  border: 0px solid #ccc;
  font-size: 1.2em;
  font-family: 'RainyHearts', 'Verdana', sans-serif;
  color: #000;
  margin-top: 10px;
}



/* --- MUSIC IFRAME CONTAINER --- REVISED SLIDE-UP (No Fade, Slow) --- */
#music-player-wrapper {
  position: absolute;
  bottom: 16%;
  left: 0;
  width: 100%;
  height: 86%;
  z-index: 4;
  overflow: hidden;
  visibility: hidden; /* Base state is hidden */
  pointer-events: none;
  /* No transition on the wrapper itself */
}

#music-player-wrapper.player-visible {
  visibility: visible; /* Becomes visible when class is added */
  pointer-events: auto;
}

/* *** ADD THIS RULE *** */
/* Temporarily keep the wrapper visible while the inner container slides out */
#music-player-wrapper.keep-visible-during-slide {
    visibility: visible !important; /* Force visibility */
    pointer-events: none; /* Keep it non-interactive during slide */
}


/* --- REVISED: MUSIC IFRAME CONTAINER (Inner Sliding Content) --- */
#music-iframe-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: transparent;
  transform: translateY(100%); /* Base state: below */
  transition: transform 0.4s ease-out; /* Animate transform changes */
}

/* Rule for SLIDE UP when wrapper gets .player-visible */
#music-player-wrapper.player-visible #music-iframe-container {
  transform: translateY(0);
}

/* *** NEW RULE for SLIDE DOWN *** */
/* When wrapper has .player-sliding-out, force inner container down */
/* We keep .player-visible during this time so the wrapper stays visible */
#music-player-wrapper.player-sliding-out #music-iframe-container {
  transform: translateY(100%);
}

/* --- Music Iframe and Button styling --- */
#music-iframe {
  width: 60%; /* Adjust width if needed */
  flex-grow: 1;
  border: none;
  display: block;
}

#music-iframe-container #music-back-button {
  flex-shrink: 0;
  padding: 0.8em 1em 0.3em;
  font-size: 1.2em;
  font-family: 'RainyHearts', 'Verdana', sans-serif;
  border: 0px solid black;
  color: #000;
  position: relative;
  left: -25%;
  transform: translateX(.5em);
  transition: transform .4s ease; /* Keep button's own transition */
}
#music-iframe-container #music-back-button:hover {
   transform: translateX(0);
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion) {
  #music-player-wrapper,
  #music-iframe-container,
  #music-iframe-container #music-back-button {
    transition: none !important;
  }

  #music-player-wrapper.player-visible {
      visibility: visible;
      pointer-events: auto;
  }
  #music-player-wrapper.player-visible #music-iframe-container {
      transform: translateY(0); /* Instantly in final position */
  }
  /* Optional: Disable button hover transform in reduced motion */
  /* #music-iframe-container #music-back-button { transform: none !important; } */
}


/* --- *** NEW: MERCH CONTENT CONTAINER *** --- */
#merch-content-container {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 500px;
  min-width: 150px;
  height: 40%;
  min-height: 200px;
  max-height: 400px;
  /* MODIFIED: z-index to be behind merch videos */
  z-index: 3; /* Videos are z-index 6, home-animated is z-index 5 (but hidden during merch) */
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--bg-color);
  padding: 20px;
  border: 0px solid black;
  visibility: visible;
  pointer-events: none;
  /* REMOVED default transition for opacity here if instant appearance is desired.
     If you want the *revealed content* to fade in, add it back:
     transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s; */
}

#merch-content-container.merch-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto; /* Interactive when visible */
}

/* Style the GetWaitlist widget container if needed */
#getWaitlistContainer {
  width: 100%; /* Take available width */
  margin-bottom: 15px; /* Space before button */
}

/* Style the merch back button */
#merch-content-container #merch-back-button {
  flex-shrink: 0;
  margin: 10px auto 0; /* Margin top only */
  padding: 0.8em 1em 0.3em;
  font-size: 1.2em;
  font-family: 'RainyHearts', 'Verdana', sans-serif;
  border: 0px solid #555;
  color: #000;
  transform: translateY(-.5em);
  transition: transform .4s ease;
}
#merch-content-container #merch-back-button:hover {
  transform: translateY(0);
}


/* --- Animation & State Classes --- */

/* Contact Animation (Applied to #home-animated) */
#home-animated.gif-animate-forward {
  transform: translateX(150vw) rotate(420deg);
  opacity: 1;
  pointer-events: none;
}

/* CONTACT VIEW ACTIVE (Applied to .map-container) */
.map-container.contact-view-active {
  cursor: url('CD.png'), auto;
}
.map-container.contact-view-active #map,
.map-container.contact-view-active #map video#home-animated {
  cursor: url('CD.png'), auto;
}
/* Hide overlays and home video when contact is active */
.map-container.contact-view-active #music-hover-overlay,
.map-container.contact-view-active #merch-hover-overlay,
.map-container.contact-view-active #contact-hover-overlay/* Ensure home hidden */ {
    display: none !important;
    pointer-events: none !important;
}


/* MUSIC VIEW ACTIVE (Applied to .map-container) */
/* Hide overlays AND the main home video WHEN music view active */
.map-container.music-view-active #music-hover-overlay,
.map-container.music-view-active #merch-hover-overlay,
.map-container.music-view-active #contact-hover-overlay,
.map-container.music-view-active #home-animated {
    display: none !important;
    pointer-events: none !important;
}

/* *** NEW: MERCH VIEW ACTIVE (Applied to .map-container) *** */
/* Hide overlays AND the main home video WHEN merch view active */
.map-container.merch-view-active #music-hover-overlay,
.map-container.merch-view-active #merch-hover-overlay,
.map-container.merch-view-active #contact-hover-overlay,
.map-container.merch-view-active #home-animated {
    display: none !important;
    pointer-events: none !important;
}


/* --- Reduced Motion --- */
@media (prefers-reduced-motion) {
  #home-animated,
  #music-video,
  #music-video-reverse,
  #merch-video,         /* *** ADDED *** */
  #merch-video-reverse, /* *** ADDED *** */
  button,
  #music-iframe-container,
  #merch-content-container /* *** ADDED *** */ {
    transition: none !important;
  }

  #home-animated.gif-animate-forward {
    transform: none;
    opacity: 0;
    pointer-events: none;
   }

   /* Ensure iframe just appears without sliding in reduced motion */
   #music-iframe-container.iframe-visible {
     transform: translateY(0);
     opacity: 1;
     visibility: visible;
     pointer-events: auto;
   }
   /* *** NEW: Ensure merch container just appears without fading *** */
   #merch-content-container.merch-visible {
     opacity: 1;
     visibility: visible;
     pointer-events: auto;
   }
}

@media (max-width: 450px) {
  #map video#home-animated, #map video#music-video, #map video#music-video-reverse, #map video#merch-video, #map video#merch-video-reverse  {
    object-fit: contain;
  }

  #music-player-wrapper {
    bottom: 32%;
    height: 70%;
  }

  #music-iframe {
    width: 80%;
  }

  #music-iframe-container #music-back-button{
    left: -34%;
  }

  #merch-content-container {
    visibility: hidden;
    top: 20%;
  }
}