/* Motion is opt-in from the script: nothing is hidden unless html has .js */

@view-transition {
	navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: .45s;
	animation-timing-function: var(--ease-io);
}

/* Intro curtain, once per session */

.curtain {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: none;
	place-items: center;
	background: var(--black);
}

.js.is-intro .curtain {
	display: grid;
	animation: curtain-lift 1s var(--ease-io) 1.45s forwards;
}

.curtain__ring {
	width: min(38vw, 210px);
	aspect-ratio: 1;
	animation: ring-arrive 1.5s var(--ease) both;
}

@keyframes ring-arrive {
	from {
		opacity: 0;
		rotate: -200deg;
		scale: .72;
	}

	to {
		opacity: 1;
		rotate: 0deg;
		scale: 1;
	}
}

@keyframes curtain-lift {
	to {
		clip-path: inset(0 0 100% 0);
		visibility: hidden;
	}
}

/* Header ring turns slowly, always */

.site-head__ring img {
	animation: turn 48s linear infinite;
}

@keyframes turn {
	to {
		rotate: 1turn;
	}
}

/* Masked line rise for display type */

.js [data-rise] {
	display: block;
	overflow: hidden;
	padding-block: .06em;
	margin-block: -.06em;
}

.js [data-rise] > span {
	display: inline-block;
	transform: translateY(108%);
	transition: transform var(--crawl) var(--ease);
	transition-delay: calc(var(--i, 0) * 110ms + var(--wait, 0ms));
}

.js [data-rise].is-in > span {
	transform: none;
}

.js.is-intro .hero [data-rise] > span,
.js.is-intro .hero [data-reveal] {
	--wait: 1.9s;
}

/* Fade and lift */

.js [data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity var(--slow) ease, transform var(--slow) var(--ease);
	transition-delay: calc(var(--i, 0) * 90ms + var(--wait, 0ms));
}

.js [data-reveal].is-in {
	opacity: 1;
	transform: none;
}

/* Hairlines draw from the left */

.js .rule[data-reveal] {
	opacity: 1;
	transform: scaleX(0);
	transition: transform var(--crawl) var(--ease-io);
}

.js .rule[data-reveal].is-in {
	transform: scaleX(1);
}

/* Image wipe */

.js [data-wipe] {
	clip-path: inset(0 0 100% 0);
	transition: clip-path 1.25s var(--ease-io);
	transition-delay: calc(var(--i, 0) * 90ms);
}

.js [data-wipe].is-in {
	clip-path: inset(0);
}

.js [data-wipe] > img {
	scale: 1.14;
	transition: scale 1.7s var(--ease), transform .6s var(--ease);
}

.js [data-wipe].is-in > img {
	scale: 1;
}

/* Parallax inside a clipped frame, driven by --p from the script (-1 to 1) */

[data-parallax] > img,
[data-parallax] > video {
	translate: 0 calc(var(--p, 0) * -6%);
	scale: 1.12;
}

/* Marquee */

[data-marquee] .strip__track {
	animation: marquee var(--marquee-time, 60s) linear infinite;
}

[data-marquee]:hover .strip__track,
[data-marquee]:focus-within .strip__track {
	animation-play-state: paused;
}

@keyframes marquee {
	to {
		transform: translateX(-50%);
	}
}

/* A chart tile keeps its wipe and gains the lean and lift of the hover */

.js .tile [data-wipe] {
	transition: clip-path 1.25s var(--ease-io), transform .6s var(--ease), box-shadow .6s var(--ease), border-color var(--fast) ease;
	transition-delay: calc(var(--i, 0) * 90ms), 0s, 0s, 0s;
}

/* Chart wheels behind titles turn like a clock face, the serpent a little faster */

.page-head__wheel,
.art--wheel img {
	animation: turn 320s linear infinite;
}

.home-book__wheel {
	animation: turn 240s linear infinite reverse;
}

.art--ring img {
	animation: turn 140s linear infinite;
}

.ring-mark__snake {
	animation: turn 36s linear infinite;
}

.book3d {
	animation: float 7s ease-in-out infinite alternate;
}

@keyframes float {
	from {
		translate: 0 -7px;
	}

	to {
		translate: 0 9px;
	}
}

/* Line icons draw themselves when they arrive, and again under the pointer */

.js [data-draw] .icon,
.js .icon[data-draw] {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	opacity: 0;
	transition: stroke-dashoffset 1.7s var(--ease-io), opacity .3s ease;
	transition-delay: calc(var(--i, 0) * 110ms + var(--wait, 0ms) + 200ms);
}

.js .is-in[data-draw] .icon,
.js .is-in [data-draw] .icon,
.js .is-in .icon[data-draw],
.js [data-draw].is-in .icon {
	stroke-dashoffset: 0;
	opacity: 1;
}

@keyframes draw {
	from {
		stroke-dashoffset: 1;
	}

	to {
		stroke-dashoffset: 0;
	}
}

a:hover > .icon,
a:hover > span > .icon,
.zodiac__sign:hover .icon {
	stroke-dasharray: 1;
	animation: draw .9s var(--ease-io);
}

