/*
	Appy Monkeys shared site layer  (v1)
	----------------------------------------------------------------
	IDENTICAL in Animatoon, EasySketchPose and Animation-Sketchpad.
	Load AFTER the site's own stylesheet. Documented in
	website-design-document.md — change it there first, then copy to all 3.

	Owns: design tokens, page base, fixed header + mobile menu,
	hero video card, buttons, footer, responsive media rules.
*/

@import url("https://fonts.googleapis.com/css?family=Nunito:200,300,400,600,700,800&display=swap");

/* ---------- 1. Tokens ---------- */
:root {
	--am-bg:            #2e3141;
	--am-surface:       #2f2a28;
	--am-surface-alt:   #363230;
	--am-header:        rgb(197 59 59 / 91%);
	--am-accent:        #4c5c96;
	--am-accent-light:  #5b6cad;   /* solid CTA buttons */
	--am-accent-dark:   #4a5a94;   /* CTA hover */
	--am-cta:           #6ec3fa;   /* "Free Online Demo" buttons (sky blue) */
	--am-cta-dark:      #3a9ee3;   /* hover: darker shade of the same light blue */
	--am-col:           64vw;      /* wide-screen hero card + header content column */
	--am-text:          #ffffff;
	--am-text-muted:    rgba(255, 255, 255, 0.35);
	--am-border:        rgba(255, 255, 255, 0.125);
	--am-border-strong: rgba(255, 255, 255, 0.25);
	--am-radius:        5px;
	--am-radius-card:   24px;
	--am-font:          Nunito, Helvetica, Arial, sans-serif;
	--am-header-h:      3.5rem;
	--am-gutter:        1.25rem;
	--am-content-w:     55em;
	--am-z-media:       0;
	--am-z-scrim:       1;
	--am-z-hero-ui:     2;
	--am-z-social:      9999;
	--am-z-header:      10000;
}

/* ---------- 2. Base ---------- */
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--am-font); color: var(--am-text); background-color: var(--am-bg); }
html, body { min-width: 320px; }   /* Animatoon main.css forced 400px, which scrolls sideways on phones */
img, video, iframe { max-width: 100%; }
img, video { height: auto; }
:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

/* ---------- 3. Header ---------- */
#header {
	position: fixed; top: 0; left: 0; width: 100%;
	height: var(--am-header-h); box-sizing: border-box;
	display: flex; align-items: center; gap: 1rem;
	padding: 0 var(--am-gutter); line-height: 1;
	background-color: var(--am-header);
	z-index: var(--am-z-header);
}
#header > a {
	display: flex; align-items: center; gap: .75rem;
	border: 0; color: #fff; text-decoration: none; min-width: 0;
}
#header > a img {
	position: static; width: 2.4rem; height: 2.4rem; padding: 0; margin: 0;
	border-radius: 22%; background: transparent; flex: none;
}
#header h1 {
	margin: 0; padding: 0; border: 0;
	font: 700 1.2rem/1 var(--am-font); letter-spacing: .1em; text-transform: uppercase;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	opacity: 1; visibility: visible;
}
#header h1 { font-size: 1.2rem !important; }   /* beats legacy per-site h1 rules */
@media screen and (max-width: 480px) { #header h1 { font-size: 1rem !important; } }
#header nav {
	position: static; height: auto; margin: 0 0 0 auto;
	display: flex; align-items: center; gap: .15rem;
	font: 700 .95rem/1 var(--am-font); letter-spacing: .05em; text-transform: uppercase;
}
#header nav a {
	display: inline-block; padding: .85em 1em; border: 0; border-radius: var(--am-radius);
	color: #fff; text-decoration: none; white-space: nowrap;
}
#header nav a:hover { background: rgba(255, 255, 255, .08); }
#header nav a[aria-current="page"] { background: var(--am-accent); }

