/* =======================
   CORY – OVERRIDES START
   ======================= */


:root {
  /* Backgrounds */
  --bg-primary: #0b1f26;        /* deep teal / blueprint base */
  --bg-secondary: #102e38;      /* section panels */
  --bg-grid: #0e2a33;           /* grid tile base */

  /* Grid lines */
  --grid-line-major: rgba(255,255,255,0.08);
  --grid-line-minor: rgba(255,255,255,0.03);

  /* Text */
  --text-primary: #e6f6fb;
  --text-secondary: #9cc9d6;
  --text-muted: #6fa3b3;

  /* Heading glow */
  --heading-accent: #4fd1ff;

  /* Neon infographic colors */
  --neon-red:    #ff2d55;  /* PVC */
  --neon-orange: #ff8c1a;  /* Vinyl / PP */
  --neon-yellow: #ffd166;  /* HDPE */
  --neon-green:  #4cd964;  /* PET */
  --neon-teal:   #2dd4bf;  /* PS */
  --neon-blue:   #1fb6ff;  /* Nylon */
  --neon-indigo: #3b82f6;  /* PC */
  --neon-pink:   #ff2aa1;  /* Aluminum */
}

body {
  color: var(--text-primary);
  background-color: var(--bg-primary);

  /* Double grid (minor + major) */
  background-image:
    linear-gradient(var(--grid-line-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-minor) 1px, transparent 1px),
    linear-gradient(var(--grid-line-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-major) 1px, transparent 1px);

  background-size:
    20px 20px,
    20px 20px,
    100px 100px,
    100px 100px;

  background-position: center;
}

/* OPTIONAL: plus overlay (requires an svg tile)
   Add this if you want the GRIDandPLUS vibe:
   body { position: relative; }
*/
body::after{
  content:"";
  pointer-events:none;
  position:fixed;
  inset:0;
  opacity:.9;
  mix-blend-mode: screen;
  background-image: url("assets/img/bg-grid-plus.svg");
  background-repeat: repeat;
  background-size: 240px 240px;
}

/* Panels / cards */
.card,
.work-card,
.stat-card {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.06),
    rgba(255,255,255,0.02)
  );
  border: 1px solid rgba(79,209,255,0.25);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.6),
    0 12px 40px rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  border-radius: 18px;
}

/* Section titles */
.section-title {
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--heading-accent);
  text-transform: uppercase;
}

.section-title span {
  color: var(--text-primary);
}

/* Helpful text utilities */
.text-secondary { color: var(--text-secondary) !important; }
.text-muted { color: var(--text-muted) !important; }







:root {
  --bg-primary: #0b1f26;        /* deep teal / blueprint base */
  --bg-secondary: #102e38;      /* section panels */
  --bg-grid: #0e2a33;           /* grid tile base */

  --grid-line-major: rgba(255,255,255,0.08);
  --grid-line-minor: rgba(255,255,255,0.03);
}

:root {
  --neon-red:    #ff2d55;   /* PVC */
  --neon-orange:#ff8c1a;   /* Vinyl / PP */
  --neon-yellow:#ffd166;   /* HDPE */
  --neon-green: #4cd964;   /* PET */
  --neon-teal:  #2dd4bf;   /* PS */
  --neon-blue:  #1fb6ff;   /* Nylon */
  --neon-indigo:#3b82f6;   /* PC */
  --neon-pink:  #ff2aa1;   /* Aluminum */
}

:root {
  --text-primary: #e6f6fb;
  --text-secondary: #9cc9d6;
  --text-muted: #6fa3b3;

  --heading-accent: #4fd1ff; /* matches chart glow */
}


body {
  background-color: var(--bg-primary);
  background-image:
    linear-gradient(var(--grid-line-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-minor) 1px, transparent 1px),
    linear-gradient(var(--grid-line-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-major) 1px, transparent 1px);
  background-size:
    20px 20px,
    20px 20px,
    100px 100px,
    100px 100px;
  background-position: center;
}

body.theme-infographic > * { z-index: 1; }


.card,
.work-card,
.stat-card {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.06),
    rgba(255,255,255,0.02)
  );
  border: 1px solid rgba(79,209,255,0.25);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.6),
    0 12px 40px rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
}

.section-title {
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--heading-accent);
  text-transform: uppercase;
}

.section-title span {
  color: var(--text-primary);
}

const neonColors = [
  "#ff2d55",
  "#ff8c1a",
  "#ffd166",
  "#4cd964",
  "#2dd4bf",
  "#1fb6ff",
  "#3b82f6",
  "#ff2aa1"
];

options: {
  plugins: {
    legend: { display: false }
  },
  scales: {
    x: { grid: { color: "rgba(255,255,255,0.05)" } },
    y: { grid: { color: "rgba(255,255,255,0.05)" } }
  }
}

/* --- Parallax plus layers --- */
body.theme-infographic{
  position: relative;
}

/* Important: do NOT apply z-index to the parallax layers */
body.theme-infographic > *:not(.parallax-layer){
  position: relative;
  z-index: 2;
}

