@keyframes section-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes featured-section-in {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes brand-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-33.3333%);
  }
}

/* ---------------------------------------------------------
   About view — keyframes
   --------------------------------------------------------- */

@keyframes about-mask-up {
  from { clip-path: inset(100% 0 0 0); opacity: 0; }
  to   { clip-path: inset(0 0 0 0);     opacity: 1; }
}

@keyframes about-mask-left {
  from { clip-path: inset(0 100% 0 0); opacity: 0; }
  to   { clip-path: inset(0 0 0 0);     opacity: 1; }
}

@keyframes about-portrait-zoom {
  from {
    transform: scale(1.22);
    filter: grayscale(1) contrast(1.35) brightness(0.75);
  }
  to {
    transform: scale(1);
    filter: grayscale(0.9) contrast(1.1) brightness(1);
  }
}

@keyframes about-figcap-condense {
  from {
    letter-spacing: 1em;
    opacity: 0;
    transform: translateX(-12px);
  }
  60% { opacity: 1; }
  to {
    letter-spacing: 0.14em;
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes about-text-rise {
  from { opacity: 0; transform: translateY(32px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

@keyframes about-text-fade {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes about-line-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes about-card-pop {
  from { opacity: 0; transform: translateY(48px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes about-bar-sweep {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 0.9; }
}

@keyframes about-dot-pop {
  0%   { transform: scale(0) rotate(-180deg); opacity: 0; }
  60%  { transform: scale(1.45) rotate(0); opacity: 1; }
  100% { transform: scale(1) rotate(0);    opacity: 1; }
}

@keyframes about-index-rise {
  from { opacity: 0; transform: translateY(70%) skewY(6deg); }
  to   { opacity: 1; transform: translateY(0) skewY(0); }
}

@keyframes about-eyebrow-trace {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes about-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 166, 0, 0.45); }
  50%      { box-shadow: 0 0 0 8px rgba(255, 166, 0, 0); }
}

@keyframes about-sheen {
  0%   { transform: translateX(-130%) skewX(-14deg); opacity: 0; }
  20%  { opacity: 0.55; }
  80%  { opacity: 0.55; }
  100% { transform: translateX(230%) skewX(-14deg);  opacity: 0; }
}

/* ---------------------------------------------------------
   About view — element choreography
   Scoped to #aboutView so other views aren't affected.
   The parent .section-shell[data-reveal] gains .is-visible
   when scrolled into view; children below stagger out from
   that moment.
   --------------------------------------------------------- */

#aboutView .eyebrow {
  position: relative;
  display: inline-block;
}

#aboutView .eyebrow::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
}

#aboutView [data-reveal].is-visible .eyebrow {
  animation: about-text-fade 600ms var(--ease-out) 80ms both;
}

#aboutView [data-reveal].is-visible .eyebrow::after {
  animation: about-eyebrow-trace 720ms var(--ease-out) 420ms forwards;
}

#aboutView .about-profile-copy .section-title,
#aboutView .credibility-section .section-title {
  opacity: 0;
  transform: translateY(32px);
  filter: blur(6px);
}

#aboutView [data-reveal].is-visible .about-profile-copy .section-title,
#aboutView [data-reveal].is-visible .credibility-section .section-title {
  animation: about-text-rise 860ms var(--ease-out) 180ms forwards;
}

#aboutView .about-profile-copy .section-copy {
  opacity: 0;
  transform: translateY(18px);
}

#aboutView [data-reveal].is-visible .about-profile-copy .section-copy {
  animation: about-text-fade 700ms var(--ease-out) 360ms forwards;
}

/* Portrait — mask reveal + Ken Burns zoom + figcap condense */
#aboutView .about-portrait {
  opacity: 0;
  clip-path: inset(100% 0 0 0);
  will-change: clip-path, opacity;
  isolation: isolate;
}

#aboutView [data-reveal].is-visible .about-portrait {
  animation: about-mask-up 1100ms var(--ease-out) 260ms forwards;
}

#aboutView .about-portrait img {
  transform: scale(1.22);
  filter: grayscale(1) contrast(1.35) brightness(0.75);
  transition: transform 800ms var(--ease-out), filter 800ms var(--ease-out);
}

#aboutView [data-reveal].is-visible .about-portrait img {
  animation: about-portrait-zoom 1800ms var(--ease-out) 380ms forwards;
}

#aboutView .about-portrait figcaption {
  letter-spacing: 1em;
  opacity: 0;
}

#aboutView [data-reveal].is-visible .about-portrait figcaption {
  animation: about-figcap-condense 900ms var(--ease-out) 1100ms forwards;
}

/* Portrait — hover */
#aboutView .about-portrait:hover img {
  transform: scale(1.04);
  filter: grayscale(0.25) contrast(1.05) brightness(1.04);
}

#aboutView .about-portrait::after {
  transition: opacity 600ms var(--ease-out);
}

#aboutView .about-portrait:hover::after {
  opacity: 0.7;
}

