/* Dome · Project screens — one-page layout: each project is a plain full-screen
   section (full-bleed photo, status info top-centre, ghost name at the bottom;
   the whole screen links to the project's website). Ordinary scrolling only —
   the sticky/flip deck choreography was removed on the client's ask (2026-08):
   no pinning, no stepping, no scroll-linked motion. */

.dome-pscreens {
	/* Breathing room between the statement section and the first project — painted
	   the same light paper as the statement (client 2026-08: the cream band is gone).
	   --band is the single source of truth: the snap stops start below it.
	   64 -> 48 (client 2026-08-17): the statement's VISIBLE gaps must be equal —
	   above the text it is the statement's own padding-top (64), below it is its
	   padding-bottom (16) + this band, so band = 64 - 16 = 48. If either statement
	   padding changes, recompute this. */
	--band: 48px;
	position: relative;
	margin: 0;
	padding-top: var(--band);
	background: var(--wp--custom--paper);
}

/* Each project is one ordinary screenful; the page scrolls straight through. */
.dome-pscreen {
	position: relative;
	height: 100vh;
	height: 100svh;
	overflow: clip;
	background: var(--wp--preset--color--ink);
}

/* Everything visual lives on the stage, absolutely filling the screen shell. */
.dome-pscreen__stage {
	position: absolute;
	inset: 0;
}

/* Top scrim (client 2026-08: the circular halo read as a blob — deleted): the
   photo darkens evenly toward its top edge so the address + timeline are clearly
   readable on any picture. Mirror of the bottom scrim. */
.dome-pscreen__stage::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	z-index: 1;
	height: 30%;
	background: linear-gradient(to bottom, rgba(16, 16, 17, 0.58), rgba(16, 16, 17, 0));
	pointer-events: none;
}

/* Bottom scrim (client 2026-08): the photo darkens toward its bottom edge so the
   ghost project name reads clearly on any picture. Sits between the photo (z0)
   and the name (z2). */
.dome-pscreen__stage::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	height: 44%;
	background: linear-gradient(to top, rgba(16, 16, 17, 0.62), rgba(16, 16, 17, 0));
	pointer-events: none;
}

.dome-pscreen__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* AMPERA's street elevation (client 2026-08) is a bright render — dimmed a
   touch over the ink shell so the white type reads. */
#projektas-ampera .dome-pscreen__bg {
	opacity: 0.88;
}

/* The whole screen IS the link — keep it quiet, no underline/outline noise. */
a.dome-pscreen {
	display: block;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}
a.dome-pscreen:focus-visible {
	outline: 3px solid var(--wp--preset--color--white);
	outline-offset: -6px;
}

/* ---- Top-centre info: soft dark radial gradient with the address and the
   construction timeline in white — no icons, no labels (client, pokyciai #2). */
.dome-pscreen__top {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	/* The nav bar retracts over the deck (v0.4.4), so the address hugs the top
	   edge. No gradient of its own (client 2026-08: the circular halo was too
	   prominent — deleted); the stage's top scrim carries the contrast. */
	padding: 44px 24px 40px;
	text-align: center;
	color: var(--wp--preset--color--white);
	pointer-events: none;
}
.dome-pscreen__address {
	margin: 0;
	font-family: var(--wp--preset--font-family--text);
	font-weight: 700;
	font-size: 20px;
	line-height: 28px;
}
.dome-pscreen__years {
	margin: 0;
	font-family: var(--wp--preset--font-family--text);
	font-size: 17px;
	line-height: 24px;
	opacity: 0.92;
}
/* The project's website, unmistakably a link (client 2026-08): underlined, and
   the underline thickens when the screen (which IS the <a>) is hovered. */
.dome-pscreen__site {
	margin: 0;
	font-family: var(--wp--preset--font-family--text);
	font-size: 16px;
	line-height: 24px;
}
.dome-pscreen__site span {
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
	transition: text-decoration-thickness 0.2s ease, opacity 0.2s ease;
}
a.dome-pscreen:hover .dome-pscreen__site span {
	text-decoration-thickness: 2px;
}
/* The little outward arrow after the domain (Material Symbols arrow_outward). */
.dome-pscreen__site svg {
	width: 13px;
	height: 13px;
	margin-left: 5px;
	vertical-align: baseline;
	fill: currentColor;
	transition: transform 0.2s ease;
}
a.dome-pscreen:hover .dome-pscreen__site svg {
	transform: translate(2px, -2px);
}

/* ---- The project NAME, huge across the bottom of the picture — the same ghost
   treatment the DOMĖ watermark had: faint white display letters fading out at
   the bottom edge. JS (data-ghost-fit) scales each name to span the width. */
