/* ==========================================================================
   Smart Search  —  Figma "Smart Search" frame (910:6823)
   1920 x 900 at y 3432, on Mono/Dark.

   An accordion of three steps on the right, an illustration bottom-left that
   follows the open step, and a progress bar that fills until the open step
   hands over to the next. ui.js drives the timing, the clicking and the swap.

   Geometry from Figma:
     headline      x 48,  y 64,  441 wide (wraps to three 77px lines)
     lede          x 509, y 75,  349 x 112
     illustration  x 48,  y 367, 890 x 485
     panels        x 970, 902 wide — open 396 tall, collapsed 196
                   tops 64 / 460 / 656, 1px divider at y655
     per panel     number +32, icon +32 (right), title +126 collapsed and
                   +242 open, body +300, progress +392 (full width x 4)

   Colours are Figma's: open panel Mono/White, collapsed Mono/Light, the step
   number #0063E0, the bar Primary/Sky Blue, the divider Mono/Light - Grey 02.

   Default -> Animate, carrying over the previous cut's signature move:
     headline / lede   translateY -> 0
     illustration      width 32 -> 890, opacity 0 -> 1 (wipe open from the left)
     panels            width 32 -> 902, opacity 0 -> 1, staggered by step
   ========================================================================== */

.tech-search {
  top: calc(3432 * var(--s));
  height: calc(900 * var(--s));
  background: var(--c-mono-dark);
  overflow: hidden;
  z-index: 2;
  --step-num: #0063E0;
  --step-body: #767676;
}

/* --- headline + lede ----------------------------------------------------- */

.tech-search__h {
  position: absolute;
  left: calc(48 * var(--s));
  top: calc(64 * var(--s));
  width: calc(441 * var(--s));
  height: calc(231 * var(--s));
}
.tech-search__h h2 {
  display: block;
  margin: 0;
  font-weight: 300;
  font-size: calc(64 * var(--s));
  line-height: 1.2;
  letter-spacing: calc(-2.56 * var(--s));
  color: var(--c-mono-light);
}

.tech-search__lede {
  position: absolute;
  left: calc(509 * var(--s));
  top: calc(75 * var(--s));
  width: calc(349 * var(--s));
  height: calc(112 * var(--s));
}
.tech-search__lede p {
  margin: 0;
  font-size: calc(20 * var(--s));
  line-height: 1.4;
  letter-spacing: calc(-0.6 * var(--s));
  color: var(--c-mono-light);
}

/* --- illustration -------------------------------------------------------- */

.tech-search__shots {
  position: absolute;
  left: calc(48 * var(--s));
  top: calc(367 * var(--s));
  width: calc(32 * var(--s));
  height: calc(485 * var(--s));
  overflow: hidden;
  opacity: 0;
  transition:
    width calc(var(--rv-dur) * 1.2) var(--rv-ease),
    opacity calc(var(--rv-dur) * 0.5) var(--rv-ease);
}
.tech-search.is-in .tech-search__shots { width: calc(890 * var(--s)); opacity: 1; }

/* Held at the final width so the image does not squash as the box opens. */
.tech-search__shot {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(890 * var(--s));
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--ui-dur) var(--ui-ease);
}
.tech-search__shot.is-on { opacity: 1; }
/* Both transitions, and at two classes so this rule outranks `.zoom img`.
   That rule sets a transform transition at (0,1,1), which beats the single
   class above and takes the opacity cross-fade with it -- the shots would
   swap instantly instead of fading. Declared together here, the fade survives
   and the hover zoom rides along with it. */
.tech-search__shots .tech-search__shot {
  transition:
    opacity var(--ui-dur) var(--ui-ease),
    transform var(--zoom-dur) var(--zoom-ease);
}

/* --- the accordion ------------------------------------------------------- */

.tech-search__steps {
  position: absolute;
  left: calc(970 * var(--s));
  top: calc(64 * var(--s));
  width: calc(902 * var(--s));
}

.tech-search__step {
  position: relative;
  width: calc(32 * var(--s));
  height: calc(196 * var(--s));
  background: var(--c-mono-light);
  overflow: hidden;
  opacity: 0;
  transition:
    width calc(var(--rv-dur) * 1.1) var(--rv-ease),
    height var(--ui-dur) var(--rv-ease),
    background-color var(--ui-dur) var(--ui-ease),
    opacity calc(var(--rv-dur) * 0.5) var(--rv-ease);
  transition-delay: calc(var(--d, 0) * var(--rv-step));
}
.tech-search.is-in .tech-search__step { width: calc(902 * var(--s)); opacity: 1; }

.tech-search__step.is-open {
  height: calc(396 * var(--s));
  background: var(--c-mono-white);
}

/* The 1px rule Figma draws at y655, i.e. between the second and third panels. */
.tech-search__step + .tech-search__step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background: var(--c-light-grey-02);
}

