/* Rework of https://antigravity.google/ using modern CSS */
/* See https://brm.us/antigravity for details */
@layer reset, tokens, base, components, layout, moderncss, util;

@layer moderncss {

	@layer misc {

		/* To make the bouncy scroll effect work when the page is shown in an iframe and when the user is already at the edges and nudging the scroller */
		:root {
			overscroll-behavior-y: contain;
		}
	}

	@layer layout {

		/* Draw a particles ring in the background of the welcome screen */
		/* I am using Houdini PaintWorklets for this */
		@layer ring-particles {
			@supports (background: paint(something)) {
				@layer particles {
					#welcome {
						--ring-radius: 100;
						--ring-thickness: 600;
						--particle-count: 80;
						--particle-rows: 25;
						--particle-size: 2;
						--particle-color: navy;

						--particle-min-alpha: 0.1;
						--particle-max-alpha: 1.0;

						--seed: 200;

						background-image: paint(ring-particles);
					}
				}

				@layer animation {
					@property --animation-tick {
						syntax: '<number>';
						inherits: false;
						initial-value: 0;
					}

					@property --ring-radius {
						syntax: '<number> | auto';
						inherits: false;
						initial-value: auto;
					}

					@keyframes ripple {
						0% {
							--animation-tick: 0;
						}

						100% {
							--animation-tick: 1;
						}
					}

					@keyframes ring {
						0% {
							--ring-radius: 150;
						}

						100% {
							--ring-radius: 250;
						}
					}

					#welcome {
						animation: ripple 6s linear infinite, ring 6s ease-in-out infinite alternate;
					}
				}

				@layer follow-mouse {
					@property --ring-x {
						syntax: '<number>';
						inherits: false;
						initial-value: 50;
					}

					@property --ring-y {
						syntax: '<number>';
						inherits: false;
						initial-value: 50;
					}

					@property --ring-interactive {
						syntax: '<number>';
						inherits: false;
						initial-value: 0;
					}

					#welcome {
						/* @NOTE: Requires JS until the CSSWG resolves on https://github.com/w3c/csswg-drafts/issues/6733 */
						transition: --ring-x 3s ease,
							--ring-y 3s ease;

						/* @NOTE: This still feels uncanny, so I’m disabling it for now. It could be solved by having something like an animation-speed available. */
						/* transition-duration: if(
							style(--ring-interactive: 1): 0.25s;
							else: 3s;
						); */

					}
				}
			}

			/* Fallback animation for browsers without PaintWorklet support (Firefox, etc.) */
			@supports not (background: paint(something)) {
				@layer fallback-particles {
					#welcome {
						position: relative;
						overflow: hidden;
						background: white;
						width: 100%;
						min-height: 100vh;
					}

					/* Floating particles with gradient */
					#welcome .particle {
						position: absolute;
						width: 6px;
						height: 6px;
						background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
						border-radius: 50%;
						pointer-events: none;
						animation: float-particle 10s ease-in-out infinite;
						opacity: 0.6;
					}

					/* 100 particles with random positions and delays */
					#welcome .particle:nth-child(1) {
						top: 3%;
						left: 7%;
						animation-delay: 0s;
					}

					#welcome .particle:nth-child(2) {
						top: 8%;
						left: 23%;
						animation-delay: 0.1s;
					}

					#welcome .particle:nth-child(3) {
						top: 12%;
						left: 41%;
						animation-delay: 0.2s;
					}

					#welcome .particle:nth-child(4) {
						top: 5%;
						left: 58%;
						animation-delay: 0.3s;
					}

					#welcome .particle:nth-child(5) {
						top: 15%;
						left: 76%;
						animation-delay: 0.4s;
					}

					#welcome .particle:nth-child(6) {
						top: 2%;
						left: 91%;
						animation-delay: 0.5s;
					}

					#welcome .particle:nth-child(7) {
						top: 22%;
						left: 12%;
						animation-delay: 0.6s;
					}

					#welcome .particle:nth-child(8) {
						top: 28%;
						left: 35%;
						animation-delay: 0.7s;
					}

					#welcome .particle:nth-child(9) {
						top: 19%;
						left: 52%;
						animation-delay: 0.8s;
					}

					#welcome .particle:nth-child(10) {
						top: 25%;
						left: 68%;
						animation-delay: 0.9s;
					}

					#welcome .particle:nth-child(11) {
						top: 31%;
						left: 84%;
						animation-delay: 1.0s;
					}

					#welcome .particle:nth-child(12) {
						top: 18%;
						left: 97%;
						animation-delay: 1.1s;
					}

					#welcome .particle:nth-child(13) {
						top: 38%;
						left: 5%;
						animation-delay: 1.2s;
					}

					#welcome .particle:nth-child(14) {
						top: 42%;
						left: 19%;
						animation-delay: 1.3s;
					}

					#welcome .particle:nth-child(15) {
						top: 35%;
						left: 33%;
						animation-delay: 1.4s;
					}

					#welcome .particle:nth-child(16) {
						top: 46%;
						left: 47%;
						animation-delay: 1.5s;
					}

					#welcome .particle:nth-child(17) {
						top: 39%;
						left: 61%;
						animation-delay: 1.6s;
					}

					#welcome .particle:nth-child(18) {
						top: 51%;
						left: 75%;
						animation-delay: 1.7s;
					}

					#welcome .particle:nth-child(19) {
						top: 44%;
						left: 89%;
						animation-delay: 1.8s;
					}

					#welcome .particle:nth-child(20) {
						top: 36%;
						left: 4%;
						animation-delay: 1.9s;
					}

					#welcome .particle:nth-child(21) {
						top: 55%;
						left: 14%;
						animation-delay: 2.0s;
					}

					#welcome .particle:nth-child(22) {
						top: 61%;
						left: 28%;
						animation-delay: 2.1s;
					}

					#welcome .particle:nth-child(23) {
						top: 54%;
						left: 42%;
						animation-delay: 2.2s;
					}

					#welcome .particle:nth-child(24) {
						top: 67%;
						left: 56%;
						animation-delay: 2.3s;
					}

					#welcome .particle:nth-child(25) {
						top: 58%;
						left: 70%;
						animation-delay: 2.4s;
					}

					#welcome .particle:nth-child(26) {
						top: 71%;
						left: 84%;
						animation-delay: 2.5s;
					}

					#welcome .particle:nth-child(27) {
						top: 63%;
						left: 98%;
						animation-delay: 2.6s;
					}

					#welcome .particle:nth-child(28) {
						top: 73%;
						left: 9%;
						animation-delay: 2.7s;
					}

					#welcome .particle:nth-child(29) {
						top: 78%;
						left: 22%;
						animation-delay: 2.8s;
					}

					#welcome .particle:nth-child(30) {
						top: 82%;
						left: 36%;
						animation-delay: 2.9s;
					}

					#welcome .particle:nth-child(31) {
						top: 76%;
						left: 49%;
						animation-delay: 3.0s;
					}

					#welcome .particle:nth-child(32) {
						top: 85%;
						left: 63%;
						animation-delay: 3.1s;
					}

					#welcome .particle:nth-child(33) {
						top: 79%;
						left: 77%;
						animation-delay: 3.2s;
					}

					#welcome .particle:nth-child(34) {
						top: 88%;
						left: 91%;
						animation-delay: 3.3s;
					}

					#welcome .particle:nth-child(35) {
						top: 92%;
						left: 6%;
						animation-delay: 3.4s;
					}

					#welcome .particle:nth-child(36) {
						top: 96%;
						left: 18%;
						animation-delay: 3.5s;
					}

					#welcome .particle:nth-child(37) {
						top: 94%;
						left: 31%;
						animation-delay: 3.6s;
					}

					#welcome .particle:nth-child(38) {
						top: 98%;
						left: 44%;
						animation-delay: 3.7s;
					}

					#welcome .particle:nth-child(39) {
						top: 91%;
						left: 57%;
						animation-delay: 3.8s;
					}

					#welcome .particle:nth-child(40) {
						top: 95%;
						left: 71%;
						animation-delay: 3.9s;
					}

					#welcome .particle:nth-child(41) {
						top: 1%;
						left: 82%;
						animation-delay: 4.0s;
					}

					#welcome .particle:nth-child(42) {
						top: 6%;
						left: 95%;
						animation-delay: 4.1s;
					}

					#welcome .particle:nth-child(43) {
						top: 11%;
						left: 3%;
						animation-delay: 4.2s;
					}

					#welcome .particle:nth-child(44) {
						top: 16%;
						left: 16%;
						animation-delay: 4.3s;
					}

					#welcome .particle:nth-child(45) {
						top: 9%;
						left: 29%;
						animation-delay: 4.4s;
					}

					#welcome .particle:nth-child(46) {
						top: 21%;
						left: 44%;
						animation-delay: 4.5s;
					}

					#welcome .particle:nth-child(47) {
						top: 14%;
						left: 59%;
						animation-delay: 4.6s;
					}

					#welcome .particle:nth-child(48) {
						top: 26%;
						left: 73%;
						animation-delay: 4.7s;
					}

					#welcome .particle:nth-child(49) {
						top: 20%;
						left: 87%;
						animation-delay: 4.8s;
					}

					#welcome .particle:nth-child(50) {
						top: 33%;
						left: 2%;
						animation-delay: 4.9s;
					}

					#welcome .particle:nth-child(51) {
						top: 29%;
						left: 15%;
						animation-delay: 5.0s;
					}

					#welcome .particle:nth-child(52) {
						top: 41%;
						left: 27%;
						animation-delay: 5.1s;
					}

					#welcome .particle:nth-child(53) {
						top: 37%;
						left: 40%;
						animation-delay: 5.2s;
					}

					#welcome .particle:nth-child(54) {
						top: 48%;
						left: 53%;
						animation-delay: 5.3s;
					}

					#welcome .particle:nth-child(55) {
						top: 43%;
						left: 66%;
						animation-delay: 5.4s;
					}

					#welcome .particle:nth-child(56) {
						top: 56%;
						left: 79%;
						animation-delay: 5.5s;
					}

					#welcome .particle:nth-child(57) {
						top: 50%;
						left: 93%;
						animation-delay: 5.6s;
					}

					#welcome .particle:nth-child(58) {
						top: 64%;
						left: 8%;
						animation-delay: 5.7s;
					}

					#welcome .particle:nth-child(59) {
						top: 69%;
						left: 21%;
						animation-delay: 5.8s;
					}

					#welcome .particle:nth-child(60) {
						top: 66%;
						left: 34%;
						animation-delay: 5.9s;
					}

					#welcome .particle:nth-child(61) {
						top: 74%;
						left: 48%;
						animation-delay: 6.0s;
					}

					#welcome .particle:nth-child(62) {
						top: 72%;
						left: 61%;
						animation-delay: 6.1s;
					}

					#welcome .particle:nth-child(63) {
						top: 81%;
						left: 74%;
						animation-delay: 6.2s;
					}

					#welcome .particle:nth-child(64) {
						top: 77%;
						left: 88%;
						animation-delay: 6.3s;
					}

					#welcome .particle:nth-child(65) {
						top: 86%;
						left: 3%;
						animation-delay: 6.4s;
					}

					#welcome .particle:nth-child(66) {
						top: 90%;
						left: 16%;
						animation-delay: 6.5s;
					}

					#welcome .particle:nth-child(67) {
						top: 93%;
						left: 29%;
						animation-delay: 6.6s;
					}

					#welcome .particle:nth-child(68) {
						top: 89%;
						left: 42%;
						animation-delay: 6.7s;
					}

					#welcome .particle:nth-child(69) {
						top: 97%;
						left: 55%;
						animation-delay: 6.8s;
					}

					#welcome .particle:nth-child(70) {
						top: 91%;
						left: 68%;
						animation-delay: 6.9s;
					}

					#welcome .particle:nth-child(71) {
						top: 4%;
						left: 81%;
						animation-delay: 7.0s;
					}

					#welcome .particle:nth-child(72) {
						top: 7%;
						left: 94%;
						animation-delay: 7.1s;
					}

					#welcome .particle:nth-child(73) {
						top: 13%;
						left: 7%;
						animation-delay: 7.2s;
					}

					#welcome .particle:nth-child(74) {
						top: 17%;
						left: 20%;
						animation-delay: 7.3s;
					}

					#welcome .particle:nth-child(75) {
						top: 10%;
						left: 33%;
						animation-delay: 7.4s;
					}

					#welcome .particle:nth-child(76) {
						top: 23%;
						left: 46%;
						animation-delay: 7.5s;
					}

					#welcome .particle:nth-child(77) {
						top: 27%;
						left: 59%;
						animation-delay: 7.6s;
					}

					#welcome .particle:nth-child(78) {
						top: 32%;
						left: 72%;
						animation-delay: 7.7s;
					}

					#welcome .particle:nth-child(79) {
						top: 24%;
						left: 85%;
						animation-delay: 7.8s;
					}

					#welcome .particle:nth-child(80) {
						top: 34%;
						left: 98%;
						animation-delay: 7.9s;
					}

					#welcome .particle:nth-child(81) {
						top: 45%;
						left: 11%;
						animation-delay: 8.0s;
					}

					#welcome .particle:nth-child(82) {
						top: 40%;
						left: 24%;
						animation-delay: 8.1s;
					}

					#welcome .particle:nth-child(83) {
						top: 52%;
						left: 37%;
						animation-delay: 8.2s;
					}

					#welcome .particle:nth-child(84) {
						top: 47%;
						left: 50%;
						animation-delay: 8.3s;
					}

					#welcome .particle:nth-child(85) {
						top: 59%;
						left: 63%;
						animation-delay: 8.4s;
					}

					#welcome .particle:nth-child(86) {
						top: 53%;
						left: 76%;
						animation-delay: 8.5s;
					}

					#welcome .particle:nth-child(87) {
						top: 65%;
						left: 89%;
						animation-delay: 8.6s;
					}

					#welcome .particle:nth-child(88) {
						top: 57%;
						left: 4%;
						animation-delay: 8.7s;
					}

					#welcome .particle:nth-child(89) {
						top: 68%;
						left: 17%;
						animation-delay: 8.8s;
					}

					#welcome .particle:nth-child(90) {
						top: 75%;
						left: 30%;
						animation-delay: 8.9s;
					}

					#welcome .particle:nth-child(91) {
						top: 70%;
						left: 43%;
						animation-delay: 9.0s;
					}

					#welcome .particle:nth-child(92) {
						top: 83%;
						left: 56%;
						animation-delay: 9.1s;
					}

					#welcome .particle:nth-child(93) {
						top: 78%;
						left: 69%;
						animation-delay: 9.2s;
					}

					#welcome .particle:nth-child(94) {
						top: 87%;
						left: 82%;
						animation-delay: 9.3s;
					}

					#welcome .particle:nth-child(95) {
						top: 80%;
						left: 95%;
						animation-delay: 9.4s;
					}

					#welcome .particle:nth-child(96) {
						top: 99%;
						left: 10%;
						animation-delay: 9.5s;
					}

					#welcome .particle:nth-child(97) {
						top: 95%;
						left: 23%;
						animation-delay: 9.6s;
					}

					#welcome .particle:nth-child(98) {
						top: 2%;
						left: 36%;
						animation-delay: 9.7s;
					}

					#welcome .particle:nth-child(99) {
						top: 6%;
						left: 49%;
						animation-delay: 9.8s;
					}

					#welcome .particle:nth-child(100) {
						top: 14%;
						left: 62%;
						animation-delay: 9.9s;
					}
				}

				@layer fallback-animation {
					@keyframes float-particle {

						0%,
						100% {
							transform: translateY(0) translateX(0) scale(1);
							opacity: 0.3;
						}

						25% {
							transform: translateY(-40px) translateX(20px) scale(1.3);
							opacity: 0.8;
						}

						50% {
							transform: translateY(-20px) translateX(-15px) scale(1);
							opacity: 0.5;
						}

						75% {
							transform: translateY(-50px) translateX(10px) scale(1.2);
							opacity: 0.9;
						}
					}
				}
			}
		}

		/* Draw some dynamic noise behind some of the screens */
		/* I am using Houdini PaintWorklets for this */
		@layer speckled-backgrounds {
			@supports (background: paint(something)) {

				#beforeyougo .card,
				#who>div {
					--extra-confettiNumber: 250;
					--extra-confettiLengthVariance: 1;
					--extra-confettiWeightVariance: 1;
					background-image: paint(extra-confetti);
				}
			}
		}

		@layer product {
			/* @TODO: Move `container-type: inline-size` for centered sticky using cqi to here, as that is modern CSS */
		}
	}

	@layer components {
		@layer button {

			/* Buttons in .dark containers have inverted colors */
			@scope (.dark) {
				button {
					color: var(--theme-surface-on-surface);
					background: var(--theme-primary-on-primary);
					border: 1px solid var(--theme-outline-variant);

					&:hover,
					&:focus-visible {
						background: var(--theme-button-secondary-hover);
					}

					&.secondary {
						color: var(--theme-surface-surface);
						background: var(--theme-nav-button-hover);

						&:hover,
						&:focus-visible {
							background: var(--theme-button-secondary-inverse-hover);
						}
					}
				}
			}
		}

		@layer navbar {

			/* Anchor the mobile nav underneath the header */
			@layer mobile {
				@media (width < 930px) {
					header {
						anchor-name: --header;
					}

					header nav {
						position: fixed;
						inset: auto;
						top: 0;
						/* Undo non-modern-CSS styling */
						position-anchor: --header;
						position-area: bottom;
						justify-self: stretch;
						align-self: stretch;
					}
				}
			}

			/* Animate-in the nav on mobile when showing */
			@layer mobile {
				@media (width < 930px) {
					header nav {
						transition: opacity .15s ease-in;

						@starting-style {
							opacity: 0;
						}
					}
				}
			}

			/* Don’t scroll page when menu is open */
			@media (width < 930px) {
				header:has(.menu-checkbox:checked) {

					&,
					& nav {
						overflow: auto;
						overscroll-behavior: contain;
					}
				}
			}

			/* Hidey bar – http://brm.us/hidey-bar-2 */
			@layer hidey-bar {
				html {
					container-type: scroll-state;
				}

				.header-wrapper:not(.header-wrapper:has(.menu-checkbox:checked)) {
					transition: translate 0.25s;
					translate: 0 0;

					@container scroll-state(scrolled: bottom) {
						translate: 0 -100%;
					}
				}
			}
		}

		@layer carousel {
			@layer scroll-snapping {
				@layer base-setup {
					@supports (scroll-padding-inline: 3rem) {
						.carousel {
							scroll-padding-inline: 3rem;
							scroll-snap-type: x mandatory;

							>* {
								scroll-snap-align: start;
							}

							/* @NOTE: On the orignal page the last item also snaps to the left */
							/* To get this working, I’d manually add some padding to the right */
							/* Defining that “some” is tricky and requires manual calculation */
							/* Here I am calculating 40vi (because the entries are 60vi) minus gap */
							/* So maybe we should have `auto` on scroll-padding do something? */
							@media (width >=930px) {
								padding-inline: 3rem calc(40vi - 3rem);
							}
						}
					}
				}

				@layer snapped-effects {
					/* @note: The typewriter effect is done with scroll-triggered animations, but could as well be done with snapped state queries */

					.carousel>* {
						container-type: scroll-state;

						@supports (container-type: scroll-state) {

							/* The images */
							>figure {
								opacity: .25;
								transition: opacity .5s ease;

								@container scroll-state(snapped: x) {
									opacity: 1;
								}
							}

							/* The bylines */
							>*:not(figure) {
								transition: opacity .5s ease, translate .5s ease;
								transition-delay: 0s;
								opacity: 0;
								translate: 0 calc(0.5rem * (sibling-index() - 1)) 0;

								@container scroll-state(snapped: x) {
									transition-delay: 0.2s;
									/* NOTE: It feels like CSS snapped is triggering while it’s still scrolling, so we delay it a bit */
									opacity: 1;
									translate: 0 0 0;
								}
							}
						}
					}
				}
			}

			@layer niceties {
				.carousel {
					scrollbar-width: none;
					overscroll-behavior-x: contain;
				}
			}

			@layer scroll-buttons {

				/* @note: https://chrome.dev/carousel-configurator/ really helps here */
				.carousel {
					position: relative;
					scroll-behavior: smooth;
					anchor-name: --carousel;

					&::scroll-button(*) {
						position: fixed;
						position-anchor: --carousel;
						position-visibility: always;
						font-family: "Material Symbols Outlined";

						color: var(--theme-surface-on-surface);
						background: var(--theme-tonal-tonal);
						border: none;
						block-size: 2em;
						font-size: 1.3em;
						inline-size: 2.5em;
						display: flex;
						align-items: center;
						justify-content: center;
						cursor: pointer;
						border-radius: 999px;

						transition: opacity 0.25s ease;
					}

					/* @note: We currently can’t nest this inside `&::scroll-button(*)` because of how CSS Nesting works */
					&::scroll-button(*):hover {
						background: #eff0f3;
					}

					&::scroll-button(*):disabled {
						cursor: not-allowed;
						opacity: 0.25;
					}

					/* @note: We deviate from the antigravity site here, because CSS carousel does not offer a wrapper around both scroll buttons … */
					&::scroll-button(left) {
						translate: -50% 0;
						content: 'arrow_back' / 'Previous';
					}

					&::scroll-button(right) {
						translate: 50% 0;
						content: 'arrow_forward' / 'Next';
					}

					@media (width < 930px) {

						&::scroll-button(left),
						&::scroll-button(right) {
							position-area: center center;
							align-self: end;
						}
					}

					@media (width >=930px) {

						&::scroll-button(left),
						&::scroll-button(right) {
							position-area: center center;
							align-self: start;
							justify-self: start;
							/* Magic numbers … these rely on the flex-basis of the slides + the aspect-ratio of the photos. Nasty, but it works. */
							left: calc(60vi - 1em);
							top: calc((60vi + 1em) * 9 / 16);
						}
					}
				}
			}
		}
	}

	@layer animations {
		@layer revealing-welcome-items {
			#welcome {

				svg,
				.cta {
					transition: translate 0.5s ease, opacity 0.5s ease;

					@starting-style {
						translate: 0 50% 0;
						opacity: 0;
					}
				}
			}
		}

		@layer scroll-triggered-typewriter-effect {
			@supports (timeline-trigger-name: --t) {

				/* @ref https://codepen.io/bramus/pen/JjwxLNM */
				@keyframes blink {
					from {
						opacity: 0;
					}
				}

				@keyframes text {
					from {
						background-size: 0
					}
				}

				/* Typewriter effect */
				.typewriter {
					background:
						/* highlight text */
						linear-gradient(90deg, var(--typewriter-text-color, var(--theme-surface-on-surface)) 0 0) 0 / calc(var(--n, 100) * 1ch) no-repeat
						/* faded text */
						transparent;
					-webkit-background-clip: text;
					color: transparent;
					animation: text 2s ease-in both;
					font-size: 18px;
					display: inline-block;
					padding: 15px 20px;
					width: 60%;

					&::after {
						content: "|";
						--hdr-gradient: linear-gradient(in oklch,
								oklch(80% .3 34),
								oklch(90% .3 200));
						--sdr-gradient: linear-gradient(#ff4700, #0ff);

						background: var(--hdr-gradient);
						background-clip: text;
						color: transparent;

						/* The delay is manually calculated to make the animation only start after the typewriter itself has finished */
						animation: blink 0.2s 1.4s ease infinite alternate both;
					}
				}

				/* Typewriter Trigger in product section */
				#product *:has(> .typewriter) {
					timeline-trigger: --t view() cover 30% cover 1000%;
					trigger-scope: --t;

					.typewriter {
						width: 100%;
						animation-trigger: --t play-once;

						&::after {
							animation-trigger: --t play-once;
							animation-delay: 1.6s;
						}
					}
				}

				/* Typewriter Trigger in Carousel */
				.carousel>* {
					timeline-trigger: --t view(inline) entry 90% exit 50%;
					trigger-scope: --t;

					.typewriter {
						--typewriter-text-color: white;
						animation-trigger: --t play-forwards reset;
						animation-duration: 1.5s;

						&::after {
							animation-trigger: --t play-forwards reset;
							animation-delay: 0.9s;
						}
					}
				}

				/* Typewriter Trigger in Before You Go */
				#beforeyougo>.card {
					timeline-trigger: --t view() cover 30% cover 1000%;
					trigger-scope: --t;

					.typewriter {
						--typewriter-text-color: white;
						animation-trigger: --t play-once;
						animation-duration: 2s;

						&::after {
							animation-trigger: --t play-once;
							animation-delay: 1s;
						}
					}
				}
			}
		}

		@layer moving-icons {
			@layer slide-in {
				@keyframes slide-in {
					from {
						translate: 100% 0 0;
					}
				}

				#product .icons {
					timeline-trigger: --t view() cover 30% cover 1000%;
					trigger-scope: --t;
					animation: slide-in 1s ease both;
					animation-trigger: --t play-once;
				}
			}

			@layer wobble {
				@keyframes wobble {
					from {
						translate: 0 75%;
					}

					to {
						translate: 0 -75%;
					}
				}

				#product .icon {
					/* @NOTE: If we had support for random(), we could even randomize the animation distance per element */
					animation: wobble 4s ease infinite alternate;
					animation-delay: calc(mod(sibling-index(), 5) * -1s);
				}
			}
		}

		@layer product-features {

			/* Scroll-triggered fading of the text + images */
			@supports (timeline-trigger-name: --t) {
				@keyframes fade-a-bit {
					from {
						opacity: 0.3;
					}

					to {
						opacity: 1;
					}
				}

				@keyframes fake-clip-it {
					to {
						scale: 100% 0%;
					}
				}

				@keyframes fade-in {
					from {
						opacity: 0;
					}
				}

				@media (width >=930px) {
					#features .feature {
						timeline-trigger: --t view() entry 100% cover 50%;
						trigger-scope: --t;

						h3 {
							animation: fade-a-bit 500ms ease both;
							animation-trigger: --t play-forwards play-backwards;
						}

						p {
							position: relative;

							&::after {
								content: '';
								position: absolute;
								bottom: 0;
								left: 0;
								right: 0;
								height: 100%;
								transform-origin: 0 100%;
								background: white;
								animation: fake-clip-it 500ms ease both;
								animation-trigger: --t play-forwards play-backwards;
							}
						}

						/* Exclude the first one, because that one is always visible */
						img:not(.feature:first-child img) {
							animation: fade-in 500ms ease both;
							animation-trigger: --t play-forwards play-backwards;
							/* TODO: Don’t fade out the underlying ones */
						}
					}
				}
			}

			/* @TODO: Scroll-Driven unclipping of the image-wrapper (on the first image) */
		}

		@layer scroll-driven-animations {

			/* @note: We also check for range support. See https://brm.us/sda-feature-detection for details */
			@supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
				@keyframes scale-up {
					from {
						scale: 0.85;
					}
				}

				#beforeyougo .card {
					animation: scale-up linear both;
					animation-timeline: view();
					animation-range: entry 50% entry 100%;
				}
			}
		}
	}
}

