/* =========================================================
   Fullscreen BG rotator (compatible + safer)
   - Keeps existing HTML (ul.rotating-bg-parallax > li > span)
   - Fixes background-repeat typo and stacking quirks
   - Adds custom properties for timing
   - Respects reduced-motion
   - Leaves vendor-keyframes for legacy safety
   ========================================================= */


/* ---------- Single static parallax image ---------- */
/* ---------- Single static parallax image ---------- */
/* ---------- Single static parallax image ---------- */
/* ---------- Single static parallax image ---------- */


/* Single static background — controlled by $bgMode = 'single' in bg-rotator-parallax-1and3-images.php
   The image URL is set via inline style on the <span> so it can be changed per-page with $bgSingleImage. */
.rotating-bg-parallax-single {
  position: fixed;
  inset: 0;
  z-index: 0;
}

.rotating-bg-parallax-single span {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}




/* ---------- Rotating BG 3 Image ---------- */
/* ---------- Rotating BG 3 Image ---------- */
/* ---------- Rotating BG 3 Image ---------- */
/* ---------- Rotating BG 3 Image ---------- */
/* ---------- Rotating BG 3 Image ---------- */



:root {
  /* total cycle = number_of_slides * var(--per) */
  --cycle: 27s;  /* default matches your current setup */
  --per: 9s;     /* delay step between slides */
}

/* Container and overlay pattern */
.rotating-bg-parallax,
.rotating-bg-parallax:after {
  position: fixed;
  inset: 0;
  z-index: 0;
}
.rotating-bg-parallax:after {
  content: '';
  background: transparent url(../images/bg/pattern.png) repeat top left;
  pointer-events: none;
}

/* Slides (spans) */
.rotating-bg-parallax li span {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: transparent;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat; /* fixed: was 'none' */
  opacity: 0;                    /* hidden by default */
  z-index: 0;

  /* perf + iOS/Safari stability */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: opacity;

  /* unified runtime for the whole set */
  -webkit-animation: imageAnimation var(--cycle) linear infinite 0s;
  -moz-animation: imageAnimation var(--cycle) linear infinite 0s;
  -o-animation: imageAnimation var(--cycle) linear infinite 0s;
  -ms-animation: imageAnimation var(--cycle) linear infinite 0s;
  animation: imageAnimation var(--cycle) linear infinite 0s;
}

/* Your three images, now with calc-based delays so timing is easy to scale */
.rotating-bg-parallax li:nth-child(1) span { 
  --i: 0;
  background-image: url(../images/bg/1.jpg);
}
.rotating-bg-parallax li:nth-child(2) span { 
  --i: 1;
  background-image: url(../images/bg/2.jpg);
}
.rotating-bg-parallax li:nth-child(3) span { 
  --i: 2;
  background-image: url(../images/bg/3.jpg);
}

/* Delay derived from index * per-slide duration */
.rotating-bg-parallax li span {
  -webkit-animation-delay: calc(var(--i, 0) * var(--per));
  -moz-animation-delay:    calc(var(--i, 0) * var(--per));
  -o-animation-delay:      calc(var(--i, 0) * var(--per));
  -ms-animation-delay:     calc(var(--i, 0) * var(--per));
  animation-delay:         calc(var(--i, 0) * var(--per));
}

/* ----- Keyframes (kept vendor versions for legacy) ----- */
@-webkit-keyframes imageAnimation {
  0%   { opacity: 0; -webkit-animation-timing-function: ease-in; }
  10%  { opacity: 1; -webkit-animation-timing-function: ease-out; }
  30%  { opacity: 1; }
  40%  { opacity: 0; }
  100% { opacity: 0; }
}
@-moz-keyframes imageAnimation {
  0%   { opacity: 0; -moz-animation-timing-function: ease-in; }
  10%  { opacity: 1; -moz-animation-timing-function: ease-out; }
  30%  { opacity: 1; }
  40%  { opacity: 0; }
  100% { opacity: 0; }
}
@-o-keyframes imageAnimation {
  0%   { opacity: 0; -o-animation-timing-function: ease-in; }
  10%  { opacity: 1; -o-animation-timing-function: ease-out; }
  30%  { opacity: 1; }
  40%  { opacity: 0; }
  100% { opacity: 0; }
}
@-ms-keyframes imageAnimation {
  0%   { opacity: 0; -ms-animation-timing-function: ease-in; }
  10%  { opacity: 1; -ms-animation-timing-function: ease-out; }
  30%  { opacity: 1; }
  40%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes imageAnimation {
  0%   { opacity: 0; animation-timing-function: ease-in; }
  10%  { opacity: 1; animation-timing-function: ease-out; }
  30%  { opacity: 1; }
  40%  { opacity: 0; }
  100% { opacity: 0; }
}

/* No-animations fallback: show first frame */
.no-cssanimations .rotating-bg-parallax li:first-child span { opacity: 1; }

/* Respect users who prefer less motion: freeze on first slide */
@media (prefers-reduced-motion: reduce) {
  .rotating-bg-parallax li span {
    -webkit-animation: none !important;
    -moz-animation: none !important;
    -o-animation: none !important;
    -ms-animation: none !important;
    animation: none !important;
    opacity: 0;
  }
  .rotating-bg-parallax li:first-child span { opacity: 1; }
}

/* Hide on smaller screens if desired (kept from original) */
@media only screen and (max-width: 1024px) {
  .rotating-bg-parallax { display: none; }
}