/*
 * Motion (Hreyfing.dc.html). Short, quiet and purposeful: 120 / 200 / 320 ms for UI, 640 ms for
 * timelines and charts, 40 ms stagger (max 8 items), ink curve in, faster curve out.
 *
 * SEO/accessibility rules followed here:
 *  - Everything is visible by default. Content is only hidden (.gs-reveal / .gs-wait, added by
 *    motion.js) when it is below the fold, JS runs, IntersectionObserver exists and the visitor has
 *    not asked for reduced motion — and bots never get those classes.
 *  - Only opacity and transform animate, so nothing shifts (no CLS); the h1 is never hidden.
 *  - prefers-reduced-motion: the duration tokens are 0 (tokens.css) and the rules below switch off.
 */

/* ---------- Highlighter underline on list links (tenglar og línur · miðlungs) ---------- */

:root {
	--gs-hl: #FFCC1F;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--gs-hl: rgba(255, 204, 31, .32);
	}
}

:root[data-theme="dark"] {
	--gs-hl: rgba(255, 204, 31, .32);
}

.gs-row__name,
.gs-lp-row__name,
.gs-arch-row__name,
.gs-new-row__name,
.gs-plainlist__name,
.gs-catgrid__name,
.gs-sidelink > span:first-child,
.gs-co-newsrow__t,
.gs-cp-newsrow__t,
.gs-ownergroup__name,
.gs-sechead__link,
.gs-menu__cat > span:first-child {
	background-image: linear-gradient(var(--gs-hl), var(--gs-hl));
	background-repeat: no-repeat;
	background-position: 0 88%;
	background-size: 0% 38%;
	transition: background-size var(--gs-medium) var(--gs-ease);
}

.gs-row:hover .gs-row__name,
.gs-lp-row:hover .gs-lp-row__name,
.gs-arch-row:hover .gs-arch-row__name,
.gs-new-row:hover .gs-new-row__name,
a.gs-plainlist__name:hover,
.gs-plainlist__row:hover a.gs-plainlist__name,
.gs-catgrid__item:hover .gs-catgrid__name,
.gs-sidelink:hover > span:first-child,
.gs-co-newsrow:hover .gs-co-newsrow__t,
.gs-cp-newsrow:hover .gs-cp-newsrow__t,
.gs-ownergroup__row:hover .gs-ownergroup__name,
.gs-sechead__link:hover,
.gs-menu__cat:hover > span:first-child {
	background-size: 100% 38%;
	text-decoration: none;
}

/* ---------- Checkbox: the tick grows from the centre (hratt) ---------- */

.gs-check__box {
	position: relative;
}

.gs-check__box::after {
	content: '';
	position: absolute;
	left: 3px;
	top: 0;
	width: 5px;
	height: 9px;
	border: solid var(--gs-yellow);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(0);
	transition: transform var(--gs-fast) var(--gs-ease);
}

.gs-check input:checked + .gs-check__box::after {
	transform: rotate(45deg) scale(1);
}

/* ---------- Sliding tab indicator (flipar · miðlungs) — positioned by motion.js ---------- */

.gs-slide {
	position: relative;
	isolation: isolate;
}

.gs-slide > .gs-slide__ind {
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	background: var(--gs-btn-bg);
	pointer-events: none;
	transition:
		transform var(--gs-medium) var(--gs-ease),
		width var(--gs-medium) var(--gs-ease),
		height var(--gs-medium) var(--gs-ease);
}

.gs-slide.is-static > .gs-slide__ind {
	transition: none;
}

.gs-slide .is-active {
	background: transparent !important;
}

/* The buttons themselves must not paint over the indicator. */
.gs-slide.gs-viewswitch .gs-viewswitch__btn,
.gs-slide.gs-faqx__cats .gs-faqx__cat {
	background: transparent;
}

.gs-slide.gs-viewswitch {
	background: var(--gs-surface);
}

/* ---------- Search suggestions: rows arrive 40 ms apart; sheen while loading ---------- */

.gs-suggest.is-open .gs-suggest__item {
	animation: gs-in-down var(--gs-medium) var(--gs-ease) both;
	animation-delay: calc(min(var(--i, 0), 8) * var(--gs-stagger));
}

