@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=DM+Sans:wght@300;400;500;600;700&display=swap');

:root {
  --background: 222 20% 8%;
  --foreground: 210 20% 95%;
  --primary: 214 90% 52%;
  --primary-foreground: 0 0% 100%;
  --card: 222 18% 12%;
  --card-foreground: 210 15% 90%;
  --card-border: 220 15% 20%;
  --secondary: 220 14% 18%;
  --secondary-foreground: 210 20% 90%;
  --muted: 222 16% 15%;
  --muted-foreground: 220 12% 55%;
  --accent: 38 95% 55%;
  --accent-foreground: 222 20% 8%;
  --border: 220 14% 20%;
  --input: 220 14% 22%;
  --ring: 214 90% 52%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --popover: 222 18% 12%;
  --popover-foreground: 210 20% 95%;
  --radius: 0.375rem;
}

* { border-color: hsl(var(--border)); box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

a { color: inherit; text-decoration: none; }

.glass {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-33.333%); }
}
.animate-marquee {
  animation: marquee 32s linear infinite;
  will-change: transform;
}
.animate-marquee:hover { animation-play-state: paused; }

@keyframes kenburns {
  0%   { transform: scale(1.0) translate(0%, 0%); }
  25%  { transform: scale(1.08) translate(-1.5%, -1%); }
  50%  { transform: scale(1.12) translate(1%, -2%); }
  75%  { transform: scale(1.06) translate(-0.5%, 1%); }
  100% { transform: scale(1.0) translate(0%, 0%); }
}
.animate-kenburns {
  animation: kenburns 18s ease-in-out infinite;
  will-change: transform;
}

.escalator-stripe {
  background-image: repeating-linear-gradient(45deg, #fbbf24 0px, #fbbf24 10px, #1a1a1a 10px, #1a1a1a 20px);
}

@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes spin-slow-rev { to { transform: rotate(-360deg); } }
.spin-ring-1 { animation: spin-slow 30s linear infinite; }
.spin-ring-2 { animation: spin-slow-rev 38s linear infinite; }
.spin-ring-3 { animation: spin-slow 46s linear infinite; }
.spin-ring-4 { animation: spin-slow-rev 54s linear infinite; }

@keyframes pulse-soft { 0%,100%{opacity:1} 50%{opacity:.5} }
.animate-pulse-soft { animation: pulse-soft 2s cubic-bezier(0.4,0,0.6,1) infinite; }

/* Fade/slide-in utility used in place of framer-motion for on-load hero content */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 0.7s ease both; }
.fade-up-1 { animation: fadeUp 0.7s ease both; animation-delay: .15s; }
.fade-up-2 { animation: fadeUp 0.7s ease both; animation-delay: .3s; }
.fade-up-3 { animation: fadeUp 0.7s ease both; animation-delay: .45s; }
.fade-up-4 { animation: fadeUp 0.7s ease both; animation-delay: .6s; }
.fade-up-5 { animation: fadeUp 0.7s ease both; animation-delay: .8s; }

/* Scroll-triggered reveal (JS toggles .in-view) */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* Prose overrides for blog article body */
.prose-elevara { color: #374151; line-height: 1.75; }
.prose-elevara h3 { color: #111827; font-weight: 700; font-size: 1.375rem; margin-top: 2rem; margin-bottom: 1rem; }
.prose-elevara p { margin-bottom: 1.25rem; }
.prose-elevara blockquote { border-left: 4px solid hsl(var(--primary)); padding-left: 1.25rem; font-style: italic; color: #4b5563; margin: 1.5rem 0; }
.prose-elevara .lead { font-size: 1.25rem; }

/* Sticky header nav underline hover */
.nav-link { position: relative; }

/* Mobile menu */
.mobile-menu { display: none; }
.mobile-menu.open { display: flex; }