/*
	Site-specific styles for eliarbogast.com.
	Loaded after main.css (the HTML5 UP Astral template).
	Colour tokens (--ember, --teal, ...) are defined at the top of main.css.
*/

/* Cellular-automaton background */

	#automaton {
		position: fixed;
		inset: 0;
		width: 100%;
		height: 100%;
		z-index: -2;
		image-rendering: auto;	/* smooth scaling blends each cell into its neighbours */
		pointer-events: none;
		opacity: 0.9;
	}

	/* Texture + vignette over the automaton, echoing the original overlay.png treatment. */
	body::before {
		content: '';
		position: fixed;
		inset: 0;
		z-index: -1;
		pointer-events: none;
		background:
			url("images/overlay.png"),
			radial-gradient(ellipse at 50% 45%, rgba(11, 11, 9, 0.15) 30%, rgba(11, 11, 9, 0.7) 100%);
	}

/* Intro */

	#main > .panel.intro .roles {
		margin: 0.5em 0 0 0;
		padding-left: 1.25em;
	}

		#main > .panel.intro .roles li {
			padding-left: 0.25em;
		}

	@media screen and (max-width: 980px) {

		#main > .panel.intro .roles {
			list-style-position: inside;
			padding-left: 0;
		}

	}

	/* Rainbow tagline (links to Projects). The colours sweep in when the home panel is
	   shown, fan out on hover, and sweep back in when the pointer leaves. */
	.tagline-wrap {
		margin-top: 1em;
	}

	.tagline {
		display: inline-block;
		text-decoration: none;
		cursor: pointer;
		background-color: #CA4246;
		background-image: linear-gradient(
			45deg,
			#CA4246 16.666%,
			#E16541 16.666%,
			#E16541 33.333%,
			#F18F43 33.333%,
			#F18F43 50%,
			#8B9862 50%,
			#8B9862 66.666%,
			#476098 66.666%,
			#476098 83.333%,
			#A7489B 83.333%);
		background-size: 100%;
		background-repeat: repeat;
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
		animation: tagline-sweep 1.75s ease forwards;
	}

		.tagline:hover,
		.tagline:focus-visible {
			animation: tagline-fan 1.5s ease-in forwards;
		}

	@keyframes tagline-sweep {
		0%   { background-size: 650%; }
		40%  { background-size: 650%; }
		100% { background-size: 100%; }
	}

	@keyframes tagline-fan {
		0%   { background-size: 100%; }
		80%  { background-size: 650%; }
		100% { background-size: 650%; }
	}

/* CV */

	.cv-label {
		font-family: var(--font-mono);
		font-size: 0.7em;
		font-weight: 400;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--ember-bright);
		margin: 2em 0 0.75em 0;
	}

	#cv .cv-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 0.75em 1.5em;
		margin-bottom: 0;
	}

	.cv-download {
		font-family: var(--font-mono);
		font-size: 0.65em;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		text-decoration: none;
		color: var(--ink);
		border: 1px solid rgba(255, 255, 255, 0.2);
		padding: 0.55em 1.1em;
		transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease;
	}

		.cv-download:hover,
		.cv-download:focus-visible {
			border-color: var(--ember);
			background-color: rgba(213, 81, 55, 0.12);
			color: #fff;
		}

	#cv .cv-skills p {
		margin-bottom: 0.75em;
	}

	#cv .cv-education p {
		margin-bottom: 0;
	}

	.cv-role {
		margin-bottom: 2.25em;
	}

		.cv-role:last-child {
			margin-bottom: 0;
		}

		.cv-role h3 {
			margin-bottom: 0.4em;
			line-height: 1.3;
		}

		.cv-role .org {
			display: block;
			margin-top: 0.35em;
			font-family: var(--font-mono);
			font-size: 0.6em;
			font-weight: 400;
			letter-spacing: 0.08em;
			text-transform: uppercase;
			color: var(--teal);
		}

		.cv-role a {
			color: var(--ember-bright);
			text-decoration: underline;
			text-decoration-thickness: 1px;
			text-underline-offset: 0.2em;
		}

			.cv-role a:hover {
				color: var(--ink);
			}

			.cv-role .org a {
				color: inherit;
			}

			.cv-role .org a:hover {
				color: var(--ink);
			}

		.cv-role ul {
			list-style-type: square;
			margin-bottom: 0;
		}

