/* ==========================================================================
   STUDIO NOIR — base.css
   Design tokens, reset, typography, grid, utilities
   Heliosync Technologies Private Limited
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* — Noir palette ------------------------------------------------------- */
  --noir:        #050505;
  --charcoal:    #111111;
  --graphite:    #1c1c1c;
  --slate:       #262626;
  --gunmetal:    #4a4a4a;
  --platinum:    #c8c8c8;
  --ivory:       #f5f5f2;
  --soft-white:  #fafafa;
  --champagne:   #d6c4a8;

  /* — Semantic ----------------------------------------------------------- */
  --bg:          var(--noir);
  --bg-alt:      var(--charcoal);
  --surface:     var(--graphite);
  --fg:          var(--ivory);
  --fg-muted:    var(--platinum);
  --fg-dim:      var(--gunmetal);
  --accent:      var(--champagne);
  --hairline:    rgba(245, 245, 242, 0.10);
  --hairline-2:  rgba(245, 245, 242, 0.18);

  /* — Type --------------------------------------------------------------- */
  --font-sans:    'Inter Tight', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Instrument Serif', 'Times New Roman', Times, serif;

  /* Fluid scale — 360px → 1920px */
  --fs-micro:  clamp(0.625rem, 0.60rem + 0.12vw, 0.6875rem);
  --fs-label:  clamp(0.6875rem, 0.65rem + 0.15vw, 0.8125rem);
  --fs-body-s: clamp(0.8125rem, 0.78rem + 0.18vw, 0.9375rem);
  --fs-body:   clamp(0.9375rem, 0.88rem + 0.28vw, 1.0625rem);
  --fs-lead:   clamp(1.125rem, 0.98rem + 0.72vw, 1.5rem);
  --fs-h4:     clamp(1.375rem, 1.10rem + 1.30vw, 2.25rem);
  --fs-h3:     clamp(1.75rem, 1.20rem + 2.60vw, 3.5rem);
  --fs-h2:     clamp(2.5rem, 1.30rem + 5.60vw, 6rem);
  --fs-h1:     clamp(3rem, 1.00rem + 9.20vw, 9.5rem);
  --fs-mega:   clamp(3.5rem, 0.20rem + 15.0vw, 15rem);

  --lh-tight:  0.90;
  --lh-snug:   1.04;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  --tr-label:  0.22em;
  --tr-tight:  -0.03em;
  --tr-mega:   -0.045em;

  /* — Space -------------------------------------------------------------- */
  --gutter:    clamp(1.25rem, 0.60rem + 2.8vw, 3.75rem);
  --sec-y:     clamp(5rem, 2.5rem + 10vw, 12.5rem);
  --sec-y-sm:  clamp(3rem, 1.8rem + 5vw, 6.5rem);
  --maxw:      1680px;

  /* — Motion ------------------------------------------------------------- */
  --e-out:     cubic-bezier(0.16, 1, 0.30, 1);
  --e-inout:   cubic-bezier(0.76, 0, 0.24, 1);
  --e-expo:    cubic-bezier(0.19, 1, 0.22, 1);
  --d-fast:    0.35s;
  --d-base:    0.65s;
  --d-slow:    1.1s;

  /* — Layers ------------------------------------------------------------- */
  --z-grain:   9000;
  --z-cursor:  9500;
  --z-nav:     8000;
  --z-menu:    8500;
  --z-loader:  9800;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
}

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
  padding: 0;
}

ul[role='list'], ol[role='list'], .u-list-reset { list-style: none; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-normal);
  letter-spacing: -0.005em;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}

body.is-locked { overflow: hidden; height: 100vh; }

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select { font: inherit; color: inherit; }

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

::selection { background: var(--champagne); color: var(--noir); }

/* Scrollbar — hairline, noir */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--noir); }
::-webkit-scrollbar-thumb { background: var(--slate); }
::-webkit-scrollbar-thumb:hover { background: var(--gunmetal); }

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY PRIMITIVES
   -------------------------------------------------------------------------- */
.t-display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
}

.t-mega {
  font-family: var(--font-display);
  font-size: var(--fs-mega);
  line-height: 0.86;
  letter-spacing: var(--tr-mega);
  font-weight: 400;
}

.t-h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tr-mega); }
.t-h2 { font-size: var(--fs-h2); line-height: 0.94; letter-spacing: var(--tr-tight); }
.t-h3 { font-size: var(--fs-h3); line-height: 1.02; letter-spacing: var(--tr-tight); }
.t-h4 { font-size: var(--fs-h4); line-height: 1.12; letter-spacing: -0.02em; }
.t-lead {
  font-size: var(--fs-lead);
  line-height: 1.42;
  font-weight: 200;
  letter-spacing: -0.015em;
  color: var(--fg-muted);
}
.t-body   { font-size: var(--fs-body); color: var(--fg-muted); }
.t-body-s { font-size: var(--fs-body-s); line-height: var(--lh-loose); color: var(--fg-muted); }

