/* ==========================================================================
   Neon Adda — Homepage: one night at the adda, 19:00 → 03:00
   ========================================================================== */

/* Brick: an SVG tile of two staggered courses, plus grime and a vignette. */
.brick {
	background-color: #170d0c;
	background-image:
		radial-gradient(120% 90% at 50% 40%, transparent 30%, rgba(4, 3, 8, .75) 100%),
		linear-gradient(180deg, rgba(8, 6, 12, .45), rgba(8, 6, 12, .15) 40%, rgba(8, 6, 12, .6)),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Crect width='120' height='60' fill='%23140b0a'/%3E%3Crect x='1.5' y='1.5' width='57' height='27' rx='2' fill='%23361b17'/%3E%3Crect x='61.5' y='1.5' width='57' height='27' rx='2' fill='%233d1f1a'/%3E%3Crect x='-28.5' y='31.5' width='57' height='27' rx='2' fill='%23321915'/%3E%3Crect x='31.5' y='31.5' width='57' height='27' rx='2' fill='%23391d18'/%3E%3Crect x='91.5' y='31.5' width='57' height='27' rx='2' fill='%23331a16'/%3E%3C/svg%3E");
	background-size: auto, auto, 120px 60px;
}

/* ---------------------------------------------------------------- Header */
.hdr {
	position: fixed;
	inset: 0 0 auto;
	z-index: 60;
	padding: 14px var(--gutter);
	transition: background-color .5s, backdrop-filter .5s, padding .5s var(--ease-out), border-color .5s;
	border-bottom: 1px solid transparent;
}

.hdr.is-scrolled {
	padding-block: 10px;
	background: rgba(8, 7, 13, .72);
	-webkit-backdrop-filter: blur(14px) saturate(1.3);
	backdrop-filter: blur(14px) saturate(1.3);
	border-bottom-color: var(--line);
}

.hdr__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	max-width: var(--max);
	margin-inline: auto;
}

/* The header logo is the artwork exactly as supplied: no glow, no blur. */
.hdr__symbol {
	width: 36px;
	height: auto;
}

.hdr__title {
	width: 96px;
	height: auto;
}

.hdr__nav {
	display: flex;
	gap: clamp(1.2rem, 2.4vw, 2.4rem);
	font-size: .95rem;
}

.hdr__tools {
	display: flex;
	align-items: center;
	gap: .8rem;
}

.hum {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .55em .9em;
	border-radius: 999px;
	border: 1px solid var(--line-2);
	font-family: var(--f-mono);
	font-size: .7rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text-2);
}

.hum__bars {
	display: inline-flex;
	align-items: flex-end;
	gap: 2px;
	height: 12px;
}

.hum__bars i {
	width: 2px;
	height: 3px;
	border-radius: 2px;
	background: currentColor;
	transition: height .3s;
}

.hum[aria-pressed="true"] {
	color: var(--n-lime);
	border-color: color-mix(in srgb, var(--n-lime) 50%, transparent);
}

.hum[aria-pressed="true"] .hum__bars i {
	animation: eq .9s ease-in-out infinite alternate;
}

.hum[aria-pressed="true"] .hum__bars i:nth-child(2) { animation-delay: -.3s; }
.hum[aria-pressed="true"] .hum__bars i:nth-child(3) { animation-delay: -.6s; }
.hum[aria-pressed="true"] .hum__bars i:nth-child(4) { animation-delay: -.15s; }

@keyframes eq {
	from { height: 3px; }
	to { height: 12px; }
}

.bag {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .55em 1em;
	border-radius: 999px;
	background: var(--text);
	color: var(--ink-900);
	font-weight: 600;
	font-size: .86rem;
}

.bag__n {
	display: grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	border-radius: 999px;
	background: var(--ink-900);
	color: var(--text);
	font-size: .72rem;
}

.menu {
	display: none;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid var(--line-2);
}

.menu__lines,
.menu__lines::before {
	display: block;
	width: 16px;
	height: 1.5px;
	margin: 0 auto;
	background: currentColor;
	transition: transform .5s var(--ease-out);
}

.menu__lines {
	position: relative;
	transform: translateY(-3px);
}

.menu__lines::before {
	content: "";
	position: absolute;
	top: 6px;
}

.hdr.is-open .menu__lines {
	transform: translateY(0) rotate(45deg);
}

.hdr.is-open .menu__lines::before {
	transform: translateY(-6px) rotate(-90deg);
}

/* ---------------------------------------------------------------- Clock */
.clock {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	padding: .5em .9em .5em .75em;
	border-radius: 999px;
	border: 1px solid var(--line);
	font-family: var(--f-mono);
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text-2);
	pointer-events: none;
}

.clock__dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--n-red);
	box-shadow: 0 0 6px var(--n-red), 0 0 14px var(--n-red);
	animation: blink 2s steps(1) infinite;
}

@keyframes blink {
	50% { opacity: .25; }
}