@layer components {
	@layer button {
		button {
			background: var(--theme-primary-primary);
			color: var(--theme-primary-on-primary);
			border: 0px;
			border-radius: 999px;
			padding: 0.6em 1.5em;

			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			gap: 0.4rem;

			font-size: 0.9em;

			cursor: pointer;
			transition: .15s background ease-out;

			&:hover,
			&:focus-visible {
				background: var(--theme-button-states-primary-hovered);
			}

			&:has(span + .material-symbols-outlined) {
				padding-inline-end: 1em;
			}

			&:has(.material-symbols-outlined + span) {
				padding-inline-start: 1em;
			}

			&.secondary {
				color: var(--theme-surface-on-surface);
				background: var(--theme-secondary-button);
				border: 1px solid var(--theme-outline-variant);

				&:hover,
				&:focus-visible {
					background: var(--theme-button-secondary-hover);
				}
			}

			&.btn-login {
				background: #5cb85c !important;
				color: white !important;
				font-weight: bold !important;
				padding: 1em 2.5em;
				font-size: 1.4em;

				&:hover,
				&:focus-visible {
					background: #4cae4c !important;
				}

				.material-symbols-outlined {
					font-size: 1.4em;
					margin-right: 0.4em;
				}
			}

			&.btn-demo {
				background: #5bc0de !important;
				color: white !important;
				font-weight: bold !important;

				&:hover,
				&:focus-visible {
					background: #46b8da !important;
				}

				.material-symbols-outlined {
					font-size: 1.2em;
					margin-right: 0.3em;
				}
			}
		}
	}

	@layer navbar {
		@layer shared {
			nav ul {
				list-style: none;
				margin: 0;
				padding: 0;
			}

			.menu-checkbox {
				display: none;
			}

			nav a {
				color: var(--theme-surface-on-surface);
				transition: .15s color ease-out, .15s background ease-out;
				text-decoration: none;

				&:hover,
				&:focus-visible {
					color: #000;
					background: var(--theme-button-states-hovered);
				}
			}
		}

		@layer mobile {
			@media (width < 930px) {
				.menu-button {
					cursor: pointer;
					width: 3.5em;
					border-radius: 999px;
					text-align: center;
					place-content: center;

					transition: .15s background ease-out;

					&:hover,
					&:focus-visible {
						background: var(--theme-button-states-hovered);
					}
				}

				nav {
					display: none;
				}

				nav li {
					font-size: 1.85em;
					font-weight: 350;
					border-bottom: 1px solid var(--theme-surface-surface-container-higher);

					&:first-child {
						border-top: 1px solid var(--theme-surface-surface-container-higher);
					}
				}

				nav a {
					display: block;

					padding-inline: 3rem;
					padding-block: 1.5rem;
				}

				/* When the menu toggle is checked */
				.menu-checkbox:checked {

					/* Show the nav */
					&~nav {
						position: fixed;
						inset: 0;
						top: 2.75em;
						/* This is a guess for how tall the topbar is */
						display: block;
						background: var(--palette-grey-0);
					}

					/* Show the proper icon in the button */
					&~.menu-button {
						[data-show-when="closed"] {
							display: none !important;
						}
					}

					/* Colorize the button differently */
					&~.menu-button {
						background: var(--theme-primary-primary);
						color: var(--theme-primary-on-primary);

						&:hover,
						&:focus-visible {
							background: var(--theme-button-states-primary-hovered);
						}
					}
				}

				/* When the menu toggle is not checked */
				.menu-checkbox:not(:checked) {

					/* Show the proper icon in the button */
					&~.menu-button {
						[data-show-when="open"] {
							display: none !important;
						}
					}
				}

				/* Hide the download button */
				header button {
					display: none;
				}
			}
		}

		/* Large Menu */
		@layer large {
			@media (width >=930px) {
				nav ul {
					display: flex;
					flex-direction: row;
					gap: 0.2rem;
					align-self: flex-start;
				}

				nav a {
					padding: 0.6em 1.2em;
					border-radius: 999px;
					color: var(--theme-surface-on-surface-variant);
					white-space: nowrap;

					&:hover,
					&:focus-visible {
						color: #000;
						background: var(--theme-nav-button-hover);
					}
				}

				.menu-button {
					display: none;
				}
			}
		}
	}

	@layer card {
		.card {
			border-radius: 2em;

			&.dark {
				background: #3045ca;
				color: var(--theme-surface-surface);
			}
		}
	}
}

