@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&display=swap");

/* Keep prerendered Framer Motion content visible before client mount. */
#root[data-prerendered] [style] {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* LIGHT MODE — editorial off-white with ink accents */
:root {
  --background: 40 20% 97%;
  --foreground: 220 15% 12%;

  --border: 30 8% 88%;
  --input: 30 8% 88%;
  --ring: 220 15% 20%;

  --card: 0 0% 100%;
  --card-foreground: 220 15% 12%;
  --card-border: 30 8% 88%;

  --popover: 0 0% 100%;
  --popover-foreground: 220 15% 12%;
  --popover-border: 30 8% 88%;

  --primary: 220 18% 14%;
  --primary-foreground: 40 25% 97%;

  --secondary: 35 12% 92%;
  --secondary-foreground: 220 15% 12%;

  --muted: 35 12% 94%;
  --muted-foreground: 220 8% 42%;

  --accent: 35 12% 92%;
  --accent-foreground: 220 15% 12%;

  --destructive: 0 70% 45%;
  --destructive-foreground: 0 0% 98%;

  --app-font-sans: 'Inter', sans-serif;
  --app-font-serif: 'Playfair Display', Georgia, serif;
  --app-font-mono: Menlo, monospace;
  --app-font-display: 'Playfair Display', Georgia, serif;

  --radius: 0rem;
}

/* DARK MODE — refined ink with warm off-white */
.dark {
  --background: 220 18% 8%;
  --foreground: 40 25% 96%;

  --border: 220 10% 18%;
  --input: 220 10% 18%;
  --ring: 40 25% 96%;

  --card: 220 18% 11%;
  --card-foreground: 40 25% 96%;
  --card-border: 220 10% 18%;

  --popover: 220 18% 11%;
  --popover-foreground: 40 25% 96%;
  --popover-border: 220 10% 18%;

  --primary: 40 25% 96%;
  --primary-foreground: 220 18% 10%;

  --secondary: 220 14% 16%;
  --secondary-foreground: 40 25% 96%;

  --muted: 220 14% 16%;
  --muted-foreground: 40 8% 65%;

  --accent: 220 14% 16%;
  --accent-foreground: 40 25% 96%;

  --destructive: 0 70% 55%;
  --destructive-foreground: 0 0% 98%;
}

/* --------- DARK MODE AMBIENT BACKDROP ---------
   Subtle drifting gradient mesh + faint grain that lives behind
   all content in dark mode only. Light mode is untouched.
*/
html.dark {
  background-color: hsl(var(--background));
}

.dark body {
  background-color: transparent;
}

.dark body::before,
.dark body::after {
  content: '';
  position: fixed;
  pointer-events: none;
  z-index: -1;
}

.dark body::before {
  inset: -15%;
  background-image:
    radial-gradient(38% 42% at 22% 28%, hsl(220 70% 32% / 0.45), transparent 70%),
    radial-gradient(42% 46% at 78% 68%, hsl(265 55% 30% / 0.40), transparent 72%),
    radial-gradient(34% 40% at 58% 38%, hsl(195 65% 28% / 0.35), transparent 70%),
    radial-gradient(30% 36% at 35% 82%, hsl(245 50% 26% / 0.32), transparent 70%);
  filter: blur(36px);
  will-change: transform;
  animation: ambient-drift 36s ease-in-out infinite alternate;
}

.dark body::after {
  inset: 0;
  opacity: 0.05;
  mix-blend-mode: overlay;
  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.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  animation: ambient-grain 9s steps(6) infinite;
}

@keyframes ambient-drift {
  0% {
    transform: translate3d(0%, 0%, 0) scale(1);
  }
  33% {
    transform: translate3d(2.5%, -1.5%, 0) scale(1.06);
  }
  66% {
    transform: translate3d(-2%, 2%, 0) scale(1.03);
  }
  100% {
    transform: translate3d(1.5%, 1%, 0) scale(1.05);
  }
}

@keyframes ambient-grain {
  0%, 100% { transform: translate3d(0, 0, 0); }
  20% { transform: translate3d(-2%, 1%, 0); }
  40% { transform: translate3d(1%, -2%, 0); }
  60% { transform: translate3d(-1%, 2%, 0); }
  80% { transform: translate3d(2%, 1%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .dark body::before,
  .dark body::after {
    animation: none;
  }
}

/* --------- MOBILE: suppress heavy ambient backdrop ---------
   The drifting gradient mesh + grain are decorative and expensive
   to repaint on small/low-power devices. Disable animation and
   drop the grain layer entirely below the md breakpoint.
 */
@media (max-width: 767px) {
  .dark body::before {
    animation: none;
    filter: blur(28px);
    will-change: auto;
  }
  .dark body::after {
    display: none;
  }
}

/* Mobile drawer link fade — opacity-only entrance for the slide-out nav. */
@keyframes pryce-menu-link-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  [style*="pryce-menu-link-in"] {
    animation: none !important;
    opacity: 1 !important;
  }
}