.clock__time {
	color: var(--text);
	font-size: .9rem;
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- Hero */
.hero {
	position: relative;
	min-height: max(720px, 100svh);
	isolation: isolate;
}

.hero__wall {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

/* Coloured light the sign throws on the bricks. */
.hero__spill {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	mix-blend-mode: screen;
	background:
		radial-gradient(34% 38% at 62% 30%, rgba(230, 0, 126, .85), transparent 70%),
		radial-gradient(30% 36% at 85% 32%, rgba(0, 160, 227, .7), transparent 70%),
		radial-gradient(60% 65% at 72% 34%, rgba(142, 28, 126, .4), transparent 75%);
	transition: opacity 1.2s var(--ease-out);
}

[data-power="on"] .hero__spill {
	opacity: 1;
	animation: spill-catch 1.4s steps(1, end);
}

@keyframes spill-catch {
	0% { opacity: 0; }
	8% { opacity: .9; }
	12% { opacity: .1; }
	18% { opacity: 1; }
	24% { opacity: .4; }
	30%, 100% { opacity: 1; }
}

/* Desktop composition: words on the left, the wall scene (sign, switch, socket,
   plug on the floor) on the right, so the cable never crosses the copy. */
.hero__sign {
	position: absolute;
	right: max(var(--gutter), 5vw);
	top: clamp(104px, 17svh, 170px);
	width: min(640px, 46vw, calc(44svh * 2.3));
	z-index: 2;
}

.plate {
	position: relative;
	padding: 4.2% 5%;
	border-radius: 22px;
	background:
		linear-gradient(125deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .015) 38%, rgba(255, 255, 255, .04) 62%, rgba(255, 255, 255, .1)),
		rgba(255, 255, 255, .02);
	border: 1px solid rgba(255, 255, 255, .13);
	box-shadow: 0 40px 70px -40px #000, 0 0 0 1px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .18);
	-webkit-backdrop-filter: blur(1.5px);
	backdrop-filter: blur(1.5px);
}

.plate__screw {
	position: absolute;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #fbf8f2, #8e8a84 55%, #4a4743);
	box-shadow: 0 2px 3px rgba(0, 0, 0, .6);
}

.plate__screw:nth-of-type(1) { left: 14px; top: 14px; }
.plate__screw:nth-of-type(2) { right: 14px; top: 14px; }
.plate__screw:nth-of-type(3) { left: 14px; bottom: 14px; }
.plate__screw:nth-of-type(4) { right: 14px; bottom: 14px; }

.hang {
	position: relative;
}

.hero__cut {
	position: relative;
}

/* Contour-cut acrylic behind the logo: the artwork's own silhouette, grown and turned into clear sheet. */
.hero__contour {
	position: absolute;
	inset: 0;
	width: 100%;
	height: auto;
	filter: url(#acrylic-img);
	pointer-events: none;
	user-select: none;
}

.hero__logo {
	position: relative;
	width: 100%;
}

/* Where the cable leaves the sign: under the symbol, away from the socket. */
.hero__anchor {
	position: absolute;
    	right: 4%;
    	bottom: -2%;
    	width: 0px;
    	height: 3px;
}

.hero__fixtures {
	position: absolute;
	top: calc(100% + clamp(40px, 8svh, 86px));
	left: 36%;
	z-index: 2;
}

.socket {
	position: relative;
	border-radius: 7px;
	transition: box-shadow .3s;
}

.socket.is-near {
	box-shadow: 0 0 0 2px rgba(185, 255, 74, .7), 0 0 24px rgba(185, 255, 74, .45);
}

.plug {
	position: absolute;
	left: 0;
	top: 0;
	width: 72px;
	height: 44px;
	margin: -22px 0 0 -36px;
	z-index: 5;
	cursor: grab;
	touch-action: none;
	filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .7));
	will-change: transform;
}

.plug:active {
	cursor: grabbing;
}

