/* AriaMT2 tanıtım sayfası — elle yazılmış CSS, derleme gerekmez. */

/* ---------- Fontlar (yerel) ---------- */
@font-face {
	font-family: "Cinzel";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("../fonts/cinzel-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "Cinzel";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("../fonts/cinzel-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--void: #230002;
	--crimson: #8e0f14;
	--red: #c0171e;
	--gold: #e8c27a;
	--gold-hi: #fbe7b5;
	--cream: #f3e9dc;
	--dim: rgba(243, 233, 220, 0.62);
	--line: rgba(232, 194, 122, 0.22);

	--gap: 24px;                              /* kenarlardan boşluk */
	--rail-w: clamp(200px, 14vw, 330px);      /* sol butonlar */
	--toc-w: clamp(250px, 15vw, 320px);       /* sağ menü */
	--bar-h: 0px;                             /* mobil alt çubuk yüksekliği */
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	min-height: 100vh;
	font-family: "Inter", "Segoe UI", system-ui, sans-serif;
	color: var(--cream);
	background: #cfcfcf;
}

/* Sabit arka plan: background-attachment: fixed mobilde (iOS) bozuk çalıştığı için ayrı katman */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background: url("../img/bg.jpg") center / cover no-repeat;
}

img,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

button {
	font: inherit;
	color: inherit;
	cursor: pointer;
}

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

.skip {
	position: fixed;
	left: 12px;
	top: -60px;
	z-index: 10000;
	padding: 10px 16px;
	border-radius: 8px;
	background: var(--void);
	color: var(--gold-hi);
	text-decoration: none;
	transition: top 0.2s;
}

.skip:focus {
	top: 12px;
}

:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
}

/* ---------- Açılış duyurusu ---------- */
.popup-container2 {
	display: flex;
	position: fixed;
	inset: 0;
	padding: 16px;
	background: rgba(10, 0, 1, 0.66);
	justify-content: center;
	align-items: center;
	z-index: 9999;
}

.popup-container2[hidden] {
	display: none;
}

.popup2 {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: min(686px, 100%);
	max-height: 100%;
	padding: 20px;
	border-radius: 14px;
	background: linear-gradient(180deg, #2b0406, #170102);
	border: 1px solid var(--line);
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7);
}

.popup2 img {
	min-height: 0;
	max-height: calc(100dvh - 140px);
	width: auto;
	border-radius: 10px;
	object-fit: contain;
}

.close-btn2 {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	padding: 0;
	font-size: 24px;
	line-height: 1;
	color: var(--cream);
	background: rgba(35, 0, 2, 0.85);
	border: 1px solid var(--line);
	border-radius: 50%;
}

.bottom-close-btn {
	margin-top: 14px;
	padding: 10px 34px;
	font-family: "Cinzel", serif;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--gold-hi);
	background: linear-gradient(180deg, var(--red), var(--crimson));
	border: 1px solid rgba(251, 231, 181, 0.35);
	border-radius: 8px;
}

.close-btn2:hover,
.bottom-close-btn:hover {
	filter: brightness(1.15);
}

/* ---------- Sol: site butonları (üst) + Discord (alt) ---------- */
.rail {
	position: fixed;
	left: var(--gap);
	z-index: 50;
	width: var(--rail-w);
}

.rail--top {
	top: var(--gap);
	display: flex;
	flex-direction: column;
}

.rail--discord {
	bottom: var(--gap);
	display: block;
}

.rail a,
.rail--discord {
	transition: filter 0.25s ease, transform 0.25s ease;
}

.rail a img,
.rail--discord img {
	width: 100%;
}

.rail--top a:hover,
.rail--discord:hover {
	filter: brightness(1.15) drop-shadow(0 0 8px rgba(255, 190, 90, 0.5));
}

.rail--discord:hover {
	transform: translateY(-3px);
}

/* ---------- Ana içerik ---------- */
.main-content-wrapper {
	display: block;
	padding: 0 calc(var(--toc-w) + var(--gap) * 2) 0 calc(var(--rail-w) + var(--gap) * 2);
	overflow-x: clip; /* kenar ışığı yatay kaydırma açmasın */
}

