@import "tailwindcss";
@plugin "@tailwindcss/typography";

@font-face {
  font-family: 'ZenMaruGothic';
  src: url('./ZenMaruGothic-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'ZenMaruGothic';
  src: url('./ZenMaruGothic-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

:root {
  font-family: "ZenMaruGothic", sans-serif;
}

@view-transition {
  navigation: auto;
}

@keyframes zoom-fade-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.05);
  }
}

@keyframes zoom-fade-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

::view-transition-old(zoom-fade) {
  animation: 400ms ease both zoom-fade-out;
}

::view-transition-new(zoom-fade) {
  animation: 500ms ease 100ms both zoom-fade-in;
}

.zoom-fade {
  view-transition-name: zoom-fade;
}