/* =====================================================================
   Pundit style guide (from the ClickVid deck)  ·  pundit.css  ·  v1
   One stylesheet for the pitch deck AND the YouTube overlay.
   Import:  <link rel="stylesheet" href="clickvid.css">
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,400..800&family=Schibsted+Grotesk:wght@400..800&family=Martian+Mono:wght@400;600&display=swap");

/* ---------- TOKENS ---------- */
:root {
  /* Brand fields: big, flat, saturated blocks */
  --cv-oxblood: #780016;
  --cv-lilac: #e9c0e9;
  --cv-cobalt: #2665d6;
  --cv-lime: #d2e823;
  --cv-rose: #ff2e7e;
  --cv-orchid: #c42ed6;
  --cv-flame: #f2302f;
  --cv-slate: #5f676b;
  --cv-mauve: #b8a4b2;
  --cv-ink: #1e2330;
  --cv-paper: #ffffff;
  --cv-bone: #f4f1ea;

  /* Overlay surfaces: sit inside the YouTube dark UI */
  --cv-night: #0f0f0f;
  --cv-night-2: #1c1c1c;
  --cv-night-3: #272727;
  --cv-fog: #aaaaaa;
  --cv-mask-fill: rgba(210, 232, 35, 0.16);

  /* Type */
  --font-display: "Bricolage Grotesque", "Schibsted Grotesk", system-ui, sans-serif;
  --font-body: "Schibsted Grotesk", system-ui, sans-serif;
  --font-mono: "Martian Mono", ui-monospace, monospace;

  /* Space (8px rhythm) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Radius: everything is soft */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 32px;
  --radius-xl: 48px;
  --radius-pill: 999px;

  /* Motion */
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 180ms;
  --dur-med: 420ms;
  --dur-slow: 900ms;
}
/* ---------- END TOKENS ---------- */

/* ---------- Type ---------- */
.cv-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: "opsz" 96, "wdth" 88;
  letter-spacing: -0.045em;
  line-height: .9;
  margin: 0;
}
.cv-h1 { font-family: var(--font-display); font-weight: 800; font-variation-settings: "opsz" 96, "wdth" 90; letter-spacing: -0.04em; line-height: .95; margin: 0; }
.cv-h2 { font-family: var(--font-display); font-weight: 750; font-variation-settings: "opsz" 48; letter-spacing: -0.03em; line-height: 1; margin: 0; }
.cv-h3 { font-family: var(--font-display); font-weight: 700; font-variation-settings: "opsz" 24; letter-spacing: -0.015em; line-height: 1.1; margin: 0; }
.cv-body { font-family: var(--font-body); font-weight: 450; line-height: 1.45; }
.cv-label { font-family: var(--font-body); font-weight: 650; font-size: 13px; letter-spacing: .02em; }
.cv-mono { font-family: var(--font-mono); font-size: .85em; }

/* ---------- Wordmark ---------- */
.cv-mark { display: inline-flex; align-items: center; gap: .32em; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.04em; font-variation-settings: "opsz" 48; color: var(--cv-ink); line-height: 1; }
.cv-mark__glyph { width: 1.05em; height: 1.05em; flex: none; }

/* ---------- Buttons ---------- */
.cv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font: 650 17px/1 var(--font-body);
  padding: 18px 34px; border-radius: var(--radius-pill); border: 0; cursor: pointer;
  background: var(--cv-ink); color: var(--cv-paper); text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-pop), filter var(--dur-fast);
}
.cv-btn:hover { transform: translateY(-2px) scale(1.02); filter: brightness(1.06); }
.cv-btn:active { transform: scale(.97); }
.cv-btn:focus-visible { outline: 3px solid var(--cv-lime); outline-offset: 3px; }
.cv-btn--lime { background: var(--cv-lime); color: var(--cv-ink); }
.cv-btn--lilac { background: var(--cv-lilac); color: var(--cv-ink); }
.cv-btn--paper { background: var(--cv-paper); color: var(--cv-ink); }
.cv-btn--sm { font-size: 14px; padding: 10px 18px; }

