/* Section library (sections/): styles of the sections from the home page design, usable on every page with sections.
   Design: Figma "Home – Redesign Proposal V2" (node 41:722), mobile "Home-Redesign-Mobile" (node 41:1022).
   Builds on school-of-flex.css (variables, resets, container, eyebrow, cards, blog). Every section looks the same on
   every page (client 02.11.: home page design is final, no page-specific variants). Class names fp-home-* are kept
   from the first use on the home page. */

.fp-sof {
	--home-grey: #424747;
	--home-light: #f2f2f2;
	--home-muted: #939393;
	--home-teal: #1cc2ce;
	--home-green: #aaff8e;
}

.fp-sof .fp-home-h2 {
	margin-top: 20px !important;
	font-size: 40px !important;
	line-height: 1.25 !important;
}

/* Yellow button (hero, jobs, contact banner) */
.fp-sof .fp-home-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 184px;
	padding: 16px 30px;
	border-radius: 2px;
	background: var(--sof-yellow);
	font-size: 15px;
	line-height: 1.4;
	color: var(--sof-black);
	transition: background 0.15s;
}

.fp-sof .fp-home-button:hover,
.fp-sof .fp-home-button:focus-visible {
	background: #fff;
}

/* Hero: halo circle with eyebrow and headline, text and button below */

.fp-home-hero {
	position: relative;
	overflow: hidden;
	padding: 281px 0 176px;
	text-align: center;
}

/* Thin white ring, bright top-left and bottom-right, with a soft glow */
.fp-home-hero::before,
.fp-home-hero__ring::before {
	content: '';
	position: absolute;
	border-radius: 50%;
	padding: 1.5px;
	background: conic-gradient(
		rgba(255, 255, 255, 0.95) 0deg,
		rgba(255, 255, 255, 0.35) 40deg,
		rgba(255, 255, 255, 0.08) 70deg,
		rgba(255, 255, 255, 0.6) 110deg,
		rgba(255, 255, 255, 0.95) 145deg,
		rgba(255, 255, 255, 0.6) 185deg,
		rgba(255, 255, 255, 0.05) 215deg,
		rgba(255, 255, 255, 0.15) 250deg,
		rgba(255, 255, 255, 0.85) 285deg,
		rgba(255, 255, 255, 0.95) 360deg
	);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.35));
	pointer-events: none;
}

.fp-home-hero::before {
	top: 62px;
	left: 50%;
	width: 842px;
	height: 842px;
	transform: translateX(-50%);
}

.fp-home-hero__ring::before {
	display: none;
}

.fp-home-hero__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.fp-home-hero__ring {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.fp-sof .fp-home-hero__eyebrow {
	gap: 8px;
}

.fp-sof .fp-home-hero__eyebrow::before {
	width: 8px;
	height: 8px;
}

.fp-sof .fp-home-hero__title {
	max-width: 906px;
	margin-top: 45px !important;
	font-size: 60px !important;
	line-height: 1.04 !important;
	color: #fff;
}

.fp-sof .fp-home-hero__text {
	max-width: 698px;
	margin-top: 40px !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
}

.fp-home-hero .fp-home-button {
	width: 220px;
	margin-top: 30px; /* 30 px below the text */
}

/* Reasons: green gradient box with dark tiles */

.fp-home-reasons {
	padding: 0 48px;
}

.fp-home-reasons__box {
	padding: 73px 40px 100px;
	border-radius: 30px;
	background: linear-gradient(-24.57deg, var(--home-teal) 35.98%, var(--home-green) 93.32%);
	color: var(--sof-black);
}

.fp-home-reasons__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.fp-sof .fp-home-reasons__head .fp-sof-eyebrow::before {
	width: 8px;
	height: 8px;
}

.fp-sof .fp-home-reasons__head .fp-home-h2 {
	margin-top: 20px !important; /* eyebrow → headline like all modules (visible 25 px, mobile 24 px) */
	color: var(--sof-black);
}

.fp-sof ul.fp-home-reasons__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	max-width: 1134px;
	margin: 48px auto 0 !important;
}

