/**
 * MSA Page Header — extra effects. Loaded only when a header uses one of them
 * (see Render::enqueue_for()). Every animation scales with --msa-ph-k (speed) and is
 * switched off by the reduced-motion rules in front.css and at the end of this file.
 */

/* 1. Image effects -------------------------------------------------------- */
.msa-ph--fx-kenburns-diag :is(.is-active, .is-leaving) .msa-ph__img { animation: msa-ph-kb-diag var(--msa-ph-fx-dur) linear both; }
.msa-ph--fx-drift :is(.is-active, .is-leaving) .msa-ph__img { animation: msa-ph-drift var(--msa-ph-fx-dur) linear both; }
.msa-ph--fx-zoom-rotate :is(.is-active, .is-leaving) .msa-ph__img { animation: msa-ph-zoom-rotate var(--msa-ph-fx-dur) linear both; }
.msa-ph--fx-breathe :is(.is-active, .is-leaving) .msa-ph__img { animation: msa-ph-breathe calc(9s * var(--msa-ph-k)) ease-in-out infinite alternate; }
.msa-ph--fx-grayscale :is(.is-active, .is-leaving) .msa-ph__img {
	animation: msa-ph-gray calc(3.5s * var(--msa-ph-k)) ease .3s both, msa-ph-kb-out var(--msa-ph-fx-dur) linear both;
}
.msa-ph--fx-reveal .is-active .msa-ph__media { animation: msa-ph-reveal calc(1.6s * var(--msa-ph-k)) var(--msa-ph-ease) both; }
.msa-ph--fx-reveal :is(.is-active, .is-leaving) .msa-ph__img { animation: msa-ph-kb-out var(--msa-ph-fx-dur) linear both; }

