/* ==========================================================================
   Smart Search  —  Figma "Smart Search - Animate" (713:227922)
   1920 x 1072 at y 6104, on Mono/Dark.

   Default -> Animate:
     three photo frames scale open from a pinned corner, fading in:
       A  59x38  -> 630x260  (anchored top-left)
       B  43x27  -> 441x260  (anchored top-right, 48 from the edge)
       C  37x25  -> 617x321  (anchored bottom-right, flush to the edge)
     chip        translateY -50  -> 0
     both h2s    translateY +80  -> 0
     readouts    translateY +20  -> 0
     paragraph   translateX -410 -> 0
     CTA         translateX -190 -> 0
   ========================================================================== */

.search {
  top: calc(6104 * var(--s));
  height: calc(1072 * var(--s));
  background: var(--c-mono-dark);
  overflow: hidden;
  z-index: 5;
}

/* --- photo frames -------------------------------------------------------- */

.search__frame {
  position: absolute;
  --brk-w: 12;
  --brk-h: 12;
  --brk-color: var(--c-accent-yellow);
  opacity: 0;
  transition:
    width  calc(var(--rv-dur) * 1.1) var(--rv-ease),
    height calc(var(--rv-dur) * 1.1) var(--rv-ease),
    opacity calc(var(--rv-dur) * 0.6) var(--rv-ease);
}
.search.is-in .search__frame { opacity: 1; }

/* The picture sits 3px inside the bracketed frame and clips itself, so the
   hover zoom never spills over the corner marks. */
.search__clip {
  position: absolute;
  inset: calc(3 * var(--s));
  display: block;
}
.search__clip img { width: 100%; height: 100%; object-fit: cover; }

.search__frame--a {
  left: calc(48 * var(--s));
  top: calc(165 * var(--s));
  width: calc(59 * var(--s));
  height: calc(38 * var(--s));
}
.search.is-in .search__frame--a { width: calc(630 * var(--s)); height: calc(260 * var(--s)); }

.search__frame--b {
  right: calc(48 * var(--s));
  top: calc(165 * var(--s));
  width: calc(43 * var(--s));
  height: calc(27 * var(--s));
  transition-delay: 90ms;
}
.search.is-in .search__frame--b { width: calc(441 * var(--s)); height: calc(260 * var(--s)); }

.search__frame--c {
  right: 0;
  bottom: calc(120 * var(--s));
  width: calc(37 * var(--s));
  height: calc(25 * var(--s));
  transition-delay: 180ms;
}
.search.is-in .search__frame--c { width: calc(617 * var(--s)); height: calc(321 * var(--s)); }

/* --- chip ---------------------------------------------------------------- */

/* Figma 1045:136832: the group is 141 x 22 centred on the frame, and the
   label sits where the old box's text did -- the box is gone, not the type. */
.search__chip {
  position: absolute;
  left: calc(889.5 * var(--s));
  top: calc(407 * var(--s));
  width: calc(141 * var(--s));
  height: calc(22 * var(--s));
  color: var(--c-mono-light);
}
.search__chip .chip { gap: calc(10 * var(--s)); }
.search__chip .chip img { width: calc(20 * var(--s)); height: calc(20 * var(--s)); flex: none; }

/* --- headline ------------------------------------------------------------ */

.search__h {
  position: absolute;
  left: calc(509 * var(--s));
  width: calc(902 * var(--s));
  height: calc(96 * var(--s));
}
.search__h--1 { top: calc(480 * var(--s)); }
.search__h--2 { top: calc(576 * var(--s)); }
.search__h h2,
.search__h span {
  display: block;
  font-weight: 400;
  font-size: calc(80 * var(--s));
  line-height: 1.2;
  letter-spacing: calc(-3.2 * var(--s));
  text-align: center;
  color: var(--c-mono-light);
  white-space: nowrap;
}

/* --- copy ---------------------------------------------------------------- */

.search__copy {
  position: absolute;
  left: calc(182 * var(--s));
  top: calc(699 * var(--s));
  width: calc(414 * var(--s));
  height: calc(140 * var(--s));
}
.search__copy p {
  font-size: calc(20 * var(--s));
  line-height: 1.4;
  letter-spacing: calc(-0.6 * var(--s));
  color: #767676;
}

.search__cta {
  position: absolute;
  left: calc(182 * var(--s));
  top: calc(901 * var(--s));
  width: calc(184 * var(--s));
  height: calc(48 * var(--s));
}
.search__cta .rv { height: 100%; }
.search__cta .btn { width: 100%; height: 100%; }

.search__readout {
  position: absolute;
  top: calc(933 * var(--s));
  width: calc(157.605 * var(--s));
  height: calc(19 * var(--s));
  white-space: nowrap;
}
.search__readout--a { left: calc(741 * var(--s)); }
.search__readout--b { left: calc(970 * var(--s)); }

@media (prefers-reduced-motion: reduce) {
  .search__frame { opacity: 1; transition: none; }
}

/* ==========================================================================
   Reflow
   ========================================================================== */

@media (max-width: 1500px) {
  .search__h h2, .search__h span { font-size: calc(62 * var(--s)); }
}

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

  .search__frame {
    position: relative;
    left: auto; right: auto; top: auto; bottom: auto;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 630 / 260;
  }
  .search__frame--b, .search__frame--c { margin-top: 12px; aspect-ratio: 441 / 260; }
  .search__frame--c { display: none; }

  .search__chip,
  .search__h,
  .search__copy,
  .search__cta,
  .search__readout { position: static; width: auto; height: auto; }

  .search__chip { margin-top: 28px; }
  .search__h { margin-top: 16px; }
  .search__h h2, .search__h span { font-size: clamp(32px, 9vw, 48px); text-align: left; white-space: normal; }
  .search__copy { margin-top: 20px; }
  .search__copy p { font-size: 16px; }
  .search__cta { margin-top: 24px; width: 184px; height: 48px; }
  .search__readout { margin-top: 20px; font-size: 12px; display: inline-block; margin-right: 24px; }
}