/* ---------------------------------------------------------------
   dragable — IAAH v7 rebuilt faithfully.
   Fonts below are the actual embedded subsets recovered from the
   original MenuFont.swf (JPEXS export): Politica Italic, Gotham
   Bold, Adobe Caslon Pro SmBd Italic.
   Motion constants transcribed from the decompiled engine:
   elastic drag = distance/6 per frame @30fps; section/slide tweens
   = 2s easeOutExpo (Tweener default); fades = 1s; menu color
   tweens = 1s; scrim = 0.7 alpha over 2s; strip fade on menu
   select = 0.8s.
---------------------------------------------------------------- */
@font-face {
	font-family: "Politica";
	src: url("/fonts/politica-italic.ttf") format("truetype");
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Gotham";
	src: url("/fonts/gotham-bold.ttf") format("truetype");
	font-weight: 700;
	font-display: swap;
}
@font-face {
	font-family: "CaslonSmBd";
	src: url("/fonts/caslon-smbd-italic.ttf") format("truetype");
	font-style: italic;
	font-display: swap;
}

:root {
	--expo: cubic-bezier(0.19, 1, 0.22, 1); /* ≈ easeOutExpo */
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overscroll-behavior: none; }
body {
	background: #f1f314;
	transition: background-color 2s var(--expo);
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	overflow: hidden;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* --- logo (drops in from above, hover opens menu) -------------- */
#logo {
	position: fixed;
	top: 14px; left: 18px;
	z-index: 47; /* below the scrim: the mark dims when the menu opens */
	background: none; border: 0; padding: 0;
	cursor: pointer;
	transform: translateY(-500px);
	transition: transform 2s var(--expo);
}
#logo.in { transform: translateY(0); }
#logo img { width: 300px; height: auto; display: block; }

/* --- stage / strip --------------------------------------------- */
#stage {
	position: fixed;
	inset: 0;
	overflow: hidden;
	touch-action: none;
}
#stage.attract { cursor: none; }
#stage.dragging { cursor: grabbing; }
#plane {
	position: absolute;
	top: 0; left: 0;
	will-change: transform;
	transition: opacity 0.8s ease;
	user-select: none;
	-webkit-user-select: none;
}
#plane .holder {
	position: absolute;
	opacity: 0;
	transition: opacity 1s ease;
}
#plane .holder.on { opacity: 1; }
#plane img {
	display: block;
	max-width: none;
	user-select: none;
	-webkit-user-drag: none;
	pointer-events: none;
}

/* hello / intro screen (HTML re-set of the original) */
.hello {
	width: 980px;
	max-width: 92vw;
	padding: 40px 44px;
	color: #111;
}
.hello .big {
	font-size: clamp(80px, 12vw, 150px);
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 0.9;
	color: rgba(255,255,255,0.55);
	margin: 0;
}
.hello h2 { font-size: clamp(30px, 4.6vw, 46px); margin: 8px 0 18px; letter-spacing: -0.02em; }
.hello p  { font-size: 15px; line-height: 1.5; max-width: 56ch; margin: 0 0 14px; }
.hello .rule { border: 0; border-top: 1px solid rgba(0,0,0,0.5); margin: 18px 0; }
.hello .prev a { color: #999; text-decoration: none; }

/* flash-slide placeholder */
.flash-card {
	width: 720px;
	max-width: 88vw;
	padding: 30px;
	border: 1px solid rgba(127,127,127,0.6);
	font-size: 13px;
	line-height: 1.5;
	color: inherit;
}
.flash-card .k { text-transform: uppercase; letter-spacing: 0.18em; font-size: 10px; opacity: 0.6; display: block; margin-bottom: 10px; }

/* --- drag hint: elastic mouse-follower ------------------------- */
#hint {
	position: fixed;
	top: 0; left: 0;
	z-index: 40;
	background: #fff;
	color: #111;
	font-size: 11px;
	font-weight: 700;
	font-style: italic;
	white-space: nowrap;
	padding: 6px 12px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.3);
	pointer-events: none;
	opacity: 0;
	transition: opacity 1s ease;
	will-change: transform;
}
#hint.on { opacity: 1; }

/* --- edge tabs: slide out on hover (1s expo) ------------------- */
.edge-tab {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	z-index: 45;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	overflow: visible;
}
.edge-tab .ins {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #fff;
	color: #111;
	box-shadow: 0 2px 14px rgba(0,0,0,0.35);
	padding: 12px 16px;
	min-height: 44px;
	font-family: "CaslonSmBd", Georgia, serif;
	font-style: italic;
	font-size: 14px;
	transition: transform 1s var(--expo);
	will-change: transform;
}
.edge-tab .count {
	font-family: "Helvetica Neue", Helvetica, sans-serif;
	font-style: normal;
	font-size: 11px;
	border-left: 1px solid #ccc;
	padding-left: 12px;
}
#tab-prev { left: 0; }
#tab-next { right: 0; }
#tab-prev .ins { transform: translateX(calc(-100% + 12px)); }
#tab-next .ins { transform: translateX(calc(100% - 12px)); flex-direction: row-reverse; }
#tab-prev:hover .ins, #tab-prev.show .ins { transform: translateX(0); }
#tab-next:hover .ins, #tab-next.show .ins { transform: translateX(0); }
body.dragging #tab-prev .ins { transform: translateX(-105%); }
body.dragging #tab-next .ins { transform: translateX(105%); }

/* --- load bar (PreloaderView) ---------------------------------- */
#loadbar {
	position: fixed;
	left: 0; bottom: 0;
	height: 3px;
	width: 0;
	background: #111;
	opacity: 0;
	z-index: 50;
	transition: width 0.4s ease, opacity 0.4s ease;
}
#loadbar.on { opacity: 0.85; }

/* --- menu: left column over a 70% scrim ------------------------ */
#scrim {
	position: fixed;
	inset: 0;
	background: #000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 2s ease;
	z-index: 48;
}
#scrim.on { opacity: 0.7; }
#menu {
	position: fixed;
	inset: 0;
	z-index: 50;
	pointer-events: none;
	overflow: hidden;
}
#menu-col {
	position: absolute;
	top: 118px; left: 88px;
	pointer-events: auto;
	opacity: 0;
	transition: opacity 1s ease;
	will-change: transform;
}
#menu.open #menu-col { opacity: 1; }
#menu-col .head {
	font-family: "Helvetica Neue", Helvetica, sans-serif;
	font-weight: 700;
	line-height: normal;
}
#menu-col a {
	display: block;
	text-decoration: none;
	line-height: normal; /* font-metric spacing, as Flash TextFields did */
	white-space: nowrap;
	transition: color 1s ease;
}
#menu-col a.f-politica { font-family: "Politica", "Helvetica Neue", sans-serif; font-style: italic; }
#menu-col a.f-gotham   { font-family: "Gotham", "Helvetica Neue", sans-serif; font-weight: 700; text-transform: uppercase; }
#menu-col a.f-caslon   { font-family: "CaslonSmBd", Georgia, serif; font-style: italic; }
#menu-col a.selected   { cursor: default; }

@media (max-width: 640px) {
	#logo img { width: 180px; }
	#menu-col { top: 96px; left: 24px; }
	.hello { padding: 24px; }
}