/* =========================================================
   SABRE DE PLEIADES
   GALLERY PAGE CSS

   HEADER + FOOTER CSS NOT INCLUDED
========================================================= */

/* =========================================================
   ROOT VARIABLES
========================================================= */

:root {
  --midnight: #04081b;
  --deep-blue: #070d27;
  --cosmic-blue: #0b1437;

  --gold: #d7b45a;
  --gold-light: #f0d78a;

  --white: #f5f3ed;
  --soft-white: #d9d9d5;
  --muted: #9da5bb;

  --border: rgba(215, 180, 90, 0.22);
}

/* =========================================================
   GALLERY PAGE GLOBAL
========================================================= */

.gallery-page {
  box-sizing: border-box;
}

.gallery-page *,
.gallery-page *::before,
.gallery-page *::after {
  box-sizing: border-box;
}

body {
  background: var(--midnight);

  color: var(--white);

  overflow-x: hidden;
}

.container {
  width: min(1200px, 90%);

  margin: 0 auto;
}

/* =========================================================
   GALLERY HERO
========================================================= */

.gallery-hero {
  position: relative;

  min-height: 68vh;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(28, 46, 103, 0.45),
      transparent 45%
    ),
    linear-gradient(180deg, var(--midnight), var(--deep-blue));
}

/* =========================================================
   COSMIC STARS
========================================================= */

.gallery-stars {
  position: absolute;

  inset: 0;

  pointer-events: none;

  opacity: 0.7;

  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.75) 1px, transparent 1px),
    radial-gradient(circle, rgba(215, 180, 90, 0.5) 1px, transparent 1px);

  background-size:
    120px 120px,
    190px 190px;

  animation: starsMove 40s linear infinite;
}

@keyframes starsMove {
  from {
    background-position:
      0 0,
      0 0;
  }

  to {
    background-position:
      120px 120px,
      -190px 190px;
  }
}

/* =========================================================
   HERO ORBITS
========================================================= */

.gallery-hero::before {
  content: "";

  position: absolute;

  width: 600px;
  height: 600px;

  border: 1px solid rgba(215, 180, 90, 0.08);

  border-radius: 50%;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  animation: heroOrb 18s ease-in-out infinite;
}

.gallery-hero::after {
  content: "";

  position: absolute;

  width: 850px;
  height: 850px;

  border: 1px solid rgba(215, 180, 90, 0.035);

  border-radius: 50%;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);
}

@keyframes heroOrb {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.04);
  }
}

/* =========================================================
   HERO CONTENT
========================================================= */

.gallery-hero-content {
  position: relative;

  z-index: 2;

  max-width: 780px;

  margin: auto;
}

/* =========================================================
   SECTION LABEL
========================================================= */

.gallery-page .section-label {
  display: inline-flex;

  align-items: center;

  gap: 12px;

  color: var(--gold);

  font-family: "Inter", sans-serif;

  font-size: 0.68rem;

  font-weight: 600;

  letter-spacing: 4px;
}

.gallery-page .section-label::before {
  content: "";

  width: 28px;
  height: 1px;

  background: var(--gold);
}

/* =========================================================
   HERO TITLE
========================================================= */

.gallery-hero h1 {
  margin-top: 25px;

  font-family: "Cinzel", serif;

  font-size: clamp(3.5rem, 8vw, 7rem);

  font-weight: 500;

  line-height: 1;

  letter-spacing: -2px;
}

.gallery-hero h1 span {
  color: var(--gold);
}

/* =========================================================
   HERO DESCRIPTION
========================================================= */

.gallery-hero p {
  max-width: 620px;

  margin: 35px auto 0;

  color: var(--soft-white);

  font-family: "Cormorant Garamond", serif;

  font-size: 1.35rem;

  line-height: 1.7;
}

/* =========================================================
   HERO LINE
========================================================= */

.hero-line {
  position: relative;

  width: 70px;
  height: 1px;

  margin: 40px auto 0;

  background: var(--gold);

  overflow: hidden;
}

.hero-line::after {
  content: "";

  position: absolute;

  top: 0;
  left: -100%;

  width: 100%;
  height: 100%;

  background: var(--gold-light);

  animation: lineReveal 2s ease forwards;
}

@keyframes lineReveal {
  to {
    left: 100%;
  }
}

/* =========================================================
   GALLERY SECTIONS
========================================================= */

.artwork-section {
  position: relative;

  padding: 150px 0 170px;

  background:
    radial-gradient(circle at 20% 30%, rgba(19, 35, 83, 0.55), transparent 35%),
    var(--midnight);

  overflow: hidden;
}

.illustration-section {
  position: relative;

  padding: 150px 0 180px;

  background:
    radial-gradient(circle at 80% 35%, rgba(24, 42, 94, 0.5), transparent 38%),
    var(--deep-blue);

  overflow: hidden;
}

/* =========================================================
   SECTION DECORATIVE LINE
========================================================= */

.artwork-section::before,
.illustration-section::before {
  content: "";

  position: absolute;

  width: 1px;
  height: 120px;

  top: 0;
  left: 50%;

  background: linear-gradient(to bottom, transparent, var(--gold), transparent);

  opacity: 0.5;
}

/* =========================================================
   SECTION HEADER
========================================================= */

.gallery-section-header {
  max-width: 720px;

  margin-bottom: 75px;
}

.gallery-section-header h2 {
  margin-top: 25px;

  font-family: "Cinzel", serif;

  font-size: clamp(2.5rem, 5vw, 4.5rem);

  font-weight: 500;

  line-height: 1.1;
}

.gallery-section-header h2 span {
  color: var(--gold);
}

.gallery-section-header p {
  max-width: 650px;

  margin-top: 25px;

  color: var(--muted);

  font-family: "Cormorant Garamond", serif;

  font-size: 1.3rem;

  line-height: 1.7;
}

/* =========================================================
   GALLERY GRID
========================================================= */

.gallery-grid {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 24px;

  align-items: start;
}

/* =========================================================
   GALLERY ITEM
   NO SCROLL-REVEAL ANIMATION
========================================================= */

.gallery-item {
  position: relative;

  width: 100%;

  padding: 0;

  border: 0;

  background: transparent;

  cursor: pointer;

  text-align: left;

  overflow: hidden;

  border-radius: 2px;

  outline: none;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;

  will-change: transform;
}

.gallery-item:hover {
  transform: translateY(-5px);
}

/* =========================================================
   GALLERY IMAGE
========================================================= */

.gallery-image {
  position: relative;

  width: 100%;

  aspect-ratio: 4 / 5;

  overflow: hidden;

  background: linear-gradient(145deg, #0d1638, #05091e);

  border: 1px solid rgba(215, 180, 90, 0.16);
}

/* =========================================================
   GALLERY IMAGE FRAME
========================================================= */

.gallery-image::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 1;

  border: 1px solid transparent;

  pointer-events: none;

  transition: border-color 0.25s ease;
}

/* =========================================================
   GALLERY IMAGE ELEMENT
========================================================= */

.gallery-item img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;

  transition:
    transform 0.3s ease,
    filter 0.25s ease;

  backface-visibility: hidden;

  user-select: none;

  -webkit-user-drag: none;

  -webkit-backface-visibility: hidden;
}

.gallery-item:hover img {
  transform: scale(1.035);

  filter: brightness(0.82) saturate(1.04);
}

.gallery-item:hover .gallery-image::before {
  border-color: rgba(215, 180, 90, 0.5);
}

/* =========================================================
   IMAGE OVERLAY
========================================================= */

.gallery-overlay {
  position: absolute;

  inset: 0;

  z-index: 2;

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  padding: 22px;

  background: linear-gradient(
    to top,
    rgba(3, 6, 22, 0.9),
    rgba(3, 6, 22, 0.05) 50%,
    transparent
  );

  opacity: 0;

  transition: opacity 0.25s ease;

  pointer-events: none;
}

.gallery-item:hover .gallery-overlay {
  opacity: 1;
}

/* =========================================================
   GALLERY NUMBER
========================================================= */

.gallery-number {
  color: var(--gold-light);

  font-family: "Cinzel", serif;

  font-size: 0.8rem;

  letter-spacing: 2px;
}

/* =========================================================
   VIEW BUTTON
========================================================= */

.gallery-view {
  width: 42px;
  height: 42px;

  display: flex;

  align-items: center;
  justify-content: center;

  border: 1px solid rgba(215, 180, 90, 0.65);

  border-radius: 50%;

  color: var(--gold-light);

  font-size: 0.8rem;

  transform: translateY(8px);

  transition:
    transform 0.25s ease,
    background 0.2s ease,
    color 0.2s ease;
}

.gallery-item:hover .gallery-view {
  transform: translateY(0);
}

