/* Avskedssidan. Fristående kopia av förstasidans uttryck (src/app.css + src/routes/+page.svelte):
   samma palett i mörkt läge, samma typsnitt, tassar och pulslinje. Ingen JavaScript och inga
   inline-stilar, så Caddy kan servera den med en strikt CSP. */

@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 200 900; font-display: swap;
	src: url('/fonts/source-sans-3-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 200 900; font-display: swap;
	src: url('/fonts/source-sans-3-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 200 900; font-display: swap;
	src: url('/fonts/source-serif-4-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 200 900; font-display: swap;
	src: url('/fonts/source-serif-4-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
	--red: #e42313; --accent: var(--red);
	--bg: #1a1914; --panel: #211f1c; --line: #393730; --ink: #f2efe9; --muted: #a39f97;
	--serif: 'Source Serif 4', Georgia, serif;
	color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg); color: var(--ink); font: 15px/1.6 'Source Sans 3', system-ui, -apple-system, sans-serif; }
h1, h2 { font-family: var(--serif); font-weight: 600; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { fill: currentColor; }

.land { position: relative; overflow: hidden; max-width: 1040px; min-height: 100vh; margin: 0 auto; padding: 0 24px 64px;
	display: flex; flex-direction: column; }
.land > header, .land > main, .land > footer { position: relative; z-index: 1; }
.land > main { flex: 1; }

/* Diskreta djurspår i bakgrunden */
.land-paws { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.paw { position: absolute; color: var(--accent); opacity: .05; }
.paw svg { width: 100%; height: 100%; display: block; }
.paw-1 { left: 6%;  top: 20%; width: 54px; height: 54px; transform: translate(-50%, -50%) rotate(-20deg); }
.paw-2 { left: 93%; top: 15%; width: 44px; height: 44px; transform: translate(-50%, -50%) rotate(24deg); }
.paw-3 { left: 12%; top: 60%; width: 40px; height: 40px; transform: translate(-50%, -50%) rotate(8deg); }
.paw-4 { left: 88%; top: 54%; width: 50px; height: 50px; transform: translate(-50%, -50%) rotate(16deg); }
.paw-5 { left: 78%; top: 86%; width: 38px; height: 38px; transform: translate(-50%, -50%) rotate(-10deg); }
.paw-6 { left: 18%; top: 90%; width: 36px; height: 36px; transform: translate(-50%, -50%) rotate(22deg); }

/* Ordmärke med tass-spår */
.land-top { display: flex; align-items: center; justify-content: center; padding: 28px 0 4px; }
.brandwrap { position: relative; display: inline-flex; align-items: center; font-family: var(--serif); font-weight: 600;
	font-size: 38px; letter-spacing: .2px; line-height: 1; padding-bottom: 28px; }
.brand-text { position: relative; z-index: 1; }
.pawtrail { position: absolute; left: 2px; right: 2px; bottom: 0; height: 22px; z-index: 2; }
.pawprint { position: absolute; width: 13px; height: 13px; opacity: 0; color: var(--red);
	transform: scale(.3) rotate(var(--rot)); animation: pawstep .5s ease-out forwards; }
.pawprint svg { width: 100%; height: 100%; display: block; }
.step-1 { left: 5%;  top: 0;   --rot: 80deg;  --op: 1;  animation-delay: 0s; }
.step-2 { left: 22%; top: 8px; --rot: 100deg; --op: 1;  animation-delay: .12s; }
.step-3 { left: 39%; top: 0;   --rot: 80deg;  --op: .8; animation-delay: .24s; }
.step-4 { left: 56%; top: 8px; --rot: 100deg; --op: .6; animation-delay: .36s; }
.step-5 { left: 72%; top: 0;   --rot: 80deg;  --op: .4; animation-delay: .48s; }
.step-6 { left: 88%; top: 8px; --rot: 100deg; --op: .2; animation-delay: .6s; }
@keyframes pawstep {
	0%   { opacity: 0;         transform: scale(.3) rotate(var(--rot)); }
	60%  { opacity: var(--op); transform: scale(1.12) rotate(var(--rot)); }
	100% { opacity: var(--op); transform: scale(1) rotate(var(--rot)); }
}

.eyebrow { display: block; text-align: center; font-size: 12.5px; font-weight: 800; text-transform: uppercase;
	letter-spacing: 1.4px; color: var(--muted); margin-bottom: 22px; }
.eyebrow::after { content: ''; display: block; width: 34px; height: 2px; margin: 12px auto 0;
	background: color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 2px; }

/* Hero */
.land-hero { padding: 52px 0 8px; text-align: center; }
.land-hero h1 { font-size: 60px; line-height: 1.04; margin: 0 0 20px; letter-spacing: -1.4px; }
.land-hero .lead { color: var(--muted); font-size: 20px; max-width: 620px; margin: 0 auto; line-height: 1.55; }

/* Pulslinjen: ritas upp en gång, gnistan löper genom den en gång och slocknar i det platta. */
.pulse { position: relative; margin: 44px auto 56px; width: min(760px, 100%); height: 84px; }
.pulse svg { width: 100%; height: 100%; display: block; overflow: visible; }
.pulse-base { fill: none; stroke: color-mix(in srgb, var(--accent) 40%, var(--line)); stroke-width: 2;
	stroke-linecap: round; stroke-linejoin: round;
	stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: draw 2.2s .15s ease-out forwards; }
.pulse-spark { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
	stroke-dasharray: 42 1000; stroke-dashoffset: 1042; opacity: 0;
	filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 70%, transparent));
	animation: spark 4.2s 2.4s ease-in-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes spark { 0% { stroke-dashoffset: 1042; opacity: 0; } 6% { opacity: 1; } 70% { opacity: 1; } 100% { stroke-dashoffset: 42; opacity: 0; } }

/* Tack */
.thanks { margin: 40px auto 0; max-width: 640px; text-align: center; }
.thanks p { color: var(--muted); font-size: 17px; line-height: 1.7; margin: 0 0 16px; }
.thanks p:last-child { color: var(--ink); }

/* Vidare: ett spår tvärs över sidan där varje steg är ett nytt djur. Stegen sätts ut ett i taget,
   i sicksack som riktiga steg, och bleknar när de går ut ur bild till höger. */
.onward { margin-top: 56px; text-align: center; }
.trail { position: relative; height: 84px; margin: 0 0 36px; }
.track { position: absolute; width: 34px; height: 34px; color: var(--accent); opacity: 0;
	transform: translate(-50%, -50%) scale(.3) rotate(var(--rot)); animation: trackstep .6s ease-out forwards; }
.track svg { width: 100%; height: 100%; display: block; }
.track-1 { left: 5%;  top: 26px; --rot: 78deg;  --op: 1;   animation-delay: 1.6s; }
.track-2 { left: 16%; top: 58px; --rot: 102deg; --op: 1;   animation-delay: 1.95s; }
.track-3 { left: 27%; top: 26px; --rot: 78deg;  --op: 1;   animation-delay: 2.3s; }
.track-4 { left: 38%; top: 58px; --rot: 102deg; --op: 1;   animation-delay: 2.65s; }
.track-5 { left: 49%; top: 26px; --rot: 78deg;  --op: 1;   animation-delay: 3s; }
.track-6 { left: 60%; top: 58px; --rot: 102deg; --op: .9;  animation-delay: 3.35s; }
.track-7 { left: 71%; top: 26px; --rot: 78deg;  --op: .7;  animation-delay: 3.7s; }
.track-8 { left: 82%; top: 58px; --rot: 102deg; --op: .45; animation-delay: 4.05s; }
.track-9 { left: 93%; top: 26px; --rot: 78deg;  --op: .2;  animation-delay: 4.4s; }
@keyframes trackstep {
	0%   { opacity: 0;         transform: translate(-50%, -50%) scale(.3) rotate(var(--rot)); }
	60%  { opacity: var(--op); transform: translate(-50%, -50%) scale(1.12) rotate(var(--rot)); }
	100% { opacity: var(--op); transform: translate(-50%, -50%) scale(1) rotate(var(--rot)); }
}
.onward h2 { font-size: 34px; letter-spacing: -.5px; margin: 0 0 10px; line-height: 1.15; }
.later { font-family: var(--serif); font-size: 21px; color: var(--muted); margin: 0 0 34px; }
.note { color: var(--muted); font-size: 13.5px; max-width: 460px; margin: 0 auto; }

.land-foot { text-align: center; color: var(--muted); font-size: 13px; margin-top: 56px; }
.foot-paw { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; color: var(--accent); opacity: .8; }
.foot-paw svg { width: 100%; height: 100%; display: block; }

@media (max-width: 720px) {
	.brandwrap { font-size: 30px; }
	.land-hero { padding: 36px 0 4px; }
	.land-hero h1 { font-size: clamp(32px, 10vw, 44px); letter-spacing: -.8px; }
	.land-hero .lead { font-size: 18px; }
	.pulse { height: 66px; margin: 32px auto 48px; }
	.thanks p { font-size: 16px; }
	.onward { margin-top: 40px; }
	.trail { height: 64px; margin-bottom: 28px; }
	.track { width: 24px; height: 24px; }
	.track-1, .track-3, .track-5, .track-7, .track-9 { top: 20px; }
	.track-2, .track-4, .track-6, .track-8 { top: 44px; }
	.onward h2 { font-size: 28px; }
	.later { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
	.pawprint { animation: none; opacity: var(--op); transform: rotate(var(--rot)); }
	.track { animation: none; opacity: var(--op); transform: translate(-50%, -50%) rotate(var(--rot)); }
	.pulse-base { animation: none; stroke-dashoffset: 0; }
	.pulse-spark { animation: none; opacity: 0; }
}