/* ── COUNTER ANIMATION ── */
.count-up { display: inline-block; }
.proof-num, .stat-num, .exc-big-val, .wf-val, .cm-num { transition: opacity .3s; }

/* ── STAGGERED ARC ── */
.arc-node, .arc-node-trio, .arc-arrow, .arc-destination {
  opacity: 0; transform: translateY(28px);
  transition: opacity .65s ease, transform .65s ease;
}
.arc-node.arc-in, .arc-node-trio.arc-in, .arc-arrow.arc-in, .arc-destination.arc-in {
  opacity: 1; transform: translateY(0);
}

/* ── KEYFRAMES ── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 4px rgba(184,146,74,.2), 0 0 12px rgba(184,146,74,.3); }
  50% { box-shadow: 0 0 0 6px rgba(184,146,74,.1), 0 0 20px rgba(184,146,74,.4); }
}

/* ── REVEAL ── */
.reveal { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }
.js-ready .reveal { opacity: 0; transform: translateY(12px); }
.js-ready .reveal.visible { opacity: 1; transform: translateY(0); }
/* Safety net: never leave content invisible */
@media (prefers-reduced-motion: reduce) { .js-ready .reveal { opacity: 1 !important; transform: none !important; } }

/* ═══════════════════════════════════════════
   SIGNATURE ANIMATIONS
   ═══════════════════════════════════════════ */

/* ── 1. HERO NAME — letter-by-letter ── */
.hero-name { perspective: 800px; overflow: visible; }

.hn-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(48px) rotateX(25deg);
  transition: none;
}

.hn-letter.hn-animate {
  animation: hn-letter-in .75s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(var(--i) * 52ms + 150ms);
}

@keyframes hn-letter-in {
  to { opacity: 1; transform: translateY(0) rotateX(0); }
}

/* Safety: if JS fails, show the name */
.hero-name:not(:has(.hn-letter)) { opacity: 1; }

/* ── 2. MANIFESTO TYPING ── */
.manifesto-headline .mh-word {
  display: inline;
}

.mh-cursor {
  display: inline-block;
  color: var(--brass);
  font-weight: 300;
  animation: mh-blink .75s step-end infinite;
  margin-left: 1px;
  vertical-align: baseline;
}

@keyframes mh-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── 3. PROOF STRIP — slide in from left ── */
.proof-strip-clip {
  overflow: hidden;
}

.proof-strip-offscreen {
  transform: translateX(-110%);
  opacity: 0;
  transition: transform .9s cubic-bezier(.22, 1, .36, 1), opacity .7s ease;
}

.proof-strip-onscreen {
  transform: translateX(0);
  opacity: 1;
}

/* ── 4. SECTION LABEL LINE — draw in ── */
.section-label::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .65s cubic-bezier(.22, 1, .36, 1);
}

.section-label.sl-drawn::before {
  transform: scaleX(1);
}

/* ── 5. SECTION HEADINGS — slide up reveal ── */
/* Uses opacity+transform so IntersectionObserver still fires (clip-path breaks IO) */
.js-ready .section-heading.sh-hidden {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .75s ease, transform .75s cubic-bezier(.22, 1, .36, 1);
}

.js-ready .section-heading.sh-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── 6. CUSTOM CURSOR ── */
#cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  background: var(--brass, #b8924a);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  will-change: transform;
  transition: width .18s ease, height .18s ease, margin .18s ease, background .18s ease, opacity .3s;
}

#cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 38px; height: 38px;
  margin: -19px 0 0 -19px;
  border: 1px solid rgba(184, 146, 74, .45);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  will-change: transform;
  transition: width .25s ease, height .25s ease, margin .25s ease, border-color .25s ease;
}

#cursor-dot.cursor-expand {
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  background: rgba(184, 146, 74, .75);
}

#cursor-ring.cursor-expand {
  width: 52px; height: 52px;
  margin: -26px 0 0 -26px;
  border-color: rgba(184, 146, 74, .65);
}

/* Hide default cursor ONLY when JS custom cursor is active */
.has-custom-cursor body,
.has-custom-cursor a,
.has-custom-cursor button,
.has-custom-cursor [role="button"] { cursor: none !important; }

/* Never hide cursor on touch/mobile (JS won't add has-custom-cursor there anyway) */
@media (hover: none), (pointer: coarse) {
  body, a, button { cursor: auto !important; }
  #cursor-dot, #cursor-ring { display: none !important; }
}

/* ── 7. ENHANCED CARD HOVER STATES ── */