/* wide screens: logo + nav line up with the hero card's edges */
@media screen and (min-width: 1281px) {
	#header { padding-left: 10vw; padding-right: 10vw; }
}
@media screen and (min-width: 1500px) {
	#header { padding-left: 18vw; padding-right: 18vw; }
}

/* social tab hanging under the header */
#social {
	position: absolute; top: 100%; right: 0; float: none;
	display: flex; align-items: center; gap: .25rem;
	padding: .35rem .75rem .4rem; border: 0; border-bottom-left-radius: 20px;
	background-color: var(--am-header);
	z-index: var(--am-z-social);
}
#social a {
	margin: 0; padding: .35rem .5rem; border: 0; font-size: 1.15rem; line-height: 1; color: #fff;
}

/* burger (created by site.js) — desktop: hidden */
.nav-toggle { display: none; }
.nav-social { display: none; }

@media screen and (max-width: 980px) {
	.nav-ready #social { display: none; }
	.nav-ready .nav-toggle {
		display: block; position: relative; flex: none;
		width: 2.75rem; height: 2.75rem; margin: 0 -.5rem 0 auto; padding: 0;
		border: 0; border-radius: var(--am-radius); background: transparent; box-shadow: none; cursor: pointer;
	}
	.nav-toggle span, .nav-toggle span:before, .nav-toggle span:after {
		position: absolute; left: 50%; width: 1.4rem; height: 2px; margin-left: -.7rem;
		background: #fff; content: ""; transition: transform .2s ease, background-color .2s ease;
	}
	.nav-toggle span { top: 50%; margin-top: -1px; }
	.nav-toggle span:before { top: -.45rem; left: 0; margin-left: 0; }
	.nav-toggle span:after  { top:  .45rem; left: 0; margin-left: 0; }
	.nav-open .nav-toggle span { background: transparent; }
	.nav-open .nav-toggle span:before { transform: translateY(.45rem) rotate(45deg); }
	.nav-open .nav-toggle span:after  { transform: translateY(-.45rem) rotate(-45deg); }

	.nav-ready #header nav {
		position: fixed; top: var(--am-header-h); left: 0; right: 0; margin: 0;
		flex-direction: column; align-items: stretch; gap: 0;
		padding: .5rem var(--am-gutter) 1rem;
		max-height: calc(100vh - var(--am-header-h)); overflow-y: auto;
		background-color: var(--am-header);
		opacity: 0; visibility: hidden; transform: translateY(-.5rem);
		transition: opacity .2s ease, transform .2s ease, visibility .2s;
	}
	.nav-open #header nav { opacity: 1; visibility: visible; transform: none; }
	.nav-ready #header nav > a { padding: 1.1em .5em; border-bottom: 1px solid var(--am-border); border-radius: 0; }
	.nav-ready #header nav > a:last-of-type { border-bottom: 0; }
	.nav-ready #header nav .nav-social {
		display: flex; gap: .5rem; padding-top: .75rem; border-top: 1px solid var(--am-border);
	}
	.nav-ready #header nav .nav-social a { padding: .6rem .75rem; font-size: 1.3rem; border: 0; }
}

/* ---------- 4. Buttons ---------- */
.button, .demo_button {
	display: inline-block; box-sizing: border-box; height: auto; min-height: 2.75rem;
	padding: .85em 1.8em; border: 0; border-radius: var(--am-radius);
	box-shadow: inset 0 0 0 2px var(--am-border-strong);
	background: transparent; color: #fff !important; cursor: pointer;
	font: 700 .8rem/1.4 var(--am-font); letter-spacing: .1em; text-align: center;
	text-decoration: none; text-transform: uppercase; white-space: nowrap;
	transition: background-color .2s ease-in-out;
}
.button:hover, .demo_button:hover { background-color: rgba(255, 255, 255, .075); }
.button.primary, .demo_button { background-color: var(--am-accent-light); box-shadow: none; }
.button.primary:hover, .demo_button:hover { background-color: var(--am-accent-dark); }

