/* ============================================================
   Work-Panels — Landing-Hero-Style project panels for Section 02
   Used inside .work-rail > .work-panel. Each panel is 100vw × 100vh.
   Outer content uses whoami display/body fonts.
   Mockup subtree uses IBM Plex Sans (product authenticity).
   ============================================================ */

/* ----------------------------------------------------------------
   Section 02: horizontal scroll-jack rail (restored).
   .work is 400vh, .work-sticky sticky(100vh), .work-rail translateX.
   JS scroll-jack in script.js sets the transform from scroll progress.
   ---------------------------------------------------------------- */
.work-panel {
  display: block !important;
  padding: 0 !important;
}
.work-snap { display: none; }

/* ================================================================
   SCROLL-JACK: primary path uses native CSS scroll-driven animations
   (animation-timeline: view()), which runs on the compositor thread
   and sidesteps the Safari scroll-event-coalescing bug entirely.
   Browsers: Safari 26+ (Sept 2025), Chrome 115+, Firefox behind flag.
   Fallback: JS scroll-jack in script.js runs on older browsers.
   ================================================================ */

@supports (animation-timeline: view()) {
  /* Longer scroll range so each project gets time to breathe.
     700vh total = 600vh sticky phase = 200vh per panel transition. */
  .work { height: 700vh !important; view-timeline-name: --work; view-timeline-axis: block; }
  .work-rail {
    animation: rail-translate linear both;
    animation-timeline: --work;
    animation-range: entry 100% exit 0%;
    will-change: transform;
  }
  @keyframes rail-translate {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-300vw, 0, 0); }
  }

  /* Scroll progress indicator — animated by the same timeline.
     The .work-progress-fill width scales 0→100% across the sticky phase. */
  .work-progress-fill {
    animation: progress-fill linear both;
    animation-timeline: --work;
    animation-range: entry 100% exit 0%;
  }
  @keyframes progress-fill {
    from { width: 0%; }
    to   { width: 100%; }
  }

  /* Progress count label: 4 stacked spans, each visible in its own
     quarter of the timeline. Each segment runs over the FULL timeline
     range and uses hard opacity step keyframes so adjacent segments
     don't crossfade and overlap visually. */
  /* Stack all 4 segments in one grid cell so they share the same in-flow
     baseline as the bar (no position: absolute → vertical alignment is
     handled by the parent's flex align-items: center). */
  .work-progress-count[data-css-driven] {
    display: inline-grid;
    min-width: 8ch;
    line-height: 1;
    white-space: nowrap;
  }
  .work-progress-count[data-css-driven] > :not(.seg) { display: none; }
  .work-progress-count[data-css-driven] .seg {
    grid-area: 1 / 1;
    white-space: nowrap;
    opacity: 0;
    animation-timeline: --work;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-range: entry 100% exit 0%;
  }
  .work-progress-count[data-css-driven] .seg[data-i="0"] { animation-name: seg-0; }
  .work-progress-count[data-css-driven] .seg[data-i="1"] { animation-name: seg-1; }
  .work-progress-count[data-css-driven] .seg[data-i="2"] { animation-name: seg-2; }
  .work-progress-count[data-css-driven] .seg[data-i="3"] { animation-name: seg-3; }
  @keyframes seg-0 { 0%, 25% { opacity: 1; } 25.01%, 100% { opacity: 0; } }
  @keyframes seg-1 { 0%, 25% { opacity: 0; } 25.01%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
  @keyframes seg-2 { 0%, 50% { opacity: 0; } 50.01%, 75% { opacity: 1; } 75.01%, 100% { opacity: 0; } }
  @keyframes seg-3 { 0%, 75% { opacity: 0; } 75.01%, 100% { opacity: 1; } }
}

/* ----------------------------------------------------------------
   Visual cleanups
   ---------------------------------------------------------------- */

/* Hide ambient panel glow */
.panel-stage::before { display: none !important; }

/* PermitVault armadillo + Help Book logos are dark on dark — invert to white. */
.panel-permitvault .panel-brand img,
.panel-permitvault .pv-sidebar-head svg,
.panel-helpbook .panel-brand img {
  filter: invert(1) brightness(2);
}

