@charset "UTF-8";
/* ==========================================================
   site.css: the one stylesheet for antonioar.com
   Every page, every screen size. Text is live (Barlow Condensed),
   images are only pictures.

   Contents
   1. Tokens       5. Home
   2. Base         6. About
   3. Banner       7. Project pages
   4. Header, nav, footer, shared pieces
   8. Scroll reveal
   ========================================================== */

/* ---------- 1. Tokens ---------- */
:root {
	--mint: #00E699;          /* brand mint: bars, underlines, banner */
	--ink: #111111;           /* headings */
	--text: #333333;          /* body text */
	--muted: #5c5c5c;         /* secondary text, passes contrast on the light background */
	--line: #dddddd;          /* dividers */
	--bg: #f7f7f7;            /* matches the project images exactly */
	--font: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
	--gutter: clamp(16px, 4vw, 64px);
	--max: 1320px;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

/* Pages cross-fade into each other instead of snapping (supporting browsers). */
@view-transition { navigation: auto; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-weight: 400;
	font-size: 20px;
	line-height: 1.45;
}

/* Diamond pattern (images/bg-diamonds.svg). On load it sweeps in
   from top left to bottom right, the first thing that moves. */
body.textured::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background: url(images/bg-diamonds.svg) center top / 1600px auto repeat;
	-webkit-mask-image: linear-gradient(135deg, #000 0%, #000 42%, transparent 58%, transparent 100%);
	mask-image: linear-gradient(135deg, #000 0%, #000 42%, transparent 58%, transparent 100%);
	-webkit-mask-size: 300% 300%;
	mask-size: 300% 300%;
	-webkit-mask-position: 0 0;
	mask-position: 0 0;
}
.first-visit body.textured::before { animation: diamond-wave 1.8s cubic-bezier(0.45, 0, 0.25, 1) both; }
@keyframes diamond-wave {
	from { -webkit-mask-position: 100% 100%; mask-position: 100% 100%; }
	to   { -webkit-mask-position: 0 0; mask-position: 0 0; }
}

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

a { color: inherit; }

h1, h2, h3, p { margin: 0; }

/* Even line lengths, no lonely last words. */
h1, h2, h3, .intro, .soon-banner p, .slot-status { text-wrap: balance; }
.section-note, .lede p { text-wrap: pretty; }

h1, h2, h3 {
	color: var(--ink);
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
}

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

.wrap {
	width: 100%;
	max-width: var(--max);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.visually-hidden {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap;
}

/* Mint bar behind a word: the brand's signature mark.
   Used by the big headings, the highlighted words and the nav. */
.bar {
	position: relative;
	z-index: 0;
	display: inline-block;
}
h1 .bar { white-space: nowrap; } /* one line, so the bar stays behind the word */
.bar::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: -0.12em;
	right: -0.12em;
	top: 52%;
	height: 0.32em;
	transform: translateY(-50%);
	transform-origin: left center;
	background: var(--mint);
}
/* Bars grow from left to right as they come into view (site.js adds .bar-in).
   On the big headings the bar starts first and the letters pop in as it
   grows, so they land as one piece. The highlighted words follow half a
   second later. */
.sr-ready .bar::before {
	transform: translateY(-50%) scaleX(0);
	transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.35s;
}
.sr-ready .bar.bar-in::before { transform: translateY(-50%) scaleX(1); }
.sr-ready h1 .bar::before { transition: transform 0.9s cubic-bezier(0.3, 0.7, 0.3, 1) 0.1s; }
.sr-ready .intro .bar::before { transition-delay: 0.6s; }

/* Comic-book letter pop: each letter scales 0 to 120% to 100% from its
   bottom centre, tilting -5deg to +5deg, one after another. */
.pop, .pop-space { display: inline-block; }
.pop-space { width: 0.22em; }
.pop {
	--i: 0;
	transform-origin: 50% 100%;
	animation: pop 0.62s ease-out backwards;
	animation-delay: calc(0.25s + var(--i) * 0.08s);
}
.pop:nth-child(2) { --i: 1; }  .pop:nth-child(3) { --i: 2; }  .pop:nth-child(4) { --i: 3; }
.pop:nth-child(5) { --i: 4; }  .pop:nth-child(6) { --i: 5; }  .pop:nth-child(7) { --i: 6; }
.pop:nth-child(8) { --i: 7; }  .pop:nth-child(9) { --i: 8; }  .pop:nth-child(10) { --i: 9; }
.pop:nth-child(11) { --i: 10; } .pop:nth-child(12) { --i: 11; }

/* Get in touch pops in the same way, once the copy has landed. */
.bubble-btn { transform-origin: 85% 100%; animation: pop 0.62s ease-out 1.1s backwards; }
@keyframes pop {
	0%   { transform: scale(0) rotate(-5deg); opacity: 0; }
	55%  { transform: scale(1.2) rotate(5deg); opacity: 1; }
	80%  { transform: scale(0.96) rotate(-1.5deg); }
	100% { transform: scale(1) rotate(0); }
}

/* ---------- 3. Banner ---------- */
/* To remove the banner later: delete the soon-banner block at the top
   of each page. Nothing else depends on it. */
.soon-banner {
	position: sticky;
	top: 0;
	z-index: 1000;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 4px 10px;
	padding: 11px 16px 10px;
	background: var(--mint);
	color: #000;
	font-weight: 600;
	font-size: 18px;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
}
.soon-banner a {
	color: #000;
	text-decoration: none;
	border-bottom: 2px solid #000;
	white-space: nowrap;
	transition: opacity 0.2s ease;
}
.soon-banner a:hover { opacity: 0.7; }
/* Home page, first visit: the banner drops in last, after everything else has landed. */
.banner-intro .soon-banner { animation: drop 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 1.9s backwards; }
@keyframes drop { from { transform: translateY(-100%); } }
.nudge { display: inline-block; animation: nudge 2.4s ease-in-out infinite; }
@keyframes nudge {
	0%, 100% { transform: translateX(0); }
	50%      { transform: translateX(4px); }
}

/* ---------- 4. Header, nav, footer, shared pieces ---------- */
.site-header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 16px 24px;
	padding-top: clamp(16px, min(4vw, 5vh), 50px);
	padding-bottom: clamp(20px, min(5vw, 6vh), 64px);
}

/* Logo: ANTONIO A/R, rebuilt as live text */
.logo {
	display: inline-flex;
	align-items: center;
	gap: 0.32em;
	color: #000;
	text-decoration: none;
	font-size: 32px;
	line-height: 1;
}
.logo-name { font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.logo-mark {
	position: relative;
	width: 1.15em;
	height: 1em;
	font-size: 0.62em;
	font-weight: 300;
}
.logo-mark span { position: absolute; line-height: 1; }
.logo-mark span:first-child { left: 0; top: -0.25em; }
.logo-mark span:last-child { right: 0; bottom: -0.3em; }
.logo-mark::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -0.35em;
	width: 0.11em;
	height: 1.7em;
	background: var(--mint);
	transform: translateX(-50%) rotate(20deg);
}

.site-nav ul {
	display: flex;
	gap: clamp(18px, 3vw, 36px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-nav a {
	position: relative;
	z-index: 0;
	display: inline-block;
	color: #000;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 24px;
	letter-spacing: 0.03em;
}
.site-nav a::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: -0.3em;
	right: -0.3em;
	top: 52%;
	height: 0.2em;
	transform: translateY(-50%) scaleX(0);
	transform-origin: left center;
	background: var(--mint);
	transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}
.site-nav a:hover::before,
.site-nav a[aria-current="page"]::before { transform: translateY(-50%) scaleX(1); }
.site-nav a[aria-current="page"] { font-weight: 700; }
/* Each item keeps the width of its bold version, so nothing shifts between pages. */
.site-nav a { text-align: center; }
.site-nav a::after {
	content: attr(data-label);
	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	font-weight: 700;
}

/* Project cards: home grid and Related Work */
.cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
	gap: clamp(28px, 4vw, 48px) clamp(16px, 2vw, 24px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.card a {
	display: block;
	text-align: center;
	text-decoration: none;
	transition: transform 0.2s ease-in-out;
}
.card a:hover, .card a:focus-visible { transform: scale(1.04); }
.card img { width: 100%; margin-bottom: 14px; }
.card-title { font-size: 21px; font-weight: 600; letter-spacing: 0.02em; }
.card-type {
	margin-top: 2px;
	color: var(--text);
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* Section heading with a line either side: RELATED WORK, OTHER FUN FACTS */
.rule-heading {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: clamp(24px, 3vw, 36px);
	font-size: 22px;
	letter-spacing: 0.03em;
	text-align: center;
}
.rule-heading::before,
.rule-heading::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--line);
}

/* Speech-bubble button */
.bubble-btn {
	position: relative;
	display: inline-block;
	padding: 10px 30px 9px;
	border-radius: 8px;
	background: var(--mint);
	color: #000;
	font-weight: 700;
	font-size: 26px;
	line-height: 1.1;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 0.02em;
	transition: transform 0.2s ease-in-out;
}
.bubble-btn::after {
	content: "";
	position: absolute;
	right: 22px;
	bottom: -14px;
	border-style: solid;
	border-width: 16px 14px 0 0;
	border-color: var(--mint) transparent transparent transparent;
}
.bubble-btn:hover, .bubble-btn:focus-visible { transform: scale(1.05); }

.site-footer {
	margin-top: clamp(64px, 8vw, 110px);
	padding-top: 24px;
	padding-bottom: 40px;
	border-top: 1px solid var(--line);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	color: var(--muted);
	font-size: 17px;
	letter-spacing: 0.02em;
}
.site-footer ul { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; }
.site-footer a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line); }
.site-footer a:hover { border-color: var(--mint); }

