/*
 * QuipVid 2025 — Native CSS stylesheet
 * Ported from old-quipvid/QuipVid.Web/scss/
 *
 * Source files ported:
 *   base/_variables.scss
 *   base/_breakpoints.scss   (mixins resolved to px literals)
 *   base/_fonts.scss         (font-face + SmoochSans-SemiBold mixin inlined)
 *   base/_global.scss
 *   modules/site_header.scss
 *   modules/intro.scss       (@for loops pre-computed to fixed values)
 *   modules/quip_grid.scss
 *   modules/quip_player.scss (old #quip_player div → new .quip_modal dialog)
 *   animations/_index.scss   (empty in source; keyframes inlined from intro.scss)
 *
 * Explicitly skipped:
 *   vendor/           (FontAwesome, animate.css, fancybox — unused in new design)
 *   _shame.scss
 *   deprecated/
 *   pages/
 *
 * Breakpoint reference (for readability — NOT usable in @media with var()):
 *   --bp-big-mobile:      480px
 *   --bp-tablet:          768px
 *   --bp-large-mobile:    800px   (mq-large-mobile)
 *   --bp-small-desktop:   1060px
 *   --bp-lt-large-tablet: 1023px
 *   --bp-large-tablet:    1024px
 *   --bp-desktop:         1400px
 */

/* ===== :root — custom properties ===== */
:root {
  /* colors — from base/_variables.scss */
  --color-purple: #3a333f;
  --color-text:   #254151;
  --color-black:  #000;
  --color-white:  #fff;

  /* breakpoints — from base/_breakpoints.scss (reference only; use px in @media) */
  --bp-big-mobile:      480px;
  --bp-tablet:          768px;
  --bp-large-mobile:    800px;
  --bp-small-desktop:   1060px;
  --bp-large-tablet:    1024px;
  --bp-desktop:         1400px;
}


/* ===== base/fonts — @font-face ===== */
@font-face {
  font-family: 'SmoochSans-SemiBold';
  src: url('/css/fonts/SmoochSans/SmoochSans-SemiBold.woff2') format('woff2');
}


/* ===== base/global — reset + body + container ===== */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  /* intentionally empty in source */
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  line-height: 1.666em;
  font-weight: 400;
  color: var(--color-text);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img {
  max-width: 100%;
}

a,
a:visited,
a:active,
a:hover {
  text-decoration: none;
  outline: none !important;
  border: none;
}

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;

  &.wide {
    max-width: 1500px;
  }

  &.ultra_wide {
    max-width: 1600px;
  }
}


/* ===== modules/site_header ===== */
.site_header {
  padding: 65px 0 40px 0;
  display: flex;
  justify-items: center;
  justify-content: space-between;

  & section:nth-child(2) {
    & a:first-child {
      margin-right: 25px;
    }

    /* Constrain the trigger icons (search / etc) — without this the SVG
       renders at its intrinsic size which is larger than the wordmark. */
    & img {
      height: 22px;
      width: auto;
      display: block;
    }
  }

  /* @include mq-large-mobile → max-width: 800px */
  @media (max-width: 800px) {
    padding: 1em 0 2em 0;

    section:nth-child(1) {
      width: 50%;

      & img {
        width: 100%;
      }
    }

    section:nth-child(2) {
      & img {
        height: 20px;
      }
    }
  }
}


/* ===== modules/intro ===== */
/*
 * NOTE: The original intro.scss uses SCSS @for loops with random() to generate
 * per-element animation durations and keyframes.  random() is evaluated at
 * compile-time; we pre-compute representative values here.
 * animate1–9 keyframes are defined in the Animations section below.
 */
