/* ============================================================
   ABOUT v2 — "Living Systems" immersive experience
   Scenes: canvas organism hero · marquee · scrub manifesto ·
   belief contrast · pinned horizontal chapters · ALIVE rows
   with cursor previews · full-bleed parallax mission/vision ·
   operators · closing. Scoped .ls-*, loaded only on about.html
   ============================================================ */

.ls {
  --serif: "Fraunces", Georgia, serif;
  --ls-mint: #7fe0ab;
}
.ls .container { width: min(1240px, 92%); }

/* ---------- shared reveal primitives ---------- */
.ls-rise { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.ls-rise.in { opacity: 1; transform: none; }
.ls-rise.d1 { transition-delay: .12s; } .ls-rise.d2 { transition-delay: .24s; }
.ls-rise.d3 { transition-delay: .36s; } .ls-rise.d4 { transition-delay: .48s; }

.ls-words span {
  display: inline-block; opacity: 0; transform: translateY(42px) rotate(3deg);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.ls-words.in span { opacity: 1; transform: none; }

.ls-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--green);
}
.ls-eyebrow::before { content: ""; width: 36px; height: 2px; background: currentColor; }

/* ============================================================
   1 · HERO — living organism canvas
   ============================================================ */
.ls-hero {
  position: relative; min-height: 100vh; display: flex; align-items: center;
  background: radial-gradient(130% 130% at 70% 0%, #1c1956 0%, var(--indigo-deep) 52%, #0a0920 100%);
  color: #fff; overflow: hidden; padding: 150px 0 110px;
}
#ls-organism { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.ls-hero .container { position: relative; z-index: 2; pointer-events: none; }
.ls-hero .container a, .ls-hero .container button { pointer-events: auto; }

.ls-hero h1 {
  font-family: var(--serif); font-weight: 500; letter-spacing: -.02em;
  font-size: clamp(42px, 7.4vw, 112px); line-height: 1.0; margin: 26px 0 30px; max-width: 13ch;
}
.ls-hero h1 .glow {
  font-style: italic; color: transparent;
  background: linear-gradient(100deg, var(--ls-mint), var(--blue));
  -webkit-background-clip: text; background-clip: text;
}
.ls-lead { font-size: clamp(17px, 2vw, 22px); color: rgba(255,255,255,.78); max-width: 520px; line-height: 1.65; }
.ls-lead strong { color: #fff; }

.ls-hero-meta {
  margin-top: 56px; display: flex; gap: clamp(24px, 5vw, 70px); flex-wrap: wrap;
}
.ls-hero-meta .m { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.ls-hero-meta .m b { display: block; margin-top: 6px; font-family: var(--serif); font-style: italic; font-size: 20px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #fff; }

.ls-scrollcue {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.5);
}
.ls-scrollcue .bar { width: 1px; height: 54px; background: linear-gradient(rgba(255,255,255,.4), transparent); position: relative; overflow: hidden; }
.ls-scrollcue .bar::after { content:""; position:absolute; top:-20px; left:0; width:1px; height:20px; background: var(--ls-mint); animation: lsCue 2s ease-in-out infinite; }
@keyframes lsCue { 0% { top:-20px; } 100% { top:54px; } }

/* ============================================================
   2 · MARQUEE — giant outlined verbs
   ============================================================ */
.ls-marquee { background: #fff; padding: clamp(40px,6vw,80px) 0; overflow: hidden; border-bottom: 1px solid var(--line); }
.ls-marquee-track {
  display: flex; gap: 0; width: max-content; white-space: nowrap;
  animation: lsMarquee 30s linear infinite;
}
.ls-marquee:hover .ls-marquee-track { animation-play-state: paused; }
@keyframes lsMarquee { to { transform: translateX(-50%); } }
.ls-marquee-track span {
  font-family: var(--serif); font-weight: 500; font-size: clamp(54px, 9vw, 130px); line-height: 1;
  padding-right: .45em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(51, 46, 135, .3);
}
.ls-marquee-track span.fill {
  -webkit-text-stroke: 0; font-style: italic;
  background: linear-gradient(100deg, var(--green), var(--blue));
  -webkit-background-clip: text; background-clip: text;
}

/* ============================================================
   3 · MANIFESTO — scroll-scrub text
   ============================================================ */
.ls-manifesto { background: #fff; padding: clamp(100px,14vw,200px) 0; }
.ls-scrub {
  font-family: var(--serif); font-weight: 400; letter-spacing: -.015em;
  font-size: clamp(28px, 4.6vw, 60px); line-height: 1.25; color: var(--ink); max-width: 24ch;
}
.ls-scrub .w { opacity: .12; transition: opacity .35s linear; }
.ls-scrub .w.lit { opacity: 1; }
.ls-scrub .w.em { font-style: italic; color: var(--indigo); }
.ls-scrub .w.acc { font-style: italic; color: var(--green); }
.ls-trademark {
  display: inline-block; margin-top: 44px; font-family: var(--serif); font-style: italic;
  font-size: clamp(22px,2.8vw,36px); color: var(--indigo);
  border-bottom: 2px solid var(--green); padding-bottom: 8px;
}

/* ============================================================
   4 · BELIEF — software vs living systems
   ============================================================ */
.ls-belief { background: var(--indigo-deep); color: #fff; padding: clamp(90px,12vw,160px) 0; overflow: hidden; position: relative; }
.ls-belief::after {
  content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(27,157,217,.35), transparent 70%); right: -160px; top: -160px; pointer-events: none;
}
.ls-belief .ls-eyebrow { color: var(--ls-mint); }
.ls-belief h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(30px,4.2vw,56px); margin: 22px 0 64px; max-width: 16ch; }
.ls-row {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(20px,5vw,80px);
  padding: 30px 0; border-top: 1px solid rgba(255,255,255,.12); position: relative; z-index: 1;
}
.ls-row:last-of-type { border-bottom: 1px solid rgba(255,255,255,.12); }
.ls-soft { text-align: right; font-size: clamp(17px,2vw,26px); color: rgba(255,255,255,.4); position: relative; }
.ls-soft::after {
  content: ""; position: absolute; left: 0; right: 0; top: 52%; height: 2px;
  background: rgba(255,255,255,.5); transform: scaleX(0); transform-origin: right;
  transition: transform .7s var(--ease) .2s;
}
.ls-row.in .ls-soft::after { transform: scaleX(1); }
.ls-vs {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.25); font-size: 12px; letter-spacing: .08em; color: rgba(255,255,255,.6);
}
.ls-live {
  font-size: clamp(18px,2.2vw,28px); font-weight: 700;
  color: transparent; background: linear-gradient(100deg, var(--ls-mint), var(--blue));
  -webkit-background-clip: text; background-clip: text;
  opacity: 0; transform: translateX(26px); transition: opacity .7s var(--ease) .3s, transform .7s var(--ease) .3s;
}
.ls-row.in .ls-live { opacity: 1; transform: none; }
.ls-closer { margin-top: 64px; font-family: var(--serif); font-style: italic; font-size: clamp(20px,2.5vw,32px); }

/* ============================================================
   5 · CHAPTERS — pinned horizontal scroll
   ============================================================ */
.ls-hwrap { position: relative; height: 340vh; background: #fff; }
.ls-hsticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.ls-htrack { display: flex; width: 300vw; will-change: transform; }
.ls-hpanel {
  width: 100vw; height: 100vh; flex: 0 0 100vw;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  gap: clamp(30px,5vw,80px); padding: 110px clamp(5vw,8vw,10vw) 60px;
}
.ls-hpanel .txt .chip {
  display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  padding: 9px 18px; border-radius: 999px; margin-bottom: 26px;
}
.ls-hpanel:nth-child(1) .chip { background: rgba(27,157,217,.1); color: var(--blue); }
.ls-hpanel:nth-child(2) .chip { background: rgba(0,161,75,.1); color: var(--green); }
.ls-hpanel:nth-child(3) .chip { background: rgba(106,92,255,.1); color: #6a5cff; }
.ls-hpanel .idx { font-family: var(--serif); font-size: clamp(60px,8vw,120px); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(51,46,135,.25); margin-bottom: 8px; }
.ls-hpanel h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(34px,4.6vw,68px); line-height: 1.05; margin-bottom: 22px; }
.ls-hpanel h3 em { font-style: italic; }
.ls-hpanel.p1 h3 em { color: var(--blue); } .ls-hpanel.p2 h3 em { color: var(--green); } .ls-hpanel.p3 h3 em { color: #6a5cff; }
.ls-hpanel .txt p { color: var(--gray); font-size: clamp(15px,1.4vw,18px); max-width: 46ch; line-height: 1.7; }
.ls-htags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.ls-htags span {
  font-size: 13px; font-weight: 700; padding: 9px 17px; border-radius: 999px;
  background: var(--bg-soft); border: 1px solid var(--line); color: var(--ink);
}
.ls-hpanel .pic {
  position: relative; border-radius: 24px; overflow: hidden; height: min(62vh, 560px);
  box-shadow: var(--shadow-lg);
}
.ls-hpanel .pic img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); will-change: transform; }
.ls-hpanel .pic::after { content:""; position:absolute; inset:0; background: linear-gradient(200deg, rgba(23,21,64,.18), transparent 50%); }

.ls-hprogress {
  position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; z-index: 3;
}
.ls-hprogress .seg { width: 54px; height: 3px; border-radius: 99px; background: var(--line); overflow: hidden; }
.ls-hprogress .seg i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--green), var(--blue)); transform: scaleX(0); transform-origin: left; transition: transform .2s linear; }

