/* Lost Cogs Collective — shared site styles */

/*The Lost Cogs Collective house font*/
@font-face {
	font-family: "Lost Cogs Collective";
	src: url("../fonts/LostCogsCollective-Regular.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

html {
	scroll-behavior: smooth;
	background-color: #000000;
	overflow-x: hidden;
}

body {
	margin: 0;
	padding: 0 150px;
	overflow-x: hidden;
	background-color: transparent;
	color: #ffffff;
	font-family: "Lost Cogs Collective", "Comic Sans MS", system-ui, sans-serif;
}

img, video {
	max-width: 100%;
}

.full-width {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

/*This is for horizontal centering*/

.container {
	max-width: 960px;
	margin: 0 auto;
}

section {
	text-align: center;
}

.section-gap {
	margin-top: 48px;
}

/*page header*/

.page-header {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 28px 0 8px 0;
}

.page-header .home-link {
	display: flex;
	align-items: center;
	gap: 16px;
	text-decoration: none;
	color: #ffffff;
}

.page-header .header-icon {
	width: 64px;
	height: 64px;
}

.page-header .header-title {
	font-size: clamp(1.4rem, 3vw, 2rem);
	line-height: 1.1;
}

.page-title {
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: normal;
	color: #f2f2f2;
	text-align: center;
	margin: 24px 0;
}

/*bg cogs*/

.hero {
	position: relative;
}

.float-cogs {
	position: fixed;
	inset: 0;
	z-index: -1;
	background-color: #000000;
	pointer-events: none;
}

.fc {
	position: absolute;
	will-change: transform;
}

.fc img {
	display: block;
	width: 100%;
	height: auto;
}

.fc-cw  { animation: spin-cw  var(--spin, 40s) linear infinite; }
.fc-ccw { animation: spin-ccw var(--spin, 40s) linear infinite; }

@keyframes spin-cw  { from { rotate: 0deg; }  to { rotate: 360deg; } }
@keyframes spin-ccw { from { rotate: 0deg; }  to { rotate: -360deg; } }

@media (prefers-reduced-motion: reduce) {
	.fc img { animation: none; }
}

/*hero fade*/

.hero-video {
	position: relative;
	display: block;
}

.hero-fade {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(to right, #000 0, transparent 70px),
		linear-gradient(to left, #000 0, transparent 70px),
		linear-gradient(to bottom, #000 0, transparent 50px),
		linear-gradient(to top, #000 0, transparent 50px);
}


/*menu*/

@keyframes wiggle {
	0%   { transform: rotate(-2.5deg) translate(0, 0.4px); }
	33%  { transform: rotate(2deg)    translate(0.4px, -0.4px); }
	66%  { transform: rotate(-1deg)   translate(-0.4px, 0.2px); }
	100% { transform: rotate(-2.5deg) translate(0, 0.4px); }
}

/*letter wiggle*/

.ww {
	display: inline-block;
}

.boil .w {
	display: inline-block;
}

.boil:hover .w,
.boil:focus-visible .w {
	animation: wiggle 0.4s steps(1, end) infinite;
}

.boil .w:nth-child(3n) {
	animation-delay: -0.13s;
}

.boil .w:nth-child(3n+2) {
	animation-delay: -0.27s;
}

@media (hover: none) {
	.menu-links a.here .w {
		animation: wiggle 0.4s steps(1, end) infinite;
	}
}

@media (prefers-reduced-motion: reduce) {
	.boil:hover .w,
	.boil:focus-visible .w,
	.menu-links a.here .w {
		animation: none;
	}
}

.menu {
	text-align: center;
	margin: 20px 0 30px 0;
}

.menu summary {
	display: inline-block;
	list-style: none;
	cursor: pointer;
	font-size: 1.4rem;
	letter-spacing: 3px;
	color: #f2f2f2;
	border: 2px solid #f2f2f2;
	padding: 8px 26px;
	user-select: none;
}

.menu summary::-webkit-details-marker {
	display: none;
}

.menu summary .arrow {
	display: inline-block;
	margin-left: 12px;
	width: 0;
	height: 0;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-top: 9px solid #f2f2f2;
	vertical-align: middle;
	transition: transform 0.2s ease;
}

.menu[open] summary .arrow {
	transform: rotate(180deg);
}

.menu-links {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding-top: 18px;
}

.menu-links a {
	display: inline-block;
	color: #f2f2f2;
	text-decoration: none;
	font-size: 1.5rem;
	letter-spacing: 2px;
	padding: 4px 16px;
}


/*tagline*/

.tagline {
	font-size: clamp(1.5rem, 3.3vw, 2.9rem);
	font-weight: normal;
	color: #f2f2f2;
	text-align: center;
	margin: 14px 0 0 0;
}

.about-text {
	font-size: 1.25rem;
	line-height: 1.7;
	color: #f2f2f2;
	max-width: 780px;
	margin: 0 auto;
}

.about-text p {
	margin: 0 0 1.2em 0;
}

/*case cards*/

.case-eyebrow {
	text-align: center;
	color: #888;
	letter-spacing: 3px;
	font-size: 1rem;
	margin: 24px 0 -16px 0;
}

.case-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
	text-align: left;
}

.case-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	border: 1px solid #333;
	padding: 22px;
	text-decoration: none;
	color: #f2f2f2;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.case-card:hover,
.case-card:focus-visible {
	border-color: #f2f2f2;
	transform: rotate(-0.6deg);
}

.case-card-client {
	color: #888;
	font-size: 0.9rem;
	letter-spacing: 2px;
}

.case-card-title {
	font-size: 1.3rem;
}

.case-card-blurb {
	color: #bbb;
	font-size: 0.95rem;
	line-height: 1.5;
}

/*work hero*/

.work-hero {
	display: block;
	width: 100vw;
	max-width: none;
	max-height: 55vh;
	object-fit: cover;
	margin: 10px calc(50% - 50vw) 0 calc(50% - 50vw);
}

/*Demo reels*/

.reel-heading {
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	font-weight: normal;
	color: #f2f2f2;
	margin: 0 0 14px 0;
}

.video-embed {
	padding: 60% 0 0 0;
	position: relative;
	margin-bottom: 40px;
}

.video-embed iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/*section headers*/

.team-header {
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: normal;
	color: #f2f2f2;
	margin: 0 0 24px 0;
}

.bio-text {
	font-size: 1.1rem;
	font-weight: normal;
	line-height: 1.6;
	color: #f2f2f2;
	max-width: 620px;
	margin: 16px auto 0 auto;
}

.bio-text p {
	margin: 0 0 1em 0;
}

.team-img {
	display: block;
	width: 60%;
	height: auto;
	margin: 0 auto;
}

.team-member {
	margin: 40px 0;
}

/*services*/

.service-block {
	margin-top: 80px;
}

/*placeholders*/

.placeholder {
	font-size: 1.1rem;
	line-height: 1.6;
	color: #888;
	max-width: 620px;
	margin: 0 auto 40px auto;
	border: 1px dashed #555;
	padding: 24px;
}

/*instagram*/

.insta-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	max-width: 720px;
	margin: 0 auto 32px auto;
}

.insta-grid a {
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
}

.insta-grid img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.insta-grid a:hover img,
.insta-grid a:focus-visible img {
	transform: scale(1.06);
	opacity: 0.85;
}

.follow-btn {
	display: inline-block;
	color: #f2f2f2;
	text-decoration: none;
	border: 2px solid #f2f2f2;
	padding: 10px 30px;
	font-size: 1.2rem;
	letter-spacing: 2px;
}

.follow-btn:hover,
.follow-btn:focus-visible {
	background-color: #f2f2f2;
	color: #020208;
}

/*For the contact form*/

#contact {
	padding-top: 10%;
}

.contact-email {
	text-align: center;
	color: #ccc;
	font-size: 1.1rem;
	margin: -6px 0 28px 0;
}

.contact-email a {
	color: #f2f2f2;
}

.contact-form {
	max-width: 520px;
	margin: 0 auto;
	text-align: left;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	background-color: black;
	color: white;
	border: 1px solid white;
	padding: 10px;
	margin-bottom: 14px;
	font-family: inherit;
	font-size: 1rem;
}

.contact-form ::placeholder {
	color: #999;
}

.contact-form input:focus,
.contact-form textarea:focus {
	outline: 2px solid #ff5a1f;
	outline-offset: 1px;
}

.contact-form button {
	display: block;
	margin: 0 auto;
	background-color: black;
	color: white;
	border: 1px solid white;
	padding: 10px 40px;
	font-family: inherit;
	font-size: 1rem;
	letter-spacing: 2px;
	cursor: pointer;
}

.contact-form button:hover {
	background-color: white;
	color: black;
}

/*thanks*/

.thanks-box {
	text-align: center;
	padding: 60px 0;
}

.thanks-box .big {
	font-size: clamp(2.2rem, 6vw, 3.5rem);
	margin: 0 0 20px 0;
	font-weight: normal;
	color: #f2f2f2;
}

.thanks-box p {
	font-size: 1.25rem;
	line-height: 1.6;
	color: #f2f2f2;
}

.thanks-box a {
	color: #f2f2f2;
}

/*credits*/

.credit-strip {
	margin-top: 56px;
}

.credit-label {
	color: #888;
	font-size: 1rem;
	letter-spacing: 2px;
	margin: 0 0 18px 0;
}

.credit-names {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 36px;
	font-size: 1.35rem;
	color: #ccc;
	margin: 0;
}

footer {
	text-align: center;
	color: #777;
	font-size: 0.85rem;
	padding: 60px 0 30px 0;
}

/*footer cog*/

.footer-cog {
	display: inline-block;
	width: 22px;
	height: 22px;
	margin-left: 10px;
	vertical-align: middle;
	cursor: pointer;
	transition: transform 0.4s ease;
}

@media (hover: hover) {
	.footer-cog:hover:not(.rolling-out):not(.rolling-in) {
		transform: rotate(120deg);
	}
}

.footer-cog.rolling-out,
.footer-cog.rolling-in {
	transition: none;
}

.footer-cog.rolling-out {
	animation: cog-out 3.3s linear forwards;
}

.footer-cog.rolling-in {
	animation: cog-in 2s forwards;
}

@keyframes cog-out {
	0.00%{ transform: translate(0.0px, 0.0px) scale(1.000, 1.000) rotate(0deg); animation-timing-function: ease-in-out; }
	1.67%{ transform: translate(-1.0px, -2.0px) scale(1.000, 1.000) rotate(-4deg); animation-timing-function: ease-in; }
	3.64%{ transform: translate(0.0px, 2.0px) scale(1.000, 1.000) rotate(0deg); }
	4.24%{ transform: translate(1.0px, 2.1px) scale(1.000, 1.000) rotate(4deg); }
	4.85%{ transform: translate(2.1px, 2.5px) scale(1.000, 1.000) rotate(7deg); }
	5.45%{ transform: translate(3.1px, 3.2px) scale(1.000, 1.000) rotate(11deg); }
	6.06%{ transform: translate(4.2px, 4.1px) scale(1.000, 1.000) rotate(15deg); }
	6.67%{ transform: translate(5.2px, 5.3px) scale(1.000, 1.000) rotate(19deg); }
	7.27%{ transform: translate(6.2px, 6.8px) scale(1.000, 1.000) rotate(22deg); }
	7.88%{ transform: translate(7.3px, 8.5px) scale(1.000, 1.000) rotate(26deg); }
	8.48%{ transform: translate(8.3px, 10.5px) scale(1.000, 1.000) rotate(30deg); }
	9.09%{ transform: translate(9.4px, 12.8px) scale(1.000, 1.000) rotate(34deg); }
	9.70%{ transform: translate(10.4px, 15.3px) scale(1.000, 1.000) rotate(37deg); }
	10.30%{ transform: translate(11.4px, 18.1px) scale(1.000, 1.000) rotate(41deg); }
	10.91%{ transform: translate(12.5px, 21.2px) scale(1.000, 0.916) rotate(45deg); }
	11.52%{ transform: translate(13.5px, 24.5px) scale(1.000, 0.804) rotate(49deg); }
	12.12%{ transform: translate(14.6px, 28.1px) scale(1.000, 0.692) rotate(52deg); }
	12.73%{ transform: translate(15.6px, 32.0px) scale(1.000, 0.580) rotate(56deg); }
	13.33%{ transform: translate(16.6px, 29.4px) scale(1.000, 0.692) rotate(60deg); }
	13.94%{ transform: translate(17.7px, 27.1px) scale(1.000, 0.804) rotate(64deg); }
	14.55%{ transform: translate(18.7px, 25.0px) scale(1.000, 0.916) rotate(67deg); }
	15.15%{ transform: translate(19.8px, 23.3px) scale(1.000, 1.000) rotate(71deg); }
	15.76%{ transform: translate(20.8px, 21.7px) scale(1.000, 1.000) rotate(75deg); }
	16.36%{ transform: translate(21.8px, 20.5px) scale(1.000, 1.000) rotate(79deg); }
	16.97%{ transform: translate(22.9px, 19.5px) scale(1.000, 1.000) rotate(82deg); }
	17.58%{ transform: translate(23.9px, 18.8px) scale(1.000, 1.000) rotate(86deg); }
	18.18%{ transform: translate(25.0px, 18.3px) scale(1.000, 1.000) rotate(90deg); }
	18.79%{ transform: translate(26.0px, 18.1px) scale(1.000, 1.000) rotate(94deg); }
	19.39%{ transform: translate(27.0px, 18.2px) scale(1.000, 1.000) rotate(97deg); }
	20.00%{ transform: translate(28.1px, 18.6px) scale(1.000, 1.000) rotate(101deg); }
	20.61%{ transform: translate(29.1px, 19.2px) scale(1.000, 1.000) rotate(105deg); }
	21.21%{ transform: translate(30.2px, 20.1px) scale(1.000, 1.000) rotate(109deg); }
	21.82%{ transform: translate(31.2px, 21.2px) scale(1.000, 1.000) rotate(112deg); }
	22.42%{ transform: translate(32.2px, 22.6px) scale(1.000, 1.000) rotate(116deg); }
	23.03%{ transform: translate(33.3px, 24.3px) scale(1.000, 0.969) rotate(120deg); }
	23.64%{ transform: translate(34.3px, 26.2px) scale(1.000, 0.881) rotate(124deg); }
	24.24%{ transform: translate(35.4px, 28.5px) scale(1.000, 0.793) rotate(127deg); }
	24.85%{ transform: translate(36.4px, 30.9px) scale(1.000, 0.705) rotate(131deg); }
	25.45%{ transform: translate(37.4px, 30.9px) scale(1.000, 0.723) rotate(135deg); }
	26.06%{ transform: translate(38.5px, 29.4px) scale(1.000, 0.811) rotate(139deg); }
	26.67%{ transform: translate(39.5px, 28.1px) scale(1.000, 0.899) rotate(142deg); }
	27.27%{ transform: translate(40.6px, 27.1px) scale(1.000, 0.987) rotate(146deg); }
	27.88%{ transform: translate(41.6px, 26.3px) scale(1.000, 1.000) rotate(150deg); }
	28.48%{ transform: translate(42.6px, 25.8px) scale(1.000, 1.000) rotate(154deg); }
	29.09%{ transform: translate(43.7px, 25.6px) scale(1.000, 1.000) rotate(157deg); }
	29.70%{ transform: translate(44.7px, 25.6px) scale(1.000, 1.000) rotate(161deg); }
	30.30%{ transform: translate(45.8px, 26.0px) scale(1.000, 1.000) rotate(165deg); }
	30.91%{ transform: translate(46.8px, 26.5px) scale(1.000, 1.000) rotate(168deg); }
	31.52%{ transform: translate(47.8px, 27.4px) scale(1.000, 0.971) rotate(172deg); }
	32.12%{ transform: translate(48.9px, 28.5px) scale(1.000, 0.909) rotate(176deg); }
	32.73%{ transform: translate(49.9px, 29.9px) scale(1.000, 0.848) rotate(180deg); }
	33.33%{ transform: translate(51.0px, 31.5px) scale(1.000, 0.787) rotate(183deg); }
	33.94%{ transform: translate(52.0px, 31.2px) scale(1.000, 0.815) rotate(187deg); }
	34.55%{ transform: translate(53.0px, 30.2px) scale(1.000, 0.876) rotate(191deg); }
	35.15%{ transform: translate(54.1px, 29.6px) scale(1.000, 0.937) rotate(195deg); }
	35.76%{ transform: translate(55.1px, 29.2px) scale(1.000, 0.999) rotate(198deg); }
	36.36%{ transform: translate(56.2px, 29.0px) scale(1.000, 1.000) rotate(202deg); }
	36.97%{ transform: translate(57.2px, 29.2px) scale(1.000, 0.998) rotate(206deg); }
	37.58%{ transform: translate(58.2px, 29.6px) scale(1.000, 0.964) rotate(210deg); }
	38.18%{ transform: translate(59.3px, 30.2px) scale(1.000, 0.929) rotate(213deg); }
	38.79%{ transform: translate(60.3px, 31.2px) scale(1.000, 0.894) rotate(217deg); }
	39.39%{ transform: translate(61.4px, 31.8px) scale(1.000, 0.880) rotate(221deg); }
	40.00%{ transform: translate(62.4px, 31.1px) scale(1.000, 0.915) rotate(225deg); }
	40.61%{ transform: translate(63.4px, 30.7px) scale(1.000, 0.950) rotate(228deg); }
	41.21%{ transform: translate(64.5px, 30.6px) scale(1.000, 0.984) rotate(232deg); }
	41.82%{ transform: translate(65.5px, 30.8px) scale(1.000, 1.000) rotate(236deg); }
	42.42%{ transform: translate(66.6px, 31.2px) scale(1.000, 1.000) rotate(240deg); }
	43.03%{ transform: translate(67.6px, 31.9px) scale(1.000, 1.000) rotate(243deg); }
	43.10%{ transform: translate(67.7px, 32.0px) scale(1.000, 1.000) rotate(244deg); animation-timing-function: cubic-bezier(0.5, 0.07, 0.75, 0.6); }
	100%{ transform: translate(var(--exit-x, 110vw), 32px) scale(1, 1) rotate(1440deg); }
}


@keyframes cog-in {
	0%   { transform: translate(var(--entry-x, -110vw), 32px) scale(1, 1) rotate(var(--entry-rot, -1440deg)); animation-timing-function: cubic-bezier(0.33, 0.67, 0.67, 1); }
	80%  { transform: translate(0, 32px) scale(1, 1) rotate(0deg); animation-timing-function: ease-in-out; }
	87%  { transform: translate(0, 34px) scale(1, 0.72) rotate(0deg); animation-timing-function: ease-in; }
	90%  { transform: translate(0, 20px) scale(1, 1.1) rotate(0deg); animation-timing-function: ease-out; }
	100% { transform: translate(0, 0) scale(1, 1) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
	.footer-cog, .footer-cog.rolling-out, .footer-cog.rolling-in { animation: none; transition: none; }
}

/*mobile*/

@media (max-width: 700px) {
	body {
		padding: 0 16px;
	}

	.team-img {
		width: 90%;
	}

	.page-header .header-icon {
		width: 48px;
		height: 48px;
	}
}