.fp-home-reason {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-height: 390px;
	margin: 0 !important;
	padding: 32px 30px !important;
	border: 1px solid #2d2d2d;
	border-radius: 20px;
	background: var(--sof-black);
}

.fp-home-reason__icon {
	display: block;
	width: 80px;
	height: 80px;
	object-fit: contain;
	object-position: left center;
}

.fp-home-reason__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.fp-sof .fp-home-reason__title {
	font-size: 24px !important;
	line-height: 1.5 !important;
	color: #fff !important;
}

.fp-sof .fp-home-reason__text {
	font-size: 18px !important;
	line-height: 1.5 !important;
	color: var(--home-muted);
}

/* Facts */

.fp-home-facts {
	padding: 80px 0;
}

.fp-sof .fp-home-facts__title {
	margin-top: 13px !important; /* visible gap eyebrow → headline like "Kacheln mit Kontakt-Box" (25 px; line height 1.5 adds 12) */
	font-size: 48px !important;
	line-height: 1.5 !important;
}

.fp-sof .fp-home-facts__text {
	max-width: 728px;
	font-size: 18px !important;
	line-height: 1.4 !important;
	color: var(--home-light);
}

.fp-sof ul.fp-home-facts__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px 40px;
	margin-top: 32px !important;
}

.fp-home-fact {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0 !important;
	padding: 20px 0 0 !important;
}

.fp-home-fact::before {
	content: '';
	width: 48px;
	height: 3px;
	background: var(--home-teal);
}

.fp-sof .fp-home-fact__value {
	color: #fff;
	font-size: 40px;
	line-height: 1.5;
	white-space: nowrap;
}

.fp-home-fact__label {
	max-width: 170px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--home-light);
}

/* Jobs: square image flush left, text on the right */

.fp-home-jobs {
	display: grid;
	grid-template-columns: minmax(0, 792fr) minmax(0, 720fr);
	align-items: center;
}

.fp-home-jobs__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	object-position: left center;
	border-radius: 5px;
}

.fp-home-jobs__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	max-width: 600px;
	padding: 60px;
}

.fp-sof .fp-home-jobs__body .fp-sof-eyebrow::before {
	width: 8px;
	height: 8px;
}

.fp-sof .fp-home-jobs__title {
	max-width: 520px;
	margin-top: 7px !important; /* + 16 px flex gap: eyebrow → headline like all modules (visible 25 px, mobile 24 px) */
	font-size: 40px !important;
	line-height: 1.1 !important;
}

.fp-sof .fp-home-jobs__text {
	max-width: 480px;
	min-height: 101px;
	font-size: 15px !important;
	line-height: 1.5 !important;
	color: var(--home-muted);
}

.fp-sof .fp-home-jobs .fp-home-button {
	min-width: 0;
	padding: 16px 28px;
}
/* Contact banner (on the light grey of the blog) */

.fp-home-contact {
	padding: 76px 40px; /* sides like .fp-sof-container, so the box is as wide as the other modules */
	background: var(--home-light);
}

