.path-frontpage header::before {
	opacity: calc(var(--scroll-position) / 500);
}

.path-frontpage header:has(.mobile-menu[aria-expanded="true"]) {
	z-index: 12;
}

.path-frontpage {
	padding-top: 0 !important;
}

.path-frontpage #toolbar-administration {
    display: none;
}

/* Content Area
--------------------------------------------- */

.home-hero {
	position: relative;
	padding-block: calc(var(--header_height) - 1rem) 5rem;
	background: linear-gradient(180deg, #001A61 0%, #1C3492 100%);
	overflow: hidden;
}

@media (min-width: 1150px) {
	.home-hero::before {
		position: absolute;
		z-index: 0;
		bottom: 10%;
		right: 0;
		translate: 5% 0;
	
		width: 50%;
		aspect-ratio: 125 / 119;
	
		background: url('../../images/button-splat.svg');
		background-repeat: no-repeat;
		background-size: contain;
		content: '';
	
		mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) -30%, #1C3492 100%);
		-webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) -30%, #1C3492 100%);
	}
}

.home-hero .content-wrapper {
	position: relative;
	z-index: 1;
	align-items: start;
}

.home-hero .content {
	display: flex;
	flex-direction: column;
	gap: .625rem;
	grid-column: span 4 / -1;
	margin-block-start: 8rem;
}

.home-hero .content-inner {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 2.25rem;
	background: var(--white);
	border-radius: var(--border_radius);
}

.home-hero .content-inner > *,
.home-hero .content-inner .text-formatted > * {
	margin-block: 0;
}

.home-hero .content-inner .text-formatted {
	display: flex;
	flex-direction: column;
}

.home-hero .content-inner h1 {
	position: relative;
	color: var(--primary_blue);
	line-height: 1;
	margin-bottom: .75rem;
}

.home-hero .content-inner ul {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: 0;
	margin-bottom: 0;
	list-style-type: none;
}

.home-hero .content-inner ul li {
	line-height: 1.3;
	margin-bottom: .75rem;

	opacity: 0;
	translate: 0 35px;
	transition: all .75s ease;
}

.home-hero .content-inner ul li:nth-child(1) { transition-delay: 0; }
.home-hero .content-inner ul li:nth-child(2) { transition-delay: .5s; }
.home-hero .content-inner ul li:nth-child(3) { transition-delay: 1s; }
.home-hero .content-inner ul li:nth-child(4) { transition-delay: 1.5s; }
.home-hero .content-inner ul li:nth-child(5) { transition-delay: 2s; }
.home-hero .content-inner ul li:nth-child(6) { transition-delay: 2.5s; }
.home-hero .content-inner ul li:nth-child(7) { transition-delay: 3s; }
.home-hero .content-inner ul li:nth-child(8) { transition-delay: 3.5s; }

.home-hero .content-inner ul.loaded li {
	opacity: 1;
	translate: 0 0;
}

@media (max-width: 1600px) {
	.home-hero .content-inner h1 {
		font-size: 3.5rem;
	}
}

@media (max-width: 1450px) {
	.home-hero .content-inner h1 {
		font-size: 3rem;
		line-height: 1;
	}
}

@media (max-width: 1300px) {
	.home-hero .content-inner {
		padding: 1.5rem 2.25rem;
	}
}

.home-hero .content-inner strong,
.home-hero .content-inner b {
	color: var(--primary_red);
}

.home-hero .content-inner h1::before {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	width: 2rem;
	height: 100%;
	transform: rotate(24deg) scaleY(1.5);
	background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 45%, rgba(216, 216, 216, 0) 100%);
	content: "";
	opacity: 0;
	translate: -3rem 0;
	animation: text-shine 7s 1s linear infinite
}

@keyframes text-shine {
	0% {
		left: 0;
		opacity: 0
	}
	5% {
		opacity: 1
	}
	8.5% {
		opacity: 0
	}
	10%,100% {
		opacity: 0;
		left: 130%
	}
}

/* What does it take
--------------------------------------------- */

.home-hero .image-wrap {
	position: relative;
	grid-column: 1 / 9;
	align-self: start;
}

@media (max-width: 1300px) {
	.home-hero .image-wrap {
		grid-column: 1 / 8;
	}
	.home-hero .content {
		grid-column: 8 / -1;
		margin-block-start: 2rem;
	}
}

@media (max-width: 1000px) {
	.home-hero .image-wrap {
		grid-column: 1 / -1;
	}
	.home-hero .content {
		grid-column: 1 / -1;
	}
	.home-hero .content {
		display: grid;
		grid-template-columns: 1fr;
	}
}

@media (max-width: 850px) {
	.home-hero {
		padding-block-end: 3rem;
	}
	.home-hero .content {
		grid-template-columns: 1fr;
	}
}

