/* Phase B: disc-in-case project view (src/components/ProjectCase.tsx) and the
   home thumbnail (<case-item>). Served verbatim: keep backdrop-filter out of
   the bundler pipeline. Geometry vars (--case-w, --case-h, --case-left,
   --case-top, --edge-x, --tuck, --smax) are written by ProjectCase from the
   measured viewport; the numbers below are the case photo's own proportions. */

case-item[data-case-open] { visibility: hidden; }

.case-view {
	position: relative;
	pointer-events: auto;
	min-height: 100dvh;
	--case-blur: 28px;
	/* --cover-bg / --cover-fg per project (ProjectCase inline); pages share the cover color */
	--paper: var(--cover-bg, #f0eae8);
	/* px per booklet design unit (pages are 478 design px tall = the sheet height) */
	--pagek: calc(var(--case-h) * 999 / 1028 / 478);
	--ease-out: cubic-bezier(.24, 1, .29, 1);
}
.case-view.is-mobile { --case-blur: 20px; }

/* blurred home behind everything (fixed, no transformed ancestors) */
.case-blur {
	position: fixed;
	inset: 0;
	z-index: 0;
	-webkit-backdrop-filter: blur(0px);
	backdrop-filter: blur(0px);
	transition: -webkit-backdrop-filter .6s var(--ease-out), backdrop-filter .6s var(--ease-out);
}
.case-view.is-open .case-blur {
	-webkit-backdrop-filter: blur(var(--case-blur));
	backdrop-filter: blur(var(--case-blur));
}
.case-view.is-closing .case-blur { transition-duration: .5s; transition-delay: .1s; }

/* the booklet is under the case: hidden while the case flies in or out */
.is-mobile .case-sheet { transition: opacity .25s ease; }
.is-mobile.is-opening .case-sheet,
.is-mobile.is-closing .case-sheet { opacity: 0; transition-duration: .18s; }
.is-desktop.is-opening .case-sheet,
.is-desktop.is-closing .case-sheet { visibility: hidden; }
.case-arrow,
.case-pills { transition: opacity .3s ease; }
.is-opening .case-arrow,
.is-closing .case-arrow,
.is-opening .case-pills,
.is-closing .case-pills { opacity: 0 !important; transition-duration: .18s; }

/* ---------- desktop stage: sticky viewport, scroll drives the pull-out ---------- */
.case-spacer { position: relative; }
.case-stage {
	position: sticky;
	top: 0;
	height: 100dvh;
	width: 100%;
	overflow: clip;
}
.is-desktop .case-pos {
	position: absolute;
	left: var(--case-left);
	top: var(--case-top);
	width: var(--case-w);
	height: var(--case-h);
	z-index: 2;
	will-change: transform;
}
.is-desktop .case-sheet {
	/* a strip of paper squares attached to the left of the cover, tucked
	   --tuck under it; it fades in over the first --fade-px of scroll while the
	   box moves away, then drags right with the box (see ProjectCase) */
	position: absolute;
	top: calc(var(--case-top) + var(--case-h) * 10 / 1028);
	height: calc(var(--case-h) * 999 / 1028);
	right: calc(100% - var(--edge-x) - var(--fade-px, 0px));
	width: max-content;
	z-index: 1;
	opacity: 0;
	will-change: transform, opacity;
}
.is-desktop .case-sheet-inner {
	display: flex;
	flex-direction: row-reverse; /* first square sits next to the cover, later ones extend left */
	height: 100%;
	width: max-content;
	max-width: none;
}
/* a booklet page = one Figma frame: own width (inline, in --pagek units), own bg,
   items at % positions, clipped like the frame. The gap to the previous page is the
   page's margin-right (row-reverse: later pages extend left). */
.is-desktop .case-page {
	position: relative;
	flex: 0 0 auto;
	box-sizing: content-box; /* width = the design width; the tuck padding comes on top */
	height: 100%;
	background: var(--paper);
	overflow: clip;
}
/* the page nearest the cover runs --tuck under it: pad that side so the frame that
   shows beside the cover is the whole designed page (margins stay as Stav set them) */
.is-desktop .case-page:first-child { padding-right: var(--tuck); }
.case-page-item { position: absolute; }
.case-page-media {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	-webkit-user-drag: none;
	user-select: none;
}
/* videos take clicks: a click pauses, another resumes */
.case-page-video { pointer-events: auto; cursor: pointer; }

@supports (animation-timeline: scroll()) {
	.is-desktop .case-pos {
		animation: case-slide linear both;
		animation-timeline: scroll(nearest);
	}
	.is-desktop .case-sheet {
		/* animation-name is set per instance (piecewise keyframes from ProjectCase) */
		animation-duration: auto;
		animation-timing-function: linear;
		animation-fill-mode: both;
		animation-timeline: scroll(nearest);
	}
	.case-arrow {
		animation: arrow-fade linear both;
		animation-timeline: scroll(nearest);
		animation-range: 0px 90px;
	}
}
@keyframes case-slide {
	from { transform: translateX(0px); }
	to { transform: translateX(var(--smax, 0px)); }
}
@keyframes arrow-fade {
	from { opacity: 1; }
	to { opacity: 0; }
}
/* fallback: ProjectCase writes --s (scrollTop) and --arrow-op */
.no-timeline.is-desktop .case-pos { transform: translateX(var(--s, 0px)); }
.no-timeline.is-desktop .case-sheet { transform: translateX(var(--sheet-x, 0px)); opacity: var(--sheet-op, 0); }
.no-timeline .case-arrow { opacity: var(--arrow-op, 1); }

/* ---------- the case ---------- */
.case-fly {
	position: absolute;
	inset: 0;
	perspective: 3200px;
	transform-origin: 50% 50%;
	will-change: transform;
}
.is-mobile .case-fly { transform: rotate(-90deg); }
.case-cover {
	/* the lid: hinged at the box's left edge, swings 180deg. Two faces in a 3D
	   context; nothing but transform may live on this element (opacity, filter,
	   overflow, clip-path, will-change: opacity would flatten it) */
	position: absolute;
	left: 0;
	top: 0;
	width: calc(100% * 1068 / 2236);
	height: 100%;
	transform-origin: 100% 50%;
	transform-style: preserve-3d;
	z-index: 2; /* the closed lid paints over the tray */
	will-change: transform;
}
.case-cover-front,
.case-cover-back {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
.case-cover-front { transform: rotateY(0deg); }
.case-cover-back { transform: rotateY(180deg); }
.case-lid-art {
	/* the hover artwork riding on the outer face (box coords map 1:1, may overhang) */
	position: absolute;
	top: 0;
	height: 100%;
	pointer-events: none;
	-webkit-user-drag: none;
}
.case-lid-sticker,
.case-sticker-flat {
	position: absolute;
	pointer-events: none;
	-webkit-user-drag: none;
}
.case-sticker-flat { opacity: 0; }
.case-tray {
	position: absolute;
	right: 0;
	top: 0;
	width: calc(100% * 1168 / 2236);
	height: 100%;
	z-index: 1;
}
.case-cover-img,
.case-tray-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
	-webkit-user-drag: none;
	user-select: none;
	-webkit-user-select: none;
}
.case-disc {
	position: absolute;
	transform: translate(-50%, -50%) rotate(var(--disc-start, 0deg));
	animation: case-spin 7.937s linear infinite;
	will-change: transform;
}
@keyframes case-spin {
	from { transform: translate(-50%, -50%) rotate(var(--disc-start, 0deg)); }
	to { transform: translate(-50%, -50%) rotate(calc(var(--disc-start, 0deg) + 360deg)); }
}
.case-disc-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
	-webkit-user-drag: none;
}