/* ---------- Handle pill  (the "/averyclothing" pill) ---------- */
.cv-handle {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--cv-paper); color: var(--cv-ink);
  font: 500 26px/1 var(--font-body); letter-spacing: -0.01em;
  padding: 20px 30px 20px 22px; border-radius: var(--radius-pill);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.cv-handle svg { width: 28px; height: 28px; }

/* ---------- Chips ---------- */
.cv-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font: 650 13px/1 var(--font-body); letter-spacing: .02em;
  padding: 8px 14px; border-radius: var(--radius-pill);
  background: var(--cv-paper); color: var(--cv-ink);
}
.cv-chip--lime { background: var(--cv-lime); }
.cv-chip--flame { background: var(--cv-flame); color: var(--cv-paper); }
.cv-chip--ghost { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; color: inherit; }
.cv-chip--night { background: var(--cv-night-3); color: #f1f1f1; }

/* ---------- Nav pill (white rounded bar) ---------- */
.cv-nav {
  display: flex; align-items: center; gap: var(--space-6);
  background: var(--cv-paper); border-radius: var(--radius-pill);
  padding: 14px 14px 14px 40px; box-shadow: 0 2px 0 rgba(0,0,0,.04);
}
.cv-nav__links { display: flex; gap: var(--space-6); font: 500 18px var(--font-body); color: var(--cv-ink); }
.cv-nav__spacer { flex: 1; }

/* ---------- Cards (big flat colour slabs) ---------- */
.cv-card {
  position: relative; border-radius: var(--radius-lg); padding: var(--space-6);
  background: var(--cv-flame); color: var(--cv-paper); overflow: hidden;
}
.cv-card--lime { background: var(--cv-lime); color: var(--cv-ink); }
.cv-card--lilac { background: var(--cv-lilac); color: var(--cv-ink); }
.cv-card--cobalt { background: var(--cv-cobalt); }
.cv-card--rose { background: var(--cv-rose); }
.cv-card--orchid { background: var(--cv-orchid); }
.cv-card--slate { background: var(--cv-slate); }
.cv-card--mauve { background: var(--cv-mauve); color: var(--cv-ink); }
.cv-card--ink { background: var(--cv-ink); }
.cv-card--paper { background: var(--cv-paper); color: var(--cv-ink); }
.cv-card__icon { position: absolute; top: var(--space-5); right: var(--space-5); width: 44px; height: 44px; }

/* Avatar disc on a lime ground (from the Linktree card stack) */
.cv-avatar { width: 88px; height: 88px; border-radius: 50%; background: var(--cv-lime); display: grid; place-items: center; overflow: hidden; }

/* Brand icon tile */
.cv-icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-md); background: var(--cv-paper); }
.cv-icon svg { width: 60%; height: 60%; }
.cv-icon--round { border-radius: 50%; }

/* ---------- OVERLAY: lives on top of the YouTube player ---------- */
.cv-stage { position: relative; }
.cv-layer { position: absolute; inset: 0; pointer-events: none; }
.cv-layer > * { pointer-events: auto; }

/* SAM mask outline: an SVG path with class cv-mask */
.cv-mask {
  fill: var(--cv-mask-fill); stroke: var(--cv-lime); stroke-width: 3;
  stroke-linejoin: round; stroke-dasharray: 10 8;
  animation: cv-dash 1.2s linear infinite;
  opacity: 0; transition: opacity var(--dur-med) var(--ease-out), fill var(--dur-fast);
  cursor: pointer; vector-effect: non-scaling-stroke;
}
.cv-mask.is-on { opacity: 1; }
.cv-mask:hover, .cv-mask.is-active { fill: rgba(210, 232, 35, .32); stroke-dasharray: none; stroke-width: 4; }

