/* ============================================================
   ZULU HOOPS DREAM FOUNDATION — "CALLED BY NAME"
   Cinematic design system v1.0
   Drop-in layer. Load AFTER any existing page CSS.
   ------------------------------------------------------------
   Governing idea: the page is LIT, not coloured. Every value
   below is traceable to a real light source or a real material
   in an Elizabeth, NJ gym — waxed maple, cinderblock, sodium
   vapour, navy mesh, glass backboard, printed paper.
   ============================================================ */

/* ---------- 1. MATERIALS & LIGHT ---------- */
:root{
  /* Blacks — three, not one. Depth comes from black having a hue. */
  --court:      #06060A;   /* letterbox bars. Truer black than the page. */
  --ink:        #0B0B10;   /* brand ink, retained */
  --ink-lift:   #14141C;   /* raised surfaces in the dark */

  /* The cool. Lifted from the navy mesh jerseys and floor mats,
     not from a teal-and-orange film LUT. Shadow tint + night plane. */
  --night:      #16233F;
  --night-haze: rgba(22,35,63,.55);

  /* The warm. One brand ember, one lamp, one floor. */
  --ember:      #FF5B1F;   /* brand orange — retained, sacred */
  --sodium:     #FFAD4E;   /* street lamp / clerestory spill */
  --maple:      #C98A4B;   /* waxed floor. Rules and edges on paper. */

  /* Paper. The gallery half of the reel. */
  --paper:      #FFF8EF;   /* brand cream — retained, now a MATERIAL */
  --mount:      #EFE6D8;   /* mount board behind a print */
  --graphite:   #26221D;   /* ink on paper — never pure black on cream */

  /* Light behaviour */
  --halo-ember: 0 0 40px rgba(255,91,31,.42), 0 0 120px rgba(255,91,31,.16);
  --halo-sodium:0 0 32px rgba(255,173,78,.35);
  --edge-dark:  1px solid rgba(255,248,239,.10);
  --edge-paper: 1px solid rgba(38,34,29,.14);

  /* Motion — a camera, not a carousel */
  --ease-lens:  cubic-bezier(.16,.84,.24,1);   /* dolly / focus pull   */
  --ease-cut:   cubic-bezier(.65,0,.35,1);     /* hard cut             */
  --t-cut:      160ms;
  --t-gesture:  420ms;
  --t-dolly:    900ms;
  --t-drift:    18s;

  /* Measure & rhythm */
  --gutter:     clamp(20px, 4vw, 64px);
  --max:        1440px;
  --measure:    64ch;
}

/* ---------- 2. TYPE ---------- */
/* Three voices, three jobs, no overlap.
   ARCHIVO (variable wdth 62–125 / wght 100–900) — the institution.
     Replaces Bebas Neue and Archivo Black in one continuous family;
     wdth 68 gives the scoreboard, wght 900 gives the brand.
   INSTRUMENT SERIF — the human voice. Names, quotes, captions.
   INTER — reading copy only.
   Deliberately no monospace. Exhibition captions in serif italic
   read expensive; mono reads like a dashboard. */

.zc-voice{
  font-family:'Instrument Serif', Georgia, serif;
  font-weight:400; letter-spacing:-.015em; line-height:1.02;
}
.zc-voice em, .zc-italic{ font-style:italic; }

.zc-plate{
  font-family:'Archivo', system-ui, sans-serif;
  font-weight:700; font-stretch:70%;
  font-variation-settings:'wdth' 70, 'wght' 700;
  letter-spacing:.02em; text-transform:none;
}
.zc-brand{
  font-family:'Archivo', system-ui, sans-serif;
  font-weight:900; font-stretch:100%;
  font-variation-settings:'wdth' 100, 'wght' 900;
  letter-spacing:-.03em; line-height:.9;
}
.zc-read{
  font-family:'Inter', system-ui, sans-serif;
  font-size:clamp(16px,1.05vw,17.5px); line-height:1.62;
  max-width:var(--measure);
}

/* Modular scale, perfect fourth (1.333), fluid at the display end */
.zc-t1{ font-size:clamp(52px, 9.5vw, 168px); line-height:.92; }
.zc-t2{ font-size:clamp(36px, 5.2vw, 82px);  line-height:1.0;  }
.zc-t3{ font-size:clamp(26px, 2.8vw, 42px);  line-height:1.12; }
.zc-t4{ font-size:clamp(19px, 1.5vw, 24px);  line-height:1.3;  }
.zc-fine{ font-size:13px; line-height:1.45; letter-spacing:.01em; }

/* Tabular figures wherever a number is a record, not a word */
.zc-figures{ font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1; }

/* ---------- 3. ATMOSPHERE ---------- */
/* Grain lives on one fixed overlay for the whole document, so it never
   scrolls with content — exactly like grain sits on a projected image,
   not on the scene. Animated at ~8fps: film, not television. */
.zc-grain{
  position:fixed; inset:-120px; z-index:9998; pointer-events:none;
  opacity:.055; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  animation:zc-grain-shift 1s steps(6) infinite;
}
@keyframes zc-grain-shift{
  0%{transform:translate3d(0,0,0)}      16%{transform:translate3d(-14px,7px,0)}
  33%{transform:translate3d(9px,-12px,0)} 50%{transform:translate3d(-7px,-6px,0)}
  66%{transform:translate3d(12px,9px,0)}  83%{transform:translate3d(-11px,4px,0)}
}

/* Gate weave — the near-imperceptible vertical drift of film in a
   projector gate. 0.4px. You feel it; you don't see it. */
.zc-weave{ animation:zc-weave 6.5s ease-in-out infinite; }
@keyframes zc-weave{
  0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(.3px,-.4px,0)}
}

