/* ==========================================================================
   Black Eagle — portfolio archive + case study
   ========================================================================== */

/* Filtering animation (JS toggles .is-leaving before hiding) */
.project-card { transition: opacity 0.4s var(--ease), transform 0.5s var(--ease); }
.project-card.is-leaving { opacity: 0; transform: scale(0.96) translateY(10px); }
.project-card.is-entering { animation: card-in 0.6s var(--ease) both; }
@keyframes card-in { from { opacity: 0; transform: translateY(24px); } }

/* ---------- Case study ---------- */
.case-hero { position: relative; padding-block: calc(var(--header-h) + clamp(40px, 7vw, 100px)) clamp(32px, 4vw, 56px); overflow: hidden; }
.case-hero > .container { position: relative; }
.case-hero__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px; }
.case-hero__title { font-size: var(--fs-h1); }
.case-hero__summary { margin-block-start: 18px; color: var(--muted); font-size: var(--fs-lead); max-width: 60ch; }
.case-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-block-start: clamp(36px, 5vw, 64px); border-block: 1px solid var(--line); }
.case-facts > div { padding: 22px 20px; }
.case-facts > div + div { border-inline-start: 1px solid var(--line); }
.case-facts dt { color: var(--faint); font-size: var(--fs-xs); margin-block-end: 4px; }
.case-facts dd { font-family: var(--font-display); font-weight: 600; }
.case-facts__wide { grid-column: 1 / -1; border-inline-start: 0 !important; border-block-start: 1px solid var(--line); }
@media (max-width: 860px) {
	.case-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.case-facts > div:nth-child(3) { border-inline-start: 0; }
	.case-facts > div:nth-child(n + 3) { border-block-start: 1px solid var(--line); }
}

.case-showcase { padding-block: clamp(20px, 3vw, 40px) clamp(60px, 8vw, 120px); }
.case-showcase__stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(170px, 20vw, 270px); align-items: end; gap: clamp(20px, 3vw, 48px); }
.case-showcase__desktop .frame { --scroll-dur: 16s; }
.case-showcase__desktop .frame__screen { aspect-ratio: 16 / 10; }
.case-showcase__hint { margin-block-start: 12px; color: var(--faint); font-size: var(--fs-xs); text-align: center; }
@media (hover: none) { .case-showcase__hint { display: none; } }
.case-showcase__mobile { margin-block-end: -40px; }
.case-showcase__mobile .frame { --scroll-dur: 24s; }
@media (max-width: 760px) {
	.case-showcase__stage { grid-template-columns: 1fr; }
	.case-showcase__mobile { width: 58%; margin: -22% auto 0; margin-inline-end: 0; }
}

.case-story__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 60px); }
.case-story__block { padding: clamp(26px, 3vw, 44px); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.case-story__block:last-child { background: linear-gradient(160deg, rgba(183, 214, 10, 0.08), var(--surface) 60%); border-color: rgba(183, 214, 10, 0.25); }
.case-story__text { font-size: var(--fs-lead); line-height: 1.9; }
@media (max-width: 760px) { .case-story__grid { grid-template-columns: 1fr; } }

.case-gallery__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.case-gallery__grid img { border-radius: var(--radius-sm); box-shadow: 0 0 0 1px var(--line); }
@media (max-width: 640px) { .case-gallery__grid { grid-template-columns: 1fr; } }

.next-project { border-block: 1px solid var(--line); }
.next-project__link { position: relative; display: grid; gap: 6px; padding-block: clamp(48px, 7vw, 100px); }
.next-project__label { color: var(--lime); font-family: var(--font-display); font-size: var(--fs-sm); }
.next-project__title { display: inline-flex; align-items: center; gap: 18px; font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 1.2rem + 3.6vw, 5rem); line-height: 1.15; transition: color 0.3s; }
.next-project__title .icon { width: 0.6em; height: 0.6em; transition: transform 0.4s var(--ease); }
.next-project__link:hover .next-project__title { color: var(--lime); }
.next-project__link:hover .next-project__title .icon { transform: translateX(calc(10px * var(--dir))); }
[dir="rtl"] .next-project__link:hover .next-project__title .icon { transform: scaleX(-1) translateX(10px); }
.next-project__thumb { position: absolute; inset-block-start: 50%; inset-inline-end: var(--gutter); width: clamp(200px, 26vw, 380px); border-radius: 12px; overflow: hidden; box-shadow: 0 30px 60px -20px #000; opacity: 0; transform: translateY(-40%) rotate(calc(-4deg * var(--dir))); transition: opacity 0.4s, transform 0.6s var(--ease); pointer-events: none; }
.next-project__link:hover .next-project__thumb { opacity: 1; transform: translateY(-50%) rotate(calc(-2deg * var(--dir))); }
@media (hover: none), (max-width: 760px) { .next-project__thumb { display: none; } }