/* ======================================================================
   Motion & effects for the public site.
   Loaded after style.css. Everything here is decorative: the site is fully
   usable with this file missing, with JavaScript off, or with motion cut.

   Motion is switched off when the visitor's system asks for reduced motion,
   or when they pick "Reduced" in the accessibility panel (data-motion).
   ====================================================================== */

@keyframes a-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

@keyframes a-pop {
  0%   { opacity: 0; transform: translateY(28px) scale(0.92); }
  60%  { opacity: 1; transform: translateY(-6px) scale(1.02); }
  100% { transform: none; }
}

@keyframes a-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes a-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2%, -3%, 0) scale(1.08); }
  100% { transform: translate3d(-2%, 2%, 0) scale(1.04); }
}

@keyframes a-sheen {
  from { left: -60%; opacity: 0.9; }
  to   { left: 130%; opacity: 0; }
}

@keyframes a-wiggle {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-9deg); }
  75%      { transform: rotate(9deg); }
}

@keyframes a-bob {
  to { transform: translateY(-5px); }
}

@keyframes a-flip {
  0%   { transform: rotateX(-88deg); opacity: 0.15; }
  100% { transform: rotateX(0); opacity: 1; }
}

@keyframes a-sparkle {
  0%   { transform: scale(0) rotate(0); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: scale(1.6) rotate(90deg); opacity: 0; }
}

@keyframes a-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0.0); }
  50%      { box-shadow: 0 0 0 8px rgba(192, 57, 43, 0.18); }
}

/* ---- animated page backdrop ---------------------------------------- */

body {
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: -8%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(36vmax 36vmax at 18% 12%, rgba(192, 57, 43, 0.13), transparent 60%),
    radial-gradient(30vmax 30vmax at 88% 18%, rgba(230, 126, 34, 0.10), transparent 60%),
    radial-gradient(40vmax 40vmax at 72% 96%, rgba(192, 57, 43, 0.11), transparent 62%);
  background-repeat: no-repeat;
  animation: a-drift 30s ease-in-out infinite alternate;
}

/* a high-contrast scheme wants a flat, predictable background */
:root[data-contrast] body::before { display: none; }

/* ---- first-load entrances ---------------------------------------- */

.title       { animation: a-rise 0.5s 0.03s ease both; }
.header-text { animation: a-fade 0.6s 0.05s ease both; }
.countdown   { animation: a-rise 0.55s 0.08s ease both; }
.ad-banner   { animation: a-pop 0.6s 0.12s cubic-bezier(0.2, 0.7, 0.3, 1.3) both; }
.action-row  { animation: a-rise 0.55s 0.12s ease both; }

/* the home-page tiles drop in one after another */
.grid > .card,
.grid > .prostovoljci-wrap {
  animation: a-pop 0.55s cubic-bezier(0.2, 0.7, 0.3, 1.35) both;
}
.grid > :nth-child(1) { animation-delay: 0.12s; }
.grid > :nth-child(2) { animation-delay: 0.19s; }
.grid > :nth-child(3) { animation-delay: 0.26s; }
.grid > :nth-child(4) { animation-delay: 0.33s; }
.grid > :nth-child(5) { animation-delay: 0.40s; }
.grid > :nth-child(6) { animation-delay: 0.47s; }
.grid > :nth-child(7) { animation-delay: 0.54s; }
.grid > :nth-child(8) { animation-delay: 0.61s; }

/* ---- scroll reveal (reveal.js adds the classes) ------------------ */

.reveal {
  opacity: 0;
  transform: translateY(24px);
}

.reveal-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.55s var(--reveal-delay, 0ms) ease,
    transform 0.6s var(--reveal-delay, 0ms) cubic-bezier(0.2, 0.7, 0.3, 1.2);
}

/* ---- richer card hover ------------------------------------------- */

.card {
  position: relative;
  transition:
    transform 0.24s cubic-bezier(0.2, 0.7, 0.3, 1.35),
    box-shadow 0.24s ease,
    background-color 0.2s ease,
    color 0.2s ease;
}

.card:hover,
.card:focus-visible {
  transform: translateY(-7px) scale(1.035) rotate(-0.6deg);
  box-shadow: 0 18px 38px var(--shadow);
}

