/* ============================================================
   Isuru Abey — Extra Animations & Modern Effects
   ============================================================ */

/* ── 1. Ambient orb slow drift ──────────────────────────────── */
@keyframes ambientDrift {
  0%   { transform: translate(0,   0)   scale(1);    }
  25%  { transform: translate(-2%, 3%)  scale(1.03); }
  50%  { transform: translate(2%,  -2%) scale(0.98); }
  75%  { transform: translate(-1%, 2%)  scale(1.02); }
  100% { transform: translate(0,   0)   scale(1);    }
}
@media (prefers-reduced-motion: no-preference) {
  .ambient { animation: ambientDrift 22s ease-in-out infinite; }
}

/* ── 2. Portrait card float ─────────────────────────────────── */
@keyframes cardFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}
@media (prefers-reduced-motion: no-preference) {
  html.js-ready .portrait-card.in {
    animation: cardFloat 6s ease-in-out infinite;
  }
}

/* ── 3. Live badge pulse ────────────────────────────────────── */
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0   rgba(46, 204, 113, 0.45); }
  60%  { box-shadow: 0 0 0 8px rgba(46, 204, 113, 0);    }
  100% { box-shadow: 0 0 0 0   rgba(46, 204, 113, 0);    }
}
.portrait-badge .live {
  animation: livePulse 2.4s ease infinite;
}

/* ── 4. Hero accent text — gradient shimmer ─────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero .emph-accent {
    background: linear-gradient(
      90deg,
      var(--accent),
      color-mix(in srgb, var(--accent) 65%, #a0c4ff),
      var(--accent)
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: shimmer 4s linear infinite;
  }
}

/* ── 5. Btn ripple highlight on hover ───────────────────────── */
.btn-primary::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(255,255,255,.22), transparent 62%
  );
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.btn-primary:hover::after { opacity: 1; }

/* ── 6. Nav link underline (already in main.css, kept for specificity) ── */

/* ── 7. Custom cursor — removed ─────────────────────────────── */

/* ── 8. Card 3D tilt state ──────────────────────────────────── */
.card, .review, .cs-card {
  transform-style: preserve-3d;
  will-change: transform;
}

/* ── 9. CTA glow orbs pulse ─────────────────────────────────── */
@keyframes glowPulse {
  0%, 100% { opacity: .12; transform: scale(1); }
  50%       { opacity: .20; transform: scale(1.08); }
}
@media (prefers-reduced-motion: no-preference) {
  .cta-card .glow.a { animation: glowPulse 5s ease-in-out infinite; }
  .cta-card .glow.b { animation: glowPulse 5s ease-in-out infinite .6s; }
  :root[data-theme="dark"] .cta-card .glow.a { opacity: .18; }
}

/* ── 10. Hero socials hover ring ────────────────────────────── */
.hero-socials a, .footer-bottom .socials a {
  transition: transform .18s cubic-bezier(.2,.7,.3,1), color .15s ease, border-color .15s ease, box-shadow .18s ease;
}
.hero-socials a:hover {
  transform: translateY(-3px) scale(1.1);
  box-shadow: 0 6px 14px rgba(35,131,226,.18);
  color: var(--accent);
  border-color: var(--accent-line);
}

/* ── 11. Page entrance — hero stagger fallback ─────────────── */
@keyframes heroIn {
  from { opacity: 0; transform: translateY(18px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}
/* Applied via JS class when first paint */

/* ── 12. Scroll-progress indicator ─────────────────────────── */
.scroll-bar {
  position: fixed; top: 0; left: 0; height: 2px; z-index: 100;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform .08s linear;
}

/* ── 13. Blog post card hover image zoom ────────────────────── */
.post .cover img {
  transition: transform .4s cubic-bezier(.2,.7,.3,1);
}
.post:hover .cover img {
  transform: scale(1.04);
}

/* ── 14. CS card cover zoom ─────────────────────────────────── */
.cs-cover { overflow: hidden; }
.cs-cover svg {
  transition: transform .4s cubic-bezier(.2,.7,.3,1), opacity .3s ease;
}
.cs-card:hover .cs-cover svg {
  transform: scale(1.12) rotate(-3deg);
  opacity: .55;
}

/* ── 15. Step card hover ────────────────────────────────────── */
.step {
  transition: transform .2s ease, box-shadow .2s ease;
}
.step:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-2);
}

/* ── 17. About photo card tilt border highlight ──────────────── */
.about-photo {
  transition: box-shadow .3s ease;
}
.about-photo:hover {
  box-shadow: var(--sh-2);
}

/* ── 18. Brand logo bounce on click ─────────────────────────── */
@keyframes brandBounce {
  0%, 100% { transform: scale(1); }
  40%       { transform: scale(.92); }
  70%       { transform: scale(1.06); }
}
.brand.clicked { animation: brandBounce .4s ease; }