/* CrudeX — Warm cream / parchment with deep copper accents */
:root {
  --ink: #efe6d2;         /* page background - warm cream, softer than white */
  --ink-2: #e8dec7;       /* card background */
  --ink-3: #ded2b8;       /* subtle panel */
  --ink-4: #c9bc9e;       /* card border */
  --steel: #9a8e72;       /* divider / muted stroke */
  --bone: #2a1f14;        /* primary text - deep espresso brown */
  --bone-2: #5a4a38;      /* secondary text */
  --muted: #8a7a62;       /* muted label */
  --copper: #a64822;      /* primary accent - deep copper */
  --copper-bright: #c4501c; /* hover / highlight */
  --amber: #8a6a16;
  --rust: #6a2410;
  --crude: #1a120a;
  --green: #4a6a1a;
  --red: #8a2e18;
  --blue-cold: #3a5a6a;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body { background: #efe6d2; color: var(--bone); font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; overflow: hidden; }

deck-stage > section {
  background: var(--ink);
  color: var(--bone);
  font-family: 'Inter', 'Helvetica Neue', Helvetica, sans-serif;
  overflow: hidden;
  position: relative;
}

.display { font-family: 'Fraunces', 'Times New Roman', serif; font-weight: 400; letter-spacing: -0.02em; line-height: 0.95; }
.mono { font-family: 'JetBrains Mono', 'Courier New', monospace; }
.caps { text-transform: uppercase; letter-spacing: 0.18em; font-size: 12px; font-weight: 500; }

/* film grain overlay */
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  opacity: 0.04; mix-blend-mode: multiply;
}

/* chrome header/footer appearing on most slides */
.slide-chrome {
  position: absolute; left: 0; right: 0; padding: 28px 64px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); z-index: 5;
}
.slide-chrome.top { top: 0; min-height: 120px; border-bottom: 1px solid rgba(200, 99, 42, 0.15); }
.slide-chrome.bottom { bottom: 0; min-height: 72px; border-top: 1px solid rgba(200, 99, 42, 0.15); }

/* give every slide layout breathing room below the taller top chrome & above the bottom chrome */
deck-stage section > div[class$="-layout"],
deck-stage section > div.s13p-layout,
deck-stage section > div.s14-layout,
deck-stage section > div.s15-layout,
deck-stage section > div.s16-layout,
deck-stage section > div.s17-layout {
  top: 150px !important;
  bottom: 100px !important;
}

.crudex-mark {
  display: inline-flex; align-items: center; gap: 22px;
  color: var(--bone); font-weight: 600; letter-spacing: 0.28em;
  font-size: 15px;
}
/* hex-barrel logomark — replaces the old square dot; still works as .dot so existing markup doesn't need to change */
.crudex-mark .dot {
  width: 88px; height: 88px; background: transparent; border-radius: 0;
  box-shadow: none;
  background-image: url("assets/mark.svg");
  background-repeat: no-repeat; background-size: contain; background-position: center;
  filter: drop-shadow(0 0 6px rgba(196,80,28,0.35));
  flex-shrink: 0;
}

.slide-num { font-family: 'JetBrains Mono', monospace; color: var(--bone-2); letter-spacing: 0.1em; }

