/* =========== © 2025 Centroarts.com - https://aipoint.space =========== */

html { scroll-padding-top: var(--h-height); }

/* -- Header -- */
:root { --h-height: 64px; }
.ai-header {
	position: sticky; top: 0; z-index: 101;
	height: var(--h-height); display: flex; align-items: center;
	background-color: hsl(var(--c-header));
	padding: 0 16px;
}
.ai-header { flex: 1 1 auto; }

@media (min-width: 576px) {
	:root { --h-height: 72px; }

	.ai-header { padding: 0 32px; }
}

/* Logo */
.ai-logo { cursor: pointer; display: inline-flex; align-items: center; position: relative; height: var(--h-height); z-index: 1; }
.ai-logo svg { fill: currentColor; width: 120px; height: 26px; }

.header-btns > .btn { margin-left: 8px; }

@media (max-width: 575px) {
	.ai-logo { margin-right: auto; }
}
@media (min-width: 576px) {
	.ai-logo svg { width: 144px; height: 32px; }

	.header-btns { display: flex; margin-left: auto; }
	.header-btns .btn-tonal:not(:hover)::after { opacity: 0; }
	.header-btns .btn-primary { display: block !important; }
}

/* Section Hero */
.sect-hero { position: relative; z-index: 1; --p-sect: var(--g-sect); }
.hero-img { position: relative; z-index: 1; }
.hero-devices {
	display: flex; margin: 0 auto;
	width: 100%; max-width: 1376px; min-height: 390px; height: auto;
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: 100% 0;
	background-image: url("../images/hero/hero-light-lg.webp");
}
html.dark .hero-devices {
	background-image: url("../images/hero/hero-dark-lg.webp");
}
.hero-devices::before { content: ""; width: 1px; margin-left: -1px; padding-top: 45%; }

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    .hero-devices { background-image: url("../images/hero/hero-light-lg-2x.webp"); }
	html.dark .hero-devices { background-image: url("../images/hero/hero-dark-lg-2x.webp"); }
}
@media (max-width: 767px) {
	.hero-devices::before { padding-top: 51.4%; }
	.hero-devices { background-image: url("../images/hero/hero-light-md.webp"); }
	html.dark .hero-devices { background-image: url("../images/hero/hero-dark-md.webp"); }
}
@media (max-width: 767px) and (-webkit-min-device-pixel-ratio: 1.5), (max-width: 767px) and (min-resolution: 1.5dppx), (max-width: 767px) and (min-resolution: 144dpi) {
    .hero-devices { background-image: url("../images/hero/hero-light-md-2x.webp"); }
	html.dark .hero-devices { background-image: url("../images/hero/hero-dark-md-2x.webp"); }
}
@media (max-width: 479px) {
	.hero-devices { background-image: url("../images/hero/hero-light-sm.webp"); }
	html.dark .hero-devices { background-image: url("../images/hero/hero-dark-sm.webp"); }
}
@media (max-width: 479px) and (-webkit-min-device-pixel-ratio: 1.5), (max-width: 479px) and (min-resolution: 1.5dppx), (max-width: 479px) and (min-resolution: 144dpi) {
    .hero-devices { background-image: url("../images/hero/hero-light-sm-2x.webp"); }
	html.dark .hero-devices { background-image: url("../images/hero/hero-dark-sm-2x.webp"); }
}

.hero-stars { position: absolute; inset: 0; top: -24px; overflow: hidden; pointer-events: none; }
.hero-stars .im { --ic-url: url("../images/star.svg"); }
.hero-star {
	position: absolute; z-index: 1; left: 50%; bottom: 0; width: 30vw; min-width: 274px; max-width: 500px;
	aspect-ratio: 1/1; height: auto; transform: translate(-120%, 24%);
}

.hero-star::before {
	height: 100%; width: 100%;
	background-color: hsla(var(--c-primary), .5);
	backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
	transform: rotate(180deg); opacity: 0; transition: transform 1.5s ease, opacity 1s ease;
}
.sect.active + .hero-img .hero-star::before { transform: rotate(0deg); opacity: 1; }

.hero-star-circle {
	position: absolute; z-index: -1; left: 50%; top: 0; width: 200px;
	display: flex; align-items: center; justify-content: center;
	aspect-ratio: 1/1; height: auto; transform: translate(30%, 0);
	border-radius: 50%; background-image: var(--gradient-v);
	transition: opacity 1s ease; opacity: 0;
}
.hero-star-circle::before {
	width: 54%; height: 54%;
	background-color: hsla(var(--c-text-light), .5);
	transform: rotate(180deg); opacity: 0;
	transition: transform 1.5s ease .2s, opacity 1.5s ease .2s;
}
.sect.active + .hero-img .hero-star-circle { opacity: 1; }
.sect.active + .hero-img .hero-star-circle::before { transform: rotate(0deg); opacity: 1; }

@media (min-width: 460px) {
	.hero-star-circle { transform: translate(50%, 0); }
	.hero-star { transform: translate(-162%, 24%); }
}
@media (min-width: 768px) {
	.hero-star-circle { width: 300px; transform: translate(65%, 0); }
}

.hero-img-bg {
	position: absolute; z-index: -1; inset: 0; user-select: none; pointer-events: none; overflow: hidden;
}
.hero-img-bg::after, .hero-img-bg::before {
	content: ""; position: absolute; bottom: 0; left: 50%; aspect-ratio: 1/1; border-radius: 50%;
}
.hero-img-bg::after { width: 1200px; transform: translate(-100%, 30%); background-image: radial-gradient(closest-side, hsla(250,10%,11%, 0.2) 0%, hsla(250,10%,11%, 0) 100%); }
.hero-img-bg::before { width: 1200px; transform: translate(-10%, 40%); background-image: radial-gradient(closest-side, hsla(0,0%,100%, 0.2) 0%, hsla(0,0%,100%, 0) 100%); }