/* ============================================================
   Animated Media Gallery
   Build-agnostic CSS for vanilla HTML/JS and React integrations.
   ============================================================ */

:root{
  --ag-bg:var(--black,#08090b);
  --ag-panel:rgba(17,19,18,.74);
  --ag-panel-strong:rgba(9,10,10,.88);
  --ag-text:var(--ivory,#f6f0e4);
  --ag-muted:var(--grey,#a8a096);
  --ag-line:rgba(201,162,75,.3);
  --ag-accent:var(--gold,#c9a24b);
  --ag-accent-soft:var(--gold-light,#ead7a2);
  --ag-accent-cool:#64c5bc;
  --ag-danger:#d88b7f;
  --ag-radius:8px;
  --ag-control:44px;
  --ag-space:clamp(1rem,2vw,1.5rem);
  --ag-shadow:0 28px 90px rgba(0,0,0,.42);
  --ag-ease:cubic-bezier(.22,1,.36,1);
  --ag-duration:720ms;
  --ag-thumb-duration:260ms;
  --ag-aspect:16/9;
  --ag-glass-blur:18px;
}

.gallery-section{
  overflow:hidden;
  background:
    linear-gradient(180deg,var(--black,#08090b) 0%,#101614 48%,var(--black,#08090b) 100%);
}

.gallery-section::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(120deg,rgba(201,162,75,.08),transparent 36%),
    linear-gradient(300deg,rgba(100,197,188,.07),transparent 42%);
  opacity:.85;
}

.media-gallery{
  --ag-parallax-x:0px;
  --ag-parallax-y:0px;
  --ag-enter-x:4%;
  --ag-progress-state:running;
  width:min(100%,1120px);
  margin:0 auto;
  color:var(--ag-text);
  position:relative;
}

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

.media-gallery__viewport{
  position:relative;
  min-height:320px;
  aspect-ratio:var(--ag-aspect);
  overflow:hidden;
  border:1px solid var(--ag-line);
  border-radius:var(--ag-radius);
  background:
    linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.015)),
    var(--ag-panel-strong);
  box-shadow:var(--ag-shadow);
  isolation:isolate;
  touch-action:pan-y;
}

.media-gallery__viewport::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,0,0,.66),transparent 26%,transparent 70%,rgba(0,0,0,.38)),
    linear-gradient(0deg,rgba(0,0,0,.72),transparent 42%);
}

.media-gallery__track{
  position:absolute;
  inset:0;
  overflow:hidden;
}

.media-gallery__slide{
  position:absolute;
  inset:0;
  display:grid;
  opacity:0;
  pointer-events:none;
  transform:translate3d(var(--ag-enter-x),0,0) scale(.985);
  transition:
    opacity var(--ag-duration) var(--ag-ease),
    transform var(--ag-duration) var(--ag-ease);
}

.media-gallery[data-direction="prev"] .media-gallery__slide{
  --ag-enter-x:-4%;
}

.media-gallery__slide.is-active{
  z-index:2;
  opacity:1;
  pointer-events:auto;
  transform:translate3d(0,0,0) scale(1);
}

.media-gallery__slide.is-before{
  --ag-enter-x:-4%;
}

.media-gallery__slide.is-after{
  --ag-enter-x:4%;
}

.media-gallery__media{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:
    linear-gradient(140deg,rgba(201,162,75,.12),rgba(100,197,188,.055) 42%,rgba(0,0,0,.18)),
    #0d0d0d;
}

.media-gallery__media img,
.media-gallery__media video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transform:
    translate3d(var(--ag-parallax-x),var(--ag-parallax-y),0)
    scale(1.06);
  transition:
    transform calc(var(--ag-duration) * 1.2) var(--ag-ease),
    filter var(--ag-duration) ease;
  will-change:transform;
}

.media-gallery__slide:not(.is-active) .media-gallery__media img,
.media-gallery__slide:not(.is-active) .media-gallery__media video{
  transform:translate3d(0,0,0) scale(1.12);
  filter:saturate(.84) contrast(.94);
}

.media-gallery__media--contain{
  display:grid;
  place-items:center;
}

.media-gallery__media--contain img,
.media-gallery__media--contain video{
  object-fit:contain;
  padding:clamp(2rem,7vw,5.6rem);
  filter:drop-shadow(0 22px 44px rgba(0,0,0,.4));
}

.media-gallery__slide:not(.is-active) .media-gallery__media--contain img,
.media-gallery__slide:not(.is-active) .media-gallery__media--contain video{
  filter:saturate(.84) contrast(.94) drop-shadow(0 18px 34px rgba(0,0,0,.34));
}

.media-gallery__media--photo{
  display:grid;
  place-items:center;
}

.media-gallery__media--photo::before{
  content:"";
  position:absolute;
  inset:-34px;
  background-image:var(--ag-media-bg);
  background-size:cover;
  background-position:center;
  filter:blur(24px) saturate(1.08);
  opacity:.42;
  transform:scale(1.08);
}

.media-gallery__media--photo img,
.media-gallery__media--photo video{
  position:relative;
  z-index:1;
  object-fit:contain;
  padding:0;
  filter:drop-shadow(0 22px 44px rgba(0,0,0,.4));
}

.media-gallery__caption{
  position:absolute;
  z-index:4;
  left:clamp(1rem,3vw,2rem);
  bottom:clamp(1rem,3vw,2rem);
  width:min(480px,calc(100% - 2rem));
  padding:clamp(1rem,2vw,1.35rem);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--ag-radius);
  background:
    linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.045)),
    rgba(8,9,9,.58);
  backdrop-filter:blur(var(--ag-glass-blur));
  box-shadow:0 18px 42px rgba(0,0,0,.26);
}

