/* 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 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: 50;
						--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: 30; } 100% { --ring-radius: 10; } }

				}
				

			}
		}
	}
	
	@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 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 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);
				}
			}
		}
	}
}

@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;
		}
	}
	



	
	section {
		/* Make sections fullheight */

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

}