.msa-ph--fx-duotone .msa-ph__img { filter: grayscale(1) contrast(1.15); }
.msa-ph--fx-duotone :is(.is-active, .is-leaving) .msa-ph__img { animation: msa-ph-kb-out var(--msa-ph-fx-dur) linear both; }
.msa-ph--fx-duotone .msa-ph__media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(135deg, var(--msa-navy-700, #0b3a5c), var(--msa-aqua, #22d3d8));
	mix-blend-mode: color;
	opacity: .85;
}
.msa-ph--fx-duotone .msa-ph__media::after { z-index: 2; }

.msa-ph--fx-tilt .msa-ph__img {
	transform: scale(1.12) translate3d(var(--msa-ph-tx, 0px), var(--msa-ph-ty, 0px), 0);
	transition: transform .8s var(--msa-ph-ease);
}

@keyframes msa-ph-kb-diag { from { transform: scale(1.2) translate3d(-3%, -3%, 0); } to { transform: scale(1.05) translate3d(3%, 3%, 0); } }
@keyframes msa-ph-drift { from { transform: scale(1.16) translate3d(0, -4%, 0); } to { transform: scale(1.16) translate3d(0, 4%, 0); } }
@keyframes msa-ph-zoom-rotate { from { transform: scale(1.06) rotate(0deg); } to { transform: scale(1.22) rotate(2.5deg); } }
@keyframes msa-ph-breathe { from { transform: scale(1.02); } to { transform: scale(1.1); } }
@keyframes msa-ph-gray { from { filter: grayscale(1) contrast(1.05); } to { filter: grayscale(0); } }
@keyframes msa-ph-reveal { from { clip-path: inset(16% 28% round 28px); } to { clip-path: inset(0 round 0); } }

/* 2. Slide transitions ---------------------------------------------------- */
.msa-ph--slider.msa-ph--tr-push-up .msa-ph__slide { transform: translate3d(0, 100%, 0); }
.msa-ph--slider.msa-ph--tr-push-down .msa-ph__slide { transform: translate3d(0, -100%, 0); }
.msa-ph--slider:is(.msa-ph--tr-push-up, .msa-ph--tr-push-down) .msa-ph__slide.is-active { transform: none; transition: transform var(--msa-ph-speed) var(--msa-ph-ease); }
.msa-ph--slider.msa-ph--tr-push-up .msa-ph__slide.is-leaving { transform: translate3d(0, -30%, 0); transition: transform var(--msa-ph-speed) var(--msa-ph-ease); }
.msa-ph--slider.msa-ph--tr-push-down .msa-ph__slide.is-leaving { transform: translate3d(0, 30%, 0); transition: transform var(--msa-ph-speed) var(--msa-ph-ease); }

.msa-ph--slider.msa-ph--tr-curtain .msa-ph__slide { clip-path: inset(0 50%); }
.msa-ph--slider.msa-ph--tr-curtain .msa-ph__slide.is-leaving { clip-path: inset(0); }
.msa-ph--slider.msa-ph--tr-curtain .msa-ph__slide.is-active { clip-path: inset(0); transition: clip-path var(--msa-ph-speed) var(--msa-ph-ease); }

.msa-ph--slider.msa-ph--tr-circle .msa-ph__slide { clip-path: circle(0% at 50% 50%); }
.msa-ph--slider.msa-ph--tr-circle .msa-ph__slide.is-leaving { clip-path: circle(75% at 50% 50%); }
.msa-ph--slider.msa-ph--tr-circle .msa-ph__slide.is-active { clip-path: circle(75% at 50% 50%); transition: clip-path var(--msa-ph-speed) var(--msa-ph-ease); }

@property --msa-ph-blind { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.msa-ph--slider.msa-ph--tr-blinds .msa-ph__slide {
	--msa-ph-blind: 0%;
	-webkit-mask-image: repeating-linear-gradient(90deg, #000 0 var(--msa-ph-blind), transparent var(--msa-ph-blind) 10%);
	mask-image: repeating-linear-gradient(90deg, #000 0 var(--msa-ph-blind), transparent var(--msa-ph-blind) 10%);
}
.msa-ph--slider.msa-ph--tr-blinds .msa-ph__slide.is-leaving { --msa-ph-blind: 10%; }
.msa-ph--slider.msa-ph--tr-blinds .msa-ph__slide.is-active { --msa-ph-blind: 10%; transition: --msa-ph-blind var(--msa-ph-speed) var(--msa-ph-ease); }

.msa-ph--slider.msa-ph--tr-flip .msa-ph__slides { perspective: 1800px; }
.msa-ph--slider.msa-ph--tr-flip .msa-ph__slide { transform: rotateY(90deg); backface-visibility: hidden; }
.msa-ph--slider.msa-ph--tr-flip[data-dir="prev"] .msa-ph__slide { transform: rotateY(-90deg); }
.msa-ph--slider.msa-ph--tr-flip .msa-ph__slide.is-active { transform: none; transition: transform var(--msa-ph-speed) var(--msa-ph-ease); }
.msa-ph--slider.msa-ph--tr-flip .msa-ph__slide.is-leaving { transform: rotateY(-90deg); transition: transform var(--msa-ph-speed) var(--msa-ph-ease); }
.msa-ph--slider.msa-ph--tr-flip[data-dir="prev"] .msa-ph__slide.is-leaving { transform: rotateY(90deg); }

/* 3. Text animations ------------------------------------------------------ */
.msa-ph--text-slide-left .is-active .msa-ph__copy > * { animation: msa-ph-text-left calc(.9s * var(--msa-ph-k)) var(--msa-ph-ease) both; }
.msa-ph--text-slide-right .is-active .msa-ph__copy > * { animation: msa-ph-text-right calc(.9s * var(--msa-ph-k)) var(--msa-ph-ease) both; }
.msa-ph--text-zoom .is-active .msa-ph__copy > * { animation: msa-ph-text-zoom calc(.9s * var(--msa-ph-k)) var(--msa-ph-ease) both; }
.msa-ph--text-blur .is-active .msa-ph__copy > * { animation: msa-ph-text-blur calc(1.1s * var(--msa-ph-k)) ease both; }
.msa-ph--text-mask .is-active .msa-ph__copy > * { animation: msa-ph-text-mask calc(1s * var(--msa-ph-k)) var(--msa-ph-ease) both; }
.msa-ph--text-tracking .is-active .msa-ph__copy > * { animation: msa-ph-text-tracking calc(1.3s * var(--msa-ph-k)) var(--msa-ph-ease) both; }

/* Title split into words / letters: the rest of the copy fades up after it. */
:is(.msa-ph--text-words, .msa-ph--text-letters, .msa-ph--text-typewriter, .msa-ph--text-shine) .is-active .msa-ph__copy > :not(.msa-ph__title) {
	animation: msa-ph-text-up calc(.9s * var(--msa-ph-k)) var(--msa-ph-ease) both;
}
:is(.msa-ph--text-words, .msa-ph--text-letters, .msa-ph--text-typewriter) .is-active .msa-ph__copy > .msa-ph__title { animation: none; }
.msa-ph__split .msa-ph__w { display: inline-block; white-space: nowrap; }
.msa-ph__split .msa-ph__l { display: inline-block; }
.msa-ph--text-words .is-active .msa-ph__w {
	animation: msa-ph-text-up calc(.7s * var(--msa-ph-k)) var(--msa-ph-ease) both;
	animation-delay: calc(.25s + var(--i) * .09s * var(--msa-ph-k));
}
.msa-ph--text-letters .is-active .msa-ph__l {
	animation: msa-ph-letter calc(.6s * var(--msa-ph-k)) var(--msa-ph-ease) both;
	animation-delay: calc(.25s + var(--i) * .03s * var(--msa-ph-k));
}
.msa-ph--text-typewriter .is-active .msa-ph__l {
	animation: msa-ph-type .01s steps(1) both;
	animation-delay: calc(.3s + var(--i) * .065s * var(--msa-ph-k));
}
.msa-ph--text-typewriter .msa-ph__split::after {
	content: "";
	display: inline-block;
	width: .07em;
	height: .9em;
	margin-inline-start: .08em;
	vertical-align: -.06em;
	background: currentColor;
	animation: msa-ph-caret 1s steps(1) infinite;
}

.msa-ph--text-shine .is-active .msa-ph__title {
	color: transparent;
	background: linear-gradient(110deg, var(--msa-ph-title-color, #fff) 0 42%, var(--msa-aqua, #5eead4) 50%, var(--msa-ph-title-color, #fff) 58% 100%) 100% 0 / 250% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	animation: msa-ph-text-up calc(.9s * var(--msa-ph-k)) var(--msa-ph-ease) .38s both, msa-ph-shine calc(6s * var(--msa-ph-k)) ease-in-out 1s infinite;
}

@keyframes msa-ph-text-left { from { opacity: 0; transform: translate3d(-60px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes msa-ph-text-right { from { opacity: 0; transform: translate3d(60px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes msa-ph-text-zoom { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
@keyframes msa-ph-text-blur { from { opacity: 0; filter: blur(14px); } to { opacity: 1; filter: none; } }
@keyframes msa-ph-text-mask { from { clip-path: inset(0 0 100% 0); transform: translate3d(0, 45%, 0); } to { clip-path: inset(-20% -5% -20% -5%); transform: none; } }
@keyframes msa-ph-text-tracking { from { opacity: 0; letter-spacing: .45em; filter: blur(5px); } to { opacity: 1; filter: none; } }
@keyframes msa-ph-letter { from { opacity: 0; transform: translate3d(0, .5em, 0) rotate(8deg); } to { opacity: 1; transform: none; } }
@keyframes msa-ph-type { from { opacity: 0; } to { opacity: 1; } }
@keyframes msa-ph-caret { 50% { opacity: 0; } }
@keyframes msa-ph-shine { 0% { background-position: 100% 0; } 35%, 100% { background-position: 0 0; } }

/* 4. Ambient effects ------------------------------------------------------ */
.msa-ph__ambient--rays span {
	position: absolute;
	left: -25%;
	right: -25%;
	top: -30%;
	height: 140%;
	transform-origin: 50% 0;
	background: repeating-conic-gradient(from 180deg at 50% 0%, rgba(255, 255, 255, 0) 0deg 6deg, rgba(255, 255, 255, .12) 8deg 10deg, rgba(255, 255, 255, 0) 13deg 18deg);
	-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
	mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
	mix-blend-mode: screen;
	filter: blur(6px);
	animation: msa-ph-rays calc(18s * var(--msa-ph-k)) ease-in-out infinite alternate;
}
.msa-ph__ambient--rays span + span { opacity: .7; animation-duration: calc(26s * var(--msa-ph-k)); animation-direction: alternate-reverse; }
@keyframes msa-ph-rays { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }

.msa-ph__ambient--shimmer span {
	position: absolute;
	inset: -40%;
	background: repeating-linear-gradient(115deg, transparent 0 40px, rgba(255, 255, 255, .09) 46px, transparent 54px 90px);
	-webkit-mask-image: radial-gradient(ellipse at 50% 35%, #000 25%, transparent 70%);
	mask-image: radial-gradient(ellipse at 50% 35%, #000 25%, transparent 70%);
	mix-blend-mode: soft-light;
	animation: msa-ph-shimmer calc(9s * var(--msa-ph-k)) ease-in-out infinite alternate;
}
@keyframes msa-ph-shimmer { from { transform: translate3d(-60px, 0, 0) skewX(-4deg); } to { transform: translate3d(60px, -20px, 0) skewX(4deg); } }

.msa-ph__ambient--particles i {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: calc(var(--s) * 1.5px + 1px);
	height: calc(var(--s) * 1.5px + 1px);
	border-radius: 50%;
	background: rgba(255, 255, 255, .8);
	box-shadow: 0 0 6px rgba(255, 255, 255, .6);
	opacity: 0;
	animation: msa-ph-float calc(var(--w) * 1.6 * var(--msa-ph-k)) ease-in-out var(--d) infinite;
}
@keyframes msa-ph-float {
	0% { opacity: 0; transform: translate3d(0, 0, 0); }
	20% { opacity: .85; }
	50% { transform: translate3d(14px, -30px, 0); }
	80% { opacity: .6; }
	100% { opacity: 0; transform: translate3d(-10px, -60px, 0); }
}

.msa-ph__ambient--rain i {
	position: absolute;
	top: -20%;
	left: var(--x);
	width: 1px;
	height: calc(40px + var(--s) * 14px);
	background: linear-gradient(transparent, rgba(255, 255, 255, .45));
	transform: rotate(12deg);
	animation: msa-ph-rain calc((.55s + var(--s) * .08s) * var(--msa-ph-k)) linear var(--d) infinite;
}
@keyframes msa-ph-rain { to { transform: translate3d(-30vh, 140vh, 0) rotate(12deg); } }

.msa-ph__ambient--mist span {
	position: absolute;
	width: 70%;
	height: 60%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(255, 255, 255, .2), transparent);
	filter: blur(30px);
	animation: msa-ph-mist calc(30s * var(--msa-ph-k)) ease-in-out infinite alternate;
}
.msa-ph__ambient--mist span:nth-child(1) { left: -10%; bottom: -15%; }
.msa-ph__ambient--mist span:nth-child(2) { right: -15%; bottom: 0; animation-duration: calc(38s * var(--msa-ph-k)); animation-direction: alternate-reverse; }
.msa-ph__ambient--mist span:nth-child(3) { left: 25%; top: 35%; width: 55%; opacity: .6; animation-duration: calc(46s * var(--msa-ph-k)); }
@keyframes msa-ph-mist { to { transform: translate3d(18%, -6%, 0) scale(1.15); } }

.msa-ph__ambient--leaks span {
	position: absolute;
	inset: -20%;
	mix-blend-mode: screen;
	background: radial-gradient(circle at 15% 20%, rgba(255, 170, 90, .38), transparent 35%);
	animation: msa-ph-leak calc(12s * var(--msa-ph-k)) ease-in-out infinite alternate;
}
.msa-ph__ambient--leaks span + span {
	background: radial-gradient(circle at 85% 75%, rgba(94, 234, 212, .3), transparent 38%);
	animation-duration: calc(17s * var(--msa-ph-k));
	animation-direction: alternate-reverse;
}
@keyframes msa-ph-leak { 0% { opacity: .35; transform: translate3d(0, 0, 0); } 100% { opacity: 1; transform: translate3d(6%, 4%, 0); } }

.msa-ph__ambient--grain span {
	position: absolute;
	inset: -100%;
	opacity: .14;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	animation: msa-ph-grain calc(.9s * var(--msa-ph-k)) steps(5) infinite;
}
@keyframes msa-ph-grain {
	0%, 100% { transform: translate(0, 0); }
	20% { transform: translate(-5%, 3%); }
	40% { transform: translate(4%, -6%); }
	60% { transform: translate(-3%, 6%); }
	80% { transform: translate(6%, 2%); }
}

.msa-ph__ambient--confetti i {
	position: absolute;
	top: -6%;
	left: var(--x);
	width: calc(6px + var(--s) * 1px);
	height: calc(10px + var(--s) * 2px);
	border-radius: 2px;
	background: hsl(var(--h) 85% 62%);
	opacity: .9;
	animation: msa-ph-confetti calc(var(--w) * var(--msa-ph-k)) linear var(--d) infinite;
}
@keyframes msa-ph-confetti {
	from { transform: translate3d(0, 0, 0) rotate(0deg) rotateY(0deg); }
	to { transform: translate3d(40px, 115vh, 0) rotate(540deg) rotateY(720deg); }
}

.msa-ph__ripple {
	position: absolute;
	width: 0;
	height: 0;
	border: 1.5px solid rgba(255, 255, 255, .55);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	animation: msa-ph-ripple calc(2.2s * var(--msa-ph-k)) cubic-bezier(.2, .6, .3, 1) forwards;
}
@keyframes msa-ph-ripple { from { width: 0; height: 0; opacity: .9; } to { width: 240px; height: 240px; opacity: 0; } }

/* 5. Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.msa-ph__ambient:is(.msa-ph__ambient--rain, .msa-ph__ambient--confetti, .msa-ph__ambient--particles, .msa-ph__ambient--ripples, .msa-ph__ambient--grain),
	.msa-ph--text-typewriter .msa-ph__split::after { display: none; }
	.msa-ph--fx-tilt .msa-ph__img { transition: none; transform: none; }
}