/* ===========================================================================
   style.css — vanilla port of App.svelte's <style> block.
   Originally Svelte scoped these to a single component; here they apply
   globally, which is fine since the whole site is one document.
   =========================================================================== */

@font-face {
	font-family: special;
	src: url("/MADE2.otf");
}

/* ===========================================================================
   Fluid text scale for the gallery list + description box.
   Formula = clamp(MIN, calc(A·vh − B·vw + C·px), MAX).
   - vh component: text grows on taller screens (phones in portrait).
   - vw subtraction: text shrinks on wider screens (desktops).
   - px offset: baseline so the formula sits in a useful range.
   - clamp(): hard floor/ceiling so it never gets unreadable or absurd.
   Tune A/B/C/min/max per variable to taste — order: fine, body, tag, title.
   =========================================================================== */
:root {
	/* --fs-scale lets a media query shrink the description/menu text family in one
	   place. It multiplies the three text variables the gallery descriptions, the
	   description title, "Galleries", and the gallery names all draw from. */
	--fs-scale: 1;
	--fs-fine:  calc(clamp(13px, calc(1.1vh - 0.35vw + 5.5px), 19px) * var(--fs-scale));
	--fs-body:  calc(clamp(19px, calc(2.6vh - 0.75vw + 10px),  30px) * var(--fs-scale));
	--fs-tag:   clamp(17px, calc(2.2vh - 0.6vw  + 7.5px), 26px);
	--fs-title: calc(clamp(24px, calc(3.2vh - 0.85vw + 13px),  38px) * var(--fs-scale));
	--ls-body:  clamp(2px,  calc(0.3vh - 0.06vw + 1px),  5px);
	--ls-title: clamp(3px,  calc(0.5vh - 0.1vw  + 2px),  8px);
}

/* Mobile (touch primary): description text, description title, "Galleries", and
   the gallery names are ~20% smaller. Desktop ("regular") keeps full size.
   (pointer: coarse) matches the same phones/tablets that hide the nav buttons
   and go full-screen, so the mobile treatment stays consistent across the app. */
@media (pointer: coarse) {
	:root { --fs-scale: 0.8; }
}

.fwdbkwdbutton {
	background-color: transparent;
	height: 5vh;
	width: 5vh;
	position: absolute;
	top: 45vh;
	display: block;
	-webkit-tap-highlight-color: transparent;
	z-index: 1;
	cursor: pointer;
}

.noselect {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#descriptionbox {
	position: fixed;
	display: flex;
	flex-direction: column;
	width: 100vw;
	font-family: 'special';
	background-color: rgba(13, 14, 22, 0.88);
	transition: opacity 1s;
	z-index: 1;
	top: 0;
}

#descriptionnames {
	display: block;
	overflow-y: scroll;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch; /* momentum scroll on iOS */
	padding: 0;
	font-size: var(--fs-body);
	padding-left: 0.9em;
	letter-spacing: var(--ls-body);
	scrollbar-width: thin;
	scrollbar-color: #818B99 transparent; /* Firefox: visible thumb */
	margin-right: 1vw;
	/* Slide transition: animate max-height with quadInOut-ish easing.
	   Svelte's slide() animated height; we use max-height because content height
	   is unknown at toggle time. The active state is set in app.js render(). */
	transition: max-height 0.4s cubic-bezier(0.83, 0, 0.17, 1), opacity 0.4s ease;
}

/* 8px so it's grabbable/visible on mobile (the old 0.3vw was ~1px on a phone).
   Track stays transparent; only the thumb shows, and only when content overflows
   — so the bar "appears" exactly when there's enough text to scroll. */
#descriptionnames::-webkit-scrollbar { width: 8px; }
#descriptionnames::-webkit-scrollbar-track { margin-bottom: .5vw; margin-top: .5vw; background: transparent; }
#descriptionnames::-webkit-scrollbar-thumb { background-color: #818B99; border-radius: 4px; min-height: 32px; }
#descriptionnames::-webkit-scrollbar-thumb:active { background-color: #aeb8c6; }

/* Twin title bars: #gallerytitle (bottom of gallery list) + #descriptionboxtag
   (bottom of description box). Same font, same height, same padding so they
   visually match. Only the vertical placement (margin-top) differs per panel. */
