/* ======================================================================
   DA-CORE.CSS — Dhavalaganga Acharya Portfolio
   Single source of truth for all shared styles.
   Import this first in every page. Page-specific rules go in each file.
   ====================================================================== */


/* ======================================================================
   DESIGN TOKENS
   ====================================================================== */
:root {

  /* ── COLOURS ──────────────────────────────────────────────────────── */
  --clr-bg:           #0a0a0a;
  --clr-surface:      #111111;
  --clr-border:       #1e1e1e;
  --clr-border-mid:   #2a2a2a;
  --clr-text:         #f0ede8;
  --clr-text-muted:   #777777;
  --clr-text-dim:     #444444;
  --clr-accent:       #e84c1e;
  --clr-accent-hover: #ff5a2a;
  --clr-accent-dim:   rgba(232, 76, 30, 0.10);

  /* ── FONTS ───────────────────────────────────────────────────────── */
  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'Space Mono', monospace;

  /* ── FONT WEIGHTS ────────────────────────────────────────────────── */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  /* ── TYPE SCALE ──────────────────────────────────────────────────── */
  --text-hero:    clamp(80px, 11vw, 150px);
  --text-role:    clamp(32px, 4.5vw, 52px);
  --text-h2:      clamp(28px, 3vw, 40px);
  --text-body:    16px;
  --text-small:   14px;
  --text-label:   11px;
  --text-nav:     11px;
  --text-ticker:  11px;

  /* ── LINE HEIGHTS ────────────────────────────────────────────────── */
  --lh-hero:   0.9;
  --lh-body:   1.8;
  --lh-tight:  1.6;

  /* ── LETTER SPACING ──────────────────────────────────────────────── */
  --ls-hero:    0.02em;
  --ls-label:   0.18em;
  --ls-nav:     0.12em;
  --ls-mono:    0.06em;
  --ls-body:    0.02em;

  /* ── PAGE SPACING ────────────────────────────────────────────────── */
  --sp-page-x:     56px;
  --sp-section-v: 100px;
  --sp-gap:        48px;
  --sp-sm:         24px;
  --sp-xs:         12px;

  /* ── LAYOUT ──────────────────────────────────────────────────────── */
  --max-width:     1200px;
  --nav-height:      60px;
  --ticker-height:   36px;
  --gutter-width:    72px;

  /* ── BORDERS ─────────────────────────────────────────────────────── */
  --border:        1px solid var(--clr-border);
  --border-mid:    1px solid var(--clr-border-mid);
  --border-accent: 2px solid var(--clr-accent);

  /* ── ANIMATION ───────────────────────────────────────────────────── */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:      200ms;
  --dur-med:       400ms;
  --dur-slow:      700ms;
  --ticker-speed:  32s;
  --reveal-y:      28px;

  /* ── Z-INDEX ─────────────────────────────────────────────────────── */
  --z-grain:  800;
  --z-cursor: 9999;
  --z-nav:     100;
  --z-modal:   300;
}


/* ======================================================================
   RESET
   ====================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }


/* ======================================================================
   BASE BODY
   ====================================================================== */
body {
  background-color: var(--clr-bg);
  color: var(--clr-text);
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  overflow-x: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
}
@media (pointer: fine) {
  body { cursor: none; }
  * { cursor: none !important; }
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { background: none; border: none; font: inherit; color: inherit; cursor: none; }


/* ======================================================================
   GRAIN OVERLAY
   ====================================================================== */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-grain);
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 150px;
}
[data-theme="light"] body::after { opacity: 0.012; }


/* ======================================================================
   LIGHT THEME
   Only colour tokens swap — layout, spacing, type stay identical.
   ====================================================================== */
[data-theme="light"] {
  --clr-bg:           #faf6ee;
  --clr-surface:      #f2ebe0;
  --clr-border:       #e0d6c4;
  --clr-border-mid:   #d4c8b2;
  --clr-text:         #2a2a2a;
  --clr-text-muted:   #7a7a7a;
  --clr-text-dim:     #b0a898;
  --clr-accent:       #ff3d17;
  --clr-accent-hover: #ff5a2a;
  --clr-accent-dim:   rgba(255, 61, 23, 0.08);
}

/* Paper texture on light bg */
[data-theme="light"] body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23paper)' opacity='0.06'/%3E%3C/svg%3E");
  background-size: 300px;
}

