/* Ported from reference/hero.html. Shared colours/fonts live in tokens.css,
   universal reset in base.css. Home-only tokens (intro timings, photo
   grading, title treatment) are added here. The mock-up's --blood (#d10a1e)
   is identical to tokens.css's --ep, so CTA/title-adjacent reds below use
   var(--ep) instead of a second hard-coded copy of the same value — no
   value changes, just one fewer duplicate. --blood-deep has no shared
   equivalent and stays local to Home. */

:root {
	--blood-deep: #7a0010;
	--title-red: #c8202c;     /* title colour */
	--title-opacity: .5;      /* lower = more photo shows through */
	--title-blend: difference;

	--photo-contrast: 1.32;   /* the "less flat" dial */
	--photo-brightness: .82;
	--photo-saturate: .85;

	/* load sequence timings (ms) — also read by hero.js */
	--t-logo-flicker: 1000;   /* logo flicker length */
	--t-logo-out: 1150;       /* logo glitches out (gone ~0.3s later) */
	--t-title: 1500;          /* title flickers in once the logo has gone */
	--t-photo: 1950;          /* photo textures in */
	--t-header: 2700;
	--t-ui: 3500;

	/* chromatic split used by logo, button and title glitches */
	--split-c: rgba(0, 255, 255, .7);
	--split-r: rgba(255, 0, 60, .85);

	--ease-slow: cubic-bezier(.65, 0, .35, 1);
}

/* Home is a fixed, non-scrolling 100vh screen — just the hero, no black
   space below it. (Events/Contact scroll normally; this is Home-only.)
   .hero is pinned with position:fixed + inset:0 rather than height:100svh
   in normal flow, so it's immune to anything else adding document height
   (the logged-in WP admin bar's margin-top, a stray flow element, etc.) —
   overflow:hidden on html/body is kept as a second line of defence. */
html, body { height: 100%; overflow: hidden; }
body { background: var(--black); }

/* ============ HERO ============ */
.hero {
	position: fixed;
	inset: 0;
	overflow: hidden;
	background: var(--black);
}

.photo-wrap {
	position: absolute; inset: -6% 0;   /* extra height for parallax travel */
	opacity: 0;
	will-change: transform, opacity;
}
.s-photo .photo-wrap { opacity: 1; }   /* the reveal itself is done with grunge masks in JS */

.photo {
	position: absolute; inset: 0;
	background-size: cover;
	background-position: center center;
	filter: contrast(var(--photo-contrast)) brightness(var(--photo-brightness)) saturate(var(--photo-saturate));
}

/* Band photo: one composition per screen shape */
.photo { background-image: url("../img/hero/hb-hero-desktop.webp"); }   /* desktop + landscape tablets */
@media (orientation: portrait) and (min-width: 641px) {
	.photo { background-image: url("../img/hero/hb-hero-tablet.webp"); }  /* portrait tablets */
}
@media (orientation: portrait) and (max-width: 640px) {
	.photo { background-image: url("../img/hero/hb-hero-mobile.webp"); }  /* phones */
}

/* Shading: deep vignette + crushed edges = the contrast boost */
.shade {
	position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(120% 85% at 50% 42%, transparent 35%, rgba(5,4,5,.55) 70%, rgba(5,4,5,.95) 100%),
		linear-gradient(to bottom, rgba(5,4,5,.85) 0%, transparent 22%, transparent 62%, var(--black) 100%);
}

/* ============ INTRO LOGO (flicker) ============ */
.intro {
	position: fixed; inset: 0; z-index: 30;
	display: grid; place-items: center;
	pointer-events: none;
}
.intro img {
	width: min(68vw, 680px); height: auto;
	opacity: 0;
	filter: drop-shadow(0 0 0 rgba(255,255,255,0));
}
.s-flicker .intro img { animation: flicker calc(var(--t-logo-flicker) * 1ms) steps(1, end) forwards; }
.s-logo-out .intro { animation: logoOut .32s steps(1, end) forwards; }

