/* CDL Production — design tokens
   Drop-in CSS custom properties + keyframes for the website redesign.
   Pair with your framework's styling approach (CSS modules, Tailwind @theme, etc.). */

:root {
  /* ---- color ---- */
  --cdl-bg:            #111317;  /* page background */
  --cdl-bg-deep:       #0d0f12;  /* philosophy band */
  --cdl-surface:       #181b21;  /* cards */
  --cdl-surface-alt:   #1f242c;  /* tag chips */
  --cdl-hairline:      rgba(255,255,255,0.10);
  --cdl-hairline-soft: rgba(255,255,255,0.08);

  --cdl-text:          #f3f4f2;  /* primary */
  --cdl-text-soft:     #aab0b7;  /* hero sub */
  --cdl-text-muted:    #9aa0a8;  /* descriptions */
  --cdl-text-dim:      #7a818a;  /* labels */
  --cdl-text-dimmer:   #6b7178;  /* footer */
  --cdl-nav-idle:      #b9bec4;

  --cdl-green:         #54d98c;  /* "CDL", dev accents, ring 1 */
  --cdl-green-cyan:    #3fd6d6;  /* orbit ring 2 */
  --cdl-green-mint:    #7af0c0;  /* orbit ring 3 */
  --cdl-amber:         #f0c45a;  /* "Production", CTAs, brackets */
  --cdl-amber-deep:    #e0a32e;  /* logo core gradient inner */
  --cdl-ink:           #111317;  /* text on amber buttons */

  /* ---- type ---- */
  --cdl-font-display: 'Newsreader', Georgia, serif;
  --cdl-font-body:    'Hanken Grotesk', system-ui, sans-serif;
  --cdl-font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ---- spacing / radius ---- */
  --cdl-pad-x:        48px;   /* section horizontal padding */
  --cdl-pad-top-page: 150px;  /* inner-page top (clears fixed nav) */
  --cdl-pad-top-hero: 180px;
  --cdl-radius-card:  16px;
  --cdl-radius-lg:    18px;
  --cdl-radius-media: 14px;
  --cdl-radius-input: 12px;
  --cdl-radius-pill:  999px;
  --cdl-radius-chip:  6px;

  /* ---- motion ---- */
  --cdl-ease:         cubic-bezier(.2,.7,.2,1);
}

/* striped media placeholder — replace with real imagery */
.cdl-placeholder {
  background: repeating-linear-gradient(135deg,#1b1f26,#1b1f26 11px,#171a20 11px,#171a20 22px);
}

::selection { background: rgba(240,196,90,0.3); }

/* ---- keyframes ---- */
@keyframes cdlspin   { to { transform: rotate(360deg); } }
@keyframes cdlpulse  { 0%,100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes cdlfloat  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes cdlpage   { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes cdlrise   { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes cdlmarquee{ to { transform: translateX(-50%); } }

/* scroll-reveal: start hidden, add .in (via IntersectionObserver) to play */
.reveal     { opacity: 0; }
.reveal.in  { animation: cdlrise .75s var(--cdl-ease) forwards; }

/* respect reduced-motion — target every actual animated selector explicitly */
@media (prefers-reduced-motion: reduce) {
  /* scroll-reveal: show immediately, no animation */
  .reveal,
  .reveal.in         { opacity: 1 !important; animation: none !important; }

  /* hero stagger elements: show immediately */
  .hero-eyebrow,
  .hero-h1,
  .hero-sub,
  .hero-ctas         { opacity: 1 !important; animation: none !important; }

  /* hero logo accent: stop float */
  .hero-logo-accent  { animation: none !important; }

  /* marquee: pause in place */
  .marquee-inner     { animation: none !important; }

  /* logo orbit (cdlspin) and core orb (cdlpulse) use inline styles;
     override via the SVG element selectors inside logo-svg */
  .logo-svg g,
  .logo-svg circle   { animation: none !important; }

  /* mobile nav drawer: open/close instantly, no max-height slide */
  .nav-mobile-menu,
  .nav-mobile-menu.open { transition: none !important; }

  /* hamburger bar cross animation: instant */
  .nav-toggle-bar    { transition: none !important; }
}