/* ============================================================
   Shirin Semsar — site enhancement layer
   Animations + polish, added on top of the existing design.
   Everything is additive: it never hides content permanently
   and fully respects prefers-reduced-motion.
   ============================================================ */

:root {
  --accent: #13a4ec;
  --accent-2: #7fb0ff;
  --ink: #111c22;
}

html { scroll-behavior: smooth; }
::selection { background: rgba(19, 164, 236, .35); color: #fff; }

/* ---------- Scroll progress bar ---------- */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  z-index: 9999; transition: width .08s linear;
}

/* ---------- Header shadow once scrolled ---------- */
header.site-scrolled {
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  backdrop-filter: blur(8px);
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s cubic-bezier(.22, .61, .36, 1), transform .8s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}
.reveal.reveal-img { transform: translateY(26px) scale(.985); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Hero treatment ---------- */
.grad-text {
  background: linear-gradient(92deg, #ffffff 10%, var(--accent-2) 55%, var(--accent) 90%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gradShift 7s ease-in-out infinite alternate;
}
@keyframes gradShift {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

.hero-glow { position: relative; isolation: isolate; }
.hero-glow::before,
.hero-glow::after {
  content: ""; position: absolute; border-radius: 9999px;
  filter: blur(90px); z-index: -1; pointer-events: none;
}
.hero-glow::before {
  width: 480px; height: 480px; top: -120px; left: -80px;
  background: radial-gradient(circle, rgba(19,164,236,.28), transparent 65%);
  animation: drift 11s ease-in-out infinite alternate;
}
.hero-glow::after {
  width: 420px; height: 420px; bottom: -140px; right: -60px;
  background: radial-gradient(circle, rgba(127,176,255,.20), transparent 65%);
  animation: drift 13s ease-in-out infinite alternate-reverse;
}
@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(46px, 30px) scale(1.08); }
}

/* Availability badge pulse */
.pulse-dot { position: relative; width: 10px; height: 10px; border-radius: 9999px; background: #34d399; flex: none; }
.pulse-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 9999px;
  border: 2px solid rgba(52, 211, 153, .6); animation: pulseRing 1.8s ease-out infinite;
}
@keyframes pulseRing {
  0% { transform: scale(.55); opacity: 1; }
  100% { transform: scale(1.25); opacity: 0; }
}

/* ---------- Skills marquee ---------- */
.marquee {
  overflow: hidden; white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: inline-flex; gap: 0; padding: 0;
  animation: marquee 30s linear infinite; will-change: transform;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-item {
  display: inline-flex; align-items: center; gap: .65rem;
  padding: 0 1.4rem; color: #92b7c9; font-weight: 700; font-size: 1.02rem;
}
.marquee-item::after { content: "◆"; color: var(--accent); font-size: .6rem; margin-left: 1.4rem; }

/* ---------- Hover polish ---------- */
.lift { transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s; }
.lift:hover { transform: translateY(-6px); box-shadow: 0 24px 44px rgba(0,0,0,.45); }

a, button { transition: color .25s, background-color .25s, border-color .25s, transform .25s, box-shadow .25s; }
button:active, a:active { transform: scale(.985); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* Stat strip numbers */
.stat-num { font-variant-numeric: tabular-nums; }

/* ---------- Sticky hire CTA ---------- */
#hire-cta {
  position: fixed; right: 20px; bottom: 20px; z-index: 9000;
  display: inline-flex; align-items: center; gap: .55rem;
  background: linear-gradient(92deg, var(--accent), #0f8ac9);
  color: #fff; font-weight: 800; font-size: .98rem;
  padding: .85rem 1.35rem; border-radius: 9999px;
  box-shadow: 0 14px 34px rgba(19,164,236,.38);
  opacity: 0; transform: translateY(18px); pointer-events: none;
  transition: opacity .45s, transform .45s;
  text-decoration: none;
}
#hire-cta.show { opacity: 1; transform: none; pointer-events: auto; }
#hire-cta:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(19,164,236,.5); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .grad-text, .hero-glow::before, .hero-glow::after, .marquee-track, .pulse-dot::after { animation: none !important; }
  #hire-cta { transition: none; }
}