.dome-pscreen__ghost {
	position: absolute;
	left: 0;
	right: 0;
	/* Client 2026-08: a small breathing gap under the name — the letters used
	   to sit flush on the photo's bottom edge. Scales gently with viewport
	   height so short screens don't lose picture to an oversized gap. */
	bottom: clamp(12px, 2.5vh, 28px);
	z-index: 2;
	margin: 0;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	/* Fallback size before the JS fitter runs (fits ~8 characters). */
	font-size: 11vw;
	line-height: 0.95;
	/* Headroom above the caps: the 0.95 line box + overflow:hidden clipped the
	   Ė dot, the Ž caron and even the C tops (client 2026-08). Width fitting is
	   untouched — this only grows the box upward. */
	padding-top: 0.22em;
	color: var(--wp--preset--color--white);
	/* Client 2026-08: readable but not shouting (0.5 → 0.8 → toned to 0.7). */
	opacity: 0.7;
	pointer-events: none;
	/* (The old translateY(12%) sank the letters past the photo edge — removed
	   with the 2026-08 gap request; `bottom` above now controls the clearance.) */
	/* The original DOMĖ-watermark fade (client 2026-08: bring it back): letters
	   solid up top, dissolving to NOTHING toward the bottom edge. */
	-webkit-mask-image: linear-gradient(to bottom, #000 40%, rgba(0, 0, 0, 0) 98%);
	        mask-image: linear-gradient(to bottom, #000 40%, rgba(0, 0, 0, 0) 98%);
}
/* The AMPÈRA logo's accent block, redrawn (client 2026-08-21). Every number is a
   ratio of CAP HEIGHT, read off the brand SVG (ampera.lt logo-light.svg): the accent
   there is 15.986 wide x 5.732 thick over a 28.653 cap, sitting 2.465 above it and
   dropping 3.275 across its width — i.e. 0.558 / 0.200 / 0.086 and atan(3.275/15.986)
   = 11.6deg DOWNWARD to the right. This font's cap height is 0.70em (measured), so the
   em values below are those ratios x 0.70.
   skewY is the right transform, not rotate: it slants the horizontal edges while
   keeping the left and right edges vertical, which is exactly how the brand shape is
   built. rotate() would tilt those edges too and read as a leaning stick. */
.dome-pscreen__ghost-accented {
	--dome-cap: 0.7em;      /* GT Ultra Median cap height, measured */
	position: relative;
	display: inline-block;
	font-style: normal;     /* it is an <i> only to stay out of the text flow semantics */
}
.dome-pscreen__ghost-accented::before {
	content: "";
	position: absolute;
	left: 50%;
	/* Lift from the box BOTTOM, which is not the baseline: with the ghost's
	   line-height the baseline sits 0.125em above it (measured from this font's
	   ascent 0.9 / descent 0.2). So: 0.125 (to baseline) + 0.70 (cap) + 0.060
	   (brand gap) = 0.885em. Assuming the baseline was the box bottom put the
	   block a full 0.125em out of place. */
	bottom: 0.885em;
	/* Scaled to the LETTER'S WIDTH, not its height. In the brand SVG the accent is
	   52.6% of the E's width and 18.9% of it thick; that E is nearly square (30.4 x
	   28.7), while this serif E is much narrower than tall (0.591em vs 0.70em cap).
	   Transplanting the cap-height ratio therefore made the block overhang the letter
	   and read as a floating slab — the width ratio keeps the brand's actual visual
	   relationship. 0.526 x 0.591em = 0.311em = 0.444 cap; 0.189 x 0.591 = 0.159 cap. */
	/* Client 2026-08-21, two rounds of "a bit smaller": scaled 0.85 and then 0.93
	   again from the brand-exact 0.444/0.159 — both dimensions together, so the shape
	   and the 11.6deg slant are untouched (skewY is an angle, independent of size).
	   Net 0.79x the brand ratio: 41.6% of the E's width instead of 52.6%. */
	width: calc(var(--dome-cap) * 0.351);
	height: calc(var(--dome-cap) * 0.126);
	background: currentColor;
	transform: translateX(-50%) skewY(11.6deg);
	pointer-events: none;
}

.dome-pscreen__ghost span {
	display: inline-block;
}

.dome-pscreens__empty {
	padding: 48px 72px;
	font-family: var(--wp--preset--font-family--text);
}

/* ---- Mobile ---- */
@media (max-width: 900px) {
	.dome-pscreens {
		/* Same equal-gap arithmetic as desktop: statement mobile paddings are 40/12,
		   so band = 40 - 12 = 28. */
		--band: 28px;
	}
	.dome-pscreen__top {
		padding: 40px 20px 32px;
	}
	.dome-pscreen__address {
		font-size: 16px;
		line-height: 24px;
	}
	.dome-pscreen__years {
		font-size: 14px;
		line-height: 20px;
	}
	.dome-pscreen__site {
		font-size: 14px;
		line-height: 20px;
	}
}