/* ==========================================================================
   Kuzah Design Studios – theme layer
   Loaded AFTER tailwind.css (the compiled utility CSS from the original site).
   Replaces what Next.js (fonts) and Framer Motion (animation) did.
   ========================================================================== */

/* ---------- Fonts (self-hosted) ---------- */
@font-face { font-family: "cinzel";  src: url("../fonts/cinzel-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "cinzel";  src: url("../fonts/cinzel-500.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "cinzel";  src: url("../fonts/cinzel-600.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "cinzel";  src: url("../fonts/cinzel-700.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "josefin"; src: url("../fonts/josefin-sans.woff2") format("woff2"); font-weight: 100 700; font-display: swap; }

/* Unlayered, so it wins over the @layer theme variables in tailwind.css */
html {
	--font-cinzel: "cinzel", "Cinzel", Georgia, serif;
	--font-josefin: "josefin", "Josefin Sans", system-ui, sans-serif;
}

[id] { scroll-margin-top: 6.5rem; }

.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	background: #C9A257; color: #0C0A08; padding: .75rem 1.25rem; border-radius: 0 0 .75rem 0;
	font-family: var(--font-josefin); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
}
.skip-link:focus { left: 0; }

/* Logged-in admin bar should not sit on top of the floating header */
.admin-bar .kz-header { top: calc(1rem + 32px); }
.admin-bar .kz-mobile-menu { top: calc(6rem + 32px); }
@media (max-width: 782px) {
	.admin-bar .kz-header { top: calc(1rem + 46px); }
	.admin-bar .kz-mobile-menu { top: calc(6rem + 46px); }
}

/* ---------- Header entrance ---------- */
@keyframes kz-header-in { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: none; } }
.kz-header { animation: kz-header-in .7s cubic-bezier(.22,.61,.36,1) both; }

/* ---------- Scroll reveal (replaces framer-motion variants) ---------- */
.js .reveal {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity .8s cubic-bezier(.22,.61,.36,1) var(--d, 0s),
	            transform .8s cubic-bezier(.22,.61,.36,1) var(--d, 0s);
	will-change: opacity, transform;
}
.js .reveal.reveal-sm    { transform: translateY(16px); transition-duration: .6s; }
.js .reveal.reveal-fade  { transform: none; transition-duration: .9s; }
.js .reveal.reveal-scale { transform: scale(.88); transition-duration: .9s; }
.js .reveal.reveal-left  { transform: translateX(-20px); transition-duration: .6s; }
.js .reveal.reveal-img   {
	opacity: 1; transform: none;
	clip-path: inset(100% 0 0 0);
	transition: clip-path 1s cubic-bezier(.76,0,.24,1) var(--d, 0s);
}
.js .reveal.reveal-zoom  { opacity: 1; transform: scale(1.1); transition: transform 1.2s cubic-bezier(.22,.61,.36,1); }
.js .reveal.is-visible   { opacity: 1; transform: none; will-change: auto; }
.js .reveal.reveal-img.is-visible { clip-path: inset(0 0 0 0); }

/* Hover lifts use the independent `translate` property so they combine with reveal's `transform` */
.kz-lift   { transition: translate .3s ease, border-color .3s ease; }
.kz-lift:hover { translate: 0 -8px; }
.kz-lift-sm:hover { translate: 0 -6px; }
.kz-slide-x { transition: translate .2s ease; }
.kz-slide-x:hover { translate: 8px 0; }
.kz-btn-pop { transition: scale .2s ease, background-color .3s ease, border-color .3s ease, color .3s ease; }
.kz-btn-pop:hover  { scale: 1.03; }
.kz-btn-pop:active { scale: .98; }

