/* ============================================================
   DeepRock — shared site styles  ·  Tidal palette
   ============================================================ */

:root {
  --bg:        #0a1a2e;
  --bg-2:      #081320;
  --fg:        #eaf3f5;
  --accent:    #3fb5c8;
  --accent-2:  #7feefb;
  --accent-3:  #1f7a8c;
  --violet:    #9b86ff;
  --violet-2:  #c4b6ff;
  --amber:     #f5b072;
  --amber-2:   #ffd0a0;
  --muted:     rgba(234,243,245,0.6);
  --faint:     rgba(234,243,245,0.38);
  --hair:      rgba(234,243,245,0.1);
  --panel:     rgba(234,243,245,0.04);
  --glass:     rgba(234,243,245,0.05);
  --max:       1240px;
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Manrope', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
::selection { background: rgba(127,238,251,0.25); }

/* ---- Fixed background layers ------------------------------- */
.bg-layers { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* drifting gradient mesh */
.mesh-orb { position: absolute; border-radius: 50%; filter: blur(90px); will-change: transform; }
.mesh-orb.a { width: 56vw; height: 56vw; top: -12%; left: -10%;
  background: radial-gradient(circle, rgba(63,181,200,0.55) 0%, transparent 65%);
  animation: drift1 24s ease-in-out infinite alternate; }
.mesh-orb.b { width: 60vw; height: 60vw; bottom: -22%; right: -16%;
  background: radial-gradient(circle, rgba(31,122,140,0.5) 0%, transparent 70%);
  animation: drift2 30s ease-in-out infinite alternate; }
.mesh-orb.c { width: 36vw; height: 36vw; top: 38%; left: 44%;
  background: radial-gradient(circle, rgba(127,238,251,0.18) 0%, transparent 70%);
  animation: drift3 36s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(18vw, 14vh) scale(1.25); } }
@keyframes drift2 { to { transform: translate(-14vw,-10vh) scale(0.85); } }
@keyframes drift3 { to { transform: translate(-12vw, 8vh) scale(1.3); } }

/* particle network canvas */
#net { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.85; }

/* realistic lunar surface filling the lower half of the viewport */

/* grain */
.grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.055; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>"); }

/* cursor-follow glow (legacy, hidden — replaced by custom cursor) */
#cursor-glow { display: none; }

/* custom cursor */
.dr-cursor-on, .dr-cursor-on a, .dr-cursor-on button, .dr-cursor-on .btn { cursor: none; }
.dr-cur-dot, .dr-cur-ring { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none;
  border-radius: 50%; opacity: 0; will-change: transform; margin-left: 0; margin-top: 0; }
.dr-cur-dot { width: 7px; height: 7px; background: var(--accent-2); margin: -3.5px 0 0 -3.5px;
  box-shadow: 0 0 10px rgba(127,238,251,0.8); transition: opacity .3s; }
.dr-cur-ring { width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1.5px solid rgba(127,238,251,0.55);
  transition: width .25s var(--ease), height .25s var(--ease), margin .25s var(--ease), background .25s, border-color .25s, opacity .3s; }
.dr-cur-ring.big { width: 60px; height: 60px; margin: -30px 0 0 -30px; border-color: rgba(127,238,251,0.85);
  background: rgba(63,181,200,0.1); }
.dr-cur-trail { position: fixed; top: 0; left: 0; z-index: 9998; pointer-events: none; border-radius: 50%;
  background: var(--accent-2); margin: -3px 0 0 -3px; box-shadow: 0 0 6px rgba(127,238,251,0.7);
  will-change: transform, opacity; transition: opacity .3s; }

/* ---- Two-background structure ------------------------------ */
/* Hero stage carries the animated mesh + particle network, contained to
   itself. Everything below sits on a calmer solid panel. */
/* Animated mesh + particle network span the whole page as one fixed space. */
.bg-fixed { position: fixed; inset: 0; z-index: 0; overflow: hidden; isolation: isolate; }
.bg-fixed::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 42% at 50% 22%, rgba(2,7,14,0.6), transparent 62%); }
.page-body { position: relative; z-index: 3; background: transparent; }

/* ---- Content shell ----------------------------------------- */
.shell { position: relative; z-index: 3; }
.wrap  { max-width: var(--max); margin: 0 auto; padding: 0 40px; }