/* Before/After Wiseki grid */
.wf-before, .wf-after {
  transition: background .3s ease;
}
.wf-before:hover { background: rgba(255, 80, 80, .04); }
.wf-after:hover  { background: rgba(80, 200, 100, .05); }

/* Case cards — lift + brass underline draw */
.case-card {
  position: relative;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
}
.case-card::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--brass, #b8924a);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
.case-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 48px rgba(0, 0, 0, .35);
}
.case-card:hover::after { transform: scaleX(1); }

/* Work case cards */
.work-case-card {
  position: relative;
  overflow: hidden;
  transition: background .2s, transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease !important;
}
.work-case-card::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--brass, #b8924a);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
.work-case-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 36px rgba(0, 0, 0, .28);
}
.work-case-card:hover::after { transform: scaleX(1); }

/* Arc cards — slide right + brass border */
.arc-card {
  transition: background .25s ease, border-color .25s ease, transform .3s cubic-bezier(.22, 1, .36, 1) !important;
}
.arc-card:hover {
  background: rgba(255, 255, 255, .07) !important;
  border-color: rgba(184, 146, 74, .35) !important;
  transform: translateX(5px);
}

/* Venture cards — lift + deeper shadow */
.venture-card {
  transition: border-color .25s, transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease !important;
}
.venture-card:hover {
  border-top-color: var(--brass, #b8924a) !important;
  transform: translateY(-5px);
  box-shadow: 0 14px 48px rgba(0, 0, 0, .14);
}

/* Pillar cards (manifesto) */
.pillar {
  transition: background .25s ease, border-color .25s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
}
.pillar:hover {
  background: rgba(184, 146, 74, .07);
  border-color: rgba(184, 146, 74, .3);
  transform: translateY(-3px);
}

/* Featured cards */
.featured-card {
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease;
}
.featured-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .2);
}

/* Testimonial cards */
.testi-card {
  transition: border-color .25s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
}
.testi-card:hover {
  border-color: rgba(184, 146, 74, .3);
  transform: translateY(-3px);
}

/* Reduce motion safety net */
@media (prefers-reduced-motion: reduce) {
  .hn-letter                          { animation: none !important; opacity: 1 !important; transform: none !important; }
  .section-label::before              { transform: scaleX(1) !important; transition: none !important; }
  .js-ready .section-heading.sh-hidden{ clip-path: none !important; transition: none !important; }
  .proof-strip-offscreen              { transform: none !important; opacity: 1 !important; transition: none !important; }
  .case-card, .work-case-card,
  .arc-card, .venture-card,
  .pillar, .featured-card,
  .testi-card                         { transition: none !important; transform: none !important; }
}

/* Experience mobile note — hidden by default, shown via 480px media query */
.exp-mobile-more {
  display: none;
  margin-top: .6rem;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(184,146,74,.55);
}

/* Work mobile "see more" note — hidden by default, shown via 480px media query below */
.work-mobile-more {
  display: none;
  margin-top: 1rem;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(184,146,74,.65);
}

