/* =========================================================
   ABOUT PAGE HERO — LUXURY CONTINUOUS PAN + FADE
   - Global timing: 12s total => 6s per slide
   - Pan ping-pongs (no reset jump); fade overlaps (no flash)
   ========================================================= */

:root { --about-slide-cycle: 12s; }

/* Stage (matches home hero sizing) */
.about-hero{
  position: relative;
  overflow: hidden;
  color: var(--light_mindful);
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 66vh;
  padding: 36px 0;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Slides: phase-locked dual animations
   1) about-fade  -> crossfade with overlap
   2) about-bgpan -> L→R pan, alternating to avoid hard reset */
.about-slide{
  position: absolute;
  inset: 0;
  background-position: 0% 50%;
  background-size: 108% auto; /* headroom for pan */
  background-repeat: no-repeat;
  opacity: 0;
  z-index: 0;

  animation-name: about-fade, about-bgpan;
  animation-duration: var(--about-slide-cycle), var(--about-slide-cycle);
  animation-iteration-count: infinite, infinite;
  animation-timing-function: linear, linear;        /* avoids ease stutter */
  animation-delay: var(--offset, 0s), var(--offset, 0s);
  animation-direction: normal, alternate;           /* pan ping-pongs, no snap */
  animation-fill-mode: both, both;

  will-change: opacity, background-position;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Sources + half-cycle phase offset */
.about-slide.s1{
  --offset: 0s;
  background-image: url("/assets/images/facility/gym-cardio.png");
}
.about-slide.s2{
  --offset: calc(var(--about-slide-cycle) / 2); /* 6s */
  background-image: url("/assets/images/facility/gym-weights.png");
}

/* Overlapped crossfade (ensures at least one slide is opaque at all times) */
@keyframes about-fade{
  0%   { opacity: 0; }
  5%   { opacity: 1; }   /* fade in */
  55%  { opacity: 1; }   /* fully visible window */
  60%  { opacity: 0; }   /* fade out while the other fades in */
  100% { opacity: 0; }
}

/* L→R pan; animation-direction: alternate provides seamless backtrack */
@keyframes about-bgpan{
  0%   { background-position:   0% 50%; }
  100% { background-position: 100% 50%; }
}


/* Overlay gradient for readability */
.about-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.30);
  z-index: 1;
}

/* Overlay text */
.about-overlay {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 10px;
  padding: 0 20px;
}

.about-overlay h1 {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: clamp(36px, 6vw, 45px);
  line-height: 1.06;
  color: var(--light_mindful);
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  margin: 0;
}

.about-overlay p {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 300;
  font-size: clamp(16px, 2.2vw, 25px);
  line-height: 1.35;
  color: var(--light_mindful);
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  margin: 0;
}

.about-overlay p strong {
  display: block;
  margin-top: 8px;
  font-weight: 500;
  color: var(--light_mindful);
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* Mobile adjustments */
@media (max-width: 900px) {
  .about-hero {
    min-height: 54vh;
    padding: 24px 0;
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .about-slide {
    animation: none !important;
    opacity: 0;
  }
  .about-slide.s1 {
    opacity: 1 !important;
  }
}

/* ---------------------------------------------------------
   Tuning:
   - Keep --about-slide-cycle at 8s for 4s per slide
   - Increase background-size for more zoom headroom
   - Adjust fade overlap:
       * 40% hold vs. 50% fade gives 10% overlap
   --------------------------------------------------------- */