#descriptionboxtag,
#gallerytitle {
	position: relative;
	height: 1.6em;
	/* padding-left = hamburger left margin (.32em) + hamburger width (1.25em)
	   + gap-to-text (3 × .32em = .96em) = 2.53em. Keeps the space above/below/
	   left of the hamgrad group equal (.32em) and the text gap exactly 3× that. */
	padding: 0 .5em 0 2.53em;
	font-size: var(--fs-title);
	letter-spacing: var(--ls-title);
	white-space: nowrap;
	display: flex;
	align-items: center;
	/* Whole bar is the click target (full width × bar height) for toggling the
	   description box / gallery menu, so the pointer cursor spans the whole strip
	   rather than just the inner text. */
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
/* Hamgrad→title gap reduced 40%: base gap .96em → .576em, so padding-left =
   1.57em (hamburger end: .32em left + 1.25em wide) + .576em = 2.146em. */
#descriptionboxtag { margin-top: 0; padding-left: 2.146em; }

/* Center the title-row content vertically regardless of font size. The inner
   div carries `vertical-align:top` + `height:100%` inline from index.html; the
   inline-flex + align-items here override that so the "Galleries" / tag text
   sits in the vertical middle of the row at every viewport size. (Position
   relative on the title rows themselves is set in the unified twin rule
   above so absolute-positioned hamburgers anchor to the title bar, not the
   surrounding gallerylist box which grows when the menu opens.) */
#gallerytitle > div,
#descriptionboxtag > div {
	display: inline-flex !important;
	align-items: center;
	padding-left: 0 !important;
	/* Optical centering nudge: MADE2 renders with its glyph weight high in the
	   em box, so flex-centered text looks slightly above center. A small
	   padding-top shifts the in-flow text down. Doesn't move the hamburgers —
	   they're absolute and anchor to the title bar, not this static div. */
	padding-top: .12em;
}

#everything {
	position: fixed;
	height: 100vh;
	height: 100dvh; /* fill the *visible* viewport on mobile (excludes the URL bar
	                   when it's shown). Browsers without dvh fall back to 100vh. */
	width: 100vw;
	background-color: transparent;
	-ms-overflow-style: none;
	scrollbar-width: none;
	-webkit-user-drag: none;
}

#everything::-webkit-scrollbar { display: none; -webkit-appearance: none; width: 0; height: 0; }

#gallerylist {
	z-index: 1;
	position: fixed;
	display: flex;
	flex-direction: column;
	width: 100%;
	background-color: rgba(13, 14, 22, 0.88);
	font-family: 'special';
	bottom: 0;
	max-height: 100%;
	transition: opacity 1s;
}

.hamburger {
	position: absolute;
	display: block;
	width: 1.25em;
	left: .32em;
	cursor: pointer;
}

#gallerynames {
	display: block;
	overflow: hidden;
	padding: 0;
	font-size: var(--fs-body);
	-ms-overflow-style: none;
	letter-spacing: var(--ls-body);
	/* em-based (not vw) so the names hold a constant distance from the window
	   edge as it's resized — matching #descriptionnames. Combined with #lefter
	   margin-left:0, total left offset = 0.9em. */
	margin-left: 0.9em;
	/* Slide transition matching Svelte slide({easing: quadInOut, duration:400}) */
	transition: max-height 0.4s cubic-bezier(0.83, 0, 0.17, 1);
	/* When open, app.js flips overflow-y to auto so the list scrolls within its
	   ~40vh cap. These ensure vertical touch-drag works (and isn't grabbed as a
	   gallery swipe) plus momentum scrolling on iOS. */
	touch-action: pan-y;
	-webkit-overflow-scrolling: touch;
}

#lefter { scrollbar-color: #2c2c2cb6 #5e5e5e00; scrollbar-width: thin; }
#lefter::-webkit-scrollbar { width: 1.2vw; }
#lefter::-webkit-scrollbar-track { margin-bottom: .5vw; }
#lefter::-webkit-scrollbar-thumb { background-color: #818B99; border-radius: .2vw; }

#nametext {
	display: block;
	cursor: pointer;
	overflow-wrap: break-word;
	word-break: break-word;
	font-size: var(--fs-body);
	line-height: 1.44;
	letter-spacing: var(--ls-title);
	-webkit-tap-highlight-color: transparent;
}