.gs-skel {
	display: block;
	height: 12px;
	margin: 12px 14px;
	background: linear-gradient(90deg, var(--gs-surface-2) 0%, var(--gs-stripe) 40%, var(--gs-surface-2) 80%) 0 0 / 200% 100%;
	animation: gs-shimmer 1.4s linear infinite;
}

.gs-skel:nth-child(2) { width: 62%; }
.gs-skel:nth-child(3) { width: 48%; }

/* ---------- Page-stack loader (síðubunki) — only for waits over 400 ms ---------- */

.gs-loader {
	position: relative;
	display: inline-block;
	width: 22px;
	height: 22px;
	flex: none;
}

.gs-loader > span {
	position: absolute;
	width: 14px;
	height: 14px;
	border: 2px solid currentColor;
	animation: gs-lift 1.2s var(--gs-ease) infinite;
}

.gs-loader > span:nth-child(1) { left: 8px; top: 0; background: var(--gs-surface); }
.gs-loader > span:nth-child(2) { left: 4px; top: 4px; background: currentColor; animation-delay: .12s; }
.gs-loader > span:nth-child(3) { left: 0; top: 8px; background: var(--gs-yellow); animation-delay: .24s; }

.is-waiting > .gs-icon {
	display: none;
}

/* ---------- Content entering (innkoma efnis) — once, when it comes into view ---------- */

.gs-reveal > * {
	opacity: 0;
	transform: translateY(8px);
}

.gs-reveal.is-in > * {
	opacity: 1;
	transform: none;
	transition:
		opacity var(--gs-slow) var(--gs-ease) calc(min(var(--i, 0), 8) * var(--gs-stagger)),
		transform var(--gs-slow) var(--gs-ease) calc(min(var(--i, 0), 8) * var(--gs-stagger));
}

/* Charts and timelines below the fold wait (at their first frame) until they are seen. */
.gs-wait,
.gs-wait * {
	animation-play-state: paused !important;
}

/* Timeline: the line draws down item by item; each event appears as the line reaches it. */
.gs-timeline__rail::before,
.gs-cp-tl__rail::before {
	transform-origin: top;
	animation: gs-draw calc(var(--gs-narrative) / 4) linear both;
	animation-delay: calc(min(var(--i, 0), 8) * var(--gs-narrative) / 8);
}

.gs-timeline__body,
.gs-cp-tl__body {
	animation: gs-in-left var(--gs-slow) var(--gs-ease) both;
	animation-delay: calc(80ms + min(var(--i, 0), 8) * var(--gs-narrative) / 8);
}

/* Front-page heading: a highlight slides under the key words, once (480 ms, 200 ms delay). */
.gs-hl-hero {
	background-image: linear-gradient(#fff, #fff);
	background-repeat: no-repeat;
	background-position: 0 86%;
	background-size: 100% 30%;
	animation: gs-hl 480ms var(--gs-ease) 200ms both;
}

/* Ads (when a network fills a slot): the space is reserved, the ad fades in. */
.gs-ad ins[data-ad-status="filled"],
.gs-ad iframe {
	animation: gs-fade-in var(--gs-slow) var(--gs-ease) both;
}

/* "Vista" keeps its width when the label changes. */
[data-gs-save] {
	min-width: 92px;
	justify-content: center;
}

@keyframes gs-in-down { from { opacity: 0; transform: translateY(-4px); } }
@keyframes gs-in-left { from { opacity: 0; transform: translateX(-6px); } }
@keyframes gs-hl { from { background-size: 0% 30%; } }
@keyframes gs-lift { 50% { transform: translate(2px, -3px); } }
@keyframes gs-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

@media (prefers-reduced-motion: reduce) {
	.gs-reveal > * { opacity: 1; transform: none; }
	.gs-loader > span,
	.gs-skel,
	.gs-suggest.is-open .gs-suggest__item,
	.gs-timeline__rail::before,
	.gs-cp-tl__rail::before,
	.gs-timeline__body,
	.gs-cp-tl__body,
	.gs-hl-hero {
		animation: none;
	}
}