/*
 * The few rules the Jaspr CSS API cannot express yet.
 * Everything else is written in Dart with @css.
 */

/* css.fontFace() has no font-weight parameter */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Medium.woff2') format('woff2');
  font-weight: 500 700;
  font-display: swap;
}

/*
 * Entry animations of the popovers.
 *
 * This file is loaded before the styles generated by Jaspr, so these rules
 * need a higher specificity (`.popover.x` instead of `.x`) or the generated
 * `:popover-open` rules would override the starting values.
 */
@starting-style {
  .popover.dialog:popover-open {
    opacity: 0;
    transform: scale(0.9);
  }
  .popover.drawer:popover-open {
    transform: translateX(100%);
  }
  .popover.phone-dialog:popover-open {
    opacity: 0;
  }
  .popover.game-dialog:popover-open {
    opacity: 0;
    transform: scale(0.92);
  }
  /* Projects shown by a filter fade in, like the AnimatedSwitcher */
  .gallery-grid .project-card {
    opacity: 0;
  }
  .popover[popover]:popover-open::backdrop {
    background-color: transparent;
  }
}
@media screen and (max-width: 1000px) {
  @starting-style {
    .popover.dialog:popover-open,
    .popover.drawer:popover-open {
      opacity: 1;
      transform: translateY(100%);
    }
  }
}