/* ==========================================================================
   Home gallery — coverflow carousel under the hero (components/Gallery.js)
   Slides are stacked absolutely; data-pos (-3…3, ±9 = parked) decides each
   one's place. Only transform / opacity animate.
   ========================================================================== */
.gallery {
  --g-gold: #d5a442;
  --g-gold-light: #f2cd72;
  --g-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --slide-w: min(960px, 62vw);
  --slide-h: calc(var(--slide-w) * 0.625); /* 16:10 frames */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(56px, 7vw, 110px) 0 clamp(56px, 6vw, 96px);
  background:
    radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px) 0 0 / 5px 5px,
    linear-gradient(180deg, #070707 0%, #0b0a08 50%, #070707 100%);
  border-top: 1px solid rgba(213, 164, 66, 0.18);
}
/* Amber fire light behind the active frame */
.gallery-glow {
  position: absolute;
  left: 50%;
  top: 56%;
  z-index: -1;
  width: min(1500px, 120vw);
  aspect-ratio: 1800 / 1018;
  translate: -50% -50%;
  background: url('public/images/anthony-hernandez/hero-light-burst.webp') center / contain no-repeat;
  opacity: 0.38;
  mix-blend-mode: screen;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 40%, transparent 75%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 40%, transparent 75%);
}

