/* ==========================================================================
   COMPARISON — the live selrai.com.au "Comparison" component, rebuilt
   (#before-after)

   FIDELITY PASS 2026-08-19. Every number below was read off the LIVE site
   with getComputedStyle at 1440x900, not eyeballed off a screenshot. The
   first build guessed that Framer drove this with discrete sticky triggers.
   It does not. Measured behaviour:

     Segment A  scroll-LINKED scrub, over exactly 900px of the runway
                (p 0 -> 0.40 of a 2250px travel):
                  cards container   opacity 0 -> 1, scale 0.70 -> 1.00
                  heading line 1    translateX 0 -> -2000px, rotateY 0 -> -60deg
                  heading line 2    translateX 0 -> +2000px, rotateY 0 -> +60deg
                  both lines        scale 1 -> 1.5, opacity 1 -> 0
                All five ramps are linear and share one span. Verified at
                p = .107 / .24 / .373: predicted vs measured matched to
                three decimals (scale 1.133 vs 1.13389, 1.30 vs 1.30056,
                1.466 vs 1.46722).

     Segment B  DISCRETE variant switch with a spring, at p = 0.61:
                  the two cards separate into the flex row
                  After card scale 0.8 -> 1
                  Before card's inner content opacity 1 -> 0.5
                That 0.5 is the whole reason the Before card "greys out" at
                the end. No colour anywhere in the component ever changes.

   Geometry (live, 1440x900): sticky stage 100vh, runway 2250px, so the
   section is 350vh. Row 1320 wide, gap 20. Cards 500x650, radius 40,
   padding 50. Inner block 400x550, justify-content space-between.

   Rules are ID-scoped because this file is linked BEFORE vsl.css and
   ground.css. Base CSS = the settled final state, so no-JS, <=809px and
   reduced-motion all render statically.
   ========================================================================== */

/* ---------------- base / settled state ----------------------------------- */

#before-after { overflow-x: clip; }

#before-after .selr-cmp-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
#before-after .selr-cmp-line {
  margin: 0;
  width: 100%;
  text-align: center;
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-variation-settings: "wght" 585;
  line-height: 1.05;
  letter-spacing: -0.04em;
}
#before-after .selr-cmp-line-a { color: #242424; }
#before-after .selr-cmp-line-b { color: #616161; }

#before-after .selr-cmp-cards {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 20px;                    /* live */
  width: 100%;
  max-width: 1320px;            /* live row width at 1440 */
}

#before-after .selr-cmp-card {
  flex: 0 1 500px;              /* live card width */
  min-width: 0;
  height: 650px;                /* live card height */
  max-height: 78vh;
  border-radius: 40px;          /* live */
  border: 0;
  padding: 50px;                /* live */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: clip;
  position: relative;
}
/* The Before card sits ABOVE the After card so that, before they separate,
   it hides the smaller After card parked behind it. */
#before-after .selr-cmp-card.is-before { z-index: 1; }

/* The site pairs a #F7F5EF card with a #FCFCFA page ground: the card is a
   shade WARMER than what it sits on. This page's ground.css paints
   #before-after at #F6F3EC, which is already warmer than #F7F5EF, so
   reusing the site's exact fill erases the panel (delta of 1/2/3 per
   channel). #FCFCFA is the other half of the site's own pair, used here so
   the figure/ground separation the component depends on survives. One
   value, and the only intentional departure from the measured site. */
#before-after .selr-cmp-card.is-before { background: #FCFCFA; }
#before-after .selr-cmp-card.is-after  { background: #6736E2; }

#before-after .selr-cmp-inside {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;   /* live: title top, list bottom */
  align-items: center;
}

#before-after .selr-cmp-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;                    /* live */
  width: 100%;
}

#before-after .selr-cmp-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;                     /* live */
  width: 100%;
}

#before-after .selr-cmp-lockup {
  display: block;
  height: 21px;
  width: auto;
}
/* selr-lockup-light.svg keeps its mark at #6736E2, which is the After card's
   own fill, so the mark disappears. The live site shows this lockup solid
   white on the purple card, which is what this reproduces without touching
   the shared asset. */
#before-after .is-after .selr-cmp-lockup { filter: brightness(0) invert(1); }

#before-after .selr-cmp-label {
  margin: 0;
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-variation-settings: normal;
  font-weight: 600;
  font-size: 13px;              /* live */
  line-height: 1.5;             /* live 19.5px */
  letter-spacing: -0.025em;     /* live -0.325px */
  color: #616161;               /* live */
  text-align: left;
}
#before-after .is-after .selr-cmp-label { color: #EEE8FF; }   /* live */

#before-after .selr-cmp-title {
  margin: 0;
  width: 100%;
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-variation-settings: "wght" 585;   /* live */
  font-weight: 400;
  font-size: 45px;              /* live */
  line-height: 1.1;             /* live 49.5px */
  letter-spacing: -0.04em;      /* live -1.8px */
  color: #242424;               /* live */
  text-align: left;
  text-wrap: balance;
}
#before-after .is-after .selr-cmp-title { color: #FCFCFA; }   /* live */

#before-after .selr-cmp-items {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;                    /* live */
  width: 100%;
}

#before-after .selr-cmp-item {
  display: flex;
  flex-direction: row;
  align-items: center;          /* live */
  gap: 10px;                    /* live */
  width: 100%;
}
#before-after .selr-cmp-item p {
  margin: 0;
  flex: 1 1 0;
  min-width: 0;
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-variation-settings: normal;
  font-weight: 600;
  font-size: 15px;              /* live */
  line-height: 1.5;             /* live 22.5px */
  letter-spacing: -0.03em;      /* live -0.45px */
  color: #242424;               /* live */
}
#before-after .is-after .selr-cmp-item p { color: #EEE8FF; }  /* live */

