/* ═══════════════════════════════════════════════════════════
   SIDEWALK SUNDAY SCHOOL (/swss)
   Page-specific styles layered on colors.css + reset.css + site.css.
   Section rhythm mirrors the Valor landing page; all color and type
   come from the WHC design tokens.
═══════════════════════════════════════════════════════════ */

/* Nav links stay readable over light sections (matches kids-ministry.html) */
@media (prefers-color-scheme: light) {
  .nav-link-item,
  .nav-live {
    color: rgba(0, 0, 0, 0.88);
  }
}


/* ═══════════════════════════════════════════════════════════
   SHARED — headings, dark bands, parallax layers
═══════════════════════════════════════════════════════════ */
.swss-h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 900;
  line-height: 1.08;
  color: var(--text);
  margin-bottom: 22px;
  text-wrap: balance;
}

.swss-h2 em {
  font-style: italic;
  color: var(--purple-lighter);
}

.swss-lead {
  font-size: 17px;
  line-height: 1.8;
  color: var(--muted);
}

.swss-center {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.swss-center .section-label {
  justify-content: center;
}

.swss-center .section-label::before {
  display: none;
}

/* Full-bleed dark band with an oversized parallax image layer behind a scrim.
   Stays dark in light mode (like .hero-bg) so white text always reads. */
.swss-band {
  position: relative;
  overflow: hidden;
  padding: 140px 0;
  background: #08050f;
  color: #f5f2fd;
  isolation: isolate;
}

.swss-parallax-layer {
  position: absolute;
  inset: -20% 0;
  z-index: -2;
  will-change: transform;
}

.swss-parallax-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swss-band-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 90% at 20% 25%, rgba(87, 49, 152, 0.55), transparent 70%),
    linear-gradient(180deg, rgba(8, 5, 15, 0.78) 0%, rgba(8, 5, 15, 0.9) 100%);
}

.swss-band .section-label {
  color: #c4a0ff;
}

.swss-band .section-label::before {
  background: #c4a0ff;
}

.swss-band .swss-h2 {
  color: #f5f2fd;
}

.swss-band .swss-h2 em {
  color: #c4a0ff;
}

.swss-band .swss-lead {
  color: rgba(235, 228, 255, 0.78);
}

/* Outline buttons on dark bands keep light text in both schemes */
.swss-band .btn-outline,
.swss-hero .btn-outline {
  color: #f5f2fd;
  border-color: rgba(255, 255, 255, 0.45);
}

.swss-band .btn-outline:hover,
.swss-hero .btn-outline:hover {
  color: #fff;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.swss-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 36px;
}

.swss-center .swss-actions {
  justify-content: center;
}


/* ═══════════════════════════════════════════════════════════
   1. HERO — We Go to the One.
   Uses site .hero / .hero-bg / .hero-visual; the visual layer is
   swapped for an oversized parallax layer.
═══════════════════════════════════════════════════════════ */
.swss-hero .hero-visual.swss-parallax-layer {
  inset: -20% 0;
  z-index: 0;
}

.swss-hero .hero-content {
  max-width: 780px;
}

.swss-hero .hero-title {
  font-size: clamp(48px, 7.5vw, 104px);
}

.swss-hero .hero-sub {
  max-width: 600px;
  margin-top: 26px;
}

.swss-hero .hero-sub strong {
  color: #f5f2fd;
  font-weight: 600;
}

.swss-hero-tagline {
  font-family: var(--font-cond);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #c4a0ff;
  margin-top: 28px;
  opacity: 0;
  animation: fade-up 1s 0.8s forwards;
}