.image-gallery {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}

.gallery-image {
	display: block;
	width: 100%;
	height: auto;
}

/* Menüden gidilen bölüm biraz boşlukla başlasın */
.tf-item {
	scroll-margin-top: 0;
}

/* ---------- Sağ menü (masaüstünde yüzen panel) ---------- */
.toc {
	position: fixed;
	right: var(--gap);
	top: 50%;
	z-index: 60;
	width: var(--toc-w);
	max-height: calc(100dvh - var(--gap) * 2);
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	color: var(--cream);
	background:
		radial-gradient(120% 60% at 50% 0%, rgba(192, 23, 30, 0.28), transparent 60%),
		linear-gradient(180deg, rgba(43, 4, 6, 0.96), rgba(22, 1, 2, 0.97));
	border: 1px solid var(--line);
	border-radius: 18px;
	box-shadow:
		0 28px 60px -24px rgba(20, 0, 0, 0.75),
		0 0 0 1px rgba(0, 0, 0, 0.35),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* İç çerçeve süsü */
.toc::before {
	content: "";
	position: absolute;
	inset: 6px;
	border: 1px solid rgba(232, 194, 122, 0.1);
	border-radius: 13px;
	pointer-events: none;
}

.toc__head {
	position: relative;
	padding: 18px 20px 10px;
	text-align: center;
}

.toc__logo {
	display: block;
	width: 78%;
	margin: 0 auto;
	transition: filter 0.25s;
}

.toc__logo:hover {
	filter: brightness(1.12);
}

.toc__sub {
	position: relative;
	margin: 8px 0 0;
	font-family: "Cinzel", serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--gold);
}

/* Altın çizgi + ortada baklava */
.toc__sub::after {
	content: "";
	display: block;
	height: 9px;
	margin: 10px auto 0;
	width: 70%;
	background:
		linear-gradient(45deg, transparent 40%, var(--gold) 41% 59%, transparent 60%) center / 9px 9px no-repeat,
		linear-gradient(90deg, transparent, var(--gold) 30% 42%, transparent 46% 54%, var(--gold) 58% 70%, transparent) center / 100% 1px no-repeat;
	opacity: 0.75;
}

.toc__close {
	display: none;
	position: absolute;
	top: 10px;
	right: 10px;
	width: 34px;
	height: 34px;
	padding: 0;
	font-size: 22px;
	line-height: 1;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--line);
	border-radius: 50%;
}

/* İlerleme göstergesi */
.toc__meter {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 4px 20px 12px;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dim);
}

.toc__meter span {
	white-space: nowrap;
}

.toc__meter b {
	color: var(--gold-hi);
	font-weight: 700;
}

.toc__meter i {
	position: relative;
	flex: 1;
	height: 3px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.08);
	overflow: hidden;
}

.toc__meter em {
	position: absolute;
	inset: 0;
	transform-origin: left;
	transform: scaleX(0);
	background: linear-gradient(90deg, var(--red), var(--gold));
}

.toc__body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 4px 12px 10px;
	scrollbar-width: thin;
	scrollbar-color: rgba(232, 194, 122, 0.35) transparent;
	-webkit-mask-image: linear-gradient(transparent, #000 10px, #000 calc(100% - 14px), transparent);
	mask-image: linear-gradient(transparent, #000 10px, #000 calc(100% - 14px), transparent);
}

.toc__list,
.toc__list ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.toc__group + .toc__group {
	margin-top: 8px;
}

.toc__label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 8px 8px 6px;
	font-family: "Cinzel", serif;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgba(232, 194, 122, 0.8);
}

.toc__label::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, var(--line), transparent);
}

/* Zaman çizelgesi: numaraları dikey çizgi bağlar */
.toc__group ol {
	position: relative;
}

.toc__group ol::before {
	content: "";
	position: absolute;
	left: 21px;
	top: 6px;
	bottom: 6px;
	width: 1px;
	background: linear-gradient(var(--line), rgba(232, 194, 122, 0.08));
}