/* Career panel — slides in from the right after the portrait */
#aboutView .career-panel {
  opacity: 0;
  transform: translateX(36px);
}

#aboutView [data-reveal].is-visible .career-panel {
  animation: about-text-fade 760ms var(--ease-out) 520ms forwards;
  transform: translateX(0);
}

#aboutView .career-summary-item {
  opacity: 0;
  transform: translateY(20px);
  transition: border-top-color 280ms var(--ease-out), transform 320ms var(--ease-out);
}

#aboutView [data-reveal].is-visible .career-summary-item {
  animation: about-text-fade 620ms var(--ease-out) forwards;
}

#aboutView [data-reveal].is-visible .career-summary-item:nth-child(1) { animation-delay: 760ms; }
#aboutView [data-reveal].is-visible .career-summary-item:nth-child(2) { animation-delay: 880ms; }
#aboutView [data-reveal].is-visible .career-summary-item:nth-child(3) { animation-delay: 1000ms; }

#aboutView .career-summary-item:hover {
  border-top-color: var(--accent);
  transform: translateY(-2px);
}

#aboutView .career-summary-item:hover .career-period {
  color: var(--accent);
}

#aboutView .career-period {
  transition: color 240ms var(--ease-out);
}

/* Credibility section — horizontal accent line draws first */
#aboutView .capability-grid::before {
  transform: scaleX(0);
  transform-origin: left center;
}

#aboutView [data-reveal].is-visible .capability-grid::before {
  animation: about-line-grow 1100ms var(--ease-out) 160ms forwards;
}

/* Capability cards — pop in with internal staggered choreography */
#aboutView .capability-card {
  opacity: 0;
  transform: translateY(48px) scale(0.92);
  transition: transform 360ms var(--ease-out), background 360ms var(--ease-out);
  overflow: hidden;
}

#aboutView [data-reveal].is-visible .capability-card {
  animation: about-card-pop 820ms var(--ease-out) forwards;
}

#aboutView [data-reveal].is-visible .capability-card:nth-child(1) { animation-delay: 320ms; }
#aboutView [data-reveal].is-visible .capability-card:nth-child(2) { animation-delay: 460ms; }
#aboutView [data-reveal].is-visible .capability-card:nth-child(3) { animation-delay: 600ms; }
#aboutView [data-reveal].is-visible .capability-card:nth-child(4) { animation-delay: 740ms; }
#aboutView [data-reveal].is-visible .capability-card:nth-child(5) { animation-delay: 880ms; }
#aboutView [data-reveal].is-visible .capability-card:nth-child(6) { animation-delay: 1020ms; }

/* Top accent bar sweeps horizontally */
#aboutView .capability-card::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: height 220ms var(--ease-out), opacity 220ms var(--ease-out);
}

#aboutView [data-reveal].is-visible .capability-card:nth-child(1)::before { animation: about-bar-sweep 720ms var(--ease-out) 700ms forwards; }
#aboutView [data-reveal].is-visible .capability-card:nth-child(2)::before { animation: about-bar-sweep 720ms var(--ease-out) 840ms forwards; }
#aboutView [data-reveal].is-visible .capability-card:nth-child(3)::before { animation: about-bar-sweep 720ms var(--ease-out) 980ms forwards; }
#aboutView [data-reveal].is-visible .capability-card:nth-child(4)::before { animation: about-bar-sweep 720ms var(--ease-out) 1120ms forwards; }
#aboutView [data-reveal].is-visible .capability-card:nth-child(5)::before { animation: about-bar-sweep 720ms var(--ease-out) 1260ms forwards; }
#aboutView [data-reveal].is-visible .capability-card:nth-child(6)::before { animation: about-bar-sweep 720ms var(--ease-out) 1400ms forwards; }

/* Small dot ::after pops in and quietly pulses */
#aboutView .capability-card::after {
  transform: scale(0);
  opacity: 0;
  transition: transform 320ms var(--ease-out), border-color 320ms var(--ease-out);
}

#aboutView [data-reveal].is-visible .capability-card:nth-child(1)::after { animation: about-dot-pop 620ms var(--ease-out) 820ms forwards, about-dot-pulse 2400ms ease-in-out 1800ms infinite; }
#aboutView [data-reveal].is-visible .capability-card:nth-child(2)::after { animation: about-dot-pop 620ms var(--ease-out) 960ms forwards, about-dot-pulse 2400ms ease-in-out 1940ms infinite; }
#aboutView [data-reveal].is-visible .capability-card:nth-child(3)::after { animation: about-dot-pop 620ms var(--ease-out) 1100ms forwards, about-dot-pulse 2400ms ease-in-out 2080ms infinite; }
#aboutView [data-reveal].is-visible .capability-card:nth-child(4)::after { animation: about-dot-pop 620ms var(--ease-out) 1240ms forwards, about-dot-pulse 2400ms ease-in-out 2220ms infinite; }
#aboutView [data-reveal].is-visible .capability-card:nth-child(5)::after { animation: about-dot-pop 620ms var(--ease-out) 1380ms forwards, about-dot-pulse 2400ms ease-in-out 2360ms infinite; }
#aboutView [data-reveal].is-visible .capability-card:nth-child(6)::after { animation: about-dot-pop 620ms var(--ease-out) 1520ms forwards, about-dot-pulse 2400ms ease-in-out 2500ms infinite; }