.t-italic { font-style: italic; }
.t-serif  { font-family: var(--font-display); font-weight: 400; }
.t-thin   { font-weight: 200; }
.t-light  { font-weight: 300; }
.t-med    { font-weight: 500; }

.t-label {
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-dim);
  line-height: 1;
}
.t-label--light { color: var(--fg-muted); }
.t-label--accent { color: var(--accent); }

.t-num {
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
}

.t-accent { color: var(--accent); }
.t-muted  { color: var(--fg-muted); }
.t-dim    { color: var(--fg-dim); }

.t-balance { text-wrap: balance; }
.t-pretty  { text-wrap: pretty; }

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--wide { max-width: none; }
.shell--narrow { max-width: 1180px; }

.section { position: relative; padding-block: var(--sec-y); }
.section--sm { padding-block: var(--sec-y-sm); }
.section--flush { padding-block: 0; }
.section--top { padding-block: var(--sec-y) 0; }

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
}

.rule {
  height: 1px;
  width: 100%;
  background: var(--hairline);
  border: 0;
}

/* Section eyebrow — index + label on a hairline */
.eyebrow {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: clamp(2rem, 1rem + 3vw, 4.5rem);
}
.eyebrow__idx { font-variant-numeric: tabular-nums; }
.eyebrow__meta { margin-left: auto; text-align: right; }

/* --------------------------------------------------------------------------
   5. UTILITIES
   -------------------------------------------------------------------------- */
.u-vh    { min-height: 100svh; }
.u-rel   { position: relative; }
.u-hide  { display: none !important; }
.u-nowrap{ white-space: nowrap; }
.u-center{ text-align: center; }
.u-right { text-align: right; }
.u-upper { text-transform: uppercase; }
.u-mono-num { font-variant-numeric: tabular-nums; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.u-clip { overflow: hidden; }

/* Masked line for text reveals */
.line-mask { display: block; overflow: hidden; }
.line-mask > span { display: block; will-change: transform; }

/* --------------------------------------------------------------------------
   6. MEDIA PRIMITIVES
   -------------------------------------------------------------------------- */
.media {
  position: relative;
  overflow: hidden;
  background: var(--charcoal);
  isolation: isolate;
}
.media > img,
.media > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media--fill { position: absolute; inset: 0; }

/* Ratios */
.r-1-1   { aspect-ratio: 1 / 1; }
.r-4-5   { aspect-ratio: 4 / 5; }
.r-3-4   { aspect-ratio: 3 / 4; }
.r-2-3   { aspect-ratio: 2 / 3; }
.r-16-9  { aspect-ratio: 16 / 9; }
.r-3-2   { aspect-ratio: 3 / 2; }
.r-21-9  { aspect-ratio: 21 / 9; }
.r-9-16  { aspect-ratio: 9 / 16; }

/* Cinematic vignette + gradient scrims */
.scrim::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5,5,5,0.85) 0%, rgba(5,5,5,0.25) 38%, rgba(5,5,5,0) 68%);
  pointer-events: none;
  z-index: 1;
}
.scrim--full::after {
  background:
    linear-gradient(to top, rgba(5,5,5,0.90) 0%, rgba(5,5,5,0.30) 45%, rgba(5,5,5,0.15) 100%),
    radial-gradient(120% 90% at 50% 45%, rgba(5,5,5,0) 40%, rgba(5,5,5,0.65) 100%);
}
.scrim--soft::after {
  background: linear-gradient(to top, rgba(5,5,5,0.62) 0%, rgba(5,5,5,0) 55%);
}

/* Reveal clip used by JS (GSAP animates --rv) */
.rv { clip-path: inset(0 0 100% 0); }

/* Images fade in when decoded */
.media img.is-ready,
.media video.is-ready { opacity: 1; }
.media img,
.media video { opacity: 0; transition: opacity 0.8s var(--e-out); }
.no-js .media img, .no-js .media video { opacity: 1; }

/* --------------------------------------------------------------------------
   7. GRAIN + TEXTURE OVERLAY
   -------------------------------------------------------------------------- */
.grain {
  position: fixed;
  inset: -50%;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  will-change: transform;
  animation: grainShift 0.7s steps(1) infinite;
  mix-blend-mode: overlay;
}
@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-4%, 2%); }
  40%  { transform: translate(3%, -3%); }
  60%  { transform: translate(-2%, -2%); }
  80%  { transform: translate(2%, 3%); }
  100% { transform: translate(0, 0); }
}

/* Subtle vertical light sweep applied to dark panels */
.sheen { position: relative; }
.sheen::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(90% 60% at 50% 0%, rgba(214,196,168,0.055) 0%, rgba(5,5,5,0) 65%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   8. MOTION SAFETY
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .grain { animation: none; }
}