.home-hero-illustration,
.home-hero-illustration svg {
	width: 100%;
	height: auto;
}

.home-hero-sprite-1,
.home-hero-sprite-2,
.home-hero-sprite-3 {
	position: absolute;
	height: auto;
}

.home-hero-sprite-1 {
	left: 0;
	bottom: 0;
	width: 17%;
}

.home-hero-sprite-2 {
	left: 17%;
	bottom: 1%;
	width: 20%;
}

.home-hero-sprite-3 {
	bottom: 0;
	left: 65%;
	width: 16%;
}

.home-hero-sprite-1 svg,
.home-hero-sprite-2 svg,
.home-hero-sprite-3 svg {
	width: 100%;
	height: auto;
}

@media (max-width: 1300px) {
	.home-hero-sprite-3 {
		width: 21%;
		left: 70%;
	}
}

	/* SVG Animations
	--------------------------------------------- */
	
	.home-outsmart [class*='-text-'] path {
		animation: home-text .3s ease-in forwards;
		transform-origin: center;
		scale: .98;
	}
	.home-outsmart [class*='-text-'].home-text-what path { animation-delay: 0.75s; }
	.home-outsmart [class*='-text-'].home-text-does path { animation-delay: 0.95s; }
	.home-outsmart [class*='-text-'].home-text-it path { animation-delay: 1.25s; }
	.home-outsmart [class*='-text-'].home-text-take path { animation-delay: 1.5s; }
	.home-outsmart [class*='-text-'].home-text-to path { animation-delay: 2.25s; }
	.home-outsmart [class*='-text-'].home-text-prevent path { animation-delay: 2.45s; }
	.home-outsmart [class*='-text-'].home-text-ovarian path { animation-delay: 2.65s; }
	.home-outsmart [class*='-text-'].home-text-cancer path { animation-delay: 2.95s; }
	@keyframes home-text {
		0% {
			fill: var(--light_red);
			scale: .98;
		}
		100% {
			fill: var(--white);
			scale: 1;
		}
	}

	.home-tube-group-left, .home-tube-group-right {
		scale: 1;
	}
	.home-tube-group-left {
		transform-origin: center;
		rotate: 3deg;
		animation: home-tube-rotate-left 1s ease-in-out forwards 3.3s;
	}
	.home-tube-group-right {
		transform-origin: center;
		rotate: -3deg;
		animation: home-tube-rotate-right 1s ease-in-out forwards 3.3s;
	}
	.home-tube-group-left path[class*='tube'],
	.home-tube-group-right path[class*='tube'] {
		fill: var(--white);
		animation: home-tube-fill .5s ease-in-out forwards 3.3s;
	}
	@keyframes home-tube-fill {
		0% {
			fill: var(--white);
		}
		100% {
			fill: var(--light_red);
		}
	}
	@keyframes home-tube-rotate-left {
		0% {
			rotate: 3deg;
			scale: 1;
		}
		50% {
			scale: 1.01;
		}
		100% {
			rotate: 0deg;
			scale: 1;
		}
	}
	@keyframes home-tube-rotate-right {
		0% {
			rotate: -3deg;
			scale: 1;
		}
		50% {
			scale: 1.01;
		}
		100% {
			rotate: 0deg;
			scale: 1;
		}
	}

    .home-hero-sprite-2 .bag-splat {
        animation: bag-splat 60s infinite ease-in-out;
    }
    @keyframes bag-splat {
        0% {
            fill: var(--bright_blue);
        }
        17% {
            fill: var(--primary_red);
        }
        34% {
            fill: var(--middle_blue);
        }
        51% {
            fill: var(--light_red);
        }
        68% {
            fill: var(--bright_blue);
        }
        85% {
            fill: var(--primary_red);
        }
        100% {
            fill: var(--middle_blue);
        }
	}

	.home-hero-sprite-3 .banner {
		animation: scale-path 3s infinite ease-in-out;
		transform-origin: top right;
	}
	@keyframes scale-path {
		0%, 100% {
			transform: scaleX(1) scaleY(1);
			rotate: 0deg;
		}
		50% {
			transform: scaleX(0.95) scaleY(1.025);
			rotate: 2deg;
		}
	}

	.home-hero-sprite-3 svg {
		overflow: visible;
	}
	.home-hero-sprite-3 .arm-hand {
		rotate: -2deg;
		animation: arm-hand 4s infinite ease-in-out;
		transform-origin: center;
	}
	@keyframes arm-hand {
		0%, 100% {
			rotate: -2deg;
		}
		50% {
			rotate: 2deg;
		}
	}

/* Video
--------------------------------------------- */

.home-hero .video {
	position: relative;
	z-index: 11;
	background: linear-gradient(0deg, #241C48 0%, #241C48 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.00) 16.48%, rgba(0, 0, 0, 0.77) 89.41%) no-repeat;
	border-radius: var(--border_radius);
	height: 75px;
	cursor: pointer;
	transition: none;
	translate: 0 0;
	filter: drop-shadow(0px 0px 0 rgba(0, 0, 0, 0));
}

body:has(.video.active) .blur-overlay {
	opacity: 1;
	transition: opacity .4s ease .4s;
}

.home-hero .video.active {
	filter: drop-shadow(0px 0px 40px rgba(0, 0, 0, 0.4));
}
.home-hero .video.active {
	top: 50% !important;
    left: 50% !important;
    translate: -50% -50% !important;
    width: 70vw !important;
    height: calc(80vw * 7.88 / 16) !important;
    z-index: 1000;
	transition: 
		top 1s ease-in-out, 
		left 1s ease-in-out, 
		width 1s cubic-bezier(.66,.02,.85,.77), 
		height 1s cubic-bezier(.66,.02,.85,.77), 
		translate 1s ease-in-out;
}
@media (max-width: 800px) {
	.home-hero .video.active {
		width: 96vw !important;
		height: auto !important;
		aspect-ratio: 16 / 9;
	}
}
@media (max-width: 900px) and (orientation: landscape) {
	.home-hero .video.active {
		width: calc(100vw - 10rem) !important;
		aspect-ratio: 16 / 9;
	}
}
.home-hero .video .field--type-image {
	width: 100%;
	height: 100%;
}
.home-hero .video.active img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
    border-radius: var(--border_radius);
	object-fit: cover;
}
.home-hero .video.active .video-iframe {
	opacity: 1;
}
.home-hero .video.active .video-title,
.home-hero .video.active::after {
	opacity: 0;
	pointer-events: none;
}

.home-hero .video::after {
	/* content: ''; */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: calc(100% + 2px);
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 16.48%, rgba(0, 0, 0, 0.77) 89.41%);
	transition: all 1s ease;
	transform-origin: bottom;
    border-radius: var(--border_radius);
	pointer-events: none;
	opacity: .5;
}

.home-hero .video img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--border_radius);
}

.home-hero .video-title {
	position: absolute;
	z-index: 2;
	bottom: 1.5rem;
	left: 1rem;
	padding-inline: 3.25rem;
	color: var(--white);
	font-size: 1.25rem;
	transition: opacity 1s ease;
}

.home-hero .video-title::before {
	content: '';
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 2.5rem;
	aspect-ratio: 1;
	background-color: var(--yellow);
	border-radius: 50%;
	translate: 0 -.5rem;
}

.home-hero .video-title::after {
	content: '';
    position: absolute;
	z-index: 2;
    width: 2.5rem;
    height: 2.5rem;
    top: 0;
	left: 0;
	background: url('../../images/icon-video-play.svg') no-repeat center center;
	background-size: 30% auto;
	translate: 0 -.5rem;
}

.field--name-field-hero-video-title {
	position: relative;
	translate: 0 -2px;
}

.field--name-field-hero-video-title::before {
	content: '';
	position: absolute;
	z-index: 1;
	bottom: -.25em;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: var(--white);
	transform: scaleX(0);
	transform-origin: left;
	transition: all .5s ease;
}

@media (hover:hover) {
	.home-hero .video:hover::after {
		opacity: .6;
	}
	.home-hero .video:hover .field--name-field-hero-video-title::before {
		transform: scaleX(1);
	}
}

.home-hero .video-iframe,
.home-hero .video-iframe iframe {
	position: absolute;
}
.home-hero .video-iframe {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	border-radius: var(--border_radius);
	overflow: hidden;
}
.home-hero .video-iframe iframe {
	top: -1px;
	left: -1px;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
    border-radius: var(--border_radius);
}

.home-hero .video .video-close {
    all: unset;
    position: absolute;
    top: -3rem;
    right: -3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.5rem;
    aspect-ratio: 1;
    color: var(--primary_red);
    font-weight: bold;
    background: var(--yellow);
    border-radius: 50%;
    box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.1);
	translate: -100% 100%;
    opacity: 0;
	visibility: hidden;
    transition: none;
    cursor: pointer;
}

@media (max-width: 800px) {
	.home-hero .video .video-close {
		top: -3.5rem;
		right: 0;
	}
}

@media (orientation: landscape) {
	.home-hero .video .video-close {
		top: 0;
		right: -3rem;
	}
}

.home-hero  .video.active::after {
	opacity: 0;
}

.home-hero .video.active .video-close {
	visibility: visible;
    opacity: 1;
	translate: 0 0;
    transition: opacity 1s ease .5s, visibility 1s ease .5s;
}

@media (hover:hover) {
    .home-hero .video .video-close:hover {
        background: var(--black);
        color: var(--white);
    }
}