/* paper (booklet cover) content, kept inside the paper rectangle of the photo.
   Layout + type transcribed from Stav's portfolio_3 cover square (479x478 design px):
   content box at (38,39) 403x400; meta Inter 10, title ABC Diatype 40 at y28, body
   Inter 12 justified anchored to the bottom. 1cqw = 1/479, 1cqh = 1/478 of the square. */
.case-paper {
	position: absolute;
	left: calc(100% * 9 / 1068);
	top: calc(100% * 10 / 1028);
	width: calc(100% * 1057 / 1068);
	height: calc(100% * 999 / 1028);
	container-type: size;
	overflow: clip;
	background: var(--cover-bg, transparent);
}
.case-paper-inner {
	position: absolute;
	inset: 0;
	width: 100%;
	max-width: none;
	padding: 8.16cqh 7.93cqw;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	color: var(--cover-fg, rgba(0, 0, 0, .85));
	contain: none;
}
/* mobile: the case is turned -90deg, turn the text back upright */
.is-mobile .case-paper-inner {
	inset: auto;
	left: 0;
	top: 0;
	width: 100cqh;
	height: 100cqw;
	transform-origin: 0 0;
	transform: rotate(90deg) translateY(-100%);
	padding: 8.16cqw 7.93cqh;
}
/* .case-paper-inner prefix: the Cargo base sheets style bare h1/p inside bodycopy with
   higher specificity than a lone class; Figma's "100%" leading = the font's own, which
   is 1.0 for ABC Diatype (title box = font size) and ~1.21 for Inter (meta box 12/10) */
