/* ==========================================================================
   Lumin X — shared close control
   Source: lutimeline.html #lu-dialog-close (lu_timeline.css)
   Soft mint/cyan × pink/lavender glass bars + scale/rotate hover.

   Exception (do not restyle):
   - lunews.html enlarged image: #lu-dialog-close.glass-dialog-close
   ========================================================================== */

:root {
  --lu-lumin-x-ease: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --lu-lumin-x-bar-w: 36px;
  --lu-lumin-x-bar-h: 12px;
  --lu-lumin-x-grad-a: linear-gradient(135deg, rgba(162, 235, 213, 0.9), rgba(154, 201, 240, 0.9));
  --lu-lumin-x-grad-b: linear-gradient(135deg, rgba(245, 171, 213, 0.9), rgba(216, 179, 245, 0.9));
}

/* ----- Targets (exclude lunews enlarged-image close) ----- */
.gallery-modal-close,
.floating-modal-close,
.mac-modal-close,
.visual-universe-modal-close-btn,
.visual-gallary-modal-close,
.lu_gallery__close-btn,
.lu-stamp-close,
.navigation-mobile .menu-toggle-close,
.glass-close-btn .glass-x,
#lu-dialog-close:not(.glass-dialog-close) {
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  text-shadow: none !important;
  cursor: pointer !important;
  -webkit-appearance: none;
  appearance: none;
  transition: transform 0.4s var(--lu-lumin-x-ease) !important;
}

/* Hide glyph / icon children — bars are drawn with ::before / ::after */
.gallery-modal-close > *,
.floating-modal-close > *,
.mac-modal-close > *,
.visual-universe-modal-close-btn > *,
.visual-gallary-modal-close > *,
.navigation-mobile .menu-toggle-close > i {
  display: none !important;
}

/* Hit area defaults when a target is undersized */
.gallery-modal-close,
.floating-modal-close,
.mac-modal-close,
.visual-universe-modal-close-btn,
.visual-gallary-modal-close,
.navigation-mobile .menu-toggle-close,
#lu-dialog-close:not(.glass-dialog-close) {
  width: 60px !important;
  height: 60px !important;
  min-width: 60px;
  min-height: 60px;
  display: block !important;
  padding: 0 !important;
  overflow: visible !important;
}

.glass-close-btn .glass-x {
  width: 60px !important;
  height: 60px !important;
  position: relative !important;
}

/* ----- Lumin bars ----- */
.gallery-modal-close::before,
.gallery-modal-close::after,
.floating-modal-close::before,
.floating-modal-close::after,
.mac-modal-close::before,
.mac-modal-close::after,
.visual-universe-modal-close-btn::before,
.visual-universe-modal-close-btn::after,
.visual-gallary-modal-close::before,
.visual-gallary-modal-close::after,
.lu_gallery__close-btn::before,
.lu_gallery__close-btn::after,
.lu-stamp-close::before,
.lu-stamp-close::after,
.navigation-mobile .menu-toggle-close::before,
.navigation-mobile .menu-toggle-close::after,
.glass-close-btn .glass-x::before,
.glass-close-btn .glass-x::after,
#lu-dialog-close:not(.glass-dialog-close)::before,
#lu-dialog-close:not(.glass-dialog-close)::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: var(--lu-lumin-x-bar-w) !important;
  height: var(--lu-lumin-x-bar-h) !important;
  margin: 0 !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-top: 2px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow:
    0 5px 15px rgba(0, 0, 0, 0.4),
    inset 0 2px 5px rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  opacity: 1 !important;
  pointer-events: none !important;
  z-index: 1;
}

.gallery-modal-close::before,
.floating-modal-close::before,
.mac-modal-close::before,
.visual-universe-modal-close-btn::before,
.visual-gallary-modal-close::before,
.lu_gallery__close-btn::before,
.lu-stamp-close::before,
.navigation-mobile .menu-toggle-close::before,
.glass-close-btn .glass-x::before,
#lu-dialog-close:not(.glass-dialog-close)::before {
  transform: translate(-50%, -50%) rotate(45deg) !important;
  background: var(--lu-lumin-x-grad-a) !important;
}