/* ---------- 5. Home ---------- */
.hello {
	text-align: center;
	padding-bottom: clamp(48px, 7vw, 90px);
}
.hello h1 {
	color: #333;
	line-height: 0.88;
	font-size: clamp(88px, 10.5vw, 150px);
	letter-spacing: 0.01em;
}
.hello h1 .bar::before { left: -0.15em; right: -0.15em; height: 0.3em; top: 45%; }
.intro {
	max-width: 36em;
	margin: clamp(16px, 2vw, 28px) auto 0;
	color: #333;
	font-size: clamp(21px, 2vw, 26px);
	line-height: 1.35;
}
.intro strong { font-weight: 700; color: var(--ink); text-transform: uppercase; }
.intro-2 { display: block; margin-top: 0.15em; }
.intro strong.bar::before { height: 0.34em; top: 80%; left: -0.06em; right: -0.06em; }
.squiggle {
	text-decoration: underline wavy var(--mint);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
	text-decoration-skip-ink: none;
}

/* Section intros: a heading, then a quieter italic line for context. */
.work-intro { max-width: 980px; margin: 0 auto clamp(36px, 4vw, 56px); }
.work-intro .rule-heading, .soon-work .rule-heading { margin-bottom: 14px; }
.section-note {
	max-width: 980px;
	margin: 0 auto clamp(32px, 4vw, 48px);
	color: var(--muted);
	font-style: italic;
	font-size: 20px;
	line-height: 1.45;
	text-align: center;
}
.section-note a { color: var(--ink); text-decoration-color: var(--mint); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Project cards on the home page arrive together, on load. */
.load-in > li { animation: rise 0.8s ease-out 0.5s both; }
@keyframes rise {
	from { opacity: 0; transform: translateY(40px); }
	to   { opacity: 1; transform: none; }
}

/* New Work Loading: case studies in progress, styled like a game's
   loading screen. The label under each says plainly what it is. */
.soon-work { margin-bottom: clamp(56px, 7vw, 96px); }
/* One wide slot with a build log: status lines roll up one after another. */
.build-slot {
	position: relative;
	max-width: 760px;
	height: clamp(120px, 16vw, 190px);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: rise 0.8s ease-out 0.4s both;
}
.build-slot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.build-slot polygon {
	fill: none;
	stroke: var(--mint);
	stroke-width: 2;
	stroke-dasharray: 12 9;
	vector-effect: non-scaling-stroke;
	animation: march 10s linear infinite;
}
@keyframes march { to { stroke-dashoffset: -210; } }
.build-log {
	position: relative;
	width: 100%;
	height: 1.5em;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
	color: var(--ink);
	font-weight: 500;
	font-size: clamp(19px, 2vw, 26px);
	letter-spacing: 0.02em;
	text-align: center;
}
.build-log li {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 8%;
	opacity: 0;
	transform: translateY(100%);
	transition: transform 0.6s cubic-bezier(0.3, 0.7, 0.3, 1), opacity 0.6s ease;
}
.build-log li.is-on { opacity: 1; transform: none; }
.build-log li.is-out { opacity: 0; transform: translateY(-100%); }
.build-log li:not(.is-on) .dots i { animation: none; }

/* Rewind icon before the past-work heading */
.rewind { display: inline-flex; align-items: center; gap: 0.4em; }
.rewind svg { width: 1.1em; height: 0.65em; fill: var(--mint); }

/* Loading dots: pop in one after another, all switch off, repeat. */
.mint { color: var(--mint); }
.dots i { display: inline-block; font-style: normal; color: var(--mint); font-weight: 700; transform-origin: 50% 100%; opacity: 0; animation: dot1 2.4s ease-out infinite; }
.dots i:nth-child(2) { animation-name: dot2; }
.dots i:nth-child(3) { animation-name: dot3; }
@keyframes dot1 { 0%, 8% { opacity: 0; transform: scale(0); } 16% { opacity: 1; transform: scale(1.5); } 22%, 80% { opacity: 1; transform: scale(1); } 88%, 100% { opacity: 0; transform: scale(1); } }
@keyframes dot2 { 0%, 22% { opacity: 0; transform: scale(0); } 30% { opacity: 1; transform: scale(1.5); } 36%, 80% { opacity: 1; transform: scale(1); } 88%, 100% { opacity: 0; transform: scale(1); } }
@keyframes dot3 { 0%, 36% { opacity: 0; transform: scale(0); } 44% { opacity: 1; transform: scale(1.5); } 50%, 80% { opacity: 1; transform: scale(1); } 88%, 100% { opacity: 0; transform: scale(1); } }

/* ---------- 6. About ---------- */
.hey { text-align: center; }
.hey h1 { color: #333; font-size: clamp(56px, min(10.5vw, 11vh), 150px); }
.hey h1 .bar::before { height: 0.3em; top: 45%; left: -0.1em; right: -0.1em; }
.kicker {
	margin-top: clamp(4px, 1vh, 12px);
	color: var(--muted);
	font-style: italic;
	font-size: clamp(19px, 1.7vw, 23px);
}
.lede {
	max-width: 44em;
	margin: clamp(18px, 3vh, 36px) auto 0;
	color: #222;
	font-size: clamp(19px, 1.7vw, 23px);
	line-height: 1.45;
	text-align: center;
}
.lede p + p { margin-top: 0.6em; }
.lede p:last-child { margin-top: 1.1em; }
.lede strong { font-weight: 600; color: var(--ink); }
.about-cta { margin-top: clamp(22px, 3.6vh, 44px); text-align: center; }

/* Sized to the screen height so, on most screens, his eyes
   peek above the fold when the About page opens. */
.portrait {
	width: min(600px, 90%, 46vh);
	margin: 6px auto 0;
}

/* Three columns on wide screens; two plus one on tablets;
   one stack on phones. Images keep the original site's scale. */
.about-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1.2fr;
	grid-template-areas: "skills awards clients";
	margin-top: clamp(64px, 8vw, 110px);
}
.col-skills { grid-area: skills; }
.col-awards { grid-area: awards; }
.col-clients { grid-area: clients; }
.about-col { padding: 0 clamp(20px, 3vw, 48px); text-align: center; }
.sr-ready .about-col h2 .bar::before { transition-duration: 1.6s; transition-delay: 0.6s; }
.sr-ready .col-awards h2 .bar::before { transition-delay: 1.1s; }
.sr-ready .col-clients h2 .bar::before { transition-delay: 1.6s; }
.about-col + .about-col { border-left: 1px solid var(--line); }
.about-col h2 { font-size: 22px; letter-spacing: 0.03em; }
.about-col .sub { margin-top: 2px; color: var(--muted); font-style: italic; font-size: 16px; }

.skills, .logos { margin: 32px 0 0; padding: 0; list-style: none; }
.skills { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 28px; }
.skills img { margin: 0 auto 14px; }
.skills span { display: block; font-size: 19px; line-height: 1.2; color: #222; }

.logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; row-gap: 36px; }
.logos li { display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 0 20px; }
.logos.two li { flex: 0 0 50%; }
.logos.three li { flex: 0 0 33.333%; }

.facts-section { margin-top: clamp(80px, 10vw, 140px); }
.facts {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 56px 32px;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	text-align: center;
}
.facts .art { height: 120px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 18px; }
.facts .pre { display: block; font-size: 17px; text-transform: uppercase; letter-spacing: 0.03em; color: #222; }
.facts .big { display: block; font-size: 24px; font-weight: 700; text-transform: uppercase; color: #000; }
.facts .slash { color: var(--mint); }

/* ---------- 7. Project pages ---------- */
.project-head { text-align: center; }
.project-head h1 { font-size: clamp(36px, 4.5vw, 58px); }
.project-head .subtitle {
	margin-top: 8px;
	font-size: clamp(16px, 1.5vw, 19px);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #222;
}
.project-hero { margin: clamp(16px, 2vw, 24px) auto 0; max-width: 1280px; }
.project-hero img { width: 100%; }
.credits { margin-top: 4px; text-align: center; }
.credits .roles { font-size: 16px; text-transform: uppercase; letter-spacing: 0.03em; color: #222; }
.credits .roles span + span::before { content: "\2022"; color: var(--mint); margin: 0 0.6em; }
.credits .agency { margin-top: 2px; font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 15px; color: var(--muted); }

.video {
	position: relative;
	width: min(100%, 940px);
	margin: clamp(40px, 5vw, 64px) auto 0;
	aspect-ratio: 16 / 9;
	background: #e9e9e9;
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.detail { max-width: 1280px; margin: clamp(40px, 5vw, 64px) auto 0; }
.slice { display: block; width: 100%; height: auto; }

.related { margin-top: clamp(56px, 7vw, 90px); }
.related .cards { max-width: 1000px; margin: 0 auto; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

/* ---------- Breakpoints ---------- */
@media (max-width: 1100px) {
	.about-grid {
		grid-template-columns: 1fr 1fr;
		grid-template-areas: "skills awards" "clients clients";
		row-gap: 64px;
	}
	.col-clients { border-left: 0 !important; border-top: 1px solid var(--line); padding-top: 56px; }
	.col-clients .logos { max-width: 640px; margin-left: auto; margin-right: auto; }
	.col-clients .logos li { flex-basis: 25%; }
	.facts { grid-template-columns: repeat(2, 1fr); max-width: 560px; }
}

@media (max-width: 720px) {
	.about-grid { grid-template-columns: 1fr; grid-template-areas: "skills" "awards" "clients"; row-gap: 56px; }
	.about-col + .about-col { border-left: 0; border-top: 1px solid var(--line); padding-top: 56px; }
	.skills { max-width: 420px; margin-left: auto; margin-right: auto; }
	.logos { max-width: 420px; margin-left: auto; margin-right: auto; }
	.col-clients .logos li { flex-basis: 33.333%; }
}

@media (max-width: 560px) {
	body { font-size: 18px; }
	.soon-banner { font-size: 14px; padding: 9px 12px 8px; }
	.site-header { flex-direction: column; gap: 22px; padding-top: 28px; padding-bottom: 36px; }
	.hey h1 { font-size: clamp(40px, 14vw, 72px); }
	.hello h1 { font-size: clamp(64px, 22vw, 96px); }
	.lede { font-size: 17px; line-height: 1.38; }
	.hey h1 { margin-top: -8px; }
	.kicker { font-size: 17px; }
	.soon-banner { font-size: 13px; letter-spacing: 0.06em; gap: 2px 8px; }
	.logo { font-size: 40px; }
	.site-nav ul { gap: 32px; }
	.site-nav a { font-size: 22px; }
	.build-log { height: 2.6em; font-size: 19px; }
	.build-slot { height: 150px; }
	.cards { gap: 40px; }
	.wrap { padding-left: 14px; padding-right: 14px; }
	.intro { padding: 0 6px; }
	.soon-banner p { max-width: 100%; }
	.col-clients .logos li { flex-basis: 50%; }
	/* Logos fill a box about the size of the expertise icons. */
	.logos li { min-height: 80px; }
	.logos img { width: auto; height: auto; max-width: 130px; max-height: 64px; min-height: 40px; object-fit: contain; }
	.bubble-btn { font-size: 24px; }
	.site-footer { justify-content: center; text-align: center; }
}

/* ---------- 8. Scroll reveal ---------- */
/* site.js adds .sr-ready only when JavaScript runs, so the
   site still shows everything if scripts fail. */
.sr-ready [data-sr] {
	opacity: 0;
	transform: translateY(60px);
	transition: opacity 0.9s ease-out, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sr-ready [data-sr].sr-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.sr-ready [data-sr] { opacity: 1; transform: none; transition: none; }
	.card a, .bubble-btn { transition: none; }
	.sr-ready .bar::before { transform: translateY(-50%); transition: none; }
	.pop, .load-in > li, .build-slot, body.textured::before, .build-slot polygon, .dots i, .nudge, .bubble-btn, .banner-intro .soon-banner { animation: none; }
	.build-log li { transition: none; }
	.dots i { opacity: 1; }
}