/* Global styles to ensure scrollbar is completely hidden everywhere */
html, body {
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE and Edge */
  overflow-y: scroll !important; /* Force scroll behavior */
  overflow-x: hidden !important;
}

/* Hide scrollbar for absolutely every element */
::-webkit-scrollbar,
::-webkit-scrollbar-button,
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece,
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-corner,
::-webkit-resizer {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  -webkit-appearance: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
header {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1px 0 0px 0; 
  background: transparent; 
  z-index: 9999;
  position: fixed;
  top: -93px;
  left: 0;
  pointer-events: none; /* Prevent header from blocking clicks */
}

.logo {
  height: 350px; 
  width: auto;
  display: block;
  mix-blend-mode: difference;
  position: relative;
  z-index: 9999;
  pointer-events: none; /* Prevent logo from blocking clicks */
}

body {
    margin: 0;
    padding: 0;
    height: 6000px; /* increased height for bidirectional scrolling */
    background: transparent;
    font-family: sans-serif;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* Smoother scrolling on iOS */
    position: relative; /* For proper stacking context */
  }
  
  .carousel-container {
    height: 100vh;
    width: 100%;
    perspective: 1500px; /* Reduced perspective for more dramatic 3D effect */
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    overflow: visible; /* Changed from hidden to allow items to show outside container */
    padding-bottom: 15vh; /* This moves the carousel down from the exact center */
    margin-top: 1vh; /* Push the carousel lower */
  }
  
  .carousel {
    width: 800px; /* Increased width */
    height: 600px; /* Increased height */
    position: relative;
    transform-style: preserve-3d;
    transform-origin: center center; /* Ensure rotation happens around center point */
    margin: 0 auto; /* Ensure horizontal centering */
  }
  
  .carousel-item {
    position: absolute;
    width: 400px;
    height: 280px;
    left: 50%;
    top: 50%;
    transform-origin: center;
    transform-style: preserve-3d;
    backface-visibility: visible;
    opacity: 0;
    transform: scale(0.2);
  }
  
  /* Front face with image */
  .carousel-item img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.7; /* Slight transparency */
    transform: translateZ(5px);
  }
  
  /* Back face of card */
  .carousel-item .back-face {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: rotateY(180deg) translateZ(-1px);
    backface-visibility: visible;
    overflow: visible;
    display: block !important; /* Ensure back face is always visible for 3D effect */
  }
  
  /* Back face of card image */
  .carousel-item .back-face img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: rotateY(180deg); /* Flip image to correct orientation */
    opacity: 0.7; /* Slight transparency */
  }
  
  /* Edges connecting front and back */
  .glass-edge {
    position: absolute;
    display: block !important;
  }
  
  .glass-edge.top-edge {
    width: 100%;
    height: 5px;
    top: 0;
    left: 0;
    transform-origin: top;
    transform: rotateX(90deg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: top;
    opacity: 0.7;
  }
  
  .glass-edge.bottom-edge {
    width: 100%;
    height: 5px;
    bottom: 0;
    left: 0;
    transform-origin: bottom;
    transform: rotateX(-90deg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: bottom;
    opacity: 0.7;
  }
  
  .glass-edge.left-edge {
    height: 100%;
    width: 5px;
    left: 0;
    top: 0;
    transform-origin: left;
    transform: rotateY(-90deg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: left;
    opacity: 0.7;
  }
  
  .glass-edge.right-edge {
    height: 100%;
    width: 5px;
    right: 0;
    top: 0;
    transform-origin: right;
    transform: rotateY(90deg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: right;
    opacity: 0.7;
  }
  
  /* Floor reflection */
  .floor {
    position: absolute;
    width: 1000px;
    height: 1000px;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%);
    border-radius: 50%;
    top: 65%;
    left: 50%;
    transform: translate(-50%, 0) rotateX(75deg);
    z-index: -1;
    opacity: 0.7;
  }
  
  /* Instructions */
  .instructions {
    position: fixed;
    bottom: 25px;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 100;
    pointer-events: none;
  }
  
  .instructions p {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    color: #111;
    padding: 12px 24px;
    border-radius: 20px;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    margin: 0 auto;
    opacity: 0;
    transform: translateY(40px);
    position: relative;
    overflow: visible;
  }
  
/* Audio Player Styles */
#audio-player {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000; /* Increased to be higher than the logo's z-index */
  display: flex;
  align-items: center;
  pointer-events: auto; /* Ensure clicks are registered */
}

#play-pause-btn {
  background: rgba(255, 255, 255, 0.5); /* More visible background */
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Stronger shadow */
  border: 1px solid rgba(255, 255, 255, 0.5); /* More visible border */
  opacity: 1; /* Make fully visible by default */
  transform: scale(1); /* Start at full scale */
  position: relative;
  overflow: visible;
  pointer-events: auto !important; /* Force pointer events */
  z-index: 10001; /* Even higher z-index */
}

#play-pause-btn:hover {
  transform: scale(1.1);
}

#play-pause-btn:active {
  transform: scale(0.95);
}

