/* Viewbeza custom styles (loaded after tailwind.css) */

/* ---------- Fonts ---------- */
@font-face { font-family: "Delight"; src: url("../fonts/Delight-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Delight"; src: url("../fonts/Delight-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Delight"; src: url("../fonts/Delight-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Delight"; src: url("../fonts/Delight-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Delight"; src: url("../fonts/Delight-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root { --ease: cubic-bezier(0.16, 1, 0.3, 1); }

/* ---------- Lenis smooth scroll ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Base ---------- */
body.vb-root {
  margin: 0;
  background: #F9F8F5;
  color: #141413;
  font-family: "Delight", ui-sans-serif, sans-serif;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}
body.vb-root::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
::selection { background: #D95338; color: #141413; }

.font-display { font-family: "Delight", ui-sans-serif, sans-serif; font-weight: 500; letter-spacing: -0.035em; }
.font-display em, em.font-display { font-style: normal; }
.font-mono { font-family: "Geist Mono", ui-monospace, monospace; }

i[data-icon] { display: inline-block; }

/* ---------- Decorative ---------- */
.vb-grid {
  background-image: linear-gradient(#E2DFD7 1px, transparent 1px), linear-gradient(90deg, #E2DFD7 1px, transparent 1px);
  background-size: 88px 88px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 30% 40%, black 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 30% 40%, black 10%, transparent 75%);
  opacity: 0.55;
}

.vb-link { position: relative; }
.vb-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease);
}
.vb-link:hover::after { transform: scaleX(1); transform-origin: left; }

@keyframes vb-marquee { to { transform: translateX(-50%); } }
.vb-marquee { animation: vb-marquee 60s linear infinite; }
.vb-marquee:hover { animation-play-state: paused; }

@keyframes vb-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.vb-blink { animation: vb-blink 1.4s ease-in-out infinite; }

@keyframes vb-scan { 0% { top: -20%; } 100% { top: 110%; } }
.vb-scan { animation: vb-scan 4.5s cubic-bezier(0.6, 0, 0.4, 1) infinite; }

@keyframes vb-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.8); } }
.vb-pulse { transform-origin: 16px 16px; animation: vb-pulse 2.4s ease-in-out infinite; }

/* ---------- Mobile menu ---------- */
.mobile-menu {
  height: 0;
  overflow: hidden;
  border-top-width: 0;
  visibility: hidden;
  transition: height 0.5s var(--ease), visibility 0s linear 0.5s;
}
.mobile-menu.is-open {
  border-top-width: 1px;
  visibility: visible;
  transition: height 0.5s var(--ease), visibility 0s;
}

/* ---------- Reveal animations (only when JS is running) ---------- */
.mask-line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.mask-line > span { display: block; }

html.js [data-reveal="lines"] .mask-line > span {
  transform: translate3d(0, 105%, 0);
  transition: transform 1.1s var(--ease);
  transition-delay: calc(var(--d, 0s) + var(--i, 0) * 0.11s);
}
html.js [data-reveal="lines"].is-in .mask-line > span { transform: translate3d(0, 0, 0); }

html.js [data-reveal="fade"] {
  opacity: 0;
  transform: translate3d(0, var(--y, 28px), 0);
  transition: opacity var(--dur, 0.9s) var(--ease) var(--d, 0s), transform var(--dur, 0.9s) var(--ease) var(--d, 0s);
}
html.js [data-reveal="fade"].is-in { opacity: 1; transform: translate3d(0, 0, 0); }

html.js [data-reveal="nav"] { transform: translate3d(0, -80px, 0); transition: transform 1s var(--ease) 0.2s; }
html.js [data-reveal="nav"].is-in { transform: translate3d(0, 0, 0); }

html.js [data-reveal="clip"] { clip-path: inset(100% 0% 0% 0%); transition: clip-path 1.4s var(--ease) 0.5s; }
html.js [data-reveal="clip"].is-in { clip-path: inset(0% 0% 0% 0%); }

@media (prefers-reduced-motion: reduce) {
  .vb-marquee, .vb-blink, .vb-scan, .vb-pulse { animation: none; }
}