/* ===========================================================================
   Home page — the opening sequence.

   Order of events:
     1. #intro-flash covers the screen and flicks through the project photos
     2. it fades out, and the banner opens like a curtain from the middle
     3. the logo monogram grows with the curtain, then flies up into the
        permanent corner logo and hands off to it
     4. the title image rises in, the underline draws itself, and finally
        the subtitle appears

   Timings are in home.json's "layout" block; the per-photo pace of step 1 and
   the monogram's flight path are in site/_code/js/intro-sequence.js.
   =========================================================================== */

/* ── 1. The photo flash ────────────────────────────────────────────────── */

#intro-flash {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 9999;
	background: #000;
	overflow: hidden;
}
#intro-flash img {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
}
#intro-flash img.show { opacity: 1; }
#intro-flash.done {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s ease !important;
}

/* ── 2. The curtain ───────────────────────────────────────────────────── */

#banner {
	background-color: var(--page-background, #242943) !important;
	clip-path: inset(0 50% 0 50%);
	transition: clip-path var(--curtain-duration, 1.3s) cubic-bezier(0.19, 1, 0.22, 1) !important;
}
#banner.is-revealed { clip-path: inset(0 0 0 0); }

/* Return visit in the same tab (site/_code/js/intro-sequence.js): every
   transition below is switched off so .is-revealed applies instantly --
   the finished banner just appears, with no curtain, monogram, letters or
   subtitle animation to sit through again. (intro-sequence.js also sets the
   corner logo's own transition to 'none' inline for this same instant path,
   since .corner-logo lives outside #banner and isn't reached by this rule.) */
#banner.no-anim,
#banner.no-anim .banner-monogram,
#banner.no-anim .banner-monogram.is-landed,
#banner.no-anim #banner-title,
#banner.no-anim > .inner > header.major > :first-child:after,
#banner.no-anim .content {
	transition: none !important;
}

/* The template's dark scrim over the banner photo — not wanted here. */
#banner:after { display: none !important; }

/* The template fades and slides .inner in on load, which would fight the
   curtain, so it is pinned open and the pieces inside animate instead. */
#banner > .inner {
	filter: none !important;
	transform: none !important;
	opacity: 1 !important;
}

/* ── 3. The monogram ──────────────────────────────────────────────────── */

/* Grows with the curtain, then flies up into the permanent corner logo
   (.corner-logo, in site/_code/css/header-menu.css) and vanishes right as it
   lands there, leaving the corner logo -- already sitting in that exact
   spot, invisible -- to carry on alone. --fly-x/--fly-y/--fly-scale are set
   inline by site/_code/js/intro-sequence.js, which measures both elements'
   real on-screen positions rather than assuming any fixed banner height.

   The background-image/size/position below are the same crop of
   images/logo.svg as .corner-logo-mark (header-menu.css has the box-crop
   math) -- written out again here because the two live at different sizes,
   but since the crop is expressed in percent it needs no change between
   them. */
#banner .banner-monogram {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 3;
	width: min(260px, 55vw);
	aspect-ratio: 368 / 204;
	background-image: url('../../../images/logo.svg');
	background-repeat: no-repeat;
	background-size: 521.739% 529.412%;
	background-position: 5.284% 28.653%;
	filter: drop-shadow(0 2px 18px rgba(0,0,0,0.5));
	pointer-events: none;
	opacity: 1;
	transform: translate(-50%, -50%);
	transition: transform var(--curtain-duration, 1.3s) cubic-bezier(0.19, 1, 0.22, 1) !important;
}
#banner.is-revealed .banner-monogram {
	transform: translate(calc(-50% + var(--fly-x, 0px)), calc(-50% + var(--fly-y, 0px)))
	           scale(var(--fly-scale, 0.28));
}
/* Added by intro-sequence.js once the flight above finishes (its
   transitionend), at the same moment .corner-logo.is-visible fades that real
   logo in underneath -- a quick crossfade instead of an instant swap. */
#banner .banner-monogram.is-landed {
	transition: opacity 0.25s ease !important;
	opacity: 0;
}

/* ── 4. Title, underline, subtitle ────────────────────────────────────── */

/* The title is images/lletres.svg (.banner-title-mark, cropped the same way
   as the corner logo -- see header-menu.css for the box-crop formula), so it
   fades and rises in as one piece instead of letter by letter. */
#banner-title {
	opacity: 0;
	transform: translateY(0.4em);
	transition: opacity 0.5s ease, transform 0.5s ease !important;
	transition-delay: var(--letters-delay, 1.05s) !important;
}
#banner.is-revealed #banner-title {
	opacity: 1;
	transform: translateY(0);
}

.banner-title-mark {
	display: block;
	width: min(443px, 70vw);
	aspect-ratio: 1280 / 202;
	background-image: url('../../../images/lletres.svg');
	background-repeat: no-repeat;
	background-size: 150% 534.653%;
	background-position: 12.656% 55.581%;
}
@media screen and (max-width: 736px) {
	.banner-title-mark { width: min(300px, 80vw); }
}

/* The white underline draws in together with the letters, instead of sitting
   there already cut open by the curtain. */
#banner > .inner > header.major > :first-child:after {
	opacity: 0;
	transform: scaleX(0);
	transform-origin: left;
	transition: opacity 0.5s ease, transform 0.9s ease !important;
	transition-delay: var(--letters-delay, 1.05s) !important;
}
#banner.is-revealed > .inner > header.major > :first-child:after {
	opacity: 1;
	transform: scaleX(1);
}

#banner .content {
	opacity: 0;
	transition: opacity 0.6s ease var(--subtitle-delay, 1.65s) !important;
}
#banner.is-revealed .content { opacity: 1; }

/* The subtitle is a plain sans-serif line, with no underline of its own. */
#banner header.major h2 {
	font-family: 'Source Sans Pro', Helvetica, sans-serif;
	font-size: 1.4em;
	font-weight: 300;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
#banner .content header.major > :first-child:after { display: none; }

/* ── 5. Handing off to the permanent corner logo ──────────────────────── */

/* .corner-logo (header-menu.css) is visible immediately on every other page.
   Only here -- "isHome" in home.json, via build.ps1's $Switches -- does it
   start invisible, so the real logo doesn't just appear in its corner before
   the flying monogram above has had a chance to land on it. is-visible is
   added by intro-sequence.js right as that landing happens. */
.corner-logo.is-home {
	opacity: 0;
}
.corner-logo.is-home.is-visible {
	opacity: 1;
}