/*
Theme Name: CESMA
Theme URI: https://cesma-plongee.fr
Description: Thème enfant du thème Responsive (CyberChimps), personnalisé pour le CESMA Plongée.
Author: CESMA Plongée
Template: responsive
Version: 1.6.3
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cesma
*/

/*
 * Contenu ci-dessous : reprise intégrale du champ "CSS additionnel"
 * (Personnaliser > CSS additionnel) tel qu'il était sur le site DEV
 * au 2026-07-21, incluant toutes les modifications de mise en page
 * apportées depuis le 2026-07-20 (couleurs de marque, boutons,
 * espacements, checklist, arrière-plan sous-marin, etc.).
 *
 * Seule différence volontaire : --responsive-global-palette7 est
 * repassé à #10659C (bleu clair) au lieu de #E8603C (orange), pour
 * que le survol des boutons soit bleu clair comme demandé.
 *
 * Une fois ce thème activé et vérifié sur le site, penser à vider
 * le champ "CSS additionnel" du Customizer pour éviter d'avoir deux
 * sources de vérité qui divergent avec le temps.
 */

:root {
	--responsive-global-palette0: #C9502F;
	--responsive-global-palette1: #17808B;
	--responsive-global-palette2: #1F2D33;
	--responsive-global-palette3: #0B3556;
	--responsive-global-palette4: #FFFFFF;
	--responsive-global-palette5: #D6EAF5;
	--responsive-global-palette6: #D9EAEA;
	--responsive-global-palette7: #10659C;
}
/* Empêche tout débordement horizontal accidentel (ex. mobile Firefox
   qui laisse glisser la page vers la gauche et révèle la couleur de
   fond du body, --responsive-global-palette5, en bande sur la
   droite). Correctif générique au niveau racine, sans overflow sur
   les conteneurs intermédiaires pour ne pas casser les sous-menus. */
