/* =========================================================
   SchoolPay360 Dynamic Gallery
   Pure CSS/JS — no library required
   ========================================================= */

.sp360-gallery,
.sp360-gallery * { box-sizing: border-box; }

.sp360-gallery {
  --sp-orange: #ff6500;
  --sp-orange-2: #ff8a00;
  --sp-navy: #071a2f;
  --sp-white: #fff;
  --sp-muted: rgba(255,255,255,.72);
  width: min(510px, 100%);
  margin: 0 auto;
  font-family: Inter, Arial, Helvetica, sans-serif;
  color: var(--sp-white);
}

.gallery-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 280px;
  overflow: hidden;
  border-radius: 22px;
  background: #071a2f;
  box-shadow: 0 18px 55px rgba(7,26,47,.24);
  isolation: isolate;
}

.slides {
  position: absolute;
  inset: 0;
  perspective: 1300px;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0,0,0) scale(1);
  transition:
    opacity .65s ease,
    transform .85s cubic-bezier(.2,.75,.2,1),
    visibility 0s linear .85s;
  transform-origin: center;
  will-change: transform, opacity;
}

.slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
  transition:
    opacity .65s ease,
    transform .85s cubic-bezier(.2,.75,.2,1),
    visibility 0s;
}

.slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* Automatic effects */
.effect-fade .slide { transform: none; }
.effect-fade .slide.active { transform: none; }

.effect-slide .slide { transform: translateX(100%); }
.effect-slide .slide.active { transform: translateX(0); }
.effect-slide .slide.was-prev { transform: translateX(-100%); }

.effect-zoom .slide { transform: scale(1.12); }
.effect-zoom .slide.active { transform: scale(1); }

.effect-flip .slide { transform: rotateY(80deg) scale(.94); }
.effect-flip .slide.active { transform: rotateY(0) scale(1); }

.effect-cube .slide { transform: rotateY(90deg) translateZ(12%); }
.effect-cube .slide.active { transform: rotateY(0) translateZ(0); }

.effect-kenburns .slide { transform: scale(1); }
.effect-kenburns .slide.active img {
  animation: sp360Kenburns var(--sp-duration, 4000ms) ease-in-out both;
}

@keyframes sp360Kenburns {
  0%   { transform: scale(1.02) translate3d(0,0,0); }
  100% { transform: scale(1.10) translate3d(-1.5%, -1%, 0); }
}

.top-tools {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  gap: 8px;
  z-index: 8;
}

.tool,

.tool {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 18px;
}

.tool:hover { background: rgba(255,101,0,.92); transform: scale(1.05); }

.caption h2 {
  margin: 0 0 5px;
  font-size: clamp(22px, 3vw, 38px);
  line-height: 1.05;
}

.caption p {
  margin: 0;
  max-width: 680px;
  color: var(--sp-muted);
  font-size: clamp(13px, 1.6vw, 17px);
}

.progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  height: 4px;
  background: rgba(255,255,255,.18);
}

.progress span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--sp-orange), var(--sp-orange-2));
}

.gallery-stage.is-paused .progress span { animation-play-state: paused !important; }

.gallery-hint {
  margin: 9px 2px 0;
  color: #657487;
  font-size: 12px;
  text-align: right;
}


.effect-rotate .slide { transform: rotate(-8deg) scale(.92); opacity: 0; }
.effect-rotate .slide.active { transform: rotate(0deg) scale(1); opacity: 1; }

.effect-blur .slide { transform: scale(1.06); filter: blur(12px); opacity: 0; }
.effect-blur .slide.active { transform: scale(1); filter: blur(0); opacity: 1; }

.effect-clip .slide {
  clip-path: inset(0 100% 0 0);
  opacity: 1;
}
.effect-clip .slide.active {
  clip-path: inset(0 0 0 0);
  opacity: 1;
}

.effect-diagonal .slide {
  clip-path: polygon(100% 0, 100% 0, 100% 0, 100% 0);
  transform: scale(1.03);
  opacity: 1;
}
.effect-diagonal .slide.active {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transform: scale(1);
  opacity: 1;
}

/* Focus */
.sp360-gallery button:focus-visible,
.sp360-gallery select:focus-visible {
  outline: 3px solid rgba(255,101,0,.35);
  outline-offset: 2px;
}

/* Responsive */
@media (max-width: 720px) {
  .gallery-stage { border-radius: 14px; }
  .top-tools { top: 9px; right: 9px; }
  .tool { width: 40px; height: 40px; }
  .caption { padding: 55px 15px 16px; }
  .gallery-hint { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .slide,
  .tool,
  .nav { transition: none !important; }
  .slide.active img { animation: none !important; }
}

@keyframes sp360Progress {
  from { width: 0; }
  to { width: 100%; }
}