/* ==========================================================
   glass button — replica von figma "Frame 65 / Button"
   font: Averia Serif Libre 400 (google fonts, siehe index.html)

   struktur und alle farbwerte sind AUS DEM ORIGINAL-EXPORT
   GEMESSEN (radial-/winkelprofile, Frame 65.png @4x):
   - .contour  = 1.5-2px chrome-kante, winkelabhaengig (conic):
                 dunkel am oberen bogen, bright notches bei ~72°
                 (rechte schulter) und ~264° (linke unterseite)
   - .hilite   = duenne helle linie direkt innerhalb der kante
   - .plate    = flacher silber-koerper mit leichtem vertikalverlauf
   - .glow     = weicher heller schein von unten (ellipse, gefittet)
   - button box-shadow = die 3 figma drop-shadows
   ========================================================== */

.lens-btn {
  /* button reset */
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  text-decoration: none;

  /* figma: Button (auto layout) */
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 5.5px 15px 5.5px 13px;
  width: 160px;
  height: 41px;
  border-radius: 110px;

  box-shadow: none;
}

/* keep the original shadows below the button, with a hard cutoff at the top */
.lens-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    0px 2.7957px 6.5233px #d6d6d6,
    0px 12.1147px 12.1147px rgba(0, 0, 0, 0.09),
    0px 27.0251px 15.8423px rgba(0, 0, 0, 0.05);
  clip-path: inset(0 -40px -60px -40px);
}

.lens-btn .halo,
.lens-btn .contour,
.lens-btn .hilite,
.lens-btn .plate,
.lens-btn .glow {
  position: absolute;
  border-radius: 110px;
  pointer-events: none;
}

/* dunkles halo direkt ausserhalb der oberen kante (gemessen band -2.4..-1.2) */
.lens-btn .halo {
  inset: -2.6px;
  background: conic-gradient(
    from 0deg at 50% 50%,
    rgb(158 158 158) 0.0deg,
    rgb(163 163 163) 54.0deg,
    rgb(225 225 225) 68.0deg,
    rgba(255 255 255 / 0) 80.0deg,
    rgba(195 195 195 / 0.5) 92.0deg,
    rgba(200 200 200 / 0) 112.0deg,
    rgba(200 200 200 / 0) 248.0deg,
    rgb(235 235 235) 258.0deg,
    rgba(255 255 255 / 0) 266.0deg,
    rgba(178 178 178 / 0.5) 278.0deg,
    rgba(150 150 150 / 0.35) 290.0deg,
    rgba(155 155 155 / 0.5) 320.0deg,
    rgb(158 158 158) 345.0deg,
    rgb(158 158 158) 360.0deg
  );;
  filter: none;
}

/* chrome-aussenkante (conic-stops gemessen, 0deg = oben, cw) */
.lens-btn .contour {
  inset: -1.2px;
  background: conic-gradient(
    from 0deg at 50% 50%,
    rgb(178 178 178) 0.0deg,
    rgb(176 176 176) 30.0deg,
    rgb(173 173 173) 54.0deg,
    rgb(176 176 176) 57.0deg,
    rgb(200 200 200) 60.0deg,
    rgb(238 238 238) 66.0deg,
    rgb(255 255 255) 72.0deg,
    rgb(252 252 252) 78.0deg,
    rgb(240 240 240) 84.0deg,
    rgb(215 215 215) 90.0deg,
    rgba(200 200 200 / 0.45) 96.0deg,
    rgba(205 205 205 / 0.25) 108.0deg,
    rgba(220 220 220 / 0.2) 120.0deg,
    rgba(232 232 232 / 0.35) 132.0deg,
    rgb(232 232 232) 180.0deg,
    rgb(237 237 237) 228.0deg,
    rgb(235 235 235) 240.0deg,
    rgb(240 240 240) 246.0deg,
    rgb(246 246 246) 252.0deg,
    rgb(252 252 252) 258.0deg,
    rgb(255 255 255) 264.0deg,
    rgb(250 250 250) 270.0deg,
    rgb(220 220 220) 276.0deg,
    rgba(185 185 185 / 0.5) 282.0deg,
    rgba(170 170 170 / 0.35) 288.0deg,
    rgba(172 172 172 / 0.3) 294.0deg,
    rgba(174 174 174 / 0.35) 312.0deg,
    rgba(176 176 176 / 0.55) 330.0deg,
    rgb(177 177 177) 345.0deg,
    rgb(178 178 178) 360.0deg
  );;
  /* this is the structural rim, so it needs to stay pixel-sharp */
  filter: none;
}

/* duenne helle linie innerhalb der kante (gemessen band +1..+2px) */
.lens-btn .hilite {
  inset: 0.9px;
  background: conic-gradient(
    from 0deg at 50% 50%,
    rgb(215 215 215) 0.0deg,
    rgb(218 218 218) 60.0deg,
    rgb(238 238 238) 70.0deg,
    rgb(225 225 225) 80.0deg,
    rgb(210 210 210) 90.0deg,
    rgba(198 198 198 / 0.5) 100.0deg,
    rgba(211 211 211 / 0.4) 110.0deg,
    rgba(225 225 225 / 0.5) 120.0deg,
    rgb(230 230 230) 130.0deg,
    rgb(232 232 232) 230.0deg,
    rgb(235 235 235) 240.0deg,
    rgb(238 238 238) 250.0deg,
    rgb(240 240 240) 260.0deg,
    rgb(235 235 235) 270.0deg,
    rgba(204 204 204 / 0.5) 290.0deg,
    rgba(210 210 210 / 0.55) 300.0deg,
    rgb(213 213 213) 330.0deg,
    rgb(215 215 215) 360.0deg
  );;
}