/* Card index numeral rises like a print register */
#aboutView .capability-card-index {
  display: inline-block;
  opacity: 0;
  transform: translateY(70%) skewY(6deg);
  transition: color 320ms var(--ease-out), transform 320ms var(--ease-out);
}

#aboutView [data-reveal].is-visible .capability-card:nth-child(1) .capability-card-index { animation: about-index-rise 760ms var(--ease-out) 640ms forwards; }
#aboutView [data-reveal].is-visible .capability-card:nth-child(2) .capability-card-index { animation: about-index-rise 760ms var(--ease-out) 780ms forwards; }
#aboutView [data-reveal].is-visible .capability-card:nth-child(3) .capability-card-index { animation: about-index-rise 760ms var(--ease-out) 920ms forwards; }
#aboutView [data-reveal].is-visible .capability-card:nth-child(4) .capability-card-index { animation: about-index-rise 760ms var(--ease-out) 1060ms forwards; }
#aboutView [data-reveal].is-visible .capability-card:nth-child(5) .capability-card-index { animation: about-index-rise 760ms var(--ease-out) 1200ms forwards; }
#aboutView [data-reveal].is-visible .capability-card:nth-child(6) .capability-card-index { animation: about-index-rise 760ms var(--ease-out) 1340ms forwards; }

/* Heading + body fade up inside each card */
#aboutView .capability-card h3,
#aboutView .capability-card p {
  opacity: 0;
  transform: translateY(14px);
}

#aboutView [data-reveal].is-visible .capability-card:nth-child(1) h3 { animation: about-text-fade 560ms var(--ease-out) 780ms forwards; }
#aboutView [data-reveal].is-visible .capability-card:nth-child(2) h3 { animation: about-text-fade 560ms var(--ease-out) 920ms forwards; }
#aboutView [data-reveal].is-visible .capability-card:nth-child(3) h3 { animation: about-text-fade 560ms var(--ease-out) 1060ms forwards; }
#aboutView [data-reveal].is-visible .capability-card:nth-child(4) h3 { animation: about-text-fade 560ms var(--ease-out) 1200ms forwards; }
#aboutView [data-reveal].is-visible .capability-card:nth-child(5) h3 { animation: about-text-fade 560ms var(--ease-out) 1340ms forwards; }
#aboutView [data-reveal].is-visible .capability-card:nth-child(6) h3 { animation: about-text-fade 560ms var(--ease-out) 1480ms forwards; }

#aboutView [data-reveal].is-visible .capability-card:nth-child(1) p { animation: about-text-fade 560ms var(--ease-out) 880ms forwards; }
#aboutView [data-reveal].is-visible .capability-card:nth-child(2) p { animation: about-text-fade 560ms var(--ease-out) 1020ms forwards; }
#aboutView [data-reveal].is-visible .capability-card:nth-child(3) p { animation: about-text-fade 560ms var(--ease-out) 1160ms forwards; }
#aboutView [data-reveal].is-visible .capability-card:nth-child(4) p { animation: about-text-fade 560ms var(--ease-out) 1300ms forwards; }
#aboutView [data-reveal].is-visible .capability-card:nth-child(5) p { animation: about-text-fade 560ms var(--ease-out) 1440ms forwards; }
#aboutView [data-reveal].is-visible .capability-card:nth-child(6) p { animation: about-text-fade 560ms var(--ease-out) 1580ms forwards; }

/* Capability card hover — lift, intensify accent, layered highlight */
#aboutView .capability-card {
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255, 166, 0, 0) 0%, rgba(255, 166, 0, 0) 60%),
    linear-gradient(180deg, rgba(255, 166, 0, 0.08), rgba(255, 255, 255, 0.02) 42%),
    #1f1f1f;
  transition: transform 360ms var(--ease-out), background 360ms var(--ease-out), opacity 360ms var(--ease-out);
}

#aboutView .capability-card:hover {
  transform: translateY(-4px);
  background:
    radial-gradient(140% 110% at 0% 0%, rgba(255, 166, 0, 0.18) 0%, rgba(255, 166, 0, 0) 55%),
    linear-gradient(180deg, rgba(255, 166, 0, 0.12), rgba(255, 255, 255, 0.02) 42%),
    #232323;
}

#aboutView .capability-card:hover::before {
  height: 7px;
  opacity: 1;
}

#aboutView .capability-card:hover::after {
  transform: scale(1.18);
  border-color: var(--ink);
}

#aboutView .capability-card:hover .capability-card-index {
  color: rgba(255, 166, 0, 0.32);
  transform: translateY(-2px);
}

#aboutView .capability-card .capability-card-index {
  transition: color 320ms var(--ease-out), transform 320ms var(--ease-out);
}