/* ==========================================================================
   Appic SandBox — main.css
   No build step. Modern CSS only.
   ========================================================================== */

@font-face { font-family: "Futura"; src: url("../fonts/futura-light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Futura"; src: url("../fonts/futura-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Futura"; src: url("../fonts/futura-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Futura"; src: url("../fonts/futura-xblack.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Mono"; src: url("../fonts/mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Mono"; src: url("../fonts/mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
	--ink: #0b0a14;
	--ink-2: #12101e;
	--sand: #f3e6cf;
	--sand-dim: #bdb19c;
	--muted: #8a84a3;
	--line: rgb(243 230 207 / 0.12);
	--violet: #a66bff;
	--violet-deep: #7d00cc;
	--sun: #ffb37a;
	--ok: #63f2a6;
	--gutter: clamp(20px, 5vw, 64px);
	--max: 1320px;
	--f-display: "Futura", "Futura PT", "Century Gothic", "Avenir Next", system-ui, sans-serif;
	--f-mono: "Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
	--ease: cubic-bezier(.2, .7, .1, 1);

	/* Hero geometry: every scene layer lives on one 5500×1800 stage.
	   The stage is anchored to the bottom of the hero; the horizon sits at y=886. */
	--hh: max(100svh, 560px);
	--stage-w: max(100vw, min(max(170vw, 230svh), 330svh));
	--hz: calc(var(--hh) - var(--stage-w) * 0.16618);
}

*, *::before, *::after { box-sizing: border-box; }

html {
	overflow-x: clip;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	overflow-x: clip;
	background: var(--ink);
	color: var(--sand);
	font: 400 17px/1.6 var(--f-display);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
::selection { background: var(--violet); color: var(--ink); }

:focus-visible { outline: 2px solid var(--violet); outline-offset: 4px; border-radius: 2px; }

.skip {
	position: fixed; left: 12px; top: -60px; z-index: 200;
	padding: 10px 14px; background: var(--sand); color: var(--ink);
	font: 500 13px var(--f-mono);
}
.skip:focus { top: 12px; }

.muted { color: var(--muted); }

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */
.nav {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: clamp(14px, 2.2vw, 24px) var(--gutter);
	color: #fff;
	font: 400 12px/1 var(--f-mono);
	letter-spacing: .06em;
	text-transform: lowercase;
}
.nav__mark { display: inline-flex; align-items: center; gap: 10px; }
.nav__mark svg { width: 22px; height: 22px; transition: transform .8s var(--ease); }
.nav__mark:hover svg { transform: rotate(60deg); }
.nav__mark span { font: 500 15px/1 var(--f-display); letter-spacing: .01em; text-transform: none; }
.nav__right { display: flex; align-items: center; gap: clamp(14px, 3vw, 32px); }
.nav__status { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.nav__link { position: relative; }
.nav__link::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
	background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease);
}
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }

@media (max-width: 520px) {
	.nav__status { font-size: 0; gap: 0; }
	.nav__status .dot { font-size: 12px; }
}

/* Status dot */
.dot {
	--c: var(--sun);
	position: relative;
	display: inline-block;
	width: .62em; height: .62em;
	border-radius: 50%;
	background: var(--c);
	flex: none;
}
/* Pulse ring: transform + opacity only, so it never triggers a repaint */
.dot::after {
	content: "";
	position: absolute; inset: 0;
	border-radius: 50%;
	background: var(--c);
	animation: pulse 2.4s ease-out infinite;
	will-change: transform, opacity;
}
.is-open .dot { --c: var(--ok); }
@keyframes pulse {
	0% { transform: scale(1); opacity: .7; }
	70%, 100% { transform: scale(3.2); opacity: 0; }
}

/* --------------------------------------------------------------------------
   Hero / scene
   -------------------------------------------------------------------------- */
.hero {
	position: relative;
	height: var(--hh);
	overflow: clip;
	isolation: isolate;
	background: #141532;
}

/* Sky: dusk is a static gradient; night + stars are drawn into one canvas that fades in */
.sky { position: absolute; inset: 0; }
.sky::before {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg,
		#151a3e 0,
		#2b2c5c calc(var(--hz) * .34),
		#6b4a7c calc(var(--hz) * .62),
		#c66c78 calc(var(--hz) * .8),
		#f39a72 calc(var(--hz) * .92),
		#ffcf96 var(--hz));
}
.sky__night { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; will-change: opacity; }

.shooting {
	position: absolute;
	width: 140px; height: 1.5px;
	background: linear-gradient(90deg, transparent, #fff);
	border-radius: 2px;
	opacity: 0;
	pointer-events: none;
	will-change: transform, opacity;
}

/* Stage: the 5500×1800 artboard */
.stage {
	position: absolute;
	left: calc(50% - var(--stage-w) / 2);
	bottom: 0;
	width: var(--stage-w);
	aspect-ratio: 5500 / 1800;
}
.stage > * { position: absolute; }

/* Sun — centre at x=50%, y=44.5% of the stage, just above the horizon */
.sun {
	left: 46.3%;
	top: 33.2%;
	width: 7.4%;
	aspect-ratio: 1;
	will-change: transform;
}
.sun__halo, .sun__disc { position: absolute; inset: 0; border-radius: 50%; }
.sun__halo {
	inset: -150%;
	background: radial-gradient(circle, rgb(255 205 140 / .55) 0, rgb(255 160 120 / .22) 30%, rgb(255 140 120 / 0) 70%);
	will-change: opacity;
}
.sun__disc {
	background: radial-gradient(circle at 50% 42%, #fffaf0 0, #ffe7b8 45%, #ffc489 100%);
	box-shadow: 0 0 60px 10px rgb(255 214 160 / .55);
}

/* Clouds + birds: a small layer (cropped viewBox 1400 280 2450 460) */
.clouds {
	left: 25.4545%;
	top: 15.5556%;
	width: 44.5455%;
	height: 25.5556%;
	will-change: transform, opacity;
}
.sky-items { width: 100%; height: 100%; overflow: visible; }
.cloud { fill: #ffd9c4; opacity: .5; }
.bird { fill: #2b2148; }

/* Sea + beach, pre-rendered. Starts at the horizon (y=886) and runs to the bottom of the art (1861). */
.land { left: 0; top: 49.2222%; width: 100%; height: auto; }
.land--night { opacity: 0; will-change: opacity; }

/* A small shimmer on the sun's reflection (the reflection itself is baked into the image) */
.glint {
	left: 46%;
	top: 49.6%;
	width: 8%;
	height: 8.5%;
	-webkit-mask-image: radial-gradient(ellipse 50% 100% at 50% 0, #000 10%, transparent 75%);
	mask-image: radial-gradient(ellipse 50% 100% at 50% 0, #000 10%, transparent 75%);
}
.glint::before {
	content: "";
	position: absolute; inset: 0;
	background: repeating-linear-gradient(180deg, rgb(255 246 225 / .75) 0 2px, transparent 2px 9px);
	animation: glint 2.6s ease-in-out infinite alternate;
	will-change: opacity;
}
@keyframes glint { from { opacity: .15; } to { opacity: .7; } }

/* Scene items (inline SVG from the original design) */
.scene-items { inset: 0; width: 100%; height: 100%; overflow: visible; }
.si-rb-p { fill: none; stroke: #c974ff; stroke-width: 30px; opacity: .55; stroke-linecap: round; }
.si-rb-b { fill: none; stroke: #9b7e48; stroke-width: 30px; opacity: .5; stroke-linecap: round; }
.si-hex { fill: #2a2737; }
.si-ico { fill: #ffe7ba; }
.si-toy { fill: var(--violet-deep); }
.si-shadow { fill: #a99d7b; opacity: .4; }
.si-path { fill: none; stroke: none; }
.hit { fill: transparent; cursor: pointer; pointer-events: all; }
#icon_ball { cursor: pointer; }

/* Night glow: a static filter, toggled once (never animated per frame) */
.is-night .launch { filter: drop-shadow(0 0 22px rgb(166 107 255 / .9)); }
.is-night .toy { filter: drop-shadow(0 0 14px rgb(166 107 255 / .95)); }
.is-night .si-toy { fill: #9b4dff; }

/* Code glyphs rising from the sandbox at night */
.glyphs { left: 50%; top: 79%; width: 0; height: 0; }
.glyph {
	position: absolute;
	font: 500 clamp(9px, .9vw, 15px)/1 var(--f-mono);
	color: #d9c2ff;
	text-shadow: 0 0 10px rgb(166 107 255 / .9);
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	will-change: transform, opacity;
}

/* Title */
.hero__title {
	position: absolute;
	z-index: 5;
	left: 0; right: 0;
	margin-inline: auto;
	top: max(84px, calc(var(--hz) * .2));
	width: min(92vw, 820px);
	will-change: transform;
	text-align: center;
}
.logo { margin: 0 auto; width: clamp(250px, 44vw, 600px); }
@media (max-aspect-ratio: 3/4) {
	.hero__title { top: max(96px, calc(var(--hz) * .24)); }
	.logo { width: min(74vw, 520px); }
}
.logo-svg { width: 100%; height: auto; overflow: visible; }
.lp { fill: #fff; stroke: #fff; stroke-width: 0; stroke-miterlimit: 10; }

.tagline {
	margin-top: clamp(14px, 2vw, 26px);
	font: 500 clamp(16px, 2.1vw, 25px)/1.3 var(--f-display);
	letter-spacing: .01em;
	color: rgb(255 246 232 / .94);
	text-shadow: 0 2px 20px rgb(60 30 80 / .35);
	perspective: 400px;
}

.nightline {
	position: absolute;
	z-index: 5;
	left: 0; right: 0;
	margin-inline: auto;
	top: calc(var(--hz) * .66);
	width: max-content;
	max-width: 90vw;
	font: 400 clamp(11px, 1.1vw, 14px)/1.4 var(--f-mono);
	letter-spacing: .32em;
	text-transform: uppercase;
	color: #e6dcff;
	text-align: center;
	opacity: 0;
}

/* JS-driven intro: hide until animation starts (falls back to visible after 2.5s) */
.js .logo, .js .tagline { visibility: hidden; animation: show 0s 2.5s forwards; }
.js.anim-ready .logo, .js.anim-ready .tagline { animation: none; }
@keyframes show { to { visibility: visible; } }

.hint {
	position: absolute;
	z-index: 5;
	left: 0; right: 0;
	margin-inline: auto;
	width: max-content;
	bottom: clamp(16px, 3vh, 32px);
	display: grid; justify-items: center; gap: 10px;
	font: 400 10px/1 var(--f-mono);
	letter-spacing: .3em;
	text-transform: uppercase;
	color: rgb(70 48 26 / .7);
}
.hint i { width: 1px; height: 36px; background: currentColor; transform-origin: top; animation: hint 2.2s var(--ease) infinite; }
@keyframes hint { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* Night fade into the content below */
.hero__fade {
	position: absolute; inset: auto 0 0 0;
	height: 22%;
	z-index: 4;
	pointer-events: none;
	background: linear-gradient(180deg, transparent, var(--ink));
	opacity: 0;
	will-change: opacity;
}

/* Static night: 404 page and reduced motion (the scrolling hero tweens these instead) */
.night-static .sky__night,
.night-static .land--night,
.night-static .hero__fade { opacity: 1; }
.night-static .sun, .night-static .glint { opacity: 0; }
.night-static .clouds { opacity: .25; }
.night-static .nightline { opacity: .9; }
.night-static .hint { display: none; }

/* --------------------------------------------------------------------------
   Night content
   -------------------------------------------------------------------------- */
.night { position: relative; background: var(--ink); }

.block {
	width: min(100%, var(--max));
	margin: 0 auto;
	padding: clamp(96px, 15vw, 200px) var(--gutter) 0;
}

.label {
	display: flex; gap: 14px; align-items: baseline;
	margin-bottom: clamp(28px, 4vw, 48px);
	font: 400 12px/1 var(--f-mono);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
}
.label span { color: var(--violet); }

/* Manifesto */
.manifesto__text {
	max-width: 19ch;
	font: 500 clamp(32px, 5.6vw, 82px)/1.06 var(--f-display);
	letter-spacing: -.012em;
	text-wrap: balance;
}
.js .manifesto__text .w { opacity: .13; }
.manifesto__text .w { display: inline-block; }
.js .manifesto__text .w { will-change: opacity; }

/* Capabilities */
.caps__list { list-style: none; margin: 0; padding: 0; counter-reset: cap; border-bottom: 1px solid var(--line); }
.cap {
	position: relative;
	display: grid;
	grid-template-columns: 4ch 1fr minmax(0, 34ch);
	align-items: baseline;
	gap: 0 clamp(16px, 3vw, 40px);
	padding: clamp(18px, 2.6vw, 30px) 0;
	border-top: 1px solid var(--line);
}
.cap::before {
	content: "";
	position: absolute; inset: 0 auto 0 0;
	width: 100%;
	background: linear-gradient(90deg, rgb(166 107 255 / .09), transparent 70%);
	transform: scaleX(0); transform-origin: left;
	transition: transform .7s var(--ease);
	pointer-events: none;
}
.cap:hover::before { transform: scaleX(1); }
.cap__n { font: 400 12px var(--f-mono); color: var(--muted); }
.cap__title {
	font: 700 clamp(38px, 7.4vw, 108px)/.95 var(--f-display);
	letter-spacing: -.02em;
	transition: color .5s var(--ease), translate .7s var(--ease), -webkit-text-stroke-color .5s;
	-webkit-text-stroke: 1px transparent;
}
.cap:hover .cap__title { color: transparent; -webkit-text-stroke-color: var(--violet); translate: clamp(8px, 1.4vw, 20px) 0; }
.cap__line { color: var(--sand-dim); font-size: clamp(15px, 1.25vw, 18px); line-height: 1.45; transition: color .4s; }
.cap:hover .cap__line { color: var(--sand); }

@media (max-width: 760px) {
	.cap { grid-template-columns: 3ch 1fr; row-gap: 10px; }
	.cap__line { grid-column: 2; }
}

/* Marquee */
.marquee {
	margin-top: clamp(96px, 15vw, 200px);
	border-block: 1px solid var(--line);
	padding: clamp(18px, 3vw, 34px) 0;
	overflow: hidden;
	user-select: none;
}
.marquee__track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.marquee__set { display: flex; align-items: center; flex: none; }
.marquee__word {
	padding: 0 clamp(18px, 2.4vw, 36px);
	font: 900 clamp(48px, 9vw, 136px)/1 var(--f-display);
	text-transform: uppercase;
	letter-spacing: -.01em;
	color: transparent;
	-webkit-text-stroke: 1px rgb(243 230 207 / .38);
	transition: color .4s, -webkit-text-stroke-color .4s;
}
.marquee__word:hover { color: var(--sand); }
.marquee__sep { color: var(--violet); font-size: clamp(18px, 2vw, 30px); }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Experiments */
.exp__list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.exp {
	display: grid;
	grid-template-columns: 1fr auto 6ch;
	gap: 20px;
	align-items: baseline;
	padding: 22px 0;
	border-top: 1px solid var(--line);
	transition: padding .5s var(--ease), color .4s;
}
a.exp:hover { padding-left: 14px; color: var(--violet); }
.exp__name { font: 500 clamp(24px, 3.2vw, 44px)/1.1 var(--f-display); }
.exp__kind, .exp__year { font: 400 12px var(--f-mono); color: var(--muted); text-transform: lowercase; letter-spacing: .06em; }
.exp__year { text-align: right; }

/* Status / contact */
.status { padding-bottom: clamp(96px, 14vw, 180px); }
.status__title {
	display: flex; align-items: center; gap: .35em;
	font: 700 clamp(36px, 7.2vw, 108px)/1 var(--f-display);
	letter-spacing: -.02em;
}
.status__title .dot { font-size: .42em; }
.status__sub { margin-top: 18px; font-size: clamp(17px, 1.6vw, 22px); color: var(--sand-dim); }
.status__outro { margin-top: 10px; max-width: 46ch; color: var(--muted); }

.mail {
	display: inline-flex;
	align-items: baseline;
	gap: .35em;
	margin-top: clamp(40px, 6vw, 80px);
	font: 500 clamp(26px, 5.4vw, 76px)/1.1 var(--f-display);
	letter-spacing: -.015em;
	max-width: 100%;
	overflow-wrap: anywhere;
}
.mail__text {
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
	transition: background-size .7s var(--ease), color .4s;
	padding-bottom: .06em;
}
.mail:hover .mail__text { background-size: 100% 2px; color: var(--violet); }
.mail__arrow { display: inline-block; color: var(--violet); transition: translate .6s var(--ease); }
.mail:hover .mail__arrow { translate: .25em 0; }

.coords {
	display: flex; flex-wrap: wrap; gap: 8px 32px;
	margin-top: clamp(40px, 5vw, 64px);
	font: 400 12px/1.4 var(--f-mono);
	letter-spacing: .08em;
	color: var(--muted);
	text-transform: uppercase;
}
.coords time { color: var(--sand); }

/* Reveal */
.js [data-reveal] { opacity: 0; }
.no-anim [data-reveal], .no-anim .manifesto__text .w { opacity: 1 !important; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.foot {
	position: relative;
	background: var(--ink-2);
	border-top: 1px solid var(--line);
	font-size: 15px;
}
.foot__grid {
	width: min(100%, var(--max));
	margin: 0 auto;
	padding: clamp(48px, 7vw, 88px) var(--gutter) clamp(32px, 5vw, 56px);
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 40px;
}
.foot__name { font: 700 22px/1 var(--f-display); margin-bottom: 12px; }
.foot__brand .muted { max-width: 30ch; }
.foot__meta { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 22px 28px; }
.foot__meta dt { font: 400 11px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.foot__meta dd { margin: 0; color: var(--sand-dim); line-height: 1.5; }
.foot__meta a:hover { color: var(--violet); }
.foot__bar {
	position: relative;
	width: min(100%, var(--max));
	margin: 0 auto;
	padding: 20px var(--gutter) calc(20px + env(safe-area-inset-bottom));
	display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between;
	font: 400 12px var(--f-mono);
	color: var(--muted);
	letter-spacing: .04em;
}
.foot__bar::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--line); }
.foot__bar nav { display: flex; gap: 22px; flex-wrap: wrap; }
.foot__bar a:hover { color: var(--sand); }
@media (max-width: 760px) { .foot__grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Pages
   -------------------------------------------------------------------------- */
.page { min-height: 70vh; }
.prose { max-width: calc(760px + var(--gutter) * 2); padding-top: clamp(120px, 16vw, 180px); padding-bottom: clamp(80px, 10vw, 140px); }
.page__title { font: 700 clamp(40px, 6vw, 76px)/1 var(--f-display); letter-spacing: -.02em; margin-bottom: clamp(32px, 4vw, 56px); }
.page__title a:hover { color: var(--violet); }
.prose__body { color: var(--sand-dim); font-size: 17px; line-height: 1.75; }
.prose__body > * + * { margin-top: 1.1em; }
.prose__body h2, .prose__body h3 { color: var(--sand); font-weight: 700; line-height: 1.2; margin-top: 2em; }
.prose__body h2 { font-size: 26px; }
.prose__body h3 { font-size: 20px; }
.prose__body a { color: var(--sand); text-decoration: underline; text-decoration-color: var(--violet); text-underline-offset: 3px; }
.prose__body ul, .prose__body ol { padding-left: 1.2em; }
.prose__body li + li { margin-top: .4em; }
.prose__body li::marker { color: var(--violet); }
.prose__updated { margin-top: 48px; font: 400 12px var(--f-mono); letter-spacing: .06em; }
.entry + .entry { margin-top: 96px; }

/* 404 */
.hero--lost { height: max(100svh, 600px); }
.lost { top: max(110px, calc(var(--hz) * .3)); }
.lost .label { justify-content: center; }
.lost__title { font: 700 clamp(34px, 6vw, 80px)/1.02 var(--f-display); letter-spacing: -.02em; }
.lost__back { display: inline-block; margin-top: 28px; font: 400 13px var(--f-mono); letter-spacing: .08em; color: var(--sand-dim); border-bottom: 1px solid var(--violet); padding-bottom: 4px; }
.lost__back:hover { color: var(--sand); }

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
	.js .logo, .js .tagline { visibility: visible; }
}