/* ==============================
   Shani Maurya — shared styles
   ============================== */

:root {
  --ink: #05050a;
  --night: #0a0a14;
  --steel: #11111c;
  --cyan2: #00f0ff;
  --magenta2: #ff2bd6;
  --lime2: #a3ff12;
  --violet2: #a855f7;
}

html {
  scroll-behavior: smooth;
  /* Prevent any stray element from causing the whole page to scroll sideways on mobile */
  overflow-x: clip;
}

body {
  background: #05050a;
  color: #e6e6f0;
  font-family: 'Inter', system-ui, sans-serif;
  overflow-x: clip;
  /* Avoid iOS bounce exposing page beyond viewport width */
  max-width: 100vw;
}

/* Prevent horizontal scroll while the mobile drawer is open */
body.menu-open {
  overflow: hidden;
}

/* ---------- Mobile menu drawer ---------- */
.mobile-menu {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition:
    max-height .35s cubic-bezier(.2,.8,.2,1),
    opacity   .25s ease,
    transform .25s ease,
    margin-top .25s ease;
}
.mobile-menu.open {
  max-height: 70vh;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.mobile-menu a.block {
  border-radius: .75rem;
  padding: .65rem .85rem;
  transition: background-color .2s ease, color .2s ease;
}
.mobile-menu a.block:hover,
.mobile-menu a.block:focus-visible {
  background: rgba(0,240,255,0.08);
  color: #00f0ff;
}
.mobile-menu .btn-neon { padding: .65rem 1.1rem; }
@media (prefers-reduced-motion: reduce) {
  .mobile-menu { transition: none; }
}

/* Animated aurora background */
.aurora {
  position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background:
    radial-gradient(ellipse at 15% 10%, rgba(0,240,255,0.18), transparent 50%),
    radial-gradient(ellipse at 85% 20%, rgba(168,85,247,0.18), transparent 55%),
    radial-gradient(ellipse at 50% 90%, rgba(255,43,214,0.12), transparent 55%),
    #05050a;
}

.grid-bg {
  position: fixed; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

.neon-text {
  background: linear-gradient(90deg, #00f0ff 0%, #a855f7 35%, #ff2bd6 70%, #a855f7 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: neonShift 8s ease-in-out infinite;
}
@keyframes neonShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .neon-text { animation: none; }
}

/* Hexagon logo — gentle pulse ring on the outer edge */
@keyframes hexPulse {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(0,240,255,0.35)); }
  50%      { filter: drop-shadow(0 0 14px rgba(255,43,214,0.55)); }
}
/* Logo draw-in on first page load */
@keyframes hexDrawIn {
  0%   { stroke-dashoffset: 360; opacity: 0; }
  60%  { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes wordFadeIn {
  0%   { opacity: 0; transform: translateX(-8px); }
  100% { opacity: 1; transform: translateX(0);    }
}
header svg polygon[stroke^="url"] {
  stroke-dasharray: 360;
  animation: hexDrawIn 1.1s cubic-bezier(.6,.1,.2,1) forwards;
}
header a > span.font-mono {
  animation: wordFadeIn .7s ease-out .6s both;
}
header a:hover svg {
  animation: hexPulse 2.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  header svg polygon[stroke^="url"] { animation: none; stroke-dasharray: none; }
  header a > span.font-mono        { animation: none; }
  header a:hover svg               { animation: none; }
}

.glow-ring {
  box-shadow:
    0 0 0 1px rgba(0,240,255,0.35),
    0 0 30px rgba(0,240,255,0.25),
    inset 0 0 30px rgba(168,85,247,0.15);
}

.glass {
  background: rgba(17,17,28,0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.08);
}
.glass:hover { border-color: rgba(0,240,255,0.4); }

.btn-neon {
  position: relative;
  background: linear-gradient(90deg, #00f0ff, #a855f7);
  color: #05050a;
  font-weight: 600;
  transition: transform .25s ease, box-shadow .25s ease;
}
.btn-neon:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 25px rgba(0,240,255,0.55), 0 0 50px rgba(168,85,247,0.4);
}

.btn-ghost {
  border: 1px solid rgba(255,255,255,0.18);
  transition: all .25s ease;
}
.btn-ghost:hover {
  border-color: #00f0ff;
  color: #00f0ff;
  box-shadow: 0 0 18px rgba(0,240,255,0.35);
}

/* Animated blob */
.blob {
  position: absolute;
  width: 380px; height: 380px;
  filter: blur(80px);
  border-radius: 50%;
  opacity: .55;
  animation: float 14s ease-in-out infinite;
}
@keyframes float {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(40px,-30px) scale(1.08); }
}

/* Marquee */
.marquee {
  display: flex; gap: 3rem; white-space: nowrap;
  animation: scroll 28s linear infinite;
}
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Heading underline */
.heading-line::after {
  content: ""; display: block; height: 3px; width: 60px;
  margin-top: .75rem;
  background: linear-gradient(90deg, #00f0ff, #a855f7);
  border-radius: 2px;
  box-shadow: 0 0 15px rgba(0,240,255,0.6);
}
.heading-line.center::after { margin-left: auto; margin-right: auto; }

/* Skill bar */
.skill-bar {
  background: linear-gradient(90deg, #00f0ff, #a855f7);
  box-shadow: 0 0 12px rgba(0,240,255,0.5);
  height: 8px; border-radius: 999px;
}

/* Card hover */
.project-card { transition: transform .3s ease, box-shadow .3s ease; }
.project-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0,240,255,0.18), 0 0 30px rgba(168,85,247,0.18);
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #05050a; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#00f0ff,#a855f7); border-radius:10px; }

/* Nav link underline */
.nav-link { position: relative; }
.nav-link::after {
  content:""; position: absolute; left:0; bottom:-4px;
  height:2px; width:0;
  background: linear-gradient(90deg,#00f0ff,#a855f7);
  transition: width .3s ease;
}
.nav-link:hover::after,
.nav-link.active::after { width: 100%; }
.nav-link.active { color: #00f0ff; }

/* Typing cursor */
.cursor::after {
  content:"|"; color:#00f0ff;
  animation: blink 1s step-start infinite;
  margin-left: 2px;
}
@keyframes blink { 50% { opacity: 0; } }

/* Long-form article styles (policy / disclaimer / terms) */
.prose-neon h2 {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: #fff;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}
.prose-neon h3 {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: #e6e6f0;
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}
.prose-neon p  { color: #c9c9d4; line-height: 1.75; margin-bottom: 1rem; }
.prose-neon ul { color: #c9c9d4; list-style: disc; padding-left: 1.4rem; margin-bottom: 1rem; }
.prose-neon li { margin-bottom: 0.4rem; line-height: 1.65; }
.prose-neon a  { color: #00f0ff; text-decoration: underline; }
.prose-neon a:hover { color: #ff2bd6; }
.prose-neon strong { color: #fff; }