.gallery-view:hover {
  background: var(--gold);

  color: var(--midnight);
}

/* =========================================================
   MISSING IMAGE PLACEHOLDER
========================================================= */

.gallery-image.image-missing {
  display: flex;

  align-items: center;
  justify-content: center;

  background:
    radial-gradient(
      circle at center,
      rgba(215, 180, 90, 0.08),
      transparent 60%
    ),
    #080d27;
}

.gallery-image.image-missing::after {
  content: "IMAGE COMING SOON";

  position: absolute;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  color: rgba(215, 180, 90, 0.6);

  font-family: "Inter", sans-serif;

  font-size: 0.6rem;

  font-weight: 600;

  letter-spacing: 3px;

  text-align: center;

  white-space: nowrap;
}

/* =========================================================
   LIGHTBOX
========================================================= */

.gallery-lightbox {
  position: fixed;

  inset: 0;

  z-index: 9999;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 50px;

  background: rgba(2, 5, 18, 0.97);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.gallery-lightbox.active {
  opacity: 1;

  visibility: visible;

  pointer-events: auto;
}

/* =========================================================
   LIGHTBOX CONTENT
========================================================= */

.lightbox-content {
  position: relative;

  z-index: 2;

  width: min(1000px, 82vw);

  max-height: 90vh;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;
}

/* =========================================================
   LIGHTBOX IMAGE
========================================================= */

.lightbox-image-wrapper {
  position: relative;

  max-width: 100%;

  max-height: 75vh;

  transform: scale(0.96);

  opacity: 0;

  transition:
    transform 0.3s ease,
    opacity 0.25s ease;
}

.gallery-lightbox.active .lightbox-image-wrapper {
  transform: scale(1);

  opacity: 1;
}

.lightbox-image-wrapper::before {
  content: "";

  position: absolute;

  inset: -1px;

  border: 1px solid rgba(215, 180, 90, 0.35);

  pointer-events: none;
}

#lightboxImage {
  display: block;

  max-width: min(1000px, 82vw);

  max-height: 75vh;

  width: auto;

  height: auto;

  object-fit: contain;

  background: #05091e;
}

/* =========================================================
   LIGHTBOX INFORMATION
========================================================= */

.lightbox-info {
  width: 100%;

  display: grid;

  grid-template-columns: 1fr auto;

  grid-template-areas:
    "category counter"
    "title counter";

  align-items: end;

  gap: 5px 20px;

  margin-top: 20px;

  padding-top: 18px;

  border-top: 1px solid var(--border);
}

.lightbox-info span:first-child {
  grid-area: category;

  color: var(--gold);

  font-size: 0.62rem;

  font-weight: 600;

  letter-spacing: 3px;
}

.lightbox-info h3 {
  grid-area: title;

  font-family: "Cinzel", serif;

  font-size: 1.25rem;

  font-weight: 500;

  color: var(--white);
}

#lightboxCounter {
  grid-area: counter;

  color: var(--muted);

  font-family: "Cinzel", serif;

  font-size: 0.8rem;

  letter-spacing: 2px;
}

/* =========================================================
   LIGHTBOX CLOSE BUTTON
========================================================= */

.lightbox-close {
  position: absolute;

  top: 30px;
  right: 35px;

  z-index: 10;

  width: 48px;
  height: 48px;

  display: flex;

  align-items: center;
  justify-content: center;

  border: 1px solid rgba(215, 180, 90, 0.35);

  border-radius: 50%;

  background: transparent;

  color: var(--gold-light);

  font-size: 1rem;

  cursor: pointer;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}

.lightbox-close:hover {
  background: var(--gold);

  color: var(--midnight);

  transform: rotate(90deg);
}

/* =========================================================
   LIGHTBOX ARROWS
========================================================= */

.lightbox-arrow {
  position: absolute;

  top: 50%;

  z-index: 10;

  transform: translateY(-50%);

  width: 52px;
  height: 52px;

  display: flex;

  align-items: center;
  justify-content: center;

  border: 1px solid rgba(215, 180, 90, 0.35);

  border-radius: 50%;

  background: rgba(4, 8, 27, 0.7);

  color: var(--gold-light);

  cursor: pointer;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}

.lightbox-prev {
  left: 35px;
}

.lightbox-next {
  right: 35px;
}

.lightbox-arrow:hover {
  background: var(--gold);

  color: var(--midnight);
}

.lightbox-prev:hover {
  transform: translateY(-50%) translateX(-4px);
}

