/* loopware.com's front page, in the style of loopware.com/agentpad (the AgentPad repo's
   web/agentpad/agentpad.css): same type, colours, buttons and footer, in a narrower column, under a night-sky header of its own. */

body, h1, h2, p {
	margin: 0;
	padding: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
	color: #777777;
	-webkit-font-smoothing: subpixel-antialiased;
}

body { background: #FFFFFF; }
p { font-size: 15px; line-height: 1.4; }
a { color: #318DFF; }

.column {
	box-sizing: border-box;
	max-width: 600px;
	margin: 0 auto;
	padding: 0px 20px;
}

/* ── Header ───────────────────────────────────────────────────────────── */

#nav-and-header-container {
	position: relative;
	isolation: isolate;
	overflow: hidden;   /* the hills run past both edges */
	/* A clear night: deep blue-gray overhead, lifting toward the horizon. */
	background-image: linear-gradient(to bottom, #121A27, #1C2A3D 45%, #34495F);
	padding-bottom: 190px;   /* the hills, and the AgentPad card tucking up into them */
}

/* The star trails (js/startrails.js), fading out toward the edges. */
.header-sky {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
	pointer-events: none;
	-webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 35%, black 40%, transparent 100%);
	mask-image: radial-gradient(ellipse 80% 90% at 50% 35%, black 40%, transparent 100%);
}

.header-sky canvas { display: block; width: 100%; height: 100%; }

/* The hills at their own proportions (1 unit = 1px), centred and
   2200px wide so they reach past the edges of any screen; the banner crops what's beyond. */
.ridges { position: absolute; left: 50%; bottom: 0; z-index: -1; width: 2200px; height: 160px; transform: translateX(-50%); }

/* Each peak's edges, a hairline at any size, breathing with the logo's glow. */
.ridges .edge { fill: none; stroke: url(#edge-fade); stroke-width: 1px; vector-effect: non-scaling-stroke; animation: rimglow 6s ease-in-out infinite; }

/* Snow on the back row's tallest peaks, faint, its two sides close in tone so each cap reads as one. */
.ridges .snow { opacity: var(--snow-opacity, 0.55); }   /* js/hills.js picks it per load */
.ridges .snow.lit { fill: #7A8CA3; }
.ridges .snow.shade { fill: #64758B; }

@keyframes rimglow { 50% { stroke-opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) { .ridges .edge { animation: none; } }

#topNav {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	height: 50px;
	margin: 0px 20px;
}

#topNav a { color: rgba(255, 255, 255, 0.8); text-decoration: none; font-size: 15px; }

/* 40px more above and (in the container's padding) below than before, to keep the name centred in
   the sky as the banner grew. */
header { padding-top: calc(7vh + 40px); text-align: center; }

/* The infinity logo, glowing like the moon. The glow goes on .moon: a filter on the masked
   .loop itself would be masked away with everything else outside the logo's shape. */
header .moon {
	display: block;
	width: fit-content;
	margin: 0px auto 18px auto;
	filter:
		drop-shadow(0px 0px 2px rgba(255, 255, 255, 0.9))
		drop-shadow(0px 0px 10px rgba(225, 235, 255, 0.6))
		drop-shadow(0px 0px 28px rgba(190, 210, 255, 0.45));
	animation: moonglow 6s ease-in-out infinite;
}

@keyframes moonglow { 50% { opacity: 0.86; } }
@media (prefers-reduced-motion: reduce) { header .moon { animation: none; } }

header .loop {
	display: block;
	width: 72px;
	height: 40px;   /* the SVG's 64×36, scaled */
	background-color: #F7F9FF;
	-webkit-mask: url("../img/Loopware.svg") center / contain no-repeat;
	mask: url("../img/Loopware.svg") center / contain no-repeat;
}

header h1 { font-size: 30px; font-weight: 600; letter-spacing: 0.03em; color: rgba(255, 255, 255, 0.78); }
header p { margin-top: 1px; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.5); }

/* ── AgentPad card ────────────────────────────────────────────────────── */

.featured {
	position: relative;   /* over the header it tucks up into */
	margin-top: -40px;   /* its top 40pt above the banner's bottom edge */
	padding: 28px 28px 36px 28px;
	border-radius: 14px;
	border: 0.5px solid rgba(0, 0, 0, 0.15);
	background: linear-gradient(to bottom, #FFFFFF 60%, #F5F5FA);
	box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 20px;
	overflow: hidden;
	text-align: center;
}

.featured .app-icon { display: block; width: 77px; height: 77px; margin: 0px auto 4px auto; }

.featured .wordmark { font-size: 30px; font-weight: 300; color: #646464; }
.featured .wordmark strong { font-weight: 500; color: #484848; }

/* Same size and spacing as the Loopware title and subtitle in the header. */
.featured .tagline { margin: 1px auto 0px auto; max-width: 420px; font-size: 14px; font-weight: 500; color: rgba(72, 72, 72, 0.7); }

.featured .buttons { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 22px 0px 8px 0px; }

.button {
	display: inline-block;
	padding: 10px 22px;
	border-radius: 6px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s;
}

.button.solid {
	color: white;
	border: 1px solid #3478CD;
	background-color: #6AA2FF;
	text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.20);
}

.button.solid:hover { background-color: #5A95FA; }

.button.plain { color: #318DFF; border: 1px solid rgba(0, 0, 0, 0.12); background: white; }
.button.plain:hover { background-color: #F5F5FA; }

.featured .note { font-size: 13px; color: rgba(72, 72, 72, 0.6); }

/* The whole main window, floating in the card, 36pt above its bottom edge. Hero.png's
   own shadow is heavy, so it's trimmed off and replaced with a lighter one here: in that 1600×1018
   image the window itself runs x 61–1538 and y 41–936, so the crop takes that shape and the image is
   scaled to make those 1478px the crop's width, then shifted up and left. (Percentage margins are
   of the crop's width, as is the image's own.) The window's corners are ~18px in the image, ~6px at
   this size. */
.featured .shot-crop {
	display: block;
	width: 80%;
	aspect-ratio: 1478 / 896;
	margin: 36px auto 0px auto;
	overflow: hidden;
	border-radius: 6px;
	box-shadow: 0px 0px 0px 0.5px rgba(0, 0, 0, 0.14), 0px 4px 18px rgba(0, 0, 0, 0.10);
}

.featured .shot { display: block; width: calc(100% * 1600 / 1478); max-width: none; height: auto; margin: calc(-100% * 41 / 1478) 0px 0px calc(-100% * 61 / 1478); }


/* ── Earlier apps ─────────────────────────────────────────────────────── */

.earlier { padding: 56px 0px 64px 0px; }

/* A small, centred caps heading between two rules. */
.earlier h2 { text-align: center; text-transform: uppercase; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: rgba(72, 72, 72, 0.6); margin-bottom: 20px; }
.earlier h2::before, .earlier h2::after { content: ""; display: inline-block; width: 44px; height: 1px; margin: 0px 10px; vertical-align: middle; background: rgba(0, 0, 0, 0.15); }

.app-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.app-list a { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; text-decoration: none; transition: background-color 0.2s; }
.app-list a:hover { background: #F5F5FA; }
.app-list img { width: 48px; height: 48px; border-radius: 11px; flex-shrink: 0; }
.app-list p { margin: 0; font-size: 14px; color: rgba(72, 72, 72, 0.7); }
.app-list strong { display: block; font-size: 16px; color: #484848; }

@media (max-width: 520px) {
	header h1, .featured .wordmark { font-size: 27px; }
	.featured { padding: 24px 18px 36px 18px; }
	.app-list { grid-template-columns: 1fr; }
}

/* ── Footer ───────────────────────────────────────────────────────────── */

footer {
	padding: 48px 0px 20px 0px;
	border-top: 1px solid rgba(0, 0, 0, 0.15);
	background-image: linear-gradient(to bottom, #F0F0F5, rgba(238, 238, 245, 0));
}

footer img { display: block; width: 24px; height: 14px; margin: 0px auto 12px auto; }
footer p { text-align: center; font-size: 12px; color: rgba(72, 72, 72, 0.6); }
footer a { color: rgba(72, 72, 72, 0.6); }