.plug svg {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.plug__side {
	width: 72px;
	height: 44px;
}

/* Plugged in: you see the back of the plug, face-on, with the cable leaving from below. */
.plug__face {
	display: none;
	width: 50px;
	height: 62px;
}

.plug.is-plugged .plug__side {
	display: none;
}

.plug.is-plugged .plug__face {
	display: block;
}

.hero__hint {
	position: absolute;
	z-index: 4;
	color: var(--paper);
	font-size: clamp(1.4rem, 1.1rem + .8vw, 2rem);
	line-height: 1;
	transform: rotate(-6deg);
	pointer-events: none;
	transition: opacity .6s var(--ease-out);
	display: flex;
	align-items: flex-start;
	gap: 4px;
}

.hero__hint svg {
	margin-top: 10px;
	color: var(--paper);
}

[data-power="on"] .hero__hint {
	opacity: 0;
}

.hero__cable {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 4;
	pointer-events: none;
}

.hero__floor {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 30%;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 3px),
		linear-gradient(180deg, #0b090f 0%, #060509 100%);
	overflow: hidden;
}

/* The wet-floor reflection of the sign. */
.hero__reflect {
	position: absolute;
	right: max(var(--gutter), 5vw);
	top: 0;
	width: min(640px, 46vw);
	transform: scaleY(-1);
	transform-origin: center;
	opacity: 0;
	filter: blur(6px) saturate(1.8) brightness(1.3);
	-webkit-mask-image: linear-gradient(to top, #000 0%, transparent 70%);
	mask-image: linear-gradient(to top, #000 0%, transparent 70%);
	transition: opacity 1.4s var(--ease-out);
}

[data-power="on"] .hero__reflect {
	opacity: .32;
}

.hero__copy {
	position: absolute;
	left: 0;
	right: 0;
	bottom: clamp(64px, 9svh, 110px);
	z-index: 3;
	display: grid;
	gap: 1.8rem;
	justify-items: start;
	pointer-events: none;
}

.hero__copy > * {
	pointer-events: auto;
	max-width: min(640px, 46vw);
}

.hero__title {
	font-size: clamp(3.2rem, 1rem + 5.2vw, 7.4rem);
	text-shadow: 0 4px 30px rgba(0, 0, 0, .6);
}

.trust {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.4rem;
	font-size: .86rem;
	color: var(--text-2);
}

.trust li {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
}

.trust li::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--n-lime);
	box-shadow: 0 0 6px var(--n-lime);
}

.trust b {
	color: var(--text);
	font-weight: 600;
}

.hero__title em {
	color: var(--text-2);
	transition: color .6s, text-shadow .6s;
}

/* When the sign is on, the italic word catches the glow too. */
[data-power="on"] .hero__title em {
	color: #ffe3f1;
	text-shadow: 0 0 2px #fff, 0 0 10px var(--n-pink), 0 0 24px var(--n-pink), 0 0 60px rgba(255, 46, 154, .5);
}

.hero__aside {
	display: grid;
	gap: 1.6rem;
	justify-items: start;
	padding-bottom: .8rem;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .7rem;
}

/* ---------------------------------------------------------------- Sign strip */
.strip {
	position: relative;
	overflow: hidden;
	padding-block: clamp(1.4rem, 3vw, 2.4rem);
	border-block: 1px solid var(--line);
	background: var(--ink-950);
}

.strip__track {
	display: flex;
	align-items: center;
	gap: clamp(1.4rem, 3vw, 3rem);
	width: max-content;
	font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4.6rem);
	animation: strip 48s linear infinite;
}

.strip__track .tube--script {
	font-size: 1.25em;
}

.strip__track i {
	font-style: normal;
	font-size: .4em;
	color: var(--muted);
}

.strip:hover .strip__track {
	animation-play-state: paused;
}

@keyframes strip {
	to { transform: translateX(-50%); }
}

/* ---------------------------------------------------------------- 20:30 The bend */
.bend__track {
	position: relative;
	height: 520vh;
}

.bend__sticky {
	position: sticky;
	top: 0;
	height: 100svh;
	display: grid;
	grid-template-columns: minmax(300px, .8fr) 1.2fr;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
	width: min(100% - var(--gutter) * 2, var(--max));
	margin-inline: auto;
	padding-top: 70px;
}

.bend__copy {
	display: grid;
	gap: 1.8rem;
}

.bend__steps {
	display: grid;
	gap: .2rem;
	counter-reset: s;
}

.bend__steps li {
	display: grid;
	grid-template-columns: 2.6rem 1fr;
	gap: .6rem;
	padding: .8rem 0;
	border-top: 1px solid var(--line);
	opacity: .32;
	transition: opacity .5s var(--ease-out);
}

.bend__steps li.is-active {
	opacity: 1;
}

.bend__steps li.is-done {
	opacity: .6;
}

.bend__num {
	font-family: var(--f-mono);
	font-size: .78rem;
	color: var(--n-pink);
	padding-top: .3rem;
}

.bend__steps h3 {
	font-family: var(--f-display);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.1;
}

.bend__steps p {
	color: var(--text-2);
	font-size: .94rem;
	max-height: 0;
	overflow: hidden;
	transition: max-height .6s var(--ease-out), margin .6s var(--ease-out);
}

.bend__steps li.is-active p {
	max-height: 8em;
	margin-top: .3rem;
}

.bend__progress {
	height: 2px;
	background: var(--line);
	border-radius: 2px;
	overflow: hidden;
}

.bend__progress span {
	display: block;
	height: 100%;
	width: 100%;
	transform-origin: left;
	transform: scaleX(var(--p, 0));
	background: linear-gradient(90deg, var(--brand-magenta), var(--brand-cyan));
	box-shadow: 0 0 10px var(--brand-magenta);
}

.bend__stage {
	--p0: 0;
	--p1: 0;
	--p2: 0;
	--p3: 0;
	--p4: 0;
	position: relative;
	aspect-ratio: 800 / 460;
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: 0 40px 80px -40px #000;
}

.bend__cad,
.bend__bench,
.bend__brick,
.bend__spill {
	position: absolute;
	inset: 0;
}