/* ============================================================
   6 · ALIVE — interactive rows + cursor preview
   ============================================================ */
.ls-philosophy {
  position: relative; padding: clamp(90px,12vw,160px) 0; overflow: hidden; color: #fff;
  background: radial-gradient(120% 130% at 20% 0%, #1a1750, var(--indigo-deep) 58%, #0b0a20);
}
.ls-philosophy .ls-eyebrow { color: var(--ls-mint); }
.ls-alive-head { font-family: var(--serif); font-weight: 500; font-size: clamp(34px,5.6vw,84px); line-height: 1.06; margin: 22px 0 16px; }
.ls-alive-head .word { font-style: italic; color: transparent; background: linear-gradient(100deg, var(--ls-mint), var(--blue) 55%, #9b7bff); -webkit-background-clip: text; background-clip: text; }
.ls-neg { color: rgba(255,255,255,.6); font-size: clamp(16px,1.6vw,20px); max-width: 600px; line-height: 1.7; margin-bottom: 70px; }
.ls-neg b { color: #fff; }

.ls-alive-list { position: relative; }
.ls-alive-row {
  display: grid; grid-template-columns: 70px 1fr 1.1fr; align-items: center; gap: clamp(16px,3vw,50px);
  padding: 30px 0; border-top: 1px solid rgba(255,255,255,.14); cursor: default;
  transition: padding .45s var(--ease);
}
.ls-alive-row:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.ls-alive-row .no { font-size: 13px; letter-spacing: .12em; color: rgba(255,255,255,.4); }
.ls-alive-row .ttl {
  font-family: var(--serif); font-weight: 500; font-size: clamp(30px,4.4vw,64px); line-height: 1;
  transition: transform .45s var(--ease), color .45s;
}
.ls-alive-row .dsc { color: rgba(255,255,255,.62); font-size: clamp(14px,1.3vw,17px); line-height: 1.65; max-width: 46ch; }
.ls-alive-row:hover { padding-left: 14px; }
.ls-alive-row:hover .ttl {
  color: transparent; background: linear-gradient(100deg, var(--ls-mint), var(--blue));
  -webkit-background-clip: text; background-clip: text; font-style: italic; transform: translateX(6px);
}
.ls-preview {
  position: fixed; z-index: 60; width: 320px; height: 210px; border-radius: 16px; overflow: hidden;
  pointer-events: none; opacity: 0; transform: scale(.85) rotate(-3deg);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  box-shadow: 0 30px 70px rgba(0,0,0,.45); will-change: left, top;
}
.ls-preview.show { opacity: 1; transform: scale(1) rotate(-2deg); }
.ls-preview img { width: 100%; height: 100%; object-fit: cover; }
@media (pointer: coarse) { .ls-preview { display: none; } }

/* ============================================================
   7 · MISSION / VISION — full-bleed parallax scenes
   ============================================================ */
.ls-scene { position: relative; min-height: 96vh; display: flex; align-items: center; overflow: hidden; color: #fff; padding: 120px 0; }
.ls-scene .bg { position: absolute; inset: -14% 0; background-size: cover; background-position: center; will-change: transform; }
.ls-scene.mission .bg { background-image: url("../img/about-mission.jpg"); }
.ls-scene.vision  .bg { background-image: url("../img/about-vision.jpg"); }
.ls-scene .shade { position: absolute; inset: 0; }
.ls-scene.mission .shade { background: linear-gradient(100deg, rgba(10,9,32,.92) 18%, rgba(23,21,64,.55) 55%, rgba(10,9,32,.25)); }
.ls-scene.vision  .shade { background: linear-gradient(-100deg, rgba(10,9,32,.92) 18%, rgba(23,21,64,.55) 55%, rgba(10,9,32,.25)); }
.ls-scene .container { position: relative; z-index: 2; }
.ls-scene .inner { max-width: 620px; }
.ls-scene.vision .inner { margin-left: auto; text-align: right; }
.ls-scene.vision .ls-eyebrow { flex-direction: row-reverse; }
.ls-scene .ls-eyebrow { color: var(--ls-mint); }
.ls-scene h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(32px,4.6vw,62px); line-height: 1.08; margin: 24px 0 24px; }
.ls-scene h2 em { font-style: italic; color: transparent; background: linear-gradient(100deg, var(--ls-mint), var(--blue)); -webkit-background-clip: text; background-clip: text; }
.ls-scene p { color: rgba(255,255,255,.82); font-size: clamp(15px,1.5vw,19px); line-height: 1.75; }
.ls-scene p + p { margin-top: 16px; }
.ls-scene .sig { margin-top: 34px; font-family: var(--serif); font-style: italic; font-size: clamp(18px,2vw,24px); color: var(--ls-mint); }

/* ============================================================
   8 · OPERATORS
   ============================================================ */
.ls-how { background: #fff; padding: clamp(90px,12vw,160px) 0; }
.ls-how-head { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: end; margin-bottom: 60px; }
.ls-how-head h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(28px,3.8vw,52px); margin-top: 20px; line-height: 1.1; }
.ls-how-head p { color: var(--gray); font-size: clamp(15px,1.4vw,18px); line-height: 1.7; }
.ls-operators {
  position: relative; border-radius: 28px; overflow: hidden; padding: clamp(40px,5vw,72px);
  background: linear-gradient(140deg, var(--indigo-deep), var(--indigo)); color: #fff;
}
.ls-operators::before { content:""; position:absolute; width:480px; height:480px; right:-140px; bottom:-200px; border-radius:50%; background: radial-gradient(circle, var(--blue), transparent 68%); opacity:.35; }
.ls-operators .tag { display:inline-block; font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:800; color: var(--ls-mint); margin-bottom:18px; }
.ls-operators h3 { font-family: var(--serif); font-weight:500; font-size: clamp(24px,3vw,42px); margin-bottom:18px; max-width:20ch; position:relative; z-index:1; }
.ls-operators p { color: rgba(255,255,255,.8); font-size: clamp(15px,1.4vw,18px); line-height:1.75; max-width:64ch; position:relative; z-index:1; }
.ls-op-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:14px; margin-top:36px; position:relative; z-index:1; }
.ls-op-grid a {
  position: relative; border-radius: 16px; overflow: hidden; height: 150px;
  display: flex; align-items: flex-end; padding: 16px; font-weight: 800; color:#fff;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.ls-op-grid a:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,.4); }
.ls-op-grid a img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.ls-op-grid a:hover img { transform: scale(1.08); }
.ls-op-grid a::after { content:""; position:absolute; inset:0; background: linear-gradient(transparent 30%, rgba(13,12,38,.85)); }
.ls-op-grid a span { position: relative; z-index:1; }

/* ============================================================
   9 · CLOSING
   ============================================================ */
.ls-closing {
  position: relative; min-height: 92vh; display: grid; place-items: center; text-align: center; overflow: hidden;
  background: radial-gradient(120% 120% at 50% 30%, #1c1956, var(--indigo-deep) 55%, #0a0920); color: #fff;
  padding: 120px 0;
}
#ls-organism2 { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }
.ls-closing .container { position: relative; z-index: 2; }
.ls-closing h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(34px,6vw,96px); line-height: 1.04; letter-spacing: -.02em; }
.ls-closing h2 em { font-style: italic; color: transparent; background: linear-gradient(100deg, var(--ls-mint), var(--blue)); -webkit-background-clip:text; background-clip:text; }
.ls-closing .tagline { margin: 30px 0 46px; font-size: clamp(15px,1.8vw,21px); color: rgba(255,255,255,.65); letter-spacing:.16em; text-transform: uppercase; }
.ls-closing .hero-actions { justify-content: center; }

/* ============================================================
   RESPONSIVE + MOTION
   ============================================================ */
@media (max-width: 980px) {
  .ls-hwrap { height: auto; }
  .ls-hsticky { position: static; height: auto; overflow: visible; }
  .ls-htrack { flex-direction: column; width: 100% !important; transform: none !important; }
  .ls-hpanel { width: 100%; flex: none; height: auto; grid-template-columns: 1fr; padding: 60px 6vw; gap: 30px; }
  .ls-hpanel .pic { height: 300px; order: -1; }
  .ls-hprogress { display: none; }
  .ls-how-head { grid-template-columns: 1fr; }
  .ls-op-grid { grid-template-columns: repeat(2,1fr); }
  .ls-alive-row { grid-template-columns: 48px 1fr; }
  .ls-alive-row .dsc { grid-column: 2; margin-top: 8px; }
  .ls-scene.vision .inner { text-align: left; margin-left: 0; }
  .ls-scene.vision .ls-eyebrow { flex-direction: row; }
}
@media (max-width: 600px) {
  .ls-row { grid-template-columns: 1fr; gap: 10px; padding: 22px 0; }
  .ls-soft { text-align: left; }
  .ls-vs { display: none; }
  .ls-op-grid { grid-template-columns: 1fr 1fr; }
  .ls-hero-meta { gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .ls-marquee-track, .ls-scrollcue .bar::after { animation: none !important; }
  .ls-rise, .ls-words span, .ls-live, .ls-scrub .w { opacity: 1 !important; transform: none !important; }
  .ls-soft::after { transform: scaleX(1) !important; }
  .ls-preview { display: none !important; }
}