.card:active {
  transform: translateY(-2px) scale(1.01);
}

/* a light sweep across the plain (text) tiles on hover */
.card:not(.has-photo) { overflow: hidden; }

.card:not(.has-photo)::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}

.card:not(.has-photo):hover::after,
.card:not(.has-photo):focus-visible::after {
  animation: a-sheen 0.7s ease;
}

/* the drawn tile icons lift and settle while the tile is hovered */
.action-btn:hover .tile-icon,
.action-btn:focus-visible .tile-icon {
  animation: a-bob 0.6s ease infinite alternate;
}

/* ---- social icons --------------------------------------------- */

.social-icon {
  transition:
    transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1.6),
    box-shadow 0.2s ease;
}

.social-icon:hover,
.social-icon:focus-visible {
  transform: translateY(-4px) scale(1.14) rotate(6deg);
  box-shadow: 0 12px 22px var(--shadow);
}

.social-icon:hover svg,
.social-icon:focus-visible svg {
  animation: a-wiggle 0.5s ease;
}

/* ---- countdown ------------------------------------------------- */

.countdown-unit {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.countdown-unit:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px var(--shadow);
}

.countdown-number {
  display: inline-block;
  transform-origin: 50% 0;
  backface-visibility: hidden;
}

.countdown-number.flip {
  animation: a-flip 0.4s cubic-bezier(0.2, 0.7, 0.3, 1.2);
}

/* when the wait is over: a little burst */
.countdown.is-over {
  animation: a-glow 1.6s ease 3;
  border-radius: 14px;
}

.countdown.is-over .countdown-over {
  animation: a-pop 0.6s cubic-bezier(0.2, 0.7, 0.3, 1.45) both;
}

.countdown.is-over::before,
.countdown.is-over::after {
  content: "";
  position: absolute;
  top: 40%;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--accent);
  pointer-events: none;
}

.countdown.is-over { position: relative; }
.countdown.is-over::before { left: 12%; animation: a-sparkle 0.9s ease 0.1s 3; }
.countdown.is-over::after  { right: 12%; animation: a-sparkle 0.9s ease 0.25s 3; }

/* ---- buttons & panels --------------------------------------- */

.btn,
.a11y-opt,
.a11y-btn,
.modal-submit,
.btn-edit-layout,
.list-scroll-btn {
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.btn:active,
.a11y-opt:active,
.modal-submit:active,
.btn-edit-layout:active {
  transform: scale(0.96);
}

.a11y-panel:not([hidden]) {
  animation: a-pop 0.26s ease both;
  transform-origin: top right;
}

.modal {
  animation: a-pop 0.3s cubic-bezier(0.2, 0.7, 0.3, 1.25) both;
}

.modal-overlay:not([hidden]) {
  animation: a-fade 0.2s ease both;
}

/* ---- results tables --------------------------------------- */

.results-table tbody tr {
  transition: background 0.18s ease, transform 0.18s ease;
}

.results-table tbody tr:hover {
  transform: translateX(3px);
}

/* ---- club list items fade up as the section reveals ------- */

.page-clubs.reveal-in li {
  animation: a-rise 0.4s ease both;
}
.page-clubs.reveal-in li:nth-child(2) { animation-delay: 0.04s; }
.page-clubs.reveal-in li:nth-child(3) { animation-delay: 0.08s; }
.page-clubs.reveal-in li:nth-child(4) { animation-delay: 0.12s; }
.page-clubs.reveal-in li:nth-child(5) { animation-delay: 0.16s; }
.page-clubs.reveal-in li:nth-child(6) { animation-delay: 0.20s; }
.page-clubs.reveal-in li:nth-child(n + 7) { animation-delay: 0.24s; }

/* ======================================================================
   Motion off — OS preference, or the visitor's own choice.
   ====================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
  body::before { animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}

:root[data-motion="reduced"] *,
:root[data-motion="reduced"] *::before,
:root[data-motion="reduced"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  animation-delay: 0ms !important;
  transition-duration: 0.01ms !important;
}
:root[data-motion="reduced"] body::before { animation: none !important; }
:root[data-motion="reduced"] .reveal { opacity: 1; transform: none; }