/* =============================================================
   Irfan Ali — Motion & micro-interactions. Loaded last.
   Respects prefers-reduced-motion. Remove this file to revert.
   ============================================================= */

/* ---- Scroll progress bar ---- */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 10001;
  background: linear-gradient(90deg, #F5A623, #ffca5f);
  box-shadow: 0 0 10px rgba(245,166,35,.6);
  transition: width .1s ease;
}

/* ---- Shimmering name in the hero ---- */
#home-section .slider-text h1 span {
  background: linear-gradient(90deg, #F5A623, #ffe1a8, #F5A623);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: nameShimmer 4.5s linear infinite;
}
@keyframes nameShimmer { to { background-position: 200% center; } }


/* ---- Typewriter caret on the role ---- */
#typed-role {
  border-right: 2px solid #F5A623;
  padding-right: 4px;
  animation: caretBlink 1s step-end infinite;
}
@keyframes caretBlink { 50% { border-color: transparent; } }

/* ---- Floating avatar ---- */
#home-section .circular-image { animation: floatY 5.5s ease-in-out infinite; }
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

/* ---- Pulsing primary CTA (Preview Resume / Hire me) ---- */
#open-resume, .ftco-hireme .btn-primary {
  animation: ctaPulse 2.6s ease-in-out infinite;
}
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 8px 20px rgba(245,166,35,.30); }
  50%      { box-shadow: 0 8px 32px rgba(245,166,35,.62); }
}

/* ---- Section heading underline grow-in (on hover of section) ---- */
.heading-section h2 { position: relative; }

/* ---- Reveal-on-scroll (only active when JS adds .js-anim) ---- */
.js-anim [data-anim] { opacity: 0; transform: translateY(26px); }
.js-anim [data-anim].in {
  opacity: 1; transform: none;
  transition: opacity .7s ease, transform .7s ease;
}
.js-anim .skill-pill { opacity: 0; transform: translateY(12px) scale(.96); }
.js-anim .skill-pill.in {
  opacity: 1; transform: none;
  transition: opacity .5s ease, transform .5s ease;
}

/* ---- Card hover lift for enterprise project cards ---- */
#projects-section [data-anim].in { will-change: transform; }

/* ---- Animated travelling gradient border on skill pills (hover) ---- */
@property --pill-angle {
  syntax: "<angle>"; initial-value: 0deg; inherits: false;
}
#skills-section .skill-pill { position: relative; isolation: isolate; }
#skills-section .skill-pill::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1.6px; pointer-events: none; opacity: 0;
  background: conic-gradient(from var(--pill-angle),
    #F5A623, #ffe39a, #ff7a18, #fff3cf, #F5A623);
  /* show only the border ring */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  transition: opacity .25s ease;
}
#skills-section .skill-pill:hover {
  background: linear-gradient(135deg, rgba(245,166,35,.30), rgba(255,122,24,.16) 55%, rgba(255,243,207,.10)) !important;
  color: #fff !important;
  border-color: transparent !important;
}
html.light #skills-section .skill-pill:hover {
  background: linear-gradient(135deg, rgba(245,166,35,.28), rgba(255,170,60,.18)) !important;
  color: #5a4205 !important;
}
#skills-section .skill-pill:hover::after {
  opacity: 1;
  animation: pillBorderSpin 2.4s linear infinite;
}
@keyframes pillBorderSpin { to { --pill-angle: 360deg; } }

@media (prefers-reduced-motion: reduce) {
  #skills-section .skill-pill:hover::after { animation: none; }
}

/* ---- Respect reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  #home-section .circular-image,
  #home-section .slider-text h1 span,
  #typed-role,
  #open-resume,
  .ftco-hireme .btn-primary { animation: none; }
  .js-anim [data-anim],
  .js-anim .skill-pill { opacity: 1 !important; transform: none !important; }
}