html, body {
	max-width: 100%;
	overflow-x: hidden;
}
a { color: #17808B; }
.responsive-site-primary-header-wrap,
.responsive-site-primary-header-wrap:hover,
.responsive-site-primary-mobile-header-wrap,
.responsive-site-primary-mobile-header-wrap:hover,
.responsive-site-above-header-wrap,
.responsive-site-below-header-wrap,
.responsive-site-above-mobile-header-wrap,
.responsive-site-below-mobile-header-wrap {
	border-bottom-color: #17808B;
}
.mobile-header-widgets .mobile-header-widgets-wrapper a { color: #17808B; }
.mobile-header-widgets .mobile-header-widgets-wrapper a:focus,
.mobile-header-widgets .mobile-header-widgets-wrapper a:hover { color: #0B3556; }
.site-content-header .page-header .page-title,
.site-content-header .page-title,
.page .post-title, #main-blog h1,
.responsive-related-single-posts-title {
	color: #0B3556;
}
.site-content-header .page-header .page-description,
.site-content-header .page-description,
.site-content-header .breadcrumb-list,
.site-content-header .breadcrumb-list a {
	color: #1F2D33;
}
.rspv-site-above-footer-wrap,
.rspv-site-primary-footer-wrap,
.site-footer {
	background-color: #F6F1E7;
	background-image: linear-gradient(rgba(246, 241, 231, 0.75), rgba(246, 241, 231, 0.75)), url(images/cesma-footer-sand-texture.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #1F2D33;
}
/* Le thème parent pose un fond blanc opaque sur ce conteneur imbriqué
   (.rspv-site-below-footer-wrap), qui masquait sinon le fond posé sur
   .site-footer (même leçon que le header : un conteneur imbriqué peut
   cacher le fond d'un parent). C'est l'élément réellement visible
   sur ce site (seule la ligne "en dessous" du footer builder est
   configurée), donc on le rend transparent pour laisser voir la
   texture posée sur .site-footer. */
.site-footer .rspv-site-below-footer-wrap {
	background-color: transparent !important;
}
.site-footer h1, .site-footer h2, .site-footer h3,
.site-footer h4, .site-footer h5, .site-footer h6 {
	color: #0B3556;
}
.site-footer a:focus, .site-footer a:hover,
.footer-layouts.copyright a,
.footer-layouts.copyright a:hover {
	color: #17808B;
}
.rspv-site-below-footer-wrap { border-top-color: #17808B; }
.container { max-width: 1320px !important; }


h1, h2, h3, h4, h5, h6,
.site-title, .page-title, .entry-title,
.site-content-header .page-header .page-title,
.site-content-header .page-title,
.page .post-title, #main-blog h1,
.responsive-related-single-posts-title {
	font-family: 'Poppins', Arial, sans-serif;
	font-weight: 600;
}
body, button, input, select, textarea, p {
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}


#main-header-mobile .custom-logo {
	width: auto;
	height: 48px;
}
#main-header-mobile .menu-toggle svg {
	width: 32px;
	height: 32px;
}
#main-header-mobile .menu-toggle {
	padding: 10px;
}


/* Menu principal desktop : espacement plus aere entre les items */
.main-navigation .menu > li {
	margin-left: 14px;
}
.site-header-layout-horizontal.site-header-main-navigation-site-branding .main-navigation .menu > li,
.site-header-layout-vertical .main-navigation .menu > li {
	margin-right: 14px;
	margin-left: 0;
}

/* Respiration avant/apres le pied de page */
.rspv-site-above-footer-wrap,
.rspv-site-primary-footer-wrap {
	padding-top: 10px;
	padding-bottom: 10px;
}

/* Mobile : reduire les marges empilees pour exploiter toute la largeur */
@media screen and (max-width: 768px) {
	.responsive-site-style-boxed .hentry,
	.responsive-site-style-content-boxed .hentry {
		padding: 12px;
	}
	.content-area {
		padding-left: 0;
		padding-right: 0;
	}
}


/* Logo desktop encore plus compact */
.site-header .custom-logo {
	width: 52px;
}

/* Bouton Connexion dans le menu principal */
.cesma-login-button {
	display: inline-block;
	background-color: #0B3556 !important;
	color: #FFFFFF !important;
	padding: 8px 20px;
	margin-left: 10px;
	font-weight: 600;
}
.cesma-login-button:hover {
	background-color: #17808B !important;
	color: #FFFFFF !important;
}

/* Ombres inspirees de 99designs.fr : donner du relief aux blocs de contenu */
.hentry {
	background-color: #FFFFFF;
	box-shadow: 0 0 2px rgba(0,0,0,.12), 0 2px 2px rgba(0,0,0,.2);
}
.wp-block-gallery figure.wp-block-image img {
	box-shadow: 0 0 2px rgba(0,0,0,.12), 0 2px 2px rgba(0,0,0,.2);
}
.wpcf7 {
	background-color: #FFFFFF;
	padding: 20px;
	box-shadow: 0 0 2px rgba(0,0,0,.12), 0 2px 2px rgba(0,0,0,.2);
}


/* Logo + texte CESMA cote a cote au lieu d'empile */
#main-header-mobile .site-branding-wrapper {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 10px;
	padding-bottom: 10px;
}
#main-header-mobile .site-title-tagline {
	margin: 0;
}
#main-header-mobile .site-title {
	margin: 0;
	font-family: 'Poppins', Arial, sans-serif;
	font-size: 20px;
}

/* Marges reduites autour du bloc de contenu central */
.site-content {
	padding: 10px 0;
}
.site-content-header {
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 15px;
}
@media screen and (min-width: 769px) {
	.responsive-site-style-boxed .hentry,
	.responsive-site-style-content-boxed .hentry {
		padding: 18px;
	}
}


/* Texte du footer : taille fluide (s'adapte à la largeur de l'écran)
   plutôt qu'une valeur fixe par palier, pour rester lisible en PC
   (trop petit avant) tout en restant sur une seule ligne partout. */
