/* ==========================================================================
   VP Cinematic — runtime styles & design tokens
   Builder-agnostic: works under Bricks or GeneratePress/Gutenberg.
   Tokens are the single source of truth; mirror them into Bricks variables /
   theme.json so the page builder UI uses the same palette.
   ========================================================================== */

:root {
	--vp-bg: #0A0A0A;
	--vp-bg-2: #111111;
	--vp-text: #FFFFFF;
	--vp-muted: #9A9A9A;
	--vp-accent: #C9A86A;
	--vp-line: #222222;

	--vp-font-head: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--vp-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--vp-maxw: 1320px;
	--vp-gutter: clamp(20px, 5vw, 64px);
	--vp-section-y: clamp(80px, 12vh, 160px);

	--vp-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--vp-dur: 0.4s;
}

/* Self-hosted fonts (optional). Drop woff2 files into ../fonts/ to activate.
   If absent, the system stack above is used — no broken layout. */
@font-face {
	font-family: "Inter";
	src: url("../fonts/Inter-Variable.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
}
@font-face {
	font-family: "Manrope";
	src: url("../fonts/Manrope-Variable.woff2") format("woff2");
	font-weight: 200 800;
	font-display: swap;
}

/* --- Utilities --------------------------------------------------------- */
.vp-container { max-width: var(--vp-maxw); margin-inline: auto; padding-inline: var(--vp-gutter); }
.vp-section   { padding-top: var(--vp-section-y); padding-bottom: clamp(36px, 6vh, 72px); }
.eyebrow {
	font-family: var(--vp-font-body);
	font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--vp-accent);
}

/* --- Buttons ----------------------------------------------------------- */
.c-btn {
	display: inline-flex; align-items: center; gap: 0.5em;
	min-width: 9rem; padding: 0.9em 1.6em;       /* min-width, not fixed: i18n-safe */
	font-family: var(--vp-font-body); font-weight: 600;
	letter-spacing: 0.04em; text-decoration: none;
	color: var(--vp-text); border: 1px solid var(--vp-accent);
	background: transparent; border-radius: 2px;
	transition: background var(--vp-dur) var(--vp-ease), color var(--vp-dur) var(--vp-ease);
}
.c-btn:hover { background: var(--vp-accent); color: var(--vp-bg); }
.c-btn--solid { background: var(--vp-accent); color: var(--vp-bg); }
.c-btn--solid:hover { background: #d9bb82; }

/* --- Sticky nav -------------------------------------------------------- */
.c-nav {
	position: fixed; top: 0; left: 0; right: 0; z-index: 100;
	background: transparent;                /* transparent over the hero by default */
	transition: background 0.3s var(--vp-ease), backdrop-filter 0.3s var(--vp-ease);
	/* iPhone notch / Dynamic Island (viewport-fit=cover): keep the logo + menu
	   out from under the island/status bar, and clear of the landscape notch. */
	padding-top: env(safe-area-inset-top);
	padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
}
/* Solid bar behind the status bar / Dynamic Island so it never floats over the
   hero video — opaque, same dark as the menu bar. Pinned to the viewport top and
   given an explicit z-index so it always paints above the hero. Zero height
   (invisible) on devices without a top inset (desktop / non-notch). */
.c-nav::before {
	content: "";
	position: fixed;
	top: 0; left: 0; right: 0;
	height: env(safe-area-inset-top);
	background: #0A0A0A;
	z-index: 2;
	pointer-events: none;
}
/* Don't slide under the WordPress admin bar when logged in */
.admin-bar .c-nav { top: 32px; }
/* On <=782px the admin bar is position:absolute (it scrolls away), so the fixed
   nav must sit at top:0 — otherwise a 46px gap stays once the bar scrolls off. */
@media screen and (max-width: 782px) { .admin-bar .c-nav { top: 0; } }
.c-nav.is-scrolled {
	background: rgba(10, 10, 10, 0.7);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--vp-line);
}