/* ── MOBILE — 900px ── */
@media (max-width: 900px) {
  /* Top bar — too cramped on mobile, nav handles everything */
  .top-bar { display: none; }

  /* Hero */
  .hero-grid { grid-template-columns: 1fr; }
  .hero-left { padding-bottom: 2rem; }
  .hero-right { border-left: none; border-top: 1px solid rgba(255,255,255,.07); padding: 1rem 0 1.5rem; }
  .hero-brand-block { padding: 1rem 0 1rem; }
  .hbb-pillar { font-size: 1.3rem; }
  .hero-name { font-size: clamp(3.5rem, 16vw, 5rem); }
  /* Photo — hide on mobile, no right column for it to live in */
  .hero-photo-wrap { display: none !important; }
  /* New hero single */
  .hero-single { max-width: 100%; padding-bottom: 2.5rem; }
  .hm-val { font-size: 1.6rem; }
  .hero-ctas-new { flex-direction: column; gap: .8rem; }
  .hero-ctas-new .btn-brass, .hero-ctas-new .btn-ghost { text-align: center; }

  /* All 2-col grids → 1 col */
  .manifesto-top, .story-grid, .skills-grid { grid-template-columns: 1fr; }
  .contact-section { grid-template-columns: 1fr !important; display: grid !important; }
  .manifesto-pillars { grid-template-columns: 1fr; }
  .testi-grid, .featured-grid, .ventures-grid, .writing-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .vol-grid { grid-template-columns: 1fr 1fr; }
  /* Books — horizontal scroll strip (collapses 3,300px of vertical height → ~320px) */
  .books-grid { display: flex !important; flex-direction: row !important; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; gap: 0; background: var(--rule); border: 1px solid var(--rule); }
  .books-grid::-webkit-scrollbar { height: 3px; }
  .books-grid::-webkit-scrollbar-track { background: transparent; }
  .books-grid::-webkit-scrollbar-thumb { background: rgba(184,146,74,.4); border-radius: 2px; }
  .book-card { flex: 0 0 155px !important; min-width: 155px !important; scroll-snap-align: start; }

  /* Gaps & padding */
  .section-wrap { padding: 2.5rem 5%; }
  .stats-section { padding: 2rem 5%; }
  .manifesto { padding: 2.5rem 5%; }
  .manifesto-top { gap: 1.5rem; margin-bottom: 1.5rem; padding-bottom: 1.5rem; }
  .manifesto-body { padding-top: 0; }
  .pillar { padding: 1.5rem; }
  .manifesto-closer { flex-direction: column; gap: 1rem; }
  .manifesto-closer-sig { text-align: left; }
  .story-grid { gap: 2rem; }
  .contact-section { padding: 2.5rem 5%; gap: 2rem; }
  .contact-heading { font-size: clamp(2.5rem, 12vw, 4rem); }

  /* Experience */
  .vp-grid { grid-template-columns: 1fr; }
  .wf-ba-grid { grid-template-columns: 1fr; }
  .wf-before { border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); }
  .wf-after { border-left: none; border-top: 1px solid rgba(255,255,255,.08); }
  .wf-arrow-col { border: none; border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); flex-direction: row; flex-wrap: wrap; justify-content: flex-start; padding: 1rem 1.5rem; }
  .wf-metrics-row { grid-template-columns: repeat(3,1fr); }
  .work-cases-grid { grid-template-columns: 1fr; }
  .work-case-featured { grid-column: 1; }
  .arc-trio-cards { grid-template-columns: 1fr; }
  .arc-trio-card-mid { border-left: none; border-right: none; border-top: 1px solid rgba(184,146,74,.15); border-bottom: 1px solid rgba(184,146,74,.15); }
  .arc-node, .arc-node-trio { grid-template-columns: 50px 1fr; gap: 1rem; }
  .arc-arrow { margin-left: 50px; }
  .arc-destination { margin-left: calc(50px + 1rem); }
  .arc-metrics-row { flex-wrap: wrap; }
  .arc-metric { min-width: 40%; }
  .arc-dest-roles { flex-direction: column; gap: .3rem; }
  .arc-dest-role { border-right: none; padding-right: 0; }
  .exp-now-grid { grid-template-columns: 1fr; }
  .exc-metrics-row { grid-template-columns: repeat(2,1fr); }
  .exc-stat-row { grid-template-columns: repeat(3,1fr); }
  .exp-timeline { padding-left: 1.2rem; }
  .exp-entry { padding-left: 1.2rem; }
  .exp-dot { left: -1.65rem; }
  .exp-metrics { gap: .5rem; }
  .exp-metric { min-width: 70px; padding: .4rem .6rem; }
  .exp-metric-val { font-size: 1rem; }
  .exp-header { flex-direction: column; gap: .4rem; }

  /* Nav */
  .nav-links li:not(:last-child) { display: none; }

  /* Write items */
  .write-item { grid-template-columns: 1fr; gap: .5rem; }
  .write-right { text-align: left; }

  /* Footer */
  footer { flex-direction: column; gap: .4rem; text-align: center; }

  /* Top bar — hide email on small screens */
  .top-bar a[href^="mailto"] { display: none; }
  .top-bar .top-bar-sep:last-of-type { display: none; }

  /* Stat boxes - tighter on mobile */
  .stat-box { padding: 1.5rem 1rem; }
  .stat-num { font-size: clamp(1.5rem, 8vw, 2.2rem); }

  /* Proof strip - wrap tighter */
  .proof-strip { flex-wrap: wrap; }
  .proof-item { min-width: calc(50% - 1px); padding: 1rem; flex: 1 1 45%; }

  /* Testi cards */
  .testi-card { padding: 1.5rem; }

  /* Case & competition cards */
  .case-card { padding: 1.5rem; }
  .competition-card { padding: 1.5rem; }
  .case-metrics { gap: 1.2rem; }

  /* Featured grid */
  .featured-card { padding: 1.4rem; }

  /* Vol grid */
  .vol-item { padding: 1.2rem; }

  /* Venture cards */
  .venture-card { padding: 1.5rem; }

  /* Sectors grid */
  .sectors-grid { grid-template-columns: 1fr 1fr; }
}