/* ---------- Small looping animations ---------- */
@keyframes kz-pulse-dot { 0%,100% { transform: scale(1); } 50% { transform: scale(1.2); } }
.kz-pulse-dot { animation: kz-pulse-dot 2s ease-in-out infinite; }
@keyframes kz-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
.kz-bob { animation: kz-bob 1.8s ease-in-out infinite; }
@keyframes kz-nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
.kz-nudge { display: inline-flex; animation: kz-nudge 1.5s ease-in-out infinite; }
@keyframes kz-fade-up-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.kz-scroll-hint { animation: kz-fade-up-in .8s ease 1.5s both; }

/* ---------- Hero slider ---------- */
.kz-slide {
	position: absolute; inset: 0;
	opacity: 0; transform: scale(1.1);
	transition: opacity 1.2s cubic-bezier(.22,.61,.36,1), transform 1.6s cubic-bezier(.22,.61,.36,1);
	pointer-events: none;
}
.kz-slide.is-active { opacity: 1; transform: scale(1); pointer-events: auto; }

@keyframes kz-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.kz-progress { animation: kz-progress 6s linear both; transform-origin: left; }

/* ---------- Marquee ---------- */
@keyframes kz-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.kz-marquee-track { display: flex; width: max-content; animation: kz-marquee 40s linear infinite; }
.kz-marquee:hover .kz-marquee-track { animation-play-state: paused; }
.kz-marquee-item { margin-right: 1rem; transition: translate .3s ease, scale .3s ease; }
.kz-marquee-item:hover { translate: 0 -5px; scale: 1.05; }