/* --- Hero -------------------------------------------------------------- */
.c-hero { position: relative; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; overflow: hidden; }
.c-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c-hero::after { content: ""; position: absolute; inset: 0; background: rgba(10,10,10,0.45); }
.c-hero__inner { position: relative; z-index: 1; text-align: center; padding-inline: var(--vp-gutter); }
.c-hero__title {
	font-family: var(--vp-font-head); font-weight: 700;
	font-size: clamp(40px, 8vw, 120px); line-height: 1.02; letter-spacing: -0.02em;
	margin: 0;
}
.c-hero__subtitle { color: var(--vp-muted); margin-top: 1rem; letter-spacing: 0.06em; }
.c-hero__desc { color: var(--vp-muted); max-width: 60ch; margin: 1rem auto 0; line-height: 1.6; }
.c-hero__scroll { position: absolute; bottom: calc(2rem + env(safe-area-inset-bottom)); left: 50%; translate: -50% 0; animation: vp-bounce 2s infinite; }

/* Compact hero for inner pages — sits under the transparent fixed nav */
.c-hero--compact { min-height: 100vh; min-height: 100dvh; padding-top: clamp(72px, 10vh, 40px); }
.c-hero--compact .c-hero__title { font-size: clamp(32px, 6vw, 88px); }
.c-hero--compact::after { background: linear-gradient(180deg, rgba(10,10,10,.7), rgba(10,10,10,.35)); }
@keyframes vp-bounce { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(8px);} }

@media (max-width: 768px) {
	/* Hero video plays on mobile too (autoplay muted playsinline). The poster
	   background stays as a fallback for browsers/data-savers that block it. */
	.c-hero { background-size: cover; background-position: center; }
}

/* --- Cards (categories / featured / portfolio / showcase) -------------- */
.c-card { position: relative; display: block; overflow: hidden; border-radius: 3px; background: var(--vp-bg-2); text-decoration: none; color: var(--vp-text); }
.c-card__media { position: relative; display: block; aspect-ratio: 16/9; }
.c-card__overlay { display: flex; }
.c-card__img,
.c-card__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c-card__video { opacity: 0; transition: opacity var(--vp-dur) var(--vp-ease); }
.c-card__img { transition: transform var(--vp-dur) var(--vp-ease); }
.c-card:hover .c-card__img { transform: scale(1.06); }
.c-card:hover .c-card__video { opacity: 1; }
.c-card__overlay {
	position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
	gap: 0.25rem; padding: 1.25rem;
	background: linear-gradient(to top, rgba(10,10,10,0.85), transparent 60%);
}
.c-card__title { font-family: var(--vp-font-head); font-weight: 600; font-size: 1.1rem; }
.c-card__meta { color: var(--vp-muted); font-size: 0.85rem; }
.c-card__cta { opacity: 0; transform: translateY(8px); transition: all var(--vp-dur) var(--vp-ease); color: var(--vp-accent); font-size: 0.85rem; }
.c-card:hover .c-card__cta { opacity: 1; transform: translateY(0); }

/* --- Showcase (horizontal) -------------------------------------------- */
.c-showcase { overflow: hidden; }
.c-showcase__track {
	display: flex; gap: clamp(16px, 2vw, 32px);
	/* Native fallback when GSAP is off: touch/scroll-snap film-strip. */
	overflow-x: auto; scroll-snap-type: x mandatory;
	padding-inline: var(--vp-gutter); scrollbar-width: none;
}
.c-showcase__track::-webkit-scrollbar { display: none; }
.c-showcase__item { flex: 0 0 min(80vw, 520px); scroll-snap-align: center; }
/* When GSAP pin is active, JS sets [data-pinned] and we disable native scroll. */
.c-showcase[data-pinned="1"] .c-showcase__track { overflow: visible; }

/* --- Grid -------------------------------------------------------------- */
.c-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.5vw, 20px); }
@media (max-width: 1024px) { .c-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .c-grid { grid-template-columns: 1fr; } }

