@use "sass:math";
@use "sass:meta";

@use "pkg:iro-design" as iro;
@use "pkg:iro-sass/bem";
@use "pkg:iro-sass/props";

@forward "site-footer.vars";
@use "site-footer.vars" as vars;

@mixin styles {
	@include iro.props--materialize-at-root(meta.module-variables("vars"));

	@property --site-footer--l1-y {
		initial-value: 0px;
		inherits: true;
		syntax: "<length>";
	}

	@property --site-footer--cloud-y {
		initial-value: 0px;
		inherits: true;
		syntax: "<length>";
	}

	@property --site-footer--moon-y {
		initial-value: 0px;
		inherits: true;
		syntax: "<length>";
	}

	@property --site-footer--star-y {
		initial-value: 0px;
		inherits: true;
		syntax: "<length>";
	}

	@keyframes footer-l1-ani {
		from {
			--site-footer--l1-y: -300px;
			--site-footer--cloud-y: -400px;
			--site-footer--moon-y: -500px;
			--site-footer--star-y: -500px;
		}
		to {
			--site-footer--l1-y: 300px;
			--site-footer--cloud-y: 400px;
			--site-footer--moon-y: 500px;
			--site-footer--star-y: 500px;
		}
	}

	@include bem.component("site-footer") {
		position: sticky;
		inset-block-start: 100%;

		@include bem.elem("banner") {
			position: relative;
			display: flex;
			block-size: 33rem;
			justify-content: end;
			overflow: hidden;
			background: linear-gradient(
				to bottom,
				props.get(vars.$colors, --bg-from) 35%,
				props.get(vars.$colors, --bg) 85%
			);

			animation-name: footer-l1-ani;
			//animation-fill-mode: both;
			animation-duration: 1ms;
			animation-timeline: view(block 0% 0%);
			animation-timing-function: linear;
		}

		@include bem.elem("banner-img") {
			position: relative;
			z-index: 2;
			flex: 0 0 auto;
			display: block;
			block-size: 100%;
			margin-inline: auto;
			aspect-ratio: 3840 / 1600;
		}

		@include bem.elem("banner-bg") {
			position: absolute;
			inset-inline-start: 50%;
			inset-block-end: 0;
			z-index: 1;
			display: block;
			inline-size: 100%;
			block-size: 100%;
			transform: translateX(-50%);
		}

		@include bem.elem("content-wrap") {
			padding-block-end: props.get(iro.$core--size--400);
			background-color: props.get(iro.$core--transparent-colors, --black, --900);
		}

		@include bem.elem("content") {
			display: flex;
			flex-wrap: wrap;
			gap: props.get(iro.$core--size--600);
		}

		@include bem.elem("sections") {
			display: flex;
			flex-wrap: wrap;
			gap: props.get(iro.$core--size--400) props.get(iro.$core--size--800);
		}

		@include bem.elem("table") {
			display: grid;
			grid-template-columns: auto auto auto auto;
			column-gap: props.get(iro.$core--size--200);
		}

		@include bem.elem("table-row") {
			display: contents;
		}

		@include bem.elem("divider") {
			display: none;
		}

		@include bem.elem("logo") {
			margin-block: auto;
			margin-inline-start: auto;
		}

		@include iro.media--media("<=md") {
			@include bem.elem("content") {
				flex-direction: column;
				align-items: center;
			}

			@include bem.elem("divider") {
				display: flex;
				inline-size: 100%;
			}

			@include bem.elem("logo") {
				margin-inline-start: 0;
			}
		}

		@include iro.media--media("<=sm") {
			transform: translateY(calc(-1 * props.get(iro.$o-navbar--block-size)));

			@include bem.elem("banner-img") {
				transform: translateX(max(0rem, 19rem - 50vw));
			}
		}
	}
}