:root {
  --page-progress: 0;
}

.section {
  isolation: isolate;
  --scene-progress: 0;
}

.section-visual {
  position: absolute;
  z-index: -2;
  top: 10%;
  right: 0;
  width: min(48vw, 760px);
  height: 72%;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  opacity: calc(.08 + (1 - abs(var(--scene-progress))) * .12);
  transform: perspective(1200px) rotateY(-14deg) rotateX(calc(var(--scene-progress) * -5deg)) translate3d(calc(var(--scene-progress) * 42px), calc(var(--scene-progress) * -58px), 0);
  transform-origin: center right;
  transition: opacity .8s ease, border-color .8s ease;
  pointer-events: none;
}

.section-visual::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(125deg, color-mix(in srgb, var(--bg) 82%, transparent), transparent 45%, color-mix(in srgb, var(--accent) 22%, transparent)), linear-gradient(to bottom, transparent 50%, var(--bg));
}

.section-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(.72) contrast(1.12);
  transform: scale(1.12) translate3d(0, calc(var(--scene-progress) * 34px), 0);
  transition: transform 1.2s cubic-bezier(.22, 1, .36, 1), filter .8s ease;
}

.section--near .section-visual img {
  filter: saturate(1) contrast(1.15);
}

.section-visual--skills {
  right: auto;
  left: 0;
  transform: perspective(1200px) rotateY(14deg) rotateX(calc(var(--scene-progress) * 5deg)) translate3d(calc(var(--scene-progress) * -42px), calc(var(--scene-progress) * -58px), 0);
  transform-origin: center left;
}

.section-visual--skills::after {
  background: linear-gradient(235deg, color-mix(in srgb, var(--bg) 84%, transparent), transparent 45%, color-mix(in srgb, var(--accent-2) 18%, transparent)), linear-gradient(to bottom, transparent 50%, var(--bg));
}

.section__head,
.about__grid,
.skills__layout {
  position: relative;
  z-index: 1;
}

.section__head.reveal,
.about__grid .reveal,
.skills__layout .reveal {
  transform: translate3d(0, 34px, 0) rotateX(3deg);
  transform-origin: center bottom;
  transition: opacity .9s ease, transform 1s cubic-bezier(.16, 1, .3, 1);
}

.section__head.reveal.is-visible,
.about__grid .reveal.is-visible,
.skills__layout .reveal.is-visible {
  transform: translate3d(0, 0, 0) rotateX(0deg);
}

.section > .wrap > .panel,
.section > .wrap > .lab,
.section > .wrap > .grid,
.section > .wrap > [id$="-list"],
.section > .wrap > [id$="-grid"],
.section > .wrap > .timeline {
  transform: perspective(1400px) rotateX(calc(var(--scene-progress) * -2.2deg)) rotateY(calc(var(--scene-progress) * .8deg)) translate3d(0, calc(var(--scene-progress) * -12px), 0);
  transform-style: preserve-3d;
  transition: transform .25s linear;
  will-change: transform;
}

.section > .wrap > .panel,
.section > .wrap > .lab,
.education-item,
.cert-item,
.timeline__item,
.tool-card,
.interest-card,
.project-card,
.repo {
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.education-item,
.cert-item,
.timeline__item,
.tool-card,
.interest-card,
.project-card,
.repo {
  transition: transform .5s cubic-bezier(.22, 1, .36, 1), border-color .3s ease, box-shadow .5s ease;
}

.education-item:hover,
.cert-item:hover,
.timeline__item:hover,
.tool-card:hover,
.interest-card:hover,
.project-card:hover,
.repo:hover {
  transform: translate3d(0, -4px, 18px);
  box-shadow: 0 18px 36px color-mix(in srgb, var(--bg) 45%, transparent);
}

@media (max-width: 767px) {
  .section-visual { right: -30vw; width: 90vw; height: 58%; opacity: .07; transform: translate3d(0, calc(var(--scene-progress) * -24px), 0); }
  .section-visual--skills { left: -30vw; transform: translate3d(0, calc(var(--scene-progress) * -24px), 0); }
}

@media (prefers-reduced-motion: reduce) {
  .section-visual,
  .section-visual--skills,
  .section-visual img { transform: none; transition: none; }
  .section__head.reveal,
  .about__grid .reveal,
  .skills__layout .reveal,
  .section > .wrap > .panel,
  .section > .wrap > .lab,
  .section > .wrap > .grid,
  .section > .wrap > [id$="-list"],
  .section > .wrap > [id$="-grid"],
  .section > .wrap > .timeline,
  .education-item,
  .cert-item,
  .timeline__item,
  .tool-card,
  .interest-card,
  .project-card,
  .repo { transform: none; transition: none; box-shadow: none; }
}