.case-paper-inner .case-title {
	font-family: "Diatype Variable";
	font-style: normal;
	font-weight: 400;
	font-size: 8.35cqw;
	line-height: 1;
	letter-spacing: 0;
	margin: 3.35cqh 0 0;
	color: inherit;
	font-variation-settings: 'slnt' 0, 'MONO' 0;
}
.is-mobile .case-paper-inner .case-title { font-size: 8.35cqh; margin-top: 3.35cqw; }
.case-paper-inner .case-meta {
	display: flex;
	justify-content: space-between;
	margin: 0;
	font-family: "Inter", "Diatype Variable";
	font-weight: 400;
	font-size: 2.09cqw;
	line-height: normal;
	color: inherit;
	letter-spacing: 0;
}
.is-mobile .case-paper-inner .case-meta { font-size: 2.09cqh; }
/* the Cargo base styles bare spans with their own font-size; keep the row at 10/479 */
.case-paper-inner .case-meta span { font: inherit; line-height: inherit; letter-spacing: inherit; }
.case-paper-inner .case-cover-body {
	margin: 0;
	font-family: "Inter", "Diatype Variable";
	font-weight: 400;
	font-size: 2.51cqw;
	line-height: 1.3333;
	letter-spacing: 0;
	text-align: justify;
	white-space: pre-line;
	color: inherit;
}
.is-mobile .case-paper-inner .case-cover-body { font-size: 2.51cqh; }

/* ---------- sheet content ---------- */
.case-sheet-inner {
	color: rgba(0, 0, 0, .85);
	contain: none;
}
/* mobile-only: one item per block, full width on the page color */
.case-section {
	box-sizing: border-box;
	padding: 2.4rem 2.6rem;
}
.is-mobile .case-section .case-page-media {
	width: 100%;
	height: auto;
}

/* ---------- mobile flow ---------- */
.is-mobile .case-flow {
	position: relative;
	padding-top: 11.2vh;
	padding-bottom: 10.5rem;
	z-index: 1;
}
.is-mobile .case-rot {
	position: relative;
	width: var(--case-h);
	height: var(--case-w);
	margin: 0 auto;
	z-index: 2;
}
.is-mobile .case-pos {
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--case-w);
	height: var(--case-h);
	margin-left: calc(var(--case-w) / -2);
	margin-top: calc(var(--case-h) / -2);
}
.is-mobile .case-sheet {
	position: relative;
	z-index: 1;
	width: calc(var(--case-h) * 999 / 1028);
	margin: calc(-1 * (var(--case-w) * 9 / 2236 + var(--tuck))) auto 0;
	padding-top: var(--tuck);
	background: var(--paper);
}
.is-mobile .case-section { padding: 1.6rem 1.4rem; }

/* ---------- arrow hint ---------- */
.case-arrow {
	appearance: none;
	background: none;
	border: 0;
	margin: 0;
	padding: .6rem;
	color: #fff;
	cursor: pointer;
	font-size: 2.2rem;
	line-height: 1;
	z-index: 3;
	filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .25));
}
.case-arrow[hidden] { display: none; }
.is-desktop .case-arrow {
	position: absolute;
	left: calc(var(--case-left) / 2);
	top: calc(var(--case-top) + var(--case-h) / 2);
	transform: translate(-50%, -50%) rotate(90deg);
}
.is-mobile .case-arrow {
	position: fixed;
	left: 50%;
	bottom: calc(6.4rem + env(safe-area-inset-bottom));
	transform: translateX(-50%);
}
.case-arrow-nudge {
	display: inline-block;
	animation: case-nudge 1.7s ease-in-out infinite;
}
.case-arrow text-icon {
	display: block;
	margin: 0;
	height: 1.2em;
	width: 1.2em;
}
@keyframes case-nudge {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(.3em); }
}

/* ---------- pills (same markup as the Cargo project pages) ---------- */
.case-pills {
	position: fixed;
	left: 50%;
	bottom: calc(3rem + env(safe-area-inset-bottom));
	transform: translateX(-50%);
	white-space: nowrap;
	width: auto;
	max-width: none;
	z-index: 5;
	contain: none;
}
/* desktop: centered in the band between the case and the bottom of the page */
.is-desktop .case-pills {
	bottom: auto;
	top: calc((var(--case-top) + var(--case-h) + 100dvh) / 2);
	transform: translate(-50%, -50%);
}

@media (prefers-reduced-motion: reduce) {
	.case-arrow-nudge { animation: none; }
}