/*

	Landing page: the home page, locked behind a banner that fills the screen (the island, with the 3D logo in
	front) until the X has been spun (banner.js). On unlocking, the banner shrinks to an ordinary banner's height:
	the nav bar and the rest of the page slide up from the bottom, the island slides up so its middle ends up in
	the middle of the banner, and the logo rides up into the banner, still 3D.
	banner.js runs the opening, through --open (0 locked, 1 open), rather than a CSS transition: it keeps it to the
	same 60 frames a second as the logo's tilt, where a CSS transition would redraw all of the 3D logo's layers at
	the screen's full refresh rate.
	The logo and its 3D depth are the banner's own (layout.css); this only reshapes the banner around them, so load
	it after layout.css.

*/
.landing {
	/* As in the streaming background LARYxLARY Bg SMALL: 814px wide on a 1920x1080 screen, centred. The logo's
	   depths (layout.css) follow its width */
	--logo-width: min(42.4vw, 75.4vh);
	--open: 0;
	height: calc(100vh + (var(--banner-height) - 100vh) * var(--open));
	height: calc(100dvh + (var(--banner-height) - 100dvh) * var(--open)); /* phones: not counting the browser's bars */
	background-color: #2f86da; /* the sky, until the picture loads */
	touch-action: none; /* a finger dragging spins the X (banner.js), rather than scrolling or zooming */
	user-select: none;
}

.landing.unlocked {
	touch-action: auto;
}

/* Unlocked before on this visit (banner.js notes it; base.html adds the class before the page is drawn): it opens
   as it was left, without spinning the X again or a frame of it locked first */
html.landingOpen .landing {
	--open: 1;
	touch-action: auto;
}

/* Coming back to it, with the logo already in the browser's cache (base.html), the island waits for the logo too:
   it takes the cache a few frames to hand the logo over, and with nothing on screen to draw yet, Chrome holds on to
   the page you came from until it has, rather than flashing the island alone. (On a first visit the island shows as
   soon as it loads, and the logo when all of it has) */
html.js.logoCached:not(.landingOpen) .landing:not(.depthReady) {
	visibility: hidden;
}

/* Nothing to scroll to until it's unlocked (only with JavaScript, which does the unlocking: without it, the page
   is there to scroll down to under the banner) */
html.js:not(.landingOpen):has(.landing:not(.unlocked)) {
	overflow: hidden;
}

/* Stays the size of the screen while the banner shrinks round it, sliding up so its middle ends up in the
   banner's */
.landingBg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	object-fit: cover;
	object-position: 50% 75%; /* when the screen is wider than the picture, keep the island in */
	translate: 0 calc((var(--banner-height) / 2 - 50vh) * var(--open));
	translate: 0 calc((var(--banner-height) / 2 - 50dvh) * var(--open));
}

/* The heading holding the logo fills the banner, so the logo stays in its middle (following it up as it
   shrinks), as does the vanishing point of its 3D tilt */
.landingTitle {
	position: absolute;
	inset: 0;
	margin: 0;
	perspective: calc(var(--logo-width) * 1.4);
}

/* Unlocking (banner.js): the characters start dim and light up one by one as the X turns */
.landing .bannerGlyph {
	transition: filter 0.6s ease-out;
}

html:not(.landingOpen) .landing:not(.unlocked) .bannerGlyph:not(.lit) {
	filter: brightness(0.4) saturate(0.6);
}

.landing .bannerGlyph.lit {
	filter: brightness(1.3) drop-shadow(0 0 calc(var(--logo-width) * 0.006) #ffd75a);
}

/* The glow is only for unlocking: once the banner has finished moving up (banner.js adds "opened"), they fade
   back to the plain gold of every other page (which also leaves no filters for the graphics card to redraw) */
.landing.opened .bannerGlyph {
	filter: none;
}