/* ============================================================================
   lexivoai.com — the chooser.
   A dark lobby in front of two light rooms. Everything here exists to make one
   decision easy and to make that decision feel like the product: the panels
   demonstrate a before/after reveal, which is the thing both sites sell.

   State is driven entirely by classes that lexivoai.js puts on the panels
   (.is-lit / .is-open / .is-dim / .is-chosen / .is-leaving) rather than by
   :hover, so a keyboard user gets the identical experience on :focus and the
   idle "attract" loop can reuse the same transitions with nothing to snap.
   ========================================================================= */

:root{
  --void:#0E1216;
  --void-2:#141A21;
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.06);
  --txt:#F2EFEA;
  --txt-soft:rgba(242,239,234,.64);
  --txt-faint:rgba(242,239,234,.40);

  /* Each site's accent, lightened for a dark ground. The originals
     (#B8734A clay, #1F5C6B steel) are too dark to read here. */
  --int:#E0A276;
  --ren:#63AEBE;

  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --serif-int:'Fraunces',Georgia,serif;      /* the interiors site's display face */
  --serif-ren:'Newsreader',Georgia,serif;    /* the renovation site's display face */

  --pad:clamp(20px,5vw,44px);
  --maxw:1240px;
  --ease:cubic-bezier(.22,1,.36,1);
  --grow:.92s var(--ease);   /* panel resize */
  --wipe:1.05s var(--ease);  /* before → after reveal */
}

*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--void);color:var(--txt);font-family:var(--font);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
img{display:block;}
svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);}

/* Off-screen but still announced and still indexed. Used for the one <h1>: the
   page shows no heading by request, but a document with none is untitled to a
   screen reader and to a search result. clip-path over display:none because
   display:none removes it from the accessibility tree entirely. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---------------------------------------------------------------- masthead */
.top{
  position:absolute;top:0;left:0;right:0;z-index:20;
  padding:clamp(18px,2.6vw,30px) var(--pad) clamp(40px,5.5vw,62px);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  transition:opacity .34s ease;
  /* The masthead sits directly on the photographs now that the page has no
     heading block above them, and the panel scrim is weighted to the bottom —
     so the top of a bright "before" would otherwise swallow the wordmark.
     The extra bottom padding is what gives this gradient room to fade out. */
  background:linear-gradient(to bottom,
    rgba(8,10,13,.80) 0%,rgba(8,10,13,.46) 46%,rgba(8,10,13,0) 100%);
}
.mark{font-size:17px;font-weight:600;letter-spacing:-.015em;display:flex;
  align-items:baseline;gap:9px;}
.mark i{
  width:9px;height:9px;border-radius:50%;font-style:normal;flex:none;
  /* the two products, side by side, as a single dot */
  background:linear-gradient(100deg,var(--int) 0 50%,var(--ren) 50% 100%);
  transition:background .6s var(--ease);
}
.top-mail{font-size:13.5px;color:var(--txt-faint);transition:color .3s ease;}
.top-mail:hover{color:var(--txt);}

/* ----------------------------------------------------------------- chooser */
.stage{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;
}
.chooser{
  flex:1 1 auto;display:flex;
  min-height:clamp(420px,58svh,660px);
}

/* -------------------------------------------------------------- one panel */
.pick{
  position:relative;flex:1 1 0;min-width:0;overflow:hidden;
  display:flex;align-items:flex-end;
  isolation:isolate;
  transition:flex-grow var(--grow),filter var(--grow);
  filter:saturate(.88) brightness(.86);
}
.pick + .pick{border-left:1px solid var(--line);}
.pick.is-lit{filter:none;}
.pick.is-open{flex-grow:1.34;}
.pick.is-dim{flex-grow:.72;filter:saturate(.42) brightness(.52);}

.pick-media{position:absolute;inset:0;z-index:-2;}
.pick-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.03);
  transition:transform var(--grow);
}
.pick.is-open .pick-media img{transform:scale(1.06);}

/* The reveal. Each panel uncovers its "after" starting at the seam between the
   two panels and sweeping outward, so the gesture reads as the drag-compare
   handle both sites are built around rather than as a generic crossfade. */
.pick-after{transition:clip-path var(--wipe),transform var(--grow);}
.pick--int .pick-after{clip-path:inset(0 0 0 100%);}  /* left panel: seam is its right edge  */
.pick--ren .pick-after{clip-path:inset(0 100% 0 0);}  /* right panel: seam is its left edge  */
.pick.is-lit .pick-after{clip-path:inset(0);}

.pick-scrim{
  position:absolute;inset:0;z-index:-1;
  /* Sized so the copy always clears the photograph behind it. The interiors
     "before" is a pale room with a bright window right where the eyebrow sits,
     which is the worst case and what these stops are set against. */
  background:linear-gradient(to top,
    rgba(8,10,13,.95) 0%,rgba(8,10,13,.84) 30%,
    rgba(8,10,13,.44) 62%,rgba(8,10,13,.06) 88%);
}

