/* Teachers Junction — global styles
   Element-level styling is applied inline in the markup; this file holds the
   global resets, keyframes, focus and reduced-motion rules that cannot be inlined. */

html, body { margin: 0; padding: 0; background: #0B0D10; }
* { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
a:hover { color: #F7AD00; }
button { font: inherit; }
input, textarea, select { color: #16181C; }
input::placeholder, textarea::placeholder { color: #8A8F97; opacity: 1; }
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-text-fill-color: #16181C; transition: background-color 9999s ease-in-out 0s; }
details > summary::-webkit-details-marker { display: none; }

@keyframes sceneIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes drawerIn { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes bgDrift { from { transform: scale(1); } to { transform: scale(1.035); } }
@keyframes lineFlow { 0% { background-position: 0% 50%; } 100% { background-position: -200% 50%; } }
@keyframes tjSpin { to { transform: rotate(360deg); } }
.tj-spinner { display: inline-block; width: 15px; height: 15px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: tjSpin 0.7s linear infinite; vertical-align: middle; }

a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid #F7AD00; outline-offset: 3px; }
input:focus, textarea:focus, select:focus { outline: none; border-color: #0085D8; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}