/* 01 Design: a vector file on screen */
.bend__cad {
	background:
		linear-gradient(rgba(39, 212, 255, .07) 1px, transparent 1px) 0 0 / 20px 20px,
		linear-gradient(90deg, rgba(39, 212, 255, .07) 1px, transparent 1px) 0 0 / 20px 20px,
		linear-gradient(rgba(39, 212, 255, .12) 1px, transparent 1px) 0 0 / 100px 100px,
		linear-gradient(90deg, rgba(39, 212, 255, .12) 1px, transparent 1px) 0 0 / 100px 100px,
		#0b1220;
	opacity: calc(1 - var(--p1));
}

.bend__cadbar {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	background: rgba(255, 255, 255, .04);
	border-bottom: 1px solid rgba(39, 212, 255, .15);
	font-family: var(--f-mono);
	font-size: .66rem;
	color: rgba(220, 240, 255, .55);
}

.bend__cadbar i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .18);
}

.bend__cadbar b {
	margin-left: 10px;
	font-weight: 400;
}

/* 02–04 On the workshop bench */
.bend__bench {
	background:
		radial-gradient(80% 70% at 50% 40%, rgba(255, 255, 255, .06), transparent 70%),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .015) 0 2px, transparent 2px 7px),
		linear-gradient(170deg, #2a2b2f, #17181b);
	opacity: calc(var(--p1) * (1 - var(--p4)));
}

/* 05 On the wall, lit */
.bend__brick {
	opacity: var(--p4);
}

.bend__spill {
	background: radial-gradient(50% 45% at 50% 50%, rgba(255, 46, 154, .5), transparent 70%);
	mix-blend-mode: screen;
	opacity: var(--p4);
}

.bend__svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.bend__svg text {
	font-family: var(--f-script);
	font-size: 170px;
}

.b-cad {
	opacity: calc(1 - var(--p1) * 1.4);
}

.b-vector {
	fill: none;
	stroke: #27D4FF;
	stroke-width: 1.2;
	stroke-dasharray: 2600;
	stroke-dashoffset: calc(2600px * (1 - var(--p0)));
}

.b-nodes rect {
	fill: #0b1220;
	stroke: #27D4FF;
	stroke-width: 1.2;
	opacity: var(--p0);
}

.b-dim {
	fill: none;
	stroke: rgba(39, 212, 255, .6);
	stroke-width: 1;
	opacity: var(--p0);
}

.b-dimtext {
	font-family: var(--f-mono) !important;
	font-size: 14px !important;
	fill: rgba(220, 240, 255, .7);
	opacity: var(--p0);
}

.b-acrylic {
	opacity: calc(1 - var(--p4) * .35);
}

.b-laser line {
	stroke: rgba(255, 90, 60, .9);
	stroke-width: 1.5;
	filter: drop-shadow(0 0 4px #ff4a2a);
}

.b-laser circle {
	fill: #fff;
	filter: drop-shadow(0 0 6px #ff4a2a) drop-shadow(0 0 12px #ff4a2a);
}

.b-laser .b-spark {
	fill: #ffd29a;
	animation: spark .25s steps(2) infinite;
}

@keyframes spark {
	50% { opacity: .2; transform: translate(2px, -3px); }
}

.b-glass {
	fill: rgba(255, 255, 255, .16);
	stroke: rgba(255, 255, 255, .5);
	stroke-width: 1;
	opacity: calc(1 - var(--p4));
}

.b-wire {
	fill: none;
	stroke: #0d0c11;
	stroke-width: 3.5;
	stroke-linecap: round;
	stroke-dasharray: 320;
	stroke-dashoffset: calc(320px * (1 - var(--p3)));
}

.b-caps circle {
	fill: #0d0c11;
	stroke: rgba(255, 255, 255, .3);
	opacity: var(--p3);
}

.b-lit {
	fill: var(--n-pink);
	stroke: #fff;
	stroke-width: 1.2;
	filter: url(#ng);
	opacity: var(--p4);
}

.b-note {
	font-family: var(--f-mono) !important;
	font-size: 14px !important;
	letter-spacing: 1px;
	fill: rgba(243, 238, 247, .55);
}

/* ---------------------------------------------------------------- 22:00 The wall */
.wall {
	position: relative;
	padding-block: var(--section);
	isolation: isolate;
	overflow: hidden; /* sign light spills overhang their plates */
}

.wall::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, var(--ink-900) 0%, rgba(8, 7, 13, .35) 14%, rgba(8, 7, 13, .35) 86%, var(--ink-900) 100%);
}

.wall__head {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2rem;
	align-items: end;
	margin-bottom: clamp(2.6rem, 5vw, 4.4rem);
}

.wall__head .stamp {
	margin-bottom: 1.4rem;
}

.fuses {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	justify-content: flex-end;
	max-width: 460px;
}

.fuse {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .6em 1em;
	border-radius: 999px;
	border: 1px solid var(--line-2);
	background: rgba(8, 7, 13, .6);
	font-size: .86rem;
	transition: border-color .3s, background-color .3s;
}

.fuse i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #3a3544;
	transition: background-color .3s, box-shadow .3s;
}