[data-theme="light"] .ticker      { background: #e8dfd0; }
[data-theme="light"] .role-number { color: #ddd5c8; }
[data-theme="light"] .cursor-dot  { mix-blend-mode: normal; background: var(--clr-text); }
[data-theme="light"] .cursor-ring { border-color: rgba(42, 42, 42, 0.3); }


/* ======================================================================
   CUSTOM CURSOR
   ====================================================================== */
.cursor-dot {
  position: fixed;
  width: 8px; height: 8px;
  background: var(--clr-text);
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  transition: width var(--dur-fast), height var(--dur-fast);
}
.cursor-ring {
  position: fixed;
  width: 34px; height: 34px;
  border: 1px solid rgba(128, 128, 128, 0.35);
  border-radius: 50%;
  pointer-events: none;
  z-index: calc(var(--z-cursor) - 1);
  transform: translate(-50%, -50%);
  transition: width var(--dur-fast) var(--ease-out),
              height var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) ease;
}
.cursor-ring.hovering {
  width: 50px; height: 50px;
  border-color: var(--clr-accent);
}


/* ======================================================================
   NAVIGATION
   Frosted glass — always visible in both themes, no mix-blend-mode.
   ====================================================================== */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  height: var(--nav-height);
  padding: 0 var(--sp-page-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  background: rgba(10, 10, 10, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: var(--border);
  transition: background 0.3s ease, border-color 0.3s ease;
}
[data-theme="light"] .site-nav {
  background: rgba(232, 223, 208, 0.96);
}

.nav-logo {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.10em;
  color: var(--clr-text);
  text-decoration: none;
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
  flex: 1;
  justify-content: center;
}
.nav-links a {
  font-family: var(--font-mono);
  font-size: var(--text-nav);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--clr-text);
  text-decoration: none;
  opacity: 0.55;
  transition: opacity var(--dur-fast);
}
.nav-links a:hover,
.nav-links a.active { opacity: 1; }


/* ======================================================================
   THEME TOGGLE BUTTON
   ====================================================================== */
.theme-btn {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--clr-text);
  border: 1px solid var(--clr-border-mid);
  padding: 6px 14px;
  transition: color var(--dur-fast), border-color var(--dur-fast);
  white-space: nowrap;
}
.theme-btn:hover {
  color: var(--clr-accent);
  border-color: var(--clr-accent);
}

/* Hamburger button — hidden on desktop */
.nav-hamburger {
  display: none;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: 0.05em;
  color: var(--clr-text);
  padding: 6px 10px;
  line-height: 1;
}


/* ======================================================================
   TICKER STRIP
   ====================================================================== */
.ticker {
  height: var(--ticker-height);
  overflow: hidden;
  white-space: nowrap;
  background: #000;
  border-bottom: var(--border);
  display: flex;
  align-items: center;
  transition: background 0.3s ease;
}
.ticker__track {
  display: inline-flex;
  animation: ticker-scroll var(--ticker-speed) linear infinite;
}
.ticker__item {
  font-family: var(--font-mono);
  font-size: var(--text-ticker);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--clr-text-muted);
  padding: 0 40px;
}
.ticker__sep {
  color: var(--clr-text-dim);
  padding: 0 4px;
  user-select: none;
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ======================================================================
   SCROLL REVEAL
   ====================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-y));
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
/* Fallback: show content if JS is disabled */
noscript ~ * .reveal,
.no-js .reveal {
  opacity: 1;
  transform: none;
}


/* ======================================================================
   PAGE HEADER — shared across interior pages
   ====================================================================== */
.page-header {
  padding: calc(var(--nav-height) + 80px) var(--sp-page-x) 60px;
  border-bottom: var(--border);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-gap);
  align-items: end;
}
.page-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--clr-text-muted);
  margin-bottom: 20px;
}
.page-title {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--ls-hero);
  color: var(--clr-text);
}
.page-intro {
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--clr-text-muted);
  padding-left: 20px;
  border-left: var(--border-accent);
  align-self: end;
}


/* ======================================================================
   FOOTER
   ====================================================================== */
.site-footer {
  padding: 32px var(--sp-page-x);
  border-top: var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-sig {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
}
.footer-nav { display: flex; gap: 32px; }
.footer-nav a {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--clr-text-muted);
  transition: color var(--dur-fast);
}
.footer-nav a:hover { color: var(--clr-accent); }
.footer-copy {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--clr-text-dim);
}


/* ======================================================================
   UTILITY CLASSES
   ====================================================================== */
.u-accent  { color: var(--clr-accent); }
.u-muted   { color: var(--clr-text-muted); }
.u-mono    { font-family: var(--font-mono); }
.u-display { font-family: var(--font-display); }
.u-label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--clr-text-muted);
}
.u-divider { border: none; border-top: var(--border); margin: 60px 0; }


/* ======================================================================
   RESPONSIVE OVERRIDES
   ====================================================================== */
@media (max-width: 1024px) {
  :root { --sp-page-x: 40px; --sp-section-v: 72px; }
}

@media (max-width: 768px) {
  :root { --sp-page-x: 24px; --sp-section-v: 56px; --sp-gap: 32px; }

  .site-nav { padding: 0 var(--sp-page-x); gap: 12px; }
.nav-logo { margin-right: auto; } /* pushes everything else to the right */ 

  .nav-links { display: none; }

  /* Mobile hamburger menu */
  .nav-hamburger { display: block; }
  .nav-links.mobile-open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--nav-height);
    left: 0; right: 0;
    background: var(--clr-bg);
    border-bottom: var(--border);
    padding: 24px var(--sp-page-x);
    gap: 20px;
    z-index: var(--z-nav);
  }
  [data-theme="light"] .nav-links.mobile-open {
    background: #faf6ee;
  }
  .nav-links.mobile-open a { opacity: 1; font-size: 14px; }

  .page-header {
    grid-template-columns: 1fr;
    padding-top: calc(var(--nav-height) + 56px);
    gap: 32px;
  }
  .page-intro { padding-left: 16px; }

  .site-footer { flex-direction: column; gap: 16px; text-align: center; }
  .footer-nav  { justify-content: center; gap: 20px; }
}