/* ============================================================
   landing-film2.css, OPTION 6's SECOND FOLD.

   Option 6 is Option 5 with a different film, so Option 5 can be gone back to
   untouched. The section, the copy, the panel and the CTA are the same; what
   this file adds is the TWO-LAYER scene js/landing-film2.js drives.

     .lf-deep   the model Spark reasons over. Always present, almost never in
                focus, drifting the whole time. Its blur is a CLASS with one
                transition on it, not a per-frame filter, which is most of why
                this version does not stutter.
     .lf-vp     the foreground, holding exactly one thing at a time, sharp.

   NOTHING IN HERE RESTYLES A PRODUCT CLASS. The rules marked LOCAL FIT adapt a
   component to a context it was never built for and change GEOMETRY only.
   ============================================================ */

.lp-film3{display:none}
html[data-lp-option="6"] .lp-film3{display:flex;position:relative;z-index:1;
  min-height:100dvh;align-items:center;
  padding-block:clamp(56px,8vh,104px);
  background:#141519}
html[data-lp-option="6"] .lp-film3 > .lp-wrap{flex:1}

.lp-film3__in{display:grid;align-items:center;
  grid-template-columns:minmax(0,1fr) clamp(560px,60%,860px);
  column-gap:clamp(36px,4.4vw,80px)}
.lp-film3__copy{display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(16px,1.8vh,24px);max-width:450px}
/* the same lighter voice Option 5 settled on: 500 weight, tracking eased off */
.lp-film3__h{font-size:clamp(33px,3.5vw,54px);line-height:1.06;font-weight:500;
  letter-spacing:-.028em;color:#fff;text-wrap:balance}
.lp-film3__h em{font-style:normal;font-weight:600;color:var(--accent)}
.lp-film3__sub{font-size:clamp(15px,1.15vw,17.5px);line-height:1.62;font-weight:400;
  color:rgba(255,255,255,.7);max-width:46ch}
.lp-film3__cta{margin-top:6px}

@keyframes lfRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.lp-film3__copy{animation:lfRise .7s var(--ease) both}
.lp-film3__stage{animation:lfRise .7s var(--ease) both;animation-delay:.12s}

/* ---- the panel ---------------------------------------------------------
   min-height, never height: a box may be a share of the viewport but never
   smaller than what it holds. The lift is the kit's light shadow; the hairline
   does most of the work. */
.lf-panel{position:relative;overflow:hidden;
  min-height:clamp(540px,74dvh,740px);
  border-radius:26px;
  background:var(--card);border:1px solid var(--card-stroke);
  box-shadow:var(--shadow-lg)}

.lf-key{position:absolute;z-index:0;pointer-events:none;opacity:0;
  left:50%;top:0;width:640px;height:640px;margin-top:-320px;
  will-change:transform,opacity;
  background:radial-gradient(closest-side, var(--glow), transparent 70%)}

/* ============================================================
   THE DEEP LAYER
   ============================================================
   Its own perspective, its own single moving child. Everything inside it is
   laid out once and never animated individually, so the drift costs one
   transform per frame no matter how much model is in there. */
.lf-deep{position:absolute;inset:0;z-index:1;pointer-events:none;
  perspective:1500px;perspective-origin:50% 50%;
  filter:blur(9px) saturate(.85);
  transition:filter 1.1s var(--ease)}
/* THE ONE EXPENSIVE PROPERTY, CHANGED TWICE A LOOP. In stage three the model
   is the subject, so it comes into focus; the rest of the time it is depth. */
.lf-deep.is-forward{filter:blur(1.2px) saturate(1)}
/* lit while Spark is reading it and while its meaning is held */
.lf-deep.is-lit .lf-star .lf-card{border-color:var(--border-hover)}
/* the offsets are written by layout() from its own measured size, because the
   block grows as the terms and the meaning arrive */
.lf-deep__in{position:absolute;left:50%;top:50%;
  transform-origin:50% 50%;will-change:transform,opacity;
  display:flex;flex-direction:column;align-items:center;gap:24px;width:568px}

/* the star schema. CARD_W / HD_H / ROW_H / GAP in js/landing-film2.js must
   match the four figures here, or the joins will not meet their rows. */
.lf-star{position:relative;display:flex;gap:44px;align-items:flex-start}
.lf-card{position:relative;width:152px;flex:none}
.lf-card .er-card__hd{height:44px}
.lf-card .er-card__row{height:24px}
.lf-card .er-card__nm{font-size:12px}
.lf-card .er-card__sub{font-size:9.5px;line-height:12px}
.lf-card .er-card__cn{font-size:10.5px}
/* the dimension both facts point at sits a fraction forward of them */
.lf-star .lf-card:nth-child(2){transform:scale(1.06);z-index:2}
/* a card is unlit until Spark has read it: the tint and the badges are the
   product's own, held back until the sweep has passed over the card */
.lf-card .er-card__row.is-pk,
.lf-card .er-card__row.is-fk{background:transparent;transition:background .7s var(--ease)}
.lf-card.is-read .er-card__row.is-pk{background:var(--glass)}
.lf-card.is-read .er-card__row.is-fk.is-reference{background:var(--success-soft)}
.lf-card .key{opacity:0;transform:scale(.7);
  transition:opacity .5s var(--ease),transform .5s cubic-bezier(.34,1.56,.64,1)}
.lf-card.is-read .key{opacity:1;transform:none}
.lf-card.is-syncing{pointer-events:none}

/* the joins: the ER graph's own edge, drawn from the key it matched */
.lf-joins{position:absolute;inset-block-start:0;inset-inline-start:0;
  z-index:3;overflow:visible;pointer-events:none}
.lf-joins path{stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1s var(--ease)}
.lf-joins path.is-drawn{stroke-dashoffset:0}
.lf-joins circle{opacity:0;transition:opacity .45s var(--ease) .6s}
.lf-joins circle.is-drawn{opacity:1}

/* the terms the same semantic layer learned, so the one that resolves reads as
   one of a set rather than as a one-off */
.lf-terms{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.lf-term-chip{height:26px;padding:0 11px;font-size:11.5px;
  opacity:0;transform:translateY(8px) scale(.94);
  transition:opacity .55s var(--ease),transform .6s var(--ease)}
.lf-term-chip.is-in{opacity:1;transform:none}

/* LOCAL FIT: .sem-term sits in a three up grid on the Semantic Intelligence
   tab and has no width of its own. */
.lf-term{width:430px;padding:14px 17px;
  opacity:0;transform:translateY(14px) scale(.95);
  transition:opacity .65s var(--ease),transform .7s var(--ease)}
.lf-term.is-in{opacity:1;transform:none}
.lf-term .sem-term__m{font-size:12.5px;line-height:19px}

/* ============================================================
   THE FOREGROUND
   ============================================================ */
.lf-vp{position:absolute;inset:0;z-index:2;
  perspective:1200px;perspective-origin:50% 50%}
.lf-world{position:absolute;inset:0;transform-style:preserve-3d}
.lf-obj{position:absolute;left:50%;top:50%;transform-origin:0 0;
  visibility:hidden;backface-visibility:hidden;
  will-change:transform,opacity,filter}
.lf-obj__i{display:block}
/* the widget library's charts size to their container, so the scene is laid
   out normally while they mount and hidden by opacity, never by display or
   visibility, which would give them nothing to measure */
.lf.is-booting .lf-panel > *{opacity:0}
.lf.is-measuring .lf-wrow{transition:none}
.lf.is-measuring .lf-wrow.is-in{grid-template-rows:1fr;opacity:1;margin-top:12px}
.lf.is-measuring .lf-ans .zw{transition:none;opacity:1;transform:none;filter:none}

/* ---- stage 1: the sources ---------------------------------------------
   LOCAL FIT: .ds-row is a full width row in a list; here each is an object in
   space, so it needs a width and the compact end of its own type. */
.lf-src{width:352px;padding:13px 15px;gap:12px;cursor:default}
.lf-src .ds-card__mono{width:30px;height:30px}
.lf-src .ds-row__nm{font-size:14px}
.lf-src .ds-row__meta{font-size:12px}
.lf-src .ds-row__body{gap:5px}
.lf-tag{height:23px;padding:0 9px;font-size:11.5px}
.lf-src .status-dot{transition:background .45s var(--ease)}

/* ---- stage 2: the composer, the product's own ------------------------- */
.lf-composer{width:530px;max-width:none;margin:0;padding:14px 16px;border-radius:22px;gap:12px}
.lf-composer textarea{font-size:14px;line-height:20px;min-height:20px;cursor:default}
.lf-composer.is-typing{border-color:var(--glass-2)}
.lf-composer .send{position:relative;
  transition:transform .2s var(--ease),background .2s var(--ease)}
.lf-composer .send:not(:disabled){background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.lf-composer.is-firing .send{transform:scale(.86)}
/* the one flourish, on the one control that is an action */
.lf-composer .send::after{content:"";position:absolute;inset:-1px;border-radius:50%;
  border:1.5px solid var(--accent);opacity:0;pointer-events:none}
.lf-composer.is-firing .send::after{animation:lfSend .6s var(--ease) forwards}
@keyframes lfSend{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(2.6)}}

/* ---- stage 3: the loader ----------------------------------------------
   LOCAL FIT: .ll opens under a question header it does not have here, and in
   the app it sits inside a card; here it is an object in open space and needs a
   surface. NO backdrop-filter: it would be a second live blur over a layer that
   is already blurred, which is exactly the cost this version is avoiding. */
.lf-ll{margin-top:0;gap:14px;width:440px;
  padding:16px 18px;border-radius:18px;
  background:var(--acard);border:1px solid var(--acard-stroke);
  box-shadow:var(--shadow-lg)}
.lf-ll .ll-hd-t{font-size:13px}
.lf-ll .ll-time{font-size:12px}
.lf-ll .ll-steps{gap:12px}
.lf-ll .ll-t{font-size:13px}
.lf-ll .ll-sub{font-size:11.5px}
.lf-ll .ll-step--running .ll-mark svg{display:none}
.lf-ll .ll-step--done .ll-mark .ll-dot{display:none}
.lf-ll .ll-step{transition:opacity .45s var(--ease),transform .55s var(--ease)}
.lf-ll .ll-step.is-waiting{opacity:.36;transform:translateY(5px)}

/* ---- stage 4: the answer -----------------------------------------------
   LOCAL FIT: .ans opens at 40px/42px padding and a 34px headline against a
   960px thread. Geometry only. */
.lf-ans{width:640px;padding:22px 26px 24px}
.lf-ans::after{border-radius:22px}
.lf-ans .aqh{font-size:13px}
.lf-ans .aqh .q{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lf-ans .ans__h{font-size:22px;line-height:28px;min-height:28px;font-weight:600}
.lf-ans.is-writing .ans__h::after{content:"";display:inline-block;width:2px;height:.84em;
  margin-inline-start:3px;vertical-align:-2px;background:var(--accent)}
/* one card per row: at scene width two of the library's cards side by side is
   under half the measure they are built for. Each row is its own disclosure,
   which is what lets the two of them arrive one at a time. */
.lf-ans .zw-row{grid-template-columns:1fr}
.lf-ans .zw,.lf-ans .ans__body,.lf-wrow__i{min-width:0}
.lf-wrow{display:grid;grid-template-rows:0fr;opacity:0;margin-top:0;
  transition:grid-template-rows .75s var(--ease),opacity .55s var(--ease),margin-top .75s var(--ease)}
.lf-wrow > .lf-wrow__i{overflow:hidden;min-height:0}
.lf-wrow.is-in{grid-template-rows:1fr;opacity:1;margin-top:12px}
.lf-ans .zw{opacity:0;transform:translateY(16px) scale(.97);
  transition:opacity .65s var(--ease),transform .75s var(--ease)}
.lf-ans .zw.is-in{opacity:1;transform:none}

/* ---- narrower windows -------------------------------------------------- */
@media (max-width:1240px){
  html[data-lp-option="6"] .lp-film3{min-height:0;display:block;
    padding-block:clamp(60px,9vh,110px)}
  .lp-film3__in{grid-template-columns:1fr;row-gap:clamp(32px,4vh,48px)}
  .lp-film3__copy{max-width:none}
  .lf-panel{min-height:min(620px,84vh)}
}
/* below a tablet the scene is SCALED, not reflowed: its objects are sized in
   the film's own units and placed by a camera, so reflowing them would be a
   different shot. Shown smaller, the composition is identical at every width. */
@media (max-width:860px){
  .lf-panel{min-height:min(540px,78vh)}
  .lf-vp,.lf-deep{transform:scale(.78);transform-origin:50% 50%}
}
@media (max-width:620px){
  .lf-vp,.lf-deep{transform:scale(.58)}
  .lf-panel{min-height:min(460px,72vh);border-radius:22px}
  .lp-film3__h{font-size:clamp(28px,8vw,36px)}
}
@media (prefers-reduced-motion:reduce){
  .lp-film3__copy,.lp-film3__stage{animation:none}
  .lf-deep,.lf-card .key,.lf-card .er-card__row,.lf-joins path,.lf-joins circle,
  .lf-term,.lf-term-chip,.lf-ll .ll-step,.lf-ans .zw,.lf-wrow{transition:none}
  .lf-composer.is-firing .send::after{animation:none}
  .lf-ans.is-writing .ans__h::after{display:none}
}