/* ============================================================
   nathanielrohr.com — custom styles
   (Utility classes live in tailwind.css, generated at build time)
   ============================================================ */

/* ---- Fonts ---- */
.font-rajdhani { font-family: 'Montserrat', sans-serif; letter-spacing: -0.01em; }
.font-mono     { font-family: 'Montserrat', sans-serif; }
kbd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.font-jakarta  { font-family: 'Montserrat', sans-serif; }
.font-geist    { font-family: 'Montserrat', sans-serif; }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: #1A6EE8; }
::-webkit-scrollbar-track { background: #090909; }

/* ---- Text selection (brand orange) ---- */
::selection { background: rgba(255, 109, 0, 0.30); color: #ffffff; }

/* ---- Metallic headline gradient ---- */
.text-metallic {
  background: linear-gradient(135deg, #ffffff 0%, #d7e6ff 45%, #7FB1F7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- Scroll reveal ---- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(10px);
  transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1), filter .9s cubic-bezier(.22,1,.36,1);
}
.reveal.active { opacity: 1; transform: translateY(0); filter: blur(0); }

/* ---- Glow card (mouse flashlight) ---- */
.glow-card { position: relative; overflow: hidden; border-radius: 1rem; }
.glow-card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(26,110,232,0.10), transparent 60%);
  opacity: 0; transition: opacity .35s ease;
  pointer-events: none;
  z-index: 1;
}
.glow-card:hover::before { opacity: 1; }