/* flacher silber-koerper (vertikalprofil gemessen) */
.lens-btn .plate {
  inset: 2.1px;
  background: linear-gradient(
    180deg,
    #d2d2d2 0%,
    #cdcdcd 18%,
    #c6c6c6 48%,
    #c4c4c4 72%,
    #c6c6c6 88%,
    #cacaca 100%
  );
  /* a blurred plate bleeds into the top rim and makes it look out of focus */
  filter: none;
}

/* heller schein von unten (ellipse an messwerte gefittet) */
.lens-btn .glow {
  inset: 0;
  background:
    radial-gradient(
      45% 22px at 50% 102.5%,
      rgba(255, 255, 255, 0.58) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    radial-gradient(
      44% 10px at 50% 72%,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(255, 255, 255, 0) 100%
    );
}

/* figma: "Join for free" (z-index 1)
   text-shadows = die frame drop-shadows, auf die glyphen angewandt */
.lens-btn .label {
  position: relative;
  z-index: 1;
  width: 132px;
  height: 30px;
  font-family: "Averia Serif Libre", serif;
  font-style: normal;
  font-weight: 400;
  font-size: 25px;
  line-height: 30px;
  text-align: center;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: #ffffff;
  text-shadow: 0px 3.2px 8px #d6d6d6;
}

/* variante: "See our plans" mit pfeil — gleiche optik, auto-breite */
.lens-btn--plans {
  width: auto;
  gap: 10px;
}
.lens-btn--plans .label {
  width: auto;
}
.lens-btn .arrow {
  flex: none;
  position: relative;
  z-index: 1; /* wie .label ueber den effekt-layern */
  display: block;
  transform: scaleX(-1); /* export-svg zeigt nach links, design braucht -> */
}


/* plans-variante: conic-stops auf die breitere geometrie gemappt
   (cap-schulter bei 76.0deg statt 71deg, breite ~206px) */
.lens-btn--plans .contour {
  background: conic-gradient(
    from 0deg at 50% 50%,
    rgb(178 178 178) 0.0deg,
    rgb(176 176 176) 30.0deg,
    rgb(173 173 173) 63.5deg,
    rgb(176 176 176) 65.7deg,
    rgb(200 200 200) 67.9deg,
    rgb(238 238 238) 72.3deg,
    rgb(255 255 255) 76.7deg,
    rgb(252 252 252) 81.2deg,
    rgb(240 240 240) 85.6deg,
    rgb(215 215 215) 90.0deg,
    rgba(200 200 200 / 0.45) 94.4deg,
    rgba(205 205 205 / 0.25) 103.3deg,
    rgba(220 220 220 / 0.2) 112.1deg,
    rgba(232 232 232 / 0.35) 120.9deg,
    rgb(232 232 232) 180.0deg,
    rgb(237 237 237) 239.1deg,
    rgb(235 235 235) 247.9deg,
    rgb(240 240 240) 252.3deg,
    rgb(246 246 246) 256.7deg,
    rgb(252 252 252) 261.2deg,
    rgb(255 255 255) 265.6deg,
    rgb(250 250 250) 270.0deg,
    rgb(220 220 220) 274.4deg,
    rgba(185 185 185 / 0.5) 278.8deg,
    rgba(170 170 170 / 0.35) 283.3deg,
    rgba(172 172 172 / 0.3) 287.7deg,
    rgba(174 174 174 / 0.35) 300.9deg,
    rgba(176 176 176 / 0.55) 330.0deg,
    rgb(177 177 177) 345.0deg,
    rgb(178 178 178) 360.0deg
  );
}

.lens-btn--plans .hilite {
  background: conic-gradient(
    from 0deg at 50% 50%,
    rgb(215 215 215) 0.0deg,
    rgb(218 218 218) 67.9deg,
    rgb(238 238 238) 75.3deg,
    rgb(225 225 225) 82.6deg,
    rgb(210 210 210) 90.0deg,
    rgba(198 198 198 / 0.5) 97.4deg,
    rgba(211 211 211 / 0.4) 104.7deg,
    rgba(225 225 225 / 0.5) 112.1deg,
    rgb(230 230 230) 119.5deg,
    rgb(232 232 232) 240.5deg,
    rgb(235 235 235) 247.9deg,
    rgb(238 238 238) 255.3deg,
    rgb(240 240 240) 262.6deg,
    rgb(235 235 235) 270.0deg,
    rgba(204 204 204 / 0.5) 284.7deg,
    rgba(210 210 210 / 0.55) 292.1deg,
    rgb(213 213 213) 330.0deg,
    rgb(215 215 215) 360.0deg
  );
}

.lens-btn--plans .halo {
  background: conic-gradient(
    from 0deg at 50% 50%,
    rgb(158 158 158) 0.0deg,
    rgb(163 163 163) 63.5deg,
    rgb(225 225 225) 73.8deg,
    rgba(255 255 255 / 0) 82.6deg,
    rgba(195 195 195 / 0.5) 91.5deg,
    rgba(200 200 200 / 0) 106.2deg,
    rgba(200 200 200 / 0) 253.8deg,
    rgb(235 235 235) 261.2deg,
    rgba(255 255 255 / 0) 267.1deg,
    rgba(178 178 178 / 0.5) 275.9deg,
    rgba(150 150 150 / 0.35) 284.7deg,
    rgba(155 155 155 / 0.5) 320.0deg,
    rgb(158 158 158) 345.0deg,
    rgb(158 158 158) 360.0deg
  );
}

/* a11y, ändert nichts am look */
.lens-btn:focus-visible {
  outline: 2px solid #b9b9b9;
  outline-offset: 3px;
}