/* ============================================================
   BRAHMASTRA GYM — main.css
   Design tokens · Reset · Base typography · Layout utilities
   ============================================================ */

/* ---------- Design tokens ---------- */
:root{
  /* color */
  --bg-0:        #070708;
  --bg-1:        #0c0c0e;
  --bg-2:        #131316;
  --surface:     #19191c;
  --surface-2:   #202024;
  --line:        rgba(255,255,255,.09);
  --line-2:      rgba(255,255,255,.18);
  --text:        #f4f4f5;
  --text-dim:    #c8c8cd;
  --muted:       #8d8d94;
  --faint:       #5d5d64;
  --accent:      #e50612;
  --accent-hot:  #ff3038;
  --accent-deep: #8e0007;
  --gold:        #d9b36a;
  --grad-red:    linear-gradient(135deg,#ff2029 0%,#e50612 45%,#7c0006 100%);
  --grad-sheen:  linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 55%);

  /* type */
  --font-display:'Oswald',system-ui,sans-serif;
  --font-label:  'Oswald',system-ui,sans-serif;
  --font-body:   'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* shape / rhythm */
  --radius:    16px;
  --radius-sm: 10px;
  --container: 1280px;
  --gutter:    clamp(20px, 4.2vw, 48px);
  --section-y: clamp(84px, 11vw, 168px);
  --header-h:  76px;

  /* motion */
  --ease:   cubic-bezier(.16,1,.3,1);
  --ease-2: cubic-bezier(.6,.01,.12,.95);
  --fast:   180ms;
  --slow:   900ms;

  /* shadows / glow */
  --shadow-1: 0 18px 50px -18px rgba(0,0,0,.8);
  --shadow-2: 0 30px 90px -30px rgba(0,0,0,.9);
  --glow-red: 0 0 0 1px rgba(229,6,18,.4), 0 0 34px rgba(229,6,18,.35);
  --glow-red-soft: 0 12px 60px -12px rgba(229,6,18,.55);

  /* --- Aliases used by the current page templates (kept in sync with above) --- */
  --color-bg:      #070708;
  --color-panel:   #101013;
  --color-graphite:#131316;
  --color-line:    rgba(255,255,255,.09);
  --color-line-2:  rgba(255,255,255,.18);
  --color-text:    #f4f4f5;
  --color-text-dim:#c8c8cd;
  --color-mist:    #8d8d94;
  --color-ash:     #5d5d64;
  --color-red:     #f0142e;
  --color-accent:  #e50612;
  --radius-md:     14px;
  --text-xs:  .75rem;
  --text-sm:  .875rem;
  --text-base: 1rem;
  --text-lg:  1.125rem;
  --text-xl:  1.375rem;
  --text-2:   1.5rem;
  --text-3:   2rem;
  --text-2xl: 2.5rem;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  scroll-padding-top:calc(var(--header-h) + 12px);
}
body{
  font-family:var(--font-body);
  background:var(--bg-0);
  color:var(--text);
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
::selection{ background:var(--accent); color:#fff; }
body.no-scroll{ overflow:hidden; }

/* focus visibility */
:focus-visible{
  outline:2px solid var(--accent-hot);
  outline-offset:3px;
  border-radius:4px;
}

/* scrollbar */
::-webkit-scrollbar{ width:11px; }
::-webkit-scrollbar-track{ background:var(--bg-0); }
::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--surface-2),var(--surface-2));
  border:3px solid var(--bg-0); border-radius:8px;
}
::-webkit-scrollbar-thumb:hover{ background:var(--accent); border:3px solid var(--bg-0); }

/* ---------- Typography ---------- */
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:400; line-height:.98; text-transform:uppercase; letter-spacing:.005em; }
h1{ font-size:clamp(3rem, 11.5vw, 9rem); }
h2{ font-size:clamp(2.2rem, 6vw, 4.6rem); }
h3{ font-size:clamp(1.4rem, 2.8vw, 2.1rem); }
h4{ font-size:1.25rem; }
p{ color:var(--muted); }
strong{ color:var(--text); font-weight:600; }