/* Mobile: kein 700vh-Scrollkanal, keine Progress-Bar, kein Headline-Overlay */
@media (max-width: 899px) {
  .work {
    height: auto !important;
    view-timeline-name: none !important;
  }
  .work-rail {
    animation: none !important;
  }
  .work-progress {
    display: none !important;
  }
}

/* Progress bar: vertical-center the count text and bar */
.work-progress {
  display: flex;
  align-items: center;
  gap: 12px;
}
.work-progress-bar {
  flex: 1;
}

/* ================================================================
   SAFARI 25-AND-BELOW FALLBACK — JS scroll-jack + repaint tricks.
   These only apply when scroll-driven animations NOT supported.
   Refs: webkit.org/b/226532, webkit.org/b/177484
   ================================================================ */
@supports not (animation-timeline: view()) {
  @keyframes wk-kick {
    from { transform: translate3d(var(--rail-x, 0px), 0, 0.01px); }
    to   { transform: translate3d(var(--rail-x, 0px), 0, 0.02px); }
  }
  .work-rail {
    animation: wk-kick 1s linear infinite;
    contain: paint;
  }
  .work-sticky {
    -webkit-mask-image: linear-gradient(#000, #000);
            mask-image: linear-gradient(#000, #000);
    isolation: isolate;
  }
}

/* Panel layout: 40% content, 60% mockup */
.panel-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  align-items: center;
  padding: 96px 64px 64px;
  gap: 56px;
  isolation: isolate;
  overflow: hidden;
}

/* Grain layer — per-panel via --panel-accent */
.panel-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 80% 80% at center, black, transparent 75%);
  z-index: 0;
  pointer-events: none;
}

