/* aveiro.ca -- static landing page.
   Background #222 is the colour the WordPress site used: Twenty Seventeen's
   dark scheme, body.colors-dark in assets/css/colors-dark.css.
   Brand colours are sampled from the logo itself: #3A62AE is 64% of its
   opaque pixels, #F57B20 the other 36%. */

:root {
	--ink: #222;
	--blue: #3A62AE;
	--orange: #F57B20;

	color-scheme: dark;
}

* {
	box-sizing: border-box;
}

html,
body {
	height: 100%;
}

body {
	margin: 0;
	background: var(--ink);
	font-family: "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont,
		"Helvetica Neue", Arial, sans-serif;
	/* The button flees to the edges; nothing here should ever scroll. */
	overflow: hidden;
}

/* Centred both ways, and min-height rather than height so the logo is never
   clipped on a short viewport -- a phone in landscape, or a desktop window
   dragged down to a strip. */
main {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100%;
	padding: 6vmin;
}

/* Scales with the viewport between a floor and a ceiling, so it neither looks
   lost on a wide monitor nor gets cramped on a phone. The source image is
   1390x526, comfortably above the 640px ceiling, so it stays sharp on a HiDPI
   screen. width/height are on the <img> as well, so the box is reserved before
   the PNG arrives and the logo does not jump into place. */
img {
	width: clamp(240px, 42vw, 640px);
	height: auto;
	/* It is the one thing on the page the pointer should never disturb. */
	user-select: none;
	-webkit-user-drag: none;
}

/* --- the button that does not want to be pressed ------------------------- */

/* Fixed and driven entirely by transform, so moving it never reflows the page.
   Hidden until script.js has placed it, otherwise it flashes at 0,0 first. */
.login {
	position: fixed;
	left: 0;
	top: 0;
	visibility: hidden;
	padding: 0.7em 1.6em;
	border: 0;
	border-radius: 999px;
	background: var(--orange);
	color: var(--ink);
	font: inherit;
	font-size: clamp(0.9rem, 1.6vw, 1.05rem);
	font-weight: 600;
	letter-spacing: 0.01em;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
	/* No transition at all. Position is driven frame by frame by the spring in
	   script.js, and a transition on transform would fight it and smear every
	   bounce into mush. The colour never changes, so nothing else needs one. */
	will-change: transform;
	/* Touches on it are ours to handle -- no scroll, no tap highlight. */
	touch-action: none;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}

.login.is-ready {
	visibility: visible;
}

/* Honour the setting: it still evades, it just teleports instead of flying.
   script.js checks the same query and skips the spring entirely. */
@media (prefers-reduced-motion: reduce) {
	.login {
		will-change: auto;
	}
}