/* ═══════════════════════════════════════════════
   LUMINA INTERACTIVE WEBGL GLASS SLIDER
   Recreated faithfully from @/components/ui/lumina-interactive-list
   ═══════════════════════════════════════════════ */

.lumina-hero-stage {
  position: relative;
  z-index: 5;
  width: 100%;
  padding-top: 122px; /* Space for sticky 2-tier navbar (110px) + 12px luxury floating gap */
  padding-left: clamp(14px, 2.5vw, 40px);
  padding-right: clamp(14px, 2.5vw, 40px);
  padding-bottom: 2px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: 
    radial-gradient(circle at 50% 35%, rgba(197, 203, 211, 0.09) 0%, transparent 60%),
    radial-gradient(circle at 20% 70%, rgba(58, 64, 77, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 80% 30%, rgba(168, 178, 193, 0.08) 0%, transparent 50%);
  box-sizing: border-box;
}

.slider-wrapper {
  position: relative;
  width: 100%;
  max-width: 1720px;
  height: calc(100vh - 122px - clamp(16px, 2.5vh, 32px));
  min-height: 580px;
  max-height: 960px;
  border-radius: clamp(18px, 2.2vw, 30px);
  overflow: hidden;
  background-color: transparent;
  box-shadow: 
    0 20px 50px -10px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(197, 203, 211, 0.22);
  transform: translateZ(0);
  isolation: isolate;
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y !important;
}

.slider-wrapper.loaded {
  opacity: 1;
}

/* Three.js WebGL Canvas */
.webgl-canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  z-index: 1;
  pointer-events: none;
}

/* Soft, Clean Vignette - No Dark Corners */
.slider-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(to right, rgba(8, 9, 12, 0.45) 0%, rgba(8, 9, 12, 0.15) 35%, transparent 65%),
    linear-gradient(to top, rgba(8, 9, 12, 0.45) 0%, transparent 30%);
  pointer-events: none;
  z-index: 2;
}

/* Counter (Hidden per user request) */
.slide-number,
.slide-total {
  display: none !important;
}

/* Slide Content */
.slide-content {
  position: absolute;
  top: 48%;
  left: clamp(1.8rem, 5.5vw, 5rem);
  transform: translateY(-50%);
  z-index: 10;
  max-width: clamp(340px, 62vw, 860px);
  pointer-events: none;
}

.slide-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2.2rem, 5vw, 4.5rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.15;
  color: #FFFFFF;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.95), 0 0 40px rgba(255, 255, 255, 0.15);
  perspective: 800px;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.slide-description {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.35vw, 1.25rem);
  font-weight: 400;
  line-height: 1.65;
  color: #E2E6EC;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9);
  max-width: 540px;
}

/* Minimal Navigation Arrows */
.lumina-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 15;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(18, 20, 26, 0.45);
  border: 1px solid rgba(197, 203, 211, 0.25);
  color: #E2E6EC;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
  padding: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.lumina-nav-left {
  left: clamp(1rem, 2.5vw, 2.5rem);
}

.lumina-nav-right {
  right: clamp(1rem, 2.5vw, 2.5rem);
}

.lumina-nav-btn:hover {
  background: rgba(226, 230, 236, 0.22);
  border-color: rgba(255, 255, 255, 0.7);
  color: #FFFFFF;
  transform: translateY(-50%) scale(1.12);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.8), 0 0 15px rgba(226, 230, 236, 0.35);
}

.lumina-nav-btn:active {
  transform: translateY(-50%) scale(0.94);
}

.lumina-nav-btn svg {
  display: block;
  stroke: currentColor;
  transition: transform 0.25s ease;
}

.lumina-nav-left:hover svg {
  transform: translateX(-2px);
}

.lumina-nav-right:hover svg {
  transform: translateX(2px);
}

/* Minimal Centered Pagination Dots (replacing text titles & progress bars) */
.slides-navigation {
  position: absolute;
  bottom: clamp(20px, 3.5vh, 32px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(14, 16, 21, 0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 6px 14px;
  border-radius: 9999px;
  border: 1px solid rgba(197, 203, 211, 0.22);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.slide-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(197, 203, 211, 0.35);
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.slide-dot:hover {
  background: rgba(255, 255, 255, 0.75);
  transform: scale(1.25);
}

.slide-dot.active {
  width: 22px;
  border-radius: 9999px;
  background: #FFFFFF;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.85);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .lumina-hero-stage {
    padding-top: 86px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-bottom: 8px !important;
    min-height: auto !important;
  }

  .slider-wrapper {
    width: 100% !important;
    aspect-ratio: 16 / 9.2 !important;
    height: auto !important;
    min-height: 200px !important;
    max-height: 248px !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7) !important;
  }

  /* Clean minimal mobile view: hide large arrow circles so jewellery is 100% visible */
  .lumina-nav-btn {
    display: none !important;
  }

  .slide-content {
    position: absolute !important;
    top: auto !important;
    bottom: 0 !important;
    transform: none !important;
    left: 0 !important;
    right: 0 !important;
    max-width: 100% !important;
    background: linear-gradient(180deg, transparent 0%, rgba(8, 9, 12, 0.65) 45%, rgba(8, 9, 12, 0.95) 100%) !important;
    padding: 16px 12px 24px !important;
    border-radius: 0 0 12px 12px !important;
    pointer-events: none !important;
  }

  .slide-title {
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
    margin-bottom: 2px !important;
    letter-spacing: 0.04em !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95) !important;
  }

  .slide-description {
    font-size: 0.7rem !important;
    line-height: 1.35 !important;
    color: #DDE2EB !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9) !important;
    max-width: 95% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .slides-navigation {
    gap: 5px !important;
    bottom: 6px !important;
    padding: 3px 10px !important;
    background: rgba(14, 16, 21, 0.88) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .slide-dot {
    width: 5px !important;
    height: 5px !important;
    background: rgba(255, 255, 255, 0.45) !important;
  }

  .slide-dot.active {
    width: 15px !important;
    background: #FFFFFF !important;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.9) !important;
  }

  .slide-nav-title {
    display: none;
  }
}

@media (max-width: 480px) {
  .lumina-hero-stage {
    padding-top: 84px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .slider-wrapper {
    aspect-ratio: 16 / 9.2 !important;
    min-height: 190px !important;
    max-height: 235px !important;
    border-radius: 10px !important;
  }

  .slide-title {
    font-size: 0.9rem !important;
  }

  .slide-description {
    font-size: 0.67rem !important;
  }
}