/* "View More" button under the filterable grid (homepage). */
.c-filter-more { display: flex; justify-content: center; margin-top: clamp(24px, 3vw, 44px); }
.c-filter__more { display: inline-flex; align-items: center; gap: 0.6em; }
.c-filter__more:active { transform: scale(0.96); }
.c-filter__more-i { display: inline-block; transition: transform 0.4s var(--vp-ease); }
.c-filter__more:hover .c-filter__more-i { transform: translateY(3px); animation: vp-more-bounce 0.9s var(--vp-ease) infinite; }

/* Staggered fade-up for cards revealed by "View More" / a filter change.
   The per-card delay is set inline by JS; capped so the wave stays tight. */
.c-grid--filter .c-card.is-enter { animation: vp-card-in 0.6s var(--vp-ease) both; }
@keyframes vp-card-in { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes vp-more-bounce { 0%, 100% { transform: translateY(2px); } 50% { transform: translateY(6px); } }

/* --- Reveal on scroll -------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity 0.8s var(--vp-ease), transform 0.8s var(--vp-ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* --- Video facade (click-to-load Vimeo/YouTube/map) -------------------- */
.c-facade { position: relative; aspect-ratio: 16/9; cursor: pointer; overflow: hidden; background: #000; }
.c-facade__poster { width: 100%; height: 100%; object-fit: cover; }
.c-facade__play {
	position: absolute; inset: 0; margin: auto; width: 72px; height: 72px;
	display: grid; place-items: center; border-radius: 50%;
	background: rgba(201,168,106,0.9); color: var(--vp-bg);
}
.c-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Final CTA band */
.vp-cta { position: relative; border-top: 1px solid var(--vp-line); overflow: hidden; }
.vp-cta::before {
	content: ""; position: absolute; left: 50%; top: 0; width: 80vw; height: 100%;
	transform: translateX(-50%);
	background: radial-gradient(60% 80% at 50% 0%, rgba(201,168,106,0.12), transparent 70%);
	pointer-events: none;
}

/* --- Contact form ------------------------------------------------------ */
.c-form { max-width: 720px; display: grid; gap: 1.1rem; }
.c-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 640px) { .c-form__row { grid-template-columns: 1fr; } }
.c-field { display: grid; gap: 0.45rem; }
.c-field > span { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vp-muted); }
.c-field input, .c-field textarea, .c-field select {
	width: 100%; box-sizing: border-box; font: inherit; color: var(--vp-text);
	background: var(--vp-bg-2); border: 1px solid var(--vp-line); border-radius: 2px;
	padding: 0.85em 1em; transition: border-color 0.3s var(--vp-ease), box-shadow 0.3s var(--vp-ease);
}
.c-field input::placeholder, .c-field textarea::placeholder { color: #6a6a6a; }
.c-field input:focus, .c-field textarea:focus, .c-field select:focus {
	outline: none; border-color: var(--vp-accent); box-shadow: 0 0 0 3px rgba(201,168,106,0.15);
}
.c-field textarea { resize: vertical; min-height: 130px; }
.c-field select {
	appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2.4em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23C9A86A' stroke-width='1.6'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 1em center;
}
.c-field--check { display: flex; flex-direction: row; align-items: flex-start; gap: 0.65rem; }
.c-field--check input { width: auto; margin-top: 0.2em; accent-color: var(--vp-accent); }
.c-field--check span { text-transform: none; letter-spacing: 0; font-size: 0.85rem; color: var(--vp-muted); line-height: 1.5; }
.c-form > .c-btn { justify-self: start; margin-top: 0.4rem; }
.c-form__error { color: #f0c987; background: rgba(201,168,106,0.08); border-left: 3px solid var(--vp-accent); padding: 0.8rem 1rem; border-radius: 2px; }
.c-form__success {
	display: flex; align-items: center; gap: 1rem; max-width: 720px;
	padding: 1.4rem 1.6rem; margin-bottom: 1.5rem; border: 1px solid var(--vp-accent);
	border-radius: 3px; background: rgba(201,168,106,0.08); animation: vp-pop 0.5s var(--vp-ease);
}
.c-form__success p { margin: 0; }
.c-form__check {
	flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
	background: var(--vp-accent); color: var(--vp-bg); display: grid; place-items: center; font-size: 1.2rem; font-weight: 700;
}
@keyframes vp-pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }

/* ======================================================================
   ANIMATION SYSTEM
   ====================================================================== */

/* Preloader curtain */
.c-preloader {
	position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
	background: var(--vp-bg); transition: opacity 0.6s var(--vp-ease), visibility 0.6s;
}
.c-preloader__mark { font-family: var(--vp-font-head); font-weight: 700; letter-spacing: 0.3em; color: var(--vp-accent); animation: vp-pulse 1.4s var(--vp-ease) infinite; }
.c-preloader.is-done { opacity: 0; visibility: hidden; }
@keyframes vp-pulse { 0%,100%{ opacity: 0.4; } 50%{ opacity: 1; } }

/* Scroll progress bar */
.c-progress {
	position: fixed; top: 0; left: 0; z-index: 200; height: 2px; width: 100%;
	background: var(--vp-accent); transform: scaleX(0); transform-origin: 0 50%;
	will-change: transform;
}

/* Hero load-in (staggered fade-up) */
.c-hero [data-anim] { opacity: 0; transform: translateY(30px); transition: opacity 1s var(--vp-ease), transform 1s var(--vp-ease); }
.c-hero [data-anim].is-in { opacity: 1; transform: none; }
.c-hero__video { transition: transform 0.1s linear; will-change: transform; }

/* Reveal variants */
[data-reveal] { opacity: 0; transition: opacity 0.8s var(--vp-ease), transform 0.8s var(--vp-ease), clip-path 0.9s var(--vp-ease); transform: translateY(40px); }
[data-reveal="left"]  { transform: translateX(-48px); }
[data-reveal="right"] { transform: translateX(48px); }
[data-reveal="zoom"]  { transform: scale(0.92); }
[data-reveal="clip"]  { transform: none; clip-path: inset(0 100% 0 0); }
[data-reveal].is-visible { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }

/* Stagger children of a revealed grid */
[data-reveal] .c-card { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--vp-ease), transform 0.7s var(--vp-ease); }
[data-reveal].is-visible .c-card { opacity: 1; transform: none; }
[data-reveal].is-visible .c-card:nth-child(2) { transition-delay: 0.07s; }
[data-reveal].is-visible .c-card:nth-child(3) { transition-delay: 0.14s; }
[data-reveal].is-visible .c-card:nth-child(4) { transition-delay: 0.21s; }
[data-reveal].is-visible .c-card:nth-child(5) { transition-delay: 0.28s; }
[data-reveal].is-visible .c-card:nth-child(n+6) { transition-delay: 0.32s; }

