/* VANTA — extra styles. Dark, sharp, editorial. */

:root { color-scheme: dark; }
html { scroll-behavior: smooth; background: oklch(0.165 0.006 265); }
body {
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.font-display { letter-spacing: -0.015em; }

/* uppercase mono label */
.eyebrow { font-family: "Space Mono", monospace; text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; }

/* dark image placeholders (fallbacks while photos load / if they fail) */
.ph {
  position: relative;
  background-color: oklch(0.22 0.006 265);
  background-image: repeating-linear-gradient(45deg, oklch(0.25 0.006 265) 0 1px, transparent 1px 12px);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  color: oklch(0.55 0.01 265); font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: .06em; text-transform: lowercase;
}

/* scrollbars */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: oklch(0.165 0.006 265); }
::-webkit-scrollbar-thumb { background: oklch(0.30 0.008 265); border: 3px solid oklch(0.165 0.006 265); }
::-webkit-scrollbar-thumb:hover { background: oklch(0.40 0.01 265); }

*:focus-visible { outline: 2px solid oklch(0.90 0.20 124); outline-offset: 2px; }

/* marquee track */
.marquee-mask { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }

/* star rating */
.stars { display: inline-block; position: relative; font-family: "Space Mono", monospace; color: oklch(0.34 0.01 265); white-space: nowrap; }
.stars::before { content: "\2605\2605\2605\2605\2605"; }
.stars > span { position: absolute; inset: 0; width: var(--pct, 100%); overflow: hidden; color: oklch(0.85 0.16 85); }
.stars > span::before { content: "\2605\2605\2605\2605\2605"; }

/* link hover */
.link-hover { transition: color .2s; }

/* reveal — content is ALWAYS visible (no opacity gating). data-reveal is inert. */

/* badge bump */
@keyframes badgepop { 0%{transform:scale(1)} 40%{transform:scale(1.4)} 100%{transform:scale(1)} }
.badge-pop { animation: badgepop .35s ease; }

/* range input */
input[type="range"]{ accent-color: oklch(0.90 0.20 124); }

/* toast */
#toast { transition: transform .35s cubic-bezier(.2,.7,.3,1), opacity .35s; }

/* inputs (shared) */
.v-input { width:100%; height:52px; padding:0 16px; background: oklch(0.205 0.006 265); border:1px solid oklch(0.30 0.008 265); color: oklch(0.965 0.004 90); font-size:15px; border-radius:5px; transition:border-color .15s; }
.v-input::placeholder { color: oklch(0.52 0.012 265); }
.v-input:focus { outline:none; border-color: oklch(0.90 0.20 124); }
.v-input.invalid { border-color: oklch(0.78 0.17 32); }
.v-err { color: oklch(0.78 0.17 32); font-size:13px; margin-top:6px; }
textarea.v-input { height:auto; padding:14px 16px; min-height:150px; resize:vertical; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal]{ animation: none !important; }
  .animate-marquee { animation: none !important; }
}