/* ---------- 5. Hero video card ---------- */
#banner.hero {
	padding: calc(var(--am-header-h) + 1.25rem) var(--am-gutter) 0;
	background: none; margin-bottom: 0;
}
/* Desktop: [ empty | video card (54%) | CTA + note ] so the card stays centred and the CTA sits to its right */
.hero-row {
	--hero-ui-radius: .8rem;   /* shared by play icon + CTA so their corners match */
	display: grid; grid-template-columns: 1fr minmax(0, var(--am-col)) 1fr; align-items: center; column-gap: 1.5rem;
	margin: 0 auto;
}
.hero-row > .hero-card { grid-column: 2; }
.hero-row > .hero-cta-wrap { grid-column: 3; }
.hero-card {
	position: relative; isolation: isolate; overflow: hidden;
	width: 100%; margin: 0;
	aspect-ratio: 16 / 9;
	border: 2px solid var(--am-border-strong); border-radius: var(--am-radius-card);
	background: #111; box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
}
/* layer 0: media */
.hero-media { position: absolute; inset: 0; z-index: var(--am-z-media); }
.hero-media video, .hero-media img, .hero-media iframe {
	position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
	border: 0; margin: 0; padding: 0; object-fit: cover; background: #000;
}
/* hqdefault thumbnails carry baked-in letterbox bars (270px of 360px is picture): crop them */
.hero-media img.is-hq { transform: scale(1.34); }
/* layer 1: scrim so overlay controls stay readable on any footage */
.hero-card:after {
	content: ""; position: absolute; inset: 0; z-index: var(--am-z-scrim); pointer-events: none;
	background: linear-gradient(to top, rgba(17, 17, 17, .55), rgba(17, 17, 17, .15) 55%, rgba(17, 17, 17, .3));
	transition: opacity .3s ease;
}
/* layer 2: play icon + CTA */
.hero-play { position: absolute; z-index: var(--am-z-hero-ui); }
.hero-play {
	top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 4.1rem; height: 4.1rem; padding: 0; margin: 0;
	display: flex; align-items: center; justify-content: center;
	border: 2px solid rgba(255, 255, 255, .85); border-radius: var(--hero-ui-radius);
	background: rgba(17, 17, 17, .45); box-shadow: none; color: #fff; cursor: pointer;
	backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
	transition: background-color .2s ease, transform .2s ease;
}
.hero-play:hover { background: var(--am-accent); transform: translate(-50%, -50%) scale(1.06); }
.hero-play svg { width: 48%; height: 48%; margin-left: 6%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.hero-cta-wrap { text-align: center; justify-self: start; }
.hero-cta-wrap p, #banner .hero-cta-wrap p { margin: .9rem auto 0; max-width: 14rem; font: 700 .8rem/1.4 var(--am-font); letter-spacing: 0; text-transform: none; text-align: center; color: #fff; opacity: .9; }
.hero-cta {
	display: inline-flex; align-items: center;
	padding: 1em 1.9em; border: 3px solid rgba(255, 255, 255, .95); border-radius: var(--hero-ui-radius);
	background: var(--am-cta); color: #fff !important; text-decoration: none; text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
	font: 800 1rem/1.2 var(--am-font); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
	box-shadow: 0 6px 24px rgba(110, 195, 250, .45), 0 2px 8px rgba(0, 0, 0, .4);
	animation: hero-cta-pulse 2.4s ease-out infinite;
	transition: background-color .2s ease, transform .2s ease;
}
.hero-cta:hover { background: var(--am-cta-dark); transform: translateY(-2px); animation: none; }
@keyframes hero-cta-pulse {
	0%   { box-shadow: 0 6px 24px rgba(110, 195, 250, .45), 0 0 0 0 rgba(110, 195, 250, .6); }
	70%  { box-shadow: 0 6px 24px rgba(110, 195, 250, .45), 0 0 0 16px rgba(110, 195, 250, 0); }
	100% { box-shadow: 0 6px 24px rgba(110, 195, 250, .45), 0 0 0 0 rgba(110, 195, 250, 0); }
}
/* playing: UI steps aside, card matches the video's ratio */
.hero-card.is-playing { aspect-ratio: 16 / 9; }
.hero-card.is-playing:after, .hero-card.is-playing .hero-play { opacity: 0; visibility: hidden; }
.hero-card.is-playing .hero-media video { object-fit: contain; }

#banner.hero .inner { margin: 0 auto; padding: 2.5rem 0 0; width: var(--am-content-w); max-width: 100%; }

/* below 1281px there is no room beside the card: card full width, CTA + note underneath */
@media screen and (max-width: 1280px) {
	.hero-row { display: block; }
	.hero-card { max-width: 72rem; margin: 0 auto; }
	.hero-cta-wrap { justify-self: auto; }
	.hero-cta-wrap { margin-top: 1.25rem; }
	.hero-cta-wrap p, #banner .hero-cta-wrap p { max-width: 24rem; }
}
/* phone: landscape 16:9 card (per design sketch), CTA + note underneath */
@media screen and (max-width: 736px) {
	#banner.hero { padding: calc(var(--am-header-h) + 1rem) var(--am-gutter) 0; }
	.hero-row { --hero-ui-radius: .72rem; }
	.hero-card { aspect-ratio: 16 / 9; max-height: none; border-radius: 20px; }
	.hero-play { width: 3.25rem; height: 3.25rem; }
	.hero-cta { padding: .95em 1.6em; font-size: .9rem; }
	#banner.hero .inner { padding: 1.5rem 0 0; }
}

/* ---------- 5b. Floating demo button (bottom-right, chat-widget position) ---------- */
.fab-demo {
	position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 9500;
	padding: 1em 1.6em; border: 3px solid rgba(255, 255, 255, .95); border-radius: .8rem;
	background: var(--am-cta); color: #fff !important; text-decoration: none; text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
	font: 800 .85rem/1.2 var(--am-font); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
	box-shadow: 0 6px 24px rgba(110, 195, 250, .45), 0 2px 8px rgba(0, 0, 0, .4);
	animation: hero-cta-pulse 2.4s ease-out infinite;   /* same attention pulse as the hero CTA */
	transition: background-color .2s ease, border-color .2s ease, transform .2s ease, opacity .3s ease, visibility .3s;
}
.fab-demo:hover { animation: none; }
.fab-demo.is-hidden { opacity: 0; visibility: hidden; transform: translateY(1rem); pointer-events: none; }
.fab-demo:hover { background: var(--am-cta-dark); transform: translateY(-2px); }
@media screen and (max-width: 736px) {
	.fab-demo { right: .75rem; bottom: .75rem; padding: .6em 1em; border-width: 2px; border-radius: .6rem; font-size: .62rem; letter-spacing: .08em; }
}
/* Sketchpad's back-to-top arrow used this corner: lift it above the button */
.cd-top { bottom: 5.5rem !important; }

/* ---------- 6. "Available on" store icons (below the hero, index pages) ---------- */
.available { text-align: center; padding: 2rem var(--am-gutter) 1rem; }
.available h2, #banner .available h2 { margin: 0 0 1.25rem; padding: 0; border: 0; font-size: 1.4rem; }
.store-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 1rem 2rem; }
.store-links a { display: flex; flex-direction: column; align-items: center; gap: .5rem; border: 0; color: #fff; text-decoration: none; }
.store-links img { height: 4rem; width: auto; padding: 0; background: transparent; border: 0; box-shadow: none; }
.store-links span { font: 700 .7rem/1 var(--am-font); letter-spacing: .1em; text-transform: uppercase; color: var(--am-text-muted); transition: color .2s ease; }
.store-links a:hover span { color: #fff; }
@media screen and (max-width: 480px) { .store-links { gap: 1rem 1.5rem; } .store-links img { height: 3.5rem; } }

/* ---------- 7. Footer ---------- */
#footer .inner { max-width: 100%; box-sizing: border-box; }
#footer .inner .copyright li a { color: inherit; }
@media screen and (max-width: 736px) { #footer .inner { padding-left: var(--am-gutter); padding-right: var(--am-gutter); } }

/* ---------- 7b. Slanted background band (same look as Solid State .wrapper.spotlight) ---------- */
.slant-band {
	--band: #363230;
	position: relative; margin: 6.5em 0; background-color: var(--band);
	width: 100vw; margin-left: calc(50% - 50vw); box-sizing: border-box;
}
.slant-band.alt { --band: #2f2a28; --band-svg: %232f2a28; }
.slant-band:before, .slant-band:after {
	content: ''; display: block; position: absolute; left: 0; width: 100%; height: 6.5em;
	background-repeat: no-repeat; background-size: 100% 100%; pointer-events: none;
}
.slant-band:before, .slant-band:after {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23363230%3B' /%3E%3C/svg%3E");
}
.slant-band.alt:before, .slant-band.alt:after {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%232f2a28%3B' /%3E%3C/svg%3E");
}
.slant-band:before { top: -6.5em; box-shadow: inset 0 -1px 0 0 var(--band), 0 1px 0 0 var(--band); }
.slant-band:after  { bottom: -6.5em; transform: scaleY(-1); box-shadow: inset 0 -1px 0 0 var(--band), 0 1px 0 0 var(--band); }
.slant-band.alt:before { transform: scaleX(-1); }
.slant-band.alt:after  { transform: scaleY(-1) scaleX(-1); }
.slant-band > .inner { width: min(72rem, 100% - 2 * var(--am-gutter)); margin: 0 auto; padding: 3em 0 1em; }
@media screen and (max-width: 980px) { .slant-band { margin-top: 4.75em; margin-bottom: 4.75em; } .slant-band:before, .slant-band:after { height: 4.75em; } .slant-band:before { top: -4.75em; } .slant-band:after { bottom: -4.75em; } }
@media screen and (max-width: 736px) { .slant-band { margin-top: 2.5em; margin-bottom: 2.5em; } .slant-band:before, .slant-band:after { height: 2.5em; } .slant-band:before { top: -2.5em; } .slant-band:after { bottom: -2.5em; } }

/* ---------- 8. Responsive media / embeds ---------- */
@media screen and (max-width: 980px) {
	#wrapper > header { padding-left: var(--am-gutter) !important; padding-right: var(--am-gutter) !important; }
	#wrapper > header .inner { padding: 0; }
}
iframe#contact { display: block; width: 100%; max-width: 100%; }
.demo_frame { max-width: 100%; }
@media screen and (max-width: 736px) {
	.demo_frame { aspect-ratio: 4 / 5 !important; max-height: none !important; width: min(100%, calc((100vh - 10rem) * .8)) !important; }
}

/* ---------- 9. Wide screens: content column = 60% of the viewport ----------
   Applies from 1281px up. The index hero card (#banner.hero) is intentionally excluded. */
@media screen and (min-width: 1281px) {
	:root { --am-content-w: 60vw; }
	.wrapper .inner, #wrapper > header .inner, #footer .inner,
	.body_container, .main, .sample, .manual { width: 60vw !important; max-width: none; margin-left: auto; margin-right: auto; }
	.spotlights .body_container { width: 60vw !important; }
}

/* ---------- 10. Free online demo page (identical on all three sites; modelled on EasySketchPose) ---------- */
.demo_frame
{
	position: relative;
	width: 100%;
	margin: 0 auto 20px;
	border-radius: 12px;
	overflow: hidden;
	border: 3px solid #888ebd;
	box-shadow: 0 10px 40px rgba(0,0,0,0.4);
	background: #000;
	/* Taller than 16:9 on purpose — the embedded app's own UI
	   needs more vertical room than widescreen gives it at this
	   page's content width, which is what was causing its
	   internal scrollbar to appear. Capped by max-height so the
	   whole frame fits within the viewport below the heading
	   instead of running off the bottom of the page. */
	aspect-ratio: 3 / 2;
	/* Fit the whole frame on screen: shrink width (not height) so the 3:2 ratio is kept */
	width: min(100%, calc((100vh - 9rem) * 1.5));
}

#demo
{
	width: 100%;
	height: 100%;
	border: none;
	display: block;
}

/* Animatoon's embedded app needs the full 3:2 height (its thumbnails get cropped when capped) */

.demo_frame:fullscreen,
.demo_frame:-webkit-full-screen
{
	width: 100vw;
	height: 100vh;
	max-width: none;
	aspect-ratio: auto;
	border-radius: 0;
}

.demo-fullscreen-btn
{
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 3;
	box-sizing: border-box;
	width: 52px;
	height: 52px;
	min-width: 52px;
	min-height: 52px;
	max-width: 52px;
	max-height: 52px;
	aspect-ratio: 1 / 1;
	flex: none;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid rgba(255,255,255,0.85);
	border-radius: 50%;
	background: red;
	box-shadow: 4px 6px 0 rgba(0,0,0,.18);
	cursor: pointer;
	transition: transform 0.15s, background 0.15s;
}

.demo-fullscreen-btn:hover
{
	background: #cc0000;
	transform: translateY(-2px);
}

.demo-fullscreen-btn svg
{
	width: 26px;
	height: 26px;
	min-width: 26px;
	min-height: 26px;
	flex: none;
	fill: #fff;
	stroke: #fff;
	stroke-width: 0.5;
	pointer-events: none;
}

/* A plain, simple heading — no hero-style diagonal-cut section,
   just centered text directly in normal page flow. */
.demo_hero
{
	text-align: center;
	max-width: 1200px;
	margin: 0 auto;
	/* #header is position:fixed at height:3.5em (see main.css) —
	   this needs at least that much top padding so the heading
	   doesn't render underneath the nav bar. */
	padding: 6em 20px 10px;
}

.demo_hero h2
{
	font-size: 28px;
	margin: 0 0 6px;
}

.demo_hero p
{
	font-size: 16px;
	opacity: 0.85;
	margin: 0;
}
		

/* ---------- 12. Footer: sizes identical on all sites (values from Animation Sketchpad's home page footer) ---------- */
#footer { background: transparent !important; }   /* Solid State paints its own bg image at <=1280px, which seams against the fixed page bg */
#footer .inner { padding: 4rem var(--am-gutter) 2rem !important; display: block; text-align: left; }
#footer .inner h2 { font-size: 1.2rem !important; padding-bottom: .5em; margin: 0 0 1rem; border-bottom: 2px solid var(--am-border); }
#footer .inner p { font-size: 1rem; line-height: 1.65; margin: 0 0 1em; }
#footer .inner .copyright { margin: 2rem 0 0; padding: 1.5rem 0 0; border-top: 2px solid var(--am-border); }
#footer .inner .copyright li { font-size: .9rem; margin: 0 0 0 1rem; padding: 0 0 0 1rem; }
#footer .inner .copyright li:first-child { margin-left: 0; padding-left: 0; }
@media screen and (max-width: 480px) {
	#footer .inner .copyright li { display: block; margin: 1rem 0 0; padding-left: 0; border-left: 0; }
	#footer .inner .copyright li:first-child { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
	*, *:before, *:after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- 11. Demo page: one colour top to bottom, no top slant, tight gap above the frame ---------- */
.demo_hero { max-width: none; background: transparent; padding: calc(var(--am-header-h) + 1rem) 20px .75rem; }
.demo_hero h2 { margin-bottom: 0; }
.demo_hero + .wrapper { margin-top: 0; }
.demo_hero + .wrapper { background: transparent; }   /* same navy as the index page background */
.demo_hero + .wrapper:before, .demo_hero + .wrapper:after { display: none; }
.demo_hero + .wrapper > .inner { padding-top: .5rem; }
.demo_hero + .wrapper .demo_frame { margin-bottom: 0; }