/* Split-text per-word reveal */
[data-split] .vp-word { display: inline-block; opacity: 0; transform: translateY(0.7em) rotate(2deg); transition: opacity 0.6s var(--vp-ease), transform 0.6s var(--vp-ease); }
[data-split].is-visible .vp-word { opacity: 1; transform: none; }

/* Tilt / magnetic helpers */
[data-tilt] { transition: transform 0.2s var(--vp-ease); transform-style: preserve-3d; will-change: transform; }
[data-magnetic] { transition: transform 0.3s var(--vp-ease); }

/* Marquee (brand strip / ticker) */
.c-marquee { overflow: hidden; white-space: nowrap; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.c-marquee__track { display: inline-flex; gap: 3rem; padding-right: 3rem; animation: vp-marquee 28s linear infinite; }
.c-marquee:hover .c-marquee__track { animation-play-state: paused; }
.c-marquee__item { color: var(--vp-muted); font-family: var(--vp-font-head); font-size: clamp(1.2rem, 3vw, 2.2rem); letter-spacing: 0.04em; }
@keyframes vp-marquee { to { transform: translateX(-50%); } }

/* Full-width thumbnail marquee (project covers) with hover description + CTA */
.c-marquee--media { padding-block: clamp(8px, 1.5vh, 20px); }
.c-marquee--media .c-marquee__track--media { gap: clamp(12px, 1.5vw, 20px); padding-right: clamp(12px, 1.5vw, 20px); animation-duration: var(--mq-dur, 24s); }
.c-marquee__track--reverse { animation-direction: reverse; }
/* Uniform blocks: every item identical size (overridable via --mq-item) */
.c-mq { position: relative; flex: 0 0 var(--mq-item, clamp(300px, 26vw, 380px)); aspect-ratio: 16 / 9; overflow: hidden; border-radius: 3px; display: block; text-decoration: none; color: var(--vp-text); }
.c-mq__img, .c-mq__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c-mq__video { opacity: 0; transition: opacity 0.4s var(--vp-ease); }
.c-mq__img { transition: transform 0.6s var(--vp-ease); }
.c-mq:hover .c-mq__img { transform: scale(1.06); }
.c-mq:hover .c-mq__video { opacity: 1; }
.c-mq__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.35rem; padding: 1.25rem; background: linear-gradient(to top, rgba(10,10,10,0.92), rgba(10,10,10,0.15) 62%, transparent); opacity: 0; transition: opacity 0.4s var(--vp-ease); }
.c-mq:hover .c-mq__overlay { opacity: 1; }
.c-mq__title { font-family: var(--vp-font-head); font-weight: 600; font-size: 1.15rem; }
.c-mq__desc { color: var(--vp-muted); font-size: 0.85rem; line-height: 1.45; transform: translateY(8px); transition: transform 0.4s var(--vp-ease); }
.c-mq:hover .c-mq__desc { transform: none; }
.c-mq__cta { align-self: flex-start; margin-top: 0.4rem; min-width: auto; padding: 0.5em 1em; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0; transform: translateY(10px); transition: opacity 0.4s var(--vp-ease) 0.05s, transform 0.4s var(--vp-ease) 0.05s, background 0.4s var(--vp-ease); }
.c-mq:hover .c-mq__cta { opacity: 1; transform: none; }
@media (hover: none) { .c-mq__overlay { opacity: 1; } .c-mq__cta { opacity: 1; transform: none; } }

