@import "custom/signup_request_submitted.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  @font-face {
    font-family: "EB Garamond";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/EBGaramond-Medium.ttf) format("ttf");
  }
}

@layer utilities {
  /* Highlight only when :target or focused */
  @media (prefers-reduced-motion: no-preference) {
    .highlight-target:target,
    .highlight-target:focus-visible {
      @apply bg-yellow-100 rounded transition-colors;
      animation: pulseHighlight 1.5s ease-out;
    }
  }

  @keyframes pulseHighlight {
    0% {
      background-color: rgba(254, 249, 195, 1);
    }
    50% {
      background-color: rgba(254, 249, 195, 0.5);
    }
    100% {
      background-color: transparent;
    }
  }

  /* persistent highlight */
  .highlight-solid {
    @apply bg-yellow-100 rounded;
  }

  /* pulse animation */
  .highlight-animate {
    animation: pulseHighlight 1.5s ease-out;
  }

  @keyframes pulseHighlight {
    0% {
      background-color: rgba(254, 249, 195, 1); /* solid */
    }
    50% {
      background-color: rgba(254, 249, 195, 0.5); /* fade */
    }
    100% {
      background-color: rgba(254, 249, 195, 1); /* back to solid */
    }
  }

  /* Link underline animation */
  .link-underline-animate {
    @apply relative text-hodBlue-200 transition-colors duration-300;
  }

  .link-underline-animate::after {
    content: "";
    @apply absolute left-0 bottom-0 w-0 h-[8px] bg-current opacity-20;
    transform-origin: left;
    transition:
      width 0.35s ease-out,
      opacity 0.35s ease-out;
  }

  .link-underline-animate:hover::after {
    width: 100%;
    opacity: 10%;
  }

  .link-underline-animate:not(:hover)::after {
    width: 0;
    opacity: 0;
  }

  /* Reduce motion for users who prefer it/set it browsers */
  @media (prefers-reduced-motion: reduce) {
    .link-underline-animate::after {
      transition: none !important;
      width: 100%;
      opacity: 0.2;
    }
  }

  /* Fade in/out animation for collapsible sections */
  .fade-collapse {
    transition:
      opacity 300ms ease,
      max-height 300ms ease,
      transform 300ms ease;
    overflow: hidden;
  }

  .fade-hidden {
    opacity: 0;
    max-height: 0;
    transform: translateY(-0.5rem); /* slight upward slide when hidden */
  }

  .fade-visible {
    opacity: 1;
    max-height: 1000px; /* large enough to fit content */
    transform: translateY(0);
  }

  .filtered-out {
    display: none !important;
  }

  /* Libre Baskerville Google Font */
  .libre-baskerville-regular {
    font-family: "Libre Baskerville", serif;
    font-weight: 400;
    font-style: normal;
  }

  .libre-baskerville-bold {
    font-family: "Libre Baskerville", serif;
    font-weight: 700;
    font-style: normal;
  }

  .libre-baskerville-regular-italic {
    font-family: "Libre Baskerville", serif;
    font-weight: 400;
    font-style: italic;
  }
}


/*# sourceMappingURL=application.tailwind.css-e4fd34ebb1711397826965754b25f1b1dfba29e202a32ed67a0fc994923fda61.map */