.footer_copyright p {
	white-space: nowrap;
	margin: 0;
	font-size: clamp(11px, 1.6vw, 16px);
}
@media screen and (max-width: 768px) {
	.rspv-site-below-footer-wrap {
		padding: 8px 0;
	}
	.rspv-site-below-footer-inner-wrap {
		gap: 8px;
		min-height: 0;
	}
	.footer-layouts.copyright {
		line-height: 1.4;
	}
}


@media screen and (max-width: 768px) {
	.container {
		padding-left: 0;
		padding-right: 0;
	}
}


.cesma-login-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: #0B3556;
	margin-right: 6px;
}


.cesma-adhesion-hero {
	margin-bottom: 20px;
}
.cesma-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.cesma-steps__item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}
.cesma-steps__number {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: #0B3556;
	color: #FFFFFF;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cesma-steps__text {
	flex: 1 1 auto;
	padding-top: 4px;
}
.cesma-button-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background-color: #C9502F;
	color: #FFFFFF !important;
	padding: 8px 24px 8px 12px;
	margin-top: 10px;
	font-weight: 600;
	text-decoration: none !important;
}
.cesma-button-cta__logo {
	height: 28px;
	width: auto;
	display: block;
}
.cesma-button-cta:hover {
	background-color: #E8603C !important;
	color: #FFFFFF !important;
}
.cesma-two-col {
	display: flex;
	gap: 30px;
	margin: 20px 0;
	align-items: flex-start;
}
.cesma-two-col__left,
.cesma-two-col__right {
	flex: 1 1 0;
}
.cesma-two-col h3 {
	margin-top: 0;
	font-size: 22px;
	font-family: 'Poppins', Arial, sans-serif;
	color: #0B3556;
}
.cesma-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cesma-checklist li {
	position: relative;
	padding-left: 28px;
	margin-bottom: 12px;
}
.cesma-checklist li:before {
	content: '\2713';
	position: absolute;
	left: 0;
	top: 0;
	color: #17808B;
	font-weight: 700;
}
.cesma-alert {
	background-color: #FBEAE4;
	border-left: 4px solid #C9502F;
	padding: 15px 20px;
}
.cesma-alert__title {
	font-weight: 700;
	color: #0B3556;
	margin-top: 0;
	margin-bottom: 8px;
	font-size: 19px;
	font-family: 'Poppins', Arial, sans-serif;
}
@media screen and (max-width: 768px) {
	.cesma-two-col {
		flex-direction: column;
		gap: 20px;
	}
}


.entry-content ul:not(.cesma-checklist):not(.cesma-steps):not(.wp-block-latest-posts):not(.social-icons) {
	list-style: none;
	padding-left: 0;
}
.entry-content ul:not(.cesma-checklist):not(.cesma-steps):not(.wp-block-latest-posts):not(.social-icons) li {
	position: relative;
	padding-left: 28px;
}
.entry-content ul:not(.cesma-checklist):not(.cesma-steps):not(.wp-block-latest-posts):not(.social-icons) li:before {
	content: '\2713';
	position: absolute;
	left: 0;
	top: 0;
	color: #17808B;
	font-weight: 700;
}
.entry-content p[style*="f00101"] {
	background-color: #FBEAE4 !important;
	border-left: 4px solid #C9502F;
	padding: 15px 20px !important;
	color: #0B3556 !important;
	font-size: 17px;
}
.entry-content p[style*="f00101"] a {
	color: #0B3556 !important;
}
.entry-content p[style*="f00101"] strong {
	font-size: 18px;
}
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
	font-family: 'Poppins', Arial, sans-serif;
	color: #0B3556;
}
.entry-content h2 { font-size: 26px; }
.entry-content h3 { font-size: 22px; }
.entry-content h4 { font-size: 19px; }
.entry-content h5,
.entry-content h6 { font-size: 17px; }