.pick-in{
  position:relative;width:100%;
  padding:clamp(26px,3.4vw,46px) clamp(24px,3.6vw,52px) clamp(30px,4vw,54px);
  max-width:620px;
}
.pick-eyebrow{
  display:block;font-size:10.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--txt-faint);margin-bottom:11px;
  transition:color .55s var(--ease),opacity .34s ease,transform .5s var(--ease);
}
.pick.is-lit .pick-eyebrow{color:var(--ac);}
.pick-title{
  font-weight:400;letter-spacing:-.02em;line-height:1;
  font-size:clamp(38px,5.6vw,74px);
  transform-origin:left bottom;
  transition:transform .8s var(--ease);
}
.pick--int .pick-title{font-family:var(--serif-int);}
.pick--ren .pick-title{font-family:var(--serif-ren);}
.pick-body{
  margin-top:14px;max-width:40ch;font-size:15px;line-height:1.6;
  color:var(--txt-soft);
  transition:opacity .34s ease,transform .5s var(--ease);
}
.pick-go{
  margin-top:clamp(18px,2.4vw,26px);
  display:inline-flex;align-items:center;gap:9px;
  font-size:13.5px;font-weight:600;letter-spacing:.01em;
  padding-bottom:9px;position:relative;
}
.pick-go svg{width:16px;height:16px;transition:transform .5s var(--ease);}
.pick.is-lit .pick-go svg{transform:translateX(4px);}
/* The underline doubles as the progress bar while the page hands over. */
.pick-go::after{
  content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;
  background:var(--ac);transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease);
}
.pick.is-lit .pick-go::after{transform:scaleX(.34);}

.pick--int{--ac:var(--int);}
.pick--ren{--ac:var(--ren);}

/* --------------------------------------------------------- the choice made */
/* One panel takes the whole viewport, the other collapses to nothing, and a
   veil in the DESTINATION site's own paper colour fades up last — so the new
   page paints onto the colour it was already wearing instead of a hard cut. */
body.is-choosing{overflow:hidden;}
body.is-choosing .top{opacity:0;}
.pick.is-leaving{flex-grow:.0001;filter:saturate(0) brightness(.3);}
/* As the losing panel narrows towards zero its copy re-wraps to one word — then
   one letter — per line, and a flex item that tall drags the whole stage down
   with it (900px became 1209px before this line existed). overflow:hidden hides
   that but does not stop it counting, so the copy comes out of flow instead. */
.pick.is-leaving .pick-in{position:absolute;left:0;bottom:0;width:620px;}
.pick.is-chosen{flex-grow:40;filter:none;}
.pick.is-chosen .pick-after{clip-path:inset(0);}
.pick.is-chosen .pick-media img{transform:scale(1.1);}
.pick.is-chosen .pick-title{transform:translateY(-10px) scale(1.1);}
.pick.is-chosen .pick-eyebrow,
.pick.is-chosen .pick-body{opacity:0;transform:translateY(9px);}
.pick.is-chosen .pick-go::after{transform:scaleX(1);transition:transform .82s var(--ease);}

.veil{
  position:fixed;inset:0;z-index:200;pointer-events:none;
  opacity:0;transition:opacity .40s ease;
}
.veil.on{opacity:1;}

/* ---------------------------------------------------------------- footer */
/* The only thing under the chooser. Deliberately slim — the page is meant to be
   a choice, not a document, so this is a legal footer and nothing more. */
.site-foot{padding:clamp(22px,3vw,32px) 0 clamp(24px,3vw,34px);
  border-top:1px solid var(--line-soft);}

/* The framing (the rule above, the breathing room) now belongs to .site-foot,
   so this is just the row. */
.foot{
  display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;
  font-size:13px;color:var(--txt-faint);
}
.foot a{transition:color .3s ease;}
.foot a:hover{color:var(--txt);}
.foot .sp{flex:1 1 auto;}

/* --------------------------------------------------------------- mobile */
@media(max-width:860px){
  .chooser{flex-direction:column;min-height:0;}
  /* Both doors have to be on screen at once or it is not a choice. With no
     heading block above them they get roughly half the viewport each, so this
     is only a floor for very short screens. */
  .pick{min-height:38svh;}
  .pick + .pick{border-left:0;border-top:1px solid var(--line);}
  /* Stacked, the seam is horizontal — but a horizontal wipe still reads as the
     compare handle, so the reveal direction is left as it is. */
  .pick.is-open{flex-grow:1.18;}
  .pick.is-dim{flex-grow:.86;}
  .pick.is-chosen{flex-grow:40;}
  /* A short panel puts the copy much higher up the photograph, so the scrim has
     to start working sooner than it does on a tall desktop panel. */
  .pick-scrim{background:linear-gradient(to top,
    rgba(8,10,13,.95) 0%,rgba(8,10,13,.80) 40%,
    rgba(8,10,13,.42) 72%,rgba(8,10,13,.06) 100%);}
}
@media(max-width:520px){
  .pick-title{font-size:clamp(34px,11vw,46px);}
  .top-mail{display:none;}
}

/* ------------------------------------------------------- reduced motion */
/* The attract loop is cancelled in JS as well; this covers the transitions. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .pick{filter:none;}
  /* Both selectors, not a bare `.pick-after`: the per-panel rules that hide the
     "after" are (0,2,0) and a media query adds no specificity, so a bare rule
     loses and a reduced-motion visitor is shown two "before" photographs and
     never learns what the product does. Showing the finished room outright is
     the right resting state — it is what the animation was working towards. */
  .pick--int .pick-after,
  .pick--ren .pick-after{clip-path:inset(0);}
}

/* One sentence saying what Lexivo AI is. The chooser above carries no copy by
   request, which left the homepage at 95 words while the domain's stale search
   listing still described an unrelated product. This sits in the footer, below
   the fold, and does not touch the panels. */
.foot-blurb{max-width:74ch;margin:0 0 22px;font-size:13.5px;line-height:1.65;color:var(--txt-faint);}
.foot-blurb a{color:var(--txt-soft);border-bottom:1px solid var(--line);padding-bottom:1px;
  transition:color .3s ease,border-color .3s ease;}
.foot-blurb a:hover{color:var(--txt);border-color:currentColor;}