/* Base parallax layer behavior */
.parallax-layer{
  pointer-events: none;
  position: fixed;
  inset: -30vh 0 0 0;   /* extra height so edges never appear */
  z-index: 1;           /* above background, below content */
  mix-blend-mode: screen;
  will-change: transform;
  transform: translate3d(0,0,0);
  background-repeat: repeat;
  background-image: url("../img/bg-grid-plus.svg"); /* custom.css is /assets/css */
}

/* Far layer: subtle + bigger tile */
.parallax-layer.layer-far{
  opacity: .35;
  background-size: 320px 320px;
  filter: blur(.15px);
}

/* Near layer: brighter + tighter tile */
.parallax-layer.layer-near{
  opacity: .75;
  background-size: 200px 200px;
  filter: blur(0px);
}

/* DEBUG helper (optional): uncomment to force visibility while testing */
/*
.parallax-layer{
  outline: 2px solid rgba(255,0,0,.35);
  opacity: 1 !important;
}
*/



/* 2.1 Tokens (safe overrides) */
:root{
  /* brand palette – keep in sync with tokens.json when you finalize */
  --c-primary: #0EA5E9;   /* cyan */
  --c-secondary:#7C3AED;  /* violet */
  --c-accent: #F59E0B;    /* amber */
  --c-surface: #0B1220;   /* deep night bg for cards in dark blocks */
  --c-ink: #0F172A;       /* body text (light mode) */
  --c-ink-soft:#5B677A;
  --c-border:#E6EAF0;
  --c-glow: rgba(14,165,233,.35);
}

/* 2.2 Typography */
html { scroll-behavior: smooth; }
body{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--c-ink);
}
.h1, h1, .heading-xl { letter-spacing: .5px; }
.h2, h2 { letter-spacing: .3px; }
.h3, h3 { letter-spacing: .2px; }
.lead { color: var(--c-ink-soft); }