.carousel-item.expanded {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 80vw;
  height: 70vh;
  max-width: 1000px;
  max-height: 90vh;
  z-index: 3000;
  box-shadow: 0 8px 40px 8px rgba(0,0,0,0.18), 0 1.5px 8px 0 rgba(0,0,0,0.10);
  background: transparent;
  pointer-events: auto;
  transition: none; /* Remove transition to not interfere with GSAP */
}

.carousel-item.expanded img,
.carousel-item.expanded .back-face img {
  opacity: 1;
  border-radius: 0px;
}

.carousel-item.expanded .back-face {
  display: block;
  opacity: 0.8;
  backface-visibility: visible;
  transform: rotateY(180deg) translateZ(0px);
}

.carousel-item.expanded .glass-edge {
  display: block;
  opacity: 0.9;
}

/* Animated border for buttons */
#play-pause-btn::before, 
.instructions p::before,
#carousel-back-btn::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(90deg, 
    rgba(0,0,0,0.9) 0%, 
    rgba(0,0,0,0.1) 25%, 
    rgba(0,0,0,0.9) 50%, 
    rgba(0,0,0,0.1) 75%, 
    rgba(0,0,0,0.9) 100%);
  background-size: 200% 100%;
  z-index: -1;
  animation: borderMove 12s linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-clip: content-box, border-box;
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-clip: content-box, border-box;
  mask-composite: exclude;
  pointer-events: none;
}

@keyframes borderMove {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

/* Back button styling */
#carousel-back-btn {
  position: fixed !important; /* ensure it stays anchored to viewport */
  top: 13px !important; /* Match play button's top position */
  left: 20px !important; /* Match play button's right position but on the left */
  z-index: 10001; /* Same as play button */
  background: rgba(255, 255, 255, 0.15);
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  transition: opacity 0.2s, transform 0.3s;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: visible;
  pointer-events: auto !important; /* Ensure clicks are registered */
}

#carousel-back-btn:hover,
#play-pause-btn:hover {
  transform: scale(1.1);
}

/* Remove after pseudo elements */
#play-pause-btn::after, 
#carousel-back-btn::after {
  display: none;
}

#carousel-back-btn:focus,
#carousel-back-btn:hover {
  opacity: 1;
}
#carousel-back-btn svg {
  display: block;
}

.carousel-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1999;
  background: transparent;
  pointer-events: none; /* Default: disabled on desktop */
}

/* Only enable pointer-events on mobile/touch devices */
@media (max-width: 600px), (pointer: coarse) {
  .carousel-overlay {
    pointer-events: auto;
  }
}

#audio-player svg {
  width: 24px;
  height: 24px;
  display: block;
}
#play-pause-btn svg {
  vertical-align: middle;
}

#play-pause-btn, #carousel-back-btn {
  position: relative; /* for pseudo element */
  overflow: visible;   /* allow pseudo outline outside */
}
#play-pause-btn::after, #carousel-back-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid rgba(0,0,0,0.9);
  border-radius: inherit;
  transform: scale(0.6);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  pointer-events: none;
}
#play-pause-btn:hover::after,
#play-pause-btn:focus-visible::after,
#carousel-back-btn:hover::after,
#carousel-back-btn:focus-visible::after {
  transform: scale(1);
  opacity: 1;
}

/* =====================
   Star-border animated wrapper
   ===================== */
.star-border {
  position: relative;
  display: inline-block;
  padding: 6px; /* space for the animated outline */
  border-radius: 16px;
}

.star-border-inner {
  position: relative;
  display: inline-block;
  border-radius: inherit;
  overflow: hidden; /* keep outline outside */
}

/* animated outline */
.star-border::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 0.5px; /* thickness of the border */
  background: linear-gradient(90deg, 
    rgba(0,0,0,0.9) 0%, 
    rgba(0,0,0,0.1) 25%, 
    rgba(0,0,0,0.9) 50%, 
    rgba(0,0,0,0.1) 75%, 
    rgba(0,0,0,0.9) 100%);
  background-size: 200% 100%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-clip: content-box, border-box;
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-clip: content-box, border-box;
  mask-composite: exclude;
  animation: starBorderMove 1000s linear infinite;
  pointer-events: none;
}