/* Per-panel accent tokens */
.work-panel.panel-permitvault { --panel-accent: #4ade80; --panel-accent-soft: rgba(74,222,128,0.1); }
.work-panel.panel-lemin       { --panel-accent: #818cf8; --panel-accent-soft: rgba(129,140,248,0.1); }
.work-panel.panel-helpbook    { --panel-accent: #fb923c; --panel-accent-soft: rgba(251,146,60,0.1); }
.work-panel.panel-netzwerk    { --panel-accent: #22d3ee; --panel-accent-soft: rgba(34,211,238,0.1); }

/* --- Meta bar (top) --- */
.panel-meta {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 24px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: rgba(245,241,234,0.45);
  z-index: 10;
  pointer-events: none;
}
.panel-meta .left { display: flex; gap: 12px; align-items: center; }
.panel-meta .idx { color: #fafafa; }
.panel-meta .sep { opacity: 0.4; }

/* --- Content column (left) --- */
.panel-content {
  position: relative;
  z-index: 2;
  max-width: 640px;
  display: flex;
  flex-direction: column;
}

.panel-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}
.panel-brand img, .panel-brand svg {
  width: 24px;
  height: 24px;
  object-fit: contain;
  opacity: 0.95;
}
.panel-brand .name {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(245,241,234,0.75);
  letter-spacing: -0.01em;
}
.panel-brand .badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  padding: 3px 9px;
  border-radius: 4px;
  background: color-mix(in oklab, var(--panel-accent) 10%, transparent);
  color: var(--panel-accent);
  letter-spacing: 0.04em;
  margin-left: 4px;
}

.panel-h1 {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: clamp(48px, 5.6vw, 88px);
  letter-spacing: -0.045em;
  line-height: 0.95;
  color: #fafafa;
  margin: 0;
}
.panel-h1 em { color: var(--panel-accent); font-style: normal; }

.panel-sub {
  margin-top: 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(245,241,234,0.7);
  max-width: 500px;
}

/* CTAs — Landing-style */
.panel-cta-row {
  display: flex;
  gap: 12px;
  margin-top: 32px;
  align-items: center;
  flex-wrap: wrap;
}
.panel-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  background: #fafafa;
  color: #09090b;
  text-decoration: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: 8px;
  transition: background 0.15s ease, transform 0.15s ease;
}
.panel-cta-primary:hover { background: #e0e0e0; transform: translateY(-1px); }

.panel-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 20px;
  background: transparent;
  color: #fafafa;
  text-decoration: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.panel-cta-secondary:hover { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.04); }
.panel-cta-secondary svg { width: 16px; height: 16px; opacity: 0.85; }

/* Stack/Compat row */
.panel-stack {
  margin-top: 36px;
  padding-top: 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.panel-stack .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: rgba(245,241,234,0.45);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.panel-stack-items {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.panel-stack-items .item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: rgba(245,241,234,0.75);
}
.panel-stack-items .item svg { width: 14px; height: 14px; opacity: 0.95; }
.panel-stack-items .item.claude   svg { color: #D97757; }
.panel-stack-items .item.cursor   svg { color: #FFFFFF; }
.panel-stack-items .item.windsurf svg { color: #09B6A2; }
.panel-stack-items .item.copilot  svg { color: #9B88F9; }
.panel-stack-items .item.mcp      svg { color: #C084FC; }

/* --- Mockup column (right) --- */
.panel-mockup {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 880px;
  justify-self: end;
  font-family: 'IBM Plex Sans', -apple-system, sans-serif;
  letter-spacing: 0;
}
.panel-mockup-inner {
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  overflow: hidden;
  background: #111114;
  box-shadow:
    0 0 0 0.5px rgba(255,255,255,0.06),
    0 40px 100px rgba(0,0,0,0.8);
}

/* macOS chrome */
.m-chrome {
  height: 32px;
  background: #0c0c0e;
  display: grid;
}
.m-chrome-cell {
  display: flex;
  align-items: center;
  border-right: 1px solid #1a1a1a;
}
.m-chrome-cell:last-child { border-right: 0; }
.m-chrome-cell.pad { padding-left: 16px; }
.m-chrome-dots { display: inline-flex; gap: 8px; }
.m-chrome-dot { width: 11px; height: 11px; border-radius: 50%; }
.m-chrome-dot.r { background: #ff5f57; }
.m-chrome-dot.y { background: #febc2e; }
.m-chrome-dot.g { background: #28c840; }

/* ============================================================
   MOCKUP 1 — PermitVault (3-col vault UI)
   ============================================================ */
.m-pv { display: grid; grid-template-columns: 220px 1fr 320px; height: 520px; font-size: 13px; }
.m-pv .m-chrome { grid-template-columns: 220px 1fr 320px; }

.pv-sidebar { background: #0c0c0e; border-right: 1px solid #1a1a1a; min-height: 100%; display: flex; flex-direction: column; }
.pv-sidebar-head { padding: 12px 16px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #1a1a1a; min-height: 50px; }
.pv-sidebar-head svg { width: 16px; height: 16px; color: #7a7a7a; opacity: 0.65; }
.pv-sidebar-head .brand { font-size: 13px; font-weight: 500; color: #a0a0a0; letter-spacing: -0.01em; }
.pv-section { padding: 14px 16px 4px; font-size: 10px; font-weight: 600; color: #7a7a7a; text-transform: uppercase; letter-spacing: 0.08em; }
.pv-row { padding: 7px 16px; display: grid; grid-template-columns: 6px 1fr auto; column-gap: 8px; align-items: center; color: #a0a0a0; font-size: 12.5px; }
.pv-row.active { background: rgba(255,255,255,0.06); color: #fafafa; }
.pv-row .dot { width: 6px; height: 6px; border-radius: 50%; }
.pv-row .label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-row .end { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.pv-row .timer { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: #4ade80; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.pv-row .sep { display: none; width: 1px; height: 11px; background: rgba(255,255,255,0.08); }
.pv-row .count { font-size: 10.5px; color: #7a7a7a; font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; min-width: 8px; text-align: right; }
.pv-row.is-unlocked { background: color-mix(in oklab, #4ade80 7%, transparent); }
.pv-row.is-unlocked.active { background: linear-gradient(rgba(255,255,255,0.06), rgba(255,255,255,0.06)), color-mix(in oklab, #4ade80 7%, transparent); }
.pv-row.is-unlocked .sep { display: block; }
.pv-spacer { flex: 1; min-height: 16px; }
.pv-row.settings { display: flex; gap: 10px; }
.pv-row.settings svg { width: 13px; height: 13px; color: #7a7a7a; flex-shrink: 0; }

.pv-list { border-right: 1px solid #1a1a1a; background: #0b0b0d; min-width: 0; overflow: hidden; }
.pv-list-head { padding: 12px 20px; border-bottom: 1px solid #1a1a1a; display: flex; flex-direction: column; gap: 2px; min-height: 50px; justify-content: center; }
.pv-list-title { font-size: 14px; font-weight: 600; color: #fafafa; }
.pv-list-count { font-size: 11px; color: #7a7a7a; font-family: 'JetBrains Mono', monospace; }
.pv-list-item { padding: 12px 20px; border-bottom: 1px solid #141414; }
.pv-list-item.active { background: rgba(255,255,255,0.06); }
.pv-list-item .name { font-size: 13px; font-weight: 500; color: #cccccc; margin-bottom: 3px; }
.pv-list-item.active .name { color: #fafafa; font-weight: 600; }
.pv-list-item .meta { font-size: 10.5px; color: #7a7a7a; font-family: 'JetBrains Mono', monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pv-detail { background: #0b0b0d; padding: 0 20px 20px; overflow: hidden; }
.pv-detail-head { min-height: 50px; padding: 10px 0; margin-bottom: 16px; display: flex; flex-direction: column; gap: 2px; justify-content: center; }
.pv-detail-name { font-size: 18px; font-weight: 600; color: #fafafa; letter-spacing: -0.01em; line-height: 1.1; }
.pv-detail-sub { font-size: 11px; color: #7a7a7a; font-family: 'JetBrains Mono', monospace; }
.pv-rows { list-style: none; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); border-radius: 8px; overflow: hidden; padding: 0; margin: 0; }
.pv-detail-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 12.5px; }
.pv-detail-row:last-child { border-bottom: none; }
.pv-detail-row .lbl { color: #a0a0a0; }
.pv-detail-row .val { color: #fafafa; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; margin-left: auto; text-align: right; }
.pv-detail-row .val.dim { color: #7a7a7a; font-family: 'DM Sans', sans-serif; }
.pv-detail-row .val.secret { color: #7a7a7a; letter-spacing: 0.5px; }

/* Old `.work-overlay` (Stuff I shipped headline) + original work-progress
   collide with new panel-meta. Hide the old headline; keep the progress
   bar but reposition to bottom-right so it doesn't overlap panel content. */
.work-overlay { display: none !important; }
.work-progress {
  left: auto !important;
  right: 40px !important;
  bottom: 32px !important;
  width: 200px !important;
  z-index: 20;
}

/* Real screenshots sit below the chrome row. The inner container is a
   column stack: chrome (32px) + screenshot (fills remaining). object-fit
   contain keeps the screenshot's full content visible with letterboxing
   on aspects that don't match. Black bg fills any letterbox. */
.panel-mockup-inner.has-screenshot {
  background: #0a0a0c;
  display: flex;
  flex-direction: column;
}
.m-screenshot {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: #0a0a0c;
  flex: 1;
  min-height: 0;
}

/* Tight viewports: shrink paddings + typography so split-layout fits */
@media (max-width: 1280px) {
  .panel-stage { padding: 80px 40px 40px; gap: 32px; }
  .panel-h1 { font-size: clamp(40px, 4.6vw, 64px); }
  .panel-sub { font-size: 15px; }
}

/* Mobile/narrow: stack (matches JS scroll-jack min-width: 900px).
   .panel-mockup display: none lives in style.css @820px — don't redefine here. */
@media (max-width: 899px) {
  .panel-stage { grid-template-columns: 1fr; padding: 72px 24px 24px; gap: 24px; }
  .panel-h1 { font-size: clamp(40px, 8vw, 64px); }
  .m-pv, .m-pv .m-chrome { grid-template-columns: 140px 1fr 200px; }
}

/* Utility classes (replace inline style= attributes) */
.dot-green  { background: #4ade80; }
.dot-amber  { background: #f59e0b; }
.dot-red    { background: #ef4444; }
.dot-purple { background: #8b5cf6; }
.dot-cyan   { background: #06b6d4; }

.m-chrome.m-chrome-pv     { grid-template-columns: 220px 1fr 320px; }
.m-chrome.m-chrome-single { grid-template-columns: 1fr; }

.kbd-cmd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.04);
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}