/* The signs drift one way above the prices and the other way below them */

.zodiac__track {
	animation: drift 90s linear infinite;
}

@keyframes drift {
	to {
		transform: translateX(calc(var(--period, 50%) * -1));
	}
}

.zodiac--foot .zodiac__track {
	animation-direction: reverse;
}

.zodiac:hover .zodiac__track,
.zodiac:focus-within .zodiac__track {
	animation-play-state: paused;
}

/* The numbers that sell the archive land one after another */

.js .archive__stats li {
	opacity: 0;
	translate: 0 14px;
	transition: opacity var(--slow) ease, translate var(--slow) var(--ease);
	transition-delay: calc(var(--i, 0) * 140ms + 250ms);
}

.js .archive.is-in .archive__stats li {
	opacity: 1;
	translate: none;
}

/* The ticker runs on its own and leans with the scroll */

.ticker__track {
	animation: marquee 46s linear infinite;
}

/* Rows slide a little as the page moves past them */

[data-drift] > * {
	translate: calc(var(--p, 0) * -70px) 0;
}

/* Sign-off name drifts with scroll, driven by --p */

.signoff__name {
	translate: calc(var(--p, 0) * -4%) 0;
}

/* Band line reveals word by word */

.js .band__line [data-word] {
	display: inline-block;
	opacity: .14;
	transition: opacity .7s ease;
	transition-delay: calc(var(--i, 0) * 45ms);
}

.js .band.is-in .band__line [data-word] {
	opacity: 1;
}

/* Phones: shorter travel, no cursor extras */

@media (max-width: 640px) {
	.js [data-reveal] {
		transform: translateY(12px);
	}
}

/* Calm mode and reduced motion: everything lands in its final state */

@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}

	.js.is-intro .curtain {
		display: none;
	}

	.site-head__ring img,
	.page-head__wheel,
	.art--wheel img,
	.art--ring img,
	.ring-mark__snake,
	.home-book__wheel,
	.book3d,
	.zodiac__track,
	.ticker__track,
	[data-marquee] .strip__track {
		animation: none;
	}

	.zodiac {
		overflow-x: auto;
	}

	[data-drift] > *,
	.ticker__track,
	.art {
		translate: none;
	}

	.js [data-rise] > span,
	.js [data-reveal],
	.js .rule[data-reveal],
	.js [data-wipe],
	.js [data-wipe] > img,
	.js .band__line [data-word] {
		opacity: 1;
		transform: none;
		clip-path: none;
		scale: 1;
		transition: none;
	}

	.js [data-draw] .icon,
	.js .icon[data-draw] {
		stroke-dashoffset: 0;
		opacity: 1;
		transition: none;
	}

	.js .archive__stats li {
		opacity: 1;
		translate: none;
		transition: none;
	}

	.book3d {
		transform: rotateY(-18deg);
		transition: none;
	}

	.book3d__face::after {
		display: none;
	}

	[data-parallax] > img,
	[data-parallax] > video,
	.signoff__name {
		translate: none;
		scale: 1;
	}
}

html[data-motion="calm"].js.is-intro .curtain {
	display: none;
}

html[data-motion="calm"] .site-head__ring img,
html[data-motion="calm"] .page-head__wheel,
html[data-motion="calm"] .art--wheel img,
html[data-motion="calm"] .art--ring img,
html[data-motion="calm"] .ring-mark__snake,
html[data-motion="calm"] .home-book__wheel,
html[data-motion="calm"] .book3d,
html[data-motion="calm"] .zodiac__track,
html[data-motion="calm"] .ticker__track,
html[data-motion="calm"] [data-marquee] .strip__track {
	animation: none;
}

html[data-motion="calm"] .zodiac {
	overflow-x: auto;
}

html[data-motion="calm"] [data-drift] > *,
html[data-motion="calm"] .ticker__track,
html[data-motion="calm"] .art {
	translate: none;
}

html[data-motion="calm"].js [data-draw] .icon,
html[data-motion="calm"].js .icon[data-draw] {
	stroke-dashoffset: 0;
	opacity: 1;
	transition: none;
}

html[data-motion="calm"].js .archive__stats li {
	opacity: 1;
	translate: none;
	transition: none;
}

html[data-motion="calm"] .book3d {
	transform: rotateY(-18deg);
	transition: none;
}

html[data-motion="calm"] .book3d__face::after {
	display: none;
}

html[data-motion="calm"].js [data-rise] > span,
html[data-motion="calm"].js [data-reveal],
html[data-motion="calm"].js .rule[data-reveal],
html[data-motion="calm"].js [data-wipe],
html[data-motion="calm"].js [data-wipe] > img,
html[data-motion="calm"].js .band__line [data-word] {
	opacity: 1;
	transform: none;
	clip-path: none;
	scale: 1;
	transition: none;
}

html[data-motion="calm"] [data-parallax] > img,
html[data-motion="calm"] [data-parallax] > video,
html[data-motion="calm"] .signoff__name {
	translate: none;
	scale: 1;
}