html.is-page-scrolling .magic-star,
html.is-page-scrolling .snowflake,
html.is-page-scrolling .snow-overlay,
html.is-page-scrolling .magic-overlay {
	animation-play-state: paused !important;
}

html.is-page-scrolling .magic-star,
html.is-page-scrolling .snowflake {
	transition: none !important;
}

section .rslide,
section .rslide .content-wrap {
	will-change: transform;
}

ul.rslides {
	width:100%;
	aspect-ratio: 2 / 1;
}

ul.rslides li.rslide{
	display:flex;
	align-items:flex-end;
	height:100%;
}

ul.rslides li.rslide .image{
	position:absolute;
	background-size:cover;
	background-position:center;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

ul.rslides li.rslide .overlay {
	position: absolute;
	background: var(--image-overlay-gradient);
	top: 0;
	will-change: top;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

ul.rslides li.rslide .content-wrap{
	z-index:50;
	padding:0 2rem;
}

.ccm-image-slider-text {
	position: relative;
	width: fit-content;
	padding: 1rem;
	gap: 1rem;
	background: rgba(255, 255, 255, 0.75);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	max-width: 640px;
	margin: 1rem;
}

.ccm-image-slider-text .inner{
	position:relative;
	z-index:100;
}

.ccm-image-slider-text p {
	line-height: 1.5em;
	text-wrap: balance;
	font-size: .875rem;
	margin-bottom: 0;
}

.ccm-image-slider-text h3 {
	text-wrap: balance;
	margin: 0;
}

.ccm-image-slider .aurora-row{
	display:flex;
	gap:1rem;
	justify-content:center;
}

/* INTERFACE */

.rslides_nav {
	top: 50%;
	bottom: initial;
	background: rgba(255,255,255,0.7);
	width: 40px;
	height: 40px;
	margin: 0;
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	left: initial;
	right: initial;
	opacity:1;
	transition:all 0.3s;
}

.rslides_nav:before{
	content:'\f054';
	font-family:var(--font-awesome);
	color:var(--copper-color);
}

.rslides_nav.prev:before{
	content:'\f053';
}

.rslides_nav.prev{
	border-radius:0 4px 4px 0;
	left: 0;
}

.rslides_nav.next{
	border-radius:4px 0 0 4px;
	right: 0;
}

.rslides_nav:hover{
	background: rgba(255,255,255,1);
}

/* SNOW */


.ccm-image-slider-container .snow-overlay.snow-ready{
  opacity: 1;
}

.ccm-image-slider-container .snow-overlay{
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 20;
  opacity: 0;
  transition: opacity 220ms ease;
}

.snow-overlay .snowflake{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  will-change: transform, opacity;
}

.snow-overlay .snowflake::before,
.snow-overlay .snowflake::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  transition: opacity 600ms linear;
}

/* Base layer (mid) */
.snow-overlay .snowflake::before{
  opacity: 1;
  background: radial-gradient(circle,
	rgba(255,255,255,.95) 0%,
	rgba(255,255,255,.5) 30%,
	rgba(255,255,255,0) 80%);
}

/* Alt layer (sharp by default, we’ll switch via classes) */
.snow-overlay .snowflake::after{
  opacity: 0;
  background: radial-gradient(circle,
	rgba(255,255,255,.95) 0%,
	rgba(255,255,255,.5) 50%,
	rgba(255,255,255,0) 80%);
}

/* Sharp = fade IN ::after */
.snow-overlay .snowflake.flake-sharp::after{ opacity: 1; }

/* Soft = swap ::after to soft gradient and fade it in */
.snow-overlay .snowflake.flake-soft::after{
  opacity: 1;
  background: radial-gradient(circle,
	rgba(255,255,255,.95) 0%,
	rgba(255,255,255,.2) 30%,
	rgba(255,255,255,0) 80%);
}

/* Mid = keep ::after off (so you see ::before only) */
.snow-overlay .snowflake.flake-mid::after{ opacity: 0; }

/* MAGIC */

.magic-overlay{
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
  opacity: 0;
  transition: opacity 600ms ease;
}
.magic-overlay.magic-ready{
  opacity: 1;
}

.magic-overlay .magic-star{
  position:absolute;
  pointer-events:none;
  /* helps brightness read over backgrounds */
  mix-blend-mode: screen;
  opacity: var(--op, .5);
  filter: blur(var(--blur, 0px));
  will-change: opacity, transform;
}

.magic-overlay .magic-star svg{
  width:100%;
  height:100%;
  display:block;
  /* brighter + warmer */
  fill: rgba(255, 250, 235, 1);
  /* glow without heavy blur() */
  filter: drop-shadow(0 0 4px rgba(255, 250, 235, 1))
		  drop-shadow(0 0 8px rgba(255, 210, 120, .7));
}

.magic-overlay .magic-star--static{
  opacity: var(--op, .35);
}

.magic-overlay .magic-star--static svg {
	fill: rgb(255, 245, 220);
	filter: drop-shadow(0 0 2px rgb(255, 245, 220));
}

/* Twinklers: add a scale pulse too (more “alive”) */
.magic-overlay .magic-star--twinkle{
  transform-origin: 50% 50%;
  animation: magicTwinkle var(--twDur, 6s) ease-in-out var(--twDel, 0s) infinite;
}

@keyframes magicTwinkle{
  0%, 100% { 
	opacity: calc(var(--op, .6) * 0.55); 
	transform: scale(1);
  }
  50% { 
	opacity: calc(var(--op, .6) * 1.35); 
	transform: scale(var(--twScale, 1.18));
  }
}

@media screen and (max-width:640px){
	.ccm-image-slider .aurora-row{
		flex-direction:column;
		align-items:center;
		gap:0;
	}
}