/* ==========================================================================
   Samarth Yuva Foundation · Homepage demos
   base.css: shared by all four pages (index + 3 options)

   HOW TO EDIT
   - Brand colours, fonts, spacing and motion live in :root below.
     Change a value here and every page follows.
   - Each option has its own stylesheet (option-1-stories.css, etc.)
     that only adds that option's look on top of this file.
   - Mobile first: base rules are for phones. Larger screens are added
     with  @media (min-width: 768px)  and  @media (min-width: 1100px).
   ========================================================================== */

/* === 1. Design tokens ==================================================== */
:root {
  /* Brand (from the client colour brief) */
  --orange:        #FF941B;   /* buttons, highlights. Never as text on white */
  --orange-ink:    #A8500A;   /* orange TEXT on light backgrounds (passes AA) */
  --orange-soft:   #FFB35C;   /* orange text on dark backgrounds */
  --charcoal:      #171717;
  --cream:         #FFF3E4;
  --peach:         #FFE0B2;
  --terracotta:    #9A3324;   /* Option 3 only: traditional Warli ground */

  /* Neutrals */
  --ink:           #171717;   /* headings */
  --text:          #3D3D3D;   /* body copy on light */
  --muted:         #5C5C5C;   /* captions on light */
  --line:          #E4E2DE;   /* hairlines on light */
  --paper:         #FBFBFA;   /* light page background */
  --white:         #FFFFFF;

  /* Type */
  --font-display:  "Anek Devanagari", "Mukta", system-ui, sans-serif;
  --font-body:     "Mukta", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Spacing (one rhythm for every page) */
  --gutter:        20px;      /* left/right page margin on phones */
  --stack:         16px;      /* space between stacked items */
  --head-gap:      24px;      /* heading to its content */
  --section:       64px;      /* vertical padding of a section on phones */
  --container:     1240px;

  /* Shape */
  --radius-s:      12px;
  --radius-m:      18px;
  --radius-l:      24px;
  --pill:          999px;
  --line-weight:   2.5px;     /* every illustration line, every page */

  /* Motion (shared curves and durations) */
  --ease-out:      cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:   cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer:   cubic-bezier(0.32, 0.72, 0, 1);
  --t-press:       160ms;
  --t-ui:          250ms;
  --t-reveal:      600ms;

  /* Demo bar height (the thin viewer bar at the very top) */
  --demo-bar:      40px;
}
@media (min-width: 768px) {
  :root { --gutter: 32px; --section: 104px; }
}

/* === 2. Reset ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--demo-bar) + 72px); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  padding-top: var(--demo-bar);
}
img, svg { display: block; max-width: 100%; }
button, input { font: inherit; }
a { color: inherit; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

/* === 3. Layout helpers =================================================== */
.wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding-top: var(--section); padding-bottom: var(--section); }
.stack > * + * { margin-top: var(--stack); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Display type (headings) */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.06;
  color: var(--ink);
}
.h1 { font-size: clamp(36px, 8.6vw, 68px); }
.h2 { font-size: clamp(32px, 6.6vw, 54px); margin-bottom: var(--head-gap); }
.h3 { font-size: clamp(22px, 5vw, 28px); font-weight: 600; }
.marathi { font-family: var(--font-display); font-weight: 500; }

/* Photos: always <img>, so replacing a file in assets/photos updates the page */
.photo { width: 100%; height: 100%; object-fit: cover; }

/* === 4. Buttons (shared shape; colours set per option) =================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 24px;
  border-radius: var(--pill); border: 0;
  font-weight: 700; font-size: 17px; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-ui) var(--ease-out);
}
.btn:active { transform: scale(0.97); }

/* Horizontal chip/scroll rows bleed to the screen edge on phones */
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter); }
.chips::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .chips { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; } }

/* === 5. Demo bar (viewer tool, not part of the website design) =========== */
.demo-bar {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--demo-bar);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 12px;
  background: rgba(20, 20, 20, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  color: #CFCFCF; font: 500 13px/1 var(--font-body);
}
.demo-bar a { color: #CFCFCF; text-decoration: none; }
.demo-bar__home { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }
.demo-bar__label { display: none; color: #8A8A8A; }
.demo-bar__options { display: flex; gap: 4px; }
.demo-bar__options a {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px;
  border-radius: var(--pill); border: 1px solid #3A3A3A;
}
.demo-bar__options a[aria-current="page"] { background: #FFFFFF; color: #171717; border-color: #FFFFFF; }
.demo-bar__options .long { display: none; }
@media (min-width: 768px) {
  .demo-bar { padding: 0 20px; }
  .demo-bar__label { display: inline; }
  .demo-bar__options .long { display: inline; margin-left: 4px; }
}

/* === 6. Motion ============================================================
   Every animation here has a job (feedback, state change or a one-time
   reveal). All of it is switched off for visitors who ask for less motion.
   ========================================================================== */
/* Scroll reveal: elements with .reveal fade up once when they enter view
   (js/common.js adds .is-in). Groups stagger through --i. */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 60ms);
}
/* One-line drawings: one continuous stroke at --line-weight on every
   screen size. A wide hidden copy (.m, inside a mask) carries the
   draw-on animation; js adds .is-in when the drawing scrolls into view. */
.line-art .ln { fill: none; stroke: currentColor; stroke-width: var(--line-weight); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.line-art .m  { fill: none; stroke: #FFFFFF; stroke-width: 44; stroke-linecap: round; stroke-linejoin: round; }
.draw .m { stroke-dasharray: 1; stroke-dashoffset: 1; }
.draw.is-in .m { stroke-dashoffset: 0; transition: stroke-dashoffset 2.2s var(--ease-in-out) 150ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; }
  .draw .m, .draw.is-in .m { stroke-dashoffset: 0; transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .btn:active { transform: none; }
}
/* No-JS fallback: show everything */
.no-js .reveal { opacity: 1; transform: none; }
.no-js .draw .m { stroke-dashoffset: 0; }