@keyframes starBorderMove {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

/* Remove the individual button borders when they're inside a star-border */
.star-border #play-pause-btn::before,
.star-border #carousel-back-btn::before,
.star-border .instructions p::before {
  display: none;
}

/* Add the new is-expanded class for the carousel container */
.carousel.is-expanded {
  pointer-events: none;
}

.carousel.is-expanded .carousel-item:not(.expanded) {
  opacity: 0;
  pointer-events: none;
}

/* Liquid text effect styles */
@keyframes fadeInText {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.liquid-fade-block {
  opacity: 0;
  animation: fadeInText 1s ease-out forwards;
  animation-delay: 0.3s;
}

/* Liquid text overlay that appears on top of expanded carousel */
.liquid-text-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 600px;
  color: white;
  font-family: sans-serif;
  font-size: 15px;
  font-weight: normal;
  line-height: 1.6;
  text-align: center;
  z-index: 10002;
  padding: 30px;
  pointer-events: auto;
  display: none;
  cursor: pointer; /* Show that the overlay is clickable */
}

.liquid-text-overlay p {
  margin: 0 0 1.2em 0;
  color: white;
  font-weight: bold;
  opacity: 0; /* Start with paragraphs hidden to prevent flash */
  transform: translateY(20px); /* Start position for animation */
}

.liquid-text-overlay p:first-child {
  font-size: 24px;
  margin-bottom: 1.5em;
  color: #ffffff;
}

.liquid-text-overlay p:last-child {
  margin-bottom: 0;
}

/* Individual word styling for liquid effect */
.liquid-word {
  display: inline-block;
  margin: 0 0.1em;
  color: white;
  font-weight: bold;
  text-shadow: 
    1px 1px 3px rgba(0,0,0,0.7),
    -1px -1px 1px rgba(0,0,0,0.6),
    1px -1px 1px rgba(0,0,0,0.6),
    -1px 1px 1px rgba(0,0,0,0.6),
    0 0 6px rgba(255,255,255,0.2);
  -webkit-text-stroke: 0.5px rgba(0,0,0,0.4);
  transition: transform 0.3s ease-out, text-shadow 0.3s ease-out; /* Only for return animation */
  cursor: pointer;
  will-change: transform, text-shadow; /* Optimize for animation */
  position: relative;
  z-index: 1;
}

.liquid-word.liquid-active {
  z-index: 2; /* Bring active words to front */
  transition: none; /* No transition when actively being affected */
}

/* Remove hover state since we're handling it with JS */
.liquid-word:hover {
  /* Handled by JS for better control */
  --liquid-word-hover: active; /* custom property counts as a declaration */
}

/* Bottom Links */
.bottom-links {
  position: fixed;
  bottom: 20px;
  left: 0;
  width: 100%;
  padding: 0; /* remove container padding */
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2001; /* above carousel overlay (1999) to stay clickable */
  pointer-events: none;
}

.bottom-link {
  color: #111;
  font-size: 14px; /* match instructions font size */
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(40px); /* same offset as instructions */
  font-family: sans-serif;
  text-shadow: 0 0 3px rgba(195, 195, 195, 0.808);
  animation: glowText 8s ease-in-out infinite;
}

@keyframes glowText {
  0%, 100% {
    text-shadow: 0 0 5px rgba(229, 229, 229, 0.786);
  }
  50% {
    text-shadow: 0 0 15px rgba(217, 217, 217, 0.898),
                 0 0 25px rgba(216, 216, 216, 0.737);
  }
}

.bottom-link:hover {
  opacity: 0.7;
  transform: translateY(-2px);
}

.bottom-link:active {
  opacity: 0.5;
}

/* Independent spacing for first and last link */
.bottom-links .bottom-link:first-child {
  margin-left: 1vw; /* left spacing */
}

.bottom-links .bottom-link:last-child {
  margin-right: 1vw; /* right spacing */
}

/* === Circular carousel items (image7–9) === */
.carousel-item.circular,
.carousel-item.circular img,
.carousel-item.circular .back-face,
.carousel-item.circular .back-face img {
  border-radius: 0; /* no rounding */
}

.carousel-item.circular {
  overflow: visible; /* let transparency show */
  clip-path: none;   /* remove circular mask */
  width: 300px;
  height: 300px;
}

/* Hide rectangular glass edges */
.carousel-item.circular .glass-edge {
  display: none !important;
}
/* -------------------
   Mobile tweaks (< 600 px wide)
   ------------------- */
   @media (max-width: 600px), (pointer: coarse) {
    /* Header / logo */
    header {              /* let the header sit fully on-screen */
      top: 0;
      padding-top: 10px;
    }
    .logo {               /* scale the logo down */
      height: 300px;
      top: -70px;
    }
  
    /* Play / back buttons */
    #audio-player        { top: 57px; right: 12px; }
    #carousel-back-btn   { top: -130px !important; left: -180px !important; }
  
    /* "Scroll to rotate – swipe" pill */
    .instructions        { bottom: 60px; }
    .instructions p {
      font-size: 11px !important;
      padding: 8px 16px !important;
      letter-spacing: 0.5px !important;
    }
    }
    /* ---------------------------
   Mobile – expanded card tweak
   --------------------------- */
@media (max-width: 600px), (pointer: coarse) {
  /* Let the enlarged card keep its native aspect-ratio */
  .carousel-item.expanded {
    width: 185vw;          /* wide as the phone, with a small gutter */
    height: auto;         /* grow with the picture – no forced 70 vh */
    max-height: 80vh;     /* never spill past the viewport */
    top: -30%;
    transform: translateX(-50%);
  }

  /* Show the whole picture instead of cropping it */
  .carousel-item.expanded img,
  .carousel-item.expanded .back-face img {
    width: 100%;
    height: auto;
    object-fit: contain;  /* letter-box instead of trimming */
  }
}
/* ---------------------------------
   Mobile  LANDSCAPE  adjustments
   --------------------------------- */
   @media (pointer: coarse) and (orientation: landscape) {
    /* Shrink / nudge the logo */
    header {            /* keep it visible, not off-screen */
      top: 0;
      padding-top: -6px;
    }
    .logo {             /* smaller so it stays above the carousel */
      height: 200px;
      top: -60px;
        }
  
    /* "Scroll to rotate – swipe" pill */
    .instructions  {    /* drop it closer to the bottom edge */
      bottom: 4px;
    }
  
    /* If the pill and the bottom links still collide,
       give the links a bit more gap: */
    .bottom-links {
      bottom: 4px;
    }
      /* Play / back buttons */
      #audio-player        { top: 40px; right: 12px; }
      
    /* Push the liquid text overlay down in landscape mode to avoid logo overlap */
    .liquid-text-overlay {
      top: 55%; /* Push it further down */
      transform: translateX(-50%);
      max-width: 90%; /* Allow more width in landscape */
      padding-top: 60px; /* Add padding at the top to create space from the logo */
    }
    
    /* Make text slightly smaller in landscape to fit better but keep consistency */
    .liquid-text-overlay p {
      font-size: 14px;
      margin-bottom: 0.8em;
    }
    
    .liquid-text-overlay p:first-child {
      font-size: 20px;
      margin-bottom: 1em;
    }
    
    /* Ensure consistent text styling in landscape mode */
    .liquid-group-1 p,
    .liquid-group-2 p {
      font-size: 14px !important;
      line-height: 1.6 !important;
      font-weight: bold !important;
      margin-bottom: 0.8em !important;
    }
}

/* =====================
   Mobile-only adjustments for liquid-text-overlay and Read More toggle
   ===================== */
@media (max-width: 600px), (pointer: coarse) {
  /* 1. Push the overlay significantly downward so it clears the logo */
  .liquid-text-overlay {
    top: 45%;
    transform: translateX(-50%);
    margin-top: 0;
  }
  
  /* Make all paragraphs in groups have consistent size and style */
  .liquid-group-1 p,
  .liquid-group-2 p {
    font-size: 15px !important;
    line-height: 1.6 !important;
    font-weight: bold !important;
    margin-bottom: 1.2em !important;
  }
  
  /* Adjust swappable container height on mobile */
  .liquid-swappable-container {
    position: relative;
    min-height: 150px; /* Slightly less on mobile due to smaller text */
    margin: 20px 0;
  }

  .liquid-group-1,
  .liquid-group-2 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
  }

  /* 3. Read-More button container that reserves space */
  .read-more-btn-container {
    height: 60px; /* Fixed height to reserve space for button + spacing */
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0 0 0; /* Only top margin to maintain consistent spacing */
  }
  
  /* 4. Read-More button appearance */
  .read-more-btn {
    background: rgba(255, 255, 255, 0.3);
    border: none;
    padding: 10px 20px;
    color: #939393;
    font-family: sans-serif;
    font-size: 16px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    z-index: 10003; /* Higher than the overlay (10002) */
    pointer-events: auto; /* Ensure the button can be clicked */
    
    /* Initial hidden state for animation */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }
  
  /* Show the button when animation should start */
  .read-more-btn.show {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hide the Read-More button container on desktop */
@media (min-width: 601px) and (pointer: fine) {
  .read-more-btn-container {
    display: none;
  }
}

/* =====================
   Expanded circular carousel items fix
   ===================== */
.carousel-item.expanded.circular {
  width: 80vw !important;
  height: 80vh !important;
  max-width: 800px !important;
  max-height: 800px !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.carousel-item.expanded.circular img,
.carousel-item.expanded.circular .back-face img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  background: transparent !important;
}

/* Ensure glass edges stay hidden for expanded circular items */
.carousel-item.expanded.circular .glass-edge {
  display: none !important;
}

/* Hide back face for expanded circular items to prevent duplicates */
.carousel-item.expanded.circular .back-face {
  display: none !important;
}

/* Mobile overrides for expanded circular items */
@media (max-width: 600px), (pointer: coarse) {
  .carousel-item.expanded.circular {
    width: 180vw !important;
    height: 140vh !important;
    max-width: 1200px !important;
    max-height: 1200px !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
  
  .carousel-item.expanded.circular img,
  .carousel-item.expanded.circular .back-face img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }
}

/* Landscape mobile overrides for expanded circular items */
@media (pointer: coarse) and (orientation: landscape) {
  .carousel-item.expanded:not(.circular) {
    top: 18% !important;
    transform: translate(-50%, -50%) !important;
    max-height: 60vh !important;
    width: 85vw !important;
    height: auto !important;
  }
  
  .carousel-item.expanded:not(.circular) img,
  .carousel-item.expanded:not(.circular) .back-face img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Fix for image1.jpg and image2.jpg in landscape mobile - maintain carousel appearance */
  .carousel-item:nth-child(1).expanded:not(.circular),
  .carousel-item:nth-child(2).expanded:not(.circular) {
    width: 90vw !important;
    height: 49vw !important; /* Maintains 400:280 aspect ratio (70vw * 0.7 = 49vw) */
    max-width: 800px !important;
    max-height: 560px !important; /* Maintains 400:280 aspect ratio (800px * 0.7 = 560px) */
    top: 48% !important;
  }
  
  .carousel-item:nth-child(1).expanded:not(.circular) img,
  .carousel-item:nth-child(1).expanded:not(.circular) .back-face img,
  .carousel-item:nth-child(2).expanded:not(.circular) img,
  .carousel-item:nth-child(2).expanded:not(.circular) .back-face img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}

/* =====================
   Mixcloud Widget Styles
   ===================== */

/* Only show the widget inside the currently expanded slide */
.carousel-item:not(.expanded) .mixcloud-widget-container {
  display: none;
}

/* Red-boxed region: absolute layout inside expanded slide */
.mixcloud-widget-container {
  position: absolute;
  top: 50%;                     /* vertically center in slide */
  right: -40%;                   /* align to red box's right offset */
  transform: translateY(-50%);
  width: 280px;                 /* fixed width = red box */
  height: 60px;                 /* fixed height */
  max-width: 100%;  
  pointer-events: auto !important;  
  opacity: 0;                   /* hidden by default for fade-in animation */
  transition: opacity 0.5s ease-out; /* smooth fade-in transition */
  z-index: 10000000 !important; /* Ensure it's above everything */
}

/* Make iframe fill its container */
.mixcloud-widget {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Visible state for fade-in animation */
.mixcloud-widget-container.visible {
  opacity: 1;
}

/* Ensure clicks on widget don't bubble up to carousel */
.mixcloud-widget-container * {
  pointer-events: auto !important;
  z-index: 9999998 !important;
}

/* Additional protection for iframe interactions */
.mixcloud-widget-container {
  isolation: isolate; /* Create new stacking context */
}

.mixcloud-widget-container iframe {
  pointer-events: auto !important;
  position: relative;
  z-index: 9999999 !important; /* Even higher than container */
  outline: none; /* Remove focus outline */
  border: none; /* Remove any border */
  cursor: pointer; /* Show it's interactive */
}

/* Mobile-only Mixcloud Widget Repositioning - Vertical/Portrait Mode Only */
@media (max-width: 600px) and (orientation: portrait), (pointer: coarse) and (orientation: portrait) {
  .mixcloud-widget-container {
    position: absolute !important;
    top: 95% !important;       /* Position below the disc */
    right: 50% !important;      /* Center horizontally */
    transform: translateX(50%) !important;
    width: 60%; /* Center correction */
  }
}

/* Landscape mobile specific rules for Mixcloud Widget - Bigger size */
@media (max-width: 600px) and (orientation: landscape), (pointer: coarse) and (orientation: landscape) {
  .mixcloud-widget-container {
    position: absolute !important;
    top: 44% !important;       /* Position below the disc */
    right: -10% !important;      /* Center horizontally */
    transform: translateX(50%) !important;
    width: 100% !important;      /* Bigger width for landscape */
    height: 80px !important;    /* Bigger height for landscape */
    max-width: 400px !important; /* Maximum width */
  }
  
  .mixcloud-widget-container iframe {
    height: 80px !important;    /* Match container height */
  }
}

/* Desktop-specific Mixcloud widget sizing */
@media (min-width: 601px) and (pointer: fine) {
  .mixcloud-widget-container {
    width: 350px;
    height: 80px;
    right: -40%;
  }
  .mixcloud-widget-container iframe {
    height: 80px !important;
  }
}

/* =====================
   Apple Music Widget Styles
   ===================== */

/* Container for the Apple Music embed (hidden by default) */
.apple-widget-container {
  position: fixed;
  top: 69%;                /* adjust vertical position */
  left: 50%;               /* center horizontally */
  transform: translate(-50%, 0);
  width: 350px;
  height: auto;            /* desktop width */
  opacity: 0;              /* start hidden */
  pointer-events: none;    /* block clicks when hidden */
  transition: opacity 0.5s ease, transform 0.5s ease;
  z-index: 20000;          /* above everything else */
  overflow: hidden !important;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* When we add `.visible`, fade in and allow clicks */
.apple-widget-container.visible {
  opacity: 1;
  transform: translate(-50%, 10px);
  pointer-events: auto;
}

/* Make the iframe fill its parent container */
.apple-widget-container iframe {
  width: 100% !important;
  height: 200px !important;
  border: none !important;
  pointer-events: inherit;  /* only clickable when container is visible */
  position: relative;
  z-index: 9999999 !important;
  cursor: pointer;
  outline: none;
  min-height: 200px;
  overflow: hidden !important;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
  max-width: none !important;
  min-width: 0 !important;
}

/* Mobile: full‑width, repositioned under the disc */
@media (max-width: 600px) {
  .apple-widget-container {
    top: 55%;             /* bring it up under the expanded image */
    width: 95vw;          /* nearly full‑width on small screens */
    max-width: 500px;     /* prevent it from getting too wide */
    overflow: hidden !important;
  }
  .apple-widget-container iframe {
    height: 250px !important;  /* taller for mobile touch targets */
    overflow: hidden !important;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

/* Landscape mobile specific rules for Apple Music widget */
@media (max-width: 600px) and (orientation: landscape), (pointer: coarse) and (orientation: landscape) {
  .apple-widget-container {
    top: 60%;             /* adjust for landscape */
    width: 90vw;          /* slightly narrower in landscape */
    max-width: 500px;     /* allow more width in landscape */
    overflow: hidden !important;
  }
  .apple-widget-container iframe {
    height: 200px !important;  /* shorter height for landscape */
    overflow: hidden !important;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

/* Ensure Apple Music widget is completely disabled when not visible */
.apple-widget-container {
  visibility: hidden; /* completely hidden when not visible */
}

.apple-widget-container.visible {
  visibility: visible; /* show when visible */
}

.apple-widget-container iframe {
  pointer-events: inherit; /* inherit from parent container */
}

/* Simple override to move Apple Music widget to far right on landscape */
@media (max-width: 600px) and (orientation: landscape), (pointer: coarse) and (orientation: landscape) {
  .apple-widget-container {
    left: 50% !important;
    width: 40vw !important;
    max-width: 700px !important;
  }
  .apple-widget-container iframe {
    height: 250px !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }
}
/* Portrait Mode (393px wide) */
@media (max-width: 600px) and (orientation: portrait), (pointer: coarse) and (orientation: portrait) {
  /* Play button */
  #play-pause-btn {
    width: 40px;
    height: 40px;
    top: 40px;
    right: 12px;
    position: fixed;
  }
  .carousel-item.expanded.circular img {
    width: 75%;
    max-width: 480px;
    top: 40px;
    transform: scale(1);
    margin: 0 auto;
    display: block;
  }

  /* Back button */
  body #carousel-back-btn {
    top: -220px !important;
    left: -40% !important;
    position: fixed !important;
  }

  /* Override container if it’s pushing both buttons down */
  #audio-player {
    top: 0;
    position: static;
  }

  /* Logo smaller */
  .logo {
    height: 210px;
    top: -45px;
  }

  /* Smaller bottom links */
  .bottom-link {
    font-size: 11px;
    letter-spacing: 0.5px;
  }
  body .liquid-text-overlay {
    top: 44% !important;
    transform: translate(-50%, -50%) !important;
  }

  /* Reduced Read More button size for portrait mode */
  .read-more-btn {
    font-size: 12px !important; /* Reduced from default 16px */
    padding: 8px 16px !important; /* Reduced padding */
    border-radius: 4px !important; /* Smaller border radius */
    top: 30px !important;
  }
  
  .read-more-btn-container {
    height: 40px !important; /* Reduced height to accommodate smaller button */
    margin: 15px 0 0 0 !important; /* Reduced top margin */
  }
}

/* Landscape Mode (393px wide rotated) */
@media (max-width: 700px) and (pointer: coarse) and (orientation: landscape) {
  body::after {
    position: fixed;
    top: 0;
    right: 0;
    background: #111;
    color: #fff;
    font-size: 10px;
    padding: 4px;
    z-index: 999999;
    pointer-events: none;
  }

  /* Play button */
  #play-pause-btn {
    width: 30px;
    height: 30px;
    top: 20px;
    right: 15px;
    position: fixed;
  }

  /* Back button */
  #carousel-back-btn {
    width: 50px;
    height: 50px;
    top: -60px !important;
    left: 16px;
    position: fixed !important;
  }

  /* Bottom links slightly smaller */
  .bottom-link {
    font-size: 10px;
    letter-spacing: 0.4px;
  }

  /* Shift Mixcloud widget to the right for circular carousel items in landscape */
  .carousel-item.circular .mixcloud-widget-container {
    position: relative;
    left: 60%; /* Adjust this value as needed */
    width: 350px !important;
    height: 50px !important;
  }

  /* Apple Music widget wider on mobile landscape mode only */
  .apple-widget-container {
    width:57vw !important;
    top: 65%;
    transform: translate(-50%, 0) !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  .apple-widget-container iframe {
    height: 100px !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }
}
/* Landscape Mode (393px wide rotated) */
@media (max-width: 800px) and (pointer: coarse) and (orientation: landscape) {
  body::after {
    position: fixed;
    top: 0;
    right: 0;
    background: #111;
    color: #fff;
    font-size: 10px;
    padding: 4px;
    z-index: 999999;
    pointer-events: none;
  }
  /* Shift Mixcloud widget to the right for circular carousel items in landscape */
  .carousel-item.circular .mixcloud-widget-container {
    position: relative;
    left: 61%; /* Adjust this value as needed */
    width: 350px !important;
    height: 50px !important;
  }
}
 /* Play button */
 #play-pause-btn {
  width: 30px;
  height: 30px;
  top: 20px;
  right: 22px;
  position: fixed;
}
.apple-widget-container {
  width: 57vw !important;
  top: 65%;
  transform: translate(-50%, 0) !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

.apple-widget-container iframe {
  height: 100px !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

/* Portrait Mode (max-width: 800px) - Make play button lower and improve Apple widget */
@media (max-width: 800px) and (pointer: coarse) and (orientation: portrait) {
  #play-pause-btn {
    top: 49px !important; /* Move play button lower */
  }
  
  /* Apple Music widget - larger and higher on screen */
  .apple-widget-container {
    top: 50% !important; /* Bring it higher on screen */
    width: 120vw !important; /* Increase width */
    max-width: 360px !important; /* Allow larger max width */
    height: 290px !important; /* Increase height */
    transform: translate(-50%, 0) !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }
  
  .apple-widget-container iframe {
    height: 290px !important; /* Match container height */
    width: 100% !important;
    overflow: visible !important;
    pointer-events: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  
  /* Reduced liquid text size for portrait mode */
  .liquid-text-overlay {
    font-size: 10px !important; /* Reduced from default 15px */
    max-width: 500px !important; /* Reduced from default 600px */
    margin-top: -16px !important;
  }
  
  .liquid-text-overlay p {
    font-size: 10px !important; /* Reduced base font size */
    line-height: 2.4 !important; /* Reduced line height */
    margin-bottom: 2.8em !important; /* Reduced spacing between paragraphs */
  }
  

  /* Reduced Read More button size for portrait mode */
  .read-more-btn {
    font-size: 12px !important; /* Reduced from default 16px */
    padding: 8px 16px !important; /* Reduced padding */
    border-radius: 4px !important; /* Smaller border radius */
    margin-top: -150px !important;
  }
  
  .read-more-btn-container {
    height: 40px !important; /* Reduced height to accommodate smaller button */
    margin: 15px 0 0 0 !important; /* Reduced top margin */
  }
}

/* iPad Landscape Mode */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
  .carousel-item.expanded.circular img {
    width: 75%;
    max-width: 480px;
    top: 15px !important;
    transform: scale(0.6);
    margin: 0 auto;
    display: block;
  }
  
  header .logo {
    width: 380px;
    height: auto !important;        /* slightly larger */
    margin-top: -44px;    /* moved down from top */
    display: block;
  }
  
  #play-pause-btn {
    width: 50px;         /* slightly larger */
    height: 50px;
    top: 58px;           /* moved slightly down */
    right: 30px;         /* slight reposition if needed */
    position: fixed;
  }
  
  .mixcloud-widget-container {
    left: 16%;             /* shift from 50% to 46% */
    width: 400px !important;
    height: auto !important;          /* reduce width for iPad landscape */
    top: 1020px !important;
    transform: translate(-50%, 0); /* keep centering */
  }
  
  .instructions {
    bottom: 25px;    /* raise it higher from the bottom */
    position: fixed;
    width: 100%;
    text-align: center;
    z-index: 9999;
  }
  
  #carousel-back-btn {
    width: 50px;
    height: 50px;
    top: 160px !important;                   /* adjust as needed */
    left: 90px !important;
    position: fixed !important;
    z-index: 9999;
  }
  
  .carousel-item:nth-child(7).expanded {
    margin-top: -140px;  /* shift up visually when expanded */
  }
  
  .carousel-item.expanded:nth-child(4) {
    margin-top: -90px !important;  /* shift up visually */
    transform: scale(0.9) !important;
    margin-left: -500px !important;
  }
  
  .carousel-item.expanded:nth-child(5) {
    margin-top: -120px;  /* shift upward visually */
    transform: scale(0.9) !important;
    margin-left: -500px !important;
  }
  
  .liquid-text-overlay {
    top: 28% !important;  /* adjust from original 50% */
  }
  
  .read-more-btn-container {
    margin-top: -20px;  /* bring the button higher */
  }
  
  .read-more-btn {
    margin-top: 190px !important;  /* bring the button higher */
  }
  
  .carousel-item.expanded:nth-child(8) {
    margin-top: -100px;  /* lift the image slightly */
  }
  .apple-widget-container {
    top: 55% !important;
    left: 50% !important;
    width: 700px !important;
    max-width: 700px !important;
  }
  .apple-widget-container iframe {
    height: 550px !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }
}

/* iPad Portrait Mode */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: portrait) {
  .carousel-item.expanded.circular img {
    width: 70%;
    max-width: 400px;
    transform: scale(0.8);
    margin: 0 auto;
    margin-top: -60px;  /* move up a bit */
  }
  
  header .logo {
    width: 320px;        /* slightly larger */
    height: auto !important;
    margin-top: -20px;   /* adjust position if needed */
    display: block;
  }

  #play-pause-btn {
    width: 50px;         /* slightly larger */
    height: 50px;
    top: 63px;           /* moved slightly down */
    right: 40px;         /* slight reposition if needed */
    position: fixed;
  }
  
  .apple-widget-container {
    width: 600px !important;
    height: auto !important;
    top: 60% !important;
    left: 50% !important;
    transform: translate(-50%, 0) !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }
  
  .apple-widget-container iframe {
    height: 450px !important;
    width: 100% !important;
    overflow: visible !important;
    pointer-events: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  /* Increased liquid text size for iPad portrait */
  .liquid-text-overlay {
    font-size: 20px !important; /* Increased from default 15px */
    max-width: 900px !important; /* Increased from default 600px */
    margin-top: -150px !important;
  }
  
  .liquid-text-overlay p {
    font-size: 20px !important; /* Increased base font size */
    line-height: 1.8 !important; /* Increased line height for better readability */
    margin-bottom: 0.5em !important; /* Increased spacing between paragraphs */
    margin-top: 100px !important;
  }
  /* Increased Read More button size for iPad portrait */
  .read-more-btn {
    font-size: 20px !important; /* Increased from default 16px */
    padding: 15px 30px !important; /* Increased padding */
    border-radius: 6px !important; /* Slightly larger border radius */
    margin-top: 250px !important;
  }
  
  .read-more-btn-container {
    height: 80px !important; /* Increased height to accommodate larger button */
    margin: 30px 0 0 0 !important; /* Increased top margin */
  }

  body #carousel-back-btn {
    width: 40px;
    height: 40px;
    margin-top: 350px !important;                   /* adjust as needed */
    left: auto !important;                          /* Override the general mobile rule */
    right: 950px !important;
    position: fixed !important;
    z-index: 9999;
  }

  /* Prevent the expanded circular slides from blocking all clicks */
  .carousel-item:nth-child(3).expanded.circular,
  .carousel-item:nth-child(7).expanded.circular {
    pointer-events: none !important;
  }

  /* Re-enable clicks only on their Mixcloud widgets */
  .carousel-item:nth-child(3).expanded.circular .mixcloud-widget-container,
  .carousel-item:nth-child(3).expanded.circular .mixcloud-widget-container iframe,
  .carousel-item:nth-child(7).expanded.circular .mixcloud-widget-container,
  .carousel-item:nth-child(7).expanded.circular .mixcloud-widget-container iframe {
    pointer-events: auto !important;
  }

  /* Guard overlay pointer-events so clicks inside .mixcloud-widget-container aren't swallowed by .carousel-overlay */
  .carousel-overlay {
    pointer-events: none !important;
  }
  
  .carousel-overlay .mixcloud-widget-container,
  .carousel-overlay .mixcloud-widget-container iframe {
    pointer-events: auto !important;
  }
}