.media-gallery__kicker{
  margin:0 0 .45rem;
  color:var(--ag-accent-cool);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.28em;
  line-height:1.4;
  text-transform:uppercase;
}

.media-gallery__caption h3{
  margin:0;
  color:var(--ag-text);
  font-size:clamp(1.2rem,2.6vw,2rem);
  line-height:1.08;
  letter-spacing:.04em;
}

.media-gallery__caption p:last-child{
  margin:.55rem 0 0;
  color:var(--ag-muted);
  font-size:clamp(.92rem,1.3vw,1.02rem);
  line-height:1.55;
}

.media-gallery__controls{
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  align-items:center;
  gap:.75rem;
  margin-top:1rem;
}

.media-gallery__button,
.media-gallery__dot,
.media-gallery__play,
.media-gallery__thumb{
  appearance:none;
  border:1px solid var(--ag-line);
  border-radius:var(--ag-radius);
  color:var(--ag-text);
  background:rgba(255,255,255,.055);
  cursor:pointer;
  transition:
    transform var(--ag-thumb-duration) var(--ag-ease),
    border-color var(--ag-thumb-duration) ease,
    background-color var(--ag-thumb-duration) ease,
    color var(--ag-thumb-duration) ease;
}

.media-gallery__button,
.media-gallery__play{
  width:var(--ag-control);
  height:var(--ag-control);
  display:grid;
  place-items:center;
  padding:0;
}

.media-gallery__button:hover,
.media-gallery__play:hover,
.media-gallery__dot:hover,
.media-gallery__thumb:hover{
  border-color:var(--ag-accent-soft);
  background:rgba(201,162,75,.12);
  transform:translateY(-2px);
}

.media-gallery__button:disabled{
  cursor:not-allowed;
  opacity:.4;
  transform:none;
}

.media-gallery__button span{
  font-size:1.8rem;
  line-height:1;
  transform:translateY(-1px);
}

.media-gallery__play span{
  width:14px;
  height:14px;
  display:block;
  position:relative;
}

.media-gallery__play span::before,
.media-gallery__play span::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:4px;
  background:currentColor;
}

.media-gallery__play span::before{left:2px}
.media-gallery__play span::after{right:2px}

.media-gallery.is-paused .media-gallery__play span::before{
  left:3px;
  width:0;
  height:0;
  top:1px;
  bottom:auto;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  border-left:10px solid currentColor;
  background:transparent;
}

.media-gallery.is-paused .media-gallery__play span::after{
  display:none;
}

.media-gallery__dots{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
}

.media-gallery__dot{
  width:34px;
  height:10px;
  padding:0;
  border-radius:999px;
  background:rgba(255,255,255,.12);
}

.media-gallery__dot[aria-current="true"]{
  width:50px;
  border-color:var(--ag-accent-soft);
  background:linear-gradient(90deg,var(--ag-accent),var(--ag-accent-cool));
}

.media-gallery__thumbs{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(78px,1fr);
  gap:.7rem;
  margin-top:.85rem;
  overflow-x:auto;
  padding:.25rem .1rem .45rem;
  scrollbar-width:thin;
  scrollbar-color:var(--ag-accent) transparent;
}

.media-gallery__thumb{
  min-width:78px;
  height:64px;
  padding:0;
  overflow:hidden;
  position:relative;
  opacity:.68;
}

.media-gallery__thumb img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transform:scale(1.04);
  transition:transform var(--ag-thumb-duration) var(--ag-ease);
}

.media-gallery__thumb:hover img,
.media-gallery__thumb[aria-current="true"] img{
  transform:scale(1);
}

.media-gallery__thumb-fallback{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  color:var(--ag-accent-soft);
  font-weight:600;
  background:linear-gradient(135deg,rgba(201,162,75,.14),rgba(100,197,188,.1));
}

.media-gallery__thumb[aria-current="true"]{
  opacity:1;
  border-color:var(--ag-accent-soft);
  box-shadow:0 0 0 1px rgba(201,162,75,.36) inset;
}

.media-gallery__progress{
  position:absolute;
  z-index:5;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  overflow:hidden;
  background:rgba(255,255,255,.08);
}

.media-gallery__progress span{
  display:block;
  width:100%;
  height:100%;
  transform-origin:left;
  transform:scaleX(0);
  background:linear-gradient(90deg,var(--ag-accent),var(--ag-accent-cool));
}

.media-gallery.is-autoplaying:not(.is-paused) .media-gallery__progress span{
  animation:agProgress var(--gallery-interval-ms,5200ms) linear var(--ag-progress-state) forwards;
}

@keyframes agProgress{
  to{transform:scaleX(1)}
}

.media-gallery__status{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
}

@media (max-width:720px){
  .media-gallery__viewport{
    min-height:420px;
    aspect-ratio:4/5;
  }

  .media-gallery__caption{
    left:.85rem;
    right:.85rem;
    bottom:.85rem;
    width:auto;
  }

  .media-gallery__controls{
    grid-template-columns:auto 1fr auto;
  }

  .media-gallery__play{
    grid-column:1 / -1;
    width:100%;
  }

  .media-gallery__thumbs{
    grid-auto-columns:86px;
  }
}

@media (prefers-reduced-motion:reduce){
  .media-gallery,
  .media-gallery *{
    scroll-behavior:auto!important;
  }

  .media-gallery__slide,
  .media-gallery__media img,
  .media-gallery__media video,
  .media-gallery__button,
  .media-gallery__dot,
  .media-gallery__play,
  .media-gallery__thumb,
  .media-gallery__thumb img{
    transition:none!important;
    animation:none!important;
  }

  .media-gallery__media img,
  .media-gallery__media video{
    transform:none!important;
  }
}