@layer layout {
	@layer grid {
		body {
			margin: 0;
			display: grid;
			grid-template-columns:
				[fullbleed-start] 3rem [main-start] 1fr [main-end] 3rem [fullbleed-end];
			grid-auto-rows: min-content;
		}

		body>* {
			grid-column: fullbleed;
		}
	}

	@layer navigation {
		.header-wrapper {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;

			background: var(--theme-surface-surface);
			z-index: 1;
		}

		header {
			display: flex;
			flex-direction: row;
			gap: 2rem;
			align-items: center;

			padding-inline: 3rem;
			/* @TODO: Figure out if we can subgrid for this */
			padding-block: 0.5rem;

			button,
			.menu-button {
				margin-left: auto;
			}
		}
	}

	@layer welcome {
		#welcome {
			h1 svg {
				height: 1em;
				width: auto;
				display: block;
				margin: 0 auto;
			}

			p {
				font-size: 4.5em;
				text-align: center;
				font-weight: 500;

				color: var(--theme-surface-on-surface);

				span {
					display: block;
					font-size: 0.7em;
					color: var(--theme-surface-on-surface-variant);
				}
			}

			.cta {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				gap: 1.5em;
				justify-content: center;
				margin-top: 2em;

				width: 90%;
				margin-left: auto;
				margin-right: auto;
				margin-bottom: 0;

				button {
					font-size: 1.15em;
				}
			}
		}
	}

	@layer video {
		#video {
			padding: 0 1em;
			margin-top: -280px;

			iframe {
				width: 100%;
				height: auto;
				aspect-ratio: 16/9;
				max-height: 75vh;

				border-radius: 2em;
				overflow: clip;
			}
		}
	}

	@layer product {
		#product {
			padding-left: 30px;

			display: grid;
			grid-template-columns: subgrid;

			h2 {
				font-size: 24px;
				width: 100%;
				max-width: none;
				font-weight: normal;
			}

			>*:not(.icons) {
				grid-column: main;
			}

			.icons {
				grid-column: fullbleed;
				display: flex;
				justify-content: center;
				gap: 15px;
			}

			.icons {
				height: max(24em, 40vb);

				display: flex;
				flex-direction: row;
				gap: 0.5rem;
				align-items: center;

				overflow-x: clip;

				.icon {
					flex: 0 0 clamp(4rem, 10vw, 6rem);
					aspect-ratio: 1;
					border-radius: 50%;

					background: #b7bfd917;
					border: 1px solid var(--theme-outline-variant);
					backdrop-filter: blur(5px);

					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					text-align: center;

					span {
						font-size: 2em !important;
					}
				}
			}
		}

		#features {
			display: block;

			@media (width >=930px) {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 4rem;

				/* Левая колонка с текстом */
				.features-content {
					display: flex;
					flex-direction: column;
				}

				.feature-text {
					min-height: 100vh;
					display: flex;
					flex-direction: column;
					justify-content: center;
					padding: 2rem 0;
					text-align: center;

					h3 {
						font-weight: 350;
						font-size: 1.5em;
						line-height: 1.2;
						margin-bottom: 1rem;
					}

					p {
						font-weight: 300;
						line-height: 1.5;
						color: var(--theme-surface-on-surface-variant);
					}
				}

				/* Правая колонка с картинками - sticky контейнер */
				.features-images {
					position: sticky;
					top: 0;
					height: 100vh;
					display: flex;
					align-items: center;
					justify-content: center;
					/* ВАЖНО: align-self: start нужен для работы sticky внутри grid,
					   иначе элемент растягивается на всю высоту родителя */
					align-self: start;
				}

				/* Вложенный контейнер для позиционирования картинок */
				.features-images-inner {
					position: relative;
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.feature-image {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					display: flex;
					align-items: center;
					justify-content: center;

					/* Скрываем все картинки по умолчанию */
					opacity: 0;
					transform: scale(0.95);
					transition: opacity 0.5s ease, transform 0.5s ease;
					pointer-events: none;
					/* Чтобы не мешали кликать, если нужно */
				}

				/* Активная картинка видима */
				.feature-image.active {
					opacity: 1;
					transform: scale(1);
					z-index: 2;
				}

				img {
					max-width: 90%;
					max-height: 75vh;
					width: auto;
					height: auto;
					object-fit: contain;
					border-radius: 2em;
					box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
					background: white;
				}
			}

			/* Мобильная версия */
			@media (width < 930px) {
				.features-content {
					display: flex;
					flex-direction: column;
					gap: 2rem;
				}

				.feature-text {
					padding: 2rem 0;
					text-align: center;

					h3 {
						font-weight: 350;
						font-size: 1.25em;
						margin-bottom: 1rem;
					}

					p {
						font-weight: 300;
						line-height: 1.4;
						color: var(--theme-surface-on-surface-variant);
					}
				}

				.features-images {
					display: none;
				}
			}
		}
	}

	@layer developers {
		#developers {
			width: 100%;
			border-top: 1px solid var(--theme-outline-variant);
			margin-top: 2em;
			padding-top: 2em;

			display: grid;
			grid-template-columns: subgrid;

			>*:not(.carousel) {
				grid-column: main;
			}

			.intro {
				color: var(--theme-surface-on-surface-variant);
				font-size: 1.1em;
				line-height: 1.2;
				font-weight: 320;
				padding: 0.5rem 0;

				@media (width >=930px) {
					width: calc(30vw - 1.5rem);
					/* TODO: This magic value is not entirely 100% accurate. Maybe if we used a cols layout throughout the site it would work nicely */
					margin-left: auto;
				}
			}

			.carousel {
				grid-column: fullbleed;
				padding-inline: 3rem;
				width: 100%;

				overflow-x: scroll;

				display: flex;
				gap: 2rem;

				.developer {
					flex: 0 0 100%;
					overflow: clip;

					@media (width >=930px) {
						flex-basis: 60vi;
					}

					figure {
						display: grid;
						place-items: center;

						>* {
							grid-area: 1 / 1;
						}

						figcaption {
							color: white;
							font-size: 2em;
						}
					}

					img {
						border-radius: 2em;
					}

					h3 {
						font-weight: 350;
						font-size: 1.25em;
						line-height: 1.1;
						margin-block-end: 0.5rem;
					}

					p {
						width: 40%;
						text-wrap: pretty;
						color: var(--theme-surface-on-surface-variant);
						letter-spacing: 0.05rem;
						font-weight: 300;
					}

					a {
						display: flex;
						flex-direction: row;
						align-items: center;
						gap: 0.25em;

						color: var(--theme-surface-on-surface-variant);
						text-decoration: none;
						font-weight: 300;

						transition: gap 0.15s ease-in;

						&:hover,
						&:focus-visible {
							gap: 0.5em;
						}

						&::after {
							font-family: 'Material Symbols Outlined';
							font-weight: normal;
							font-style: normal;
							font-size: 24px;
							line-height: 1;
							letter-spacing: normal;
							text-transform: none;
							display: inline-block;
							white-space: nowrap;
							word-wrap: normal;
							direction: ltr;
							-webkit-font-feature-settings: 'liga';
							-webkit-font-smoothing: antialiased;

							content: "\f46a";
						}
					}
				}
			}
		}
	}

	@layer who {
		#who {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;

			@media (width >=930px) {
				flex-direction: row;
				justify-content: space-around;
			}

			>div {
				height: 40vh;

				display: grid;
				place-content: center;
				gap: 1em;

				@media (width >=930px) {
					height: 80vh;
				}
			}

			h3 {
				font-weight: 400;
				font-size: 1.75em;
				line-height: 1.1;

				@media (width >=930px) {
					font-size: 2.5em;
				}

				span {
					color: var(--theme-surface-on-surface-variant);
				}
			}

			button {
				font-size: 1.15em;
				justify-self: center;
			}
		}
	}

	@layer beforeyougo {
		#beforeyougo {
			display: grid;
			grid-template-columns: subgrid;

			min-height: auto;
			height: min-content;
			margin-bottom: 0;
			padding-bottom: 0;

			>* {
				grid-column: main;
			}

			.card {
				width: 100%;
				height: auto;

				display: grid;
				grid-template-columns: 25% 37.5% 37.5%;
				padding: 1em;
				gap: 0.5rem;
				align-content: center;
			}

			.card>div {
				padding-top: 10%;
				padding-bottom: 10%;
			}

			p {
				font-size: 2em;
				text-wrap: pretty;
				margin: 0;
				max-width: 20ch;

				@media (width > 930px) {
					font-size: 3em;
				}
			}

			.buttons {
				display: flex;
				flex-direction: column;
				gap: 0.25rem;
				font-size: 1.2em;
				align-items: start;

				@media (width > 930px) {
					flex-direction: row;
				}
			}
		}
	}
}