/* Haze — dust hanging in a light shaft. Sits behind content. */
.zc-haze{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(60% 45% at 70% 10%, rgba(255,173,78,.16), transparent 62%),
    radial-gradient(80% 60% at 12% 90%, var(--night-haze), transparent 70%);
}

/* ---------- 4. THE FRAME ---------- */
/* Letterbox is a device, not decoration: it tells you when you are
   inside the film and when you are looking at a printed page. */
.zc-frame{
  position:relative; width:100%; aspect-ratio:2.39/1;
  overflow:hidden; background:var(--court);
}
.zc-frame > img, .zc-frame > video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
.zc-frame--tall{ aspect-ratio:4/5; }
.zc-frame--academy{ aspect-ratio:4/3; }

/* Grade: pulls documentary gym fluorescents toward a lit-stage read.
   Applied only to frames, never to prints. */
.zc-grade{
  filter:contrast(1.1) saturate(.92) brightness(.86);
}
.zc-grade--night{
  filter:contrast(1.18) saturate(.78) brightness(.6) sepia(.08);
}

/* Halation — light bleeding past its own edge. Replaces box-shadow
   everywhere. Nothing on this site casts a grey drop shadow. */
.zc-lit{ text-shadow:var(--halo-ember); }
.zc-lit-soft{ text-shadow:var(--halo-sodium); }

/* Bars that can open. The one orchestrated page-load moment. */
.zc-bar{
  position:absolute; left:0; right:0; height:14vh; background:var(--court);
  z-index:6; pointer-events:none;
  transition:height 1600ms var(--ease-lens);
}
.zc-bar--top{ top:0; } .zc-bar--bottom{ bottom:0; }
.zc-open .zc-bar{ height:5.5vh; }

/* ---------- 5. MOTION SIGNATURE: EXPOSURE ---------- */
/* Content does not slide up and fade in. It comes up like an image in
   a developer tray — over-bright and unresolved, then finding focus.
   One per section. Never on every child. */
.expose{
  opacity:0; filter:blur(14px) brightness(2.6) contrast(.6);
  transform:scale(1.012);
  transition:
    opacity var(--t-dolly) var(--ease-lens),
    filter 1300ms var(--ease-lens),
    transform 1500ms var(--ease-lens);
  will-change:opacity,filter,transform;
}
.expose.lit{ opacity:1; filter:blur(0) brightness(1) contrast(1); transform:none; }
.expose.d1{ transition-delay:120ms } .expose.d2{ transition-delay:260ms }
.expose.d3{ transition-delay:400ms } .expose.d4{ transition-delay:560ms }

/* Rule that draws itself — used under names and chapter heads */
.zc-rule{
  height:1px; width:0; background:var(--ember); box-shadow:var(--halo-ember);
  transition:width 1100ms var(--ease-lens) 200ms;
}
.lit > .zc-rule, .zc-rule.lit{ width:100%; }

/* ---------- 6. GROUNDS ---------- */
.zc-dark{ background:var(--ink); color:var(--paper); position:relative; }
.zc-black{ background:var(--court); color:var(--paper); position:relative; }
.zc-paper{ background:var(--paper); color:var(--graphite); position:relative; }
.zc-paper ::selection{ background:var(--ember); color:var(--paper); }
::selection{ background:var(--ember); color:#fff; }

/* Print mount — how a bright documentary photo becomes an object worth
   looking at: air around it, board behind it, a caption in serif italic.
   No filter is applied. The photograph is not the problem. */
.zc-print{
  background:var(--mount); padding:clamp(14px,1.6vw,26px);
  box-shadow:0 1px 0 rgba(38,34,29,.16), 0 18px 40px -28px rgba(38,34,29,.5);
}
.zc-print img{ display:block; width:100%; height:100%; object-fit:cover; }
.zc-caption{
  font-family:'Instrument Serif', Georgia, serif; font-style:italic;
  font-size:15px; line-height:1.4; color:rgba(38,34,29,.62); margin-top:12px;
}

/* ---------- 7. STRUCTURE ---------- */
.zc-wrap{ max-width:var(--max); margin:0 auto; padding-inline:var(--gutter); }
.zc-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gutter); }
.zc-sec{ padding-block:clamp(88px,11vh,180px); }

/* ---------- 8. CONTROLS ---------- */
.zc-act{
  display:inline-block; padding:15px 30px 14px; border-radius:2px;
  background:var(--ember); color:#fff; text-decoration:none;
  font-family:'Archivo',system-ui,sans-serif;
  font-weight:700; font-stretch:88%;
  font-variation-settings:'wdth' 88,'wght' 700; font-size:15px;
  letter-spacing:.01em; box-shadow:var(--halo-ember);
  transition:box-shadow var(--t-gesture) var(--ease-lens),
             transform var(--t-cut) var(--ease-cut);
}
.zc-act:hover{ transform:translateY(-1px); box-shadow:0 0 60px rgba(255,91,31,.6),0 0 160px rgba(255,91,31,.22); }
.zc-act--quiet{
  background:transparent; color:inherit; box-shadow:none;
  border-bottom:1px solid currentColor; border-radius:0; padding:2px 0 4px;
}
.zc-act--quiet:hover{ color:var(--ember); box-shadow:none; transform:none; }

/* Focus is visible and on-brand, everywhere */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--sodium); outline-offset:4px; border-radius:2px;
}

/* ---------- 9. REDUCED MOTION ---------- */
/* The film becomes a photograph. Nothing is withheld. */
@media (prefers-reduced-motion:reduce){
  .expose{ opacity:1; filter:none; transform:none; transition:none; }
  .zc-rule{ width:100%; transition:none; }
  .zc-grain{ animation:none; }
  .zc-weave{ animation:none; }
  .zc-bar{ transition:none; height:5.5vh; }
  *{ scroll-behavior:auto !important; }
}