/* A card on Discover that opens Listen (the ones it leads with, and the tall ones in a line of
   Listens) is a small Listen, so it reads as the moving, captioned kind of story before it's
   tapped. Three things of Listen's are on it:

   - the picture, drifting slowly, and giving way to the story's other pictures in turn when
     it has them;
   - the waveform that runs across a story there, each story's with its own shape and pace;
   - the headline, read through a word at a time in Listen's caption colour.

   The picture moves while the card is on screen (data-in-view). The waveform runs and the
   headline is read only while the card has the floor (data-speaking), which the cards on
   screen take one at a time: a row is one story talking, not all of them at once.
   app--listen-cards sets both; without the script the card is simply still. */

/* The waveform: a window onto a strip twice as long as its pattern, which slides one pattern's
   length and starts again unseen. As in Listen, what's been said (left of the middle) is
   brighter than what's coming. It waits, dimmed and where it stopped, between the card's turns. */
.listen-card__wave {
  display: block;
  height: 20px;
  overflow: hidden;
  color: #F7F5F0;
  opacity: 0.55;
  transition: opacity 0.4s ease-out;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.45));
  -webkit-mask-image: linear-gradient(90deg, transparent, rgb(0 0 0 / 0.95) 14%, rgb(0 0 0 / 0.95) 50%, rgb(0 0 0 / 0.45) 50%, rgb(0 0 0 / 0.45) 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, rgb(0 0 0 / 0.95) 14%, rgb(0 0 0 / 0.95) 50%, rgb(0 0 0 / 0.45) 50%, rgb(0 0 0 / 0.45) 86%, transparent);
}

.listen-card__wave-strip {
  display: block;
  max-width: none;
}

.listen-card[data-speaking] .listen-card__wave {
  opacity: 1;
}

.listen-card[data-in-view] .listen-card__wave-strip {
  animation: listen-card-wave var(--wave-time, 8s) linear infinite paused;
}

.listen-card[data-speaking] .listen-card__wave-strip {
  animation-play-state: running;
  will-change: transform;
}

@keyframes listen-card-wave {
  to { transform: translateX(-50%); }
}

/* The picture's drift: slow and slight. Translate comes before scale, so it's a share of the
   frame, and the picture is always scaled past the frame by more than it's moved: no edge
   shows. Each card of a row drifts its own way at its own pace. */
.listen-card { --pan-time: 13s; --pan-x-from: -2.5%; --pan-y-from: 1.5%; --pan-x-to: 5%; --pan-y-to: -4%; --cut-offset: 0s; }
.listen-card:nth-child(4n + 2) { --pan-time: 16s; --pan-x-from: 2.5%; --pan-y-from: 2%; --pan-x-to: -5%; --pan-y-to: -3%; }
.listen-card:nth-child(4n + 3) { --pan-time: 11s; --pan-x-from: -2%; --pan-y-from: -2.5%; --pan-x-to: 4%; --pan-y-to: 5%; }
.listen-card:nth-child(4n + 4) { --pan-time: 14s; --pan-x-from: 2%; --pan-y-from: -2%; --pan-x-to: -5%; --pan-y-to: 4%; }
/* And the cards of a row change picture at different moments, not all at once. */
.listen-card:nth-child(3n + 2) { --cut-offset: 1.7s; }
.listen-card:nth-child(3n + 3) { --cut-offset: 3.1s; }

.listen-card__picture {
  transform: translate(var(--pan-x-from), var(--pan-y-from)) scale(1.08);
}

.listen-card[data-in-view] .listen-card__picture {
  animation: listen-card-pan var(--pan-time) ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes listen-card-pan {
  from { transform: translate(var(--pan-x-from), var(--pan-y-from)) scale(1.08); }
  to { transform: translate(var(--pan-x-to), var(--pan-y-to)) scale(1.22); }
}

/* The story's other pictures lie over the cover and fade in for their turn, 0.7s each way as
   Listen's do: with one more, a round is 9.6s and they have half each; with two, it's 12s and
   a third each. They're partway through their own drift when they arrive. */
.listen-card__picture--more {
  opacity: 0;
}

.listen-card[data-in-view] .listen-card__picture--more {
  animation-name: listen-card-pan, listen-card-picture-2-of-2;
  animation-duration: var(--pan-time), 9.6s;
  animation-timing-function: ease-in-out, linear;
  animation-iteration-count: infinite;
  animation-direction: alternate, normal;
  animation-delay: -4s, var(--cut-offset);
  will-change: transform, opacity;
}

.listen-card[data-in-view] .listen-card__picture--2-of-3 { animation-name: listen-card-pan, listen-card-picture-2-of-3; animation-duration: var(--pan-time), 12s; }
.listen-card[data-in-view] .listen-card__picture--3-of-3 { animation-name: listen-card-pan, listen-card-picture-3-of-3; animation-duration: var(--pan-time), 12s; animation-delay: -8s, var(--cut-offset); }

@keyframes listen-card-picture-2-of-2 {
  0%, 50% { opacity: 0; }
  57.3%, 92.7% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes listen-card-picture-2-of-3 {
  0%, 33.3% { opacity: 0; }
  39.2%, 72.5% { opacity: 1; }
  78.3%, 100% { opacity: 0; }
}

@keyframes listen-card-picture-3-of-3 {
  0%, 66.7% { opacity: 0; }
  72.5%, 94.2% { opacity: 1; }
  100% { opacity: 0; }
}

/* The headline is read once through each time the card gets the floor. --word is the word's
   place in it; --listen-read is set where the headline sits on something the caption yellow
   wouldn't show on. */
.listen-card[data-speaking] .listen-card__word {
  animation: listen-card-read 0.55s linear both;
  animation-delay: calc(0.25s + var(--word, 0) * 0.2s);
}

@keyframes listen-card-read {
  0%, 100% { color: inherit; }
  30%, 65% { color: var(--listen-read, #FFD66B); }
}

/* Reduce Motion: nothing slides or drifts. The story's pictures still fade through in their
   turn, and the card with the floor still brightens its waveform and has its words read. */
@media (prefers-reduced-motion: reduce) {
  .listen-card__picture {
    transform: none;
  }

  .listen-card[data-in-view] .listen-card__wave-strip,
  .listen-card[data-in-view] .listen-card__picture {
    animation-name: none;
    will-change: auto;
  }

  .listen-card[data-in-view] .listen-card__picture--2-of-2 { animation-name: none, listen-card-picture-2-of-2; }
  .listen-card[data-in-view] .listen-card__picture--2-of-3 { animation-name: none, listen-card-picture-2-of-3; }
  .listen-card[data-in-view] .listen-card__picture--3-of-3 { animation-name: none, listen-card-picture-3-of-3; }
}
@tailwind base;
@tailwind components;
@tailwind utilities;
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: 0;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  scrollbar-width: 0;
  display: none;
}
.scrollbar-default {
  -ms-overflow-style: auto;
  scrollbar-width: auto;
}
.scrollbar-default::-webkit-scrollbar {
  display: block;
}
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -.125em;
  line-height: 1em;
  fill: currentColor;
  display: inline-block;
}
/* Disable long-presses menu on iOS  */
@supports (-webkit-touch-callout: none) {
  body { -webkit-touch-callout: none }
}
/*
 * 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.
 *


 */