/*
 * Atelier Gallery — Plugin styles
 * Hey Zombie Studio — heyzombie.com
 */

/* ═══════════════════════════════════════════════════════════════════════════
   Variables
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --ag-skeleton-base:    #1a1a1a;
  --ag-skeleton-shine:   #2e2e2e;
  --ag-arrow-bg:         rgba(0, 0, 0, 0.4);
  --ag-arrow-bg-hover:   rgba(0, 0, 0, 0.7);
  --ag-arrow-color:      #ffffff;
  --ag-dot-color:        rgba(255, 255, 255, 0.45);
  --ag-dot-active:       #ffffff;
  --ag-transition-speed: 300ms;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Main wrapper
   ═══════════════════════════════════════════════════════════════════════════ */
.atelier-gallery-wrapper {
  position:   relative;
  width:      100%;
  height:     var(--ag-height, 100%);
  overflow:   hidden;
  background: var(--ag-skeleton-base);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Skeleton loader
   ═══════════════════════════════════════════════════════════════════════════ */
.ag-skeleton {
  position:   absolute;
  inset:      0;
  z-index:    2;
  background: var(--ag-skeleton-base);
  overflow:   hidden;
  opacity:    1;
  transition: opacity 0.4s ease;
}

.atelier-gallery-wrapper.ag-ready .ag-skeleton {
  opacity:        0;
  pointer-events: none;
}

.ag-skeleton__shimmer {
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    90deg,
    transparent              0%,
    var(--ag-skeleton-shine) 40%,
    var(--ag-skeleton-shine) 60%,
    transparent              100%
  );
  background-size: 200% 100%;
  animation:       ag-shimmer 1.6s ease-in-out infinite;
}

@keyframes ag-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Splide — reset & full-size
   ═══════════════════════════════════════════════════════════════════════════ */
.atelier-gallery-wrapper .ag-splide {
  position:   absolute;
  inset:      0;
  z-index:    1;
  opacity:    0;
  transition: opacity 0.5s ease;
}

.atelier-gallery-wrapper.ag-ready .ag-splide {
  opacity: 1;
}

