/* ==================================================

	Scene tape

	Two strands fixed to the viewport, crossing just above its middle, shown by the Applications Closed milestone. Strands run far past the viewport so a wider window reveals more strand; the fixed sheet clips the overhang the way the scoops' does.

	Figma reports the rotated bbox; --tape-top/--tape-shift are its center, rotation reapplied in CSS.

	@related stacking_order

================================================== */

.tape-layer {
	position: fixed;
	inset: 0;
	z-index: var(--z-tape);

	display: none;

	overflow: hidden;

	pointer-events: none;
}

html[data-milestone="closed"] .tape-layer {
	display: block;
}

/* the layer is the fragment target for every former apply link; its own ring would trace the viewport, so the notice strand wears it */
.tape-layer:focus,
.tape-layer:focus-visible {
	outline: none;
}

.tape-layer:focus-visible .tape--notice {
	outline: 3px solid var(--color-fg-link);
	outline-offset: 2px;
}

.tape {
	--tape-h: 90px;

	position: absolute;
	top: var(--tape-top);
	left: calc(50% + var(--tape-shift));

	height: var(--tape-h);

	background-color: var(--deel-purple-light);
	box-shadow: 0 3.5px 4.5px rgba(0, 0, 0, 0.25);

	transform: translate(-50%, -50%) rotate(var(--tape-rotate));
}

/* tape.js cuts the strands after a moment and brings them back on any former apply link; the hidden text stays put, so the notice never leaves the accessibility tree */
.tape-layer.is-hidden .tape {
	visibility: hidden;
}

/* -------------------------------------
	=Logo strand
------------------------------------- */

.tape--logos {
	--tape-top:    500px;
	--tape-shift:  36px;
	--tape-rotate: 13.27deg;
	--tape-logo-h: 59.75px;

	width: 130vw;

	background-image: url("../../images/tape-deel-logo.svg");
	background-size: auto var(--tape-logo-h);
	background-repeat: repeat-x;
	background-position: center;
}

/* -------------------------------------
	=Notice strand
------------------------------------- */

.tape--notice {
	--tape-top:    459.5px;
	--tape-shift:  11px;
	--tape-rotate: -14.19deg;

	display: flex;
	align-items: center;
	gap: 9px;

	width: max-content;
	padding-inline: 45px;

	font-family:  var(--font-family-condensed);
	font-size:    43px;
	font-weight:  var(--font-weight-bold);
	font-stretch: condensed;
	line-height:  1.25;
	color:        var(--black-ink);
	white-space:  nowrap;
	z-index: 10;
}

/* -------------------------------------
	=Mobile
------------------------------------- */

@media ( max-width: 1076px ) {

	.tape {
		--tape-h: 50px;
	}

	.tape--logos {
		--tape-logo-h: 33px;
	}

	.tape--notice {
		--tape-shift:  75px;
		gap: 5px;

		padding-inline: 25px;

		font-size: 24px;
	}

}