/* ═══════════════════════════════════════════════════════════
   2. ONE MISSION — souls counter
═══════════════════════════════════════════════════════════ */
.swss-counter {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(76px, 15vw, 190px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 24px 60px rgba(87, 49, 152, 0.6);
  margin: 10px 0 8px;
}

.swss-counter-label {
  font-family: var(--font-cond);
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 800;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: #c4a0ff;
  margin-bottom: 40px;
}

.swss-counter-label span {
  display: block;
  font-size: 0.7em;
  letter-spacing: 3px;
  color: rgba(235, 228, 255, 0.65);
  margin-top: 6px;
}

.swss-name-lines {
  list-style: none;
  margin: 34px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 700;
  color: #f5f2fd;
}

.swss-name-lines li:last-child {
  color: #c4a0ff;
}

.swss-mission .swss-motto {
  margin-top: 22px;
}

.swss-motto {
  font-family: var(--font-cond);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(235, 228, 255, 0.75);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.swss-motto span + span::before {
  content: '·';
  margin-right: 18px;
  color: var(--purple-lighter);
}


/* ═══════════════════════════════════════════════════════════
   3. WHAT IS SWSS — intro + image cards + video
═══════════════════════════════════════════════════════════ */
.swss-about {
  padding: 110px 0 96px;
}

.swss-about .swss-center {
  margin-bottom: 52px;
}

.swss-about .swss-lead + .swss-lead {
  margin-top: 14px;
}

.swss-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 56px;
}

.swss-card {
  position: relative;
  height: 340px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--card);
}

.swss-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.swss-card:hover img {
  transform: scale(1.05);
}

.swss-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(8, 5, 15, 0.92) 0%, rgba(8, 5, 15, 0.1) 58%);
}

.swss-card-body {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
  z-index: 1;
}

.swss-card-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.1;
  color: #f5f2fd;
}

.swss-about-close {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 40px;
}

.swss-about-close h3 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 900;
  color: var(--text);
  margin-bottom: 14px;
}

.swss-about .video-featured {
  max-width: 980px;
  margin: 0 auto;
}


/* ═══════════════════════════════════════════════════════════
   4. A PLACE FOR THEM — text + floating collage + age badge
═══════════════════════════════════════════════════════════ */
.swss-ages {
  background: var(--deep);
}

.swss-age-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  margin: 6px 0 22px;
  border-radius: var(--radius-pill);
  background: var(--purple-dim);
  border: 1px solid var(--border-hover);
  font-family: var(--font-cond);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--purple-lighter);
}

.swss-seen-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 20px 0 24px;
}

.swss-seen-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  padding: 14px 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--transition);
}

.swss-seen-list li::before {
  content: '';
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--purple-lighter);
}

.swss-seen-list li:hover {
  border-color: var(--border-hover);
}

/* .about-text scope beats site.css `.about-text p` */
.about-text .swss-purpose {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
  color: var(--purple-lighter);
}

.swss-collage {
  position: relative;
  height: 620px;
}

.swss-collage-main {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 62%;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}

.swss-collage-float {
  position: absolute;
  top: 48%;
  width: 46%;
  height: 40%;
  border-radius: var(--radius);
  overflow: hidden;
  border: 6px solid var(--deep);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.35);
  animation: swss-float 6s ease-in-out infinite;
}

.swss-collage-float--left {
  left: 3%;
}

.swss-collage-float--right {
  right: 3%;
  animation-delay: 1.4s;
}

.swss-collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swss-badge {
  position: absolute;
  left: 50%;
  top: 68%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: var(--purple);
  color: #fff;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 12px;
  box-shadow: 0 16px 40px var(--purple-glow);
  font-family: var(--font-cond);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1.3;
}

.swss-badge strong {
  display: block;
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0;
  text-transform: none;
  margin-top: 4px;
}

@keyframes swss-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}


/* ═══════════════════════════════════════════════════════════
   5. WE CARE — rotating "Sometimes…" lines on a parallax band
═══════════════════════════════════════════════════════════ */
.swss-rotator {
  position: relative;
  min-height: 130px;
  margin: 18px auto 6px;
  max-width: 760px;
}

.swss-rotator-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease, visibility 1s;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.8vw, 36px);
  font-weight: 700;
  line-height: 1.15;
  color: #f5f2fd;
  text-wrap: balance;
}

.swss-rotator-slide.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
}

.swss-rotator-slide em {
  font-style: italic;
  color: #c4a0ff;
}

.swss-rotator-dots {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 44px;
}

.swss-rotator-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(245, 242, 253, 0.3);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.swss-rotator-dots button.is-active {
  background: var(--purple-lighter);
  transform: scale(1.35);
}

.swss-care-body {
  max-width: 640px;
  margin: 0 auto;
}

.swss-care-body p {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(235, 228, 255, 0.8);
  margin-bottom: 14px;
}

.swss-care-body .swss-care-emphasis {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
  line-height: 1.4;
  color: #f5f2fd;
  margin-top: 26px;
}