#descriptiontext {
	display: inline-block;
	word-wrap: break-word;
	line-height: 1.6;
	font-size: var(--fs-fine);
	color: rgba(255, 255, 255, 0.9);
	transition: opacity 0.4s ease;
}

/* "Galleries" menu button — a touch larger than its description-box twin.
   Scaled off --fs-title so it still tracks the viewport clamp; the title bar's
   height/padding/hamburgers are all em-based so they grow proportionally. */
/* Hamgrad→"Galleries" gap halved: base gap .96em → .48em, so padding-left =
   1.57em (hamburger end) + .48em = 2.05em. */
#gallerytitle { margin-top: 0; font-size: calc(var(--fs-title) * 1.4); font-weight: 510; padding-left: 2.05em; }

#mediabox {
	position: absolute;
	display: flex;
	will-change: left, transform;
	-webkit-user-drag: none;
	/* Initial fade-in (Svelte's in:fade={{duration:2000}}). app.js flips opacity to 1 after mount. */
	transition: opacity 2s;
}

#mediabox::-webkit-scrollbar { display: none; }

img {
	position: relative;
	top: 50vh;
	top: 50dvh;        /* keep vertical centering aligned with #everything's dvh */
	transform: translateY(-50%);
	height: 100vh;
	height: 100dvh;
	mask-clip: content-box;
	object-fit: contain;
	-webkit-tap-highlight-color: transparent;
	-webkit-user-drag: none;
}

.fullscreen {
	max-height: 100vh;
	max-height: 100dvh;
	width: 100vw;
}

/* Mobile full-screen toggle — parked at the right of the Galleries bar, vertically
   centred. Absolutely positioned within #gallerytitle (which is position:relative),
   sized in em so it scales with the bar's font. Display is gated to touch devices
   in render(); it inherits the bar's opacity fade (it's a child of #gallerylist). */
#fsbtn {
	position: absolute;
	right: .6em;
	top: 50%;
	transform: translateY(-50%);
	font-size: inherit; /* buttons don't inherit font-size by default, so the em
	                       units below would size against the UA default (~13px);
	                       inherit the bar's large font so the button fits it. */
	width: 1.1em;
	height: 1.1em;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.14);
	color: rgba(255, 255, 255, 0.92);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
#fsbtn svg { width: 64%; height: 64%; display: block; }
#fsbtn:active { background-color: rgba(255, 255, 255, 0.26); }

