/* FC Sparta MN — site-specific styles layered on top of tailwind.css
   (the compiled utility sheet exported from the original build).
   Everything the original did with framer-motion / React state lives here
   as plain CSS transitions driven by classes that assets/js/site.js toggles. */

/* ---------- Preloader (root) ---------- */
#preloader { transition: opacity .7s; }
#preloader.is-done { opacity: 0; pointer-events: none; }
#preloader.is-removed { display: none; }
.sparta-preloader-logo svg { width: 100%; height: auto; display: block; }
.sparta-preloader-logo #fondo,
.sparta-preloader-logo #casco,
.sparta-preloader-logo #espadas,
.sparta-preloader-logo #letras { opacity: 0; transform-box: fill-box; transform-origin: center; }
.sparta-preloader-logo #fondo  { animation: sp-fondo  0.7s ease-out 0.05s forwards; }
.sparta-preloader-logo #casco  { animation: sp-casco  0.7s cubic-bezier(.2,.9,.3,1.3) 0.55s forwards; }
.sparta-preloader-logo #espadas{ animation: sp-espadas 0.7s cubic-bezier(.2,.8,.3,1) 1.1s forwards; }
.sparta-preloader-logo #letras { animation: sp-letras 0.7s ease-out 1.55s forwards; }
@keyframes sp-fondo   { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: scale(1); } }
@keyframes sp-casco   { from { opacity: 0; transform: scale(1.35) translateY(-6%); } 60% { opacity: 1; } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes sp-espadas { from { opacity: 0; transform: scaleX(0.4); } to { opacity: 1; transform: scaleX(1); } }
@keyframes sp-letras  { from { opacity: 0; transform: translateY(10px); filter: drop-shadow(0 0 0 transparent); }
                        to   { opacity: 1; transform: translateY(0);    filter: drop-shadow(0 0 6px rgba(250,197,104,0.45)); } }
@keyframes sp-breathe { 0%, 100% { transform: scale(1);     filter: drop-shadow(0 0 8px rgba(212,36,46,0.15)); }
                        50%      { transform: scale(1.025); filter: drop-shadow(0 0 18px rgba(212,36,46,0.35)); } }
.animate-sparta-breathe { animation: sp-breathe 3.2s ease-in-out 2.4s infinite; }
#preloader-offline { transition: opacity .5s; }

/* ---------- Header entrance (motion: y -30 → 0, 0.6s) ---------- */
#site-header { opacity: 0; transform: translateY(-30px); transition: opacity .6s, transform .6s, background-color .5s, border-color .5s, box-shadow .5s, backdrop-filter .5s; }
#site-header.is-in { opacity: 1; transform: translateY(0); }
#mobile-menu { overflow: hidden; max-height: 0; opacity: 0; transition: max-height .3s ease, opacity .3s ease; }
#mobile-menu.is-open { max-height: 480px; opacity: 1; }

/* ---------- Scroll reveal (motion whileInView, once) ----------
   .reveal        = the generic "A" wrapper: y 32 → 0, .7s, ease [.22,1,.36,1]
   .reveal-child  = pathway-section variant "B": y 40 → 0, .8s, ease [.16,1,.3,1]
   The delay comes from --delay (set inline or by the stagger code). */
.reveal, .reveal-child { opacity: 0; transform: translateY(32px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); transition-delay: var(--delay, 0s); will-change: opacity, transform; }
.reveal-child { transform: translateY(40px); transition-duration: .8s; transition-timing-function: cubic-bezier(.16,1,.3,1); }
.reveal.is-visible, .reveal-child.is-visible { opacity: 1; transform: translateY(0); }
/* once revealed, hover transforms on the element itself must win */
.reveal-child.is-visible { will-change: auto; }

/* gallery tiles: whileHover scale 1.03 / whileTap .97 */
.gallery-tile { transition: transform .25s cubic-bezier(.22,1,.36,1), border-color .3s; }
.gallery-tile:hover { transform: scale(1.03); }
.gallery-tile:active { transform: scale(.97); }

/* ---------- Views (home / register / pathway) ---------- */
.view { display: none; }
.view.is-active { display: block; }
#view-register { animation: view-in-up .45s cubic-bezier(.22,1,.36,1) both; }
#view-pathway  { animation: view-fade .5s cubic-bezier(.22,1,.36,1) both; }
#view-home.is-active { animation: view-fade .35s ease both; }
@keyframes view-in-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes view-fade  { from { opacity: 0; } to { opacity: 1; } }

/* register form ↔ success card swap */
#register-form, #register-success { animation: view-in-up .35s ease both; }
#register-success { animation: card-in .5s cubic-bezier(.22,1,.36,1) both; }
@keyframes card-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }

/* shimmering triangles behind the registration form (Ae) */
@keyframes sparta-shimmer {
  0%, 100% { opacity: var(--o-min); filter: brightness(0.85); }
  50%      { opacity: var(--o-max); filter: brightness(1.25); }
}
.sparta-tri { animation: sparta-shimmer var(--d) ease-in-out infinite; animation-delay: var(--dl); transform-origin: center; }

/* ---------- Pathway loader (be): 1.2 s progress, then swap view ---------- */
#pathway-loader { display: none; background: radial-gradient(circle at 50% 40%, #0a1730 0%, #05080f 70%, #000 100%); transition: opacity .35s; opacity: 0; }
#pathway-loader.is-on { display: flex; opacity: 1; }
#pathway-loader .pl-logo svg { width: 100%; height: auto; display: block; }

/* ---------- Gallery lightbox ---------- */
#lightbox { display: none; opacity: 0; transition: opacity .25s; }
#lightbox.is-open { display: flex; opacity: 1; }
#lightbox img { transform: scale(.9); opacity: 0; transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .35s; }
#lightbox.is-open img { transform: scale(1); opacity: 1; }

/* ---------- Toast (sonner replacement, bottom-right) ---------- */
#toast { position: fixed; right: 1rem; bottom: 1rem; z-index: 10000; max-width: 356px; padding: 14px 16px; border-radius: 8px;
  background: #1b1b1f; color: #fff; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 4px 12px rgba(0,0,0,.4); font-size: 13px;
  opacity: 0; transform: translateY(12px); transition: opacity .25s, transform .25s; pointer-events: none; }
#toast.is-on { opacity: 1; transform: translateY(0); }
#toast.is-error { border-color: rgba(225,29,72,.5); }

/* ---------- Schedule page ---------- */
html, body { overflow-x: hidden; }
.month-card { opacity: 0; transform: translateY(28px); transition: opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1); transition-delay: var(--delay, 0s); }
.month-card.is-visible { opacity: 1; transform: translateY(0); }
.sched-head { animation: view-in-up .6s cubic-bezier(.22,1,.36,1) .1s both; }
.sched-page { animation: view-in-up .6s cubic-bezier(.22,1,.36,1) both; }
@keyframes ball-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes ball-shadow { 0%, 100% { transform: scaleX(1); opacity: .55; } 50% { transform: scaleX(.55); opacity: .25; } }
.ball-bob { animation: ball-bob 1s ease-in-out infinite; }
.ball-shadow { animation: ball-shadow 1s ease-in-out infinite; width: 60%; }
.slot-pop { display: none; animation: pop-in .18s ease-out both; max-width: calc(100vw - 16px); }
.slot-pop.is-open { display: block; }
@keyframes pop-in { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-child, .month-card { transition: none; opacity: 1; transform: none; }
}

/* Registration honeypot: off-screen for people, present for scripts. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }