/* ============================================================
   Shared design system — Shubha's PM Portfolio
   Used by index.html, projects/flexy/index.html, projects/sunnysideup/index.html.
   Each page sets its own --accent / --accent-dark before this file's
   component rules are used, so per-project brand color flows through
   without duplicating the system itself.
   ============================================================ */

/* ---------- Fonts (self-hosted, no runtime CDN) ---------- */
@font-face{
  font-family:'Fraunces Variable';
  font-style:normal;
  font-display:swap;
  font-weight:100 900;
  src:url('../fonts/fraunces-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Fraunces Variable';
  font-style:normal;
  font-display:swap;
  font-weight:100 900;
  src:url('../fonts/fraunces-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2020,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Fraunces Variable';
  font-style:italic;
  font-display:swap;
  font-weight:100 900;
  src:url('../fonts/fraunces-latin-wght-italic.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122;
}
@font-face{
  font-family:'Inter Variable';
  font-style:normal;
  font-display:swap;
  font-weight:100 900;
  src:url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter Variable';
  font-style:normal;
  font-display:swap;
  font-weight:100 900;
  src:url('../fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2020,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Design tokens ---------- */
:root{
  /* brand anchors (project pages may override --accent/--accent-dark) */
  --navy:#0E0B2E;
  --navy-soft:#211A57;
  --teal:#0F9D8F;
  --teal-dark:#0B7A70;
  --amber:#E7B23A;
  --amber-dark:#B8811F;
  --accent:var(--teal);
  --accent-dark:var(--teal-dark);

  --ink:#181B22;
  --ink-soft:#565F6B;
  --ink-faint:#87909B;
  --paper:#FBF8F2;
  --paper-soft:#F3EEE3;
  --border:#E7E1D3;
  --border-dark:rgba(255,255,255,0.14);

  --font-display:'Fraunces Variable', ui-serif, Georgia, serif;
  --font-body:'Inter Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:.35s;
  --dur:.6s;
  --dur-slow:1.1s;

  --wrap:1120px;
}

*{box-sizing:border-box;}
html{background:var(--paper);}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px;}
@media(max-width:640px){ .wrap{padding:0 20px;} }

h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;margin:0;}

a{color:inherit;}

/* ---------- Grain texture (subtle, dark sections only) ---------- */
.grain{position:relative;isolation:isolate;}
.grain::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  opacity:0.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Nav ---------- */
nav{
  position:sticky;top:0;z-index:50;
  background:rgba(251,248,242,0.82);
  backdrop-filter:blur(10px) saturate(1.1);
  border-bottom:1px solid var(--border);
  transition:box-shadow var(--dur-fast) var(--ease-out);
}
nav.is-scrolled{box-shadow:0 8px 24px rgba(14,11,46,0.06);}
nav .wrap{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;}
nav .brand{font-family:var(--font-display);font-weight:600;letter-spacing:-0.01em;color:var(--navy);font-size:17px;display:flex;align-items:center;gap:8px;text-decoration:none;}
nav .brand em{font-style:italic;color:var(--accent);}
nav .nav-right{display:flex;align-items:center;gap:24px;}
nav a.contact{color:var(--ink-soft);text-decoration:none;font-size:13.5px;font-weight:500;}
nav ul{list-style:none;display:flex;gap:24px;margin:0;padding:0;}
nav ul a{color:var(--ink-soft);text-decoration:none;font-size:13.5px;font-weight:500;}
nav ul a:hover,nav a.contact:hover{color:var(--accent-dark);}
@media(max-width:800px){ nav ul{display:none;} }

/* ---------- Section rhythm ---------- */
section{padding:88px 0;}
section.alt{background:var(--paper-soft);}
.section-kicker{
  font-size:12.5px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent-dark);
  margin-bottom:14px;display:flex;align-items:center;gap:10px;
}
.section-kicker::before{content:'';width:22px;height:1px;background:var(--accent);display:inline-block;}
h2.section-title{font-size:clamp(26px,3.4vw,38px);letter-spacing:-0.01em;margin:0 0 14px;line-height:1.15;}
.lede{color:var(--ink-soft);font-size:16px;max-width:680px;margin-bottom:8px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;
  padding:12px 22px;border-radius:999px;text-decoration:none;color:#fff;background:var(--navy);
  position:relative;overflow:hidden;transition:transform var(--dur-fast) var(--ease-out);
}
.btn:hover{transform:translateY(-2px);}
.btn-ghost{background:transparent;color:var(--accent-dark);border:1px solid var(--border);}

/* magnetic wrapper: JS sets translate via inline transform on .magnetic elements */
[data-magnetic]{display:inline-block;will-change:transform;}

/* ---------- Cards ---------- */
.card{background:#fff;border:1px solid var(--border);border-radius:16px;transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(14,11,46,0.08);}

/* ---------- Stat strip (ring/arc count-up) ---------- */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:28px;margin-top:36px;}
@media(max-width:520px){.stat-row{grid-template-columns:1fr;justify-items:center;}}

.stat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;}
.stat-ring{position:relative;width:112px;height:112px;}
.stat-ring svg{width:100%;height:100%;transform:rotate(-90deg);}
.stat-ring circle{fill:none;stroke-width:5;}
.stat-ring .track{stroke:var(--border-dark);}
.stat-ring .arc{stroke:var(--amber);stroke-linecap:round;stroke-dasharray:301.6;stroke-dashoffset:301.6;}
.stat-ring .value{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:22px;font-weight:600;color:#fff;
}
.stat .label{font-size:13px;color:var(--ink-faint);max-width:160px;}
section.stats{background:var(--navy);color:#fff;}
section.stats .lede{color:#B9C0DD;}
section.stats .section-kicker{color:var(--amber);}
section.stats .section-kicker::before{background:var(--amber);}

/* ---------- Energy-flow motif (recurring SVG divider) ---------- */
.energy-divider{width:100%;height:64px;overflow:hidden;}
.energy-divider svg{width:100%;height:100%;display:block;}
.energy-divider path{
  fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:1000;stroke-dashoffset:1000;
}

/* ---------- Reveal / motion utility hooks (state set by motion.js via GSAP) ----------
   Base CSS provides a no-JS-safe default (fully visible); motion.js sets the
   pre-animation state inline so content is never hidden if JS fails to load. */
[data-reveal],[data-reveal-stagger] > *{opacity:1;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}
}