@keyframes logoOut {
	0%   { opacity: 1; transform: none; }
	20%  { opacity: .3; transform: translateX(-10px); clip-path: inset(30% 0 35% 0); }
	40%  { opacity: 1;  transform: translateX(8px);   clip-path: inset(0 0 55% 0); }
	60%  { opacity: .5; transform: translateX(-4px);  clip-path: inset(55% 0 0 0); }
	80%  { opacity: 0; }
	100% { opacity: 0; visibility: hidden; }
}

/* glitch glow: two hard colour-offset copies + a soft white bloom */
@keyframes flicker {
	0%   { opacity: 0; }
	4%   { opacity: .8; transform: translateX(2px);
	       filter: drop-shadow(4px 0 0 var(--split-c)) drop-shadow(-4px 0 0 var(--split-r)) drop-shadow(0 0 24px rgba(255,255,255,.4)); }
	8%   { opacity: 0; }
	16%  { opacity: 1; transform: translateX(-3px);
	       filter: drop-shadow(-5px 0 0 var(--split-c)) drop-shadow(5px 0 0 var(--split-r)) drop-shadow(0 0 30px rgba(255,255,255,.5)); }
	20%  { opacity: .15; transform: none; }
	26%  { opacity: .95; transform: translateX(1px);
	       filter: drop-shadow(3px 0 0 var(--split-c)) drop-shadow(-3px 0 0 var(--split-r)) drop-shadow(0 0 20px rgba(255,255,255,.35)); }
	31%  { opacity: .05; }
	37%  { opacity: 1; transform: none;
	       filter: drop-shadow(-2px 0 0 var(--split-c)) drop-shadow(2px 0 0 var(--split-r)) drop-shadow(0 0 22px rgba(255,255,255,.35)); }
	55%  { opacity: .35; transform: translateX(-2px); }
	59%  { opacity: 1; transform: none;
	       filter: drop-shadow(2px 0 0 var(--split-c)) drop-shadow(-2px 0 0 var(--split-r)) drop-shadow(0 0 16px rgba(255,255,255,.25)); }
	100% { opacity: 1; transform: none;
	       filter: drop-shadow(1px 0 0 var(--split-c)) drop-shadow(-1px 0 0 var(--split-r)) drop-shadow(0 0 14px rgba(255,255,255,.2)); }
}

/* ============ HEADER ============ */
.site-header {
	position: absolute; top: 0; left: 0; right: 0; z-index: 20;
	display: flex; justify-content: center;
	padding: clamp(14px, 2.4vw, 28px) 16px 0;
	opacity: 0; transform: translateY(-10px);
	transition: opacity 1.4s var(--ease-out), transform 1.4s var(--ease-out);
}
.s-header .site-header { opacity: 1; transform: none; }
.site-header img {
	width: clamp(150px, 16vw, 240px); height: auto; display: block;
	filter: drop-shadow(0 2px 12px rgba(0,0,0,.6));
}

