/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* ── Hidden Threads Co. — Custom Styles ────────────────────── */

/* Reveal animation: Turbo Frame inserts .threads-reveal which fades/slides in */
@keyframes ht-reveal {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.threads-reveal {
  animation: ht-reveal 0.6s ease-out forwards;
}

/* Stagger each card's entrance */
.threads-reveal .grid > div:nth-child(1) { animation: ht-reveal 0.5s ease-out 0.1s both; }
.threads-reveal .grid > div:nth-child(2) { animation: ht-reveal 0.5s ease-out 0.25s both; }
.threads-reveal .grid > div:nth-child(3) { animation: ht-reveal 0.5s ease-out 0.4s both; }

/* Custom select arrow (removes browser default, no JS needed) */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23192064' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px !important;
}

/* Card hover lift */
.thread-card {
  transition: transform 0.2s ease;
}
.thread-card:hover {
  transform: translateY(-3px);
}

/* Focus ring using brand gold */
select:focus,
button:focus {
  outline: 2px solid #192064;
  outline-offset: 2px;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}