/**
 * Surfaced Media splash page enhancements.
 *
 * Loaded after style.css so it can correct a few things there without
 * editing the starter theme's stylesheet. Everything new is namespaced
 * with .sm- so it can be lifted out cleanly.
 *
 * @package surfaceddev
 */

:root {

	/* Mid point of the water gradient, so there is no flash of a
	   different colour before the canvas paints its first frame. */
	--sm-surface: rgb(228, 240, 243);
	--sm-ink: rgb(64, 64, 64);
	--sm-accent: #35d0ba;
}

/*--------------------------------------------------------------
# Corrections to style.css
--------------------------------------------------------------*/

/* style.css kills the focus ring globally, which makes the page
   unusable by keyboard. Restore a visible ring, but only for
   keyboard users so mouse clicks stay clean. */
a:focus-visible,
input:focus-visible,
button:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--sm-accent);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Two rules in style.css fight over the submit button: input[type=submit]
   paints it dark, .wpcf7-submit paints it transparent. Settle it. */
.wpcf7-submit,
input[type="submit"].wpcf7-submit {
	background: #2d2d2c;
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 11px 26px;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.wpcf7-submit:hover,
input[type="submit"].wpcf7-submit:hover {
	background: var(--sm-accent);
	color: #143c37;
	transform: translateY(-1px);
}

/*--------------------------------------------------------------
# Water background
--------------------------------------------------------------*/

body {
	background-color: var(--sm-surface);
}

/* No hanging words in the tagline at any width, in either mode. */
#primary p,
#primary h1 {
	text-wrap: balance;
}

.sm-water {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	display: block;
	pointer-events: none;
}

/* Lift the real content above the canvas. */
#primary {
	position: relative;
	z-index: 2;
}

/* The content block sits on the water rather than being pinned to it. */
.sm-float {
	animation: sm-bob 9s ease-in-out infinite;
	will-change: transform;
}

@keyframes sm-bob {
	0%,
	100% {
		transform: translateY(-3px);
	}

	50% {
		transform: translateY(3px);
	}
}

/*--------------------------------------------------------------
# Paper plane
--------------------------------------------------------------*/

#revealLink {
	display: inline-block;

	/* The plane's <path> has no fill of its own, so it defaulted to
	   black. Route it through currentColor, keeping black as the
	   resting colour, so 8-bit mode can recolour it. */
	color: #000;
	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
	will-change: transform;
}

#revealLink svg path {
	fill: currentColor;
}

#revealLink:hover {
	transform: translate(3px, -4px) rotate(-8deg);
}

#revealLink.sm-launched {
	pointer-events: none;
}

/*--------------------------------------------------------------
# Form reveal
--------------------------------------------------------------*/

/* Normal mode: the form surfaces out of the water. */
.sm-form-open {
	animation: sm-surface 0.52s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes sm-surface {
	from {
		opacity: 0;
		transform: translateY(26px) scale(0.96);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* Fields settle in just behind the panel. */
.sm-form-open form p {
	animation: sm-settle 0.4s ease both;
}

.sm-form-open form p:nth-child(2) {
	animation-delay: 0.06s;
}

.sm-form-open form p:nth-child(3) {
	animation-delay: 0.12s;
}

.sm-form-open form p:nth-child(4) {
	animation-delay: 0.18s;
}

.sm-form-open form p:nth-child(5) {
	animation-delay: 0.24s;
}

@keyframes sm-settle {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 8-bit mode: no easing. The box snaps open in hard steps, the way a
   menu opens on hardware that cannot tween. */
body.sm-8bit .sm-form-open {
	animation: sm-boxopen 0.26s steps(4, end) both;
	transform-origin: 50% 0;
}

@keyframes sm-boxopen {
	from {
		opacity: 1;
		transform: scaleY(0.06) scaleX(0.7);
	}

	to {
		opacity: 1;
		transform: scaleY(1) scaleX(1);
	}
}

body.sm-8bit .sm-form-open form p {
	animation: none;
}

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

	.sm-form-open,
	.sm-form-open form p,
	body.sm-8bit .sm-form-open {
		animation: none;
	}
}

/*--------------------------------------------------------------
# Surf report
--------------------------------------------------------------*/

/* The report belongs to 8-bit mode. The front door stays clean, and
   the conditions are part of what you get for flipping the switch. */
.sm-report {
	position: fixed;
	left: 18px;
	bottom: 16px;
	z-index: 6;
	display: none;
	align-items: center;
	gap: 8px;
	opacity: 0;
	transition: opacity 0.8s ease;
	pointer-events: none;
}

body.sm-8bit .sm-report {
	display: flex;
}

.sm-report canvas {
	display: block;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
}

.sm-report-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sm-accent);
	animation: sm-pulse 2.4s ease-in-out infinite;
	flex: 0 0 auto;
}

@keyframes sm-pulse {
	0%,
	100% {
		opacity: 0.25;
		transform: scale(0.8);
	}

	50% {
		opacity: 1;
		transform: scale(1);
	}
}

/*--------------------------------------------------------------
# 8-bit toggle
--------------------------------------------------------------*/

.sm-toggle {
	position: fixed;
	right: 14px;
	bottom: 10px;
	z-index: 7;
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 7px 12px;
	border: 1px solid rgba(0, 0, 0, 0.09);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.55);
	color: var(--sm-ink);
	cursor: pointer;
	opacity: 0.75;
	transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease;
}