/* --- heading ------------------------------------------------------------- */
.gallery-head { text-align: center; margin-bottom: clamp(28px, 3.4vw, 52px); padding: 0 20px; }
.gallery-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-sub);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.gallery-eyebrow::before,
.gallery-eyebrow::after { content: ''; width: 38px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-deep)); }
.gallery-eyebrow::after { background: linear-gradient(270deg, transparent, var(--gold-deep)); }
.gallery-title {
  margin-top: 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 5.2vw, 5rem);
  line-height: 0.9;
  text-transform: uppercase;
  color: #f1ece3;
  transform: var(--slant);
}
.gallery-title span {
  color: transparent;
  background: linear-gradient(180deg, #ffd27a 0%, #d99a46 48%, #a8702d 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* --- stage & slides ------------------------------------------------------ */
.gallery-stage {
  position: relative;
  height: var(--slide-h);
  touch-action: pan-y;
  user-select: none;
}
.gallery-track { position: absolute; inset: 0; }
.gallery-slide {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--slide-w);
  height: var(--slide-h);
  margin: 0;
  translate: -50% 0;
  transition: transform 850ms var(--g-ease), opacity 850ms var(--g-ease);
  will-change: transform, opacity;
  cursor: pointer;
}
.gallery-slide[data-pos="0"]  { z-index: 5; transform: none; opacity: 1; cursor: default; }
.gallery-slide[data-pos="1"]  { z-index: 4; transform: translateX(66%) scale(0.72); opacity: 0.9; }
.gallery-slide[data-pos="-1"] { z-index: 4; transform: translateX(-66%) scale(0.72); opacity: 0.9; }
.gallery-slide[data-pos="2"]  { z-index: 3; transform: translateX(112%) scale(0.54); opacity: 0.55; }
.gallery-slide[data-pos="-2"] { z-index: 3; transform: translateX(-112%) scale(0.54); opacity: 0.55; }
.gallery-slide[data-pos="3"]  { z-index: 2; transform: translateX(146%) scale(0.42); opacity: 0; }
.gallery-slide[data-pos="-3"] { z-index: 2; transform: translateX(-146%) scale(0.42); opacity: 0; }
.gallery-slide[data-pos="9"]  { z-index: 1; transform: translateX(170%) scale(0.36); opacity: 0; pointer-events: none; }
.gallery-slide[data-pos="-9"] { z-index: 1; transform: translateX(-170%) scale(0.36); opacity: 0; pointer-events: none; }

/* Bevelled gold frame (same language as the Next Fight card) */
.gallery-frame {
  --cut: clamp(10px, 1.2vw, 18px);
  position: relative;
  width: 100%;
  height: 100%;
  padding: 2px;
  background: linear-gradient(135deg, #b8975c 0%, #5c4c33 24%, #2a241b 50%, #6b5737 76%, #c9a866 100%);
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.6));
}
.gallery-media {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #050505;
  clip-path: inherit;
}
/* Neighbours sink into the dark */
.gallery-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 5, 5, 0.25), rgba(5, 5, 5, 0.6));
  transition: opacity 850ms var(--g-ease);
  pointer-events: none;
}
.gallery-slide.is-active .gallery-media::after {
  opacity: 0.35;
  background: linear-gradient(180deg, transparent 62%, rgba(5, 5, 5, 0.75) 100%);
}
.gallery-slide:not(.is-active) .gallery-media::after { opacity: 1; }
.gallery-fill {
  position: absolute;
  inset: -12%;
  width: 124%;
  height: 124%;
  max-width: none;
  object-fit: cover;
  filter: blur(16px) brightness(0.5) saturate(1.15);
}
.gallery-photo {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Slow push-in on the photo in front */
.gallery-slide.is-active .gallery-photo { animation: gallery-ken calc(var(--gallery-interval) + 1s) ease-out both; }

.gallery-num {
  position: absolute;
  left: clamp(16px, 2vw, 28px);
  bottom: clamp(10px, 1.4vw, 20px);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 4.4vw, 4.4rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(242, 205, 114, 0.75);
  transform: var(--slant);
  opacity: 0;
  translate: 0 10px;
  transition: opacity 600ms var(--g-ease) 250ms, translate 600ms var(--g-ease) 250ms;
  pointer-events: none;
}
.gallery-slide.is-active .gallery-num { opacity: 1; translate: 0 0; }

/* --- arrows -------------------------------------------------------------- */
.gallery-arrow {
  position: absolute;
  top: 50%;
  z-index: 6;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  translate: 0 -50%;
  border: 0;
  background: linear-gradient(135deg, #b8975c, #4e4130 45%, #a08a5a);
  color: var(--g-gold-light);
  cursor: pointer;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  transition: filter 200ms ease, translate 200ms var(--g-ease);
}
.gallery-arrow::before {
  content: '';
  position: absolute;
  inset: 2px;
  z-index: -1;
  background: #0f0e0b;
  clip-path: inherit;
}
.gallery-arrow { isolation: isolate; }
.gallery-arrow svg { width: 22px; height: 22px; }
.gallery-arrow--prev { left: calc(50% - var(--slide-w) / 2 - 27px); }
.gallery-arrow--next { right: calc(50% - var(--slide-w) / 2 - 27px); }
.gallery-arrow:hover,
.gallery-arrow:focus-visible { filter: brightness(1.3); }
.gallery-arrow--prev:hover { translate: -3px -50%; }
.gallery-arrow--next:hover { translate: 3px -50%; }
.gallery-arrow:focus-visible { outline: 2px solid var(--g-gold-light); outline-offset: 3px; }

/* --- counter, progress, pause --------------------------------------------- */
.gallery-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2vw, 28px);
  width: min(var(--slide-w), 100% - 40px);
  margin: clamp(26px, 3vw, 40px) auto 0;
}
.gallery-count {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1;
  color: #f1ece3;
  transform: var(--slant);
}
.gallery-count span { font-size: 1rem; color: #8f8a80; }
.gallery-progress { flex: 1; display: flex; gap: 6px; }
.gallery-seg {
  flex: 1;
  height: 18px;
  padding: 8px 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.gallery-seg i {
  display: block;
  height: 2px;
  background: rgba(242, 239, 232, 0.16);
  overflow: hidden;
  position: relative;
}
.gallery-seg i::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #a8702d, var(--g-gold-light));
  transform-origin: left;
  transform: scaleX(0);
}
.gallery-seg.is-done i::after { transform: scaleX(1); opacity: 0.55; }
.gallery-seg.is-active i::after { animation: gallery-fill var(--gallery-interval) linear both; }
.gallery-seg:hover i { background: rgba(242, 205, 114, 0.45); }
.gallery-seg:focus-visible { outline: 2px solid var(--g-gold-light); outline-offset: 2px; }

.gallery-toggle {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(213, 164, 66, 0.4);
  border-radius: 50%;
  background: rgba(10, 9, 7, 0.7);
  color: var(--g-gold-light);
  cursor: pointer;
  transition: border-color 200ms ease;
}
.gallery-toggle:hover,
.gallery-toggle:focus-visible { border-color: var(--g-gold); }
.gallery-toggle svg { grid-area: 1 / 1; width: 14px; height: 14px; }
.gallery-toggle .g-play,
.gallery.is-paused .gallery-toggle .g-pause { display: none; }
.gallery.is-paused .gallery-toggle .g-play { display: block; }

/* Timer and push-in hold while hovered, focused, paused, off screen or hidden */
.gallery:is(.is-holding, .is-paused, .is-offscreen, .is-tab-hidden) .gallery-seg.is-active i::after,
.gallery:is(.is-holding, .is-paused, .is-offscreen, .is-tab-hidden) .gallery-slide.is-active .gallery-photo {
  animation-play-state: paused;
}

@keyframes gallery-fill { to { transform: scaleX(1); } }
@keyframes gallery-ken { from { scale: 1; } to { scale: 1.045; } }

/* --- tablet / phone ------------------------------------------------------ */
@media (max-width: 1100px) {
  .gallery { --slide-w: 74vw; }
  .gallery-slide[data-pos="1"]  { transform: translateX(72%) scale(0.7); opacity: 0.75; }
  .gallery-slide[data-pos="-1"] { transform: translateX(-72%) scale(0.7); opacity: 0.75; }
  .gallery-slide[data-pos="2"],
  .gallery-slide[data-pos="-2"] { opacity: 0; }
}
@media (max-width: 767px) {
  .gallery { --slide-w: 84vw; --slide-h: calc(var(--slide-w) * 0.92); } /* near-square frames suit the mostly landscape photos on phones */
  .gallery-slide[data-pos="1"]  { transform: translateX(78%) scale(0.74); opacity: 0.5; }
  .gallery-slide[data-pos="-1"] { transform: translateX(-78%) scale(0.74); opacity: 0.5; }
  .gallery-arrow { width: 44px; height: 44px; }
  .gallery-arrow--prev { left: 6px; }
  .gallery-arrow--next { right: 6px; }
  .gallery-progress { gap: 3px; }
  .gallery-count { font-size: 1.3rem; }
  .gallery-toggle { width: 44px; height: 44px; }
}

/* --- reduced motion: no autoplay, no push-in, instant swaps --------------- */
@media (prefers-reduced-motion: reduce) {
  .gallery-slide,
  .gallery-media::after,
  .gallery-num { transition: none; }
  .gallery-slide.is-active .gallery-photo { animation: none; }
  .gallery-seg.is-active i::after { animation: none; transform: scaleX(1); }
  .gallery-toggle { display: none; }
}