.atelier-gallery-wrapper .splide__track,
.atelier-gallery-wrapper .splide__list,
.atelier-gallery-wrapper .splide__slide {
  height: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Images
   ═══════════════════════════════════════════════════════════════════════════ */
.atelier-gallery-wrapper .splide__slide img {
  display:         block;
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: var(--ag-obj-pos, center center);
  will-change:     transform;
}

.atelier-gallery-wrapper[data-cover="false"] .splide__slide img {
  object-fit: contain;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Slide effects
   ─────────────────────────────────────────────────────────────────────────
   ag-fx-playing is applied directly to the <img> by JS.
   The animation runs for --ag-fx-duration (= autoplay interval, or 6s).
   On transition: JS freezes the outgoing img's transform via inline style,
   then resets it after moved — no snap-back visible.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Shared animation properties for all effects */
.atelier-gallery-wrapper[data-slide-effect]:not([data-slide-effect="none"])
  .splide__slide img.ag-fx-playing {
  animation-timing-function: ease-in-out;
  animation-fill-mode:       forwards;
  animation-iteration-count: 1;
  animation-duration:        var(--ag-fx-duration, 6s);
}

/* ── Ken Burns — slow zoom in ────────────────────────────────────────────── */
.atelier-gallery-wrapper[data-slide-effect="ken-burns"]
  .splide__slide img.ag-fx-playing {
  animation-name: ag-ken-burns;
}

@keyframes ag-ken-burns {
  0%   { transform: scale(1.05); }
  100% { transform: scale(1.12); }
}

/* ── Drift — horizontal pan left → right ────────────────────────────────── */
.atelier-gallery-wrapper[data-slide-effect="drift"]
  .splide__slide img.ag-fx-playing {
  animation-name:   ag-drift;
  transform-origin: center center;
}

@keyframes ag-drift {
  0%   { transform: scale(1.15) translateX(-2%); }
  100% { transform: scale(1.15) translateX(2%);  }
}

/* ── Float — zoom + diagonal drift ─────────────────────────────────────── */
.atelier-gallery-wrapper[data-slide-effect="float"]
  .splide__slide img.ag-fx-playing {
  animation-name:   ag-float;
  transform-origin: 40% 60%;
}

@keyframes ag-float {
  0%   { transform: scale(1.08) translate(0%,    0%);   }
  100% { transform: scale(1.15) translate(1.5%, -1.5%); }
}

/* ── Reveal — clip-path wipe from bottom ────────────────────────────────── */
.atelier-gallery-wrapper[data-slide-effect="reveal"]
  .splide__slide img.ag-fx-playing {
  animation-name:     ag-reveal;
  animation-duration: 1.1s !important;
}

@keyframes ag-reveal {
  0%   { clip-path: inset(100% 0 0 0); }
  100% { clip-path: inset(0%   0 0 0); }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .atelier-gallery-wrapper .splide__slide img.ag-fx-playing {
    animation: none !important;
  }
  .ag-skeleton__shimmer {
    animation: none;
  }
  .atelier-gallery-wrapper .ag-splide,
  .atelier-gallery-wrapper .ag-skeleton {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Navigation arrows
   ═══════════════════════════════════════════════════════════════════════════ */
.atelier-gallery-wrapper .splide__arrow {
  width:            48px;
  height:           48px;
  background:       var(--ag-arrow-bg);
  border-radius:    50%;
  border:           none;
  cursor:           pointer;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  transition:       background var(--ag-transition-speed) ease,
                    transform  var(--ag-transition-speed) ease;
  backdrop-filter:  blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.atelier-gallery-wrapper .splide__arrow:hover {
  background: var(--ag-arrow-bg-hover);
  transform:  scale(1.08);
}

.atelier-gallery-wrapper .splide__arrow svg {
  fill:   var(--ag-arrow-color);
  width:  18px;
  height: 18px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Pagination dots
   ═══════════════════════════════════════════════════════════════════════════ */
.atelier-gallery-wrapper .splide__pagination {
  bottom: 20px;
  gap:    6px;
}

.atelier-gallery-wrapper .splide__pagination__page {
  width:         10px;
  height:        10px;
  background:    var(--ag-dot-color);
  border-radius: 50%;
  border:        none;
  padding:       0;
  cursor:        pointer;
  transition:    background var(--ag-transition-speed) ease,
                 transform  var(--ag-transition-speed) ease;
}

.atelier-gallery-wrapper .splide__pagination__page:hover {
  background: rgba(255,255,255,0.75);
  transform:  scale(1.2);
}

.atelier-gallery-wrapper .splide__pagination__page.is-active {
  background: var(--ag-dot-active);
  transform:  scale(1.3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Error state (admins only)
   ═══════════════════════════════════════════════════════════════════════════ */
.atelier-gallery-error {
  padding:       12px 16px;
  background:    #fff3cd;
  border:        1px solid #ffc107;
  border-radius: 6px;
  color:         #856404;
  font-size:     14px;
  font-family:   monospace;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Accessibility
   ═══════════════════════════════════════════════════════════════════════════ */
.atelier-gallery-wrapper:focus-within .splide__arrow {
  outline:        2px solid rgba(255,255,255,0.8);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Slide content overlay
   ─────────────────────────────────────────────────────────────────────────
   .ag-slide-content   — container, positioned inside the slide
   .ag-content-item    — each element (h2, p, button, img…)
   .ag-pos-*           — position variants (9 positions)

   Animation: items fade in + slide up sequentially when the slide becomes
   active (.ag-slide-active is toggled by JS on move/moved).
   Each item has an inline animation-delay set by PHP.
   ═══════════════════════════════════════════════════════════════════════════ */

.ag-slide-content {
  position:   absolute;
  z-index:    10;
  display:    flex;
  flex-direction: column;
  gap:        0.6em;
  padding:    2rem;
  max-width:  680px;
  pointer-events: none; /* let clicks pass through empty areas */
}

/* Re-enable pointer events on interactive children */
.ag-slide-content a,
.ag-slide-content button {
  pointer-events: auto;
}

/* ── Position variants ───────────────────────────────────────────────────── */
.ag-pos-top-left      { top: 0;   left: 0;   align-items: flex-start; }
.ag-pos-top-center    { top: 0;   left: 50%; transform: translateX(-50%); align-items: center; text-align: center; }
.ag-pos-top-right     { top: 0;   right: 0;  align-items: flex-end; text-align: right; }
.ag-pos-center-left   { top: 50%; left: 0;   transform: translateY(-50%); align-items: flex-start; }
.ag-pos-center        { top: 50%; left: 50%; transform: translate(-50%, -50%); align-items: center; text-align: center; }
.ag-pos-center-right  { top: 50%; right: 0;  transform: translateY(-50%); align-items: flex-end; text-align: right; }
.ag-pos-bottom-left   { bottom: 0; left: 0;  align-items: flex-start; }
.ag-pos-bottom-center { bottom: 0; left: 50%; transform: translateX(-50%); align-items: center; text-align: center; }
.ag-pos-bottom-right  { bottom: 0; right: 0; align-items: flex-end; text-align: right; }

/* ── Content items — hidden by default ───────────────────────────────────── */
.ag-content-item {
  opacity:         0;
  transform:       translateY(12px);
  animation:       none;
  /* Inherit color so the user can set it from their own CSS class */
  color:           inherit;
  margin:          0;
  line-height:     1.3;
}

/* ── Active state: trigger the sequential fade-in ────────────────────────── */
.splide__slide.ag-slide-active .ag-content-item {
  animation-name:            ag-content-in;
  animation-duration:        0.55s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode:       forwards;
  /* animation-delay comes from the inline style set by PHP */
}

@keyframes ag-content-in {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0);    }
}

/* ── Exit: fade out quickly when the slide leaves ────────────────────────── */
.splide__slide.ag-slide-leaving .ag-content-item {
  animation-name:            ag-content-out;
  animation-duration:        0.2s;
  animation-timing-function: ease-in;
  animation-fill-mode:       forwards;
  animation-delay:           0ms !important; /* all exit together */
}

@keyframes ag-content-out {
  0%   { opacity: 1; transform: translateY(0);    }
  100% { opacity: 0; transform: translateY(-8px); }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .splide__slide.ag-slide-active .ag-content-item,
  .splide__slide.ag-slide-leaving .ag-content-item {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}