/* === Smooth Fade Slideshow (drop-in) ===
   Usage:
     - Ensure your slideshow markup uses .css-slideshow > figure > img
     - Put this file at: static/style.css  (or update your link href)
     - Link in base.html:  <link rel="stylesheet" href="{% static 'style.css' %}">
*/

:root{
  --slide-count: 5;         /* update if you have a different number of figures */
  --duration: 30s;          /* total loop duration */
  --fade-in: 5%;            /* start ramp */
  --hold-end: 25%;          /* end of full-opacity hold */
  --fade-out: 30%;          /* end of fade-out */
}

.css-slideshow{
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;       /* keep a nice box; remove if you prefer natural height */
  overflow: hidden;
  border-radius: 0px;
  isolation: isolate;
}

.css-slideshow figure{
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: translateZ(0);        /* promote layer */
  will-change: opacity;
  animation: fade var(--duration) ease-in-out infinite;
  /* Prevent images stealing clicks if you layer UI over slideshow */
  pointer-events: none;
}

.css-slideshow img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* When slides are swapped programmatically, keep it smooth too */
  transition: opacity 1.8s ease-in-out;
}

/* Keyframes: gradual ramp up, hold, gradual ramp down */
@keyframes fade{
  0%   { opacity: 0; }
  5%   { opacity: 1; }     /* var(--fade-in) proxy */
  25%  { opacity: 1; }     /* var(--hold-end) proxy */
  30%  { opacity: 0; }     /* var(--fade-out) proxy */
  100% { opacity: 0; }
}

/* Stagger timing so slides overlap gracefully.
   For 5 slides over 30s, each starts 6s after the previous.
   Adjust delays if you change --duration or number of figures.
*/
.css-slideshow figure:nth-child(1){ animation-delay: 0s; }
.css-slideshow figure:nth-child(2){ animation-delay: 6s; }
.css-slideshow figure:nth-child(3){ animation-delay: 12s; }
.css-slideshow figure:nth-child(4){ animation-delay: 18s; }
.css-slideshow figure:nth-child(5){ animation-delay: 24s; }

/* Optional: subtle zoom (cinematic) */
.css-slideshow .panzoom{
  animation: kenburns var(--duration) ease-in-out infinite;
}
@keyframes kenburns{
  0%   { transform: scale(1.02); }
  50%  { transform: scale(1.06); }
  100% { transform: scale(1.02); }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .css-slideshow figure{
    animation: none;
    opacity: 1;
  }
  .css-slideshow img{
    transition: none;
  }
}

/* Small screens: keep aspect ratio and rounded corners looking tidy */
@media (max-width: 640px){
  .css-slideshow{ border-radius: 10px; }
}