/* Character Gallery Section wrapper */
.character-gallery-section.tear-section {
  position: relative;
  width: 100%;
  /* Cancel the global full-bleed negative margins for this section to avoid 100vw scrollbar skew */
  margin-left: 0;
  margin-right: 0;
  overflow: visible;   /* was hidden; let the tear overlap */
  z-index: 200;
  padding: 0;          /* no vertical padding here; globals handle seam gaps */
}

/* If safe viewport units are supported, re-enable full-bleed without shift */
@supports (width: 100svw) {
  .character-gallery-section.tear-section {
    width: 100svw; /* excludes scrollbar, prevents subtle right shift */
    margin-left: calc(50% - 50svw);
    margin-right: calc(50% - 50svw);
  }
}

/* Custom z-index for character gallery tear to prevent clip path interference */
.character-gallery-section.tear-section .tear--top {
  z-index: 2; /* Lower than container but higher than most other elements */
}

.characters-shell.section-shell {
  position: relative;
  background: var(--off-white) url('../assets/backgrounds/xJ2UjemaUO2.jpg') repeat;
  background-size: 200px;
  overflow: visible;
  z-index: 10;  /* Added to ensure it stacks above the tear (z-index: 2) */

  /* side padding as before; bottom padding for section depth if you want it */
  /* Remove side padding to prevent asymmetric gaps; keep vertical spacing only */
}


