/* Optional portfolio motion demos. No rules apply without ?motion-lab=1. */
.motion-lab {
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ink: #4f6988;
}

.motion-lab.motion-hero.motion-started .hero.motion-seen h1 {
  animation: motion-type-reveal 780ms var(--motion-ease) both;
}

.motion-lab.motion-hero.motion-started .hero.motion-seen .hero-intro > * {
  animation: motion-soft-rise 620ms var(--motion-ease) both;
}

.motion-lab.motion-hero .hero-intro > :nth-child(1) { animation-delay: 120ms !important; }
.motion-lab.motion-hero .hero-intro > :nth-child(2) { animation-delay: 210ms !important; }
.motion-lab.motion-hero .hero-intro > :nth-child(3) { animation-delay: 300ms !important; }

@keyframes motion-type-reveal {
  from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateY(14px); }
  to { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0); }
}

@keyframes motion-soft-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.motion-lab.motion-nav.motion-started .site-nav a {
  animation: motion-nav-enter 480ms var(--motion-ease) both;
  animation-delay: calc(80ms + var(--motion-order) * 55ms);
}

@keyframes motion-nav-enter {
  from { opacity: 0; transform: translateY(-7px); }
  to { opacity: 1; transform: translateY(0); }
}

.motion-lab.motion-sections .section h2 {
  position: relative;
}

.motion-lab.motion-sections .section h2::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 0;
  background: var(--motion-ink);
  content: '';
  transform: scaleX(0);
  transform-origin: left center;
}

.motion-lab.motion-sections .section.motion-seen h2::after {
  animation: motion-rule-draw 900ms var(--motion-ease) both;
}

@keyframes motion-rule-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.motion-lab.motion-rows .editorial-row.motion-seen > summary {
  animation: motion-row-arrive 540ms var(--motion-ease) both;
  animation-delay: calc(var(--motion-order) * 70ms);
}

@keyframes motion-row-arrive {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.motion-lab.motion-rowHover .editorial-row > summary {
  position: relative;
  isolation: isolate;
}

.motion-lab.motion-rowHover .editorial-row > summary::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(79 105 136 / 4%);
  content: '';
  pointer-events: none;
  opacity: 0;
  transform: scaleY(0.7);
  transition: opacity 260ms var(--motion-ease), transform 260ms var(--motion-ease);
}

.motion-lab.motion-rowHover .editorial-row > summary:hover::before,
.motion-lab.motion-rowHover .editorial-row > summary:focus-visible::before {
  opacity: 1;
  transform: scaleY(1);
}

.motion-lab.motion-rowHover .editorial-row > summary .row-arrow {
  transition: transform 260ms var(--motion-ease);
}

.motion-lab.motion-rowHover .editorial-row:not([open]) > summary:hover .row-arrow,
.motion-lab.motion-rowHover .editorial-row:not([open]) > summary:focus-visible .row-arrow {
  transform: translateX(5px);
}

.motion-lab.motion-details .editorial-row[open] > .row-detail {
  animation: motion-detail-unfold 480ms var(--motion-ease) both;
}

@keyframes motion-detail-unfold {
  from { opacity: 0.25; clip-path: inset(0 0 100% 0); transform: translateY(-5px); }
  to { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0); }
}

.motion-lab.motion-skills .skill-group.motion-seen .project-chips li {
  animation: motion-chip-arrive 430ms var(--motion-ease) both;
  animation-delay: calc(100ms + var(--motion-order) * 42ms);
}

@keyframes motion-chip-arrive {
  from { opacity: 0; transform: translateY(9px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.motion-lab.motion-contact .contact-email span,
.motion-lab.motion-contact .contact-links span {
  display: inline-block;
  transition: transform 320ms var(--motion-ease);
}

.motion-lab.motion-contact .contact-email:hover span,
.motion-lab.motion-contact .contact-email:focus-visible span,
.motion-lab.motion-contact .contact-links a:hover span,
.motion-lab.motion-contact .contact-links a:focus-visible span {
  transform: translateX(9px);
}

.motion-lab-panel {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1002;
  width: min(21rem, calc(100vw - 2.5rem));
  max-height: min(75vh, 42rem);
  overflow: auto;
  border: 1px solid var(--border);
  background: #f9f9f6;
  box-shadow: 0 14px 44px rgb(20 24 27 / 14%);
  font-family: "Sora", "Avenir Next", sans-serif;
}

.motion-lab-panel summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.motion-lab-panel summary::-webkit-details-marker { display: none; }
.motion-lab-panel summary::after { content: '−'; margin-left: auto; }
.motion-lab-panel details:not([open]) summary::after { content: '+'; }
.motion-lab-count { color: var(--muted); font-weight: 500; }
.motion-lab-panel-body { padding: 0 1rem 1rem; }
.motion-lab-panel-body > p {
  margin: 0.15rem 0 0.8rem;
  color: var(--muted);
  font-size: 0.69rem;
  line-height: 1.5;
}

.motion-lab-options { display: grid; gap: 0; }
.motion-lab-option {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.48rem 0;
  border-top: 1px solid var(--border);
  cursor: pointer;
}
.motion-lab-option input { flex: none; margin: 0.2rem 0 0; accent-color: var(--accent-strong); }
.motion-lab-option span { display: grid; gap: 0.1rem; }
.motion-lab-option strong { color: var(--text); font-size: 0.72rem; font-weight: 600; }
.motion-lab-option small { color: var(--muted); font-size: 0.63rem; line-height: 1.35; }
.motion-lab-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.85rem; }
.motion-lab-actions button {
  padding: 0.42rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--accent-strong);
  background: transparent;
  font: inherit;
  font-size: 0.64rem;
  cursor: pointer;
}
.motion-lab-actions button:hover,
.motion-lab-actions button:focus-visible { background: #edf1f4; }
.motion-lab-panel :focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }

@media (max-width: 600px) {
  .motion-lab-panel { right: 0.75rem; bottom: 0.75rem; width: min(19rem, calc(100vw - 1.5rem)); max-height: 65vh; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-lab .hero *,
  .motion-lab .site-nav a,
  .motion-lab .section h2,
  .motion-lab .section h2::after,
  .motion-lab .editorial-row > summary,
  .motion-lab .row-detail,
  .motion-lab .skill-group *,
  .motion-lab .contact-email span,
  .motion-lab .contact-links span {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
  }
}

@media print {
  .motion-lab-panel { display: none; }
}