.mediadiv {
	text-align: center;
	overflow: visible;
	display: inline-block;
	flex-shrink: 0;
	width: 25vw;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.grad {
	background: repeating-linear-gradient(70deg, #2a7f3e .3em, #c4a41c .9em, #db6d18 1.5em, #c52d22 2.1em, #a624d3 2.7em, #1882d3 3.3em, #2a7f3e 3.6em);
	-webkit-text-fill-color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.hamgrad1 {
	background: repeating-linear-gradient(70deg, #2a7f3e .3em, #c4a41c .9em, #db6d18 1.5em, #c52d22 2.1em, #a624d3 2.7em, #1882d3 3.3em, #2a7f3e 3.6em);
}

.hamgrad2 {
	background: repeating-linear-gradient(70deg, #1882d3 .3em, #2a7f3e .9em, #c4a41c 1.5em, #db6d18 2.1em, #c52d22 2.7em, #a624d3 3.3em, #1882d3 3.6em);
}

.hamgrad3 {
	background: repeating-linear-gradient(70deg, #a624d3 .3em, #1882d3 .6em, #2a7f3e 1.5em, #c4a41c 2.1em, #db6d18 2.7em, #c52d22 3.3em, #a624d3 3.6em);
}

#playpause {
	top: 49vh;
	left: 50vw;
	background-color: transparent;
	position: fixed;
	display: block;
	-webkit-tap-highlight-color: transparent;
	z-index: 1;
	cursor: pointer;
	transition: opacity 1s;
}

#fullscreenexitwarning {
	position: fixed;
	display: block;
	-webkit-tap-highlight-color: transparent;
	z-index: 1;
	cursor: pointer;
	transition: opacity 1s;
	line-height: 3vmax;
	font-size: 2.8vmax;
	letter-spacing: .5vmax;
	top: 70vh;
	left: 0px;
	width: 100vw;
	text-align: center;
	font-family: 'special';
	color: rgba(255, 255, 255, 0.6);
}

#playcircle {
	position: absolute;
	display: block;
	background-color: rgba(255, 255, 255, 0.7);
	margin-top: -8vmax;
	margin-left: -8vmax;
	height: 16vmax;
	width: 16vmax;
	border-radius: 8vmax;
	-webkit-tap-highlight-color: transparent;
	z-index: 1;
}

#playarrow {
	position: absolute;
	margin-top: -6vmax;
	margin-left: -3.25vmax;
	border-top: 6vmax solid transparent;
	border-bottom: 6vmax solid transparent;
	border-left: 10vmax solid rgba(255, 255, 255, 0.7);
}

#pausearrow {
	position: absolute;
	margin-top: -5.5vmax;
	margin-left: -4.75vmax;
	width: 5.5vmax;
	height: 11vmax;
	border-left: 2vmax solid rgba(255, 255, 255, 0.7);
	border-right: 2vmax solid rgba(255, 255, 255, 0.7);
}

/* Bigmode prev/next: a chevron inside a circle. The whole circle is the click
   target (pointer-events toggled in JS with visibility, so it's only clickable
   while shown). Shown with the controls in bigmode on non-touch devices. */
#prevarrow, #nextarrow {
	position: fixed;
	top: 50vh;
	width: 6.75vmax;
	height: 6.75vmax;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.42);
	display: none;                 /* render()/updateChevrons sets flex when shown */
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
	cursor: pointer;
	z-index: 2;
	-webkit-tap-highlight-color: transparent;
}
#prevarrow:hover, #nextarrow:hover { background: rgba(0, 0, 0, 0.6); }
#prevarrow { left: 2.5vw;  transform: translateY(-50%); }
#nextarrow { right: 2.5vw; transform: translateY(-50%); }
/* a simple solid triangle, made from borders */
#prevarrow::before, #nextarrow::before {
	content: '';
	width: 0;
	height: 0;
	border-top: 1.875vmax solid transparent;
	border-bottom: 1.875vmax solid transparent;
}
#prevarrow::before { border-right: 2.55vmax solid rgba(255, 255, 255, 0.74); margin-right: 0.6vmax; }  /* points left */
#nextarrow::before { border-left:  2.55vmax solid rgba(255, 255, 255, 0.74); margin-left: 0.6vmax; }   /* points right */

video {
	top: 50vh;
	transform: translateY(-50%);
	-webkit-tap-highlight-color: transparent;
}

.controls {
	font-family: 'special';
	position: fixed;
	top: 3%;
	width: 100vw;
	transition: opacity 1s;
	z-index: 1;
	left: 0;
	color: white;
	cursor: pointer; /* whole bar is the seek track (drag to scrub) */
	touch-action: none; /* let seekMove own the gesture; no browser pan/zoom */
}

.info {
	display: flex;
	width: 100%;
	justify-content: space-between;
}

/* Scoped to the video controls bar so it doesn't steal styling from the
   gradient description tag (#descriptiontagtext). The original Svelte
   <style> auto-scoped this to the component. */
.controls .info span {
	padding: 3vmax;
	color: rgba(255, 255, 255, 0.8);
	text-shadow: 0 0 3px black;
	font-size: 2vmax;
	opacity: 0.7;
}

.controls .info .time { width: 5vmax; }
.controls .info .time:last-child { text-align: right; }

#progress {
	display: block;
	position: fixed;
	left: 0px;
	height: 1vmax;
	-webkit-appearance: none;
	appearance: none;
	background-color: rgba(255, 255, 255, 0.6);
}

/* List reset for <ol> too. global.css resets ul/li but not ol, which is what
   #gallerynames and #descriptionnames use, so they were showing decimal markers. */
ol { list-style: none; padding: 0; margin: 0; }
#gallerynames li, #descriptionnames li { list-style: none; }
#gallerynames li::marker, #descriptionnames li::marker { content: ''; }

/* Cross-browser cursor:grab/grabbing helper used in app.js via mediabox.style.cursor */

/* Note: the previous @media (orientation: portrait) block was removed when
   font-size + letter-spacing + line-height + height + padding all moved to em
   or fluid clamp() formulas. Those scale smoothly across orientations on
   their own, so no breakpoint override is needed — and removing it
   eliminates the visible "jump" at the orientation diagonal that the
   media-query approach caused. */