/* ==========================================================================
   Monolith — Success Stories index page
   Typography-first index with cursor-following image reveal.
   ========================================================================== */

.lime { color: #BCFF56; }

/* ============ page keyframes ============ */
@keyframes ssPreviewScan {
  0%   { top: -6%; opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { top: 106%; opacity: 0; }
}
@keyframes ssGlitchSlice {
  0%, 84%   { clip-path: inset(100% 0 0 0); transform: none; opacity: 0; }
  85%       { clip-path: inset(12% 0 78% 0); transform: translateX(-8px); opacity: 1; }
  87%       { clip-path: inset(62% 0 24% 0); transform: translateX(7px); opacity: 1; }
  89%       { clip-path: inset(34% 0 52% 0); transform: translateX(-5px) skewX(-1deg); opacity: 1; }
  91%       { clip-path: inset(78% 0 6% 0); transform: translateX(9px); opacity: 1; }
  93%, 100% { clip-path: inset(100% 0 0 0); transform: none; opacity: 0; }
}

/* ============ hero ============ */
.ss-hero { max-width: 1440px; margin: 0 auto; padding: 120px 80px 96px; box-sizing: border-box; }
.ss-hero-inner { display: flex; flex-direction: column; gap: 40px; }
.ss-eyebrow {
  font-family: 'VCR OSD Mono', monospace; font-size: 13px; letter-spacing: 0.12em;
  color: #747474; text-transform: uppercase;
}
.ss-h1 {
  margin: 0; font-weight: 400; font-size: clamp(56px, 8vw, 120px); line-height: 0.98;
  letter-spacing: -0.04em; color: #FFFFFF;
}
.ss-hero-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; }
.ss-hero-copy { margin: 0; max-width: 540px; font-size: 20px; line-height: 1.4; color: #9C9C9C; }
.ss-jump {
  display: flex; flex-direction: column; gap: 8px;
  font-family: 'VCR OSD Mono', monospace; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
}
.ss-jump a { color: #747474; text-decoration: none; transition: color 0.2s ease; }
.ss-jump a:hover { color: #BCFF56; }

/* ============ type index ============ */
.ss-index-section { max-width: 1440px; margin: 0 auto; padding: 32px 80px 0; box-sizing: border-box; }
.ss-index-list { position: relative; }

.ss-row {
  position: relative; z-index: 2; display: block; border-top: 1px solid #2E2E2E;
  padding: clamp(32px, 4vw, 56px) 0; text-decoration: none; color: inherit; cursor: pointer;
}
.ss-row-last { border-bottom: 1px solid #2E2E2E; }

.ss-row-inner { display: flex; justify-content: space-between; align-items: baseline; gap: 32px; flex-wrap: wrap; }
.ss-row-left { display: flex; align-items: baseline; gap: clamp(16px, 2.5vw, 40px); }

.ss-row-num {
  font-family: 'VCR OSD Mono', monospace; font-size: 14px; color: #BCFF56; flex: none;
}
.ss-row-name {
  font-weight: 400; font-size: clamp(52px, 8.5vw, 150px); letter-spacing: -0.045em;
  line-height: 0.95; color: #FFFFFF;
  transition: color 0.25s ease, letter-spacing 0.4s ease;
}
.ss-row:hover .ss-row-name,
.ss-row:focus-visible .ss-row-name { color: #BCFF56; letter-spacing: -0.03em; }

.ss-row-sector {
  font-family: 'VCR OSD Mono', monospace; font-size: 11px; letter-spacing: 0.14em;
  color: #565656; text-transform: uppercase; white-space: nowrap;
}

/* ============ floating cursor-follow preview ============ */
.ss-preview {
  position: fixed; left: 0; top: 0; width: min(30vw, 460px); aspect-ratio: 4 / 3;
  z-index: 5; pointer-events: none; opacity: 0;
  transition: opacity 0.3s ease;
  will-change: transform, opacity;
}
.ss-preview.is-active { opacity: 1; }

.ss-preview-frame {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  background: #0E0E0E; box-shadow: 0 40px 100px rgba(0,0,0,0.6), 0 0 0 1px rgba(188,255,86,0.15);
}

.ss-preview-img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.15) brightness(0.95);
}
.ss-preview-glitch {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.3) brightness(1.2);
  clip-path: inset(100% 0 0 0);
  animation: ssGlitchSlice 2.6s steps(1) infinite;
  will-change: clip-path, transform;
}
.ss-preview-duotone {
  position: absolute; inset: 0; background: #BCFF56; mix-blend-mode: multiply; opacity: 0.5;
}
.ss-preview-scanlines {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0.22) 0, rgba(0,0,0,0.22) 1px, transparent 1px, transparent 3px);
}
.ss-preview-sweep {
  position: absolute; left: 0; right: 0; top: -6%; height: 3px; background: #D6FE99;
  box-shadow: 0 0 16px rgba(214,254,153,0.9);
  animation: ssPreviewScan 2.4s linear infinite;
}
.ss-preview-rec {
  position: absolute; left: 10px; top: 8px; display: flex; align-items: center; gap: 6px;
  font-family: 'VCR OSD Mono', monospace; font-size: 10px; letter-spacing: 0.12em; color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.ss-rec-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #FF4D4D;
  box-shadow: 0 0 6px rgba(255,77,77,0.9);
  animation: blink 1.1s steps(1) infinite;
}

@media (hover: none) {
  .ss-preview { display: none !important; }
}

/* ============ next slot ============ */
.ss-next-section { max-width: 1440px; margin: 0 auto; padding: 96px 80px 40px; box-sizing: border-box; }
.ss-next { border-top: 1px solid #2E2E2E; padding: 32px 0 0; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; }
.ss-next-left { display: flex; align-items: baseline; gap: 18px; }
.ss-next-num { font-family: 'VCR OSD Mono', monospace; font-size: 13px; color: #565656; }
.ss-next-label { font-weight: 400; font-size: clamp(24px, 2.4vw, 34px); letter-spacing: -0.03em; line-height: 1; color: #565656; }
.ss-next-tag { font-family: 'VCR OSD Mono', monospace; font-size: 11px; letter-spacing: 0.14em; color: #3E3E3E; text-transform: uppercase; white-space: nowrap; }

/* ============ cta ============ */
.ss-cta { max-width: 1440px; margin: 0 auto; padding: 140px 80px 120px; box-sizing: border-box; }
.ss-cta-eyebrow { display: block; font-family: 'VCR OSD Mono', monospace; font-size: 13px; letter-spacing: 0.12em; color: #747474; text-transform: uppercase; }
.ss-cta-link {
  display: inline-block; margin-top: 32px; font-family: 'VCR OSD Mono', monospace;
  font-size: clamp(28px, 5vw, 72px); color: #FFFFFF; text-decoration: none; text-transform: uppercase; line-height: 1.1;
  transition: color 0.2s ease;
}
.ss-cta-link:hover { color: #BCFF56; }

/* ============ mobile + tablet ============
   Below 1200px the huge, fluidly-scaled row name (clamp up to 150px) gets
   wide enough, for at least one of the three project names, to collide
   with the sector label if they stay on the same line. Left to the
   default flex-wrap, that collision resolves inconsistently: depending on
   exact name/sector text length, some rows wrap and others don't at the
   very same viewport width (e.g. "Ziotech" stays inline while "Grooming
   Masters" drops the sector to a new line flush against the row's left
   edge, disconnected from the name above it). Force the stacked layout
   deliberately for every row across the whole band, so behavior is
   uniform across all three rows at any width and reads as an intentional
   design rather than an accidental wrap. */
@media (max-width: 1199px) {
  .ss-row-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
}
@media (max-width: 900px) {
  .ss-hero, .ss-index-section, .ss-next-section, .ss-cta { padding-left: 22px !important; padding-right: 22px !important; }
}
@media (max-width: 760px) {
  .ss-row { padding: 26px 0; }
  .ss-row-inner { gap: 10px; }
  .ss-row-name { font-size: clamp(38px, 12vw, 64px); }
  .ss-hero-row { align-items: flex-start; }
}