@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/Geist-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}

.gf-demo,
.gf-demo * {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: transparent;
  display: grid;
  place-items: center;
  font-family: "Geist", Arial, sans-serif;
}

.gf-demo {
  --bg: #f4ede3;
  --white: #ffffff;
  --text: #1e1d1b;
  --muted: #79746d;

  --row-height: 86px;
  --row-gap: 9px;
  --step: calc(var(--row-height) + var(--row-gap));

  position: relative;

  width: min(100%, 430px);
  height: 390px;

  margin: 0;

  overflow: hidden;

  font-family: "Geist", Arial, sans-serif;
}


/* =========================
   SEARCH BAR
========================= */

.gf-search {
  position: absolute;

  top: 20px;
  left: 50%;

  width: calc(100% - 36px);
  height: 60px;

  transform: translateX(-50%);

  box-sizing: border-box;

  display: flex;
  align-items: center;

  padding: 0 20px;

  border-radius: 18px;

  background: #fff;

  box-shadow:
    0 10px 25px rgba(55, 44, 31, 0.035),
    0 2px 5px rgba(55, 44, 31, 0.015);

  z-index: 20;
}


.gf-search-icon {
  width: 19px;
  height: 19px;

  margin-right: 11px;

  fill: none;
  stroke: #111;
  stroke-width: 1.7;
  stroke-linecap: round;

  flex: 0 0 auto;
}


.gf-search-copy {
  color: #262421;

  font-size: 17px;
  font-weight: 500;

  letter-spacing: -0.03em;
}


.gf-cursor {
  width: 1.5px;
  height: 19px;

  margin-left: 2px;

  border-radius: 999px;

  background: #333;

  opacity: 0;
}


.gf-cursor.show {
  opacity: 1;
}


/* =========================
   BIG RESULTS CONTAINER
========================= */

.gf-results-shell {
  position: absolute;

  left: 50%;
  top: 88px;

  width: calc(100% - 36px);
  height: 287px;

  transform: translateX(-50%);

  box-sizing: border-box;

  border-radius: 22px;

  border: 1px solid rgba(255, 255, 255, 0.85);

  background: rgba(255, 255, 255, 0.11);

  overflow: hidden;
}


/* =========================
   ROWS
========================= */

.gf-row {
  position: absolute;

  left: 12px;

  width: calc(100% - 24px);
  height: var(--row-height);

  box-sizing: border-box;

  display: flex;
  align-items: center;

  padding: 13px 16px;

  border-radius: 17px;

  will-change:
    transform,
    opacity,
    filter,
    background,
    box-shadow;
}


/*
   Initial locations
*/

.gf-row-a {
  top: 0;

  transform: translateY(10px);

  opacity: 0.38;
}


.gf-row-b {
  top: 0;

  transform:
    translateY(calc(var(--step) + 10px));

  opacity: 0.32;
}


.gf-featured {
  top: 0;

  transform:
    translateY(calc((var(--step) * 2) + 10px));

  opacity: 0.3;

  z-index: 5;
}


/* =========================
   FAKE SEARCH RESULTS
========================= */

.gf-placeholder-image {
  width: 63px;
  height: 63px;

  flex: 0 0 auto;

  border-radius: 13px;

  background:
    rgba(255, 255, 255, 0.64);
}


.gf-placeholder-copy {
  flex: 1;

  margin-left: 12px;

  display: flex;
  flex-direction: column;

  gap: 8px;
}


.gf-line {
  display: block;

  height: 9px;

  border-radius: 999px;

  background:
    rgba(255, 255, 255, 0.65);
}


.gf-line-long {
  width: 78%;
}


.gf-line-medium {
  width: 89%;
}


.gf-line-short {
  width: 52%;
}


/* =========================
   FEATURED BUSINESS
========================= */

.gf-featured {
  background: rgba(255, 255, 255, 0);
}


.gf-business-image {
  width: 63px;
  height: 63px;

  flex: 0 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 13px;

  color: #8c6135;

  background: #f7ead4;

  opacity: 0;
}


.gf-business-image img {
  width: 34px;
  height: 34px;

  display: block;

  object-fit: contain;
}