.toc__link {
	--node: rgba(232, 194, 122, 0.35);
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 32px;
	padding: 5px 18px 5px 8px;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--dim);
	text-decoration: none;
	border-radius: 8px;
	transition: color 0.2s, background-color 0.2s;
}

/* Numara: çizgi üzerinde küçük madalyon */
.toc__num {
	position: relative;
	z-index: 1;
	flex: none;
	display: grid;
	place-items: center;
	width: 27px;
	height: 20px;
	font-family: "Cinzel", serif;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: rgba(232, 194, 122, 0.75);
	background: #1d0102;
	border: 1px solid var(--node);
	border-radius: 10px;
	transition: color 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.toc__text {
	position: relative;
	z-index: 1;
	min-width: 0;
}

/* Etkin satırın kurdele zemini (sağ ucu çatallı) */
.toc__link::before {
	content: "";
	position: absolute;
	inset: 1px 0 1px 2px;
	border-radius: 8px 0 0 8px;
	background: linear-gradient(90deg, var(--red), var(--crimson) 70%, rgba(142, 15, 20, 0.85));
	clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
	opacity: 0;
	transform: scaleX(0.92);
	transform-origin: left;
	transition: opacity 0.25s, transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.toc__link:hover {
	color: var(--cream);
	background: rgba(255, 255, 255, 0.04);
}

.toc__link:hover .toc__num {
	border-color: var(--gold);
}

/* Geçilen bölümler */
.toc__link.is-past .toc__num {
	color: var(--gold-hi);
	background: #4a0507;
	border-color: rgba(232, 194, 122, 0.5);
}

/* Şu anki bölüm */
.toc__link.is-active {
	color: #fff;
	font-weight: 700;
	background: none;
}

.toc__link.is-active::before {
	opacity: 1;
	transform: none;
}

.toc__link.is-active .toc__num {
	color: #2a0204;
	background: linear-gradient(180deg, var(--gold-hi), var(--gold));
	border-color: var(--gold-hi);
	box-shadow: 0 0 0 3px rgba(232, 194, 122, 0.18), 0 0 14px rgba(251, 231, 181, 0.45);
}

/* Alt düğmeler */
.toc__foot {
	display: flex;
	gap: 8px;
	padding: 12px 14px 14px;
	border-top: 1px solid rgba(232, 194, 122, 0.12);
}

.toc__foot button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 36px;
	min-width: 40px;
	padding: 0 10px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cream);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--line);
	border-radius: 9px;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.toc__foot .toc__top {
	flex: 1;
}

.toc__foot button:hover {
	color: var(--gold-hi);
	background: rgba(192, 23, 30, 0.35);
	border-color: rgba(232, 194, 122, 0.45);
}

.toc__foot button:disabled {
	opacity: 0.35;
	pointer-events: none;
}

.toc svg,
.toc-fab svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Mobil düğme ve perde masaüstünde yok */
.toc-fab,
.toc-scrim,
.mobil_menu {
	display: none;
}

/* Kısa ekranlarda menü sıkışsın */
@media (min-width: 1280px) and (max-height: 820px) {
	.toc__head { padding: 12px 18px 6px; }
	.toc__logo { width: 62%; }
	.toc__sub { margin-top: 4px; }
	.toc__sub::after { margin-top: 6px; }
	.toc__link { min-height: 28px; padding-top: 3px; padding-bottom: 3px; font-size: 13px; }
	.toc__label { padding-top: 6px; padding-bottom: 4px; }
	.toc__foot { padding: 8px 12px 10px; }
	.toc__foot button { height: 32px; }
}