.fuse[aria-pressed="true"] {
	border-color: var(--text-2);
	background: rgba(243, 238, 247, .08);
}

.fuse[aria-pressed="true"] i {
	background: var(--n-lime);
	box-shadow: 0 0 6px var(--n-lime), 0 0 12px var(--n-lime);
}

.wall__grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: clamp(1rem, 2vw, 1.8rem);
}

/* The rail the top row hangs from */
.rail {
	position: relative;
	height: 10px;
	margin: 0 -1% 0;
	border-radius: 6px;
	background: linear-gradient(180deg, #4a4a4f, #1c1c20 60%, #333338);
	box-shadow: 0 10px 16px -6px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .25);
}

.rail::before,
.rail::after {
	/* wall brackets */
	content: "";
	position: absolute;
	top: -6px;
	width: 14px;
	height: 22px;
	border-radius: 3px;
	background: linear-gradient(180deg, #55555a, #232327);
}

.rail::before { left: 4%; }
.rail::after { right: 4%; }

.wall__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1.6rem, 3vw, 2.8rem) clamp(1rem, 2vw, 1.8rem);
}

.sign {
	--c: var(--n-pink);
	position: relative;
	display: grid;
	gap: .7rem;
	align-content: start;
	transition: opacity .6s var(--ease-out), filter .6s var(--ease-out);
}

.sign--hang .sign__hang {
	margin-top: clamp(50px, 6vw, 80px);
}

.sign--mount {
	margin-top: clamp(1rem, 3vw, 2.4rem);
}

.sign.is-dim {
	opacity: .14;
	filter: grayscale(1);
	pointer-events: none;
}

.sign__hang {
	position: relative;
}

.sign__face {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 5 / 4;
	isolation: isolate;
	transition: transform .6s var(--ease-out);
}

.sign__face::before {
	/* Light thrown on the bricks */
	content: "";
	position: absolute;
	inset: -25%;
	z-index: -1;
	background: radial-gradient(45% 45% at 50% 50%, color-mix(in srgb, var(--c) 55%, transparent), transparent 70%);
	opacity: 0;
	transition: opacity .5s var(--ease-out);
	pointer-events: none;
}

.sign__face svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.sign--mount .sign__face:hover {
	transform: translateY(-3px);
}

.tubes,
.core {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.tubes {
	stroke: rgba(255, 255, 255, .22);
	stroke-width: 4;
	transition: stroke .25s;
}

.tubes text {
	fill: rgba(255, 255, 255, .12);
	stroke: rgba(255, 255, 255, .22);
	stroke-width: .8;
}

.acrylic text {
	stroke-width: 22;
}

.core {
	stroke: #fff;
	stroke-width: 1.3;
	opacity: 0;
	transition: opacity .25s;
}

.core text {
	fill: none;
	stroke: rgba(255, 255, 255, .85);
	stroke-width: .5;
}

.t-script {
	font-family: var(--f-script);
}

.t-tube {
	font-family: var(--f-tube);
	letter-spacing: 1px;
}

.sign.is-on .tubes {
	stroke: var(--c);
	filter: url(#ng);
}

.sign.is-on .tubes text {
	fill: var(--c);
	stroke: none;
}

.sign.is-on .core {
	opacity: .9;
}

.sign.is-on .sign__face::before {
	opacity: 1;
}

.sign.is-igniting .tubes,
.sign.is-igniting .core {
	animation: catch .9s steps(1, end) both;
}

.sign__meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding-inline: .3rem;
}

.sign__meta h3 {
	font-family: var(--f-display);
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1.1;
}

.sign__meta span {
	font-family: var(--f-mono);
	font-size: .7rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
	transition: color .3s;
}

.sign__meta:hover span {
	color: var(--n-pink);
}

/* Paper price tag on a string. */
.tag {
	position: absolute;
	top: 8%;
	right: 4%;
	z-index: 3;
	padding: .15em .7em .2em 1.25em;
	background: var(--paper);
	color: var(--graphite);
	font-size: 1.4rem;
	line-height: 1.3;
	clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%);
	transform: rotate(7deg);
	transform-origin: 90% -20px;
	box-shadow: 0 6px 10px rgba(0, 0, 0, .4);
	transition: transform .8s var(--ease-snap);
}

.tag::before {
	content: "";
	position: absolute;
	left: 9px;
	top: 50%;
	width: 6px;
	height: 6px;
	margin-top: -3px;
	border-radius: 50%;
	background: #1c1820;
}

.sign:hover .tag {
	transform: rotate(-4deg);
}

.wall__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: clamp(2.6rem, 5vw, 4rem);
	font-size: 1.05rem;
}

/* ---------------------------------------------------------------- 23:30 Your words */
.words {
	padding-block: var(--section);
}

.words__grid {
	display: grid;
	grid-template-columns: .85fr 1.15fr;
	gap: clamp(2.4rem, 6vw, 6rem);
	align-items: center;
}

