/* =====================================================================
   HOLLYWOOD CARES FOUNDATION — Design System
   Core: tokens, concept palettes, reset, typography, utilities
   ===================================================================== */

@import url("components.css");
@import url("home.css");
@import url("subpage.css");
@import url("cinematic.css");

/* ------------------------------------------------------------------ */
/*  TOKENS — base / shared                                             */
/* ------------------------------------------------------------------ */
:root {
  --font-sans: "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --shell: clamp(20px, 5.5vw, 120px);   /* page side padding */
  --maxw: 1560px;
  --ticker-h: 40px;

  --r-sm: 0px;
  --r-md: 0px;
  --r-lg: 0px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --dur: 0.6s;

  color-scheme: light;
}

/* ------------------------------------------------------------------ */
/*  BRAND — Hollywood Cares (primary #2596be)                          */
/* ------------------------------------------------------------------ */
:root,
:root[data-concept="sunrise"],
:root[data-concept="meadow"],
:root[data-concept="civic"] {
  --paper:        #F5F8FA;
  --paper-warm:   #E5EEF2;
  --ink:          #0E1519;
  --muted:        #5C6B72;
  --line:         color-mix(in srgb, var(--ink) 13%, transparent);

  --accent:       #60CBED;          /* brand primary */
  --accent-2:     #2596be;          /* deeper brand blue (secondary) */
  --accent-deep:  #176f8f;          /* deepest, for fills needing white text */
  --on-accent:    #04242E;          /* dark ink reads on brand fills */
  --cyan:         var(--accent);    /* legacy alias used by inline styles */

  --dark:         #0B1418;          /* deep blue-charcoal */
  --dark-2:       #111E24;
  --on-dark:      #E9F1F4;
  --muted-on-dark: color-mix(in srgb, var(--on-dark) 60%, transparent);
  --line-on-dark:  color-mix(in srgb, var(--on-dark) 16%, transparent);

  --hero-tint:    radial-gradient(120% 90% at 80% 10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%);
}

/* ------------------------------------------------------------------ */
/*  RESET                                                              */
/* ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;
  transition: background 0.5s var(--ease), color 0.5s var(--ease);
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; }
::selection { background: var(--accent); color: var(--on-accent); }

/* ------------------------------------------------------------------ */
/*  TYPOGRAPHY                                                         */
/* ------------------------------------------------------------------ */
.display-xl, .display-lg, .display-md, .display-sm {
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.96;
  text-wrap: balance;
}
.display-xl { font-size: clamp(3.2rem, 11vw, 11rem); letter-spacing: -0.045em; }
.display-lg { font-size: clamp(2.6rem, 6.4vw, 5.6rem); line-height: 0.98; }
.display-md { font-size: clamp(2.1rem, 4.6vw, 4rem); line-height: 1.0; }
.display-sm { font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.05; letter-spacing: -0.025em; }

em.italic, .italic { font-style: italic; }
.accent { color: var(--accent); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--accent);
  display: inline-block;
}
.eyebrow--plain::before { display: none; }

.dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  flex: none;
}

/* ------------------------------------------------------------------ */
/*  LAYOUT                                                             */
/* ------------------------------------------------------------------ */
.shell {
  padding-inline: var(--shell);
  max-width: var(--maxw);
  margin-inline: auto;
}
.section {
  padding-block: clamp(72px, 11vw, 200px);
  position: relative;
}
/* first section sits closer to the hero's angled cut */
.hero + .section { padding-top: clamp(60px, 6.5vw, 120px); margin-top: clamp(-40px, -2.4vw, -24px); }
.section--paper-warm { background: var(--paper-warm); }
.section--tight-top { padding-top: clamp(16px, 2vw, 32px); }
.section--tight-bottom { padding-bottom: clamp(72px, 8vw, 130px); }
.section--flush-bottom { padding-bottom: 0; }
.section--dark {
  background: var(--dark);
  color: var(--on-dark);
}
.section--dark .eyebrow { color: var(--muted-on-dark); }
.section--dark .section-head__num { color: var(--on-dark); }

.section-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 36px);
  margin-bottom: clamp(44px, 6vw, 92px);
  max-width: 1100px;
}
.section-head__num {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-head__num span:first-child { color: var(--accent); }

/* reveal-on-scroll base state (JS adds .is-in) */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(6px);
  transition: opacity 1s var(--ease-out), transform 1.05s var(--ease-out), filter 1s var(--ease-out);
  will-change: opacity, transform, filter;
}
.reveal.is-in { opacity: 1; transform: none; filter: none; }

/* staggered children — title/text rise in sequence as the block enters */
.reveal[data-stagger] {
  opacity: 1;
  transform: none;
  filter: none;
  will-change: auto;
}
.reveal[data-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(6px);
  transition: opacity 0.9s var(--ease-out), transform 0.95s var(--ease-out), filter 0.9s var(--ease-out);
}
.reveal[data-stagger].is-in > * { opacity: 1; transform: none; filter: none; }
.reveal[data-stagger].is-in > *:nth-child(1) { transition-delay: 0.02s; }
.reveal[data-stagger].is-in > *:nth-child(2) { transition-delay: 0.13s; }
.reveal[data-stagger].is-in > *:nth-child(3) { transition-delay: 0.24s; }
.reveal[data-stagger].is-in > *:nth-child(4) { transition-delay: 0.35s; }
.reveal[data-stagger].is-in > *:nth-child(5) { transition-delay: 0.46s; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal, .reveal[data-stagger] > * { opacity: 1; transform: none; filter: none; }
}

/* ------------------------------------------------------------------ */
/*  ACCENT CONTRAST — bright cyan (#60CBED) on dark; deeper blue       */
/*  (#2596be) for small accent TEXT on light surfaces for legibility  */
/* ------------------------------------------------------------------ */
body .section:not(.section--dark) .section-head__num span:first-child,
body .section:not(.section--dark) .accent,
body .section:not(.section--dark) em.accent,
body .story__tag,
body .news-item__num,
body .partner-item__num,
body .pillar__num + h3,
body .map-coords b,
body .wwd-intro__lead strong,
body .wwd-stat__num em,
body .tag .dot,
body .featured__content .lead strong,
body .pillar-row__num {
  color: var(--accent-2);
}
/* keep the accent dot/line markers visible on light too */
body .section:not(.section--dark) .eyebrow::before { background: var(--accent-2); }