/* ==========================================================================
 * Bevægelse.
 *
 * To regler holdes hele vejen igennem:
 *   1. Kun transform og opacity animeres — aldrig egenskaber der udløser
 *      layout. Det holder animationerne på compositor-tråden og ude af CWV.
 *   2. Alt slås fra under prefers-reduced-motion, nederst i filen.
 * ========================================================================== */

/* ------------------------------------------------------------ Hero-indgang */

/*
 * Heroen animerer ind ved load frem for ved scroll — den er over folden, så
 * der er ingen IntersectionObserver at vente på. Forsinkelserne er små og
 * forskudte, så blikket trækkes ned gennem indholdet.
 */
@keyframes tg-rise {
	from { opacity: 0; transform: translate3d(0, 22px, 0); }
	to   { opacity: 1; transform: none; }
}

@keyframes tg-rise-sm {
	from { opacity: 0; transform: translate3d(0, 12px, 0); }
	to   { opacity: 1; transform: none; }
}

@keyframes tg-slide-in {
	from { opacity: 0; transform: translate3d(28px, 0, 0); }
	to   { opacity: 1; transform: none; }
}

.tg-hero__content > * {
	animation: tg-rise .85s var(--tg-ease-out) both;
}
.tg-hero__content > :nth-child(1) { animation-delay: .05s; }
.tg-hero__content > :nth-child(2) { animation-delay: .14s; }
.tg-hero__content > :nth-child(3) { animation-delay: .23s; }
.tg-hero__content > :nth-child(4) { animation-delay: .32s; }
.tg-hero__content > :nth-child(5) { animation-delay: .41s; }

/* Tilmeldingerne kommer sidst — de er det, blikket skal ende på. */
.tg-hero__action {
	animation: tg-rise .8s var(--tg-ease-out) both;
}
.tg-hero__action:nth-child(1) { animation-delay: .36s; }
.tg-hero__action:nth-child(2) { animation-delay: .46s; }

/* Gitteret toner roligt op, så heroen ikke "popper". */
.tg-hero__grid { animation: tg-fade 1.6s var(--tg-ease-out) both; }
.tg-hero__photo { animation: tg-fade 2s var(--tg-ease-out) both, tg-hero-drift 28s var(--tg-ease) 2s infinite alternate; }

@keyframes tg-fade { from { opacity: 0; } }

/* ------------------------------------------------------- Gradient i bevægelse */

/*
 * Den fremhævede del af overskriften får en langsomt vandrende gradient.
 * background-position er billig at animere, når elementet allerede er
 * background-clip: text.
 */
.tg-gradient-text {
	background-size: 220% 100%;
	animation: tg-gradient-shift 9s var(--tg-ease) infinite alternate;
}

@keyframes tg-gradient-shift {
	from { background-position: 0% 50%; }
	to   { background-position: 100% 50%; }
}

/* ----------------------------------------------------- Reveals ved scroll */

/*
 * Basisreglen ligger i base.css. Her tilføjes retningsvarianter, så indhold
 * kan komme ind fra siden eller skalere op i stedet for altid nedefra.
 *
 * Ligesom basisreglen er starttilstanden scopet til .tg-anim, så alt er
 * synligt uden JavaScript og ved reduceret bevægelse.
 */
.tg-anim [data-tg-reveal="left"]  { transform: translate3d(-32px, 0, 0); }
.tg-anim [data-tg-reveal="right"] { transform: translate3d(32px, 0, 0); }
.tg-anim [data-tg-reveal="scale"] { transform: scale(.965); }
[data-tg-reveal].is-visible { transform: none; }

/* --------------------------------------------------------------- Knapper */

/*
 * Et lysstrejf der løber hen over primærknappen ved hover. ::after ligger
 * over fladen og flyttes med translate — ingen repaint af selve knappen.
 */
.tg-btn--primary { position: relative; overflow: hidden; isolation: isolate; }
.tg-btn--primary::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .28) 50%, transparent 80%);
	transform: translate3d(-120%, 0, 0);
	transition: transform .7s var(--tg-ease-out);
}
.tg-btn--primary:hover::after { transform: translate3d(120%, 0, 0); }

/* Ikonet i knappen skubber lidt frem ved hover. */
.tg-btn svg { transition: transform var(--tg-dur-fast) var(--tg-ease); }
.tg-btn:hover svg { transform: translateX(3px); }
.tg-btn--ghost:hover svg,
.tg-btn--quiet:hover svg { transform: none; }

/* --------------------------------------------------------------- Pakkekort */

/* Produktbilledet løfter sig en anelse, når kortet får hover. */
.tg-package__media img {
	transition: transform .5s var(--tg-ease-out);
	will-change: transform;
}
.tg-package:hover .tg-package__media img { transform: translateY(-6px) scale(1.04); }

/* Prisen får et lille løft med. */
.tg-package__now { transition: transform var(--tg-dur-fast) var(--tg-ease); }
.tg-package:hover .tg-package__now { transform: translateY(-1px); }

/* ------------------------------------------------------------ Trin-kort */

.tg-steps__num { transition: transform var(--tg-dur) var(--tg-ease-out); }
.tg-steps__item:hover .tg-steps__num { transform: scale(1.08) rotate(-4deg); }

/* --------------------------------------------------------------- Kort */

.tg-card--photo .tg-card__photo img {
	transition: transform .7s var(--tg-ease-out);
}
.tg-card--photo:hover .tg-card__photo img { transform: scale(1.05); }

/* ------------------------------------------------------------ Accordion */

/*
 * Panelet vises og skjules med hidden-attributten — den styrer både layout og
 * tilgængelighedstræet, og det skal den blive ved med.
 *
 * Et forsøg på at folde højden ud med grid-template-rows blev rullet tilbage:
 * 0fr/1fr-tricket kræver, at elementet altid er i flowet, og det bider med
 * hidden. Resultatet var et panel der ikke foldede ud.
 *
 * I stedet animeres indholdet, når panelet først er synligt. Effekten er den
 * samme for øjet, og funktionen kan ikke gå i stykker.
 */
.tg-accordion__panel:not([hidden]) > * {
	animation: tg-rise-sm .32s var(--tg-ease-out) both;
}

.tg-accordion__trigger > span:first-child {
	transition: transform var(--tg-dur-fast) var(--tg-ease);
}
.tg-accordion__trigger:hover > span:first-child { transform: translateX(2px); }

/* --------------------------------------------------------- Billedrammer */

.tg-media-split__figure img,
.tg-media-band img {
	transition: transform 1.1s var(--tg-ease-out);
}
.tg-media-split__figure:hover img,
.tg-media-band:hover img { transform: scale(1.03); }

/* ========================================================================
 * Reduceret bevægelse — slår alt dekorativt fra, men beholder synligheden.
 * ======================================================================== */

@media (prefers-reduced-motion: reduce) {
	.tg-hero__content > *,
	.tg-hero__action,
	.tg-hero__grid,
	.tg-hero__photo,
	.tg-gradient-text {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.tg-btn--primary::after { display: none; }

	.tg-package__media img,
	.tg-package__now,
	.tg-steps__num,
	.tg-card--photo .tg-card__photo img,
	.tg-media-split__figure img,
	.tg-media-band img {
		transition: none !important;
		transform: none !important;
	}

	.tg-accordion__panel:not([hidden]) > *,
	.tg-accordion__trigger > span:first-child {
		animation: none !important;
		transition: none !important;
		transform: none !important;
	}
}