/* =========================================================
   MAULIK GAJJAR — v2 "Operator"
   BASE LAYER · tokens · reset · type · nav · chrome · kinetics
   Type:  Instrument Serif (display) / Space Grotesk (sans) / JetBrains Mono (label)
   ========================================================= */

:root {
  /* dark is the canonical register for this build */
  --bg:        oklch(0.145 0.008 60);
  --bg-2:      oklch(0.185 0.01 60);
  --bg-3:      oklch(0.225 0.012 60);
  --ink:       oklch(0.97 0.014 88);
  --ink-2:     oklch(0.80 0.012 80);
  --ink-3:     oklch(0.60 0.012 72);
  --ink-4:     oklch(0.44 0.012 66);
  --line:      oklch(0.30 0.012 65);
  --line-2:    oklch(0.40 0.014 65);
  --accent:    oklch(0.80 0.15 72);   /* warm amber */
  --accent-2:  oklch(0.66 0.15 42);   /* clay */
  --accent-ink: oklch(0.18 0.02 60);  /* text on accent */
  --good:      oklch(0.78 0.16 150);
  --paper:     oklch(0.17 0.009 60);
  --grain:     0.07;
  --selection: oklch(0.80 0.15 72 / 0.30);

  --ease:      cubic-bezier(.7,0,.2,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --maxw:      1480px;
  --pad:       clamp(20px, 4.5vw, 64px);
}

[data-theme="light"] {
  --bg:        oklch(0.972 0.012 85);
  --bg-2:      oklch(0.945 0.014 85);
  --bg-3:      oklch(0.915 0.016 85);
  --ink:       oklch(0.18 0.008 60);
  --ink-2:     oklch(0.36 0.01 60);
  --ink-3:     oklch(0.52 0.012 60);
  --ink-4:     oklch(0.64 0.012 62);
  --line:      oklch(0.84 0.012 70);
  --line-2:    oklch(0.74 0.014 70);
  --accent:    oklch(0.70 0.16 60);
  --accent-2:  oklch(0.54 0.14 35);
  --accent-ink: oklch(0.99 0.005 85);
  --paper:     oklch(0.99 0.008 85);
  --grain:     0.05;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }
html, body { background: var(--bg); color: var(--ink); }

body {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .7s var(--ease), color .7s var(--ease);
}

::selection { background: var(--selection); color: var(--ink); }
a { color: inherit; }

/* ---------- type primitives ---------- */
.display { font-family: "Instrument Serif", "Times New Roman", serif; font-weight: 400; letter-spacing: -0.025em; line-height: 0.95; }
.italic  { font-style: italic; }
.mono    { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
em.serif, .serif-em { font-family: "Instrument Serif", serif; font-style: italic; }

/* ---------- grain overlay ---------- */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 90;
  opacity: var(--grain); mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- scroll progress ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  z-index: 200; background: transparent; pointer-events: none;
}
.scroll-progress .bar {
  height: 100%; width: var(--p, 0%);
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

/* ---------- custom cursor ---------- */
.cursor {
  position: fixed; pointer-events: none; z-index: 999; top: 0; left: 0;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid #fff;
  transform: translate(var(--cx, 50vw), var(--cy, 50vh)) translate(-50%, -50%) scale(var(--cs, 1));
  transition: background .25s, opacity .3s, width .25s, height .25s;
  mix-blend-mode: difference; background: transparent; opacity: 0;
}
.cursor.ready { opacity: 1; }
.cursor.hovered { --cs: 2.1; background: #fff; }
.cursor.labeled { --cs: 1; width: 64px; height: 64px; background: #fff; mix-blend-mode: difference; }
.cursor .lbl {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; color: #000; opacity: 0; transition: opacity .2s;
}
.cursor.labeled .lbl { opacity: 1; }
@media (hover: none), (max-width: 960px) { .cursor { display: none; } }

/* =========================================================
   NAV
   ========================================================= */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px var(--pad);

  transition: padding .55s var(--ease-out),
              background .55s var(--ease-out),
              border-color .55s var(--ease-out),
              box-shadow .55s var(--ease-out),
              backdrop-filter .55s var(--ease-out),
              top .55s var(--ease-out),
              max-width .55s var(--ease-out),
              border-radius .55s var(--ease-out);

  border: 1px solid transparent;
  border-radius: 0;
}

/* Apply difference mode only to nav content */
.nav .links,
.nav .theme-toggle {
    mix-blend-mode: difference;
    color: white;
}

/* ---- liquid-glass capsule on scroll ---- */
.nav.scrolled {
  mix-blend-mode: normal;
  color: var(--ink);
  top: 14px;
  left: 50%; right: auto; transform: translateX(-50%);
  width: auto; max-width: calc(100% - 32px);
  padding: 11px 14px 11px 24px;
  gap: clamp(20px, 4vw, 52px);
  border-radius: 100px;
  background: color-mix(in oklch, var(--bg) 58%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid color-mix(in oklch, var(--ink) 14%, transparent);
  box-shadow:
    0 1px 0 color-mix(in oklch, #fff 22%, transparent) inset,
    0 10px 30px -12px rgba(0,0,0,0.55),
    0 2px 8px -4px rgba(0,0,0,0.35);
}
.nav.scrolled .brand .dot,
.nav.scrolled .links a .ix { color: var(--accent); }
.nav .brand { font-family: "Instrument Serif", serif; font-size: 22px; letter-spacing: -0.01em; text-decoration: none; display: inline-flex; align-items: baseline; gap: 1px; }
.nav .brand b { font-weight: 400; }
.nav .brand .dot { color: var(--accent); font-style: italic; }
.nav ul { display: flex; gap: 26px; list-style: none; align-items: center; }
.nav .links a {
  text-decoration: none; font-size: 12px; letter-spacing: 0.04em; position: relative;
  opacity: 0.78; display: inline-flex; gap: 6px; align-items: baseline;
}
.nav .links a .ix { font-family: "JetBrains Mono", monospace; font-size: 9px; opacity: 0.6; }
.nav .links a:hover { opacity: 1; }
.nav .links a::after {
  content: ""; position: absolute; left: 0; bottom: -3px; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.nav .links a:hover::after { transform: scaleX(1); }

.theme-toggle {
  width: 54px; height: 27px; border-radius: 100px;
  background: transparent; border: 1px solid currentColor;
  position: relative; cursor: pointer; display: flex; align-items: center; padding: 3px;
}
.theme-toggle .knob { width: 19px; height: 19px; border-radius: 50%; background: currentColor; transition: transform .5s var(--ease); }
[data-theme="light"] .theme-toggle .knob { transform: translateX(27px); }
.theme-toggle::before, .theme-toggle::after { position: absolute; font-size: 10px; line-height: 1; top: 50%; transform: translateY(-50%); }
.theme-toggle::before { content: "☾"; left: 8px; opacity: 1; }
.theme-toggle::after  { content: "☀"; right: 8px; opacity: .4; }
[data-theme="light"] .theme-toggle::before { opacity: .4; }
[data-theme="light"] .theme-toggle::after  { opacity: 1; }

/* =========================================================
   SECTION SHARED
   ========================================================= */
section { position: relative; z-index: 1; }
.section { padding: clamp(96px, 13vh, 168px) var(--pad); max-width: var(--maxw); margin: 0 auto; }
.section.flush { max-width: none; }

.section-head { margin-bottom: clamp(40px, 6vw, 80px); }
.section-tag {
  display: inline-flex; align-items: center; gap: 10px; color: var(--ink-2); margin-bottom: 24px;
}
.section-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.7); opacity: .45; } }

.section-title {
  font-family: "Instrument Serif", serif; font-weight: 400;
  font-size: clamp(40px, 6.4vw, 104px); line-height: 0.96; letter-spacing: -0.025em;
  max-width: 17ch; text-wrap: balance;
}
.section-title .amp, .section-title em { color: var(--accent); font-style: italic; }
.section-lead { color: var(--ink-2); font-size: clamp(16px, 1.4vw, 19px); max-width: 46ch; margin-top: 22px; line-height: 1.5; }

/* reveal */
.reveal { opacity: 0; transform: translateY(42px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal-stagger > * { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal-stagger.in > * { opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: .07s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: .14s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: .21s; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: .28s; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: .35s; }
.reveal-stagger.in > *:nth-child(7) { transition-delay: .42s; }
.reveal-stagger.in > *:nth-child(8) { transition-delay: .49s; }

/* line-mask reveal for words (set by JS) */
.lines .ln-mask { display: block; overflow: hidden; }
.lines .ln-inner { display: block; transform: translateY(110%); transition: transform 1s var(--ease); }
.lines.in .ln-inner { transform: translateY(0); }
.lines.in .ln-mask:nth-child(2) .ln-inner { transition-delay: .08s; }
.lines.in .ln-mask:nth-child(3) .ln-inner { transition-delay: .16s; }
.lines.in .ln-mask:nth-child(4) .ln-inner { transition-delay: .24s; }
.lines.in .ln-mask:nth-child(5) .ln-inner { transition-delay: .32s; }

/* =========================================================
   KINETIC TICKER (replaces basic marquee)
   ========================================================= */
.ticker {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: clamp(16px, 2.4vw, 30px) 0; overflow: hidden; white-space: nowrap;
  background: var(--bg-2); position: relative;
  transform: skewX(var(--mq-skew, 0deg)); transform-origin: center;
}
.ticker .track {
  display: inline-flex; gap: clamp(28px, 4vw, 64px); align-items: center;
  font-family: "Instrument Serif", serif; font-size: clamp(34px, 6vw, 78px); line-height: 1;
  color: var(--ink); animation: marquee 34s linear infinite; will-change: transform;
}
.ticker .track span { display: inline-flex; align-items: center; gap: clamp(28px, 4vw, 64px); }
.ticker .track span::after { content: "✦"; color: var(--accent); font-size: 0.42em; }
.ticker .track .it.ghost { -webkit-text-stroke: 1px var(--ink-3); color: transparent; font-style: italic; }
.ticker:hover .track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* magnetic */
.magnetic { will-change: transform; transition: transform .25s var(--ease-out); }

/* a11y */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .1ms !important; scroll-behavior: auto !important; }
  .reveal, .reveal-stagger > *, .lines .ln-inner { opacity: 1 !important; transform: none !important; }
}

.brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

/* Desktop view (Default) */
.brand-logo {
    max-height: 50px; /* Adjust this value based on your navbar height */
    width: auto;      /* Maintains the image's aspect ratio */
    object-fit: contain;
    transition: all 0.3s ease; /* Smooth transition if the size changes */
}

/* Mobile view (Screens smaller than 768px) */
@media (max-width: 768px) {
    .brand-logo {
        max-height: 35px; /* Slightly smaller logo for mobile screens */
    }
}

.theme-toggle {
    position: relative;
    z-index: 9999;
    mix-blend-mode: difference; 
    color: white; /* 'difference' will invert this against the background */
}

/* =========================================
   THEME BASED LOGO SWITCHING
   ========================================= */

/* Default DARK theme */
.brand-logo.light-theme-logo {
    display: none;
}

.brand-logo.dark-theme-logo {
    display: block;
}

/* LIGHT theme active */
[data-theme="light"] .brand-logo.light-theme-logo {
    display: block;
}

[data-theme="light"] .brand-logo.dark-theme-logo {
    display: none;
}

/* Prevent logo from inheriting blend inversion */
.brand-logo {
    mix-blend-mode: normal;
}

/* Hero state logo visibility */
[data-theme="dark"] .light-theme-logo {
    display: none;
}

[data-theme="dark"] .dark-theme-logo {
    display: block;
}

[data-theme="light"] .light-theme-logo {
    display: block;
}

[data-theme="light"] .dark-theme-logo {
    display: none;
}

/* =========================================================
   MOBILE RESPONSIVE FIXES (Screens 768px and smaller)
   ========================================================= */
@media (max-width: 768px) {
  
/* --- 1. NAVIGATION FIX (Minimalist: Logo & Toggle Only) --- */
  .nav {
    flex-wrap: nowrap; 
    padding: 15px 20px; 
    justify-content: space-between; /* Pushes Logo left, Toggle right */
    align-items: center;
  }
  
  /* Hide the links completely on mobile */
  .nav .links {
    display: none; 
  }

  /* Logo on the left */
.nav .brand {
    order: 1;
    display: flex;
    align-items: center;
  }
  
  .nav .brand img {
    height: 32px; /* Increased from 20px for crisp readability */
    width: auto;  /* Forces the browser to keep perfect, un-squished proportions */
    max-width: 60vw; /* Safety net: ensures a very wide logo won't overlap the toggle */
  }

  /* Theme Toggle on the right */
  .nav .theme-toggle {
    order: 2;
    transform: scale(0.85); /* Scaled down just slightly for mobile proportions */
    transform-origin: right center;
  }
  
  /* --- 2. HERO META FIX --- */
  .hero-meta {
    flex-direction: column; /* Stacks the top info rows vertically */
    gap: 5px;
    align-items: flex-start;
    padding: 0 20px;
  }

  .hero-meta .row {
    flex-direction: column;
    gap: 5px;
  }

  /* --- 3. HERO TYPOGRAPHY FIX --- */
  /* Scales the giant headline down so it fits on a phone screen */
  .hero-title {
    font-size: 14vw; 
    line-height: 1.1;
    padding: 0 20px;
  }
  
  .hero-title .word.small {
    font-size: 8vw;
  }

  .hero-title .star {
    font-size: 10vw;
  }

  /* --- 4. HERO BOTTOM FIX --- */
  .hero-bottom {
    flex-direction: column; /* Stacks the paragraph and the facts */
    gap: 40px;
    padding: 0 20px;
  }

  .hero-bottom .lede-col {
    width: 100%;
    padding-right: 0;
  }

  .hero-bottom .facts {
    width: 100%;
  }
}