/* ==========================================================================
   POU Slatina — animacije javne stranice
   --------------------------------------------------------------------------
   Klase za predloške:
     .reveal          element lagano izroni kad uđe u vidno polje
     .reveal-stagger  djeca elementa izranjaju jedno za drugim
     .lift            kartica se blago podigne na hover/fokus
     data-no-animate  na bilo kojem elementu isključuje automatsku animaciju
   Većinu elemenata static/js/animations.js označava automatski (vidi AUTO_*).
   Sve je u bloku "no-preference" pa korisnici sa smanjenim kretanjem
   (Windows: Postavke > Pristupačnost > Efekti animacije) ne vide animacije.
   ========================================================================== */

:root {
  --anim-ease: cubic-bezier(.22, 1, .36, 1);
  --anim-reveal: 650ms;
  --anim-ui: 220ms;
  --anim-shift: 18px;
}

@media (prefers-reduced-motion: no-preference) {

  /* ---------- 1. Izranjanje pri skrolanju ---------- */
  html.anim .reveal {
    opacity: 0;
    transform: translateY(var(--anim-shift));
    transition:
      opacity var(--anim-reveal) var(--anim-ease),
      transform var(--anim-reveal) var(--anim-ease);
    transition-delay: var(--d, 0ms);
  }
  html.anim .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
  /* Nakon ulaza vrati normalne prijelaze (hover ne smije čekati --d). */
  html.anim .reveal.is-done { transition-delay: 0ms; }

  /* ---------- 2. Naslovna: hero ---------- */
  html.anim .page-home .hero-intro .eyebrow,
  html.anim .page-home .hero-intro h1,
  html.anim .page-home .hero-intro > p {
    animation: anim-up 800ms var(--anim-ease) both;
  }
  html.anim .page-home .hero-intro h1 { animation-delay: 90ms; }
  html.anim .page-home .hero-intro > p { animation-delay: 200ms; }

  html.anim .hero-stage > img {
    transform: scale(1.06);
    transition: transform 1800ms var(--anim-ease);
  }
  html.anim .hero-stage.is-visible > img { transform: scale(1); }

  html.anim .hero-stage .stage-copy > *,
  html.anim .hero-stage .stage-bottom {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 700ms var(--anim-ease), transform 700ms var(--anim-ease);
  }
  html.anim .hero-stage.is-visible .stage-copy > *,
  html.anim .hero-stage.is-visible .stage-bottom { opacity: 1; transform: none; }
  html.anim .hero-stage.is-visible .stage-copy > :nth-child(1) { transition-delay: 250ms; }
  html.anim .hero-stage.is-visible .stage-copy > :nth-child(2) { transition-delay: 350ms; }
  html.anim .hero-stage.is-visible .stage-copy > :nth-child(3) { transition-delay: 450ms; }
  html.anim .hero-stage.is-visible .stage-copy > :nth-child(4) { transition-delay: 550ms; }
  html.anim .hero-stage.is-visible .stage-bottom { transition-delay: 700ms; }

  /* Strelica "Istražite ↓" jednom lagano pokaže prema dolje. */
  html.anim .hero-stage.is-visible .stage-bottom a span {
    animation: anim-nudge-down 900ms var(--anim-ease) 1300ms 2 both;
  }

  /* ---------- 3. Podstranice: zaglavlje stranice ---------- */
  html.anim .page-header > * { animation: anim-up 700ms var(--anim-ease) both; }
  html.anim .page-header > :nth-child(2) { animation-delay: 80ms; }
  html.anim .page-header > :nth-child(3) { animation-delay: 160ms; }

  /* ---------- 4. Hover / fokus ---------- */
  .lift {
    transition: transform var(--anim-ui) ease, box-shadow var(--anim-ui) ease;
  }
  .lift:hover,
  .lift:focus-within {
    transform: translateY(-4px);
  }
  /* Kartice s okvirom dobiju i sjenu; plakati u programu samo pomak. */
  .course.lift:hover,
  .course.lift:focus-within,
  .content-panel.lift:hover,
  .contact-person.lift:hover {
    box-shadow: 0 14px 28px -12px rgb(16 40 70 / .22);
  }
  html.anim .reveal.lift.is-done {
    transition: transform var(--anim-ui) ease, box-shadow var(--anim-ui) ease;
  }
  html.anim .reveal.lift.is-visible:hover,
  html.anim .reveal.lift.is-visible:focus-within { transform: translateY(-4px); }

  /* Strelice u poveznicama pomaknu se u smjeru poveznice. */
  .quick-links a > span:last-child,
  .event-link > span:last-child,
  .course-link > span:last-child,
  .button > span:last-child {
    display: inline-block;
    transition: transform var(--anim-ui) var(--anim-ease);
  }
  .quick-links a:hover > span:last-child,
  .event-link:hover > span:last-child,
  .button:hover > span:last-child { transform: translate(3px, -3px); }
  .course-link:hover > span:last-child { transform: translateX(4px); }

  .quick-links .quick-icon { display: inline-block; transition: transform 300ms var(--anim-ease); }
  .quick-links a:hover .quick-icon { transform: scale(1.12) rotate(-6deg); }

  /* Plakati u kino/kazalište listi lagano se uvećaju. */
  .movie-poster { overflow: hidden; border-radius: 6px; }
  .movie-poster img { transition: transform 400ms var(--anim-ease); }
  .movie-poster a:hover img,
  .movie-poster a:focus-visible img { transform: scale(1.035); }

  /* ---------- 5. Ukrasni detalji ---------- */
  /* Stupići u bloku "Cjeloživotno učenje" izrastu redom. */
  html.anim .learning-art span {
    transform: scaleY(.15);
    transform-origin: bottom;
    transition: transform 900ms var(--anim-ease);
  }
  html.anim .learning-art i { opacity: 0; transition: opacity 600ms ease 700ms; }
  html.anim .education-feature.is-visible .learning-art span { transform: none; }
  html.anim .education-feature.is-visible .learning-art span:nth-child(2) { transition-delay: 100ms; }
  html.anim .education-feature.is-visible .learning-art span:nth-child(3) { transition-delay: 200ms; }
  html.anim .education-feature.is-visible .learning-art span:nth-child(4) { transition-delay: 300ms; }
  html.anim .education-feature.is-visible .learning-art i { opacity: 1; }

  /* Članska iskaznica Kino kluba "doleti" na mjesto. */
  html.anim .club-visual .membership {
    transform: rotate(-22deg) translateY(40px);
    opacity: 0;
    transition: transform 1000ms var(--anim-ease) 200ms, opacity 600ms ease 200ms;
  }
  html.anim .club-visual.is-visible .membership { transform: rotate(-10deg); opacity: 1; }
  .club-visual .membership { transition: transform 400ms var(--anim-ease); }
  .club-visual:hover .membership { transform: rotate(-7deg) translateY(-6px); }
  html.anim .club-visual.is-visible:hover .membership { transform: rotate(-7deg) translateY(-6px); transition-delay: 0ms; }

  html.anim .club-spark,
  html.anim .about-symbol {
    transition: transform 1200ms var(--anim-ease);
    transform: rotate(-90deg) scale(.6);
  }
  html.anim .club-visual.is-visible .club-spark,
  html.anim .about.is-visible .about-symbol { transform: none; }

  /* ---------- 6. Mobilni izbornik i obavijesti ---------- */
  .hdr-nav.open { animation: anim-drop 260ms var(--anim-ease) both; }
  .site-messages .alert { animation: anim-drop 400ms var(--anim-ease) both; }

  /* ---------- 7. HTMX zamjene (ako se HTMX doda) ---------- */
  .htmx-added { opacity: 0; }
  .htmx-settling .htmx-added,
  .htmx-added.htmx-settling { opacity: 1; transition: opacity 200ms ease; }
  .htmx-swapping { opacity: 0; transition: opacity 150ms ease; }

  @keyframes anim-up {
    from { opacity: 0; transform: translateY(var(--anim-shift)); }
    to { opacity: 1; transform: none; }
  }
  @keyframes anim-drop {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes anim-nudge-down {
    0%, 100% { transform: none; }
    50% { transform: translateY(4px); }
  }
}