.eyebrow{
  font-family:var(--font-label);
  font-size:.78rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  gap:12px;
}
.eyebrow::before{
  content:"";
  width:34px; height:1px;
  background:var(--accent);
}
.eyebrow--center{ justify-content:center; }
.eyebrow--center::after{
  content:""; width:34px; height:1px; background:var(--accent);
}
.eyebrow--light{ color:var(--text-dim); }
.display-line{
  display:block;
  overflow:hidden;
}
.display-line > span{
  display:inline-block;
  transform:translateY(112%);
  will-change:transform;
}
.display-line.is-in > span{ transform:translateY(0); transition:transform 1s var(--ease); }
.gradient-text{
  background:var(--grad-red);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.red{ color:var(--accent); }
.muted{ color:var(--muted); }
.dim{ color:var(--text-dim); }
.text-center{ text-align:center; }

/* ---------- Layout ---------- */
.container{
  width:100%;
  max-width:calc(var(--container) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{ position:relative; padding-block:var(--section-y); }
.section--tight{ padding-block:calc(var(--section-y) * .6); }
.section--flush{ padding-block:0; }
.bg-alt{ background:var(--bg-1); }
.bg-deep{ background:var(--bg-0); }

/* section header */
.sec-head{ max-width:760px; margin-bottom:clamp(40px, 6vw, 76px); }
.sec-head h2{ margin-top:18px; }
.sec-head p{ margin-top:18px; max-width:560px; }
.sec-head--center{ margin-inline:auto; text-align:center; }
.sec-head--center p{ margin-inline:auto; }

/* grid helpers */
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,3vw,40px); }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.6vw,34px); }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2.2vw,30px); }
.split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(28px,5vw,72px);
  align-items:center;
}

/* grid aliases used by current templates */
.grid{ display:grid; gap:clamp(20px,3vw,40px); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.6vw,34px); }
.grid--auto{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(16px,2.2vw,30px); }

/* current template section-head structure */
.sec-head__title{ margin-top:18px; }
.sec-head__sub{ margin-top:18px; max-width:560px; }

/* placeholder marker (values not yet set by the owner) */
.is-ph{
  color:var(--color-ash);
  font-style:italic;
  border-bottom:1px dashed var(--color-line-2);
  padding-bottom:2px;
}

/* spacing utilities */
.mt-sm{ margin-top:.6rem; }
.mt-md{ margin-top:1rem; }
.mt-lg{ margin-top:1.75rem; }
.mt-xl{ margin-top:2.75rem; }
.mt-2xl{ margin-top:4rem; }
.mb-lg{ margin-bottom:1.75rem; }

/* images */
.media{ position:relative; overflow:hidden; border-radius:var(--radius); }
.media img,.media svg{ width:100%; height:100%; object-fit:cover; }

/* hidden accessible text */
.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;
}

/* divider line */
.rule{ height:1px; background:var(--line); border:0; }

/* ---------- Reveal system (IntersectionObserver) ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(38px);
  transition:
    opacity .9s var(--ease),
    transform .9s var(--ease);
  transition-delay:var(--d,0s);
  will-change:opacity,transform;
}
[data-reveal="left"]{ transform:translateX(-44px); }
[data-reveal="right"]{ transform:translateX(44px); }
[data-reveal="scale"]{ transform:scale(.9); }
[data-reveal="blur"]{
  filter:blur(10px);
  transform:translateY(24px);
  transition:
    opacity .9s var(--ease),
    transform .9s var(--ease),
    filter .9s var(--ease);
}
[data-reveal].is-in{ opacity:1; transform:none; filter:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  [data-reveal]{ opacity:1; transform:none; filter:none; transition:none; }
  .display-line > span{ transform:none; }
}