:root { --uw-ratioW: 1; }
#cesma-underwater-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: -1;
	overflow: hidden;
	background-image: linear-gradient(to bottom, oklch(40% 0.16 235), oklch(28% 0.14 210));
}
#cesma-uw-surface {
	mix-blend-mode: overlay;
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
}
#cesma-uw-surface:before,
#cesma-uw-surface:after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-image: url(images/cesma-underwater-surface-texture.png);
	background-repeat: repeat-x;
	--duration: 6s;
	--lowHeight: 20vh;
	--highHeight: 40vh;
	--layerNum: 2;
	--index: 0;
	--opacity: 0.35;
	animation: cesma-uw-surface var(--duration) linear infinite;
	animation-delay: calc((var(--duration) / var(--layerNum)) * var(--index) * -1);
	opacity: 0;
}
#cesma-uw-surface:before { --index: 0; transform: scale3d(1, -1, 1); }
#cesma-uw-surface:after { --index: 1; transform: scale3d(-1, -1, 1); }
#cesma-uw-caustics {
	position: absolute;
	bottom: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	transform-origin: bottom center;
	transform: scale3d(2, 1, 1);
}
#cesma-uw-caustics:before,
#cesma-uw-caustics:after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-image: url(images/cesma-underwater-caustics-texture.png);
	background-repeat: repeat;
	--duration: 10s;
	--height: 30vh;
	--gapY: 0px;
	background-size: calc(100vw / var(--uw-ratioW)) 40vh;
	animation: cesma-uw-caustics calc(var(--duration) * var(--uw-ratioW)) linear infinite;
	opacity: 0.25;
	mask-image: linear-gradient(to top, white, transparent var(--height), transparent);
}
#cesma-uw-caustics:after {
	--duration: 11s;
	--gapY: 10vh;
	animation-delay: -2s;
	transform: scale3d(-1, 1, 1);
}
#cesma-uw-sun {
	mix-blend-mode: overlay;
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
}
#cesma-uw-sun > div {
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform-origin: 50vw 0;
	animation: cesma-uw-sun 7s ease infinite alternate;
	mask-image: linear-gradient(to bottom, transparent 15%, white 50%, white 55%, transparent 80%);
}
.cesma-uw-sun-layer1 {
	background: linear-gradient(to right, transparent 39%, white 40%, transparent 41%, transparent 48.5%, white 50%, transparent 51.5%, transparent 53%, white 54%, transparent 55%, transparent 70%, white 71%, transparent 72%);
}
.cesma-uw-sun-layer2 {
	animation-delay: -2s;
	animation-duration: 7.8s;
	animation-direction: alternate-reverse;
	background: linear-gradient(to right, transparent 32%, white 33%, transparent 34%, transparent 38%, white 39%, transparent 40%, transparent 53%, white 54%, transparent 55%, transparent 63.5%, white 65%, transparent 66.5%);
}
.cesma-uw-sun-layer3 {
	animation-delay: -5s;
	animation-duration: 8.5s;
	background: linear-gradient(to right, transparent 38.5%, white 40%, transparent 41.5%, transparent 47%, white 48%, transparent 49%, transparent 52%, white 53%, transparent 54%, transparent 60%, white 61%, transparent 62%);
}
@keyframes cesma-uw-surface {
	0% { opacity: 0; background-position: center bottom; background-size: calc(3 * var(--highHeight)) var(--highHeight); }
	20% { opacity: var(--opacity); }
	100% { opacity: 0; background-position: center bottom calc(-1 * var(--lowHeight)); background-size: calc(1 * var(--lowHeight)) var(--lowHeight); }
}
@keyframes cesma-uw-caustics {
	0% { background-position: bottom var(--gapY) left; }
	100% { background-position: bottom var(--gapY) left -100vw; }
}
@keyframes cesma-uw-sun {
	0% { opacity: 0.1; transform: skew(5deg) scale3d(3, 1.5, 1); }
	50% { opacity: 0.08; transform: skew(0deg) scale3d(1.5, 1, 1); }
	100% { opacity: 0.1; transform: skew(-5deg) scale3d(3, 1, 1); }
}
@media (min-aspect-ratio: 1/1) { :root { --uw-ratioW: 2; } }
@media (min-aspect-ratio: 2/1) { :root { --uw-ratioW: 3; } }
@media (min-aspect-ratio: 3/1) { :root { --uw-ratioW: 4; } }


