/* Geeks Guru Custom v1.2 — light animation layer.
   Transform + opacity only (no layout shift), no libraries, no autoplay video.
   JS (js/animations.js) adds .gg-visible when elements scroll into view.
   Elements start hidden ONLY when JS is present (html.js), so content is
   never invisible if JS fails or is disabled. */

/* --- Scroll fade-up (cards, articles, widgets) --- */
html.js .gg-anim {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease, transform 0.55s ease;
  will-change: opacity, transform;
}
html.js .gg-anim.gg-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Hero fade-in on load (opacity only) --- */
@keyframes gg-hero-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
html.js .hero-title,
html.js .hero-sub,
html.js .hero-motto {
  animation: gg-hero-fade 0.8s ease both;
}
html.js .hero-sub   { animation-delay: 0.12s; }
html.js .hero-motto { animation-delay: 0.24s; }

/* --- Card hover lift (extends the existing hover; kept subtle) --- */
.card {
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.card:hover {
  transform: translateY(-4px);
}
.card-thumb img {
  transition: transform 0.35s ease;
}
.card:hover .card-thumb img {
  transform: scale(1.03);
}

/* --- Buttons / links: smooth, fast transitions --- */
.read-more,
.header-search .search-submit,
.badge,
.primary-menu > li > a {
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.read-more:hover {
  text-decoration: none;
}

/* --- Respect users who prefer reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  html.js .gg-anim,
  html.js .hero-title,
  html.js .hero-sub,
  html.js .hero-motto {
    animation: none;
    transition: none;
    opacity: 1;
    transform: none;
  }
  .card:hover,
  .card:hover .card-thumb img {
    transform: none;
  }
}

/* ============================================================
   v1.3 — HOMEPAGE HERO ONLY: advanced technology animation layer
   No external libraries, no video, no flashing. The canvas network
   and gradient glow are decorative (aria-hidden, pointer-events: none)
   and sit behind the hero text (z-index: 1 vs text z-index: 2).
   Transform + opacity only — no layout shift.
   ============================================================ */

/* Canvas particle / circuit network (drawn by js/animations.js). */
.gg-hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* Slow animated gradient glow: two soft radial glows drifting across
   the hero. 14s ease-in-out, infinite, alternate — gentle, not flashy. */
.gg-hero-glow {
  position: absolute;
  inset: -20%;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 42% 55% at 22% 30%, rgba(127, 199, 143, 0.35), transparent 70%),
    radial-gradient(ellipse 38% 50% at 78% 72%, rgba(255, 255, 255, 0.16), transparent 70%);
  animation: gg-glow-drift 14s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
@keyframes gg-glow-drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); opacity: 0.85; }
  to   { transform: translate3d(2%, 1%, 0) scale(1.06); opacity: 1; }
}

/* Typing caret: shown only while JS is typing (class .gg-typing),
   removed when typing finishes. Blink is slow (1.1s) — no strobing. */
html.js .hero-sub.gg-typing::after {
  content: "\258d";
  display: inline-block;
  margin-left: 2px;
  color: #cfe0d2;
  animation: gg-caret-blink 1.1s steps(1) infinite;
}
@keyframes gg-caret-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Mobile: subtitle wraps to ~3 lines, so reserve that height while typing. */
@media (max-width: 640px) {
  .hero-sub { min-height: 4.95em; }
}

/* Card hover improvement (subtle, v1.3): slightly deeper shadow and a
   touch more thumbnail zoom than v1.2, same lift, same timing family. */
.card:hover {
  box-shadow: 0 16px 34px rgba(20, 40, 25, 0.16);
}
.card:hover .card-thumb img {
  transform: scale(1.05);
}

/* Reduced motion: hero tech layer is OFF entirely. The canvas is hidden
   and the glow does not animate; the subtitle stays fully printed
   (JS also skips typing — see js/animations.js). */
@media (prefers-reduced-motion: reduce) {
  .gg-hero-canvas,
  .gg-hero-glow {
    display: none;
  }
  .gg-hero-glow {
    animation: none;
  }
  html.js .hero-sub.gg-typing::after {
    animation: none;
    content: none;
  }
}