.rs-root {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  outline: none;
  background: #000;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.rs-track {
  position: absolute;
  inset: 0;
}

.rs-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

/* ─── Transition: fade ─────────────────────────────────────────────── */
.rs-transition-fade .rs-slide {
  opacity: 0;
  transition: opacity 0.8s ease;
}
.rs-transition-fade .rs-slide.is-active {
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
}

/* ─── Transition: slide-h (horizontal) ─────────────────────────────── */
.rs-transition-slide-h .rs-slide {
  transform: translateX(100%);
  transition: transform 0.7s ease;
}
.rs-transition-slide-h .rs-slide.is-active {
  transform: translateX(0);
  z-index: 1;
  pointer-events: auto;
}

/* ─── Transition: slide-v (vertical) ──────────────────────────────── */
.rs-transition-slide-v .rs-slide {
  transform: translateY(100%);
  transition: transform 0.7s ease;
}
.rs-transition-slide-v .rs-slide.is-active {
  transform: translateY(0);
  z-index: 1;
  pointer-events: auto;
}

/* ─── Transition: directional slides ──────────────────────────────── */
.rs-transition-slide-left  .rs-slide { transform: translateX(100%);  transition: transform 0.7s ease; }
.rs-transition-slide-right .rs-slide { transform: translateX(-100%); transition: transform 0.7s ease; }
.rs-transition-slide-up    .rs-slide { transform: translateY(100%);  transition: transform 0.7s ease; }
.rs-transition-slide-down  .rs-slide { transform: translateY(-100%); transition: transform 0.7s ease; }
.rs-transition-slide-left  .rs-slide.is-active,
.rs-transition-slide-right .rs-slide.is-active,
.rs-transition-slide-up    .rs-slide.is-active,
.rs-transition-slide-down  .rs-slide.is-active {
  transform: translate(0, 0);
  z-index: 1;
  pointer-events: auto;
}

/* ─── Transition: zoom ────────────────────────────────────────────── */
.rs-transition-zoom-in  .rs-slide { opacity: 0; transform: scale(0.85); transition: opacity 0.7s ease, transform 0.7s ease; }
.rs-transition-zoom-out .rs-slide { opacity: 0; transform: scale(1.15); transition: opacity 0.7s ease, transform 0.7s ease; }
.rs-transition-zoom-in  .rs-slide.is-active,
.rs-transition-zoom-out .rs-slide.is-active {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
  pointer-events: auto;
}

/* ─── Transition: flip ────────────────────────────────────────────── */
.rs-transition-flip .rs-slide {
  opacity: 0;
  transform: perspective(1200px) rotateY(90deg);
  transition: opacity 0.7s ease, transform 0.7s ease;
  backface-visibility: hidden;
}
.rs-transition-flip .rs-slide.is-active {
  opacity: 1;
  transform: perspective(1200px) rotateY(0deg);
  z-index: 1;
  pointer-events: auto;
}

/* ─── Layers ──────────────────────────────────────────────────────── */
/* .rs-layer-pos handles positioning + anchor offset (no animation).
   .rs-layer handles animation transforms (no positioning conflict). */
.rs-layer-pos {
  position: absolute;
  max-width: 90%;
  pointer-events: none;
}
.rs-layer {
  display: inline-block;
  margin: 0;
  line-height: 1.15;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  will-change: transform, opacity;
  /* No CSS transition here on purpose: layer In/Out animations are driven
     entirely by the Web Animations API (see playLayer in the JS). A CSS
     transition on transform/opacity would race the WAAPI animation and
     produce inconsistent results between layers (e.g. the heading
     finishing a zoom early while the subheading looked correct). */
}

/* Off-stage states. JS adds these classes to enter the off-stage transform,
   then removes them (after delay) to animate to the natural state.
   For out animations, JS *adds* the matching class to animate back off. */
.rs-anim-off-fade        { opacity: 0; }
.rs-anim-off-slide-left  { opacity: 0; transform: translateX(-80px); }
.rs-anim-off-slide-right { opacity: 0; transform: translateX(80px); }
.rs-anim-off-slide-up    { opacity: 0; transform: translateY(-60px); }
.rs-anim-off-slide-down  { opacity: 0; transform: translateY(60px); }
.rs-anim-off-zoom-in     { opacity: 0; transform: scale(0.85); }
.rs-anim-off-zoom-out    { opacity: 0; transform: scale(1.15); }
.rs-anim-off-flip-x      { opacity: 0; transform: perspective(600px) rotateX(90deg); }
.rs-anim-off-flip-y      { opacity: 0; transform: perspective(600px) rotateY(90deg); }
.rs-anim-off-rotate      { opacity: 0; transform: rotate(180deg); }

/* "Suspend transitions" — used by JS while seeding the initial off-stage
   state so the seed doesn't itself animate. */
.rs-anim-no-transition { transition: none !important; }

.rs-layer--heading {
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 700;
  color: #fff;
}
.rs-layer--text {
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 400;
  line-height: 1.45;
  color: #fff;
}

/* Default slide button consumes the theme's --rev-btn-* contract so an unstyled
   CTA matches the site's buttons; a per-layer bgcolor set in the editor is an
   inline style and still overrides this. */