#main-header .site-branding-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}


.entry-content p > img[style*="width: 80px"] {
	display: inline-block;
	vertical-align: middle;
	margin-right: 12px;
}
.entry-content p > img[style*="width: 80px"] + strong {
	vertical-align: middle;
}
.entry-content p > img[style*="width: 80px"] + strong,
.entry-content p > img[style*="width: 80px"] + strong a {
	font-size: 24px;
}


/* ==========================================================================
   Fond bulles — header desktop (étape 1, chantier bulles/poissons).
   Calque décoratif à part (z-index négatif), aucune couleur du
   contenu existant n'est modifiée. Markup injecté par functions.php
   (hook wp_footer, dernier enfant de #masthead).
   ========================================================================== */

#masthead {
	position: relative;
	z-index: 0;
	background: transparent !important;
}
/* Les conteneurs imbriqués du header (thème parent) ont chacun leur
   propre fond, qui masquait sinon le dégradé posé sur #masthead. */
#masthead #main-header,
#masthead .site-header-inner-wrap,
#masthead .site-header-upper-wrap,
#masthead .site-header-upper-inner-wrap,
#masthead .responsive-site-primary-header-wrap,
#masthead .site-header-row-container-inner,
#masthead .container {
	background: transparent !important;
}
#masthead .site-title,
#masthead .site-title a,
#masthead .site-description,
#masthead .main-navigation .menu > li > a,
#masthead .main-navigation .menu > li > a:visited {
	color: #FFFFFF !important;
}
#masthead .main-navigation .menu > li > a:hover,
#masthead .main-navigation .menu > li > a:focus {
	color: #D6EAF5 !important;
}
/* Le thème pose un carré blanc derrière l'item de menu actif/survolé
   (background-color:#ffffff) — hors sujet sur notre fond bleu.
   On le retire et on indique la sélection par la taille du texte. */
#masthead .main-navigation .menu > li > a:hover,
#masthead .main-navigation .menu > li > a:focus,
#masthead .main-navigation .menu > li.current_page_item > a,
#masthead .main-navigation .menu > li.current-menu-item > a {
	background-color: transparent !important;
}
#masthead .main-navigation .menu > li.current_page_item > a,
#masthead .main-navigation .menu > li.current-menu-item > a {
	color: #FFFFFF !important;
	font-size: 1.2em !important;
	font-weight: 700 !important;
}
.cesma-header-bubbles,
.cesma-menu-bubbles {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: -1;
}

/* ==========================================================================
   Fond bulles — panneau de menu mobile (burger), <= 768px uniquement.
   Même logique que le header : le fond du panneau lui-même ET les
   lignes de menu individuelles ont chacun leur propre fond blanc posé
   par le thème (leçon du header : un conteneur imbriqué peut cacher
   le fond d'un parent) — on neutralise les deux.
   ========================================================================== */
#responsive-off-canvas-panel {
	background-color: transparent !important;
	background-image: linear-gradient(to bottom, oklch(40% 0.16 235), oklch(28% 0.14 210)) !important;
}
#responsive-off-canvas-panel .responsive-off-canvas-panel-inner {
	position: relative;
	z-index: 0;
	background: transparent !important;
}
/* Comme pour le header (leçon v1.4.1) : les conteneurs imbriqués
   entre .responsive-off-canvas-panel-inner et les <li>/<a> du menu
   peuvent avoir leur propre fond opaque qui masque le calque de
   bulles posé en dernier enfant de .responsive-off-canvas-panel-inner. */