/* =====================
   Full HD (1920 x 1080) adjustments
   ===================== */
@media (min-width: 1920px) and (max-width: 1920px) {
  /* Decrease expanded circular carousel items size slightly for full HD */
  .carousel-item.expanded.circular {
    width: 70vw !important;  /* Reduced from 80vw */
    height: 70vh !important; /* Reduced from 80vh */
    max-width: 700px !important;  /* Reduced from 800px */
    max-height: 700px !important; /* Reduced from 800px */
  }
  
  /* Move Mixcloud widget slightly more to the right for full HD */
  .mixcloud-widget-container {
    right: -45% !important; /* Moved further right from -40% */
  }
  
  /* Move image4.gif (5th carousel item) slightly higher when expanded for full HD */
  .carousel-item:nth-child(5).expanded {
    margin-top: -33% !important; /* Move higher from default 50% */
  }
  
  /* Move image5.gif (7th carousel item) slightly higher when expanded for full HD */
  .carousel-item:nth-child(7).expanded {
    margin-top: -29% !important; /* Move higher from default 50% */
  }
  
  /* Make Apple Music widget wider and longer for full HD */
  .apple-widget-container {
    width: 500px !important; /* Increased from 350px */
  }
  
  .apple-widget-container iframe {
    height: 300px !important; /* Increased from 200px */
  }
}