.gf-business-copy {
  margin-left: 13px;

  display: flex;
  flex-direction: column;

  opacity: 0;
}


.gf-business-copy strong {
  color: var(--text);

  font-size: 16px;
  line-height: 1.1;

  font-weight: 500;

  letter-spacing: -0.035em;
}


.gf-stars {
  margin-top: 6px;

  color: #47433d;

  font-size: 12px;
  line-height: 1;
}


.gf-category {
  margin-top: 6px;

  color: var(--muted);

  font-size: 11px;
  line-height: 1;
}


/* =========================
   RESULTS APPEAR
========================= */

.gf-demo.results-visible .gf-row-a {
  transform: translateY(8px);

  opacity: 0.42;
}


.gf-demo.results-visible .gf-row-b {
  transform:
    translateY(calc(var(--step) + 8px));

  opacity: 0.37;
}


.gf-demo.results-visible .gf-featured {
  transform:
    translateY(calc((var(--step) * 2) + 8px));

  opacity: 0.36;
}


/* =========================
   BUSINESS REVEAL
========================= */

.gf-demo.business-reveal .gf-featured {
  background: rgba(255, 255, 255, 0.25);
}


.gf-demo.business-reveal .gf-business-image,
.gf-demo.business-reveal .gf-business-copy {
  opacity: 0.55;
}


/* =========================
   RANKING ANIMATION
========================= */

.gf-demo.rank-business .gf-row {
  transition:
    transform 820ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 560ms ease,
    background 560ms ease,
    box-shadow 560ms ease;
}


/*
   Old #1 becomes #2
*/

.gf-demo.rank-business .gf-row-a {
  transform:
    translateY(calc(var(--step) + 8px));

  opacity: 0.25;
}


/*
   Old #2 becomes #3
*/

.gf-demo.rank-business .gf-row-b {
  transform:
    translateY(calc((var(--step) * 2) + 8px));

  opacity: 0.2;
}


/*
   Your Business moves
   from bottom -> top
*/

.gf-demo.rank-business .gf-featured {
  transform: translateY(8px);

  opacity: 1;

  background: #fff;

  box-shadow:
    0 2px 5px rgba(41, 35, 27, 0.025),
    0 12px 28px rgba(41, 35, 27, 0.045);
}


.gf-demo.rank-business .gf-business-image,
.gf-demo.rank-business .gf-business-copy {
  opacity: 1;

  transition: opacity 360ms ease 180ms;
}


/* =========================
   FINAL ISOLATED RESULT
========================= */

.gf-search,
.gf-results-shell {
  transition:
    opacity 420ms ease,
    transform 460ms cubic-bezier(0.22, 1, 0.36, 1);
}


.gf-demo.focus-result .gf-search {
  opacity: 0;

  transform:
    translateX(-50%)
    translateY(-16px);
}


.gf-demo.focus-result .gf-results-shell {
  border-color: transparent;

  background: transparent;

  overflow: visible;
}


/*
   Fade the losing results
*/

.gf-demo.focus-result .gf-row-a,
.gf-demo.focus-result .gf-row-b {
  opacity: 0;

  transition:
    opacity 320ms ease,
    transform 420ms ease;
}


/*
   This gives the third screenshot effect:
   only the winning card remains.
*/

.gf-demo.focus-result .gf-featured {
  transform:
    translateY(72px)
    scale(0.96);

  border: 1px solid rgba(255, 255, 255, 0.9);

  box-shadow:
    0 0 0 7px rgba(255, 255, 255, 0.24);
}


/* =========================
   RESET
========================= */

.gf-demo.fade-out {
  opacity: 0;

  transition: opacity 360ms ease;
}


.gf-demo.no-transition *,
.gf-demo.no-transition {
  transition: none !important;
  animation: none !important;
}


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 700px) {
  .gf-demo {
    width: 100%;
    max-width: 430px;
  }
}


@media (prefers-reduced-motion: reduce) {
  .gf-demo *,
  .gf-demo {
    animation: none !important;
    transition-duration: 0.001ms !important;
  }
}