/*
 * Portfolio page (Portfolio.dc.html) — helmet keyframes + style-hover states.
 * Class prefix: vmpf-
 */

@keyframes vmHeroIn { from { opacity: 0; transform: translateY(70px); filter: blur(12px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes vmMarquee { to { transform: translateX(-50%); } }
@keyframes vmStretch { from { font-stretch: 62%; opacity: 0; } to { font-stretch: 100%; opacity: 1; } }

/* Sticky industry chips: the bar scrolls horizontally on narrow screens without a visible scrollbar. */
[data-vm-component="page-portfolio"] [data-ref="chips"]::-webkit-scrollbar { display: none; }

/* style-hover="color:#c1ed00" — "Read the case study →". */
.vmpf-case:hover { color: #c1ed00 !important; }

/* style-hover="background:#1d1e22;translate:0 -4px" — client logo tiles. */
.vmpf-logo:hover { background: #1d1e22 !important; translate: 0 -4px !important; }

/* Not in the design: "Inside <industry>" link on each industry section. */
.vmpf-inside:hover .vmpf-inside-arrow { background: #c1ed00; border-color: #c1ed00 !important; color: #0e0f11; }

/*
 * Category pages (template-portfolio-category.php, host page-portfolio-cat).
 */
[data-vm-component="page-portfolio-cat"] .vmpf-cats::-webkit-scrollbar { display: none; }
.vmpf-crumb:hover { color: #edf0ea !important; }
.vmpf-cat:not(.is-on):hover { background: rgba(255, 255, 255, .07) !important; color: #edf0ea !important; }
.vmpf-ghost:hover { background: #c1ed00 !important; border-color: #c1ed00 !important; color: #0e0f11 !important; }

/* Screenshots are always shown whole: hovers lift and outline, never zoom (no cropping). */
.vmpf-shot { transition: border-color .4s, translate .6s cubic-bezier(.16, 1, .3, 1); }
.vmpf-proj:hover .vmpf-shot { border-color: rgba(193, 237, 0, .35) !important; translate: 0 -6px; }

/* Other industries. */
.vmpf-other:hover { background: #17181b !important; border-color: rgba(193, 237, 0, .35) !important; translate: 0 -4px; }

/* Portfolio page: the industry's other projects under its lead screenshot. */
.vmpf-thumb:hover { color: #edf0ea !important; }
.vmpf-thumb:hover > span:first-child { border-color: rgba(193, 237, 0, .5) !important; translate: 0 -3px; }

@media (min-width: 1100px) {
	/* Odd number of projects: the first one spans the row, screenshot beside its text. */
	.vmpf-feat { grid-column: 1 / -1; display: grid !important; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: center; gap: clamp(36px, 4vw, 72px) !important; }
	.vmpf-feat .vmpf-proj-text h3 { font-size: clamp(38px, 3.6vw, 60px) !important; }
	.vmpf-feat .vmpf-proj-text p { font-size: 18px !important; }
	/* "How we work": the heading stays in view beside the steps. */
	.vmpf-how-head { position: sticky; top: 120px; }
}

@media (prefers-reduced-motion: reduce) {
	.vmpf-shot, .vmpf-other, .vmpf-thumb > span:first-child { transition: none !important; }
}