/* Static-site companion to site.css. site.css is the compiled stylesheet for this site. It expects three font family variables that a bundler normally injects on , and it relies on JS-driven animation for the reveal, accordion and lightbox states. Those two gaps are filled here so the plain HTML pages render and animate identically. */ :root { --font-instrument-serif: "Instrument Serif"; --font-instrument-sans: "Instrument Sans"; --font-ibm-plex-mono: "IBM Plex Mono"; } /* Class-level `display` would otherwise win over the [hidden] default. */ [hidden] { display: none !important; } /* Entrance reveal for hero and curriculum copy. */ .reveal { opacity: 0; transform: translateY(22px); animation: reveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .reveal--d1 { animation-delay: 0.09s; } .reveal--d2 { animation-delay: 0.18s; } .reveal--d3 { animation-delay: 0.27s; } .reveal--d4 { animation-delay: 0.36s; } @keyframes reveal { to { opacity: 1; transform: none; } } /* Accordion panel + lightbox open transitions. */ .track__panel { overflow: hidden; } .track--open > .track__heading + .track__panel { animation: panelIn 0.32s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes panelIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .lightbox { animation: fadeIn 0.24s cubic-bezier(0.16, 1, 0.3, 1); } .lightbox__panel { animation: panelUp 0.34s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes panelUp { from { opacity: 0; transform: translateY(18px) scale(0.985); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .reveal { animation-duration: 0.12s; animation-delay: 0s; transform: none; } .track--open > .track__heading + .track__panel, .lightbox, .lightbox__panel { animation-duration: 0.12s; animation-name: fadeIn; } }