/* Portfolio motion: no decorative shapes or pointer tracking. */
#root button:not(:disabled), #root a[href], #root [role="button"]:not([aria-disabled="true"]),
#root .cursor-pointer { cursor: pointer; }
#root button:disabled { cursor: not-allowed; }
@media (prefers-reduced-motion: no-preference) {
  #top > :first-child > :first-child > :first-child > p {
    animation: portfolio-title 1800ms 200ms cubic-bezier(.2,.65,.3,1) both;
  }
  #top > :first-child > :first-child > :first-child > p:nth-child(2) { animation-delay: 900ms; }
  #top > :first-child > :first-child > :first-child > p:nth-child(3) { animation-delay: 1600ms; }
  #top > :first-child > :first-child > :nth-child(3),
  #top > :first-child > :last-child { animation: portfolio-enter 2000ms 800ms ease-out both; }
  #root section.motion-visible > * { animation: portfolio-enter 1400ms cubic-bezier(.2,.65,.3,1) both; }
  #root section.motion-visible > :nth-child(2) { animation-delay: 120ms; }
  #root section.motion-visible > :nth-child(3) { animation-delay: 220ms; }
  #root section.motion-visible > :nth-child(n+4) { animation-delay: 320ms; }
  #root section.motion-visible h2 { animation-name: portfolio-title; }
}

/* Asteroache gradient as a restrained visual thread across the page. */
#projects, #expertise, #about, #contact { position: relative; background: linear-gradient(180deg, rgb(255 255 255 / 0%), rgb(247 251 253 / 42%)); }
#projects::before, #expertise::before, #about::before, #contact::before { content: ''; display: block; width: min(100%, 220px); height: 2px; margin-bottom: 20px; background: linear-gradient(90deg, #223754, #38A8D6 52%, #F3B3D8); border-radius: 999px; }
#expertise, #contact { background: linear-gradient(180deg, rgb(255 255 255 / 0%), rgb(253 248 252 / 34%)); }
@media (max-width: 767px) { #projects::before, #expertise::before, #about::before, #contact::before { width: 120px; margin-bottom: 16px; } }
@keyframes portfolio-title {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes portfolio-enter {
  from { opacity: 0; transform: translateY(32px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  #root .ticker-track { animation: none; }
  #root *, #root *::before, #root *::after { scroll-behavior: auto !important; }
}

/* Project sections and renders reuse the home divider. */
.project-story > div > h2::before,
.project-render + .project-render::before {
  content: '';
  display: block;
  width: min(100%, 220px);
  height: 2px;
  margin-bottom: 20px;
  border-radius: 999px;
  background: linear-gradient(90deg, #223754, #38A8D6 52%, #F3B3D8);
}
.project-story { gap: 32px; }
.project-render { margin: 0; min-width: 0; }
.project-render + .project-render { margin-top: 32px; }
.project-render + .project-render::before { margin-bottom: 32px; }
.project-render img { display: block; width: 100%; height: auto; }
@media (max-width: 767px) {
  .project-story > div > h2::before,
  .project-render + .project-render::before { width: 120px; margin-bottom: 16px; }
  .project-render + .project-render { margin-top: 24px; }
}

/* Keep the About portrait mirrored while its scroll animation runs. */
@keyframes about-photo-enter {
  from { opacity: 0; transform: translateY(32px) scaleX(-1); }
  to { opacity: 1; transform: translateY(0) scaleX(-1); }
}
@media (prefers-reduced-motion: no-preference) {
  #about img { transform: scaleX(-1); }
  #about img.motion-visible { animation: about-photo-enter 1800ms cubic-bezier(.2,.65,.3,1) both; }
}
@media (prefers-reduced-motion: reduce) {
  #about img { transform: scaleX(-1) !important; }
}