/* ── EXTRA SMALL — 480px ── */
@media (max-width: 480px) {
  /* Contact declaration — reduce excessive padding & tighten font */
  .contact-declaration { padding: 3.5rem 5% 3rem; }
  .cd-statement { font-size: clamp(1.8rem, 7.5vw, 2.5rem); }
  .cd-meta { gap: 2rem; }

  /* Ventures stage tracker pills — allow wrapping on tiny screens */
  .vp-stages { grid-template-columns: 1fr 1fr; }
  .vp-stage { white-space: normal; }

  /* Arc diagram — tighten column and spacing */
  .arc-node, .arc-node-trio { grid-template-columns: 40px 1fr; gap: .7rem; }
  .arc-arrow { margin-left: 40px; }
  .arc-destination { margin-left: calc(40px + .7rem); }
  .arc-metric { min-width: 35%; }
  .arc-card { padding: 1.2rem 1rem; }

  /* Proof strip — keep 2-col even on very small screens */
  .proof-item { min-width: calc(50% - 1px); flex: 1 1 calc(50% - 1px); padding: .85rem .75rem; }

  /* Books — narrower cards on very small screens */
  .book-card { flex: 0 0 135px !important; min-width: 135px !important; }

  /* Stats — keep 2×2 grid (don't collapse to 1-col) */
  .stats-grid { grid-template-columns: 1fr 1fr; }

  /* Ventures venture-card internal content */
  .venture-card { padding: 1.2rem; }

  /* ── Section padding — tighter on small screens ── */
  .section-wrap { padding: 2rem 4% !important; }
  .manifesto { padding: 2rem 4% !important; }
  .stats-section { padding: 1.5rem 4% !important; }
  .contact-section { padding: 2rem 4% !important; }

  /* Hero bio — tighter line-height to compress height */
  .hero-bio { line-height: 1.7 !important; font-size: .84rem !important; }

  /* Writing items — reduce internal gap */
  .write-item { padding: .9rem 0; }

  /* Experience entries — tighter gaps */
  .exp-entry { padding-bottom: 1.5rem; }

  /* ── Experience section compression ── */
  /* Override inline padding on #experience */
  #experience { padding: 2rem 4% !important; }
  /* Tighten current-role cards */
  .exp-now-card { padding: 1rem !important; gap: .5rem !important; }
  .enc-facts { gap: .35rem !important; }
  /* Hide the 3rd card (NexGen — "Completed") on mobile */
  .exp-now-card:nth-child(3) { display: none; }
  /* Tighten the "Prior Experience" label's top gap (has inline margin-top:3rem) */
  .exp-now-grid + .exp-now-label { margin-top: 1.5rem !important; }
  /* Tighten exp-cards-grid entries */
  .exp-card { padding: 1rem !important; }
  .exc-metrics-row { gap: .5rem !important; }
  .exc-stat-row { gap: .4rem !important; }

  /* ── Ventures section compression ── */
  .vp-card { padding: 1rem !important; gap: .55rem !important; }
  .vp-specs { gap: .25rem !important; }
  .vp-problem-text { font-size: .75rem !important; }

  /* Writing — show 4 of 7 cards on mobile (saves ~630px) */
  .writing-grid > *:nth-child(n+5) { display: none; }
  .writing-grid::after { content: '+ more on Medium →'; display: block; grid-column: 1/-1; padding: .75rem 1rem; font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brass); border-top: 1px solid var(--rule); }

  /* Skills — tighter padding */
  .skill-col { padding: 1rem .9rem !important; }
  .skill-list li { padding: .35rem 0 !important; }

  /* Work cards — tighter padding */
  .work-case-card { padding: 1rem !important; }

  /* Work section — show 3 of 5 cards on mobile (saves ~680px) */
  .work-cases-grid > .work-case-card:nth-child(n+4) { display: none; }
  .work-mobile-more { display: block; }

  /* Experience + Ventures mobile notes */
  .exp-mobile-more { display: block; }
}


/* ── TOUCH RIPPLE — mobile tap feedback (brass ring expands on touch) ── */
.touch-ripple {
  position: fixed;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  border: 1.5px solid rgba(184, 146, 74, .65);
  transform: translate(-50%, -50%);
  animation: touch-ripple-out .55s cubic-bezier(.2, .8, .4, 1) forwards;
}

@keyframes touch-ripple-out {
  from { width: 0;    height: 0;    opacity: .9; border-width: 2px; }
  to   { width: 56px; height: 56px; opacity: 0;  border-width: 1px; }
}