/* ==========================================================================
   Botón de cristal (.glassy-button). En el "Search" del Home y el "Join us" de Aims.
   - Basado en "Glass Buttons" de Patrick Hill (Dribbble), versión CSS de la comunidad.
   - Marcado: <button class="glassy-button"><span>Texto</span></button>
     (o <a class="glassy-button" href="..."><span>Texto</span></a>, para un enlace)
   - Tamaño propio de cada sitio: cambiar --_padding y font-size en el CSS de esa página.
   - Dos capas:
     - ::after del botón: la "superficie" de color (azul de la web).
     - <span> con el texto: un cristal que, al pasar el ratón, se levanta, se vuelve
       translúcido y desenfoca lo de detrás (backdrop-filter).
   - La superficie se mueve un poco hacia el lado contrario del ratón: lo calcula
     glassy_button.js (--_x-motion / --_y-motion).
   ========================================================================== */
.glassy-button {
  /* Relleno flexible (móvil 360 px → escritorio 900 px): con 2.1rem fijos a los lados, en móvil
     el botón se llevaba casi media barra y dejaba poco sitio para escribir.
     - arriba/abajo: 0.6rem → 0.9rem
     - lados: 1rem → 2.1rem */
  --_padding: clamp(0.6rem, 0.4rem + 0.89vw, 0.9rem) clamp(1rem, 0.27rem + 3.26vw, 2.1rem);
  --_surface: var(--accent-primary);
  --_transition-speed: 200ms;
  --_hover-opacity: 0.4;
  --_pressed-opacity: 0.15;
  --_hover-blurriness: 5px;
  --_pressed-blurriness: 10px;
  --_frostiness: 0.3;
  /* Cuánto se levanta el cristal. Menos que en el original (0.5rem): la barra de
     búsqueda solo tiene 0.5rem de margen y se saldría de ella. */
  --_hover-offset: 0.3rem;
  --_pressed-offset: 0.15rem;
  --_motion-factor: 0.1;

  /* inline-block: un <a> (enlace) es "inline" y no respetaría el relleno ni el levantarse. */
  display: inline-block;
  position: relative;
  /* isolation: las capas con z-index -1 se quedan dentro del botón. Sin esto se
     irían detrás del fondo de la barra de búsqueda y no se verían. */
  isolation: isolate;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  outline: 0;
  background-color: transparent;
  color: #ffffff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

/* Si es un enlace: que no le cambie el color ni lo subraye el estilo general de a:hover. */
.glassy-button:hover,
.glassy-button:focus-visible {
  color: #ffffff;
  text-decoration: none;
}

.glassy-button span {
  display: block;
  /* position + isolation: el ruido (::before) se pinta encima del fondo del cristal
     y debajo del texto, y overflow: hidden lo recorta a la forma redondeada. */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--_padding);
  border-radius: inherit;
  background-color: hsl(0 0% 100% / 0);
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  transition: background-color var(--_transition-speed),
    backdrop-filter var(--_transition-speed),
    translate var(--_transition-speed),
    -webkit-backdrop-filter var(--_transition-speed);
}

/* Ruido (SVG generado, sin fichero aparte): textura de cristal esmerilado. */
.glassy-button span::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml, %3Csvg viewBox='0 0 171 171' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='3.74' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0;
  transition: opacity var(--_transition-speed);
}

/* Superficie de color, debajo del cristal. */
.glassy-button::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background-color: var(--_surface);
  transition: scale var(--_transition-speed),
    translate var(--_transition-speed);
  animation: glassy-exit forwards var(--_transition-speed);
}

.glassy-button:hover span,
.glassy-button:focus-visible span {
  outline: 1px solid hsl(0 0% 100% / 0.7);
  background-color: hsl(0 0% 100% / var(--_hover-opacity));
  -webkit-backdrop-filter: blur(var(--_hover-blurriness));
  backdrop-filter: blur(var(--_hover-blurriness));
  translate: 0 calc(var(--_hover-offset) * -1);
}

.glassy-button:hover span::before,
.glassy-button:focus-visible span::before {
  opacity: var(--_frostiness);
}

.glassy-button:hover::after,
.glassy-button:focus-visible::after {
  scale: 0.95;
  translate: 0 0.125rem;
  animation: glassy-enter forwards var(--_transition-speed);
}

.glassy-button:active span {
  -webkit-backdrop-filter: blur(var(--_pressed-blurriness));
  backdrop-filter: blur(var(--_pressed-blurriness));
  background-color: hsl(0 0% 100% / var(--_pressed-opacity));
  translate: 0 calc(var(--_pressed-offset) * -1);
}

.glassy-button:active::after {
  scale: 0.875;
  translate: 0 0.25rem;
}

/* Nombres con "glassy-": las @keyframes son globales, así no chocan con otras de la web.
   - 0px por defecto: antes de mover el ratón (o con teclado) no hay --_x-motion. */
@keyframes glassy-enter {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(
      calc(var(--_x-motion, 0px) * var(--_motion-factor) * -1),
      calc(var(--_y-motion, 0px) * var(--_motion-factor) * -1)
    );
  }
}

@keyframes glassy-exit {
  from {
    transform: translate(
      calc(var(--_x-motion, 0px) * var(--_motion-factor) * -1),
      calc(var(--_y-motion, 0px) * var(--_motion-factor) * -1)
    );
  }
  to {
    transform: translate(0, 0);
  }
}

/* Quien tiene desactivadas las animaciones en su sistema: sin movimiento, solo el cambio de color. */
@media (prefers-reduced-motion: reduce) {
  .glassy-button span,
  .glassy-button::after {
    transition: none;
    animation: none;
  }
  .glassy-button:hover span,
  .glassy-button:focus-visible span,
  .glassy-button:active span {
    translate: none;
  }
  .glassy-button:hover::after,
  .glassy-button:focus-visible::after,
  .glassy-button:active::after {
    scale: none;
    translate: none;
  }
}