/* =====================
   2K (2048 x 1080) adjustments
   ===================== */
@media (min-width: 2048px) and (max-width: 2048px) {
  /* Make expanded carousel items wider for 2K resolution */
  .carousel-item.expanded {
    width: 85vw !important;  /* Increased from 80vw for more width */
    max-width: 1200px !important; /* Increased max-width for 2K */ 
  }
  
  /* Specifically target image5.gif (7th carousel item) to make it smaller */
  .carousel-item:nth-child(7).expanded {
    width: 80vw !important;  /* Even wider for image5.gif */
    max-width: 1200px !important; /* Larger max-width for image5.gif */
    margin-top: 0% !important; /* Adjust vertical position */
  }

  /* Adjust circular carousel items for 2K */
  .carousel-item.expanded.circular {
    width: 75vw !important;  /* Slightly larger than Full HD */
    height: 75vh !important; /* Slightly larger than Full HD */
    max-width: 800px !important;  /* Increased from 700px */
    max-height: 800px !important; /* Increased from 700px */
  }

  #carousel-back-btn {
    width: 40px;
    height: 40px;
    margin-top: 150px !important;                   /* adjust as needed */
    left: auto !important;                          /* Override the general mobile rule */
    right: 1950px !important;
    position: fixed !important;
    z-index: 9999;
  }
  
  /* Move Mixcloud widget further right for 2K */
  .mixcloud-widget-container {
    right: -50% !important; /* Moved further right for 2K */
  }
  
  /* Make Apple Music widget larger for 2K */
  .apple-widget-container {
    width: 900px !important; /* Increased from 500px */
    top: 55% !important; /* Move widget lower on screen */
  }
  
  .apple-widget-container iframe {
    height: 650px !important; /* Increased from 300px */
    top: 50px !important;
  }
  
  /* Adjust liquid text overlay for 2K */
  .liquid-text-overlay {
    max-width: 800px !important; /* Increased from 600px */
    font-size: 18px !important; /* Slightly larger text */
    margin-top: -80px !important;
  }
  
  .liquid-text-overlay p {
    font-size: 18px !important; /* Increased base font size */
    line-height: 1.7 !important; /* Adjusted line height */
  }
  
  .liquid-text-overlay p:first-child {
    font-size: 28px !important; /* Increased from 24px */
  }
}