#responsive-off-canvas-panel .off-canvas-widget-area,
#off-canvas-site-navigation,
#off-canvas-menu {
	background: transparent !important;
}
#off-canvas-site-navigation .menu li,
#off-canvas-site-navigation .menu li a,
.off-canvas-widget-area #off-canvas-menu li,
.off-canvas-widget-area #off-canvas-menu li a {
	background-color: transparent !important;
	color: #FFFFFF !important;
}
#off-canvas-site-navigation .menu li a:hover,
.off-canvas-widget-area #off-canvas-menu li a:hover {
	background-color: transparent !important;
	color: #D6EAF5 !important;
}
#off-canvas-site-navigation .menu li.current-menu-item > a,
#off-canvas-site-navigation .menu li.current_page_item > a,
.off-canvas-widget-area #off-canvas-menu li.current-menu-item > a,
.off-canvas-widget-area #off-canvas-menu li.current_page_item > a {
	background-color: transparent !important;
	color: #FFFFFF !important;
	font-size: 1.15em !important;
	font-weight: 700 !important;
}
@media screen and (min-width: 769px) {
	.cesma-menu-bubbles { display: none; }
	#responsive-off-canvas-panel {
		background-color: initial !important;
		background-image: none !important;
	}
	#responsive-off-canvas-panel .responsive-off-canvas-panel-inner {
		background: initial !important;
	}
	#responsive-off-canvas-panel .off-canvas-widget-area,
	#off-canvas-site-navigation,
	#off-canvas-menu {
		background: initial !important;
	}
	#off-canvas-site-navigation .menu li,
	#off-canvas-site-navigation .menu li a,
	.off-canvas-widget-area #off-canvas-menu li,
	.off-canvas-widget-area #off-canvas-menu li a,
	#off-canvas-site-navigation .menu li.current-menu-item > a,
	#off-canvas-site-navigation .menu li.current_page_item > a,
	.off-canvas-widget-area #off-canvas-menu li.current-menu-item > a,
	.off-canvas-widget-area #off-canvas-menu li.current_page_item > a {
		background-color: initial !important;
		color: initial !important;
		font-size: initial !important;
		font-weight: initial !important;
	}
}

@media screen and (max-width: 768px) {
	.cesma-header-bubbles { display: none; }
	#masthead {
		background-color: initial !important;
		background-image: none !important;
	}
	#masthead #main-header,
	#masthead .site-header-inner-wrap,
	#masthead .site-header-upper-wrap,
	#masthead .site-header-upper-inner-wrap,
	#masthead .responsive-site-primary-header-wrap,
	#masthead .site-header-row-container-inner,
	#masthead .container {
		background: initial !important;
	}
	#masthead .site-title,
	#masthead .site-title a,
	#masthead .site-description,
	#masthead .main-navigation .menu > li > a,
	#masthead .main-navigation .menu > li > a:visited {
		color: initial !important;
	}
	#masthead .main-navigation .menu > li > a:hover,
	#masthead .main-navigation .menu > li > a:focus,
	#masthead .main-navigation .menu > li.current_page_item > a,
	#masthead .main-navigation .menu > li.current-menu-item > a {
		background-color: initial !important;
		color: initial !important;
		font-size: initial !important;
		font-weight: initial !important;
	}
}
.cesma-header-bubble {
	position: absolute;
	bottom: -10%;
	width: var(--size, 6px);
	height: var(--size, 6px);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.75);
	box-shadow: 0 0 6px 2px inset rgba(255, 255, 255, 0.55);
	animation-name: cesma-header-bubble-rise;
	animation-timing-function: ease-in;
	animation-iteration-count: infinite;
}
@keyframes cesma-header-bubble-rise {
	0% {
		transform: translateY(0) scale(1);
		opacity: 0;
	}
	15% {
		opacity: 0.8;
	}
	80% {
		opacity: 0.5;
	}
	100% {
		transform: translateY(calc(-1 * var(--rise, 140px))) scale(var(--grow, 2.6));
		opacity: 0;
	}
}