.intro {
  display: flex;
  align-items: center;
  margin-top: 2em;

  & h1 {
    /* @include SmoochSans-SemiBold inlined */
    font-family: 'SmoochSans-SemiBold', serif;
    font-weight: normal;
    margin-bottom: 0;
  }

  & h2 {
    margin-top: 0.5em;
    font-weight: normal;
    font-size: 1em;
  }

  & section:nth-child(1) {
    flex-shrink: 0;
    flex-basis: 60%;

    .animations {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    & img {
      pointer-events: none;
      user-select: none;
    }

    & img.tv {
      z-index: 1;
    }

    & img:not(.tv) {
      position: absolute;
      top: 0;

      &.circle {
        z-index: 0;
      }

      &.sticker {
        z-index: 2;
      }

      &.circle:nth-of-type(2) {
        right: 25%;
        top: -20%;
      }

      &.circle:nth-of-type(3) {
        right: 30%;
        top: auto;
        bottom: -20%;
      }

      &.circle:nth-of-type(4) {
        left: 15%;
        top: 30%;
      }

      &.sticker:nth-of-type(5) {
        right: 5%;
        top: -20%;
      }

      &.sticker:nth-of-type(6) {
        right: -4%;
        top: 20%;
      }

      &.sticker:nth-of-type(7) {
        right: 2%;
        top: 70%;
      }

      &.sticker:nth-of-type(8) {
        left: 2%;
        top: -20%;
      }

      &.sticker:nth-of-type(9) {
        left: 7%;
        top: auto;
        bottom: -20%;
      }
    }

    /*
     * Pre-computed from SCSS @for $i from 1 through 9:
     *   font-size: 16 + random(16) px  → fixed representative values
     *   animation-duration: $i * 3.8 s → 3.8s, 7.6s, 11.4s, … 34.2s
     */
    & img:not(.tv):nth-child(1) {
      opacity: 1;
      font-size: 24px;
      animation-name: animate1;
      animation-duration: 3.8s;
      animation-iteration-count: infinite;
    }

    & img:not(.tv):nth-child(2) {
      opacity: 1;
      font-size: 20px;
      animation-name: animate2;
      animation-duration: 7.6s;
      animation-iteration-count: infinite;
    }

    & img:not(.tv):nth-child(3) {
      opacity: 1;
      font-size: 28px;
      animation-name: animate3;
      animation-duration: 11.4s;
      animation-iteration-count: infinite;
    }

    & img:not(.tv):nth-child(4) {
      opacity: 1;
      font-size: 22px;
      animation-name: animate4;
      animation-duration: 15.2s;
      animation-iteration-count: infinite;
    }

    & img:not(.tv):nth-child(5) {
      opacity: 1;
      font-size: 30px;
      animation-name: animate5;
      animation-duration: 19s;
      animation-iteration-count: infinite;
    }

    & img:not(.tv):nth-child(6) {
      opacity: 1;
      font-size: 18px;
      animation-name: animate6;
      animation-duration: 22.8s;
      animation-iteration-count: infinite;
    }

    & img:not(.tv):nth-child(7) {
      opacity: 1;
      font-size: 26px;
      animation-name: animate7;
      animation-duration: 26.6s;
      animation-iteration-count: infinite;
    }

    & img:not(.tv):nth-child(8) {
      opacity: 1;
      font-size: 32px;
      animation-name: animate8;
      animation-duration: 30.4s;
      animation-iteration-count: infinite;
    }

    & img:not(.tv):nth-child(9) {
      opacity: 1;
      font-size: 16px;
      animation-name: animate9;
      animation-duration: 34.2s;
      animation-iteration-count: infinite;
    }
  }

  /* @include mq-large-mobile → max-width: 800px */
  @media (max-width: 800px) {
    display: block;
    margin-top: 1em;

    section:nth-child(1) {
      & img.tv {
        height: 200px;
      }

      & img.sticker {
        max-height: 125px;
      }
    }

    section:nth-child(2) {
      margin-top: 4.5em;
    }
  }
}


/* ===== modules/quip_grid ===== */
.quip_grid {
  & ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    grid-gap: 40px;

    & figure {
      position: relative;
      margin: 0;
      padding: 0;

      & img {
        aspect-ratio: 16 / 9;
        object-fit: cover;
        display: block;
        width: 100%;
      }

      & figcaption {
        position: absolute;
        bottom: 0;
        color: #fff;
        background: rgba(0, 0, 0, 0.4);
        width: 100%;
        padding: 0.25em 0.5em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}


/* ===== modules/quip_player — inner UI (.quip_player) ===== */
/*
 * .quip_player contains all inner UI styling: black header bar, white content
 * area, two-column details layout, video, related grid.
 * It renders standalone on /watch/{name}/ AND inside .quip_modal dialog.
 * When used inside a dialog, .quip_modal adds only the overlay/positioning.
 */
.quip_player {
  border-radius: 22px;
  overflow: hidden;

  /* header bar (black bar with close button) */
  & > header {
    height: 83px;
    background: #000;
    display: flex;
    align-items: center;
    padding: 0 30px;
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;

    & button {
      background: #FF0000;
      width: 25px;
      height: 25px;
      text-indent: -99999px;
      border-radius: 50%;
      outline: none;
      border: 0;
      cursor: pointer;
      flex-shrink: 0;
    }
  }

  /* white content area */
  & > .content {
    background: #fff;
    padding: 43px;
    border-bottom-left-radius: 22px;
    border-bottom-right-radius: 22px;
    overflow-y: auto;
  }

  /* details section — two-column flex layout */
  .details {
    margin: 0 auto;
    display: flex;

    & i {
      margin-right: 5px;
    }

    & a {
      color: #000;
    }

    & section:nth-child(1) {
      flex-basis: 21%;
      flex-shrink: 0;
      margin-right: 75px;
    }

    & section:nth-child(2) {
      flex: 1;
    }

    & h1 {
      /* @include SmoochSans-SemiBold inlined */
      font-family: 'SmoochSans-SemiBold', serif;
      font-weight: normal;
      font-size: 32px;
      margin: 0 0 0.25em 0;
      line-height: 38px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    & h2 {
      font-size: 18px;
      margin: 0;
      line-height: 21px;
      text-decoration-line: underline;
    }

    & video {
      width: 100%;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      display: block;
    }

    /* Video wrapper enables absolutely-positioned overlays for the
       "tap to unmute" hint and the end-of-clip replay prompt. */
    & .video-wrap {
      position: relative;
    }

    /* Unmute pill: appears in the lower-left of the video when the
       muted-autoplay fallback kicked in. Click unmutes and dismisses.
       Sits above the video controls but doesn't block them — it's a
       small inline button, not a full-cover overlay. */
    & .video-unmute {
      position: absolute;
      bottom: 3.25em;
      left: 0.75em;
      display: none;
      align-items: center;
      gap: 0.4em;
      padding: 0.55em 0.9em;
      background: rgba(0, 0, 0, 0.78);
      color: #fff;
      border: 0;
      border-radius: 999px;
      font: inherit;
      font-size: 0.875em;
      cursor: pointer;
      z-index: 2;

      & svg {
        flex-shrink: 0;
      }

      &[data-visible="true"] {
        display: inline-flex;
      }

      &:hover {
        background: rgba(0, 0, 0, 0.92);
      }
    }

    /* Replay overlay: full-cover dimmed layer with a centered replay
       button. Shown when the video's `ended` event fires. The click
       on this overlay is what flips the session into "user gesture
       granted" state, so the next quip can autoplay unmuted. */
    & .video-replay {
      position: absolute;
      inset: 0;
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.5em;
      background: rgba(0, 0, 0, 0.65);
      color: #fff;
      border: 0;
      cursor: pointer;
      opacity: 0;
      transition: opacity 240ms ease;
      z-index: 3;
      font: inherit;
      font-size: 1.1em;

      &[data-visible="true"] {
        display: flex;
        opacity: 1;
      }

      & svg {
        transition: transform 200ms ease;
      }

      &:hover svg {
        transform: scale(1.1);
      }
    }

    & footer {
      display: flex;
      justify-content: space-between;

      & a {
        text-decoration: underline;
      }
    }

    & ul {
      list-style: none;
      margin: 1.25em 0 0 0;
      padding: 1.25em 0 0 0;
      border-top: 1px solid #B4B4B4;

      & li {
        margin: 0.5em 0;
        cursor: pointer;

        &:first-child {
          margin-top: 0;
        }
      }
    }
  }

  /* related quips grid — auto-fill (not auto-fit) so 1 or 2 items
     don't stretch to the full row width; they stay at card size with
     empty tracks remaining on the right. */
  .related {
    .quip_grid ul {
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
  }

  /* @include mq-large-mobile → max-width: 800px */
  @media (max-width: 800px) {
    border-radius: 0;

    .quip_grid {
      margin-top: 6em;
    }

    & > header {
      border-radius: 0;
      height: 53px;
      flex-shrink: 0;
      position: sticky;
      top: 0;
    }

    & > .content {
      border-radius: 0;
      padding: 22px 18px;
    }

    .details {
      flex-direction: column;

      & ul {
        display: flex;
        align-items: center;
        justify-content: space-between;
        align-content: center;
        padding: 0.5em 0;
        column-gap: 0.5em;
      }

      section:nth-child(1) {
        margin-right: 0;
        flex-basis: 100%;
      }
    }
  }
}


/* ===== modules/quip_player → .quip_modal <dialog> wrapper ===== */
/*
 * .quip_modal is ONLY the dialog overlay/positioning wrapper.
 * All inner UI styling lives in .quip_player above.
 * Structure in DOM: <dialog class="quip_modal"><div><div class="quip_player">...</div></div></dialog>
 */
.quip_modal {
  /* native <dialog> reset */
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 90vw;
  width: 100%;
  max-height: 90vh;
  overflow: visible;
  border-radius: 22px;

  /* center the dialog */
  position: fixed;
  top: 50%;
  left: 50%;
  margin: 0;

  /* Subtle macOS-style enter/exit: dialog fades + springs up from
     a slight downward offset; backdrop fades alongside. `allow-discrete`
     is what lets `display` transition (modern Chrome/Safari/FF).
     @starting-style defines the "from" state when the [open] attribute
     is first applied. */
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition:
    opacity 220ms ease,
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    overlay 220ms allow-discrete,
    display 220ms allow-discrete;

  &:not([open]) {
    opacity: 0;
    transform: translate(-50%, -45%) scale(0.96);
    pointer-events: none;
  }

  &::backdrop {
    background: rgba(0, 0, 0, 0.85);
    opacity: 1;
    transition:
      opacity 220ms ease,
      overlay 220ms allow-discrete,
      display 220ms allow-discrete;
  }

  @starting-style {
    &[open] {
      opacity: 0;
      transform: translate(-50%, -45%) scale(0.96);
    }

    &[open]::backdrop {
      opacity: 0;
    }
  }

  /* when inside the modal, content area gets a height cap */
  .quip_player > .content {
    max-height: calc(90vh - 83px);
  }

  /* @include mq-large-mobile → max-width: 800px */
  @media (max-width: 800px) {
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
    top: 0;
    left: 0;
    transform: none;

    .quip_player > .content {
      max-height: calc(100vh - 53px);
    }
  }
}


/* ===== search modal — shares .quip_modal shell with the player ===== */
#quip_search {
  /* Search needs more room than the video player — override the .quip_modal
     90vw cap so the input + grouped results can breathe. min() keeps a 5vw
     margin to the viewport edges on smaller screens. */
  max-width: min(1240px, 95vw);
  max-height: 90vh;
  overflow: hidden;

  & > .container {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  & header {
    height: 83px;
    background: #000;
    display: flex;
    align-items: center;
    padding: 0 30px;
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
    flex-shrink: 0;

    & button {
      background: #FF0000;
      width: 25px;
      height: 25px;
      text-indent: -99999px;
      border-radius: 50%;
      outline: none;
      border: 0;
      cursor: pointer;
      flex-shrink: 0;
    }
  }

  & > .container > .content {
    background: #fff;
    padding: 0 43px 43px 43px;
    border-bottom-left-radius: 22px;
    border-bottom-right-radius: 22px;
    overflow-y: auto;
    flex: 1;
  }

  & .search_form {
    padding: 2em 0 1em 0;
    max-width: 1200px;
    margin: 0 auto;

    & div[role="search"] {
      margin: 0;
    }

    & input {
      width: 100%;
      border: 0;
      border-bottom: 6px solid #000;
      border-radius: 3px;
      background: transparent;
      font-family: 'SmoochSans-SemiBold', serif;
      font-weight: normal;
      font-size: 32px;
      color: #000;
      padding: 0.25em 0;
      outline: none;
    }
  }

  & > .container > .content > .results {
    padding: 1em 0 2em 0;

    & > ul {
      list-style: none;
      margin: 0;
      padding: 0;

      & > li {
        padding: 1em 0;
        border-top: 1px solid #E5E5E5;

        & > h2 {
          margin: 0 0 0.5em 0;
          color: var(--color-text);
          font-size: 1.25em;
        }
      }
    }

    /* inner per-group results: poster + quips side by side */
    & .results {
      display: flex;
      gap: 1em;
      align-items: flex-start;

      & .poster {
        flex-shrink: 0;
        margin: 0;
        width: 80px;

        & img {
          width: 100%;
          height: auto;
          display: block;
        }
      }

      & ul.quips {
        list-style: none;
        margin: 0;
        padding: 0;
        flex: 1;

        & li {
          padding: 0.25em 0;
        }

        & a {
          display: inline-flex;
          align-items: center;
          gap: 0.5em;
          color: var(--color-text);
          padding: 0.15em 0.4em;
          border-radius: 4px;

          & svg {
            flex-shrink: 0;
            color: var(--color-purple);
          }

          &:hover {
            color: var(--color-purple);
            text-decoration: underline;
          }

          /* Keyboard-driven highlight when arrow-navigating results. */
          &.is-active {
            background: rgba(58, 51, 63, 0.1);
            color: var(--color-purple);
          }
        }
      }
    }
  }

  /* mobile */
  @media (max-width: 800px) {
    & header {
      border-radius: 0;
      height: 53px;
      position: sticky;
      top: 0;
    }

    & > .container > .content {
      border-radius: 0;
      padding: 0 18px 22px 18px;
    }
  }
}

/* empty-state paragraph */
p.search_empty {
  padding: 24px 20px;
  margin: 0;
  color: #888;
  text-align: center;
  font-size: 0.9em;
}

/* ===== collection modal (movie / user grid view) ===== */
.quip_collection {
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  /* Anchor a definite max-height here rather than chaining through the
     dialog + the x-html wrapper — the wrapper has no height, so percentage
     heights collapse and the inner flex never gets a constraint to overflow
     against. Capping at 90vh makes .content's `flex: 1 + overflow-y: auto`
     actually do its job. */
  max-height: 90vh;
  display: flex;
  flex-direction: column;

  & > header {
    background: #000;
    height: 65px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 1.5em;

    & button {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 0;
      background: #ff5f57;
      cursor: pointer;
      font-size: 0;
      padding: 0;
    }
  }

  & > .content {
    flex: 1 1 auto;
    /* min-height:0 is the canonical fix for a flex child that needs to
       scroll — without it, the item's intrinsic min-content height wins
       over `flex: 1` and overflow:auto has nothing to clip against. */
    min-height: 0;
    overflow-y: auto;
    padding: 2em;

    & .collection_heading {
      margin-bottom: 1.5em;

      & small {
        display: block;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-size: 0.75em;
        color: #888;
        margin-bottom: 0.25em;
      }

      & h1 {
        font-family: 'SmoochSans-SemiBold', serif;
        font-weight: normal;
        font-size: 2.5em;
        margin: 0;
        color: #000;
      }
    }
  }
}

/* collection modal sizing — needs more room than the video player */
#quip_collection.quip_modal {
  max-width: min(1240px, 95vw);
  max-height: 90vh;
}

/* Embed code reveal panel inside player actions */
.embed_panel {
  margin-top: 0.75em;
  padding: 0.75em;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 0.5em;

  & textarea {
    width: 100%;
    min-height: 4em;
    font-family: ui-monospace, 'SF Mono', Consolas, monospace;
    font-size: 0.75em;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0.5em;
    resize: vertical;
    background: #fff;
    box-sizing: border-box;
  }

  & button {
    align-self: flex-start;
    background: var(--color-purple, #3a333f);
    color: #fff;
    border: 0;
    padding: 0.4em 1em;
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
    font-size: 0.85em;
  }
}

/* Actions links — make them look interactive now that they are real links */
.quip_player .actions a {
  cursor: pointer;
  text-decoration: none;
  color: inherit;

  &:hover {
    text-decoration: underline;
  }

  &.is-active {
    font-weight: 600;
  }
}

/* ===== animations ===== */
/*
 * Source: modules/intro.scss @for $i from 1 through 9 { @keyframes animate#{$i} }
 * The original used random() for rotation/scale/translate values — those are
 * evaluated at compile-time by the Sass compiler. We pre-compute a fixed but
 * varied set here that matches the spirit of the original floating animation.
 *
 * animations/_index.scss was empty in source; all keyframes originated in intro.scss.
 */

@keyframes animate1 {
  0%   { }
  25%  { transform: rotate(-1deg) scale(0.4) translateY(8px) translateX(5px); }
  50%  { transform: rotate(-1deg) scale(0.4) translateY(12px) translateX(10px); }
  75%  { transform: rotate(2deg) scale(0.3) translateY(15px) translateX(20px); }
  100% { }
}

@keyframes animate2 {
  0%   { }
  25%  { transform: rotate(-2deg) scale(0.5) translateY(6px) translateX(8px); }
  50%  { transform: rotate(-1deg) scale(0.5) translateY(10px) translateX(14px); }
  75%  { transform: rotate(4deg) scale(0.4) translateY(20px) translateX(18px); }
  100% { }
}

@keyframes animate3 {
  0%   { }
  25%  { transform: rotate(-3deg) scale(0.6) translateY(9px) translateX(4px); }
  50%  { transform: rotate(-2deg) scale(0.6) translateY(14px) translateX(12px); }
  75%  { transform: rotate(6deg) scale(0.5) translateY(25px) translateX(22px); }
  100% { }
}

@keyframes animate4 {
  0%   { }
  25%  { transform: rotate(-4deg) scale(0.7) translateY(5px) translateX(11px); }
  50%  { transform: rotate(-3deg) scale(0.7) translateY(16px) translateX(7px); }
  75%  { transform: rotate(8deg) scale(0.6) translateY(18px) translateX(28px); }
  100% { }
}

@keyframes animate5 {
  0%   { }
  25%  { transform: rotate(-5deg) scale(0.8) translateY(12px) translateX(6px); }
  50%  { transform: rotate(-4deg) scale(0.8) translateY(18px) translateX(15px); }
  75%  { transform: rotate(10deg) scale(0.7) translateY(22px) translateX(24px); }
  100% { }
}

@keyframes animate6 {
  0%   { }
  25%  { transform: rotate(-6deg) scale(0.9) translateY(7px) translateX(13px); }
  50%  { transform: rotate(-5deg) scale(0.9) translateY(14px) translateX(9px); }
  75%  { transform: rotate(12deg) scale(0.8) translateY(28px) translateX(16px); }
  100% { }
}

@keyframes animate7 {
  0%   { }
  25%  { transform: rotate(-7deg) scale(1.0) translateY(11px) translateX(18px); }
  50%  { transform: rotate(-6deg) scale(1.0) translateY(19px) translateX(5px); }
  75%  { transform: rotate(14deg) scale(0.9) translateY(30px) translateX(12px); }
  100% { }
}

@keyframes animate8 {
  0%   { }
  25%  { transform: rotate(-8deg) scale(1.1) translateY(4px) translateX(16px); }
  50%  { transform: rotate(-7deg) scale(1.1) translateY(17px) translateX(20px); }
  75%  { transform: rotate(16deg) scale(1.0) translateY(26px) translateX(30px); }
  100% { }
}

@keyframes animate9 {
  0%   { }
  25%  { transform: rotate(-9deg) scale(1.2) translateY(14px) translateX(3px); }
  50%  { transform: rotate(-8deg) scale(1.2) translateY(20px) translateX(17px); }
  75%  { transform: rotate(18deg) scale(1.1) translateY(29px) translateX(25px); }
  100% { }
}