/* 2.3 Buttons (boost the “flashy” feel) */
.btn-primary{
  --bs-btn-bg: linear-gradient(180deg, #22D3EE 0%, #0EA5E9 100%);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: linear-gradient(180deg, #38BDF8 0%, #0284C7 100%);
  --bs-btn-active-bg: #0284C7;
  box-shadow: 0 10px 24px rgba(14,165,233,.35);
  color: #00121E;
  font-weight: 700;
  letter-spacing: .25px;
}
.btn-outline{
  border: 1px solid var(--c-border);
  color: var(--c-ink-soft);
}
.btn-outline:hover{
  border-color: var(--c-primary);
  color: var(--c-primary);
}

/* 2.4 Filter pills (Work section) */
.filter-btn{
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  padding: .4rem .9rem;
  box-shadow: 0 6px 16px rgba(15,23,42,.06);
  transition: transform .12s ease, box-shadow .12s ease, color .12s ease, border-color .12s ease, background .12s ease;
}
.filter-btn:hover,
.filter-btn.is-active{
  border-color: var(--c-primary);
  color: #074E68;
  box-shadow: 0 10px 24px var(--c-glow);
  transform: translateY(-1px);
  background: radial-gradient(120% 120% at 20% 0%, rgba(34,211,238,.18) 0%, rgba(14,165,233,.08) 40%, rgba(255,255,255,.9) 100%);
}

/* 2.5 Cards (work tiles) */
.card.work-tile{
  border: 1px solid var(--c-border);
  border-radius: 16px;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow: 0 1px 0 rgba(15,23,42,.02), 0 8px 28px rgba(2,132,199,.06);
  background: #fff;
}
.card.work-tile:hover{
  transform: translateY(-3px);
  border-color: rgba(14,165,233,.45);
  box-shadow: 0 14px 36px rgba(14,165,233,.22);
}
.card.work-tile .card-img-top{
  aspect-ratio: 16/9;
  object-fit: cover;
}

/* 2.6 Horizontal scroller (index Work section) */
.work-section .scroller{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 340px);
  gap: 20px;
  overflow-x: auto;
  padding: 8px 4px 16px;
  scroll-snap-type: x mandatory;
}
.work-section .scroller > *{
  scroll-snap-align: start;
}
.work-section .scroller::-webkit-scrollbar{ height: 10px; }
.work-section .scroller::-webkit-scrollbar-thumb{
  background: linear-gradient(90deg, #22D3EE, #7C3AED);
  border-radius: 999px;
}

/* 2.7 Before/After slider chrome (if present) */
.before-after{
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(2,132,199,.18);
  border: 1px solid var(--c-border);
}

/* 2.8 Section frames (light mode) */
.section-pad{ padding: 3.5rem 0; }
.section-bg{ background: #F7F9FB; border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); }

/* 2.9 Chart legends & colors (just CSS not JS) */
.chart-legend .swatch{ width: 12px; height: 12px; border-radius: 3px; display:inline-block; margin-right:8px; }
.swatch--design{ background:#22D3EE; }
.swatch--frontend{ background:#7C3AED; }
.swatch--branding{ background:#F59E0B; }

/* 2.10 Small utilities */
.glow{ box-shadow: 0 0 0 8px var(--c-glow); }
.kb{ border: 1px dashed rgba(14,165,233,.5); border-radius: 8px; padding: 6px 10px; font-size: 12px; color: #0EA5E9; }

/* --- Charts polish --- */
.chart-split{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap: 1.25rem;
  align-items:center;
}
.chart-legend{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  font: 500 14px/1.25 Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.chart-legend .item{
  display:flex; align-items:center; gap:.5rem;
}
.chart-legend .dot{
  width:12px; height:12px; border-radius:50%;
  box-shadow:0 0 0 2px rgba(255,255,255,.15) inset;
}

/* Make big charts breathe on smaller screens */
@media (max-width: 980px){
  .chart-split{ grid-template-columns: 1fr; }
  .chart-legend{ flex-direction:row; flex-wrap:wrap; }
}

/* Optional: brighten bars a touch on hover */
.canvas-hoverable{ transition: filter .25s ease; }
.canvas-hoverable:hover{ filter: brightness(1.05) saturate(1.05); }

/* --- Before/After --- */
.ba{
  position:relative; max-width: 960px; margin-inline:auto;
  border-radius: 14px; overflow:hidden; box-shadow: 0 10px 40px rgba(0,0,0,.08);
}
.ba__img{ display:block; width:100%; height:auto; user-select:none; pointer-events:none; }
.ba__img--before{ position:absolute; inset:0; clip-path: inset(0 50% 0 0) }
.ba__slider{
  position:absolute; inset:0; width:100%;
  appearance:none; background: transparent; cursor: ew-resize;
}
.ba__slider::-webkit-slider-thumb{
  appearance:none; width: 1px; height: 420px; background: transparent;
}
.ba__handle{
  position:absolute; top:50%; left:50%; translate:-50% -50%;
  width: 2px; height: 100%; background: rgba(255,255,255,.85);
  box-shadow: 0 0 0 1px rgba(13,39,69,.35), 0 0 0 6px rgba(13,39,69,.08);
}
.ba__label{
  position:absolute; top: 12px; font: 800 12px/1 Bebas Neue, Montserrat, sans-serif;
  letter-spacing:.08em; padding:.25rem .5rem; border-radius: 6px;
  background: rgba(13,39,69,.75); color:#fff;
}
.ba__label--left{ left: 12px; }
.ba__label--right{ right: 12px; }

/* PLUS overlay layer (separate from grid background) */
.plus-layer{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  opacity: .85;
  mix-blend-mode: screen;

  background-image: url("assets/img/bg-plus-tile.svg");
  background-repeat: repeat;
  background-size: 240px 240px;

  transform: translate3d(0, var(--plus-parallax, 0px), 0);
  will-change: transform;
}

/* Make sure your content sits above the overlay */
body.theme-infographic > *:not(.plus-layer){
  position: relative;
  z-index: 1;
}

/* A readable section card wrapper */
.theme-infographic .section-card{
  background: rgba(16,46,56,.62);
  border: 1px solid rgba(79,209,255,0.18);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.45), 0 18px 50px rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
  border-radius: 22px;
  padding: clamp(1.25rem, 2.2vw, 2rem);
}

/* Make headings + body copy readable on dark */
.theme-infographic .heading{ color: var(--text-primary); }
.theme-infographic .bodycopy{ color: var(--text-secondary); }
.theme-infographic .text-muted{ color: var(--text-muted) !important; }

/* =======================
   CORY – OVERRIDES END
   ======================= */

/* Make plus overlay scroll WITH the page (not fixed) */
body.theme-infographic{ position: relative; }

/* overlay */
/* Body theme */
body.theme-infographic{
  position: relative;
  color: var(--text-primary);
  background-color: var(--bg-primary);

  /* grid stays as the BODY background */
  background-image:
    linear-gradient(var(--grid-line-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-minor) 1px, transparent 1px),
    linear-gradient(var(--grid-line-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-major) 1px, transparent 1px);
  background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;
  background-position: 0 0, 0 0, 0 0, 0 0;
}

/* PLUS overlay (parallax layer) */
.parallax-pluses{
  pointer-events:none;
  position: fixed;
  inset: -20vh 0 0 0;          /* extra height so it doesn’t show edges */
  z-index: 0;
  opacity: .75;
  mix-blend-mode: screen;

  background-image: url("../img/bg-grid-plus.svg");
  background-repeat: repeat;
  background-size: 240px 240px;

  transform: translate3d(0,0,0);
  will-change: transform;
}


/* keep all page content above it */
body.theme-infographic > *{
  position: relative;
  z-index: 1;
}

.theme-infographic .nav-glass{
  background: rgba(11,31,38,.82) !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.theme-infographic .navbar .nav-link{
  color: rgba(230,246,251,.88) !important;
}
.theme-infographic .navbar .nav-link:hover{
  color: var(--heading-accent) !important;
}