@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* Full-bleed breakout */
.rs-rotator {
	width: 100vw;
	height: 100%;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Base container */
.rs-rotator .main-container {
	position: relative;
	width: 100%;
	height: 100%;
	aspect-ratio: 1600 / 720;
	background: #000;
	overflow: hidden;
	perspective: 400px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;

	--slide-duration: 6s;
	--zoom-scale: 1.25;
}
/* Stay hidden until the JS is loaded */
.rs-rotator .main-container:not(.loaded) .img,
.rs-rotator .main-container:not(.loaded) .title {
    opacity: 0;
}

/* Loader */
.rs-rotator .loader-container {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  text-align: center;
  z-index: 60;
  color: #fff;
}

.rs-rotator .loader {
  width: 42px;
  height: 42px;
  margin-bottom: 10px;
  align-self: center;
  border-radius: 50%;
  background: whitesmoke;
  box-shadow: 0px -10px 25px 0px #ffffff inset;
  background: linear-gradient(to right, rgba(255, 255, 255, 1) 50%, transparent 50%);
  opacity: 0.8;
  animation: rs-rotate-center 0.7s infinite linear;
  position: relative;
}

.rs-rotator .loader::before {
  content: '';
  position: absolute;
  width: 39px;
  height: 39px;
  border-radius: 50%;
  background: #000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.rs-rotator .preloaded {
  position: absolute;
  bottom: -1px;
  left: -1px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  visibility: hidden;
}

.rs-rotator .main-container.loaded .loader-container {
  display: none;
}

@keyframes rs-rotate-center {
  0% { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}

/* ==========================================
   TOUR ROTATOR (CSS-driven): .img
   ========================================== */

.rs-rotator-tour .img {
  position: absolute;
  inset: 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  will-change: opacity, transform;
  backface-visibility: hidden;
}

.rs-rotator-tour .main-container.loaded .img {
  opacity: 0;
  animation-name: rs-slide-opacity, rs-kenburns;
  animation-duration: calc(var(--slide-duration) * var(--count)), calc(var(--slide-duration) * var(--count));
  animation-delay: calc(var(--slide-duration) * var(--i)), calc(var(--slide-duration) * var(--i));
  animation-iteration-count: infinite, infinite;
  animation-timing-function: linear, linear;
  animation-fill-mode: both, both;
}

@keyframes rs-slide-opacity {
  0% { opacity: 0; }
  3% { opacity: 1; }
  12% { opacity: 1; }
  20% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes rs-kenburns {
  0%   { transform: scale(1) translate(0, 0); }
  20%  { transform: scale(var(--zoom-scale)) translate(20px, -15px); }
  100% { transform: scale(1) translate(0, 0); }
}

@keyframes kenburns-top {
  0% { transform: scale(1) translateY(0); transform-origin: 50% 16%; }
  100% { transform: scale(1.1) translateY(-15px); transform-origin: top; }
}
@keyframes kenburns-bottom {
  0% { transform: scale(1) translateY(0); transform-origin: 50% 84%; }
  100% { transform: scale(1.1) translateY(15px); transform-origin: bottom; }
}
@keyframes kenburns-right {
  0% { transform: scale(1) translate(0,0); transform-origin: 84% 50%; }
  100% { transform: scale(1.1) translateX(20px); transform-origin: right; }
}
@keyframes kenburns-left {
  0% { transform: scale(1) translate(0,0); transform-origin: 16% 50%; }
  100% { transform: scale(1.1) translate(-20px,15px); transform-origin: left; }
}


/* ==========================
   HOME ROTATOR (Animista-style, JS sequenced)
   ========================== */

.rs-rotator-home .main-container {
  position: relative;
  background: #000;
  overflow: hidden;
}



/* Images */
.rs-rotator-home .img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  opacity: 0;
  z-index: 1;
  will-change: opacity, transform;
  transition: opacity 2s ease-in-out;   /* <-- KEY: transition lives here */
}

.rs-rotator-home .img.is-active {
  opacity: 1;
  z-index: 3;
}

/* Fade-out state, BUT KEEP is-active so Ken Burns transform doesn't snap */
.rs-rotator-home .img.is-active.is-fading {
  opacity: 0;
  z-index: 2;
}
.rs-rotator-home .img.is-fading {
  opacity: 0;
  z-index: 2;
}



/* Titles */
.rs-rotator-home .title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  text-align: center;
  z-index: 5;
  color: #fff;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: clamp(28px, 4vw, 72px);
  opacity: 0;
  filter: blur(24px);
  pointer-events: none;
}

.rs-rotator-home .title.t-in {
  animation: focus-in-contract 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards;
}

.rs-rotator-home .title.t-out {
  animation: text-blur-out 0.9s ease-in forwards;
}



/* HOME Ken Burns: only run while slide is active */
.rs-rotator-home .img.is-active {
  animation-duration: 6s;
  animation-timing-function: linear;
  animation-fill-mode: both;
}



.rs-rotator-home .img.is-active.kb-top    { animation-name: kenburns-top; }
.rs-rotator-home .img.is-active.kb-bottom { animation-name: kenburns-bottom; }
.rs-rotator-home .img.is-active.kb-right  { animation-name: kenburns-right; }
.rs-rotator-home .img.is-active.kb-left   { animation-name: kenburns-left; }


/* Hide loader once loaded */
.rs-rotator-home .main-container.loaded .loader-container { display: none; }

/* HOME rotator: force titles above images + visible when JS adds classes */
.rs-rotator-home .title {
  z-index: 999 !important;
  display: block !important;
  visibility: visible !important;
}



@keyframes focus-in-contract {
  0%   { opacity: 0; filter: blur(24px); letter-spacing: 1em; }
  100% { opacity: 1; filter: blur(0);   letter-spacing: 0.07em; }
}

@keyframes text-blur-out {
  0%   { opacity: 1; filter: blur(0); }
  100% { opacity: 0; filter: blur(24px); }
}

/* HOME rotator: gentler Ken Burns zoom */
.rs-rotator-home .main-container {
  --zoom-scale: 1.01;  /* try 1.08–1.15 */
}