@layer base {
	html {
		background: var(--theme-surface-surface);
		font-family: "Google Sans Flex", sans-serif;
		font-weight: 400;

		font-size: 16px;

		color: var(--theme-surface-on-surface);
	}

	section {
		/* Make sections fullheight */
		min-height: 100dvh;

		&.center {
			/* Center their contents */
			place-content: safe center;
			justify-items: center;
		}
	}

	h2 {
		font-size: 2.5em;
		font-weight: 350;
		margin: 0.5rem 0;
		line-height: 1;

		@media (width >=930px) {
			width: 50%;
			max-width: 25ch;
		}
	}

	p {
		color: var(--theme-surface-on-surface-variant);
	}

	@scope (.dark) {
		p {
			color: var(--theme-surface-surface);
		}
	}
}

@layer reset {

	html,
	body {
		height: 100%;
	}

	* {
		box-sizing: border-box;
	}

	img {
		max-width: 100%;
		height: auto;
	}

	ul[class] {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	input,
	textarea,
	select,
	button {
		font-family: inherit;
		font-size: inherit;
	}

	a:focus-visible,
	button:focus-visible {
		outline-offset: 0.2rem;
	}

	figure {
		margin: 0;
	}
}

@layer util {
	.sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border-width: 0;
	}

	.not-sr-only {
		position: static;
		width: auto;
		height: auto;
		padding: 0;
		margin: 0;
		overflow: visible;
		clip: auto;
		white-space: normal;
	}
}