.sm-toggle:hover {
	opacity: 1;
	transform: translateY(-2px);
	background: #fff;
}

.sm-toggle svg {
	width: 32px;
	height: 32px;
	display: block;
	shape-rendering: crispEdges;
}

/* The surfer keeps riding, which is the hint that it does something. */
.sm-toggle .sm-icon-enter {
	animation: sm-ride 3.2s ease-in-out infinite;
	transform-origin: 50% 70%;
}

@keyframes sm-ride {
	0%,
	100% {
		transform: translateY(1px) rotate(-4deg);
	}

	50% {
		transform: translateY(-3px) rotate(4deg);
	}
}

/* The label is always on. The button has to read as an invitation
   without needing to be discovered by hovering. */
.sm-toggle-label {
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
}

.sm-toggle .sm-icon-exit,
.sm-toggle .sm-label-exit {
	display: none;
}

/*--------------------------------------------------------------
# 8-bit mode
--------------------------------------------------------------*/

.sm-bit-canvas {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	display: none;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
	pointer-events: none;
}

/* Scanlines + vignette, drawn in CSS so the scene canvas stays cheap. */
.sm-crt {
	position: fixed;
	inset: 0;
	z-index: 5;
	display: none;
	pointer-events: none;
	background:
		repeating-linear-gradient(
			to bottom,
			rgba(0, 0, 0, 0.16) 0,
			rgba(0, 0, 0, 0.16) 1px,
			rgba(0, 0, 0, 0) 1px,
			rgba(0, 0, 0, 0) 3px
		),
		radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.45) 100%);
}

body.sm-8bit .sm-bit-canvas,
body.sm-8bit .sm-crt {
	display: block;
}

body.sm-8bit .sm-water {
	display: none;
}

body.sm-8bit {
	background-color: #0d0720;
	color: #ffe9c4;
}

/* The logo is swapped for a 132px-wide pixelated copy, so let the
   browser scale it up with nearest-neighbour instead of smoothing. */
body.sm-8bit #primary h1 img {
	image-rendering: pixelated;
	image-rendering: crisp-edges;
}

body.sm-8bit #primary p,
body.sm-8bit #primary span {
	color: #ffe9c4;
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 13px;
	line-height: 2;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* The dithered sky is high-frequency noise, and no amount of outline
   makes small text survive it. Sit the tagline on a solid dialog
   panel, which is what an actual 8-bit game would do. */
body.sm-8bit #primary > p:first-of-type {
	background: #14092e;
	border: 3px solid #ffd98a;
	padding: 12px 20px;
	margin-top: 10px;
	box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.5);
	text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);

	/* Tighter tracking so the first line fits on one row at desktop.
	   Balanced wrapping is inherited from the base rule above, which
	   is what keeps "2009." from being left on a line of its own. */
	letter-spacing: 0.1em;
}

body.sm-8bit #revealLink {
	color: #ffd98a;
	filter: drop-shadow(2px 2px 0 #4a1d5c);
}

body.sm-8bit .sm-float {
	animation-duration: 5s;
}

body.sm-8bit .sm-toggle {
	color: #ffd98a;
	opacity: 0.9;
	background: rgba(20, 9, 46, 0.75);
	border-color: rgba(255, 217, 138, 0.55);
	border-radius: 0;
}

body.sm-8bit .sm-toggle:hover {
	background: #14092e;
}

body.sm-8bit .sm-toggle .sm-icon-enter,
body.sm-8bit .sm-toggle .sm-label-enter {
	display: none;
}

body.sm-8bit .sm-toggle .sm-icon-exit,
body.sm-8bit .sm-toggle .sm-label-exit {
	display: block;
}

body.sm-8bit .sm-report.is-live {
	opacity: 1;
}

body.sm-8bit .sm-report-dot {
	background: #ffd98a;
	border-radius: 0;
}

/* Hard-edged form to match the scene. */
body.sm-8bit form {
	background: #14092e;
	border: 4px solid #ffd98a;
	border-radius: 0;
	box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.45);
}

body.sm-8bit form label {
	color: #ffe9c4;
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

body.sm-8bit input[type="text"],
body.sm-8bit input[type="email"],
body.sm-8bit textarea {
	background: #0d0720;
	color: #ffe9c4;
	border-bottom: 2px solid #6e2d5e;
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

body.sm-8bit .wpcf7-submit,
body.sm-8bit input[type="submit"].wpcf7-submit {
	background: #ffd98a;
	color: #14092e;
	border-radius: 0;
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.45);
}

body.sm-8bit .wpcf7-submit:hover,
body.sm-8bit input[type="submit"].wpcf7-submit:hover {
	background: #fff;
	color: #14092e;
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
}

body.sm-8bit .overlay .thank-you-message {
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: #ffd98a;
}

/*--------------------------------------------------------------
# Small screens
--------------------------------------------------------------*/

/* Below this width the report and the toggle cannot share a row, so
   the report moves up onto its own line above the button. Keep this
   breakpoint in sync with the stacking check in surfaced.js. */
@media (max-width: 620px) {
	.sm-report {
		left: 12px;
		bottom: 68px;
	}

	.sm-toggle {
		right: 8px;
		bottom: 10px;
	}
}

/*--------------------------------------------------------------
# Motion preferences
--------------------------------------------------------------*/

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

	.sm-float,
	.sm-report-dot {
		animation: none;
	}

	#revealLink,
	.sm-toggle {
		transition: none;
	}

	#revealLink:hover {
		transform: none;
	}
}