/* Visible address for visitors without an email client */
.swss-care-email {
  margin-top: 18px;
  font-size: 14px;
  color: rgba(235, 228, 255, 0.7);
}

.swss-care-email a {
  color: #c4a0ff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.swss-care-email a:hover {
  color: #fff;
}


/* ═══════════════════════════════════════════════════════════
   6. UPCOMING EVENTS — JSON-rendered cards
═══════════════════════════════════════════════════════════ */
.swss-events {
  padding: 110px 0 96px;
}

.swss-events .section-header {
  margin-bottom: 18px;
}

.swss-events-intro {
  max-width: 640px;
  margin-bottom: 44px;
}

.swss-events-intro p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted);
}

.swss-events-intro p + p {
  margin-top: 8px;
}

.swss-events-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  /* Size each card to its own content so opening one card's details
     doesn't stretch its row neighbor along with it */
  align-items: start;
}

.swss-event-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.swss-event-card:hover {
  border-color: var(--border-hover);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.25);
}

.swss-event-img {
  position: relative;
  height: 240px;
  background: var(--deep);
}

.swss-event-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 10%;
}

.swss-event-date {
  position: absolute;
  top: 16px;
  left: 16px;
  min-width: 64px;
  padding: 8px 12px;
  text-align: center;
  background: var(--purple);
  color: #fff;
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
}

.swss-event-date .mon {
  display: block;
  font-family: var(--font-cond);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

.swss-event-date .day {
  display: block;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}

.swss-event-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 26px 28px 28px;
}

.swss-event-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 16px;
}

.swss-event-meta {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

.swss-event-meta li {
  display: flex;
  gap: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

.swss-event-meta i {
  width: 16px;
  margin-top: 3px;
  flex-shrink: 0;
  color: var(--purple-lighter);
  text-align: center;
}

.swss-event-meta strong {
  display: block;
  color: var(--text);
  font-weight: 600;
}

.swss-event-address {
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: var(--border-hover);
  text-underline-offset: 3px;
  transition: color var(--transition);
}

.swss-event-address:hover {
  color: var(--purple-lighter);
}

.swss-event-summary {
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 18px;
}

.swss-event-details {
  padding: 18px 20px;
  margin-bottom: 18px;
  background: var(--purple-dim);
  border-left: 3px solid var(--purple-lighter);
  border-radius: var(--radius-sm);
}

.swss-event-details p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text);
}

.swss-event-details p + p {
  margin-top: 10px;
}

.swss-event-toggle {
  margin-top: auto;
  align-self: flex-start;
  background: none;
}

.swss-event-toggle i {
  transition: transform var(--transition);
}

.swss-event-toggle.is-open i {
  transform: rotate(180deg);
}

.swss-events-empty {
  text-align: center;
  padding: 56px 24px;
  background: var(--card);
  border: 1px dashed var(--border-hover);
  border-radius: var(--radius);
}

.swss-events-empty i {
  font-size: 28px;
  color: var(--purple-lighter);
  margin-bottom: 14px;
}

.swss-events-empty h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 8px;
}

.swss-events-empty p {
  font-size: 15px;
  color: var(--muted);
  margin-bottom: 22px;
}


/* ═══════════════════════════════════════════════════════════
   7. A LETTER FROM US TO YOU
═══════════════════════════════════════════════════════════ */
.swss-letter-section {
  background: var(--deep);
}

.swss-letter-section .about-inner {
  grid-template-columns: 0.85fr 1.15fr;
  align-items: start;
}

.swss-letter-photo {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
}

.swss-letter-photo .about-img {
  aspect-ratio: 4/5;
}

.swss-letter-photo .about-img img {
  object-position: 50% 30%;
}

.swss-letter {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 4px solid var(--purple);
  border-radius: var(--radius);
  padding: 52px 52px 48px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.25);
}

.swss-letter p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--muted);
  margin-bottom: 16px;
}

.swss-letter .swss-letter-salutation,
.swss-letter .swss-letter-signoff {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
}

.swss-letter .swss-letter-key {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  color: var(--purple-lighter);
}

.swss-letter .swss-letter-stack {
  color: var(--text);
}

.swss-letter-from {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

.swss-letter-from p {
  margin-bottom: 2px;
}

.swss-letter-from .swss-letter-name {
  font-family: var(--font-cond);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--purple-lighter);
}


