/* MOC'17 Zaterdag 7 — matchday motion system
   Shared across every page. Signature idea: the split-flap scoreboard digit,
   echoed by the count-up numbers, ties every animated moment back to the
   stadium scoreboard this club actually plays under. */

:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

html { scroll-behavior: smooth; }

/* Scroll reveal */
.reveal,
.reveal-group > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.reveal.is-visible,
.reveal-group.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}
.reveal-group.is-visible > * {
  transition-delay: calc(var(--i, 0) * 70ms);
}

/* Card / row lift */
.hover-lift {
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 32px -12px rgba(1, 56, 147, 0.28);
}

/* Button press */
.btn-press { transition: transform 140ms var(--ease-out); }
.btn-press:active { transform: scale(0.95); }

/* Nav underline sweep */
nav a.font-label-bold { position: relative; }
nav a.font-label-bold::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 2px;
  background: currentColor;
  opacity: 0;
  transition: right 260ms var(--ease-out), opacity 260ms var(--ease-out);
}
nav a.font-label-bold:hover::after { right: 0; opacity: 0.6; }

/* Hero entrance (page load, above the fold) */
.hero-in > * {
  opacity: 0;
  transform: translateY(26px);
  animation: heroIn 800ms var(--ease-out) forwards;
}
.hero-in > *:nth-child(1) { animation-delay: 120ms; }
.hero-in > *:nth-child(2) { animation-delay: 260ms; }
.hero-in > *:nth-child(3) { animation-delay: 400ms; }
@keyframes heroIn { to { opacity: 1; transform: translateY(0); } }

.kenburns { animation: kenburns 22s var(--ease-out) infinite alternate; }
@keyframes kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.09); }
}

/* Split-flap scoreboard digit — the signature moment */
.flip-digit {
  display: inline-block;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.flip-digit.flipping { animation: flipDigit 400ms ease-in-out; }
@keyframes flipDigit {
  0%   { transform: rotateX(0deg); }
  48%  { transform: rotateX(-90deg); }
  52%  { transform: rotateX(90deg); }
  100% { transform: rotateX(0deg); }
}

/* Mobile menu (no markup class changes needed —
   base state lives here, JS only toggles "hidden" and "menu-open") */
#mobile-menu {
  opacity: 0;
  transition: opacity 300ms var(--ease-out);
}
#mobile-menu.menu-open { opacity: 1; }
#mobile-menu > div {
  transform: translateX(100%);
  transition: transform 320ms var(--ease-spring);
}
#mobile-menu.menu-open > div { transform: translateX(0); }

/* Modal pop (photo albums, player profile, etc.) */
.modal-pop > div { animation: modalPop 320ms var(--ease-spring); }
@keyframes modalPop {
  from { opacity: 0; transform: scale(0.94) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Form error feedback */
.shake { animation: shake 420ms var(--ease-out); }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}

/* Loading shimmer for empty/pending states */
.shimmer {
  background: linear-gradient(90deg, rgba(1,56,147,0.06) 25%, rgba(1,56,147,0.14) 37%, rgba(1,56,147,0.06) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
}
@keyframes shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}