/******************************/
/*     FX - Block Effects     */
/******************************/

/* Classes set by js/core/fx.js from a block's data-fx (CMS > Hero / Image > Effects), only when motion is allowed */
.fx-on { position: relative; overflow: hidden; }
.fx-on img { display: block; }

/* Image blocks: shrink the wrap to the image so overlays sit on the picture only */
.img_wrap.fx-on { width: fit-content; max-width: 100%; }
.module.image.center .img_wrap.fx-on { margin-inline: auto; }
.module.image.right .img_wrap.fx-on { margin-left: auto; }

.fx-layer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* Glow canvas (lights + particles) and a normal canvas (petals) */
canvas.fx-canvas { mix-blend-mode: screen; }
canvas.fx-canvas-normal { mix-blend-mode: normal; } /* petals keep their true color */

/* ----~~~~ Parallax Scroll Zoom */
.fx-parallax {
	--fx-p: 0;
	--fx-amt: 1;
	& img {
		transform: translateY(calc(var(--fx-p) * var(--fx-amt) * 40px)) scale(calc(1 + .02 * var(--fx-amt) + var(--fx-p) * var(--fx-amt) * .08));
		transform-origin: 50% 40%;
		will-change: transform;
	}
}

/* ----~~~~ Light Sweep */
.fx-sweep::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(105deg,
		transparent 35%,
		rgba(200, 180, 255, .12) 45%,
		rgba(255, 255, 255, .22) 50%,
		rgba(200, 180, 255, .12) 55%,
		transparent 65%);
	background-size: 250% 100%;
	background-position: 150% 0;
	mix-blend-mode: soft-light;
	opacity: var(--fx-sweep-op, 1);
}
/* one pass per .fx-sweep-run, retriggered by fx.js every "Every Secs." - pass length = "Sweep Secs." */
.fx-sweep.fx-sweep-run::after { animation: fx-sweep var(--fx-sweep-speed, 3s) ease-in-out both; }

@keyframes fx-sweep {
	from { background-position: 150% 0; }
	to   { background-position: -50% 0; }
}