#before-after .selr-check {
  flex: none;
  width: 25px;                  /* live 25x25 */
  height: 25px;
  padding: 4px;                 /* live */
  border-radius: 30px;          /* live */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#before-after .is-before .selr-check { background: #242424; color: #FFFFFA; }
#before-after .is-after  .selr-check { background: #F7F5EF; color: #242424; }

@media (max-width: 1119.98px) {
  #before-after .selr-cmp-card { padding: 40px; }
  #before-after .selr-cmp-title { font-size: 36px; }
}

@media (max-width: 809.98px) {
  #before-after .selr-cmp-cards { flex-direction: column; gap: 18px; }
  /* flex-basis 500 equalises the two cards in the desktop ROW. Stacked, that
     is the main axis, so it has to go back to content height. */
  #before-after .selr-cmp-card {
    flex: 0 0 auto;
    height: auto;
    max-height: none;
    padding: 32px 26px 34px;
  }
  /* Same trap as the card above, one level down: flex-basis 0 is what makes
     the inner block fill a fixed-height card, but stacked with an auto-height
     card it erases the content height and the card collapses to its padding. */
  #before-after .selr-cmp-inside { flex: 0 0 auto; gap: 34px; }
  #before-after .selr-cmp-top { gap: 22px; }
  #before-after .selr-cmp-title { font-size: 30px; }
}

/* ---------------- pinned choreography ------------------------------------
   Desktop only, and only when the reader has not asked for reduced motion.
   comparison-pin.js writes --cmp-a (segment A progress, 0..1) and
   data-cmp-split. Nothing here transitions on segment A: it is scrubbed,
   exactly as the live site does it.
   ------------------------------------------------------------------------ */

@media (min-width: 810px) and (prefers-reduced-motion: no-preference) {

  /* 100vh stage + 1500px of travel: the live choreography, quicker */
  #before-after[data-cmp-split] {
    height: calc(100vh + 1500px);
    padding: 0;
    align-items: flex-start;    /* let the inner stick instead of stretching */
  }
  #before-after[data-cmp-split] > .selr-sec-inner {
    position: sticky;
    top: 0;
    height: 100vh;
    /* No side padding: the live row is the full 1320 content width, which is
       what puts the settled cards at x=210 / x=730 on a 1440 viewport. */
    padding: 0;
    gap: 0;
    justify-content: center;
    align-items: center;
  }

  /* ---- heading: two lines that fly apart as the cards arrive ---- */
  #before-after[data-cmp-split] .selr-cmp-head {
    position: absolute;
    inset: 0;
    /* Sits in the upper third, not dead centre. Centred, the heading did not
       appear until half a viewport after the last locations card, which read as
       a hole at the join rather than as air. The lines only move on X and
       scale, so raising them costs the choreography nothing. */
    justify-content: flex-start;
    padding-top: 18vh;
    z-index: 2;
    pointer-events: none;
  }
  #before-after[data-cmp-split] .selr-cmp-line {
    font-size: 80px !important;   /* the site: fixed 80px on desktop */
    opacity: calc(1 - var(--cmp-a, 0));
    will-change: transform, opacity;
  }
  #before-after[data-cmp-split] .selr-cmp-line-a {
    transform:
      perspective(1200px)
      translateX(calc(var(--cmp-a, 0) * -2000px))
      rotateY(calc(var(--cmp-a, 0) * -60deg))
      scale(calc(1 + var(--cmp-a, 0) * 0.5));
  }
  #before-after[data-cmp-split] .selr-cmp-line-b {
    transform:
      perspective(1200px)
      translateX(calc(var(--cmp-a, 0) * 2000px))
      rotateY(calc(var(--cmp-a, 0) * 60deg))
      scale(calc(1 + var(--cmp-a, 0) * 0.5));
  }

  /* ---- the cards container: fades and grows in under the heading ---- */
  #before-after[data-cmp-split] .selr-cmp-cards {
    position: relative;
    z-index: 1;
    opacity: var(--cmp-a, 1);
    transform: scale(calc(0.7 + var(--cmp-a, 1) * 0.3));
    will-change: opacity, transform;
  }

  /* ---- segment B: the separation, discrete with a spring ---- */
  #before-after[data-cmp-split] .selr-cmp-card {
    transform: none;
    transition: transform .86s var(--selr-pg-spring-b29);
    will-change: transform;
  }
  /* Before it fires, the two cards share one centre: the Before card slid
     right by half a (card + gap), the After card slid left by the same and
     held at 0.8, parked behind it. */
  #before-after[data-cmp-split="0"] .selr-cmp-card.is-before {
    transform: translateX(calc(50% + 10px));
  }
  #before-after[data-cmp-split="0"] .selr-cmp-card.is-after {
    transform: translateX(calc(-50% - 10px)) scale(.8);
  }

  #before-after[data-cmp-split] .is-before .selr-cmp-inside {
    opacity: 1;
    transition: opacity .86s var(--selr-pg-spring-b29);
  }
  #before-after[data-cmp-split="1"] .is-before .selr-cmp-inside { opacity: .5; }
}

/* hand-off: the next section starts right behind the released cards */
#before-after + .selr-fromroom > .selr-sec-inner { padding-top: 40px; }