.lightbox-next:hover {
  transform: translateY(-50%) translateX(4px);
}

/* =========================================================
   SCROLL REVEAL
   DISABLED FOR GALLERY ARTWORK
========================================================= */

.artwork-section .reveal,
.artwork-section .reveal.visible {
  opacity: 1 !important;

  transform: none !important;

  transition: none !important;

  animation: none !important;
}

/* =========================================================
   REMOVE STAGGERED GALLERY ANIMATION
========================================================= */

.artwork-section .gallery-item:nth-child(1),
.artwork-section .gallery-item:nth-child(2),
.artwork-section .gallery-item:nth-child(3),
.artwork-section .gallery-item:nth-child(4),
.artwork-section .gallery-item:nth-child(5),
.artwork-section .gallery-item:nth-child(6),
.artwork-section .gallery-item:nth-child(7),
.artwork-section .gallery-item:nth-child(8),
.artwork-section .gallery-item:nth-child(9),
.artwork-section .gallery-item:nth-child(10),
.artwork-section .gallery-item:nth-child(11),
.artwork-section .gallery-item:nth-child(12),
.artwork-section .gallery-item:nth-child(13),
.artwork-section .gallery-item:nth-child(14),
.artwork-section .gallery-item:nth-child(15),
.artwork-section .gallery-item:nth-child(16),
.artwork-section .gallery-item:nth-child(17),
.artwork-section .gallery-item:nth-child(18),
.artwork-section .gallery-item:nth-child(19),
.artwork-section .gallery-item:nth-child(20),
.artwork-section .gallery-item:nth-child(21),
.artwork-section .gallery-item:nth-child(22) {
  transition-delay: 0s;
}

/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1100px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* =========================================================
   RESPONSIVE — SMALL TABLET
========================================================= */

@media (max-width: 800px) {
  .gallery-hero {
    min-height: 60vh;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);

    gap: 16px;
  }

  .artwork-section,
  .illustration-section {
    padding: 110px 0;
  }

  .gallery-section-header {
    margin-bottom: 55px;
  }

  .gallery-lightbox {
    padding: 25px;
  }

  .lightbox-content {
    width: 90vw;
  }

  #lightboxImage {
    max-width: 90vw;

    max-height: 70vh;
  }

  .lightbox-prev {
    left: 12px;
  }

  .lightbox-next {
    right: 12px;
  }

  .lightbox-arrow {
    width: 42px;
    height: 42px;
  }
}

/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 550px) {
  .gallery-hero {
    min-height: 58vh;
  }

  .gallery-hero h1 {
    font-size: 3.2rem;
  }

  .gallery-hero p {
    font-size: 1.15rem;
  }

  .gallery-grid {
    grid-template-columns: 1fr;

    gap: 18px;
  }

  .gallery-image {
    aspect-ratio: 4 / 5;
  }

  .gallery-overlay {
    opacity: 1;

    padding: 16px;
  }

  .gallery-view {
    width: 38px;
    height: 38px;
  }

  .gallery-lightbox {
    padding: 15px;
  }

  .lightbox-close {
    top: 15px;
    right: 15px;

    width: 42px;
    height: 42px;
  }

  .lightbox-arrow {
    top: auto;

    bottom: 90px;

    transform: none;
  }

  .lightbox-prev {
    left: 25px;
  }

  .lightbox-next {
    right: 25px;
  }

  .lightbox-prev:hover,
  .lightbox-next:hover {
    transform: none;
  }

  .lightbox-info {
    grid-template-columns: 1fr;

    grid-template-areas:
      "category"
      "title"
      "counter";

    gap: 5px;

    text-align: center;
  }

  #lightboxCounter {
    margin-top: 5px;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .gallery-page *,
  .gallery-page *::before,
  .gallery-page *::after {
    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

    scroll-behavior: auto !important;
  }
}

/* =========================================================
   GALLERY PERFORMANCE OPTIMIZATION
========================================================= */

.gallery-item,
.gallery-item img {
  backface-visibility: hidden;

  -webkit-backface-visibility: hidden;
}

/* =========================================================
   TOUCH DEVICES
========================================================= */

@media (hover: none) {
  .gallery-item:hover {
    transform: none;
  }

  .gallery-item:hover img {
    transform: none;

    filter: none;
  }

  .gallery-item:hover .gallery-image::before {
    border-color: transparent;
  }

  .gallery-item:hover .gallery-view {
    transform: translateY(0);
  }
}