@layer tokens {
	@layer colors {
		:root {
			--palette-grey-900: #2F3034;
			--palette-grey-800: #45474D;
			--palette-grey-50: #E6EAF0;
			--palette-grey-0: #FFFFFF;
			--palette-grey-1000: #212226;
			--palette-grey-20: #EFF2F7;
			--palette-grey-1200: #121317;
			--palette-grey-1100: #18191D;
			--palette-grey-10: #F8F9FC;
			--palette-grey-100: #E1E6EC;
			--palette-grey-200: #CDD4DC;
			--palette-grey-300: #B2BBC5;
			--palette-grey-400: #B7BFD9;
			--palette-grey-600: #AAB1CC4D;
			--palette-grey-1000-12: #dedfe2;
			--palette-grey-50-20: #414347;
			--palette-grey-15: #F0F1F5;
			--palette-grey-0-rgb: 255, 255, 255;
			--palette-grey-50-rgb: 230, 234, 240;
			--palette-grey-400-rgb: 183, 191, 217;
			--palette-grey-600-rgb: 170, 177, 204;
			--palette-grey-1000-rgb: 33, 34, 38;
			--palette-grey-1200-rgb: 18, 19, 23;
			--theme-surface-surface: var(--palette-grey-0);
			--theme-surface-on-surface: var(--palette-grey-1200);
			--theme-surface-on-surface-variant: var(--palette-grey-800);
			--theme-surface-surface-container: var(--palette-grey-10);
			--theme-surface-surface-container-high: var(--palette-grey-20);
			--theme-surface-surface-container-higher: var(--palette-grey-50);
			--theme-surface-surface-container-highest: var(--palette-grey-100);
			--theme-surface-inverse-surface: var(--palette-grey-1200);
			--theme-surface-inverse-on-surface: var(--palette-grey-10);
			--theme-surface-inverse-on-surface-variant: var(--palette-grey-300);
			--theme-surface-overlay: rgba(var(--palette-grey-0-rgb), .95);
			--theme-surface-overlay-low: rgba(var(--palette-grey-0-rgb), .12);
			--theme-surface-overlay-high: rgba(var(--palette-grey-0-rgb), .24);
			--theme-surface-overlay-higher: rgba(var(--palette-grey-0-rgb), .72);
			--theme-surface-overlay-highest: rgba(var(--palette-grey-0-rgb), .95);
			--theme-surface-transparent: rgba(var(--palette-grey-0-rgb), 0);
			--theme-inverse-surface-overlay: rgba(var(--palette-grey-1200-rgb), .01);
			--theme-inverse-surface-overlay-high: rgba(var(--palette-grey-1200-rgb), .24);
			--theme-inverse-surface-overlay-higher: rgba(var(--palette-grey-1200-rgb), .72);
			--theme-inverse-surface-overlay-highest: rgba(var(--palette-grey-1200-rgb), .95);
			--theme-inverse-surface: var(--palette-grey-1200);
			--theme-outline: rgba(var(--palette-grey-1000-rgb), .12);
			--theme-outline-variant: rgba(var(--palette-grey-1000-rgb), .06);
			--theme-inverse-outline: rgba(var(--palette-grey-50-rgb), .12);
			--theme-inverse-outline-variant: rgba(var(--palette-grey-50-rgb), .06);
			--theme-outline-inverse-outline-variant: rgba(230, 234, 240, .06);
			--theme-outline-outline-variant: rgba(33, 34, 38, .06);
			--theme-primary-primary: var(--theme-surface-on-surface);
			--theme-primary-on-primary: var(--theme-surface-surface);
			--theme-tonal-tonal: var(--theme-surface-surface-container);
			--theme-tonal-on-tonal: var(--theme-surface-on-surface);
			--theme-outlined-outlined: var(--theme-surface-surface-transparent);
			--theme-outlined-on-outlined: var(--theme-surface-on-surface);
			--theme-protected-protected: var(--theme-surface-surface-container);
			--theme-protected-on-protected: var(--theme-surface-on-surface);
			--theme-text-text: var(--theme-surface-surface-transparent);
			--theme-text-on-text: var(--theme-surface-on-surface);
			--theme-text-link-states-enabled: var(--theme-surface-on-surface-variant);
			--theme-text-link-states-hovered: var(--palette-grey-1000);
			--theme-text-link-states-focused: var(--palette-grey-1100);
			--theme-text-link-states-pressed: var(--palette-grey-1000);
			--theme-text-link-states-disabled: #6A6A71;
			--theme-button-states-primary-enabled: var(--theme-primary-primary);
			--theme-button-states-primary-disabled: var(--palette-grey-10);
			--theme-button-states-primary-hovered: var(--palette-grey-900);
			--theme-button-states-primary-pressed: rgba(var(--palette-grey-50-rgb), .12);
			--theme-button-states-primary-focused: rgba(var(--palette-grey-50-rgb), .2);
			--theme-button-states-primary-on-disabled: rgba(var(--palette-grey-1000-rgb), .2);
			--theme-secondary-button: rgba(var(--palette-grey-400-rgb), .1);
			--theme-button-secondary-hover: var(--palette-grey-15);
			--theme-button-secondary-inverse-hover: rgba(var(--palette-grey-600-rgb), .3);
			--theme-button-states-tonal-enabled: var(--theme-tonal-tonal);
			--theme-button-states-tonal-disabled: var(--palette-grey-10);
			--theme-button-states-protected-enabled: var(--theme-protected-protected);
			--theme-button-states-protected-hovered: var(--palette-grey-20);
			--theme-button-states-protected-disabled: var(--palette-grey-100);
			--theme-button-states-outlined-enabled: var(--theme-outlined-outlined);
			--theme-button-states-disabled: var(--palette-grey-100);
			--theme-button-states-on-disabled: #6A6A71;
			--theme-button-states-hovered: rgba(var(--palette-grey-1000-rgb), .04);
			--theme-button-states-pressed: rgba(var(--palette-grey-1000-rgb), .06);
			--theme-button-states-focused: rgba(var(--palette-grey-1000-rgb), .12);
			--theme-button-states-disabled-transparent: rgba(var(--palette-grey-50-rgb), 0);
			--theme-nav-button: rgba(var(--palette-grey-400-rgb), .09);
			--theme-nav-button-hover: rgba(var(--palette-grey-400-rgb), .2);
			--divider: var(--theme-outline-outline-variant);
		}
	}

	@layer animations {
		:root {
			--ease-in-quad: cubic-bezier(.55, .085, .68, .53);
			--ease-in-cubic: cubic-bezier(.55, .055, .675, .19);
			--ease-in-quart: cubic-bezier(.895, .03, .685, .22);
			--ease-in-quint: cubic-bezier(.755, .05, .855, .06);
			--ease-in-expo: cubic-bezier(.95, .05, .795, .035);
			--ease-in-circ: cubic-bezier(.6, .04, .98, .335);
			--ease-out-quad: cubic-bezier(.25, .46, .45, .94);
			--ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
			--ease-out-quart: cubic-bezier(.165, .84, .44, 1);
			--ease-out-quint: cubic-bezier(.23, 1, .32, 1);
			--ease-out-expo: cubic-bezier(.19, 1, .22, 1);
			--ease-out-circ: cubic-bezier(.075, .82, .165, 1);
			--ease-in-out-quad: cubic-bezier(.455, .03, .515, .955);
			--ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);
			--ease-in-out-quart: cubic-bezier(.77, 0, .175, 1);
			--ease-in-out-quint: cubic-bezier(.86, 0, .07, 1);
			--ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
			--ease-in-out-circ: cubic-bezier(.785, .135, .15, .86);
			--ease-out-back: cubic-bezier(.34, 1.85, .64, 1);
		}
	}
}