/* pills & tags */
.tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border: 1px solid rgba(200, 99, 42, 0.3);
  border-radius: 2px; font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--copper-bright);
}
.tag .blip { width: 6px; height: 6px; border-radius: 50%; background: var(--copper-bright); box-shadow: 0 0 8px var(--copper-bright); animation: blip 2s infinite; }
@keyframes blip { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* scroll-reveal */
[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 900ms cubic-bezier(.2,.8,.2,1), transform 900ms cubic-bezier(.2,.8,.2,1); }
[data-reveal][data-deck-active="__self"] { opacity: 1; transform: translateY(0); }
section[data-deck-active] [data-reveal] { opacity: 1; transform: translateY(0); }
section[data-deck-active] [data-reveal][data-delay="1"] { transition-delay: 120ms; }
section[data-deck-active] [data-reveal][data-delay="2"] { transition-delay: 240ms; }
section[data-deck-active] [data-reveal][data-delay="3"] { transition-delay: 360ms; }
section[data-deck-active] [data-reveal][data-delay="4"] { transition-delay: 480ms; }
section[data-deck-active] [data-reveal][data-delay="5"] { transition-delay: 600ms; }
section[data-deck-active] [data-reveal][data-delay="6"] { transition-delay: 720ms; }

/* card */
.card {
  background: var(--ink-2); border: 1px solid var(--ink-4);
  padding: 28px; position: relative;
}
.card::before {
  content: ""; position: absolute; top: -1px; left: -1px; width: 14px; height: 14px;
  border-top: 1px solid var(--copper); border-left: 1px solid var(--copper);
}
.card::after {
  content: ""; position: absolute; bottom: -1px; right: -1px; width: 14px; height: 14px;
  border-bottom: 1px solid var(--copper); border-right: 1px solid var(--copper);
}

/* big number */
.bignum { font-family: 'Fraunces', serif; font-weight: 300; line-height: 0.9; letter-spacing: -0.03em; color: var(--bone); }

/* tooltip */
[data-tooltip] { position: relative; cursor: help; }
[data-tooltip]:hover::after {
  content: attr(data-tooltip); position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  background: var(--ink-4); color: var(--bone); padding: 10px 14px; border: 1px solid var(--copper);
  white-space: nowrap; font-family: 'JetBrains Mono', monospace; font-size: 12px;
  letter-spacing: 0.05em; text-transform: none; z-index: 100; pointer-events: none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}
[data-tooltip]:hover::before {
  content: ""; position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 10px; height: 10px; background: var(--ink-4); border-right: 1px solid var(--copper); border-bottom: 1px solid var(--copper);
  z-index: 101; pointer-events: none;
}

/* crosshatch bg */
.hatch {
  background-image:
    linear-gradient(135deg, rgba(200, 99, 42, 0.05) 0, rgba(200, 99, 42, 0.05) 1px, transparent 1px, transparent 12px);
}

/* crude drip animation */
@keyframes drip {
  0% { transform: translateY(-100%); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateY(120vh); opacity: 0; }
}

/* flicker */
@keyframes flicker { 0%, 100% { opacity: 1; } 45% { opacity: 1; } 50% { opacity: 0.6; } 55% { opacity: 1; } }

/* marquee */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* divider */
.divider-line { height: 1px; background: linear-gradient(90deg, transparent, var(--copper) 20%, var(--copper) 80%, transparent); opacity: 0.4; }

/* button */
.btn-primary {
  display: inline-flex; align-items: center; gap: 12px; padding: 16px 28px;
  background: var(--copper); color: var(--ink);
  font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 600; border: 0; cursor: pointer;
  transition: background 180ms ease, transform 180ms ease;
}
.btn-primary:hover { background: var(--copper-bright); transform: translateY(-2px); }
.btn-secondary {
  display: inline-flex; align-items: center; gap: 12px; padding: 16px 28px;
  background: transparent; color: var(--bone); border: 1px solid var(--steel);
  font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: 0.14em;
  text-transform: uppercase; cursor: pointer;
  transition: border-color 180ms ease, color 180ms ease;
}
.btn-secondary:hover { border-color: var(--copper); color: var(--copper-bright); }

/* inputs for ROI calc */
.calc-input {
  background: var(--ink); border: 1px solid var(--steel); color: var(--bone);
  font-family: 'JetBrains Mono', monospace; font-size: 18px; padding: 14px 18px;
  width: 100%; outline: none; transition: border-color 180ms ease;
}
.calc-input:focus { border-color: var(--copper); }

/* range */
input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; width: 100%; }
input[type=range]::-webkit-slider-runnable-track { height: 2px; background: var(--steel); }
input[type=range]::-moz-range-track { height: 2px; background: var(--steel); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; background: var(--copper); border-radius: 50%; margin-top: -8px; cursor: pointer; box-shadow: 0 0 12px var(--copper); }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; background: var(--copper); border: 0; border-radius: 50%; cursor: pointer; box-shadow: 0 0 12px var(--copper); }