/* ---------- WhatsApp floating button ---------- */
@keyframes kz-pop-in { 0% { transform: scale(0); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.kz-wa { animation: kz-pop-in .6s cubic-bezier(.34,1.56,.64,1) 1.5s both; transition: translate .2s ease; background-color: #25D366; }
.kz-wa:hover { translate: 0 -2px; filter: brightness(1.08); }

/* ---------- Mobile menu ---------- */
.kz-mobile-menu {
	opacity: 0; visibility: hidden; pointer-events: none;
	transform: translateY(-8px) scale(.98);
	transition: opacity .2s cubic-bezier(.22,.61,.36,1), transform .2s cubic-bezier(.22,.61,.36,1), visibility 0s linear .2s;
}
.kz-mobile-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
.kz-mobile-menu li { opacity: 0; transform: translateX(-12px); transition: opacity .25s ease, transform .25s ease; }
.kz-mobile-menu.is-open li { opacity: 1; transform: none; }
.kz-mobile-menu.is-open li:nth-child(1) { transition-delay: .00s; }
.kz-mobile-menu.is-open li:nth-child(2) { transition-delay: .06s; }
.kz-mobile-menu.is-open li:nth-child(3) { transition-delay: .12s; }
.kz-mobile-menu.is-open li:nth-child(4) { transition-delay: .18s; }
.kz-mobile-menu.is-open li:nth-child(5) { transition-delay: .24s; }
.kz-mobile-menu.is-open li:nth-child(6) { transition-delay: .30s; }

/* ---------- Portfolio ---------- */
@keyframes kz-pop { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.kz-project { animation: kz-pop .4s ease both; transition: translate .3s ease, border-color .3s ease; }
.kz-project:hover { translate: 0 -8px; }
.kz-project:focus-visible { outline-offset: 4px; }
.kz-project .kz-project-img { transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.kz-project:hover .kz-project-img { transform: scale(1.1); }

/* ---------- Lightbox ---------- */
.kz-lightbox {
	position: fixed; inset: 0; z-index: 70;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	background: rgba(0,0,0,.92); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
	padding: 1.5rem 1rem; opacity: 0; transition: opacity .2s ease;
}
.kz-lightbox[hidden] { display: none; }
.kz-lightbox.is-open { opacity: 1; }
.kz-lb-stage { position: relative; width: 100%; max-width: 64rem; }
.kz-lb-img { display: block; width: 100%; max-height: calc(100vh - 120px); object-fit: contain; border-radius: .75rem; animation: kz-lb-in .25s ease both; }
@keyframes kz-lb-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.kz-lb-btn {
	display: flex; align-items: center; justify-content: center; border-radius: 9999px;
	background: rgba(0,0,0,.5); color: #fff; transition: background-color .2s ease; cursor: pointer; border: 0;
}
.kz-lb-btn:hover { background: rgba(0,0,0,.8); }
.kz-lb-close { position: absolute; top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; background: rgba(255,255,255,.1); color: rgba(255,255,255,.75); }
.kz-lb-close:hover { background: rgba(255,255,255,.2); color: #fff; }
.kz-lb-prev, .kz-lb-next { position: absolute; top: 50%; width: 2.75rem; height: 2.75rem; transform: translateY(-50%); }
.kz-lb-prev { left: .75rem; }
.kz-lb-next { right: .75rem; }
.kz-lb-caption {
	position: absolute; left: 0; right: 0; bottom: 0; padding: .75rem 1.25rem;
	display: flex; align-items: flex-end; justify-content: space-between;
	background: linear-gradient(to top, rgba(0,0,0,.7), transparent); border-radius: 0 0 .75rem .75rem;
}

/* ---------- Contact form ---------- */
.kz-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.kz-input { appearance: none; -webkit-appearance: none; width: 100%; }
select.kz-input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238B7D6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem;
}
select.kz-input option { background: #181410; color: #F2EDE4; }
select.kz-input:has(option[value=""]:checked) { color: rgba(139,125,107,.7); }
.kz-input.is-invalid { border-color: #f87171; }
.kz-spin { animation: kz-spin 1s linear infinite; }
@keyframes kz-spin { to { transform: rotate(360deg); } }
.kz-alert { border: 1px solid rgba(248,113,113,.4); background: rgba(248,113,113,.08); color: #fca5a5; border-radius: .75rem; padding: .85rem 1.1rem; font-size: .875rem; }

/* ---------- Generic content (blog / default pages) ---------- */
.kz-prose { font-family: var(--font-josefin); color: #8B7D6B; font-size: 1rem; line-height: 1.8; }
.kz-prose > * + * { margin-top: 1.25rem; }
.kz-prose h2, .kz-prose h3, .kz-prose h4 { color: #F2EDE4; margin-top: 2.25rem; }
.kz-prose h2 { font-size: 1.75rem; } .kz-prose h3 { font-size: 1.35rem; } .kz-prose h4 { font-size: 1.1rem; }
.kz-prose a { color: #C9A257; text-decoration: underline; text-underline-offset: 3px; }
.kz-prose a:hover { color: #E8C87A; }
.kz-prose strong { color: #F2EDE4; }
.kz-prose ul { list-style: disc; padding-left: 1.4rem; }
.kz-prose ol { list-style: decimal; padding-left: 1.4rem; }
.kz-prose img { max-width: 100%; height: auto; border-radius: .75rem; }
.kz-prose blockquote { border-left: 2px solid #C9A257; padding-left: 1.25rem; color: #F2EDE4; font-style: italic; }
.kz-prose hr { border-color: #2C2318; }
.alignleft { float: left; margin: 0 1.5rem 1rem 0; } .alignright { float: right; margin: 0 0 1rem 1.5rem; } .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Extra utilities not present in the original compiled CSS ---------- */
.pointer-events-auto { pointer-events: auto; }
.max-w-3xl { max-width: 48rem; }
.py-8  { padding-block: 2rem; }
.py-32 { padding-block: 8rem; }
.hover\:scale-110:hover { scale: 1.1; }
@media (min-width: 768px) { .md\:py-44 { padding-block: 11rem; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.js .reveal, .js .reveal.reveal-img, .js .reveal.reveal-zoom { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
	.kz-marquee-track, .kz-pulse-dot, .kz-bob, .kz-nudge, .kz-progress { animation: none !important; }
	.kz-marquee { overflow-x: auto; }
}