/* ==========================================================================
   NJ Portfolio — custom styles (ported from the original src/index.css).
   Tailwind utilities are supplied at runtime by assets/js/tailwind.js.
   ========================================================================== */

html { scroll-behavior: smooth; }

/* Prevent any element from ever creating horizontal scroll/extra space on
   mobile (the reported "menu width grows sideways" bug). */
html, body { max-width: 100%; overflow-x: hidden; }

/* #site-nav's fixed/absolute state is toggled by JS (assets/js/app.js).
   Defined here as real CSS — not relying on the Tailwind CDN's runtime JIT
   compiler to notice classes added dynamically after the initial page
   load, which is what caused the nav to sometimes get stuck half-styled
   when scrolling. */
#site-nav.fixed { position: fixed; }
#site-nav.absolute { position: absolute; }
#site-nav.fixed, #site-nav.absolute { top: 0; left: 0; right: 0; width: 100%; max-width: 100vw; }

/* Desktop (lg+) navbar: top state = floating glass pills, scrolled state = old dark bar (ported from 1.zip). */
#site-nav.scrolled .desktop-top-pill { display: none !important; }
#site-nav:not(.scrolled) .desktop-scrolled-bar { display: none !important; }

.my-link:hover {
  color: #beff00;
}

:root {
  --background: 220 20% 95%;
  --foreground: 62 100% 50%;
  --card: 0 0% 100%;
  --card-foreground: 220 30% 15%;
  --popover: 0 0% 100%;
  --popover-foreground: 220 30% 15%;
  --primary: 38 85% 52%;
  --primary-foreground: 0 0% 100%;
  --secondary: 220 20% 95%;
  --secondary-foreground: 220 30% 15%;
  --muted: 220 15% 92%;
  --muted-foreground: 220 10% 50%;
  --accent: 38 85% 52%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 220 15% 88%;
  --input: 220 15% 88%;
  --ring: 38 85% 52%;
  --radius: 0.75rem;
  --hero-bg: 222 58% 12%;
  --hero-card: 221 60% 14%;
  --gold: 38 85% 52%;
  --footer-bg: 220 60% 6%;
  --footer-fg: 0 0% 100%;
  --contact-bg: 276 100% 99%;
  --blue-accent: 209 94% 49%;
  --orange: 18 76% 56%;
  --orange-light: 16 100% 84%;
  --navy: 225 60% 31%;
  --download-button-bg: 223 57% 7%;
  --download-button-sheen: 38 100% 67%;
  --download-button-gold: 47 100% 59%;
  --download-button-gold-deep: 32 100% 56%;
}

body {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Geist', sans-serif;
}

.font-script { font-family: 'The Nautigal', cursive; }

/* ---- hero ambient background — WebGL canvas (dark-veil.js) ---- */
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 0;
}
/* Keep hero text readable over the animated veil. */
#home h1, #home p {
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.5);
}

/* ---- fade-in on scroll ---- */
.animate-fade-up { animation: fadeUp 0.7s ease-out both; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeIn 0.25s ease-out both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---- download button ---- */
.download-button-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 46px;
  cursor: pointer;
  isolation: isolate;
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
  appearance: none;
}
.download-button-state-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  pointer-events: none;
  z-index: 1;
}
.download-button-hover-svg {
  position: absolute;
  left: -24.6396px;
  top: -23.9985px;
  width: 215px;
  height: 116px;
  pointer-events: none;
  z-index: 2;
  overflow: visible;
}
.download-button-wrapper:focus-visible {
  outline: 2px solid hsl(var(--download-button-gold) / 0.5);
  outline-offset: 4px;
}
/* Default state artwork is a CSS gradient pill so the button works without the
   original PNG. Drop assets/img/download-button-default.png in to override. */
.download-button-wrapper .dl-fallback {
  position: absolute; inset: 0; border-radius: 30px; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background-color: hsl(var(--download-button-bg));
  border: 1px solid hsl(var(--download-button-bg));
  color: hsl(var(--gold));
  font: 400 16px/21px 'Geist', sans-serif;
}
/* State toggling (driven by data-state, set in app.js) */
.download-button-wrapper .dl-default { display: flex; }
.download-button-wrapper .dl-hover,
.download-button-wrapper .dl-active { display: none; }
.download-button-wrapper[data-state="hover"] .dl-default,
.download-button-wrapper[data-state="active"] .dl-default { display: none; }
.download-button-wrapper[data-state="hover"] .dl-hover { display: block; }
.download-button-wrapper[data-state="active"] .dl-active { display: block; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- custom color utilities ---- */
.text-gold { color: hsl(var(--gold)); }
.bg-hero { background: linear-gradient(180deg, #0E1A37 0%, #060B18 100%); }
.bg-hero-card { background-color: hsl(var(--hero-card)); }
.bg-footer { background-color: hsl(var(--footer-bg)); }
.text-footer { color: hsl(var(--footer-fg)); }
.border-gold { border-color: hsl(var(--gold)); }
.bg-gold { background-color: hsl(var(--gold)); }
.bg-contact-gradient { background-color: hsl(var(--contact-bg)); }
.bg-pricing-gradient {
  background: linear-gradient(180deg, #060B18 0%, #060B18 20%, #203A7E 50%, #E46C39 100%);
}

/* ---- shared outer frame padding ----
   Mobile: 10px, Tablet (>=640px): 30px. */
.frame-padding-x { padding-left: 10px; padding-right: 10px; }
@media (min-width: 640px) { .frame-padding-x { padding-left: 30px; padding-right: 30px; } }
.frame-padding { padding: 10px; }
@media (min-width: 640px) { .frame-padding { padding: 30px; } }

@media (prefers-reduced-motion: reduce) {
  .download-button, .download-button-sparkle { transition: none; animation: none; }
}

/* Hide site navbar while a project modal is open */
body.modal-open nav { display: none !important; }

/* Hero responsive height */
.hero-mobile-safe {
  min-height: 100svh;
  height: auto;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}
@media (min-width: 640px) {
  .hero-mobile-safe { height: 100vh; min-height: 600px; padding-bottom: 0; }
}

/* Hide QR code on touch devices */
@media (hover: none) and (pointer: coarse) {
  .qr-code-img { display: none !important; }
}

.tabs-scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tabs-scroll::-webkit-scrollbar {
  display: none;
}