.words__copy {
	display: grid;
	gap: 1.8rem;
	justify-items: start;
}

.rig {
	display: grid;
	gap: 0;
	border-radius: var(--r-lg);
	overflow: hidden;
	border: 1px solid var(--line);
	box-shadow: 0 50px 90px -50px #000;
}

.rig__wall {
	--c: var(--n-pink);
	--dim: .8;
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	padding: 6%;
	overflow: hidden;
	isolation: isolate;
}

.rig__spill {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--c) 60%, transparent), transparent 72%);
	mix-blend-mode: screen;
	opacity: calc(var(--dim) * .9);
	transition: background .5s;
}

.rig__sign {
	font-size: 96px;
	opacity: calc(.35 + var(--dim) * .65);
}

.rig__panel {
	display: grid;
	gap: 1.6rem;
	padding: clamp(1.2rem, 3vw, 2rem);
	background:
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .015) 0 1px, transparent 1px 3px),
		linear-gradient(180deg, #1d1a24, #121017);
	border-top: 1px solid rgba(255, 255, 255, .08);
}

/* Label-maker tape: embossed white capitals on black. */
.labelmaker {
	display: grid;
	gap: .5rem;
}

.labelmaker input {
	width: 100%;
	padding: .75em 1em;
	border: 0;
	border-radius: 6px;
	background: linear-gradient(180deg, #0c0b0f, #050407);
	box-shadow: inset 0 2px 3px rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 255, 255, .06);
	color: #f4f1ea;
	font-family: var(--f-mono);
	font-size: 1.2rem;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	text-shadow: 0 1px 0 rgba(0, 0, 0, .9), 0 -1px 0 rgba(255, 255, 255, .25);
}

.labelmaker input::placeholder {
	color: rgba(244, 241, 234, .3);
}

.labelmaker input:focus {
	outline: none;
	box-shadow: inset 0 2px 3px rgba(0, 0, 0, .9), 0 0 0 2px var(--c, var(--n-pink));
}

.rig__hw {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.6rem;
}

.rig__ctl {
	display: grid;
	justify-items: center;
	gap: .8rem;
}

.rig__fonts {
	display: flex;
	gap: .6rem;
	align-items: flex-end;
}

/* Keycaps */
.fontkey {
	display: grid;
	place-items: center;
	gap: .1rem;
	width: 66px;
	height: 70px;
	border-radius: 10px;
	background: linear-gradient(180deg, #34303b, #1f1c25);
	box-shadow: 0 6px 0 #0c0b0f, 0 10px 16px -4px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .14);
	font-family: var(--f-mono);
	font-size: .62rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
	transition: transform .12s, box-shadow .12s, color .2s;
}

.fontkey span {
	font-size: 1.5rem;
	line-height: 1;
	color: var(--text);
	text-transform: none;
	letter-spacing: 0;
}

.fontkey[aria-checked="true"] {
	transform: translateY(4px);
	box-shadow: 0 2px 0 #0c0b0f, 0 4px 8px -2px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -2px 0 var(--c, var(--n-pink));
	color: var(--text);
}

.knob__ticks circle {
	transition: r .3s;
}

/* ---------------------------------------------------------------- 01:00 Regulars */
.fame {
	padding-block: var(--section);
	overflow: hidden;
}

.fame__head {
	display: grid;
	justify-items: center;
	gap: 1.2rem;
	text-align: center;
	margin-bottom: 2rem;
}

.fame__sign {
	font-weight: 400;
	font-size: clamp(4rem, 2rem + 8vw, 9.5rem);
	line-height: 1;
}

.fame__head .lead {
	max-width: 52ch;
}

.fame__drag {
	color: var(--n-warm);
	font-size: 1.3em;
	white-space: nowrap;
}

.board {
	position: relative;
	height: clamp(720px, 64vw, 900px);
}

.polaroid {
	--dx: 0px;
	--dy: 0px;
	--tilt: 0deg;
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: clamp(180px, 16.5vw, 236px);
	padding: 12px 12px 16px;
	background: var(--paper);
	color: var(--graphite);
	box-shadow: 0 30px 40px -20px rgba(0, 0, 0, .85), 0 2px 4px rgba(0, 0, 0, .4);
	transform: translate3d(var(--dx), var(--dy), 0) rotate(calc(var(--r) + var(--tilt)));
	transition: transform .7s var(--ease-snap), box-shadow .4s;
	cursor: grab;
	touch-action: none;
	user-select: none;
}

.polaroid::before {
	/* Tape */
	content: "";
	position: absolute;
	left: 50%;
	top: -12px;
	width: 84px;
	height: 26px;
	margin-left: -42px;
	background: rgba(240, 232, 214, .55);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
	transform: rotate(-3deg);
}

.polaroid.is-dragging {
	cursor: grabbing;
	transition: box-shadow .4s;
	box-shadow: 0 50px 60px -24px rgba(0, 0, 0, .9);
}

.polaroid__photo {
	--c: var(--n-pink);
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	overflow: hidden;
	background:
		radial-gradient(55% 45% at 50% 46%, color-mix(in srgb, var(--c) 45%, transparent), transparent 72%),
		linear-gradient(180deg, var(--wall), #0c0a10);
}

.polaroid__photo::after {
	/* Film softness */
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(90% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, .45));
}

/* Lettering scales with the photo, so long phrases always fit. */
.polaroid__photo {
	container-type: inline-size;
}

.polaroid__photo .tube {
	font-size: 13cqw;
}

.polaroid__photo .tube--script {
	font-size: 15cqw;
}

.polaroid figcaption {
	display: grid;
	gap: .35rem;
	padding: .7rem .2rem 0;
}

.polaroid .hand {
	font-size: 1.35rem;
	line-height: 1;
	color: #3b3540;
}

.polaroid blockquote {
	font-size: .86rem;
	line-height: 1.45;
	color: #4b4550;
}

/* ---------------------------------------------------------------- 02:00 Questions */
.faq {
	padding-block: var(--section);
}

.faq__grid {
	display: grid;
	grid-template-columns: .8fr 1.2fr;
	gap: clamp(2.4rem, 6vw, 6rem);
	align-items: start;
}

.faq__grid .stamp {
	margin-bottom: 1.4rem;
}

.q {
	position: relative;
}

.q summary {
	display: grid;
	grid-template-columns: 3rem 1fr 1.6rem;
	align-items: center;
	gap: .6rem;
	padding: 1.5rem 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--f-display);
	font-size: clamp(1.3rem, 1.1rem + .7vw, 1.8rem);
	line-height: 1.15;
}