/* --- Mobile Optimization Overrides --- */

.logo-container {
	text-align: center;
	margin-bottom: 30px;
}

.welcome-logo {
	max-width: 400px;
	width: 90%;
	height: auto;
}

#welcome .welcome-text-top {
	margin-bottom: 1px;
}

#welcome .welcome-text-bottom {
	margin-top: -30px;
}

/* #beforeyougo section optimization */
.byg-logo {
	grid-column: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: url('../img/examples/logo_gs.png') no-repeat center;
	background-size: contain;
	min-height: 150px;
}

.byg-list {
	overflow-wrap: break-word;
}

@media (max-width: 930px) {
	#welcome p {
		font-size: 2.5em !important;
	}

	#welcome .welcome-text-bottom {
		margin-top: -10px;
	}

	.welcome-logo {
		max-width: 300px;
	}

	#beforeyougo .card {
		display: flex !important;
		flex-direction: column;
		gap: 2rem;
	}

	.byg-logo {
		min-height: 100px;
		margin-bottom: 1rem;
		background-size: contain;
	}

	.byg-list ul {
		padding-left: 15px !important;
	}
}

/* #features section optimization */
.mobile-feature-img {
	display: none;
	width: 100%;
	max-width: 500px;
	height: auto;
	margin: 1.5rem auto;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

@media (max-width: 930px) {
	.mobile-feature-img {
		display: block;
	}

	#features .feature-text {
		padding: 1rem 0;
		min-height: auto !important;
		/* Override 100vh */
	}

	#features .feature-text h3 {
		font-size: 1.5rem;
		font-weight: 700;
		margin-top: 1rem;
	}

	#video {
		display: none !important;
	}
}