/* Prime Filing Group — plain CSS design system (converted from Tailwind v4 tokens) */

:root {
  --radius: 0.5rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);
  --radius-4xl: calc(var(--radius) + 16px);
  --font-display: "Sora", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;

  --background: oklch(0.995 0.003 250);
  --foreground: oklch(0.19 0.045 260);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.19 0.045 260);
  --primary: oklch(0.31 0.096 261);
  --primary-foreground: oklch(0.99 0.005 250);
  --secondary: oklch(0.95 0.012 250);
  --secondary-foreground: oklch(0.26 0.07 261);
  --muted: oklch(0.955 0.01 250);
  --muted-foreground: oklch(0.5 0.03 258);
  --accent: oklch(0.62 0.14 245);
  --accent-foreground: oklch(0.99 0.005 250);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.905 0.014 252);
  --input: oklch(0.905 0.014 252);
  --ring: oklch(0.62 0.14 245);

  --navy: oklch(0.31 0.096 261);
  --navy-deep: oklch(0.2 0.07 262);
  --steel: oklch(0.62 0.14 245);
  --silver: oklch(0.86 0.012 252);
  --surface: oklch(0.975 0.008 250);

  --gradient-navy: linear-gradient(140deg, oklch(0.2 0.07 262), oklch(0.34 0.1 258));
  --gradient-steel: linear-gradient(120deg, oklch(0.62 0.14 245), oklch(0.72 0.1 232));
  --shadow-elevated: 0 24px 60px -28px color-mix(in oklab, var(--navy) 42%, transparent);
  --shadow-card: 0 1px 2px color-mix(in oklab, var(--navy) 8%, transparent),
    0 12px 32px -20px color-mix(in oklab, var(--navy) 28%, transparent);
}

* {
  border-color: var(--border);
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.font-display { font-family: var(--font-display); }

.surface-navy {
  background-image: var(--gradient-navy);
  color: var(--primary-foreground);
}

.text-gradient-steel {
  background-image: var(--gradient-steel);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bento-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-3xl);
  border: 1px solid var(--border);
  background-color: var(--card);
  box-shadow: var(--shadow-card);
  transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
}
.bento-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-elevated);
  border-color: color-mix(in oklab, var(--accent) 40%, transparent);
}

.bento-media {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-3xl);
  border: 1px solid var(--border);
  background-color: transparent;
  box-shadow: var(--shadow-card);
  transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
}
.bento-media:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-elevated);
  border-color: color-mix(in oklab, var(--accent) 40%, transparent);
}

.grid-lines {
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--silver) 55%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--silver) 55%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ---------- Ambient background animations ---------- */
@keyframes pfg-grid-drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(56px,56px,0); } }
@keyframes pfg-float-a { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(6%,8%,0) scale(1.12); } }
@keyframes pfg-float-b { 0%,100% { transform: translate3d(0,0,0) scale(1.05); } 50% { transform: translate3d(-8%,-6%,0) scale(0.92); } }
@keyframes pfg-float-c { 0%,100% { transform: translate3d(0,0,0) scale(0.95); } 50% { transform: translate3d(5%,-9%,0) scale(1.15); } }
@keyframes pfg-scan { 0% { transform: translateY(-120%); opacity: 0; } 35% { opacity: 0.9; } 100% { transform: translateY(120%); opacity: 0; } }
@keyframes pfg-beam { 0% { transform: translateX(-60%) rotate(8deg); } 100% { transform: translateX(260%) rotate(8deg); } }

.grid-drift {
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--steel) 22%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--steel) 22%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  animation: pfg-grid-drift 18s linear infinite;
}
.orb-a {
  background: radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--steel) 70%, transparent), transparent 70%);
  animation: pfg-float-a 22s ease-in-out infinite;
  opacity: 0.75;
}
.orb-b {
  background: radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--navy) 60%, transparent), transparent 70%);
  animation: pfg-float-b 28s ease-in-out infinite;
  opacity: 0.7;
}
.orb-c {
  background: radial-gradient(circle at 60% 40%, color-mix(in oklab, var(--accent) 55%, transparent), transparent 70%);
  animation: pfg-float-c 25s ease-in-out infinite;
  opacity: 0.6;
}
.beam-sweep::before {
  content: "";
  position: absolute;
  inset-block: -40%;
  width: 45%;
  background: linear-gradient(100deg, transparent, color-mix(in oklab, var(--steel) 18%, transparent), transparent);
  filter: blur(28px);
  animation: pfg-beam 16s linear infinite;
}
.scan-sweep::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 45%;
  background: linear-gradient(to bottom, transparent, color-mix(in oklab, var(--steel) 26%, transparent), transparent);
  animation: pfg-scan 7s ease-in-out infinite;
}

@keyframes band-left { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes band-right { from { transform: translate3d(-50%,0,0); } to { transform: translate3d(0,0,0); } }
.animate-band-left { animation: band-left 30s linear infinite; }
.animate-band-right { animation: band-right 30s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .grid-drift, .orb-a, .orb-b, .orb-c, .scan-sweep::before, .beam-sweep::before,
  .animate-band-left, .animate-band-right { animation: none; }
}

/* Utility classes used directly (not via Tailwind JIT) */
.pfg-logo-mark {
  background-image: var(--gradient-navy);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  display: grid;
  place-items: center;
}

/* Language toggle buttons */
.pfg-lang-toggle button[data-lang-btn] {
  color: var(--muted-foreground);
}
.pfg-lang-toggle button[data-lang-btn].pfg-lang-active {
  background: var(--secondary);
  color: var(--foreground);
}

/* Card photo-backdrop readability overlays.
   NOTE: intentionally plain CSS, not Tailwind's bg-gradient-to-r from-X/NN
   utilities — Tailwind's opacity modifiers don't apply correctly against
   our OKLCH custom-property colors when used that way. */
.pfg-fade-right {
  background-image: linear-gradient(
    to right,
    color-mix(in oklab, var(--card) 96%, transparent),
    color-mix(in oklab, var(--card) 88%, transparent) 55%,
    color-mix(in oklab, var(--card) 50%, transparent)
  );
}
.pfg-fade-top {
  background-image: linear-gradient(
    to bottom,
    color-mix(in oklab, var(--card) 94%, transparent),
    color-mix(in oklab, var(--card) 86%, transparent) 55%,
    color-mix(in oklab, var(--card) 52%, transparent)
  );
}

/* Map pin + badge overlays — plain CSS for the same reason as above:
   Tailwind v3's opacity modifiers don't reliably apply to CSS-variable
   arbitrary values (bg-[var(--x)]/NN silently does nothing). */
.pfg-pin-ping {
  background-color: color-mix(in oklab, var(--steel) 60%, transparent);
}
.pfg-pin-badge {
  background-color: color-mix(in oklab, var(--navy-deep) 80%, transparent);
}
.pfg-map-badge {
  background-color: color-mix(in oklab, var(--navy-deep) 70%, transparent);
}
.pfg-map-fade {
  background-image: linear-gradient(to top, color-mix(in oklab, var(--navy-deep) 80%, transparent), transparent);
}
#pfg-toast {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 100;
  max-width: 22rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-xl);
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  box-shadow: var(--shadow-elevated);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 220ms ease, transform 220ms ease;
  pointer-events: none;
}
#pfg-toast.pfg-toast-show { opacity: 1; transform: translateY(0); }
#pfg-toast.pfg-toast-success { background: oklch(0.45 0.14 155); }
#pfg-toast.pfg-toast-error { background: var(--destructive); }