/* =============================================
   Himanshu Kumar Sah — Portfolio v5.0
   style.css — Master Design System
   Aesthetic: Editorial Luxury / Refined Modern
   ============================================= */

/* === Fonts === */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Outfit:wght@300;400;500;600&display=swap');

/* === Design Tokens === */
:root {
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Outfit', 'Segoe UI', sans-serif;

  /* Palette — Light */
  --bg:           #f8f7f4;
  --bg-raised:    #ffffff;
  --bg-subtle:    #f0efe9;
  --bg-tint:      #eeedf8;

  --ink:          #0f0e1a;
  --ink-2:        #3c3a52;
  --ink-3:        #7a7890;
  --ink-4:        #b0aec0;

  --accent:       #3b38a8;
  --accent-2:     #6462d4;
  --accent-3:     #eeedf8;
  --accent-glow:  rgba(59,56,168,0.14);

  --gold:         #b8860b;
  --gold-light:   #f5e6b0;
  --gold-glow:    rgba(184,134,11,0.18);

  --border:       rgba(15,14,26,0.08);
  --border-2:     rgba(15,14,26,0.14);
  --border-3:     rgba(59,56,168,0.22);

  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-pill:999px;

  --shadow-xs: 0 1px 2px rgba(15,14,26,0.06);
  --shadow-sm: 0 2px 8px rgba(15,14,26,0.07), 0 1px 2px rgba(15,14,26,0.04);
  --shadow-md: 0 4px 20px rgba(15,14,26,0.09), 0 2px 6px rgba(15,14,26,0.05);
  --shadow-lg: 0 12px 40px rgba(15,14,26,0.12), 0 4px 12px rgba(15,14,26,0.06);
  --shadow-accent: 0 8px 32px rgba(59,56,168,0.18);

  --ease-out:    cubic-bezier(0.16,1,0.3,1);
  --ease-in-out: cubic-bezier(0.4,0,0.2,1);
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
  --t-fast: 0.18s;
  --t-med:  0.35s;
  --t-slow: 0.6s;

  --nav-h:   66px;
  --max-w:   900px;
  --col-gap: clamp(1.25rem,4vw,2.5rem);
}

/* === Dark Mode === */
[data-theme='dark'] {
  --bg:           #0d0c18;
  --bg-raised:    #13121f;
  --bg-subtle:    #1a192b;
  --bg-tint:      #1e1c35;

  --ink:          #f0eeff;
  --ink-2:        #b8b5d4;
  --ink-3:        #7a7898;
  --ink-4:        #48475e;

  --accent:       #8f8df0;
  --accent-2:     #b8b6ff;
  --accent-3:     #1e1c35;
  --accent-glow:  rgba(143,141,240,0.15);

  --gold:         #d4a017;
  --gold-light:   #2a2210;
  --gold-glow:    rgba(212,160,23,0.18);

  --border:       rgba(240,238,255,0.07);
  --border-2:     rgba(240,238,255,0.13);
  --border-3:     rgba(143,141,240,0.25);

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.35);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.45);
  --shadow-accent: 0 8px 32px rgba(143,141,240,0.2);
}

/* === View Transitions === */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut var(--t-med) var(--ease-in-out) both; }
::view-transition-new(root) { animation: vtIn  var(--t-med) var(--ease-out) both; }
@keyframes vtOut { from{opacity:1;transform:translateY(0)} to{opacity:0;transform:translateY(-12px)} }
@keyframes vtIn  { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

/* === Reset === */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.7;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--t-med) var(--ease-in-out), color var(--t-med) var(--ease-in-out);
}
img,svg { display:block; max-width:100%; }
ul  { list-style:none; }
a   { color:inherit; text-decoration:none; transition:color var(--t-fast) var(--ease-in-out); }

/* === Typography === */
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:400; line-height:1.18; color:var(--ink); }
h1 { font-size:clamp(2.4rem,5vw,3.6rem); }
h2 { font-size:clamp(1.8rem,3.5vw,2.4rem); }
h3 { font-size:1.25rem; font-family:var(--font-body); font-weight:600; }
h4 { font-size:1rem; font-family:var(--font-body); font-weight:500; }
p  { font-size:1rem; color:var(--ink-2); line-height:1.75; }

/* === Accessibility === */
.sr-only {
  position:absolute!important; width:1px!important; height:1px!important;
  overflow:hidden!important; clip:rect(0 0 0 0)!important; white-space:nowrap!important;
}
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r-xs); }

/* === Noise texture === */
body::before {
  content:'';
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' 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)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events:none; z-index:0; opacity:0.6;
}
[data-theme='dark'] body::before { opacity:0.25; }

/* === Reveal animations === */
.reveal {
  opacity:0; transform:translateY(28px);
  transition:opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}
.reveal.in { opacity:1; transform:none; }
.reveal-d1{transition-delay:0.08s} .reveal-d2{transition-delay:0.16s}
.reveal-d3{transition-delay:0.24s} .reveal-d4{transition-delay:0.32s}
.reveal-d5{transition-delay:0.40s}

/* === Back to top === */
#btt {
  position:fixed; bottom:1.75rem; right:1.75rem;
  width:44px; height:44px; border-radius:50%;
  background:var(--accent); color:#fff;
  border:none; cursor:pointer; font-size:1rem;
  font-family:var(--font-body);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  box-shadow:var(--shadow-accent);
  transition:opacity var(--t-med) var(--ease-in-out), transform var(--t-med) var(--ease-out), background var(--t-fast);
  z-index:600;
}
#btt.show { opacity:1; pointer-events:auto; }
#btt:hover { transform:translateY(-3px); background:var(--accent-2); }
#btt:active { transform:scale(0.95); }

/* === Award Badge global === */
.award-badge {
  display:inline-flex; align-items:center; gap:0.45rem;
  padding:0.28rem 0.75rem;
  background:var(--gold-light);
  border:1px solid var(--gold);
  border-radius:var(--r-pill);
  font-size:0.72rem; font-weight:600;
  letter-spacing:0.06em; text-transform:uppercase;
  color:var(--gold);
}

/* === Reduced motion === */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal{opacity:1!important;transform:none!important}
}