/* ═══════════════════════════════════════════════════════════════════════
   LexiNexiAI — index page luxury motion layer
   Static styling lives in templates/index.html (.lux-*). This file adds
   only motion + the mono/square-edge typographic details.
   Paired with static/js/index-motion.js (toggles .is-in / .hero-loaded
   and writes --py / --sc / --rp / --sp custom properties).
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --lx-ease-sig:    cubic-bezier(.16, 1, .3, 1);   /* reveals */
  --lx-ease-swift:  cubic-bezier(.2, .9, .2, 1);   /* impact  */
  --lx-ease-cut:    cubic-bezier(.33, 1, .68, 1);  /* the cut */
  --lx-ease-blade:  cubic-bezier(.7, 0, .2, 1);    /* blade   */
}

/* ─────────────────────────── keyframes ─────────────────────────── */
@keyframes lxTickPulse   { 0%,100% { opacity:.25; } 50% { opacity:.9; } }
@keyframes lxDrawLine    { 0% { transform:scaleX(0); } 100% { transform:scaleX(1); } }
@keyframes lxSlideRight  { 0% { opacity:0; transform:translateX(60vw); } 100% { opacity:1; transform:none; } }
@keyframes lxInkIn       { 0% { color:#d4d4d4; transform:translateY(7px); } 100% { color:#0a0a0a; transform:none; } }
@keyframes lxRiseIn      { 0% { opacity:0; transform:translateY(20px); filter:blur(5px); }
                           100% { opacity:1; transform:none; filter:blur(0); } }
@keyframes lxBladeDrop   { 0% { transform:scaleY(0); opacity:0; } 30% { opacity:1; }
                           60% { transform:scaleY(1); opacity:1; } 100% { transform:scaleY(1); opacity:0; } }
@keyframes lxPartLeft    { 0% { transform:translateX(0); } 20%,70% { transform:translateX(-72px); } 100% { transform:translateX(0); } }
@keyframes lxPartRight   { 0% { transform:translateX(0); } 20%,70% { transform:translateX(72px); }  100% { transform:translateX(0); } }
@keyframes lxRingDraw    { 0% { stroke-dashoffset:320; opacity:0; } 15% { stroke-dashoffset:272; opacity:1; }
                           85% { stroke-dashoffset:48; opacity:1; } 100% { stroke-dashoffset:0; opacity:.25; } }
@keyframes lxPortraitIn  { 0% { opacity:0; transform:scale(1.14); filter:blur(12px); }
                           100% { opacity:1; transform:scale(1); filter:blur(0); } }
@keyframes lxSlamIn {
  0%   { opacity:0; transform:translateY(52px) scale(1.4); filter:blur(16px); }
  58%  { opacity:1; transform:translateY(0) scale(1);      filter:blur(0); }
  74%  { opacity:1; transform:translateY(-5px) scale(1.025); filter:blur(0); }
  100% { opacity:1; transform:none; filter:blur(0); }
}
@keyframes lxKick        { 0%,100% { transform:translateY(0); } 35% { transform:translateY(6px); } 70% { transform:translateY(-2px); } }
@keyframes lxSweepBand   { 0% { transform:translateX(-60%); opacity:0; } 20% { opacity:1; } 80% { opacity:1; }
                           100% { transform:translateX(220%); opacity:0; } }
@keyframes lxShimmer     { 0% { background-position:-200% 0; } 100% { background-position:200% 0; } }
@keyframes lxBreatheGlow {
  0%,100% { box-shadow:0 8px 28px rgba(232,89,12,.16), 0 2px 8px rgba(10,10,10,.08); }
  50%     { box-shadow:0 14px 44px rgba(232,89,12,.30), 0 2px 8px rgba(10,10,10,.08); }
}

/* ─────────────────── global chrome: reading hairline ─────────────────── */
.lux-progress {
  position:fixed; top:0; left:0; right:0; height:1.5px; z-index:99991;
  background:linear-gradient(90deg,#0a0a0a,#e8590c);
  transform:scaleX(var(--sp, 0)); transform-origin:left; pointer-events:none;
}

/* ───────────────────────── mono label style ───────────────────────── */
.lux-mono {
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:10.5px; font-weight:500; letter-spacing:.24em;
  text-transform:uppercase; color:#8a8a85;
}
.lux-eyebrow.lux-mono { display:inline-flex; align-items:center; gap:9px; margin-bottom:26px; color:#8a8a85; }
.lux-eyebrow .dot { width:5px; height:5px; border-radius:50%; background:#e8590c;
                    display:inline-block; animation:lxTickPulse 3.4s ease-in-out infinite; }
.lux-monolink {
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:#6b7280 !important; text-decoration:none !important;
}
.lux-monolink:hover { color:#e8590c !important; }

/* ──────────────────────────── hero ──────────────────────────── */
.lux-hero { position:relative; overflow:hidden; }
.lux-hero > .lux-hero-inner { position:relative; z-index:1; }
.lux-grid   { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.lux-glow   { position:absolute; inset:0; z-index:0; pointer-events:none; transition:background .15s ease-out; }
.lux-corner { position:absolute; top:26px; left:32px; right:32px; z-index:1;
              display:flex; justify-content:space-between; pointer-events:none;
              font-family:'IBM Plex Mono', ui-monospace, monospace;
              font-size:10px; letter-spacing:.2em; color:#b4b4ad; }

/* hero load stagger — driven by --d per element */
.lux-hero .lx-w, .lux-hero .lx-fade { opacity:0; }
.lux-hero .lx-w {
  display:inline-block; transform:translateY(26px);
  transition:opacity .9s var(--lx-ease-sig) var(--d,0ms), transform .9s var(--lx-ease-sig) var(--d,0ms);
}
.lux-hero .lx-fade {
  transform:translateY(16px);
  transition:opacity .8s ease var(--d,0ms), transform .8s ease var(--d,0ms);
}
.lux-hero.hero-loaded .lx-w,
.lux-hero.hero-loaded .lx-fade { opacity:1; transform:none; }

.lux-hero-rule {
  height:1px; width:240px; margin:30px auto 0;
  background:linear-gradient(90deg,transparent,#0a0a0a 50%,transparent);
  animation:lxDrawLine 1.6s var(--lx-ease-sig) .6s both;
}

/* square-edge CTA with the slow glow */
.lux-btn { border-radius:2px !important; animation:lxBreatheGlow 5s ease-in-out infinite; }

/* shimmering hairline under the hero */
.lux-shimmer {
  height:1px; border:0; margin:0;
  background:linear-gradient(90deg,transparent,#ededed 20%,#ededed 80%,transparent),
             linear-gradient(90deg,transparent,rgba(232,89,12,.5) 50%,transparent);
  background-size:100% 100%, 50% 100%; background-repeat:no-repeat;
  animation:lxShimmer 7s linear infinite;
}

/* ───────────────── section reveal · parallax · rules ───────────────── */
.lux-sec[data-lux-section] {
  opacity:0; transform:translateY(28px);
  transition:opacity .9s var(--lx-ease-sig), transform .9s var(--lx-ease-sig);
}
.lux-sec[data-lux-section].is-in { opacity:1; transform:none; }

.lux-inner {
  transform:translate3d(0, var(--py, 0px), 0) scale(var(--sc, 1));
  transform-origin:50% 0; will-change:transform; transition:transform .5s ease-out;
}

.lux-secrule {
  height:1px; width:min(680px,78%); margin:0 auto clamp(56px,7vw,84px);
  background:linear-gradient(90deg,transparent,#dcdad6 50%,transparent);
  transform:scaleX(var(--rp, 0)); transform-origin:center;
  opacity:calc(.25 + .75 * var(--rp, 0));
}

/* ───────────── 0 · capabilities: words ink grey → black ───────────── */
.lux-caps b { display:inline-block; color:#0a0a0a; }
[data-lux-section="caps"].is-in .lux-caps b {
  animation:lxInkIn 750ms var(--lx-ease-sig) calc(120ms + var(--i, 0) * 150ms) both;
}

/* ───────────── 1 · promise: question → rule → answer → dwell ───────────── */
.lux-promise-q,
.lux-promise-a,
.lux-promise-p { opacity:0; }
.lux-promise-rule { display:block; width:132px; height:1px; margin:16px auto; background:#0a0a0a; transform:scaleX(0); }
.lux-promise-line { display:block; overflow:hidden; }
.lux-free { display:inline-block; margin-left:.25em; color:#e8590c; opacity:0; }

[data-lux-section="promise"].is-in .lux-promise-q    { animation:lxRiseIn   900ms var(--lx-ease-sig) 0ms    both; }
[data-lux-section="promise"].is-in .lux-promise-rule { animation:lxDrawLine 900ms var(--lx-ease-sig) 500ms  both; }
[data-lux-section="promise"].is-in .lux-promise-a    { animation:lxRiseIn  1000ms var(--lx-ease-sig) 1150ms both; }
[data-lux-section="promise"].is-in .lux-promise-p    { animation:lxRiseIn   900ms var(--lx-ease-sig) 1800ms both; }
/* the payoff — only earned after 3s of stillness */
.lux-free.free-in { animation:lxSlideRight 950ms var(--lx-ease-sig) 0ms both; }

/* ───────────── 2 · cost halving: blade drops, headline parts ───────────── */
.lux-cut-head { position:relative; display:block; opacity:0; }
.lux-cut-blade {
  position:absolute; top:-18px; bottom:-18px; left:50%; width:1px;
  background:linear-gradient(#e8590c,#0a0a0a,#e8590c);
  transform-origin:top; transform:scaleY(0); opacity:0;
}
.lux-cut-p { opacity:0; }

[data-lux-section="cut"].is-in .lux-cut-head  { animation:lxRiseIn    800ms var(--lx-ease-sig)  0ms    both; }
[data-lux-section="cut"].is-in .lux-cut-blade { animation:lxBladeDrop 1100ms var(--lx-ease-blade) 1400ms both; }
[data-lux-section="cut"].is-in .lux-cut-l     { animation:lxPartLeft  2500ms var(--lx-ease-cut) 3000ms both; }
[data-lux-section="cut"].is-in .lux-cut-r     { animation:lxPartRight 2500ms var(--lx-ease-cut) 3000ms both; }
[data-lux-section="cut"].is-in .lux-cut-p     { animation:lxRiseIn    900ms var(--lx-ease-sig) 1500ms both; }

/* ───────────── 3 · live proof: word by word, rows swipe in ───────────── */
.lux-proof-w { display:inline-block; margin-right:.28em; opacity:0; }
.lux-proof-lead { opacity:0; }
[data-lux-section="proof"].is-in .lux-proof-w    { animation:lxRiseIn 700ms var(--lx-ease-sig) calc(var(--i, 0) * 90ms) both; }
[data-lux-section="proof"].is-in .lux-proof-lead { animation:lxRiseIn 800ms var(--lx-ease-sig) 780ms both; }

.lux-rowwrap {
  opacity:0; transform:translateX(-56px);
  transition:opacity .55s var(--lx-ease-swift) calc(var(--i, 0) * 120ms),
             transform .55s var(--lx-ease-swift) calc(var(--i, 0) * 120ms);
}
.lux-rowwrap.is-in { opacity:1; transform:none; }
.lux-rowrule {
  height:1px; background:#ededed; transform:scaleX(0); transform-origin:left;
  transition:transform 1.1s var(--lx-ease-sig) calc(var(--i, 0) * 110ms + 60ms);
}
.lux-rowwrap.is-in .lux-rowrule { transform:scaleX(1); }

/* ───────────── 4 · founder: words first, ring draws, face lands ───────────── */
.lux-founder-h,
.lux-founder-lead,
.lux-founder-verify { opacity:0; }
.lux-portrait { position:relative; width:132px; height:132px; margin:34px auto 8px; }
.lux-portrait svg { position:absolute; inset:0; transform:rotate(-90deg); overflow:visible; }
.lux-portrait img {
  position:absolute; top:14px; left:14px; width:104px; height:104px;
  border-radius:50%; object-fit:cover; display:block; opacity:0;
  box-shadow:0 12px 34px rgba(10,10,10,.14);
}
.lux-ring { opacity:0; }
[data-lux-section="founder"].is-in .lux-founder-h      { animation:lxRiseIn     900ms var(--lx-ease-sig) 0ms    both; }
[data-lux-section="founder"].is-in .lux-founder-lead   { animation:lxRiseIn     900ms var(--lx-ease-sig) 320ms  both; }
[data-lux-section="founder"].is-in .lux-ring           { animation:lxRingDraw  2600ms cubic-bezier(.4,0,.2,1) 700ms both; }
[data-lux-section="founder"].is-in .lux-portrait img   { animation:lxPortraitIn 1400ms var(--lx-ease-sig) 3000ms both; }
[data-lux-section="founder"].is-in .lux-founder-verify { animation:lxRiseIn     900ms var(--lx-ease-sig) 4000ms both; }

/* ───────────── 5 · final CTA: letters slam, panel kicks, light sweeps ───────────── */
.lux-impact { position:relative; overflow:hidden; }
.lux-impact-sweep {
  position:absolute; top:0; left:0; width:34%; height:100%; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(232,89,12,.10),transparent); opacity:0;
}
.lux-char { display:inline-block; opacity:0; }
.lux-char.is-space { width:.3em; }
.lux-impact-p, .lux-impact-cta { opacity:0; }

[data-lux-section="impact"].is-in .lux-char       { animation:lxSlamIn    760ms var(--lx-ease-swift) calc(60ms + var(--i, 0) * 42ms) both; }
[data-lux-section="impact"].is-in .lux-kick       { animation:lxKick      420ms cubic-bezier(.3,0,.3,1) 1000ms both; }
[data-lux-section="impact"].is-in .lux-impact-sweep { animation:lxSweepBand 1400ms cubic-bezier(.4,0,.2,1) 1060ms both; }
[data-lux-section="impact"].is-in .lux-impact-p   { animation:lxRiseIn    900ms var(--lx-ease-sig) 1250ms both; }
[data-lux-section="impact"].is-in .lux-impact-cta { animation:lxRiseIn    900ms var(--lx-ease-sig) 1450ms both; }

/* footer content lift (driven from JS) */
.main-footer .lux-footdrift { transition:transform .8s var(--lx-ease-sig); }

/* ───────────────────────── reduced motion ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lux-progress { display:none; }
  .lux-grid, .lux-glow, .lux-impact-sweep { display:none; }

  /* everything renders in its final state, immediately */
  .lux-sec[data-lux-section],
  .lux-hero .lx-w, .lux-hero .lx-fade,
  .lux-promise-q, .lux-promise-a, .lux-promise-p, .lux-free,
  .lux-cut-head, .lux-cut-p,
  .lux-proof-w, .lux-proof-lead, .lux-rowwrap,
  .lux-founder-h, .lux-founder-lead, .lux-founder-verify, .lux-portrait img,
  .lux-char, .lux-impact-p, .lux-impact-cta {
    opacity:1 !important; transform:none !important; filter:none !important;
  }
  .lux-promise-rule, .lux-rowrule, .lux-hero-rule { transform:scaleX(1) !important; }
  .lux-secrule { transform:scaleX(1) !important; opacity:1 !important; }
  .lux-cut-blade { display:none; }
  .lux-ring { opacity:.25 !important; stroke-dashoffset:0 !important; }
  .lux-inner { transform:none !important; }
  .lux-caps b { color:#0a0a0a !important; }

  /* silence every loop */
  .lux-btn, .lux-shimmer, .lux-eyebrow .dot,
  .lux-sec[data-lux-section], .lux-hero .lx-w, .lux-hero .lx-fade,
  .lux-rowwrap, .lux-rowrule, .lux-inner, .main-footer .lux-footdrift {
    animation:none !important; transition:none !important;
  }
}

/* ───────────────────────────── mobile ───────────────────────────── */
@media (max-width:720px) {
  .lux-corner { display:none; }
  .lux-glow   { display:none; }
}