/* ============ TITLE ============ */
.title-wrap {
	position: absolute; inset: 0;      /* no z-index: keeps blend mode able to see the photo */
	display: grid; place-items: center;
	padding: 0 16px;
	pointer-events: none;
}
.title {
	grid-area: 1 / 1;
	font-family: "Saira Stencil One", Impact, sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	text-align: center;
	line-height: .8;
	font-size: clamp(4.2rem, 17.5vw, 19rem);
	margin-top: -4vh;
	color: var(--title-red);
	mix-blend-mode: var(--title-blend); /* difference: red over darks, inverts over highlights */
	filter: url(#distress);
	letter-spacing: .01em;
	-webkit-mask-repeat: repeat; mask-repeat: repeat;
	-webkit-mask-size: 115% auto; mask-size: 115% auto;
	-webkit-mask-composite: source-in; mask-composite: intersect;   /* both textures cut */
	opacity: 0;
	--o: var(--title-opacity);         /* resting opacity */
	will-change: opacity, transform;
}
.s-title .title { animation: titleFlicker .5s steps(1, end) forwards; }

/* short, hard flicker; grunge is already animating underneath */
@keyframes titleFlicker {
	0%   { opacity: 0; }
	10%  { opacity: var(--o); transform: translateX(-3px); }
	18%  { opacity: 0; }
	30%  { opacity: var(--o); transform: translateX(2px); }
	38%  { opacity: calc(var(--o) * .25); transform: none; }
	52%  { opacity: var(--o); }
	66%  { opacity: calc(var(--o) * .5); }
	74%  { opacity: var(--o); }
	100% { opacity: var(--o); transform: none; }
}

/* ============ UI: CTA + NAV ============ */
.cta {
	position: absolute; z-index: 45;   /* sits above the grunge overlay */
	left: 50%; bottom: clamp(96px, 15vh, 140px);
	transform: translate(-50%, 12px);
	opacity: 0;
	transition: opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out);
}
.s-ui .cta { opacity: 1; transform: translate(-50%, 0); }
.btn {
	position: relative; display: inline-block;
	padding: 16px 28px;
	font-size: clamp(14px, 1.2vw, 17px);
	letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
	transition: filter .4s, transform .3s var(--ease-out);
}
/* distressed background block: ragged-edged mask built from the scans */
.btn::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background: var(--blood-deep);
	-webkit-mask: url("../grunge/button/hb-btn-mask.webp") center / 100% 100% no-repeat;
	        mask: url("../grunge/button/hb-btn-mask.webp") center / 100% 100% no-repeat;
	transition: background .3s;
}
.btn .txt { position: relative; z-index: 1; }
.btn:hover, .btn:focus-visible {
	filter: drop-shadow(0 0 16px rgba(209,10,30,.5));   /* glow follows the ragged shape */
	transform: translateY(-2px);
	outline: none;
}
.btn:hover::before, .btn:focus-visible::before { background: var(--ep); }

.nav, .nav--legal {
	position: absolute; z-index: 20;
	bottom: clamp(16px, 3vh, 30px);
	display: flex; gap: clamp(18px, 2.4vw, 36px);
	list-style: none;
	opacity: 0;
	transition: opacity 1.2s var(--ease-out) .25s;
}
.nav { left: clamp(16px, 2.2vw, 32px); }
.nav--legal { left: auto; right: clamp(16px, 2.2vw, 32px); }
.s-ui .nav, .s-ui .nav--legal { opacity: 1; }
.nav a, .nav--legal a {
	position: relative;
	font-size: clamp(14px, 1.3vw, 19px); font-weight: 500;
	text-transform: uppercase; letter-spacing: .04em;
}
.nav a::after, .nav--legal a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
	background: var(--ep);
	transform: scaleX(0); transform-origin: left;
	transition: transform .35s var(--ease-out);
}
.nav a:hover::after, .nav a:focus-visible::after,
.nav--legal a:hover::after, .nav--legal a:focus-visible::after { transform: scaleX(1); }

/* skip hint */
.skip {
	position: fixed; right: 16px; bottom: 16px; z-index: 35;
	font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
	color: rgba(233,227,214,.35);
	background: none; border: 0; font-family: inherit; cursor: pointer;
	transition: opacity .6s;
}
.s-ui .skip { opacity: 0; pointer-events: none; }

@media (orientation: portrait) {
	.photo { background-position: center bottom; }   /* band stays put; shorter screens trim the top */
}

/* desktop/tablet: "State of" / "Decay"; mobile: three lines, bigger */
.title .w { white-space: nowrap; }
@media (max-width: 640px) {
	.title { margin-top: -6vh; font-size: 27vw; line-height: .84; }
	.title .w { display: block; }
	.title .br-desk { display: none; }
	.cta { bottom: 92px; }
}

/* narrow phones: keep the Main and Legal navs from crowding the corners */
@media (max-width: 360px) {
	.nav, .nav--legal { gap: 14px; }
	.nav a, .nav--legal a { font-size: 13px; }
}