/*--------------------------------------------------------------
# WikiMarafon animations
# Loaded after main.css. Everything here is switched off by the
# prefers-reduced-motion block at the bottom.
--------------------------------------------------------------*/

/* ---------- Smooth page-to-page transitions (View Transitions API) ----------
   Browsers without support simply navigate normally. */
@view-transition {
  navigation: auto;
}

/* The fixed header keeps its own layer so it doesn't fade with the page. */
#header {
  view-transition-name: site-header;
}

::view-transition-old(root) {
  animation: wm-vt-out 0.22s ease-in both;
}

::view-transition-new(root) {
  animation: wm-vt-in 0.32s ease-out both;
}

@keyframes wm-vt-out {
  to { opacity: 0; transform: translateY(-8px); }
}

@keyframes wm-vt-in {
  from { opacity: 0; transform: translateY(12px); }
}

/* ---------- Header shrinks once the page is scrolled ---------- */
.header,
.header .logo img {
  transition: padding 0.35s ease, margin 0.35s ease, max-height 0.35s ease,
    box-shadow 0.35s ease, border-radius 0.35s ease;
}

.scrolled .header {
  padding: 8px 0;
  margin-top: 6px;
}

.scrolled .header .logo img {
  max-height: 44px;
}

/* ---------- Reading progress bar (news / blog detail) ---------- */
.wm-reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  z-index: 1000;
  pointer-events: none;
  background: transparent;
}

.wm-reading-progress span {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, #1f8bdb, #2e80e4 60%, #00175b);
  box-shadow: 0 0 8px rgba(46, 128, 228, 0.6);
}

/* ---------- Titles: words rise out of a blur when scrolled into view ----------
   animations.js splits each title into .wm-split-word spans and adds
   .wm-inview to the title (and its .section-title wrapper) once it is seen. */
.wm-split-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.75em) rotate(4deg);
  transform-origin: 0 100%;
  filter: blur(6px);
  transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.7s ease;
  transition-delay: calc(var(--i) * 80ms + 100ms);
}

.wm-inview .wm-split-word {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Section titles: the accent lines either side of the h2 draw outward */
.section-title h2.wm-title:before,
.section-title h2.wm-title:after {
  transform: scaleX(0);
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.45s;
}

.section-title h2.wm-title:before { transform-origin: 100% 50%; }
.section-title h2.wm-title:after { transform-origin: 0 50%; }

.section-title h2.wm-title.wm-inview:before,
.section-title h2.wm-title.wm-inview:after {
  transform: scaleX(1);
}

/* ...and the subtitle under it follows the words */
.section-title.wm-title-wrap p {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease 0.6s, transform 0.7s ease 0.6s;
}

.section-title.wm-title-wrap.wm-inview p {
  opacity: 1;
  transform: none;
}

/* ---------- Cards: tied to the scroll position ----------
   Cards fan in from below (left / centre / right by column) as they enter the
   viewport and reverse when scrolled back up. Their images drift (parallax)
   while on screen. Uses the individual translate/scale properties so the
   hover `transform` lift in main.css keeps working on top of it.
   Browsers without scroll timelines keep the original AOS fade-ins. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .wm-scroll-card {
      --wm-dir: 0;
      animation: wm-card-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 95%;
    }

    @keyframes wm-card-in {
      from {
        opacity: 0;
        translate: calc(var(--wm-dir) * 70px) 110px;
        scale: 0.86;
        rotate: calc(var(--wm-dir) * -3deg);
      }
      60% {
        opacity: 1;
      }
      to {
        opacity: 1;
        translate: 0 0;
        scale: 1;
        rotate: 0deg;
      }
    }

    .wm-scroll-card .course-image img,
    .wm-scroll-card .card-img-wrapper img,
    .wm-scroll-card .post-img img,
    .wm-scroll-card .event-image img {
      animation: wm-img-parallax linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    @keyframes wm-img-parallax {
      from { scale: 1.25; translate: 0 -8%; }
      to { scale: 1.25; translate: 0 8%; }
    }
  }
}

/* ---------- Hero counters: keep the width steady while counting ---------- */
.courses-hero .purecounter {
  font-variant-numeric: tabular-nums;
}

/* ---------- Card hover effects ---------- */
/* Home: latest news cards — image zoom (lift already exists in main.css) */
.featured-courses .course-card .course-image {
  overflow: hidden;
}

.featured-courses .course-card .course-image img {
  transition: transform 0.6s ease;
}

.featured-courses .course-card:hover .course-image img {
  transform: scale(1.08);
}

/* Home: recent blog cards — lift + shadow (image zoom already exists) */
.recent-blog-posts .card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.recent-blog-posts .card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 36px rgba(0, 23, 91, 0.16);
}

/* News list cards — lift + shadow (image zoom already exists) */
.blog-posts article:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 36px rgba(0, 23, 91, 0.16);
}

/* Blog list cards — image zoom (lift already exists) */
.courses-events .event-card .event-image {
  overflow: hidden;
}

.courses-events .event-card .event-image img {
  transition: transform 0.6s ease;
}

.courses-events .event-card:hover .event-image img {
  transform: scale(1.08);
}

/* Buttons: small press feedback */
.btn-course,
.btn-more,
.hero-buttons .btn {
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease, color 0.3s ease;
}

.btn-course:active,
.btn-more:active,
.hero-buttons .btn:active {
  transform: scale(0.96);
}

/* ---------- Respect "reduce motion" OS setting ---------- */
@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;
    scroll-behavior: auto !important;
  }

  @view-transition {
    navigation: none;
  }

  .wm-split-word {
    opacity: 1;
    transform: none;
  }

  .featured-courses .course-card:hover,
  .recent-blog-posts .card:hover,
  .blog-posts article:hover,
  .courses-events .event-card:hover {
    transform: none;
  }

  .wm-reading-progress {
    display: none;
  }
}