.character-gallery-container {
  background-color: var(--off-white);
  margin: auto;
  margin-bottom: 60px;
  top: 30px;
  padding: 8px;
  position: relative;
  box-sizing: border-box;
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 1152px;
  clip-path: polygon(
  /* Top edge */
  0% 0%,
  2% 0%,
  6% 0.3%,
  7% 0.5%,
  7.5% 0.8%,
  8% 0.5%,
  10% 0.3%,
  12.5% 0.6%,
  15% 0.4%,
  17.5% 0.7%,
  20% 0.4%,
  22% 0.4%,
  22.5% 0.8%,
  23% 0.3%,
  25% 0.2%,
  27.5% 0.6%,
  30% 0.3%,
  32.5% 0.6%,
  35% 0.4%,
  37.5% 0.6%,
  40% 0.4%,
  42% 0.4%,
  42.5% 0.8%,
  43.5% 0.4%,
  45% 0.4%,
  47.5% 0.6%,
  50% 0.3%,
  52.5% 0.6%,
  55% 0.4%,
  57.5% 0.5%,
  60% 0.2%,
  62.5% 0.6%,
  65% 0.4%,
  67% 0.4%,
  67.5% 0.8%,
  68% 0.3%,
  70% 0.3%,
  72.5% 0.5%,
  75% 0.3%,
  77.5% 0.6%,
  80% 0.4%,
  82% 0.4%,
  82.5% 0.5%,
  83.5% 0.4%,
  85% 0.4%,
  87% 0.3%,
  87.5% 0.8%,
  88% 0.4%,
  90% 0.3%,
  92.5% 0.6%,
  95% 0.3%,
  98% 0%,
  100% 0%,

  /* Right edge */
  100% 0%,
  100% 2%,
  99.7% 3.5%,
  99.5% 5%,
  99.7% 7%,
  99.5% 7.5%,
  99.2% 8%,
  99.5% 10%,
  99.6% 12.5%,
  99.4% 15%,
  99.6% 17.5%,
  99.3% 20%,
  99.5% 22%,
  99.5% 22.5%,
  99.2% 23%,
  99.7% 25%,
  99.7% 27.5%,
  99.3% 30%,
  99.6% 32.5%,
  99.4% 35%,
  99.6% 37.5%,
  99.3% 40%,
  99.5% 42%,
  99.5% 42.5%,
  99.2% 43.5%,
  99.5% 45%,
  99.5% 47.5%,
  99.4% 50%,
  99.6% 52.5%,
  99.3% 55%,
  99.5% 57.5%,
  99.4% 60%,
  99.7% 62.5%,
  99.4% 65%,
  99.6% 67%,
  99.5% 67.5%,
  99.2% 68%,
  99.7% 70%,
  99.7% 72.5%,
  99.5% 75%,
  99.6% 77.5%,
  99.4% 80%,
  99.6% 82%,
  99.6% 82.5%,
  99.4% 83.5%,
  99.5% 85%,
  99.5% 87%,
  99.2% 87.5%,
  99.7% 88%,
  99.5% 90%,
  99.6% 92.5%,
  99.4% 95%,
  100% 98%,
  100% 100%,
  /* Bottom edge (mirrored top) */
  98% 100%,
  95% 99.7%,
  92.5% 99.4%,
  90% 99.6%,
  88% 99.5%,
  87.5% 99.2%,
  87% 99.7%,
  85% 99.5%,
  83.5% 99.5%,
  82.5% 99.4%,
  82% 99.6%,
  80% 99.6%,
  77.5% 99.4%,
  75% 99.6%,
  72.5% 99.5%,
  70% 99.7%,
  68% 99.7%,
  67.5% 99.2%,
  67% 99.5%,
  65% 99.6%,
  62.5% 99.4%,
  60% 99.7%,
  57.5% 99.4%,
  55% 99.5%,
  52.5% 99.3%,
  50% 99.6%,
  47.5% 99.4%,
  45% 99.5%,
  43.5% 99.5%,
  42.5% 99.2%,
  42% 99.5%,
  40% 99.5%,
  37.5% 99.3%,
  35% 99.6%,
  32.5% 99.4%,
  30% 99.6%,
  27.5% 99.3%,
  25% 99.7%,
  23% 99.7%,
  22.5% 99.2%,
  22% 99.5%,
  20% 99.5%,
  17.5% 99.3%,
  15% 99.6%,
  12.5% 99.4%,
  10% 99.6%,
  8% 99.5%,
  7.5% 99.2%,
  7% 99.5%,
  6% 99.7%,
  2% 100%,
  0% 100%,

  /* Left edge */
0% 98%,
0.3% 95%,
0.6% 92.5%,
0.3% 90%,
0.4% 88%,
0.8% 87.5%,
0.3% 87%,
0.4% 85%,
0.4% 83.5%,
0.5% 82.5%,
0.4% 82%,
0.4% 80%,
0.6% 77.5%,
0.3% 75%,
0.5% 72.5%,
0.3% 70%,
0.3% 68%,
0.8% 67.5%,
0.4% 67%,
0.4% 65%,
0.6% 62.5%,
0.2% 60%,
0.5% 57.5%,
0.4% 55%,
0.6% 52.5%,
0.3% 50%,
0.6% 47.5%,
0.4% 45%,
0.4% 43.5%,
0.8% 42.5%,
0.4% 42%,
0.4% 40%,
0.6% 37.5%,
0.4% 35%,
0.6% 32.5%,
0.3% 30%,
0.4% 27.5%,
0.2% 25%,
0.3% 23%,
0.8% 22.5%,
0.4% 22%,
0.7% 20%,
0.4% 17.5%,
0.2% 15%,
0.4% 12.5%,
0.3% 10%,
0.3% 8%,
0.8% 7.5%,
0.4% 7%,
0.2% 5%,
0% 2%,
0% 0%
);
}

.character-gallery-content {
  border: clamp(8px, 2vw, 12px) solid transparent;
  border-image: url('../assets/images/filagree-border.svg')
                14 / clamp(8px, 2vw, 12px);
  border-image-repeat: stretch;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  box-sizing: border-box;
  margin: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  position: relative;
  z-index: 151; /* Slightly higher than parent container */
  /* background-color: var(--off-white); */ /* Removed to show clip-path */
  max-width: 1152px;
}

/* GIF Carousel */
.gif-carousel {
  position: relative;
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16/9;
  border-radius: 12px;
  overflow: hidden;
}

.gif-carousel-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.gif-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
  image-rendering: pixelated;
  opacity: 0;
  transition: opacity 0.3s ease;

}