/* Projects */

	#projects header {
		text-align: center;
		margin-bottom: 1.5em;
	}

	/* "Pinball Mode?" button under the Projects heading, into /pinball */
	.pinball-link {
		display: inline-block;
		margin-top: 2.4em;              /* clears the heading's negative bottom margin */
		padding: 0.6em 1.25em;
		font-family: var(--font-mono);
		font-size: 0.64em;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		text-decoration: none;
		line-height: 1.2;
		color: var(--ink);
		background: rgba(255, 255, 255, 0.03);
		border: 1px solid rgba(255, 255, 255, 0.22);
		transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
	}

		.pinball-link span {
			display: inline-block;
			margin-left: 0.4em;
			color: var(--ember-bright);
			transition: transform 0.25s ease;
		}

		.pinball-link:hover,
		.pinball-link:focus-visible {
			background: rgba(213, 81, 55, 0.12);
			border-color: var(--ember);
			color: #fff;
		}

			.pinball-link:hover span,
			.pinball-link:focus-visible span {
				transform: translateX(0.25em);
			}

	/* Compact rows: small thumbnail on the left, text on the right. */
	.projects-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0.75em;
	}

	.project {
		display: flex;
		align-items: stretch;
		gap: 1.1em;
		padding: 0.75em;
		background: #0d0d0b;
		border: 1px solid rgba(255, 255, 255, 0.08);
		color: var(--text);
		text-decoration: none;
		transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
	}

		.project:hover,
		.project:focus-visible {
			transform: translateY(-2px);
			border-color: rgba(213, 81, 55, 0.7);
			box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(213, 81, 55, 0.3);
		}

	.project-media {
		flex: 0 0 8.5em;
		align-self: center;
		aspect-ratio: 4 / 3;
		overflow: hidden;
		background: #000;
	}

		.project-media img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: transform 0.5s ease;
		}

			.project-media img.pos-top {
				object-position: center 12%;
			}

		.project:hover .project-media img,
		.project:focus-visible .project-media img {
			transform: scale(1.05);
		}

	.project-body {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		min-width: 0;
		gap: 0.25em;
		line-height: 1.45;
		padding: 0.1em 0.25em 0.1em 0;
	}

	.project-tag {
		font-family: var(--font-mono);
		font-size: 0.55em;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--ember-bright);
	}

	.project-title {
		font-size: 0.95em;
		font-weight: 600;
		letter-spacing: -0.01em;
		color: var(--ink);
	}

	.project-desc {
		font-size: 0.68em;
		color: var(--text);
	}

	.project-cta {
		margin-top: auto;
		padding-top: 0.35em;
		font-family: var(--font-mono);
		font-size: 0.55em;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--teal);
	}

		.project-arrow {
			display: inline-block;
			transition: transform 0.3s ease;
		}

		.project:hover .project-cta,
		.project:focus-visible .project-cta {
			color: var(--ink);
		}

		.project:hover .project-arrow,
		.project:focus-visible .project-arrow {
			transform: translateX(0.35em);
		}

	@media screen and (max-width: 736px) {

		.project {
			gap: 0.85em;
			padding: 0.65em;
		}

		.project-media {
			flex-basis: 5.5em;
			aspect-ratio: 1 / 1;
			align-self: flex-start;
		}

	}

	/* Music, at the bottom of the Projects panel */
	#projects hr {
		margin: 2em 0 0 0;
	}

	.projects-music .cv-label {
		margin-top: 1.5em;
	}

	.projects-music .sc-card {
		max-width: none;
		margin: 0;
	}