/* ---------- Tablet ve mobil (1279 px ve altı) ---------- */
@media (max-width: 1279px) {
	:root {
		--gap: 12px;
		--bar-h: 74px;
	}

	.rail {
		display: none;
	}

	.main-content-wrapper {
		padding: 0 0 calc(var(--bar-h) + env(safe-area-inset-bottom));
	}

	/* Alt çubuk */
	.mobil_menu {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 40;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 18px;
		height: calc(var(--bar-h) + env(safe-area-inset-bottom));
		padding: 0 16px env(safe-area-inset-bottom);
		background: linear-gradient(180deg, rgba(35, 0, 2, 0.82), rgba(20, 0, 1, 0.94));
		border-top: 1px solid var(--line);
	}

	.mobil_menu a {
		display: block;
		flex: 0 1 auto;
	}

	.mobil_menu img {
		height: 56px;
		width: auto;
	}

	/* Bölümler düğmesi: alt çubuğun üstünde, sağda */
	.toc-fab {
		position: fixed;
		right: 14px;
		bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + 14px);
		z-index: 55;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		height: 44px;
		padding: 0 6px 0 14px;
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 0.04em;
		color: var(--cream);
		background: linear-gradient(180deg, #3a0508, #1d0102);
		border: 1px solid rgba(232, 194, 122, 0.4);
		border-radius: 22px;
		box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.7);
	}

	.toc-fab__count {
		display: grid;
		place-items: center;
		min-width: 32px;
		height: 32px;
		padding: 0 6px;
		font-family: "Cinzel", serif;
		font-size: 12px;
		color: #2a0204;
		background: linear-gradient(180deg, var(--gold-hi), var(--gold));
		border-radius: 16px;
	}

	.toc-scrim {
		position: fixed;
		inset: 0;
		z-index: 58;
		display: block;
		background: rgba(10, 0, 1, 0.5);
		opacity: 0;
		transition: opacity 0.25s;
	}

	.toc-scrim[hidden] {
		display: none;
	}

	.is-toc-open .toc-scrim {
		opacity: 1;
	}

	/* Panel: alt çubuğun üstünde yüzen kart */
	.toc {
		top: auto;
		right: var(--gap);
		bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + var(--gap));
		width: min(340px, calc(100vw - var(--gap) * 2));
		max-height: calc(100dvh - var(--bar-h) - env(safe-area-inset-bottom) - var(--gap) * 2);
		transform: translateY(12px) scale(0.97);
		transform-origin: 100% 100%;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.22s ease, transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0.25s;
	}

	.is-toc-open .toc {
		transform: none;
		opacity: 1;
		visibility: visible;
		transition-delay: 0s;
	}

	.is-toc-open .toc-fab {
		visibility: hidden;
	}

	.toc__close {
		display: grid;
		place-items: center;
	}

	.toc__logo {
		width: 56%;
	}

	.toc__link {
		min-height: 38px;
		font-size: 14px;
	}
}

@media (max-width: 420px) {
	.mobil_menu img {
		height: 50px;
	}
}

/* ---------- Tanıtım efekti: kenar rayları + belirme geçişi ----------
   Yalnızca transform/opacity canlandırılır (GPU katmanında, yeniden boyama yok).
   Destekleyen tarayıcılarda ışığın konumu CSS scroll-timeline ile, diğerlerinde JS ile sürülür. */