.rs-layer--button {
  display: inline-block;
  padding: var(--rev-btn-padding, 0.85rem 1.85rem);
  background: var(--rev-btn-bg, #fff);
  color: var(--rev-btn-color, #111);
  text-decoration: none;
  font-weight: var(--rev-btn-font-weight, 600);
  border-radius: var(--rev-btn-radius, 4px);
  box-shadow: var(--rev-btn-shadow, none);
  transition: transform 0.2s ease, filter 0.2s ease;
  text-shadow: none;
}
.rs-layer--button:hover {
  filter: brightness(0.95);
  transform: translateY(-2px) translate(var(--rs-tx, 0), var(--rs-ty, 0));
}

.rs-layer--image img {
  display: block;
  width: 100%;
  height: auto;
}

/* ─── Navigation: arrows + dots ───────────────────────────────────── */
.rs-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  border: none;
  cursor: pointer;
  width: 48px;
  height: 48px;
  font-size: 28px;
  line-height: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.rs-arrow:hover { background: rgba(0, 0, 0, 0.75); }
.rs-arrow--prev { left: 16px; }
.rs-arrow--next { right: 16px; }

.rs-dots {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 8px;
}
.rs-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}
.rs-dot.is-active {
  background: #fff;
  transform: scale(1.3);
}

/* ─── Background effects: Ken Burns + parallax + video ──────────── */
.rs-slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}
.rs-kb {
  animation-name: rs-kb-zoom-in;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.rs-kb--zoom-in   { animation-name: rs-kb-zoom-in; }
.rs-kb--zoom-out  { animation-name: rs-kb-zoom-out; }
.rs-kb--pan-left  { animation-name: rs-kb-pan-left; }
.rs-kb--pan-right { animation-name: rs-kb-pan-right; }

@keyframes rs-kb-zoom-in   { from { transform: scale(1);    } to { transform: scale(1.2); } }
@keyframes rs-kb-zoom-out  { from { transform: scale(1.2);  } to { transform: scale(1);   } }
@keyframes rs-kb-pan-left  { from { transform: scale(1.15) translateX(3%);  } to { transform: scale(1.15) translateX(-3%); } }
@keyframes rs-kb-pan-right { from { transform: scale(1.15) translateX(-3%); } to { transform: scale(1.15) translateX(3%);  } }

.rs-parallax { /* JS sets translateY based on scroll position; CSS keeps it cheap. */
  transform: translateY(0);
  transition: none;
}

.rs-slide-video-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.rs-slide-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  /* The wrap is pointer-events:none so it never blocks layer clicks, but
     that also kills the native video controls. Re-enable them here; the
     text/button layers sit above at z-index 2 so they still take clicks. */
  pointer-events: auto;
}
/* iframe variant: oversize so a 16:9 video covers most slide aspect ratios. */
.rs-slide-video-wrap--iframe .rs-slide-video {
  width: 177.78%;
  height: 177.78%;
}
/* Hero background video is decorative: clicks must NOT reach it (no native
   click-to-pause, no embed player toggling). Override the pointer-events:auto
   that exists only to expose controls in standalone sliders. The text/button
   layers sit above at z-index 2, so they still take clicks. */
.revolutionary-hero .rs-slide-video {
  pointer-events: none;
}

/* Shade/tint overlay: sits above bg + video, below the text/button layers,
   so a strong-enough opacity makes white text legible over busy footage. */
.rs-slide-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Keep layers above the bg layer/video/shade. */
.rs-layer-pos { z-index: 2; }

/* ─── Mode: carousel ─────────────────────────────────────────────── */
.rs-mode-carousel { overflow: hidden; }
.rs-mode-carousel .rs-track {
  position: relative;
  inset: auto;
  display: flex;
  height: 100%;
  gap: var(--rs-carousel-gap, 16px);
  transition: transform 0.45s ease;
  will-change: transform;
}
.rs-mode-carousel .rs-slide {
  position: relative;
  inset: auto;
  flex: 0 0 calc((100% - (var(--rs-spv, 1) - 1) * var(--rs-carousel-gap, 16px)) / var(--rs-spv, 1));
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.rs-mode-carousel .rs-arrow[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ─── Mode: scene ────────────────────────────────────────────────── */
.rs-mode-scene .rs-slide {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* ─── Zoom triggers + lightbox (click to enlarge) ────────────────── */

/* Slide-level corner cluster for background image / video triggers. The
   container ignores pointer events so it never blocks layers; the buttons
   inside re-enable them. Sits above layers (z2) but below arrows (z5). */
.rs-zoom-controls {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 4;
  display: flex;
  gap: 8px;
  pointer-events: none;
}
.rs-zoom-btn {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.rs-zoom-btn:hover { background: rgba(0, 0, 0, 0.8); }
.rs-zoom-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.rs-zoom-btn svg { display: block; }

/* Image-layer trigger: tucked into the image corner, revealed on hover. */
.rs-layer--zoomable { position: relative; }
.rs-zoom-btn--layer {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 36px;
  height: 36px;
  opacity: 0;
}
.rs-layer--zoomable:hover .rs-zoom-btn--layer,
.rs-zoom-btn--layer:focus-visible { opacity: 1; }

.rs-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vmin;
  background: rgba(0, 0, 0, 0.9);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.rs-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.rs-lightbox__content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 92vw;
  max-height: 92vh;
}
.rs-lightbox__img,
.rs-lightbox__video {
  display: block;
  max-width: 92vw;
  max-height: 92vh;
  width: auto;
  height: auto;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
  border-radius: 4px;
}
/* 16:9 embed sized to fit the viewport without overflowing either axis. */
.rs-lightbox__embed {
  position: relative;
  width: min(92vw, 163.55vh); /* 92vh * 16/9 */
  aspect-ratio: 16 / 9;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}
.rs-lightbox__embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.rs-lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}
.rs-lightbox__close:hover { background: rgba(0, 0, 0, 0.85); }
.rs-lightbox__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Lock page scroll behind an open lightbox. */
.rs-lightbox-lock { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .rs-lightbox { transition: none; }
}

/* ─── Legacy class fallbacks (in case any theme CSS targets old names) ─ */
.rs-hero { /* old root class */ }
.rs-hero__slide { /* old slide class */ }