/* ==========================================================================
   Nedtelling til trailer-slipp (blokk: viqueens/countdown)
   Mobil først. På desktop legges klokka over bunnen av hero-videoen.
   ========================================================================== */

.vq-countdown {
	--vq-gold: var(--wp--preset--color--custom-color-4, #d6b689);
	--vq-cream: var(--wp--preset--color--custom-color-1, #ece5d7);
	--vq-ink: var(--wp--preset--color--custom-color-2, #27231b);
	/* Mørk marineblå i samme tone som nattehimmelen i hero-videoen */
	--vq-scrim: #0d1c33;
	--vq-gold-light: color-mix(in srgb, var(--vq-gold) 50%, #fff);
	--vq-gold-deep: color-mix(in srgb, var(--vq-gold) 55%, #4a3210);
	--vq-gold-text: linear-gradient(180deg, var(--vq-gold-light) 10%, var(--vq-gold) 48%, var(--vq-gold-deep) 95%);
	--vq-digit-size: min(16vw, 5.5rem);
	--vq-display: var(--wp--preset--font-family--avqest, "AvQest"), serif;
	--vq-serif: var(--wp--preset--font-family--alegreya, "Alegreya"), serif;

	position: relative;
	z-index: 2;
	isolation: isolate;
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 var(--wp--preset--spacing--medium) !important;
	padding: var(--wp--preset--spacing--x-large) 0 var(--wp--preset--spacing--small);
	color: var(--vq-cream);
	text-align: center;
}

/* Mørkeblå toning nedenfra så gullet leses over den lyse tåka i videoen */
.vq-countdown::before {
	content: "";
	position: absolute;
	z-index: -1;
	/* Til kanten av skjermen og ned til bunnen av heroen (klippes av cover-blokken) */
	inset: -25% calc(50% - 50vw) -4rem;
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--vq-scrim) 90%, transparent) 0%,
		color-mix(in srgb, var(--vq-scrim) 78%, transparent) 40%,
		color-mix(in srgb, var(--vq-scrim) 35%, transparent) 75%,
		transparent 100%
	);
	pointer-events: none;
}

.vq-countdown p {
	margin: 0;
}

/* --- Overskrift ---------------------------------------------------------- */

.vq-countdown__eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.7em;
	margin-bottom: 0.5em !important;
	font-family: var(--vq-display);
	font-size: clamp(1.15rem, 0.85rem + 1.2vw, 2rem);
	line-height: 1.1;
	letter-spacing: 0.06em;
	text-shadow: 0 2px 14px rgb(0 0 0 / 0.65);
}

.vq-countdown__eyebrow::before,
.vq-countdown__eyebrow::after {
	content: "";
	width: clamp(1.5rem, 6vw, 4.5rem);
	height: 1px;
	background: linear-gradient(to right, transparent, var(--vq-gold));
}

.vq-countdown__eyebrow::after {
	transform: scaleX(-1);
}

/* --- Klokka -------------------------------------------------------------- */

.vq-countdown__clock {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	font-family: var(--vq-serif);
	font-size: var(--vq-digit-size);
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: lining-nums tabular-nums;
	font-feature-settings: "lnum" 1, "tnum" 1;
	filter: drop-shadow(0 0.02em 0.03em rgb(0 0 0 / 0.7)) drop-shadow(0 0 0.3em rgb(0 0 0 / 0.45));
	transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.6s ease;
}

.vq-countdown.is-no-days .vq-countdown__clock {
	font-size: calc(var(--vq-digit-size) * 1.25);
}

.vq-countdown.is-no-days [data-unit="d"],
.vq-countdown.is-no-days [data-sep="h"] {
	display: none;
}

.vq-countdown__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.vq-countdown__value {
	display: flex;
}

.vq-countdown__digit {
	display: inline-block;
	padding-block: 0.04em;
	background: var(--vq-gold-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.vq-countdown__digit.is-ticking {
	animation: vq-digit-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.vq-countdown__label {
	margin-top: 0.55rem;
	font-family: var(--vq-display);
	font-size: clamp(0.72rem, 0.6rem + 0.45vw, 1.05rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.14em;
	color: var(--vq-cream);
	opacity: 0.9;
}

.vq-countdown__label-short {
	display: none;
}

/* Klansmerket som skilletegn */
.vq-countdown__sep {
	flex: none;
	width: 0.21em;
	aspect-ratio: 200 / 197;
	margin: 0.37em 0.16em 0;
	background: var(--vq-gold);
	-webkit-mask: url("klansmerke.png") center / contain no-repeat;
	mask: url("klansmerke.png") center / contain no-repeat;
	animation: vq-sep-pulse 1s ease-in-out infinite alternate;
}

/* --- Sluppet: «Se traileren» --------------------------------------------- */

.vq-countdown__live {
	display: none;
}

.vq-countdown.is-live .vq-countdown__pending {
	display: none;
}

.vq-countdown.is-live .vq-countdown__live {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(1rem, 2vw, 1.6rem);
	animation: vq-live-in 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.vq-countdown__live-heading {
	padding-block: 0.08em;
	font-family: var(--vq-display);
	font-size: clamp(2.1rem, 1.2rem + 4.5vw, 5.5rem);
	line-height: 1.05;
	letter-spacing: 0.02em;
	background: var(--vq-gold-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	filter: drop-shadow(0 0.03em 0.1em rgb(0 0 0 / 0.6));
}

.site-wrapper .vq-countdown .vq-countdown__play {
	display: inline-flex;
	align-items: center;
	gap: 0.75em;
	padding: 0.45em 1.4em 0.45em 0.5em;
	border: 1px solid var(--vq-gold-light);
	border-radius: 0.2rem;
	background: linear-gradient(180deg, var(--vq-gold-light), var(--vq-gold) 55%, color-mix(in srgb, var(--vq-gold) 80%, #4a3210));
	box-shadow: 0 0.4em 1.6em rgb(0 0 0 / 0.45);
	color: var(--vq-ink);
	font-family: var(--vq-display);
	font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.55rem);
	line-height: 1;
	letter-spacing: 0.04em;
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.site-wrapper .vq-countdown .vq-countdown__play:hover,
.site-wrapper .vq-countdown .vq-countdown__play:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 0.6em 2em rgb(0 0 0 / 0.55), 0 0 1.4em color-mix(in srgb, var(--vq-gold) 45%, transparent);
}

.vq-countdown__play-icon {
	display: grid;
	place-items: center;
	width: 2.1em;
	height: 2.1em;
	border-radius: 50%;
	background: var(--vq-ink);
	color: var(--vq-gold);
}

.vq-countdown__play-icon svg {
	width: 45%;
	height: 45%;
	/* Trekanten er allerede forskjøvet mot høyre i tegningen; dette finjusterer til optisk midt */
	transform: translateX(-4%);
	fill: currentColor;
}

/* --- Sluppet med klipp: gullramme i stedet for knapp --------------------- */

.vq-countdown__live.has-frame {
	gap: clamp(0.6rem, 1.2vw, 1rem);
}

/* Med ramme står videoen alene – overskriften beholdes bare for skjermlesere */
.vq-countdown__live.has-frame .vq-countdown__live-heading {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px !important;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.vq-countdown__frame {
	--vq-frame-width: min(90vw, 28rem);

	position: relative;
	display: block;
	width: var(--vq-frame-width);
	aspect-ratio: 1787 / 1110;
	filter: drop-shadow(0 0.8rem 1.6rem rgb(0 0 0 / 0.5));
	transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/*
 * Vinduet i rammegrafikken – samme mål som rammen i «Se traileren»-seksjonen.
 * !important og ekstra klasser fordi temaets regel for hero-videoen
 * (.home .bg-video video) ellers treffer klippet også.
 */
.vq-countdown .vq-countdown__frame .vq-countdown__frame-video {
	position: absolute !important;
	top: 9.55% !important;
	left: 5.48% !important;
	display: block;
	width: 88.92% !important;
	height: 80.81% !important;
	object-fit: cover !important;
	object-position: 50% 50% !important;
	background: var(--vq-scrim);
}

.vq-countdown .vq-countdown__frame-border {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	max-width: none;
	height: 100%;
	pointer-events: none;
}

/* Vinduet er sentrert i rammen, så knappen kan sentreres i hele rammen */
.vq-countdown__frame-play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: clamp(3.25rem, 2.6rem + 2vw, 5rem);
	aspect-ratio: 1;
	border: 2px solid var(--vq-cream);
	border-radius: 50%;
	background: rgb(0 0 0 / 0.45);
	color: var(--vq-cream);
	transform: translate(-50%, -50%);
	transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.vq-countdown__frame-play svg {
	width: 42%;
	height: 42%;
	transform: translateX(-4%);
	fill: currentColor;
}

.vq-countdown__frame:hover,
.vq-countdown__frame:focus-visible {
	transform: translateY(-3px);
}

.vq-countdown__frame:hover .vq-countdown__frame-play,
.vq-countdown__frame:focus-visible .vq-countdown__frame-play {
	transform: translate(-50%, -50%) scale(1.08);
	border-color: var(--vq-gold);
	background: color-mix(in srgb, var(--vq-scrim) 65%, transparent);
	color: var(--vq-gold);
}

.vq-countdown__frame:focus-visible {
	outline: 2px solid var(--vq-gold);
	outline-offset: 4px;
}

/* --- Siste 10 sekunder --------------------------------------------------- */

.vq-countdown.is-final .vq-countdown__clock {
	transform: scale(1.06);
	filter: drop-shadow(0 0.02em 0.03em rgb(0 0 0 / 0.7)) drop-shadow(0 0 0.25em color-mix(in srgb, var(--vq-gold) 55%, transparent));
}

.vq-countdown.is-final [data-unit="s"] .vq-countdown__digit.is-ticking {
	animation: vq-digit-final 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.vq-countdown.is-final .vq-countdown__sep {
	animation-duration: 0.5s;
}

/* --- Inngang når skriptet har regnet ut riktig tid ----------------------- */

@media (scripting: enabled) {
	.vq-countdown:not(.is-ready) .vq-countdown__pending {
		opacity: 0;
		transform: translateY(0.75rem);
	}
}

.vq-countdown__pending {
	transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* --- Skjermleser --------------------------------------------------------- */

.vq-countdown__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px !important;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* --- Videospiller -------------------------------------------------------- */

.vq-trailer-dialog {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: clamp(1rem, 4vw, 3rem);
	border: 0;
	background: transparent;
}

.vq-trailer-dialog[open] {
	display: grid;
	place-items: center;
	animation: vq-live-in 0.4s ease both;
}

.vq-trailer-dialog::backdrop {
	background: rgb(12 10 8 / 0.92);
}

.vq-trailer-dialog__frame {
	width: min(100%, 1280px, calc((100svh - 7rem) * 16 / 9));
	aspect-ratio: 16 / 9;
	background: #000;
	outline: 1px solid color-mix(in srgb, var(--wp--preset--color--custom-color-4, #d6b689) 60%, transparent);
	outline-offset: 6px;
	box-shadow: 0 2rem 5rem rgb(0 0 0 / 0.6);
}

.vq-trailer-dialog__frame iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.vq-trailer-dialog__close {
	position: fixed;
	top: max(1rem, env(safe-area-inset-top));
	right: max(1rem, env(safe-area-inset-right));
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--wp--preset--color--custom-color-4, #d6b689);
	border-radius: 50%;
	background: rgb(0 0 0 / 0.4);
	color: var(--wp--preset--color--custom-color-1, #ece5d7);
	font-size: 1.75rem;
	line-height: 1;
}

html:has(.vq-trailer-dialog[open]) {
	overflow: hidden;
}

/* --- Animasjoner --------------------------------------------------------- */

@keyframes vq-digit-in {
	from {
		opacity: 0;
		transform: translateY(-0.2em);
	}
}

@keyframes vq-digit-final {
	from {
		opacity: 0;
		transform: scale(1.45);
	}
}

@keyframes vq-sep-pulse {
	from {
		opacity: 0.45;
	}
	to {
		opacity: 1;
	}
}

@keyframes vq-live-in {
	from {
		opacity: 0;
		transform: translateY(1rem) scale(0.97);
	}
}

@media (prefers-reduced-motion: reduce) {
	.vq-countdown *,
	.vq-trailer-dialog {
		animation: none !important;
		transition: none !important;
	}

	.vq-countdown.is-final .vq-countdown__clock {
		transform: none;
	}
}

/* --- Smal mobil ---------------------------------------------------------- */

@media (max-width: 600px) {
	.vq-countdown__label {
		letter-spacing: 0.1em;
	}

	.vq-countdown__label-long {
		display: none;
	}

	.vq-countdown__label-short {
		display: inline;
	}
}

/* --- Desktop: over bunnen av hero-videoen -------------------------------- */

@media screen and (min-width: 992px) {
	.home .hero-wrap .vq-countdown {
		--vq-digit-size: clamp(4rem, min(8vw, 13.5svh), 9.5rem);

		position: absolute;
		left: 0;
		right: 0;
		/* Bunnen av første skjermbilde (= bunnen av heroen, se under) */
		top: 100vh;
		top: 100svh;
		transform: translateY(-100%);
		margin: 0 !important;
		padding: var(--wp--preset--spacing--xx-large) var(--wp--preset--spacing--medium) var(--wp--preset--spacing--medium);
	}

	.home .hero-wrap .vq-countdown::before {
		inset: 0;
	}

	/*
	 * Rammen skal holde seg under beltet til figurene. Figurene skaleres med
	 * skjermhøyden, men på brede skjermer med bredden (beltet ligger da ca. 30vw
	 * ned), så høyden begrenses av begge. 3rem = luft under rammen.
	 */
	.vq-countdown__frame {
		--vq-frame-width: clamp(16rem, min(40vw, 42svh * 1.61, (100svh - 30vw - 3rem) * 1.61), 42rem);
	}

	/*
	 * Temaet gjør heroen minst 16:9 høy, så på brede skjermer stikker den under
	 * bretten og etterlater en stripe video under klokka. Med klokka i heroen
	 * holdes den til én skjermhøyde, og videoen forankres i toppen – utsnittet
	 * over bretten blir det samme som før, bare bunnen (vann og skip) kuttes.
	 */
	.home .hero-wrap:has(.vq-countdown) {
		min-height: 100vh !important;
		min-height: 100svh !important;
	}

	.home .hero-wrap:has(.vq-countdown) .bg-video > video {
		object-position: 50% 0 !important;
	}
}