/* ---- Background layers ---- */
.noise-layer {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
.bg-scanlines { background: repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(255,255,255,0.04) 4px); }
.bg-grid {
  background-image: linear-gradient(rgba(26,110,232,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(26,110,232,0.05) 1px, transparent 1px);
  background-size: 140px 140px;
}
.bg-grid-dim {
  background-image: linear-gradient(rgba(26,110,232,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(26,110,232,0.03) 1px, transparent 1px);
  background-size: 140px 140px;
}
.bg-circuit {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' fill='none'%3E%3Cpath d='M20 20 H140 V100 H240 M240 100 V180 M60 300 V220 H160 M280 40 V140 H300 M20 160 H80 V240' stroke='%234D9BFF' stroke-width='1.5'/%3E%3Ccircle cx='20' cy='20' r='3' fill='%234D9BFF'/%3E%3Ccircle cx='240' cy='180' r='3' fill='%234D9BFF'/%3E%3Ccircle cx='60' cy='300' r='3' fill='%234D9BFF'/%3E%3Ccircle cx='280' cy='40' r='3' fill='%234D9BFF'/%3E%3Ccircle cx='20' cy='160' r='3' fill='%234D9BFF'/%3E%3Ccircle cx='80' cy='240' r='3' fill='%234D9BFF'/%3E%3Ccircle cx='300' cy='140' r='3' fill='%234D9BFF'/%3E%3Ccircle cx='160' cy='220' r='3' fill='%234D9BFF'/%3E%3C/svg%3E");
  background-size: 320px 320px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 30%, transparent 75%);
}
.bg-cardlines { background: repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(26,110,232,0.05) 3px); }
.bg-chartgrid {
  background-image: linear-gradient(rgba(26,110,232,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(26,110,232,0.06) 1px, transparent 1px);
  background-size: 25% 25%;
}
.bg-poly-1 {
  clip-path: polygon(0 45%, 100% 65%, 100% 100%, 0 100%);
  background: linear-gradient(160deg, #1257C4 0%, #001a2e 60%, #000000 100%);
}
.bg-poly-2 {
  clip-path: polygon(0 0, 100% 0, 100% 22%, 0 55%);
  background: linear-gradient(200deg, #1A6EE8 0%, #0a1830 55%, #000000 100%);
}
.radar-conic { background: conic-gradient(from 0deg, rgba(26,110,232,0.25) 0deg, transparent 70deg); }
.marquee-mask {
  mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
}

/* ---- Clip shapes ---- */
.clip-notch-lg { border-radius: 12px; }
.clip-notch    { border-radius: 10px; }
.clip-notch-sm { border-radius: 9px; }
.clip-box      { border-radius: 8px; }

/* ---- Fixed HUD corner frames ---- */
.hud-tl { clip-path: polygon(0 0, 100% 0, 100% 12%, 12% 12%, 12% 100%, 0 100%); }
.hud-tr { clip-path: polygon(0 0, 100% 0, 100% 100%, 88% 100%, 88% 12%, 0 12%); }
.hud-bl { clip-path: polygon(0 0, 12% 0, 12% 88%, 100% 88%, 100% 100%, 0 100%); }
.hud-br { clip-path: polygon(88% 0, 100% 0, 100% 100%, 0 100%, 0 88%, 88% 88%); }

/* ---- Animations ---- */
@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes spin-slower { to { transform: rotate(-360deg); } }
@keyframes radar-sweep { to { transform: rotate(360deg); } }
@keyframes marquee-y { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes pulse-ring { 0% { transform: scale(.9); opacity: .7; } 70% { transform: scale(1.15); opacity: 0; } 100% { opacity: 0; } }
@keyframes float-y { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes glitch-x {
  0%, 92%, 100% { opacity: 0; transform: translateX(0); clip-path: inset(0 0 0 0); }
  93% { opacity: 1; transform: translateX(-6px); clip-path: inset(10% 0 55% 0); }
  95% { opacity: 1; transform: translateX(5px); clip-path: inset(60% 0 8% 0); }
  97% { opacity: 1; transform: translateX(-3px); clip-path: inset(30% 0 40% 0); }
}

.radar-sweep-el { animation: radar-sweep 4s linear infinite; transform-origin: center; }
.spin-slow { animation: spin-slow 24s linear infinite; }
.spin-slower { animation: spin-slower 36s linear infinite; }
.marquee-track { animation: marquee-y 14s linear infinite; }
.cursor-blink { animation: blink 2.4s ease-in-out infinite; }
.float-card { animation: float-y 6s ease-in-out infinite; }
.pulse-ring-el { animation: pulse-ring 3s ease-out infinite; }
.glitch-layer { animation: glitch-x 3.5s steps(1) infinite; }
.glitch-layer-2 { animation: glitch-x 3.5s steps(1) infinite reverse; }

/* ---- HUD noodle dashes ---- */
.noodle-path-1 { stroke-dasharray: 12 18; }
.noodle-path-2 { stroke-dasharray: 4 30; }
.noodle-path-3 { stroke-dasharray: 40 60; }

/* ---- Tabs & category filters ---- */
.tab-btn { transition: all .3s ease; }
.tab-btn.tab-active { background: #0D0D0D; border-color: #1A6EE8; color: #ffffff; }
.cat-btn.cat-active { background: #0D0D0D; border-color: #1A6EE8; color: #ffffff; }

/* ---- Corner-bracket buttons ---- */
.corner-b { position: absolute; width: 9px; height: 9px; border-color: #FF6D00; transition: all .3s ease; }
.group:hover .corner-b { width: 16px; height: 16px; }

/* ---- Logo motif: triple signal bars ---- */
.sig-bars { display: inline-flex; flex-direction: column; gap: 2px; margin-right: 10px; }
.sig-bars span { width: 8px; height: 5px; background: #1A6EE8; }
.sig-bars span:nth-child(2) { height: 3px; width: 6px; }
.sig-bars-amber span { background: #FFAB00; }

/* ---- Logo motif: viewfinder corner brackets ---- */
.vf-corner { position: absolute; width: 14px; height: 14px; border-color: rgba(255,255,255,0.55); }
.vf-corner.vf-xs { width: 7px; height: 7px; }
.vf-corner.vf-sm { width: 8px; height: 8px; }
.vf-corner.vf-md { width: 10px; height: 10px; }

/* ---- Misc ---- */
.ls-wide { letter-spacing: 0.5em; }
#hero-title { will-change: transform, filter; }
html { scroll-behavior: smooth; }