.q summary::-webkit-details-marker {
	display: none;
}

/* Each question sits on a tube that lights when it is open. */
.q summary::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--line-2);
	transition: background-color .3s, box-shadow .3s;
}

.q[open] summary::after {
	background: #d9f6ff;
	box-shadow: 0 0 4px var(--n-cyan), 0 0 12px var(--n-cyan), 0 0 28px rgba(39, 212, 255, .5);
}

.q__n {
	font-family: var(--f-mono);
	font-size: .76rem;
	color: var(--muted);
}

.q[open] .q__n {
	color: var(--n-cyan);
}

.q__x {
	position: relative;
	width: 14px;
	height: 14px;
	justify-self: end;
}

.q__x::before,
.q__x::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 1.5px;
	background: currentColor;
	transition: transform .5s var(--ease-out);
}

.q__x::after {
	transform: rotate(90deg);
}

.q[open] .q__x::after {
	transform: rotate(0);
}

.q p {
	padding: 0 2.2rem 1.8rem 3.6rem;
	color: var(--text-2);
	max-width: 60ch;
}

.qs {
	border-bottom: 1px solid var(--line-2);
}

/* ---------------------------------------------------------------- 03:00 Last call */
.last {
	position: relative;
	padding-block: var(--section) calc(var(--section) * .8);
	text-align: center;
	overflow: hidden;
}

.last::before {
	content: "";
	position: absolute;
	inset: 20% 10% auto;
	height: 60%;
	z-index: -1;
	background: radial-gradient(50% 50% at 50% 40%, rgba(255, 64, 64, .14), transparent 70%);
}

.last__inner {
	display: grid;
	justify-items: center;
	gap: 2rem;
}

.opensign {
	position: relative;
	display: inline-grid;
	place-items: center;
	padding: .3em .7em .25em;
	font-size: clamp(4rem, 2rem + 9vw, 10rem);
	line-height: 1;
	margin-block: 1rem;
}

.opensign__frame {
	position: absolute;
	inset: 0;
	border-radius: .22em;
	border: 3px solid rgba(255, 255, 255, .14);
	transition: border-color .4s, box-shadow .4s;
}

[data-power="on"] .opensign__frame {
	border-color: #ffd9d9;
	box-shadow: 0 0 4px var(--n-red), 0 0 12px var(--n-red), 0 0 30px var(--n-red), inset 0 0 12px var(--n-red), inset 0 0 30px rgba(255, 64, 64, .35);
}

.opensign__word {
	--c: var(--n-red);
	letter-spacing: .04em;
}

.opensign__late {
	position: absolute;
	right: -.35em;
	bottom: -.38em;
	font-size: .55em;
	transform: rotate(-10deg);
}

.last__title {
	font-size: var(--fs-1);
}

.last__lead {
	margin-inline: auto;
	text-align: center;
}

.last__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .8rem;
}

/* ---------------------------------------------------------------- Footer */
.ftr {
	position: relative;
	padding-block: clamp(3.5rem, 7vw, 6rem) 2rem;
	border-top: 1px solid var(--line);
	background: var(--ink-950);
}

.ftr__top {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: clamp(2.4rem, 6vw, 6rem);
	align-items: start;
	padding-bottom: clamp(2.5rem, 5vw, 4rem);
	border-bottom: 1px solid var(--line);
}

.ftr__lockup {
	align-items: center;
}