.tech-search__pick {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.tech-search__num {
  position: absolute;
  left: calc(32 * var(--s));
  top: calc(32 * var(--s));
  font-family: var(--f-tech);
  font-weight: 700;
  font-size: max(11px, calc(16 * var(--s)));
  line-height: 1.2;
  color: var(--step-num);
}

/* Sits at +126 while shut and +242 once open — the move you see as it opens. */
.tech-search__title {
  position: absolute;
  left: calc(32 * var(--s));
  top: calc(126 * var(--s));
  width: calc(716 * var(--s));
  font-size: calc(32 * var(--s));
  line-height: 1.2;
  letter-spacing: calc(-1.6 * var(--s));
  color: var(--c-mono-dark);
  transition: top var(--ui-dur) var(--rv-ease);
}
.tech-search__step.is-open .tech-search__title { top: calc(242 * var(--s)); }

.tech-search__body {
  position: absolute;
  left: calc(32 * var(--s));
  top: calc(300 * var(--s));
  width: calc(716 * var(--s));
  margin: 0;
  font-size: calc(20 * var(--s));
  line-height: 1.4;
  letter-spacing: calc(-0.6 * var(--s));
  color: var(--step-body);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ui-dur) var(--ui-ease);
}
.tech-search__step.is-open .tech-search__body { opacity: 1; }

.tech-search__icon {
  position: absolute;
  right: calc(20 * var(--s));
  top: calc(32 * var(--s));
  width: auto;
  height: calc(80 * var(--s));
  transition: height var(--ui-dur) var(--rv-ease);
  pointer-events: none;
}
.tech-search__step.is-open .tech-search__icon { height: calc(120 * var(--s)); }

/* --- progress ------------------------------------------------------------ */

/* Figma draws this 718 wide, which stops it under the icon at x1726 and reads
   as the bar giving up partway. Full panel width instead, so it finishes at
   the rectangle's edge. */
.tech-search__meter {
  position: absolute;
  left: 0;
  top: calc(392 * var(--s));
  width: 100%;
  height: calc(4 * var(--s));
  opacity: 0;
  transition: opacity var(--ui-dur) var(--ui-ease);
}
.tech-search__step.is-open .tech-search__meter { opacity: 1; }

.tech-search__fill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--c-sky-blue);
}

.tech-search__pct {
  position: absolute;
  right: calc(20 * var(--s));
  top: calc(334 * var(--s));
  font-size: max(11px, calc(16 * var(--s)));
  line-height: 1.4;
  letter-spacing: calc(-0.48 * var(--s));
  color: var(--step-body);
  opacity: 0;
  transition: opacity var(--ui-dur) var(--ui-ease);
}
.tech-search__step.is-open .tech-search__pct { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .tech-search__shots,
  .tech-search.is-in .tech-search__shots { width: calc(890 * var(--s)); opacity: 1; transition: none; }
  .tech-search__step,
  .tech-search.is-in .tech-search__step { width: calc(902 * var(--s)); opacity: 1; transition: none; }
  .tech-search__fill { transition: none; }
}

/* ==========================================================================
   Reflow — the accordion stacks under the headline, illustration first.
   ========================================================================== */

@media (max-width: 1023px), (max-width: 1200px) and (orientation: portrait) {
  .tech-search { height: auto; padding: 48px 20px 56px; }

  .tech-search__h,
  .tech-search__lede,
  .tech-search__shots,
  .tech-search__steps { position: static; width: auto; height: auto; }

  .tech-search__h h2 { font-size: clamp(30px, 8vw, 44px); letter-spacing: -0.02em; }
  .tech-search__lede { margin-top: 18px; }
  .tech-search__lede p { font-size: 16px; }

  .tech-search__shots,
  .tech-search.is-in .tech-search__shots {
    width: 100%;
    margin-top: 26px;
    aspect-ratio: 890 / 485;
    opacity: 1;
    transition: none;
  }
  .tech-search__shot { width: 100%; }

  .tech-search__steps { margin-top: 26px; }
  .tech-search__step,
  .tech-search.is-in .tech-search__step {
    width: 100%;
    height: auto;
    opacity: 1;
    transition: background-color var(--ui-dur) var(--ui-ease);
  }
  .tech-search__step.is-open { height: auto; }

  /* Static flow inside each panel, so the heights follow the content. */
  .tech-search__pick { position: static; width: 100%; height: auto; padding: 18px 16px 0; }
  .tech-search__num,
  .tech-search__title { position: static; width: auto; display: block; }
  .tech-search__title,
  .tech-search__step.is-open .tech-search__title { top: auto; margin-top: 8px; font-size: 22px; letter-spacing: -0.01em; }
  .tech-search__body { position: static; width: auto; padding: 10px 16px 0; font-size: 15px; }
  .tech-search__step:not(.is-open) .tech-search__body { display: none; }
  .tech-search__icon { display: none; }
  .tech-search__meter { position: static; width: 100%; margin: 16px 0 0; }
  .tech-search__pct { position: static; display: block; padding: 6px 16px 16px; }
  .tech-search__step:not(.is-open) .tech-search__meter,
  .tech-search__step:not(.is-open) .tech-search__pct { display: none; }
}