/* ---- Nav --------------------------------------------------- */
.nav {
  position: relative; z-index: 40;
  background: transparent;
}
.nav.scrolled { background: transparent; }
.nav-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  max-width: var(--max); margin: 0 auto; padding: 18px 40px; }
.nav-inner > :first-child { justify-self: start; }
.nav-inner > :last-child { justify-self: end; width: max-content; }
.nav-inner .nav-links { justify-self: center; }
.nav-links { display: flex; gap: 34px; font-size: 14px; font-weight: 500; }
.nav-links a { color: var(--fg); opacity: 0.78; transition: opacity .2s, color .2s; position: relative; }
.nav-links a::after { content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px;
  background: var(--accent-2); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.nav-links a:hover { opacity: 1; color: var(--accent-2); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-links a.active { opacity: 1; }

.wordmark { display: inline-flex; align-items: baseline; font-family: 'Manrope', sans-serif;
  font-weight: 600; letter-spacing: -0.025em; line-height: 1; color: var(--fg); }

/* ---- Buttons ----------------------------------------------- */
.btn { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; border: none;
  font-family: inherit; font-size: 14px; font-weight: 600; border-radius: 999px;
  padding: 13px 22px; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.btn-primary { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); color: #07182b;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 10px 28px rgba(63,181,200,0.32); }
.btn-primary::after { content:'→'; transition: transform .2s var(--ease); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 16px 40px rgba(63,181,200,0.5); }
.btn-primary:hover::after { transform: translateX(4px); }
.btn-ghost { background: var(--glass); color: var(--fg); border: 1px solid var(--hair);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn-ghost:hover { background: rgba(234,243,245,0.09); }
.btn-sm { padding: 10px 18px; font-size: 13px; }

/* ---- Typographic helpers ----------------------------------- */
.eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent-2); display: inline-flex; align-items: center; gap: 12px; }
.eyebrow::before { content:''; width: 28px; height: 1px; background: var(--accent); display: inline-block; }
.display { font-weight: 700; letter-spacing: -0.04em; line-height: 0.99; margin: 0; }
.h1 { font-size: clamp(46px, 7vw, 84px); }
.h2 { font-size: clamp(34px, 4.6vw, 56px); }
.h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; margin: 0; }
.lead { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.55; color: var(--fg); opacity: 0.78; }
.gradient-text { background: linear-gradient(120deg, var(--accent-2) 0%, var(--accent) 48%, #fff 100%);
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shine 7s linear infinite; }
@keyframes shine { to { background-position: -200% center; } }
.mono-tag { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted); }

/* ---- Section rhythm ---------------------------------------- */
section { position: relative; }
.section-pad { padding: clamp(56px, 8vh, 96px) 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 40px; flex-wrap: wrap; }
.section-head .lead { max-width: 42ch; }

/* ---- Glass card -------------------------------------------- */
.glass-card { position: relative; border: 1px solid var(--hair); border-radius: 18px;
  background: linear-gradient(135deg, rgba(20,42,64,0.82) 0%, rgba(12,28,46,0.78) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 24px 64px rgba(0,0,0,0.4); overflow: hidden; }
.glass-card.lit::before { content:''; position:absolute; inset:-1px; border-radius:18px; pointer-events:none;
  background: linear-gradient(135deg, rgba(127,238,251,0.4), transparent 50%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px; }

/* ---- Scroll reveal ----------------------------------------- */
/* Motion is driven by JS (requestAnimationFrame) for reliability; CSS only
   defines the hidden start and the resting visible end state. */
.reveal { opacity: 0; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .mesh-orb, .gradient-text { animation: none; }
}

/* ---- Footer ------------------------------------------------ */
.footer { border-top: 1px solid var(--hair); padding: 64px 0 48px; margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 56px; }
.footer-grid h5 { margin: 0 0 18px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-grid a { font-size: 14px; color: var(--muted); transition: color .2s; }
.footer-grid a:hover { color: var(--accent-2); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--hair); padding-top: 28px; }
.footer-bottom .mono-tag { color: var(--faint); }

/* ---- Responsive -------------------------------------------- */
@media (max-width: 880px) {
  .nav-links { display: none; }
  .wrap, .nav-inner, .page-hero, .hero-intro { padding-left: 24px; padding-right: 24px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}