/* Hotspot: pulsing dot that anchors a mask */
.cv-hotspot {
  position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border-radius: 50%; background: var(--cv-lime); border: 4px solid var(--cv-ink);
  cursor: pointer; transform: scale(0); transition: transform var(--dur-med) var(--ease-pop);
}
.cv-hotspot.is-on { transform: scale(1); }
.cv-hotspot::after {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  border: 3px solid var(--cv-lime); animation: cv-pulse 1.8s var(--ease-out) infinite;
}

/* Tag: label that pops off a hotspot */
.cv-tag {
  position: absolute; transform: translate(18px, -50%) scale(.6); transform-origin: left center; opacity: 0;
  background: var(--cv-paper); color: var(--cv-ink); white-space: nowrap;
  font: 650 15px/1 var(--font-body); padding: 10px 16px 10px 12px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; gap: 8px; pointer-events: none;
  transition: transform var(--dur-med) var(--ease-pop), opacity var(--dur-fast);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.cv-tag b { font-family: var(--font-mono); font-size: 11px; font-weight: 600; background: var(--cv-lime); padding: 4px 6px; border-radius: 6px; }
.cv-tag.is-on { transform: translate(18px, -50%) scale(1); opacity: 1; }

/* Sidebar panel: replaces/augments "Up next" */
.cv-panel { background: var(--cv-night-2); color: #f1f1f1; border-radius: var(--radius-md); overflow: hidden; font-family: var(--font-body); }
.cv-panel__head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: var(--cv-lime); color: var(--cv-ink); }
.cv-panel__body { padding: 16px; }
.cv-panel--lilac .cv-panel__head { background: var(--cv-lilac); }

/* Explore card inside the panel */
.cv-explore { background: var(--cv-night-3); border-radius: var(--radius-md); padding: 16px; animation: cv-rise var(--dur-med) var(--ease-out) both; }
.cv-explore h4 { margin: 0 0 6px; font: 750 20px/1.1 var(--font-display); letter-spacing: -0.02em; }
.cv-explore p { margin: 0; color: #cfcfcf; font-size: 14px; line-height: 1.45; }

/* Segment list */
.cv-seg { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer; transition: background var(--dur-fast); }
.cv-seg:hover { background: var(--cv-night-3); }
.cv-seg.is-active { background: var(--cv-lime); color: var(--cv-ink); }
.cv-seg__t { font: 600 11px var(--font-mono); opacity: .8; }

/* Timeline segment ticks */
.cv-timeline { position: relative; height: 6px; display: flex; gap: 3px; }
.cv-timeline__seg { flex: var(--w, 1); background: rgba(255,255,255,.25); border-radius: 3px; position: relative; overflow: hidden; }
.cv-timeline__seg i { position: absolute; inset: 0; width: var(--p, 0%); background: var(--cv-rose); }
.cv-timeline__seg.has-layer::after { content: ""; position: absolute; top: -9px; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--cv-lime); transform: translateX(-50%); }

/* .clickvid file glyph */
.cv-file { position: relative; width: 150px; height: 186px; background: var(--cv-lime); border-radius: 18px 54px 18px 18px; color: var(--cv-ink); display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; box-sizing: border-box; }
.cv-file::before { content: ""; position: absolute; top: 0; right: 0; width: 54px; height: 54px; background: rgba(30,35,48,.18); border-radius: 0 54px 0 18px; }
.cv-file__ext { font: 600 16px var(--font-mono); }

/* ---------- Motion ---------- */
@keyframes cv-dash { to { stroke-dashoffset: -36; } }
@keyframes cv-pulse { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes cv-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes cv-pop { 0% { opacity: 0; transform: scale(.4) rotate(-8deg); } 100% { opacity: 1; transform: none; } }
@keyframes cv-float { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-14px) rotate(var(--r, 0deg)); } }
@keyframes cv-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes cv-blink { 50% { opacity: 0; } }

.cv-anim-rise { animation: cv-rise var(--dur-slow) var(--ease-out) both; }
.cv-anim-pop { animation: cv-pop var(--dur-slow) var(--ease-pop) both; }
.cv-anim-float { animation: cv-float 5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}