.ftr__night {
	text-align: center;
	font-size: clamp(3.6rem, 1.4rem + 9vw, 10.5rem);
	line-height: 1.1;
	margin: 0 0 clamp(2.5rem, 5vw, 4.5rem);
}

/* A letter that has switched off: clear glass again. */
.tube.is-on .tube__ch.is-off {
	color: rgba(255, 255, 255, .13);
	text-shadow: none;
}

.ftr__title {
	width: 190px;
	height: auto;
}

.ftr__cols {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
}

.ftr__cols .label {
	margin-bottom: 1.1rem;
}

.ftr__cols ul {
	display: grid;
	gap: .7rem;
	font-size: 1.02rem;
}

.ftr__cols span {
	color: var(--text-2);
}

.ftr__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding-top: 1.8rem;
	font-size: .9rem;
	color: var(--muted);
}

.ftr__clock {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	font-family: var(--f-mono);
	font-size: .8rem;
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- Cursor trail */
.trail {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	z-index: 80;
	pointer-events: none;
}

/* ---------------------------------------------------------------- Responsive */
@media (max-width: 1080px) {
	.wall__head,
	.faq__grid,
	.words__grid {
		grid-template-columns: 1fr;
	}

	.fuses {
		justify-content: flex-start;
	}

	.sign--w3,
	.sign--w4,
	.sign--w5 {
		grid-column: span 6;
	}

	.bend__sticky {
		grid-template-columns: 1fr;
		align-content: center;
		gap: 1.6rem;
	}

	.bend__steps li:not(.is-active) {
		display: none;
	}

	.bend__copy .h2 {
		font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.6rem);
	}
}

@media (max-width: 860px) {
	.menu {
		display: grid;
		place-items: center;
	}

	.hdr__nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		gap: 1.1rem;
		padding: 1.6rem var(--gutter) 2rem;
		background: rgba(8, 7, 13, .96);
		border-bottom: 1px solid var(--line);
		font-family: var(--f-display);
		font-size: 2rem;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-10px);
		transition: opacity .4s var(--ease-out), transform .5s var(--ease-out), visibility .5s;
	}

	.hdr.is-open .hdr__nav {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.hdr.is-open {
		background: rgba(8, 7, 13, .96);
	}

	.hum__label {
		display: none;
	}

	/* Phones and tablets: the wall scene first, the words underneath it. */
	.hero {
		min-height: 0;
	}

	.hero__wall {
		position: relative;
		height: max(440px, 58svh);
	}

	.hero__floor {
		height: 20%;
	}

	.hero__sign {
		left: 50%;
		right: auto;
		width: 86vw;
		top: 96px;
		transform: translateX(-50%);
	}

	.hero__fixtures {
		top: calc(100% + 34px);
		left: 40%;
		transform: scale(.78);
		transform-origin: left top;
	}

	.hero__copy {
		position: relative;
		bottom: auto;
		gap: 1.3rem;
		padding-block: 1.4rem 3.4rem;
	}

	.hero__copy > * {
		max-width: none;
	}

	.hero__spill {
		background:
			radial-gradient(40% 26% at 34% 26%, rgba(230, 0, 126, .55), transparent 70%),
			radial-gradient(36% 24% at 70% 28%, rgba(0, 160, 227, .42), transparent 70%);
	}

	.hero__reflect {
		right: auto;
		left: 7vw;
		width: 86vw;
	}

	.ftr__top {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.hero {
		min-height: 780px;
	}

	.hero__title {
		font-size: clamp(3.4rem, 15vw, 5rem);
	}

	.hero__aside .lead {
		font-size: 1rem;
	}

	.sign--w3,
	.sign--w4,
	.sign--w5 {
		grid-column: 1 / -1;
	}

	.sign__face {
		height: 240px;
	}

	.rig__hw {
		justify-content: center;
	}

	.rig__fonts {
		width: 100%;
		justify-content: center;
	}

	/* Polaroids become a swipeable row on phones. */
	.board {
		height: auto;
		display: flex;
		gap: 1.2rem;
		overflow-x: auto;
		padding: 1.6rem 4px 2rem;
		scroll-snap-type: x mandatory;
	}

	.polaroid {
		position: relative;
		left: auto;
		top: auto;
		flex: 0 0 76%;
		scroll-snap-align: center;
		touch-action: pan-x;
	}

	.ftr__cols {
		grid-template-columns: 1fr 1fr;
	}

	.clock__scene {
		display: none;
	}

	.hdr__inner {
		gap: .8rem;
	}

	.hdr__tools {
		gap: .45rem;
	}

	.hdr__title {
		width: 78px;
	}
}

@media (max-width: 480px) {
	/* Small phones: the hum is a desktop treat; the bag keeps only its count. */
	.hum {
		display: none;
	}

	.bag {
		padding: .45em;
		font-size: 0;
	}

	.bag__n {
		font-size: .72rem;
	}

	.q p {
		padding-left: 3rem;
		padding-right: 0;
	}
}