.gif-slide.active {
  z-index: 2;
  image-rendering: pixelated;
  opacity: 1;
}

/* Navigation buttons */
.gif-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--off-white);
  color: white;
  padding: 0.75rem;
  cursor: pointer;
  border: none;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
  transition: all 0.3s ease;
  z-index: 2;
  border-radius: 2px;
}

.gif-nav:hover {
  transform: translateY(-50%) scale(1.1);
  opacity: 1;

}

.gif-nav.prev {
  left: 20px;
}

.gif-nav.next {
  right: 20px;
}

/* Dedicated arrow divs */
.arrow-left,
.arrow-right {
  width: 8px;
  height: 8px;
  border-top: 2px solid #333;
  border-right: 2px solid #333;
  transition: all 0.3s ease;
}

.arrow-left {
  transform: rotate(-135deg);
}

.arrow-right {
  transform: rotate(45deg);
}

/* Arrow hover animations */
.gif-nav:hover .arrow-left {
  transform: rotate(-135deg) translateX(-1px);
  border-color: #222;
}

.gif-nav:hover .arrow-right {
  transform: rotate(45deg) translateX(1px);
  border-color: #222;
}

/* Diamond navigation */
.gif-diamond-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  z-index: 3;
}

.gif-diamond-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  width: 120px;
  gap: 12px;
  border-radius: 15px;
  backdrop-filter: blur(2px);
}

.gif-diamond-dot {
  width: 12px;
  height: 12px;
  background-color: var(--light-navy);
  -webkit-mask-image: url('../assets/images/diamond-2.svg');
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: url('../assets/images/diamond-2.svg');
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  opacity: 0.5;
  transition: all 0.3s ease;
  cursor: pointer;
}

.gif-diamond-dot.active {
  opacity: 1;
  transform: scale(1.25);
}

/* Gallery Info */
.gallery-info {
  text-align: center;
  max-width: 1152px;
  padding: 0 60px;
  position: relative;
  height: auto;
  min-height: 200px;
  margin-bottom: 30px; /* Set a minimum height to avoid layout shifts */
}

.gallery-info h2 {
  font-family: var(--font-family-secondary);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 800;
  color: var(--secondary-color);
  margin-bottom: 1rem;
  position: relative;
}

.gallery-text {
  opacity: 0;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  transition: opacity 0.3s ease;
  visibility: hidden;
}

.gallery-text.active {
  opacity: 1;
  position: relative;
  visibility: visible;
}



.gallery-info p, .gallery-text p {
  font-family: var(--font-family);
  font-size: clamp(0.9rem, 2vw, 1rem);
  line-height: 1.6;
  color: var(--secondary-color);
  margin: 0;
  padding-bottom: 20px;
}


/* Swoosh textures */
.char.swoosh {
  position: absolute;
  background-image: url('../assets/images/swoosh.svg');
  mix-blend-mode: multiply;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.1;
  z-index: 2;
  width: clamp(300px, 45vw, 600px); /* Responsive width with limits */
  height: clamp(200px, 30vw, 400px); /* Responsive height with limits */
  max-width: 100%; /* Prevent overflow */
  pointer-events: none; /* Ensure they don't interfere with interactions */
}

.characters-swoosh-1 {
  top: 20%;
  left: min(73%, calc(100% - clamp(300px, 45vw, 600px))); /* Prevent extending beyond container */
}

.characters-swoosh-2 {
  top: 40%; /* Same vertical position as swoosh-1 */
  right: min(73%, calc(100% - clamp(300px, 45vw, 600px))); /* Mirror swoosh-1's distance from edge */
  transform: scaleY(-1); /* Keep reflected */
}

/* ===========================================
   LARGE DESKTOP RESPONSIVE STYLES
   =========================================== */

