/* ============================================================
   ANIMATIONS — all @keyframes, reveal utilities
   ============================================================ */

/* ── 1. Line rise (split-text reveal) ── */
@keyframes lineRise {
  from { transform: translateY(110%); }
  to   { transform: translateY(0); }
}

/* ── 2. Fade in up (scroll reveal) ── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── 3. Clip wipe (label / eyebrow reveal) ── */
@keyframes clipWipe {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}

/* ── Slide in from left ── */
@keyframes sidebarIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ── Eyebrow wipe: applied when section enters view ── */
.eyebrow-wipe {
  animation: clipWipe 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ── Mobile nav name rise ── */
.mobile-nav-name {
  animation: lineRise 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
  display: block;
  overflow: hidden;
}

/* ── Line rise: hero headline lines ── */
.line {
  display: block;
  overflow: hidden;
}

.line-inner {
  display: block;
  animation: lineRise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.line-inner:nth-child(1),
.line:nth-child(1) .line-inner { animation-delay: 0.1s; }
.line:nth-child(2) .line-inner { animation-delay: 0.22s; }
.line:nth-child(3) .line-inner { animation-delay: 0.34s; }

/* ── Scroll reveal: JS adds .visible ── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  transition-delay: calc(var(--i, 0) * 0.1s);
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

/* ── Sidebar + mobile nav entrance ── */
.sidebar,
.mobile-nav {
  animation: sidebarIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}

/* ── Background fill sweep: CTA button ── */
.btn-sweep {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--transition);
}

.btn-sweep::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-accent-dk);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--transition);
  z-index: -1;
}

.btn-sweep:hover::before,
.btn-sweep:focus-visible::before {
  transform: scaleY(1);
}

/* ── Nav link active indicator ── */
.nav-link {
  transition: color var(--transition), background-color var(--transition), border-left-color var(--transition);
  border-left: 2px solid transparent;
  padding-left: 0.8rem;
}

.nav-link:hover {
  color: var(--c-ink);
  background-color: var(--c-bg-alt);
  border-left-color: rgba(37, 99, 235, 0.3);
}

.nav-link.active {
  color: var(--c-accent);
  background-color: rgba(37, 99, 235, 0.06);
  border-left-color: var(--c-accent);
  font-weight: 600;
}

/* ── Project card image clip wipe (on scroll via JS) ── */
.card-img-wrap {
  overflow: hidden;
}

.card-img-wrap img {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.5s ease;
  filter: grayscale(1);
}

.card-img-wrap.revealed img {
  clip-path: inset(0 0% 0 0);
  filter: grayscale(0);
}

/* ── Orb breathe (ambient sidebar glow) ── */
@keyframes orb-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(1.08); }
}

/* ── Section divider draw animation ── */
.hero::after, .about::after, .projects::after {
  content: '';
  display: block;
  height: 1px;
  background: var(--c-border);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.9s cubic-bezier(0.0, 0.0, 0.2, 1);
  margin-top: var(--sp-2);
}

.hero.divider-drawn::after,
.about.divider-drawn::after,
.projects.divider-drawn::after {
  transform: scaleX(1);
}