/* Music */

	.sc-card {
		display: flex;
		align-items: center;
		gap: 1.25em;
		max-width: 26em;
		margin: 1.5em auto 0 auto;
		padding: 1.1em 1.4em;
		background: #000;
		border: 1px solid rgba(255, 255, 255, 0.1);
		color: var(--ink);
		text-align: left;
		text-decoration: none;
		transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
	}

		.sc-card:hover,
		.sc-card:focus-visible {
			border-color: var(--ember);
			box-shadow: 0 0 0 1px var(--ember), 0 12px 40px rgba(213, 81, 55, 0.25);
			transform: translateY(-2px);
		}

	/* A slow, gently scrolling sound wave. */
	.sc-wave {
		display: block;
		flex: 0 0 auto;
		width: 3.6em;
		height: 2em;
		overflow: hidden;
		-webkit-mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent);
		mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent);
	}

		.sc-wave path {
			fill: none;
			stroke-linecap: round;
			vector-effect: non-scaling-stroke;
		}

		.sc-wave-a {
			stroke: var(--ember-bright);
			stroke-width: 2;
			animation: sc-wave-a 5s linear infinite;
		}

		.sc-wave-b {
			stroke: var(--teal);
			stroke-width: 1.5;
			opacity: 0.55;
			animation: sc-wave-b 7s linear infinite;
		}

		/* Each wave slides exactly one period, so the loop is seamless. */
		@keyframes sc-wave-a {
			from { transform: translateX(0); }
			to   { transform: translateX(-60px); }
		}

		@keyframes sc-wave-b {
			from { transform: translateX(0); }
			to   { transform: translateX(-40px); }
		}

		.sc-card:hover .sc-wave-a,
		.sc-card:focus-visible .sc-wave-a {
			animation-duration: 3s;
		}

		.sc-card:hover .sc-wave-b,
		.sc-card:focus-visible .sc-wave-b {
			animation-duration: 4.5s;
			opacity: 0.8;
		}

	.sc-text {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		min-width: 0;
		line-height: 1.35;
		gap: 0.3em;
	}

		.sc-kicker {
			font-family: var(--font-mono);
			font-size: 0.6em;
			letter-spacing: 0.14em;
			text-transform: uppercase;
			white-space: nowrap;
			color: var(--ember-bright);
		}

		.sc-name {
			font-size: 1.6em;
			font-weight: 600;
			line-height: 1.2;
			letter-spacing: -0.02em;
		}

	.sc-logo {
		width: 1.25em;
	}

	.sc-go {
		display: flex;
		align-items: center;
		gap: 0.5em;
		flex: 0 0 auto;
		font-size: 1.3em;
		color: var(--muted);
		transition: color 0.3s ease;
	}

		.sc-arrow {
			display: inline-block;
			transition: transform 0.3s ease;
		}

		.sc-card:hover .sc-go,
		.sc-card:focus-visible .sc-go {
			color: var(--ink);
		}

		.sc-card:hover .sc-arrow,
		.sc-card:focus-visible .sc-arrow {
			transform: translateX(0.3em);
		}

	@media screen and (max-width: 736px) {

		.sc-card {
			gap: 0.9em;
			padding: 1em 1.1em;
		}

		.sc-kicker {
			letter-spacing: 0.08em;
		}

		.sc-go .sc-logo {
			display: none;
		}

	}

/* Contact */

	#contact {
		text-align: center;
	}

		#contact .email {
			font-size: 1.25em;
			margin: 1em 0 1.5em 0;
			color: var(--ink);
		}

			#contact .email i {
				color: var(--ember-bright);
			}

		#contact .childhood {
			display: inline-block;
			width: 170px;
			height: auto;
			border: 5px solid #ffffff;
		}

/* Footer */

	#footer {
		text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
	}

/* Background pause / play button */

	.bg-toggle {
		position: fixed;
		right: 1rem;
		bottom: 1rem;
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2.4rem;
		height: 2.4rem;
		padding: 0;
		border: 1px solid rgba(255, 255, 255, 0.18);
		border-radius: 50%;
		background: rgba(11, 11, 9, 0.7);
		color: var(--muted);
		cursor: pointer;
		opacity: 0.7;
		transition: opacity 0.25s ease, color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
	}

		.bg-toggle[hidden] {
			display: none;
		}

		/* On phones the panels fill the width, so sit in the footer instead of floating over text. */
		@media screen and (max-width: 736px) {

			.bg-toggle {
				position: static;
				margin: 1em auto 0 auto;
				width: 2.2rem;
				height: 2.2rem;
			}

		}

		.bg-toggle:hover,
		.bg-toggle:focus-visible {
			opacity: 1;
			color: var(--ink);
			border-color: var(--ember);
			background-color: rgba(11, 11, 9, 0.9);
		}

		.bg-toggle .ico {
			width: 0.85rem;
			height: 0.85rem;
		}

		.bg-toggle .ico-play,
		.bg-toggle.is-paused .ico-pause {
			display: none;
		}

		.bg-toggle.is-paused .ico-play {
			display: inline-block;
		}

/* Keyboard focus */

	a:focus-visible,
	button:focus-visible {
		outline: 2px solid var(--ember-bright);
		outline-offset: 3px;
	}

/* Respect reduced-motion settings */

	@media (prefers-reduced-motion: reduce) {

		.tagline,
		.tagline:hover,
		.tagline:focus-visible {
			animation: none;
		}

		.sc-wave path,
		.sc-card:hover .sc-wave path {
			animation: none;
		}

		.sc-card,
		.sc-arrow {
			transition: none;
		}

		.project,
		.project-media img,
		.project-arrow,
		.pinball-link,
		.pinball-link span,
		.cv-download,
		.bg-toggle {
			transition: none;
		}

		.project:hover,
		.project:focus-visible {
			transform: none;
		}

		.project:hover .project-media img,
		.project:focus-visible .project-media img {
			transform: none;
		}

	}