/* ═══════════════════════════════════════════════════════════
   8. THE SIDEWALK IS ONLY THE BEGINNING — purple CTA band
═══════════════════════════════════════════════════════════ */
.swss-cta-band {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  text-align: center;
  background: var(--purple);
  color: #fff;
}

.swss-cta-band::before,
.swss-cta-band::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.24);
  pointer-events: none;
}

.swss-cta-band::before {
  top: -140px;
  right: -100px;
  width: 420px;
  height: 420px;
}

.swss-cta-band::after {
  bottom: -180px;
  left: -120px;
  width: 480px;
  height: 480px;
  border-color: rgba(255, 255, 255, 0.16);
}

.swss-cta-band .container {
  position: relative;
}

.swss-cta-band h2 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5.5vw, 72px);
  font-weight: 900;
  line-height: 1.02;
  margin-bottom: 28px;
  text-wrap: balance;
}

.swss-cta-lines {
  list-style: none;
  font-size: 18px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 26px;
}

.swss-cta-one {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  margin-bottom: 18px;
}

.swss-cta-one em {
  font-style: italic;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.swss-cta-band .swss-motto {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 8px;
}

.swss-cta-band .swss-motto span + span::before {
  color: rgba(255, 255, 255, 0.5);
}

.swss-cta-band .swss-actions {
  justify-content: center;
}

.swss-cta-band .btn-primary {
  background: #08050f;
  color: #fff;
}

.swss-cta-band .btn-primary:hover {
  background: #000;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.35);
}

.swss-cta-band .btn-outline {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
}

.swss-cta-band .btn-outline:hover {
  color: #fff;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.14);
}


/* ═══════════════════════════════════════════════════════════
   LIGHT MODE
═══════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: light) {
  .swss-h2 em,
  .about-text .swss-purpose,
  .swss-letter .swss-letter-key,
  .swss-letter-from .swss-letter-name {
    color: #6b3ec4;
  }

  /* Dark bands keep their dark-mode treatment */
  .swss-band .swss-h2 em {
    color: #c4a0ff;
  }

  .swss-collage-float {
    border-color: var(--deep);
  }

  .swss-card::after {
    background: linear-gradient(0deg, rgba(20, 12, 46, 0.9) 0%, rgba(20, 12, 46, 0.05) 58%);
  }

  .swss-event-card:hover,
  .swss-letter {
    box-shadow: 0 22px 50px rgba(30, 12, 72, 0.12);
  }

  .swss-age-pill {
    color: #5b29b0;
  }
}


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .swss-band {
    padding: 110px 0;
  }

  .swss-card-grid {
    grid-template-columns: 1fr 1fr;
  }

  .swss-card:last-child {
    grid-column: 1 / -1;
  }

  .swss-collage {
    height: 520px;
  }

  .swss-events-grid {
    grid-template-columns: 1fr;
  }

  .swss-letter-section .about-inner {
    grid-template-columns: 1fr;
  }

  .swss-letter-photo {
    position: static;
  }

  .swss-letter-photo .about-img {
    aspect-ratio: 16/10;
  }
}

@media (max-width: 640px) {
  .swss-hero .hero-content {
    padding-left: 18px;
    padding-right: 18px;
  }

  .swss-band {
    padding: 88px 0;
  }

  .swss-about,
  .swss-events {
    padding: 80px 0 72px;
  }

  .swss-card-grid {
    grid-template-columns: 1fr;
  }

  .swss-card {
    height: 260px;
  }

  .swss-collage {
    height: 400px;
  }

  .swss-collage-float {
    border-width: 4px;
  }

  .swss-badge {
    width: 104px;
    height: 104px;
    font-size: 9px;
  }

  .swss-badge strong {
    font-size: 17px;
  }

  .swss-rotator {
    min-height: 96px;
  }

  .swss-event-body {
    padding: 22px 20px 24px;
  }

  .swss-letter {
    padding: 34px 22px 30px;
  }

  .swss-cta-band {
    padding: 88px 0;
  }

  .swss-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .swss-motto span + span::before {
    display: none;
  }
}


/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION — parallax is skipped in JS; stop the bob here
═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .swss-collage-float {
    animation: none;
  }

  .swss-card img,
  .swss-rotator-slide {
    transition: none;
  }
}