/* ----~~~~ Fade In on Load */
.fx-fadein img { animation: fx-fade-in 1.6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes fx-fade-in {
	from { opacity: 0; filter: brightness(.6) saturate(.8); }
	to   { opacity: 1; filter: none; }
}

/******************************/
/*     FX - Deck Card Hover   */
/******************************/

/* Classes set per deck in deck.inc (CMS > Deck > Effects): .card-hover = lift + glow, .card-shine = light shine; --card-glow = glow color */
.deck { --card-glow: #8a5ceb; }

.deck.card-hover .card { transition: box-shadow .45s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
.deck.card-hover .card_img img { transition: transform .85s ease, filter .6s ease; }
.deck.card-hover .card-title { transition: transform .45s cubic-bezier(.2,.8,.2,1); }

.deck.card-shine .card_img { position: relative; }
.deck.card-shine .card_img::after {
	content: '';
	position: absolute;
	top: 0; left: -75%;
	width: 50%; height: 100%;
	pointer-events: none;
	background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
	transform: skewX(-20deg);
	opacity: 0;
}
@keyframes card-shine { from { left: -75%; opacity: 1; } to { left: 130%; opacity: 1; } }

@media (hover: hover) {
	.deck.card-hover .card:is(:hover, :has(a:focus-visible)) {
		transform: translateY(-6px);
		box-shadow:
			0 0 0 2px color-mix(in srgb, var(--card-glow) 55%, transparent),
			0 14px 30px -8px color-mix(in srgb, var(--card-glow) 60%, transparent),
			0 0 40px -6px color-mix(in srgb, var(--card-glow) 45%, transparent);
	}
	.deck.card-hover .card:is(:hover, :has(a:focus-visible)) .card_img img { transform: scale(1.08); filter: brightness(1.08) saturate(1.12); }
	.deck.card-hover .card:is(:hover, :has(a:focus-visible)) .card-content:has(.card-title) { background-color: color-mix(in srgb, var(--card-glow) 22%, transparent); }
	.deck.card-hover .card:is(:hover, :has(a:focus-visible)) .card-title { transform: translateY(-3px); }
	.deck.card-shine .card:is(:hover, :has(a:focus-visible)) .card_img::after { animation: card-shine .9s ease-out; }
}

@media (prefers-reduced-motion: reduce) {
	.deck.card-hover .card:hover, .deck.card-hover .card:hover .card-title, .deck.card-hover .card:hover .card_img img { transform: none !important; }
	.deck.card-shine .card:hover .card_img::after { animation: none !important; }
}

/**************************************/
/*     FX - Video Gallery Light Sweep  */
/**************************************/

/* Only the light sweep, set per gallery in videos.inc (CMS > Video Gallery > Effects). The card's own hover
   highlight and colors stay with the page CSS (e.g. watch.css), so nothing else is styled here. */
.videos.card-shine .video .img {
	position: relative;
	overflow: hidden;
	border-top-left-radius: inherit;
	border-top-right-radius: inherit;
}
.videos.card-shine .video .img::after {
	content: '';
	position: absolute;
	top: 0; left: -75%;
	width: 50%; height: 100%;
	pointer-events: none;
	background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
	transform: skewX(-20deg);
	opacity: 0;
}
@media (hover: hover) {
	.videos.card-shine .video:is(:hover, :focus-visible) .img::after { animation: card-shine .9s ease-out; }
}
@media (prefers-reduced-motion: reduce) {
	.videos.card-shine .video:hover .img::after { animation: none !important; }
}
}

/********************************/
/*     FX - Reveal on Scroll    */
/********************************/

/* html.fx-reveal-on is set by js/core/fx.js only when motion is allowed - sections opt out with .no-reveal (CMS > Style);
   page heroes never fade - they're always in view */
.fx-reveal-on main section:not(.no-reveal, .no-fx, :has(> .section > .hero)) > .section {
	transition: opacity .9s ease, translate .9s cubic-bezier(.2,.7,.2,1);
}
.fx-reveal-on main section:not(.no-reveal, .no-fx, :has(> .section > .hero)):not(.is-revealed) > .section { opacity: 0; translate: 0 28px; }

/* cards inside a revealed section arrive one after another - a one-off animation (not a transition)
   so the cards' own hover transitions (lift, glow, zoom) are left untouched */
.fx-reveal-on main section:not(.no-reveal, .no-fx, :has(> .section > .hero)):not(.is-revealed) :is(.deck, .class_wrap, .card_deck) > * { opacity: 0; }
.fx-reveal-on main section.is-revealed:not(.no-reveal, .no-fx) :is(.deck, .class_wrap, .card_deck) > * {
	animation: fx-card-in .7s cubic-bezier(.2,.7,.2,1) both;
	animation-delay: calc(var(--fx-i, 0) * 90ms + 200ms);
}
@keyframes fx-card-in {
	from { opacity: 0; translate: 0 24px; }
	to   { opacity: 1; translate: 0 0; }
}

/*******************************/
/*     FX - Section Dividers   */
/*******************************/

/* shape hangs below the section in its own color (--div-color set by fx.js) - CMS > Style > Bottom Divider */
main section:is(.div-wave, .div-curve, .div-angle, .div-fade) { position: relative; }
main section:is(.div-wave, .div-curve, .div-angle, .div-fade)::after {
	content: '';
	position: absolute;
	left: 0; right: 0;
	top: 100%;
	height: var(--div-h, 46px);
	background: var(--div-color, #000);
	pointer-events: none;
	z-index: 3;
}
main section.div-wave::after  { clip-path: polygon(0 0, 100% 0, 100.00% 50.0%, 95.83% 30.0%, 91.67% 15.4%, 87.50% 10.0%, 83.33% 15.4%, 79.17% 30.0%, 75.00% 50.0%, 70.83% 70.0%, 66.67% 84.6%, 62.50% 90.0%, 58.33% 84.6%, 54.17% 70.0%, 50.00% 50.0%, 45.83% 30.0%, 41.67% 15.4%, 37.50% 10.0%, 33.33% 15.4%, 29.17% 30.0%, 25.00% 50.0%, 20.83% 70.0%, 16.67% 84.6%, 12.50% 90.0%, 8.33% 84.6%, 4.17% 70.0%, 0.00% 50.0%); }
main section.div-curve::after { clip-path: ellipse(62% 100% at 50% 0); }
main section.div-angle::after { clip-path: polygon(0 0, 100% 0, 0 100%); }
main section.div-fade::after  { height: var(--div-h, 70px); background: linear-gradient(var(--div-color, #000), transparent); }
.mobile main section:is(.div-wave, .div-curve, .div-angle)::after { --div-h: 26px; }

/*****************************/
/*     FX - No Effects       */
/*****************************/

/* CMS > Style > No Effects: the section's content stays completely still -
   no reveal, image effects (fx.js skips it), animations, transitions, hover lifts / glows / zooms or light shines */
main section.no-fx *, main section.no-fx *::before, main section.no-fx *::after {
	animation: none !important;
	transition: none !important;
}
main section.no-fx :is(.card, .class_card, .card_img, .img, .img_wrap, picture, img, .card-title, .card-arrow):is(:hover, :focus-within),
main section.no-fx :is(.card, .class_card):is(:hover, :focus-within) :is(img, picture, .card-title, .card-arrow) {
	transform: none !important;
	filter: none !important;
}
main section.no-fx :is(.card, .class_card):is(:hover, :focus-within) { box-shadow: none !important; }
main section.no-fx :is(.card_img, .img, .img_wrap)::after { display: none !important; }