/*
 * Marcus Henry — Avant layer
 * Editorial/brutalist accents over the callum theme, drawn from
 * 6TM Magazine's design language: mono-as-display type, hairline
 * ruled ledgers, a numbered typographic index, a marquee ticker,
 * one acid accent, and a giant cropped wordmark.
 * Loads after site.css; callum-scoped so hermes is untouched.
 */

:root[data-theme="callum"] {
  --acid: #eaff2b;
  --acid-ink: #0a0a0a;
}

html { scroll-behavior: smooth; }

/* ─── Marquee ticker ───────────────────────────────── */
.ticker {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  overflow: hidden;
  white-space: nowrap;
}
.ticker-track {
  display: inline-flex;
  animation: ticker-scroll 48s linear infinite;
}
.ticker-content {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 9px 0;
}
.ticker-content em {
  font-style: normal;
  background: var(--acid);
  color: var(--acid-ink);
  padding: 1px 6px;
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}

/* ─── Numbered typographic index (masthead) ────────── */
.index-callout {
  padding: 36px 0 28px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(1.4rem, 3.1vw, 2.3rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.index-item { transition: background 0.15s ease; }
.index-item sup {
  font-size: 0.42em;
  font-weight: 400;
  margin-right: 2px;
  color: var(--ink-muted);
}
.index-item:hover { background: var(--acid); color: var(--acid-ink); }
.index-item:hover sup { color: var(--acid-ink); }
.index-dash { color: var(--ink-faint); }

/* ─── Mono eyebrows + micro links ──────────────────── */
:root[data-theme="callum"] .section-title-eyebrow {
  font-family: var(--font-mono);
  letter-spacing: 0.16em;
}
:root[data-theme="callum"] .project-link.is-secondary {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 10px 2px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
}
:root[data-theme="callum"] .project-link.is-secondary:hover {
  background: var(--acid);
  color: var(--acid-ink);
  transform: none;
}

/* ─── Monogram hero ────────────────────────────────── */
.hero-monogram { padding: 36px 0 28px; }
.hero-mark {
  display: block;
  margin: 0 auto;
  width: min(520px, 80vw);
  height: auto;
  -webkit-mask-image: radial-gradient(ellipse 64% 62% at 50% 48%, #000 42%, transparent 86%);
  mask-image: radial-gradient(ellipse 64% 62% at 50% 48%, #000 42%, transparent 86%);
  user-select: none;
}
.hero-name {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 3.2vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: 0.32em;
  padding-left: 0.32em; /* re-centers wide-tracked text */
  text-transform: uppercase;
  color: var(--ink);
}
.hero-rule {
  display: block;
  width: 140px;
  height: 2px;
  margin: 20px auto;
  background: linear-gradient(90deg, #5a6b4f, #d9b54a);
}
.hero-tagline {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  padding-left: 0.28em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ─── Tool pills: grand spiral-in entrance ────────────
 * When the row first scrolls into view, each chip spirals
 * in from off-screen — alternating sides, big rotation —
 * cascading down the row, then locks static. JS adds
 * .anim-ready (hides chips) then .in-view (fires it), so
 * with no JS the pills just sit there normally.
 */
:root[data-theme="callum"] .tools-row.anim-ready .tool-chip { opacity: 0; }
:root[data-theme="callum"] .tools-row.in-view .tool-chip {
  animation: chip-spiral-in 0.95s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes chip-spiral-in {
  0%   { opacity: 0; transform: translate(var(--sx, -42vw), var(--sy, 58vh)) rotate(var(--sr, -540deg)) scale(0.25); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
/* Alternate entry vectors so they don't all fly the same way */
:root[data-theme="callum"] .tool-chip:nth-child(odd)  { --sx: -44vw; --sr: -540deg; }
:root[data-theme="callum"] .tool-chip:nth-child(even) { --sx:  44vw; --sr:  540deg; }
:root[data-theme="callum"] .tool-chip:nth-child(3n)   { --sy: 64vh; }
:root[data-theme="callum"] .tool-chip:nth-child(3n+1) { --sy: 48vh; }
/* Cascade — staggered start per chip */
:root[data-theme="callum"] .tools-row.in-view .tool-chip:nth-child(1) { animation-delay: 0.00s; }
:root[data-theme="callum"] .tools-row.in-view .tool-chip:nth-child(2) { animation-delay: 0.09s; }
:root[data-theme="callum"] .tools-row.in-view .tool-chip:nth-child(3) { animation-delay: 0.18s; }
:root[data-theme="callum"] .tools-row.in-view .tool-chip:nth-child(4) { animation-delay: 0.27s; }
:root[data-theme="callum"] .tools-row.in-view .tool-chip:nth-child(5) { animation-delay: 0.36s; }
:root[data-theme="callum"] .tools-row.in-view .tool-chip:nth-child(6) { animation-delay: 0.45s; }
:root[data-theme="callum"] .tools-row.in-view .tool-chip:nth-child(7) { animation-delay: 0.54s; }
:root[data-theme="callum"] .tools-row.in-view .tool-chip:nth-child(8) { animation-delay: 0.63s; }
:root[data-theme="callum"] .tools-row.in-view .tool-chip:nth-child(9)  { animation-delay: 0.72s; }
:root[data-theme="callum"] .tools-row.in-view .tool-chip:nth-child(10) { animation-delay: 0.81s; }
:root[data-theme="callum"] .tools-row.in-view .tool-chip:nth-child(11) { animation-delay: 0.90s; }
/* Hide the off-screen travel from creating a horizontal scrollbar */
:root[data-theme="callum"] body { overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="callum"] .tools-row.anim-ready .tool-chip { opacity: 1; }
  :root[data-theme="callum"] .tools-row.in-view .tool-chip { animation: none; }
}

/* ─── Hand-drawn doodle beside a section heading ───── */
.heading-doodle {
  height: 1.5em;
  width: auto;
  vertical-align: -0.34em;
  margin-left: 0.28em;
}

/* ─── Pencil-drawn reveal: a pencil glides the path and the
 * doodle materializes in its wake. The reveal mask "draws"
 * (stroke-dashoffset) while a pencil rides the same path via
 * CSS motion-path, synced over the same duration so the icon
 * appears right at the tip. Pencil fades out at the end.
 * JS adds .armed (hides icon, holds pencil) then .drawn.
 */
.pencil-doodle { overflow: visible; }
.pencil-doodle .reveal-path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.pencil-doodle .pencil-cursor {
  /* offset-path is set inline per icon so each pencil follows its own path */
  offset-anchor: 50% 100%;   /* pencil tip rides the path */
  offset-rotate: 0deg;
  offset-distance: 0%;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: rotate(135deg); /* tip points up-and-left (edit-cursor pose), around the tip */
  opacity: 0;
}
.pencil-doodle.armed .reveal-path { stroke-dashoffset: 1; }
.pencil-doodle.armed.drawn .reveal-path { animation: pencil-draw 1.4s linear forwards; }
.pencil-doodle.armed.drawn .pencil-cursor { animation: pencil-move 1.4s linear forwards; }
@keyframes pencil-draw { to { stroke-dashoffset: 0; } }
@keyframes pencil-move {
  0%   { offset-distance: 0%;   opacity: 1; }
  86%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pencil-doodle.armed .reveal-path { stroke-dasharray: none; stroke-dashoffset: 0; }
  .pencil-doodle.armed .pencil-cursor { display: none; }
}

/* ─── Skills as hairline ledger ────────────────────── */
:root[data-theme="callum"] .skills {
  display: block;
}
:root[data-theme="callum"] .skills-group {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
  align-items: baseline;
  background: transparent;
  border: none;
  border-radius: 0;
  border-top: 1px solid var(--hair);
  padding: 18px 8px;
  margin: 0;
  transition: background 0.15s ease;
}
:root[data-theme="callum"] .skills-group:last-child {
  border-bottom: 1px solid var(--hair);
}
:root[data-theme="callum"] .skills-group:hover { background: var(--surface-hover); }
:root[data-theme="callum"] .skills-group-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}
:root[data-theme="callum"] .skills-group-items {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  gap: 0;
}
:root[data-theme="callum"] .skills-group-items span {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}
:root[data-theme="callum"] .skills-group-items span::after {
  content: " · ";
  color: var(--ink-faint);
  margin: 0 8px;
}
:root[data-theme="callum"] .skills-group-items span:last-child::after { display: none; }
@media (max-width: 700px) {
  :root[data-theme="callum"] .skills-group { grid-template-columns: 1fr; gap: 6px; }
}

/* ─── Real screenshot inside browser mock ──────────── */
.browser-shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* ─── Project media slider: Preview ⇄ Architecture ──── */
.slide-track {
  display: flex;
  height: 100%;
  transition: transform 0.5s cubic-bezier(.65, 0, .35, 1);
}
.slide { flex: 0 0 100%; height: 100%; }
.browser-shot.is-diagram {
  object-fit: contain;
  object-position: center;
  background: #fafaf7;
  padding: 14px;
}
.project-slider[data-slide="1"] .slide-track { transform: translateX(-100%); }

.slider-tabs {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.slider-tab {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 11px;
  border: 1px solid var(--hair);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.slider-tab:hover { border-color: var(--ink); color: var(--ink); }
.slider-tab.is-active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

/* Click-to-expand cue + lightbox */
.project-slider .browser-body { cursor: zoom-in; }
.project-slider .browser-body::after {
  content: "⤢ Expand";
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--hair);
  padding: 3px 7px;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.project-slider:hover .browser-body::after { opacity: 1; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 5vh 5vw;
  background: rgba(10, 10, 10, 0.86);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: #fff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.14); }

/* ─── The ledger ───────────────────────────────────── */
.ledger { border-top: 1px solid var(--hair); }
.ledger-row {
  display: grid;
  grid-template-columns: 44px 1fr 170px 90px 130px;
  gap: 16px;
  align-items: center;
  border-bottom: 1px solid var(--hair);
  padding: 16px 8px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  transition: background 0.15s ease;
}
.ledger-row:hover { background: var(--surface-hover); }
a.ledger-row:hover .ledger-name { text-decoration: underline; text-underline-offset: 4px; }
.ledger-num { color: var(--ink-faint); font-size: 0.75rem; }
.ledger-name { font-weight: 500; }
.ledger-cat, .ledger-year { color: var(--ink-muted); font-size: 0.78rem; }
.ledger-status {
  justify-self: end;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px;
}
.ledger-status.is-live,
.ledger-status.is-progress {
  background: var(--acid);
  color: var(--acid-ink);
}
.ledger-status.is-earned {
  background: var(--ink);
  color: var(--bg);
}
@media (max-width: 700px) {
  .ledger-row { grid-template-columns: 1fr 110px; }
  .ledger-num, .ledger-cat, .ledger-year { display: none; }
}

/* ─── Footer wordmark (replaces the brand text) ────── */
.footer-wordmark {
  display: block;
  width: 160px;
  height: auto;
}

/* ─── Visitor pill: orbiting light ─────────────────────
 * A gold-to-olive arc travels around the pill's border ring
 * (conic-gradient masked to the ring, angle animated via
 * @property). Browsers without @property, or reduced-motion
 * users, just see the normal static hairline border.
 */
@property --orbit {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
:root[data-theme="callum"] .visitor-pill,
:root[data-theme="callum"] .project-link:not(.is-secondary) { position: relative; }
:root[data-theme="callum"] .visitor-pill::before,
:root[data-theme="callum"] .project-link:not(.is-secondary)::before {
  content: "";
  position: absolute;
  inset: -1px;               /* sit on top of the 1px border */
  border-radius: 999px;
  padding: 1.5px;            /* ring thickness */
  background: conic-gradient(
    from var(--orbit),
    transparent 0deg,
    #d9b54a 24deg,
    #5a6b4f 44deg,
    transparent 72deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: pill-orbit 3.2s linear infinite;
  pointer-events: none;
}
/* Brighter acid streak on the black Visit pills */
:root[data-theme="callum"] .project-link:not(.is-secondary)::before {
  padding: 2px;
  background: conic-gradient(
    from var(--orbit),
    transparent 0deg,
    rgba(234, 255, 43, 0.35) 20deg,
    var(--acid) 45deg,
    #fbffd6 55deg,
    var(--acid) 65deg,
    rgba(234, 255, 43, 0.35) 90deg,
    transparent 110deg
  );
}
@keyframes pill-orbit {
  to { --orbit: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="callum"] .visitor-pill::before,
  :root[data-theme="callum"] .project-link:not(.is-secondary)::before { animation: none; }
}