/* Catalyst's own fonts. If you license them, put the files in assets/fonts and uncomment.
@font-face { font-family: 'Milker'; src: url('../fonts/Milker.otf') format('opentype'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Pirulen'; src: url('../fonts/Pirulen.otf') format('opentype'); font-weight: 100 900; font-display: swap; }
*/

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

/* Archivo at its widest setting stands in for Milker's extended shapes. */
.font-display { font-stretch: 125%; }

:focus-visible {
  outline: 3px solid #FA4616;
  outline-offset: 3px;
}
.on-blaze :focus-visible,
.on-blaze:focus-visible { outline-color: #000; }

/* FAQ accordion built on <details> */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details .faq-icon { transition: transform 200ms ease; }
details[open] .faq-icon { transform: rotate(45deg); }

/* Hero constellation: the stars light up in order on load. */
.constellation .star { opacity: 0; animation: star-in 500ms ease-out forwards; }
.constellation .line { stroke-dasharray: 400; stroke-dashoffset: 400; animation: line-in 1400ms ease-out 900ms forwards; }
.constellation .star:nth-of-type(1) { animation-delay: 100ms; }
.constellation .star:nth-of-type(2) { animation-delay: 220ms; }
.constellation .star:nth-of-type(3) { animation-delay: 340ms; }
.constellation .star:nth-of-type(4) { animation-delay: 460ms; }
.constellation .star:nth-of-type(5) { animation-delay: 580ms; }
.constellation .star:nth-of-type(6) { animation-delay: 700ms; }
.constellation .star:nth-of-type(7) { animation-delay: 820ms; }
@keyframes star-in { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes line-in { to { stroke-dashoffset: 0; } }
.constellation .star { transform-box: fill-box; transform-origin: center; }

/* Gallery masonry */
.masonry figure { break-inside: avoid; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
  .constellation .line { stroke-dashoffset: 0; }
}