.gallery-modal-close::after,
.floating-modal-close::after,
.mac-modal-close::after,
.visual-universe-modal-close-btn::after,
.visual-gallary-modal-close::after,
.lu_gallery__close-btn::after,
.lu-stamp-close::after,
.navigation-mobile .menu-toggle-close::after,
.glass-close-btn .glass-x::after,
#lu-dialog-close:not(.glass-dialog-close)::after {
  transform: translate(-50%, -50%) rotate(-45deg) !important;
  background: var(--lu-lumin-x-grad-b) !important;
}

/* ----- Hover / active (timeline Lumin motion) ----- */
.gallery-modal-close:hover,
.floating-modal-close:hover,
.mac-modal-close:hover,
.visual-universe-modal-close-btn:hover,
.visual-gallary-modal-close:hover,
.lu_gallery__close-btn:hover,
.navigation-mobile .menu-toggle-close:hover,
.glass-close-btn:hover .glass-x,
#lu-dialog-close:not(.glass-dialog-close):hover {
  transform: scale(1.15) rotate(90deg) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: transparent !important;
}

.mac-modal-close:active {
  transform: scale(0.92) rotate(90deg) !important;
}

/*
  Photo stamp close is positioned with translate(-50%, -50%).
  Never animate/override that transform on the button itself — that caused
  the jump + flicker on gears / gallery / photography pages. Spin the bars.
*/
.lu-stamp-close,
.lu-stamp-close.is-visible,
.lu-stamp-close.is-visible:hover,
.lu-stamp-close.is-visible:active {
  animation: none !important;
  transform: translate(-50%, -50%) !important;
}

.lu-stamp-close.is-visible:hover {
  /* Scale only via filter-friendly approach: grow bars, keep anchor fixed */
  transform: translate(-50%, -50%) !important;
}

.lu-stamp-close.is-visible:hover::before {
  transform: translate(-50%, -50%) rotate(135deg) scale(1.12) !important;
}

.lu-stamp-close.is-visible:hover::after {
  transform: translate(-50%, -50%) rotate(45deg) scale(1.12) !important;
}

.lu-stamp-close::before,
.lu-stamp-close::after {
  transition: transform 0.4s var(--lu-lumin-x-ease) !important;
}

/* Soft entrance — opacity only (transform keyframes break positioned closes) */
@keyframes lu-lumin-x-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.gallery-modal.active .gallery-modal-close,
.floating-modal.active .floating-modal-close,
.mac-modal-overlay.is-active .mac-modal-close,
#visual-universe-video-modal-overlay.visual-universe-modal-open .visual-universe-modal-close-btn,
.visual-gallary-modal.active .visual-gallary-modal-close,
.lugallery.s--active .lu_gallery__close-btn,
.glass-modal.active .glass-close-btn .glass-x,
#lu-image-dialog[open] #lu-dialog-close:not(.glass-dialog-close) {
  animation: lu-lumin-x-in 0.45s var(--lu-lumin-x-ease) both;
}

/* Mobile: slightly smaller like timeline */
@media (max-width: 767px) {
  .gallery-modal-close,
  .floating-modal-close,
  .mac-modal-close,
  .visual-universe-modal-close-btn,
  .visual-gallary-modal-close,
  .navigation-mobile .menu-toggle-close,
  .glass-close-btn .glass-x,
  #lu-dialog-close:not(.glass-dialog-close) {
    transform: scale(0.75);
  }

  .gallery-modal-close:hover,
  .floating-modal-close:hover,
  .mac-modal-close:hover,
  .visual-universe-modal-close-btn:hover,
  .visual-gallary-modal-close:hover,
  .navigation-mobile .menu-toggle-close:hover,
  .glass-close-btn:hover .glass-x,
  #lu-dialog-close:not(.glass-dialog-close):hover {
    transform: scale(0.86) rotate(90deg) !important;
  }

  .lu-stamp-close,
  .lu-stamp-close.is-visible,
  .lu-stamp-close.is-visible:hover {
    transform: translate(-50%, -50%) scale(0.85) !important;
  }
}