/* Large desktop adjustments to prevent layout issues */
@media (min-width: 1600px) {
  .char.swoosh {
    width: clamp(300px, 35vw, 500px); /* Smaller relative size on very large screens */
    height: clamp(200px, 23vw, 350px);
  }
  
  .characters-swoosh-1 {
    left: min(68%, calc(100% - 500px)); /* More conservative positioning */
  }
  
  .characters-swoosh-2 {
    right: min(68%, calc(100% - 500px)); /* Mirror swoosh-1's distance from edge for large screens */
  }
}

/* ===========================================
   MOBILE RESPONSIVE STYLES
   =========================================== */

/* Small phones */
@media (max-width: 480px) {
  /* Hide swoosh elements on very small screens to prevent layout issues */
  .char.swoosh {
    display: none;
  }
  
  .character-gallery-section {
    padding: clamp(40px, 10vw, 60px) 15px;
  }

  .gif-carousel {
    aspect-ratio: 4/3;
  }

  button.gif-nav {
    width: 35px !important;
    height: 35px !important;
    font-size: 1rem !important;
    background: var(--off-white) !important;
    opacity: 1 !important;
  }

  button.gif-nav.prev {
    left: 0 !important;
  }

  button.gif-nav.next {
    right: 0 !important;
  }

  button.gif-nav .arrow-left,
  button.gif-nav .arrow-right {
    border-color: var(--light-navy) !important;
  }

  /* Hide h2 lines for mobile */
  .h2-line-dark {
    display: none !important;
  }

  .gallery-info h2 {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
  }

  .gallery-info p {
    margin-top: 1.5rem;
    padding-bottom: 0;
  }
}

/* Tablets and small desktops */
@media (max-width: 768px) {
  .character-gallery-section {
    padding: clamp(60px, 12vw, 80px) 20px;
  }

  .character-gallery-container {
    gap: 2rem;
  }

  .gif-carousel {
    max-width: 100%;
    aspect-ratio: 16/10;
  }

  button.gif-nav {
    width: 40px !important;
    height: 40px !important;
    font-size: 1.2rem !important;
    background: var(--off-white) !important;
    opacity: 1 !important;
  }

  button.gif-nav.prev {
    left: 0 !important;
  }

  button.gif-nav.next {
    right: 0 !important;
  }

  button.gif-nav .arrow-left,
  button.gif-nav .arrow-right {
    border-color: var(--light-navy) !important;
  }

  .gif-diamond-nav {
    bottom: 15px;
  }

  .gif-diamond-indicator {
    width: 100px;
    height: 25px;
    gap: 10px;
  }

  .gallery-info {
    padding: 0 1rem;
  }

  /* Hide h2 lines for mobile */
  .h2-line-dark {
    display: none !important;
  }

  .gallery-info h2 {
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
  }

  .gallery-info p {
    font-size: clamp(0.85rem, 2.5vw, 0.95rem);
    margin-top: 1.5rem;
    padding-bottom: 0;
  }
}

/* ===========================================
   MOBILE NAVIGATION OVERRIDE - MAXIMUM SPECIFICITY
   =========================================== */
@media screen and (max-width: 768px) {
  .character-gallery-section button.gif-nav {
    left: 0 !important;
    right: auto !important;
    background: red !important;
    opacity: 1 !important;
    transition: none !important;
    border: 3px solid blue !important;
  }
  
  .character-gallery-section button.gif-nav.next {
    left: auto !important;
    right: 0 !important;
    background: green !important;
  }
  
  .character-gallery-section button.gif-nav .arrow-left,
  .character-gallery-section button.gif-nav .arrow-right {
    border-color: var(--light-navy) !important;
  }
}

@media screen and (max-width: 480px) {
  .character-gallery-section button.gif-nav {
    left: 0 !important;
    right: auto !important;
    background: var(--off-white) !important;
    opacity: 1 !important;
    transition: none !important;
    width: 35px !important;
    height: 35px !important;
  }
  
  .character-gallery-section button.gif-nav.next {
    left: auto !important;
    right: 0 !important;
  }
  
  .character-gallery-section button.gif-nav .arrow-left,
  .character-gallery-section button.gif-nav .arrow-right {
    border-color: var(--light-navy) !important;
  }
}