/* ========================================================
   THE ACE SOCIETY — Custom CSS
   Animations + small overrides Tailwind doesn't cover.
   ======================================================== */

/* Reset / base */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
input::placeholder, textarea::placeholder { opacity: 0.55; }

/* ── Marquee ─────────────────────────────────── */
@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-33.333%); }
}
.marquee-track { animation: marquee 40s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }

/* ── Reveal on scroll/load ──────────────────── */
@keyframes reveal {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
.reveal { animation: reveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* ── Trajectory arc draw-in ─────────────────── */
@keyframes drawArc {
    from { stroke-dashoffset: 1000; }
    to   { stroke-dashoffset: 0; }
}
.trajectory-arc {
    stroke-dasharray: 1000;
    animation: drawArc 2s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* ── Profile certificate hover ──────────────── */
a:hover .group-hover-acid { color: #D4FF00; }

/* ── Form focus states ──────────────────────── */
input:focus, textarea:focus { outline: none; }
input:focus, textarea:focus { border-bottom-width: 2px !important; }

/* ── Mobile tweaks ──────────────────────────── */
@media (max-width: 768px) {
    .marquee-track { animation-duration: 30s; }
}

/* ── Print: certificates print cleanly ──────── */
@media print {
    .fixed, header, footer { display: none !important; }
    body { background: white !important; color: black !important; }
}