/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English+SC&family=Inconsolata:wght@200..900&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=M+PLUS+Code+Latin:wght@100..700&display=swap');

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


button {
  cursor: pointer;
}

.loading-progress {
  transition: width 0.5s ease-out;
}

.loading-progress.transition-none {
  transition: none;
}

[data-music--player-target="loadingProgress"] {
  transition: width 0.3s ease-out;
}

/* Add transition for the banner image */
[data-music--banner-target="image"] {
  transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
  will-change: opacity; /* Helps with performance */
}

/* app/assets/stylesheets/application.css */
[data-music--player-target="currentTime"],
[data-music--player-target="duration"] {
  font-variant-numeric: tabular-nums; /* Ensures consistent width for numbers */
  min-width: 3.5rem; /* Prevents layout shift */
}

.playlist-item {
  transition: background-color 0.2s ease;
  border-bottom: 1px solid theme('colors.gray.700');
}

.playlist-item:last-child {
  border-bottom: none;
}

.playlist-item.active {
  background-color: theme('colors.gray.700');
}

.letter-heading {
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.artist-card {
  transition: transform 0.2s;
}

.artist-card:hover {
  transform: translateY(-2px);
}

.st__body {
  @apply bg-st-drk-primary flex flex-col items-center w-full;
}

.st__header__section {
  @apply mt-8 w-96 sm:w-[640px] lg:w-[950px] xl:w-[1024px];
}

.st__header {
  @apply static max-w-5xl;
}

.st__navbar {
  @apply block rounded-t-lg bg-white;
}

.st__nav__container {
  @apply block max-w-5xl
}

.st__brand {
  @apply relative mt-1 ml-1;
}

.st__nav__logo {
  @apply block ml-5;
}

.st__container {
  @apply flex items-center justify-between bg-white w-96 sm:w-[640px] lg:w-[950px] xl:w-[1024px];
}

.st__navbar {
  @apply flex ;
}

.st__logo {
  @apply bg-st-logo w-[100px] h-[100px];
}

.mobile {
  @apply flex justify-center items-center w-16 h-16 rounded-lg cursor-pointer z-10 mr-4;
}

.st__sr__only {
  @apply invisible;
}

.st__menu__show {
  @apply opacity-100 transition-all;
}

.st__menu__hide {
  @apply animate-pulse;
}

.st__wrap__video {
  @apply flex items-center justify-center w-full mt-4 mb-44 bg-[url("/assets/saltandtar/Group_30-de8d0df4.svg")]
}

.st__title__info {
  @apply flex flex-col items-center justify-center;
}


.st__hero__actions {
  @apply flex justify-around my-16 w-full;
}


.st__arrow {
  position: absolute;
  left: 0;
  margin-top: -1.5rem;
  filter: drop-shadow(3px 3px 2px rgb(177, 177, 177));
}

.st__wave1__wrap {
  @apply flex justify-center border-2 border-red-600;
}

.st__wave1 {
  position: absolute;
  z-index: 5;
  width: 100%;
  left: 0;
  bottom: 3%;
}

.st__wave2 {
  position: absolute;
  z-index: 1;
  width: 100%;
  left: 0;
  bottom: 0px;
}

#lght-blue-wave {
  position: absolute;
  left: 0;
  bottom: 0;
}

#notification {
  transition: opacity 0.5s ease-in-out;
}

.hide {
  opacity: 0;
  visibility: hidden;
}

.visible {
  opacity: 1;
  visibility: visible;
}

/*? flash-notice */
.flash {
  padding: 15px;
  margin-bottom: 10px;
  border: 1px solid transparent;
  border-radius: 4px;
  opacity: 1;
  transition: opacity 1s ease-out;
}

.flash-notice {
  color: #D4E157;
  background-color: #334155;
  border-color: #d6e9c6;
}

.flash-alert {
  color: #fc5a58;
  background-color: #334155;
  border-color: #ebccd1;
}

/*? hermit grid */
.video-grid > div:nth-of-type(1) {
  grid-column: 1/2;
  grid-row: 1/3;
  /* margin-left: -50px; */
}

.video-grid > div:nth-of-type(2) {
  grid-column: 2/3;
  grid-row: 2/4;
}

.video-grid > div:nth-of-type(3) {
  grid-column: 3/4;
  grid-row: 3/5;
}

.video-grid > div:nth-of-type(4) {
  grid-column: 4/5;
  grid-row: 4/6;
}

.video-grid > div:nth-of-type(5) {
  grid-column: 5/6;
  grid-row: 5/7;
}

.video-grid > div:nth-of-type(6) {
  grid-column: 6/7;
  grid-row: 6/8;
}

.video-grid > div:nth-of-type(7) {
  grid-column: 1/2;
  grid-row: 3/5;
  /* margin-left: -50px; */
}

.video-grid > div:nth-of-type(8) {
  grid-column: 2/3;
  grid-row: 4/6;
}

.video-grid > div:nth-of-type(9) {
  grid-column: 3/4;
  grid-row: 5/7;
}

.video-grid > div:nth-of-type(10) {
  grid-column: 4/5;
  grid-row: 6/8;
}

.video-grid > div:nth-of-type(11) {
  grid-column: 5/6;
  grid-row: 7/9;
}

.video-grid > div:nth-of-type(12) {
  grid-column: 6/7;
  grid-row: 8/10;
}

.video-grid > div:nth-of-type(13) {
  grid-column: 1/2;
  grid-row: 5/7;
  /* margin-left: -50px; */
}

.video-grid > div:nth-of-type(14) {
  grid-column: 2/3;
  grid-row: 6/8;
}

.video-grid > div:nth-of-type(15) {
  grid-column: 3/4;
  grid-row: 7/9;
}

.video-grid > div:nth-of-type(16) {
  grid-column: 4/5;
  grid-row: 8/10;
}

.video-grid > div:nth-of-type(17) {
  grid-column: 5/6;
  grid-row: 9/11;
}

.video-grid > div:nth-of-type(18) {
  grid-column: 6/7;
  grid-row: 10/12;
}

.video-grid > div:nth-of-type(19) {
  grid-column: 1/2;
  grid-row: 7/9;
  /* margin-left: -50px; */
}

.video-grid > div:nth-of-type(20) {
  grid-column: 2/3;
  grid-row: 8/10;
}

.video-grid > div:nth-of-type(21) {
  grid-column: 3/4;
  grid-row: 9/11;
}

.video-grid > div:nth-of-type(22) {
  grid-column: 4/5;
  grid-row: 10/12;
}

.video-grid > div:nth-of-type(23) {
  grid-column: 5/6;
  grid-row: 11/13;
}

.video-grid > div:nth-of-type(24) {
  grid-column: 1/2;
  grid-row: 9/11;
  /* margin-left: -50px; */
}

.video-grid > div:nth-of-type(25) {
  grid-column: 2/3;
  grid-row: 10/13;
}