/* shsatprep.nyc — shared base CSS for all pages.
   Animation keyframes, scroll-reveal, base resets. */

html, body { margin: 0; padding: 0; background: #0a0c15; }
*, *::before, *::after { box-sizing: border-box; }
::selection { background: #a78bfa; color: #0a0a14; }

/* Animation keyframes */
@keyframes pulseDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.85); } }
@keyframes blink    { 50% { opacity: 0.2; } }
@keyframes fadeUp   { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes grow     { from { width: 0; } }
@keyframes drift    { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(8px, -4px); } }
@keyframes floatY   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes barGrow  { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes slideIn  { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } }
@keyframes shimmer  { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes countUp  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spinSlow { to { transform: rotate(360deg); } }

/* Scroll reveal — added programmatically to sections by ChPage / TheGridHomepage */
.scroll-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.scroll-reveal.scroll-reveal-l { transform: translateX(-32px); }
.scroll-reveal.scroll-reveal-r { transform: translateX(32px); }
.scroll-reveal.in { opacity: 1; transform: translateY(0) translateX(0); }

/* Hover-lift helper */
.lift { transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.18s ease; }
.lift:hover { transform: translateY(-2px); }

/* Marker-highlight accent — draws on as parent section reveals */
.accent-mark {
  background-size: 0% 100%;
  transition: background-size 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.35s;
  white-space: nowrap;
}
.scroll-reveal.in .accent-mark,
.in .accent-mark { background-size: 100% 100%; }
/* For hero accents not inside a .scroll-reveal, animate on first paint */
@keyframes drawMark { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
section:not(.scroll-reveal) .accent-mark,
section.in .accent-mark { animation: drawMark 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s both; }