/* Mythic Foundry: small amount of custom CSS to complement Tailwind */

:root{
  --mf-accent: 124 58 237; /* violet-600 */
}

/* Smooth fonts + rendering */
html{
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Subtle animated grain */
.mf-grain{
  position: relative;
}
.mf-grain:before{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .08;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency=".8" numOctaves="2" stitchTiles="stitch"/></filter><rect width="120" height="120" filter="url(%23n)" opacity=".35"/></svg>');
  mix-blend-mode: overlay;
}

/* Focus ring helper */
.mf-focus:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--mf-accent), .35);
}

/* Nice scrollbar (where supported) */
*::-webkit-scrollbar{
  height: 10px;
  width: 10px;
}
*::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,.25);
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover{
  background: rgba(148,163,184,.35);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}