/* INFOTICS — homepage motion demo: image skeleton loaders, hero entrance, card micro-lift.
   Builds on the site's existing .reveal scroll system. All of it is disabled under prefers-reduced-motion. */

/* ---- Skeleton (shimmer) placeholder for images -------------------------------------------------
   Wrap an <img> in an element with .img-skel. The element shows a shimmering grey block until the
   image finishes loading; then the image fades in and the shimmer stops. Works without JS too
   (the image is simply shown), and the shimmer is purely decorative. */
.img-skel { position: relative; overflow: hidden; background: #e9eef4; }
.img-skel::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .65) 50%, transparent 80%);
  background-size: 200% 100%; animation: skel-shimmer 1.25s ease-in-out infinite;
}
.img-skel > img, .img-skel > picture { position: relative; z-index: 2; opacity: 0; transition: opacity .5s ease; }
.img-skel.is-loaded::after { opacity: 0; animation: none; }
.img-skel.is-loaded > img, .img-skel.is-loaded > picture { opacity: 1; }

@keyframes skel-shimmer { 0% { background-position: 180% 0; } 100% { background-position: -80% 0; } }

/* A standalone skeleton line/box you can drop into any card that is waiting for content. */
.skel { position: relative; overflow: hidden; border-radius: 8px; background: #e9eef4; }
.skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .65) 50%, transparent 80%);
  background-size: 200% 100%; animation: skel-shimmer 1.25s ease-in-out infinite;
}
.skel-line { height: 12px; margin: 8px 0; }
.skel-line.w-60 { width: 60%; } .skel-line.w-40 { width: 40%; } .skel-line.w-80 { width: 80%; }

/* ---- Hero entrance: the headline, lead and CTAs rise in on first paint (no scroll needed) ------ */
.hm-hero .hero-badge, .hm-hero h1, .hm-hero .lead, .hm-hero .hero-cta, .hm-hero .hm-lead-card {
  animation: hm-rise .75s cubic-bezier(.2, .7, .2, 1) both;
}
.hm-hero .hero-badge { animation-delay: .02s; }
.hm-hero h1 { animation-delay: .10s; }
.hm-hero .lead { animation-delay: .22s; }
.hm-hero .hero-cta { animation-delay: .34s; }
.hm-hero .hero-stats, .hm-hero .hm-trust { animation: hm-rise .7s cubic-bezier(.2,.7,.2,1) both; animation-delay: .46s; }
.hm-hero .hm-lead-card { animation-delay: .28s; }

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

/* ---- Card micro-interactions: a gentle lift + shadow on hover --------------------------------- */
.hm-courses .course-card, .hm-feature, .hm-spot-card, .hm-next-row {
  transition: transform .22s cubic-bezier(.2, .7, .2, 1), box-shadow .22s ease;
}
.hm-courses .course-card:hover, .hm-feature:hover, .hm-spot-card:hover {
  transform: translateY(-6px); box-shadow: 0 18px 40px -16px rgba(13, 29, 51, .32);
}
.hm-next-row:hover { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .img-skel::after, .skel::after { animation: none; }
  .img-skel > img, .img-skel > picture { opacity: 1; }
  .hm-hero .hero-badge, .hm-hero h1, .hm-hero .lead, .hm-hero .hero-cta, .hm-hero .hm-lead-card { animation: none; }
  .hm-courses .course-card, .hm-feature, .hm-spot-card, .hm-next-row { transition: none; }
  .hm-courses .course-card:hover, .hm-feature:hover, .hm-spot-card:hover, .hm-next-row:hover { transform: none; }
}

/* ---- Universal: main content fades in softly on load (safe on every page) --------------------- */
main.page-fade { animation: hm-rise .55s cubic-bezier(.2,.7,.2,1) both; }
@media (prefers-reduced-motion: reduce) { main.page-fade { animation: none; } }