/*
 * Shared interaction / animation layer used by every generated template
 * (education + healthcare). Keeps per-page HTML lean: pages only add
 * utility classes / data-attributes, this file supplies the motion.
 */

/* ---------- scroll reveal ---------- */
[data-reveal] {
  opacity: 0;
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
[data-reveal="up"]    { transform: translateY(28px); }
[data-reveal="down"]  { transform: translateY(-28px); }
[data-reveal="left"]  { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="zoom"]  { transform: scale(.92); }
[data-reveal].is-visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* stagger helper: data-reveal-delay="1".."6" -> 80ms steps */
[data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal-delay="3"] { transition-delay: .24s; }
[data-reveal-delay="4"] { transition-delay: .32s; }
[data-reveal-delay="5"] { transition-delay: .40s; }
[data-reveal-delay="6"] { transition-delay: .48s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .shape-float, .shape-float-slow, .shape-spin, .shape-pulse { animation: none !important; }
}

/* ---------- floating / ambient shape motion ---------- */
@keyframes shapeFloat {
  0%, 100% { transform: translateY(0) translateX(0) rotate(0deg); }
  50%      { transform: translateY(-18px) translateX(8px) rotate(4deg); }
}
@keyframes shapeFloatSlow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(14px) rotate(-3deg); }
}
@keyframes shapeSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes shapePulse {
  0%, 100% { transform: scale(1); opacity: var(--shape-base-opacity, .5); }
  50%      { transform: scale(1.08); opacity: calc(var(--shape-base-opacity, .5) * 1.3); }
}

.shape-float      { animation: shapeFloat 7s ease-in-out infinite; }
.shape-float-slow { animation: shapeFloatSlow 11s ease-in-out infinite; }
.shape-spin       { animation: shapeSpin 26s linear infinite; }
.shape-pulse       { animation: shapePulse 6s ease-in-out infinite; }

/* generic decorative shape positioning */
.bg-shape {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.section-shapes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.section-relative { position: relative; overflow: hidden; }
.section-content   { position: relative; z-index: 1; }

/* ---------- hover micro-interactions ---------- */
.hover-lift { transition: transform .35s ease, box-shadow .35s ease; }
.hover-lift:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,.14); }

.hover-tilt { transition: transform .35s ease; }
.hover-tilt:hover { transform: rotate(-1.2deg) scale(1.02); }

.icon-pop { transition: transform .3s ease; display: inline-flex; }
.hover-lift:hover .icon-pop, .card:hover .icon-pop { transform: scale(1.15) rotate(-6deg); }

.btn-animated { position: relative; overflow: hidden; z-index: 1; }
.btn-animated::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(255,255,255,.22);
  transform: translateX(-120%);
  transition: transform .5s ease;
  z-index: -1;
}
.btn-animated:hover::after { transform: translateX(0); }

/* ---------- animated counters ---------- */
[data-counter] { font-variant-numeric: tabular-nums; }

/* ---------- navbar scroll state ---------- */
.site-navbar { transition: background-color .3s ease, box-shadow .3s ease, padding .3s ease; }
.site-navbar.is-scrolled { box-shadow: 0 8px 24px rgba(0,0,0,.08); }

/* ---------- image reveal on hover (cards/gallery) ---------- */
.img-zoom { overflow: hidden; }
.img-zoom img { transition: transform .6s ease; }
.img-zoom:hover img { transform: scale(1.08); }

/* ---------- progress / skill bars (used on about pages) ---------- */
.skill-bar { height: 8px; border-radius: 99px; background: rgba(0,0,0,.08); overflow: hidden; }
.skill-bar > span {
  display: block; height: 100%; border-radius: 99px;
  width: 0%; transition: width 1.1s cubic-bezier(.22,.61,.36,1);
}
.skill-bar.is-visible > span { width: var(--skill-value, 80%); }