/* Animated underline links */
.c-link { position: relative; text-decoration: none; }
.c-link::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: var(--vp-accent); transform: scaleX(0); transform-origin: 100% 50%; transition: transform 0.4s var(--vp-ease); }
.c-link:hover::after { transform: scaleX(1); transform-origin: 0 50%; }

/* Button shine sweep */
.c-btn { position: relative; overflow: hidden; }
.c-btn::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.18), transparent 70%); transform: translateX(-120%); transition: transform 0.6s var(--vp-ease); }
.c-btn:hover::before { transform: translateX(120%); }

/* Custom cursor */
.c-cursor { position: fixed; top: 0; left: 0; z-index: 9998; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--vp-accent); pointer-events: none; mix-blend-mode: difference; transition: width 0.25s var(--vp-ease), height 0.25s var(--vp-ease), background 0.25s; }
.c-cursor.is-play { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(201,168,106,0.25); }
.c-cursor.is-play::after { content: "PLAY"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 0.6rem; letter-spacing: 0.15em; color: var(--vp-text); }
.vp-cursor, .vp-cursor * { cursor: none; }

/* Cinematic grain + vignette overlay (decorative, very subtle) */
.c-grain::before { content: ""; position: fixed; inset: 0; z-index: 150; pointer-events: none; opacity: 0.04; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Infinite scroll sentinel + spinner */
.vp-infinite { display: flex; justify-content: center; align-items: center; padding: 2.5rem 0; min-height: 60px; }
.vp-infinite__spinner { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--vp-line); border-top-color: var(--vp-accent); opacity: 0; }
.vp-infinite.is-loading .vp-infinite__spinner { opacity: 1; animation: vp-spin 0.8s linear infinite; }
@keyframes vp-spin { to { transform: rotate(360deg); } }

/* --- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, [data-reveal], [data-split] .vp-word, .c-hero [data-anim] { transition: none !important; animation: none !important; }
	[data-reveal], [data-reveal] .c-card, [data-split] .vp-word, .c-hero [data-anim] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
	.c-hero__scroll, .c-marquee__track, .c-preloader__mark { animation: none !important; }
	.c-preloader { display: none; }
	.c-cursor { display: none; }
}