.tf-item {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.tf-item img {
	opacity: 0;
	transform: translate3d(0, 40px, 0) scale(0.985);
	transition: opacity 0.9s ease, transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.tf-item.is-in img {
	opacity: 1;
	transform: none;
}

/* Görsel belirirken üzerinden geçen ışık parlaması */
.tf-item::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(100deg, transparent 35%, rgba(255, 214, 150, 0.16) 50%, transparent 65%);
	transform: translate3d(-110%, 0, 0);
}

.tf-item.is-in::after {
	transform: translate3d(110%, 0, 0);
	transition: transform 1.6s cubic-bezier(0.4, 0, 0.2, 1) 0.25s;
}

.tf-rail {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 40px;
	z-index: 2;
	pointer-events: none;
	overflow: hidden;
	overflow: clip;
}

.tf-rail-l { left: -37px; }
.tf-rail-r { right: -37px; }

.tf-runner {
	position: absolute;
	inset: 0;
	will-change: transform;
}

.tf-fx {
	position: absolute;
	left: 50%;
	top: 0;
	opacity: 0;
	will-change: opacity;
}

.tf-streaks b {
	position: absolute;
	left: var(--x, 0);
	top: var(--y, 0);
	width: var(--w, 1px);
	height: var(--h, 140px);
	background: linear-gradient(transparent, rgba(255, 210, 80, 0.9) 38%, #fff6c8 50%, rgba(255, 210, 80, 0.9) 62%, transparent);
	opacity: 0;
	animation: tf-streak var(--d, 1.6s) linear var(--dl, 0s) infinite;
	animation-play-state: paused;
}

.tf-streaks b:nth-child(1) { --x: -1px; --y: -38vh; --h: 170px; --w: 2px; --d: 1.7s; }
.tf-streaks b:nth-child(2) { --x: 3px;  --y: -26vh; --h: 110px; --d: 1.3s; --dl: -0.5s; }
.tf-streaks b:nth-child(3) { --x: -4px; --y: -14vh; --h: 200px; --w: 2px; --d: 1.9s; --dl: -1.1s; }
.tf-streaks b:nth-child(4) { --x: 1px;  --y: -2vh;  --h: 130px; --d: 1.5s; --dl: -0.8s; }
.tf-streaks b:nth-child(5) { --x: -2px; --y: 10vh;  --h: 90px;  --d: 1.2s; --dl: -0.3s; }
.tf-streaks b:nth-child(6) { --x: 4px;  --y: 20vh;  --h: 180px; --w: 2px; --d: 1.8s; --dl: -1.4s; }
.tf-streaks b:nth-child(7) { --x: -3px; --y: 30vh;  --h: 120px; --d: 1.4s; --dl: -0.6s; }
.tf-streaks b:nth-child(8) { --x: 0;    --y: -32vh; --h: 80px;  --d: 1.1s; --dl: -0.9s; }

.tf-embers b {
	position: absolute;
	left: -1.5px;
	top: var(--y, 0);
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #fff0a8;
	box-shadow: 0 0 4px rgba(255, 225, 110, 0.8);
	opacity: 0;
	animation: tf-ember var(--d, 2.2s) linear var(--dl, 0s) infinite;
	animation-play-state: paused;
}

.tf-embers b:nth-child(1) { --y: -28vh; --dx: 10px; }
.tf-embers b:nth-child(2) { --y: -6vh;  --dx: -12px; --d: 2.6s; --dl: -0.9s; }
.tf-embers b:nth-child(3) { --y: 14vh;  --dx: 8px;   --d: 2s;   --dl: -1.5s; }
.tf-embers b:nth-child(4) { --y: 32vh;  --dx: -7px;  --d: 2.4s; --dl: -0.4s; }

.tf-live .tf-streaks b,
.tf-live .tf-embers b {
	animation-play-state: running;
}

.tf-up .tf-streaks b,
.tf-up .tf-embers b {
	animation-direction: reverse;
}

@keyframes tf-streak {
	0%   { opacity: 0; transform: translate3d(0, 18vh, 0); }
	30%  { opacity: 1; }
	70%  { opacity: 1; }
	100% { opacity: 0; transform: translate3d(0, -18vh, 0); }
}

@keyframes tf-ember {
	0%   { opacity: 0; transform: translate3d(0, 40px, 0) scale(1); }
	20%  { opacity: 1; }
	100% { opacity: 0; transform: translate3d(var(--dx, 6px), -120px, 0) scale(0.3); }
}

@keyframes tf-run {
	from { transform: translate3d(0, -50vh, 0); }
	to   { transform: translate3d(0, calc(100% + 50vh), 0); }
}

@supports (animation-timeline: view()) {
	.image-gallery {
		view-timeline: --tf-gal block;
	}

	.tf-runner {
		animation: tf-run linear both;
		animation-timeline: --tf-gal;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tf-item img,
	.tf-item.is-in img {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.tf-item::after,
	.tf-rail {
		display: none;
	}

	.toc,
	.toc__link::before,
	.toc-scrim {
		transition: none !important;
	}
}