.fp-home-contact__box {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	gap: 34px;
	max-width: 1120px; /* content width of the other modules (container 1200 − 2 × 40) */
	min-height: 299px;
	margin: 0 auto;
	padding: 40px 60px;
	border-radius: 30px;
	background:
		radial-gradient(ellipse 130% 150% at 100% 0%, var(--home-green) 0%, #63e1ae 12%, var(--home-teal) 32%, #1f7278 52%, #214a4d 64%, #222 80%);
}

.fp-sof .fp-home-contact__eyebrow {
	font-size: 16px !important;
	line-height: 1 !important;
	text-transform: uppercase !important;
	margin-bottom: -10px !important;
}

.fp-sof .fp-home-contact__text {
	max-width: 266px;
	font-size: 24px !important;
	line-height: 1.4 !important;
	letter-spacing: 0.5px !important;
}

.fp-home-contact .fp-home-button {
	padding: 25px 20px;
	font-size: 16px;
	line-height: 1;
	color: #09141e;
}

/* Tablet */

@media (max-width: 1100px) {
	.fp-sof .fp-home-hero__title {
		font-size: 48px !important;
	}

	.fp-home-hero::before {
		width: 760px;
		height: 760px;
	}

	.fp-sof ul.fp-home-reasons__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.fp-home-jobs__body {
		padding: 40px;
	}
}

/* Mobile */

@media (max-width: 900px) {
	.fp-sof .fp-home-h2 {
		font-size: 28px !important;
	}

	/* Hero: eyebrow and headline inside the circle, text below */
	.fp-home-hero {
		padding: 30px 0 60px;
	}

	.fp-home-hero::before {
		display: none;
	}

	.fp-home-hero__ring {
		justify-content: center;
		width: min(342px, 100%);
		aspect-ratio: 1;
		padding: 0 24px;
	}

	.fp-home-hero__ring::before {
		display: block;
		inset: 0;
	}

	.fp-sof .fp-home-hero__eyebrow {
		font-size: 12px !important;
		letter-spacing: 1px !important;
	}

	.fp-sof .fp-home-hero__title {
		margin-top: 16px !important;
		font-size: 32px !important;
		line-height: 1.15 !important;
	}

	.fp-sof .fp-home-hero__text {
		margin-top: 36px !important;
		font-size: 15px !important;
	}

	.fp-home-hero .fp-home-button {
		width: 220px;
		margin-top: 30px;
		padding: 16px 20px;
	}

	/* Reasons: full width, icon left of the text */
	.fp-home-reasons {
		padding: 0;
	}

	.fp-home-reasons__box {
		padding: 80px 16px;
		border-radius: 0;
	}

	.fp-home-reasons__head {
		align-items: flex-start;
		text-align: left;
	}

	.fp-sof ul.fp-home-reasons__grid {
		grid-template-columns: minmax(0, 1fr);
		margin-top: 36px !important;
	}

	.fp-home-reason {
		flex-direction: row;
		min-height: 0;
		padding: 24px 16px 28px 20px !important;
	}

	.fp-home-reason__icon {
		flex-shrink: 0;
		width: 52px;
		height: 52px;
		margin-right: 15px;
	}

	.fp-sof .fp-home-reason__title {
		font-size: 20px !important;
	}

	.fp-sof .fp-home-reason__text {
		font-size: 16px !important;
	}

	/* Facts: two columns */
	.fp-home-facts {
		padding: 40px 0;
	}

	.fp-sof .fp-home-facts__title {
		margin-top: 16px !important; /* visible 24 px like "Kacheln mit Kontakt-Box" on mobile */
		font-size: 30px !important;
	}

	.fp-sof ul.fp-home-facts__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px;
	}

	.fp-home-fact {
		gap: 12px;
	}

	.fp-sof .fp-home-fact__value {
		font-size: 28px;
	}

	/* Jobs: image on top */
	.fp-home-jobs {
		grid-template-columns: minmax(0, 1fr);
		padding: 0 16px 80px;
	}

	.fp-home-jobs__body {
		padding: 40px 0 0;
	}

	.fp-sof .fp-home-jobs__title {
		font-size: 30px !important;
	}

	.fp-sof .fp-home-jobs__text {
		min-height: 0;
		margin-bottom: 14px !important;
	}

	.fp-sof .fp-home-jobs .fp-home-button {
		width: 220px;
	}
	/* Contact banner: tall box, content at the bottom */
	.fp-home-contact {
		padding: 40px 16px 60px; /* sides like .fp-sof-container on mobile */
	}

	.fp-home-contact__box {
		min-height: 499px;
		padding: 40px 20px 100px;
		background:
			radial-gradient(ellipse 160% 120% at 100% 0%, var(--home-green) 0%, #63e1ae 14%, var(--home-teal) 34%, #1f7278 56%, #214a4d 68%, #222 85%);
	}

	.fp-home-contact .fp-home-button {
		width: 220px;
		padding: 20px;
	}
}

/* Sections from School of Flex (cards, blog) and shared text styles in the final home page design */

/* Content width of the design: 1120px (inside the sections) */
.fp-sof :is(.fp-home-hero, .fp-sof-hero, .fp-sof-az, .fp-sof-resources, .fp-home-facts, .fp-sof-blog) .fp-sof-container {
	max-width: 1200px;
}

.fp-sof .fp-sof-h2 {
	margin-top: 20px !important;
	font-size: 40px !important;
	line-height: 1.25 !important;
}

/* Cards: start right after the hero circle */
.fp-sof .fp-home-hero + .fp-sof-resources {
	padding-top: 0;
}

/* Contact box with the same inner spacing as the cards */
.fp-sof .fp-sof-card,
.fp-sof .fp-sof-cta {
	padding: 40px 25px;
}

.fp-sof .fp-sof-card__text {
	max-width: none;
}

/* Blog on light grey with grey text; flows into a following contact banner without a gap */
.fp-sof .fp-sof-blog {
	padding: 130px 0 120px;
	background: var(--home-light);
	color: var(--home-grey);
}

.fp-sof .fp-sof-blog:has(+ .fp-home-contact) {
	padding-bottom: 0;
}

.fp-sof .fp-sof-blog .fp-sof-eyebrow::before {
	background: var(--home-grey);
}

.fp-sof .fp-sof-blog__title {
	margin-top: 20px !important;
	color: var(--home-grey) !important;
}

.fp-sof .fp-sof-blog__lead {
	margin-top: 20px !important;
}

.fp-sof .fp-sof-post__title {
	color: var(--home-grey);
}

.fp-sof .fp-sof-blog__more {
	margin-top: 60px;
	font-size: 20px;
	color: var(--home-grey);
}

@media (max-width: 900px) {
	.fp-sof .fp-sof-h2 {
		font-size: 28px !important;
	}

	.fp-sof .fp-sof-card,
	.fp-sof .fp-sof-cta {
		padding: 30px 20px;
	}

	.fp-sof .fp-sof-blog {
		padding-top: 48px;
		padding-bottom: 80px;
	}

	.fp-sof .fp-sof-blog:has(+ .fp-home-contact) {
		padding-bottom: 0;
	}

	.fp-sof .fp-sof-blog__more {
		margin-top: 40px;
	}
}

/* Dark → light transition (sections.js, only for "dark part, then light part up to the end"):
   the page background changes, light sections take it over, texts change colour with it */

.fp-sof.has-tone-fade {
	transition: background-color 0.8s ease;
}

.fp-sof.has-tone-fade.is-light {
	background-color: var(--home-light);
}

.fp-sof.has-tone-fade > [data-tone="light"] {
	background: transparent;
}

.fp-sof.has-tone-fade :is(.fp-sof-blog__title, .fp-sof-blog__lead, .fp-sof-blog .fp-sof-eyebrow, .fp-sof-post__title, .fp-sof-blog__more,
	.fp-home-jobs__title, .fp-home-jobs__text, .fp-home-jobs .fp-sof-eyebrow, .fp-sof-resources__head .fp-sof-eyebrow, .fp-sof-resources__head .fp-sof-h2,
	.fp-home-facts .fp-sof-eyebrow, .fp-home-facts__title, .fp-home-facts__text, .fp-home-fact__value, .fp-home-fact__label,
	.fp-sof-hero__eyebrow, .fp-sof-hero__title, .fp-sof-hero__lead) {
	transition: color 0.8s ease;
}

/* light sections while the page is still dark */
.fp-sof.has-tone-fade:not(.is-light) .fp-sof-blog__title,
.fp-sof.has-tone-fade:not(.is-light) .fp-sof-post__title {
	color: #fff !important;
}

.fp-sof.has-tone-fade:not(.is-light) .fp-sof-blog__lead,
.fp-sof.has-tone-fade:not(.is-light) .fp-sof-blog .fp-sof-eyebrow,
.fp-sof.has-tone-fade:not(.is-light) .fp-sof-blog__more {
	color: #fff;
}

.fp-sof.has-tone-fade:not(.is-light) .fp-sof-blog .fp-sof-eyebrow::before,
.fp-sof.has-tone-fade:not(.is-light) .fp-sof-post a::before {
	background: #fff;
}

/* dark sections once the page is light (texts on the page background; cards and boxes keep their own colours) */
.fp-sof.has-tone-fade.is-light :is(.fp-home-jobs__title, .fp-home-jobs .fp-sof-eyebrow, .fp-sof-resources__head .fp-sof-eyebrow, .fp-sof-resources__head .fp-sof-h2,
	.fp-home-facts .fp-sof-eyebrow, .fp-home-facts__title, .fp-home-facts__text, .fp-home-fact__value, .fp-home-fact__label,
	.fp-sof-hero__eyebrow, .fp-sof-hero__title, .fp-sof-hero__lead) {
	color: var(--home-grey) !important;
}

.fp-sof.has-tone-fade.is-light :is(.fp-home-jobs, .fp-sof-resources__head, .fp-home-facts) .fp-sof-eyebrow::before {
	background: var(--home-grey);
}

/* Hero intro animation (hero-intro.js, client key visual in WebGL): the canvas draws stars and the circle,
   the CSS circle is hidden; the text fades in at the end. Classes are set by the inline script in layouts/hero.php. */

.fp-home-hero__intro {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%; /* hero-intro.js makes it taller: it reaches behind the next section */
	pointer-events: none;
}

/* the glow may continue behind the next section: hero does not clip, the next section lies above the canvas */
.fp-home-hero.has-intro {
	overflow: visible;
}

.fp-home-hero.has-intro + * {
	position: relative;
	z-index: 1;
}

.fp-home-hero.has-intro .fp-home-hero__inner {
	z-index: 1;
}

.fp-home-hero.has-intro::before,
.fp-home-hero.has-intro .fp-home-hero__ring::before {
	opacity: 0;
}

.fp-home-hero.has-intro .fp-home-hero__eyebrow,
.fp-home-hero.has-intro .fp-home-hero__title,
.fp-home-hero.has-intro .fp-home-hero__text,
.fp-home-hero.has-intro .fp-home-button {
	transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.fp-home-hero.has-intro .fp-home-hero__title {
	transition-delay: 0.12s;
}

.fp-home-hero.has-intro .fp-home-hero__text {
	transition-delay: 0.24s;
}

.fp-home-hero.has-intro .fp-home-button {
	transition-delay: 0.36s;
}

.fp-home-hero.is-intro .fp-home-hero__eyebrow,
.fp-home-hero.is-intro .fp-home-hero__title,
.fp-home-hero.is-intro .fp-home-hero__text,
.fp-home-hero.is-intro .fp-home-button {
	opacity: 0;
	transform: translateY(16px);
}

/* ---------- Spacing between modules (backend fields "Abstand davor" / "Abstand danach" of every section) ----------
   Values come as --fp-before / --fp-after on the <section> (sections.php): Keiner 0, Kleiner 20, Standard 40,
   Größer 60 px. Between two sections: "danach" of the upper + "davor" of the lower one, by default 40 + 40 = 80 px
   (desktop and mobile). The sections are a flex column, so the two margins add up instead of collapsing.
   Modules on the page background have no outer padding of their own; modules with their own background (Blog,
   Kontakt-Banner, green box, image of "Bild mit Text", Hero mit Bild) are measured to their edge.
   Special cases, by default the design stays as it is:
   - above the first section: "davor" − 40 px (Standard: flush with the header, Größer: 20 px)
   - below "Hero mit Kreis": its own space stays (the circle needs it), the fields add/remove relative to Standard
   - two light modules in a row form one light area: the space is inner padding instead of a dark gap
   - below the last section: dark module "danach" × 2 to the footer (Standard 80 px), light module "danach" − 40 px */
.fp-sof.fp-sections {
	display: flex;
	flex-direction: column;
}

.fp-sof.fp-sections > section {
	margin-top: var(--fp-before, 40px);
	margin-bottom: var(--fp-after, 40px);
}

.fp-sof.fp-sections > section:is(.fp-sof-resources, .fp-home-reasons, .fp-home-facts, .fp-home-jobs, .fp-sof-az) {
	padding-top: 0;
	padding-bottom: 0;
}

.fp-sof.fp-sections > section:first-of-type {
	margin-top: max(0px, calc(var(--fp-before, 40px) - 40px));
}

.fp-sof.fp-sections > .fp-home-hero:has(+ section) {
	margin-bottom: calc(var(--fp-after, 40px) - 40px);
}

.fp-sof.fp-sections > .fp-home-hero + section {
	margin-top: calc(var(--fp-before, 40px) - 40px);
}

.fp-sof.fp-sections > [data-tone="light"]:has(+ [data-tone="light"]) {
	margin-bottom: 0;
	padding-bottom: var(--fp-after, 40px);
}

.fp-sof.fp-sections > [data-tone="light"] + [data-tone="light"] {
	margin-top: 0;
	padding-top: var(--fp-before, 40px);
}

.fp-sof.fp-sections > section:last-of-type {
	margin-bottom: calc(var(--fp-after, 40px) * 2);
}

.fp-sof.fp-sections > section[data-tone="light"]:last-of-type {
	margin-bottom: max(0px, calc(var(--fp-after, 40px) - 40px));
}

/* With the dark → light transition (sections.js) the whole page turns light and light modules have no area of
   their own: their inner padding top/bottom would add to the gap (Bild mit Text → Blog was 80 + 130 px).
   Then they are spaced like all other modules, only by the fields. Without the transition (reduce motion, no JS)
   they keep their light area with inner padding (rules above). */
.fp-sof.fp-sections.has-tone-fade > section[data-tone="light"] {
	padding-top: 0;
	padding-bottom: 0;
}

.fp-sof.fp-sections.has-tone-fade > [data-tone="light"] + [data-tone="light"] {
	margin-top: var(--fp-before, 40px);
	padding-top: 0;
}

.fp-sof.fp-sections.has-tone-fade > [data-tone="light"]:has(+ [data-tone="light"]) {
	margin-bottom: var(--fp-after, 40px);
	padding-bottom: 0;
}

.fp-sof.fp-sections.has-tone-fade > section[data-tone="light"]:last-of-type {
	margin-bottom: calc(var(--fp-after, 40px) * 2);
}

/* no trailing space inside modules, so the 80 px are really 80 px */
.fp-sof ul.fp-home-facts__grid {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

@media (max-width: 900px) {
	/* mobile: image on top, text below; the module ends with the text */
	.fp-sof.fp-sections > .fp-sof-hero .fp-sof-hero__text {
		padding-bottom: 0;
	}
}

/* Heading levels can be changed in the backend (h1–h6): h4–h6 get the same reset as h1–h3 in school-of-flex.css,
   so the look depends on the class only (Thrive would make them bold/dark). Blog also on the entries. */
.fp-sof.fp-sections :is(h4, h5, h6),
.fp-sof .fp-sof-blog :is(h4, h5, h6) {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-weight: 400;
	color: inherit;
	letter-spacing: normal;
	text-transform: none;
}

/* "P (fett, keine Überschrift)": <p><strong> looks exactly like the heading */
.fp-sof strong.fp-heading-strong {
	font-weight: inherit;
}

/* Fade in while scrolling (sections.js, switch per page in "Seiten-Einstellungen") */
.fp-sections.has-reveal .fp-reveal {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity 0.7s ease var(--fp-reveal-delay, 0ms), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--fp-reveal-delay, 0ms);
}

.fp-sections.has-reveal .fp-reveal.is-in {
	opacity: 1;
	transform: none;
}