/* Révélations de lecture au scroll et interactions brèves. */
.reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity 760ms cubic-bezier(0.22, 0.7, 0.2, 1),
    transform 760ms cubic-bezier(0.22, 0.7, 0.2, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.section-heading {
  position: relative;
}

.section-heading::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  content: "";
  background: var(--mint);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 850ms cubic-bezier(0.22, 0.7, 0.2, 1) 180ms;
}

.section-heading.is-visible::after { transform: scaleX(1); }

.projects-content > .reveal,
.concept-gallery > .reveal,
.tech-list > .reveal,
.course-tags > .reveal,
.social-list > .reveal,
.footer-main > .reveal {
  transition-delay: var(--reveal-delay, 0ms);
}

.project-row,
.projects-empty,
.concept-card,
.social-list li,
.orbit-label,
.button,
.footer-nav > a,
.footer-social-list a {
  transition-property: opacity, transform, color, background-color, border-color;
  transition-duration: 220ms;
  transition-timing-function: cubic-bezier(0.22, 0.7, 0.2, 1);
}

.project-row:hover,
.projects-empty:hover { transform: translateX(5px); }
.concept-card:hover { transform: perspective(900px) rotateX(2deg) rotateY(-2deg) translateY(-5px); }
.social-list li:hover { transform: translateX(-4px); }
.orbit-label:hover { transform: translate(-50%, -50%) scale(1.08); }

@media (max-width: 680px) {
  .reveal { transform: translate3d(0, 20px, 0); transition-duration: 620ms; }
  .section-heading::after { width: 100%; }
  .concept-card:hover,
  .project-row:hover,
  .projects-empty:hover,
  .social-list li:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-visible,
  .section-heading::after,
  .concept-card,
  .project-row,
  .projects-empty,
  .social-list li,
  .orbit-label,
  .button,
  .footer-nav > a,
  .footer-social-list a {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }

  .section-heading::after { transform: none; }
}

/* Le menu s'ouvre en douceur, puis laisse entrer ses liens par étapes. */
.nav-dropdown > summary {
  transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.nav-dropdown > summary:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
}

.dropdown-panel {
  display: grid;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(0.98);
  transform-origin: top left;
  transition:
    opacity 220ms ease,
    transform 300ms cubic-bezier(0.22, 0.7, 0.2, 1),
    visibility 220ms;
}

.nav-dropdown[open] .dropdown-panel {
  display: grid;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.dropdown-panel p,
.dropdown-panel a {
  opacity: 0;
  transform: translateY(7px);
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 0.7, 0.2, 1), background-color 180ms ease, color 180ms ease;
}

.nav-dropdown[open] .dropdown-panel p,
.nav-dropdown[open] .dropdown-panel a {
  opacity: 1;
  transform: translateY(0);
}

.nav-dropdown[open] .dropdown-panel a:nth-of-type(1) { transition-delay: 45ms; }
.nav-dropdown[open] .dropdown-panel a:nth-of-type(2) { transition-delay: 90ms; }
.nav-dropdown[open] .dropdown-panel a:nth-of-type(3) { transition-delay: 135ms; }
.nav-dropdown[open] .dropdown-panel a:nth-of-type(4) { transition-delay: 180ms; }
.dropdown-panel a:hover { transform: translateX(4px); }

@media (max-width: 680px) {
  .dropdown-panel {
    max-height: 0;
    overflow: hidden;
    padding: 0;
    transform: translateY(-4px);
    transition:
      max-height 320ms cubic-bezier(0.22, 0.7, 0.2, 1),
      opacity 200ms ease,
      transform 240ms ease,
      visibility 200ms;
  }

  .nav-dropdown[open] .dropdown-panel {
    max-height: 320px;
    padding: 4px 0 9px;
    transform: translateY(0);
  }

  .dropdown-panel a:hover { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .nav-dropdown > summary,
  .dropdown-panel,
  .dropdown-panel p,
  .dropdown-panel a {
    transition: none;
    transform: none;
    animation: none;
  }
}

/* Retour d'interaction clair sur la commande du menu. */
.nav-dropdown > summary {
  position: relative;
  border-radius: 3px;
  transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.nav-dropdown > summary:hover,
.nav-dropdown > summary:focus-visible,
.nav-dropdown[open] > summary {
  border-color: rgba(61, 220, 151, 0.42);
  background: rgba(61, 220, 151, 0.1);
  color: #FFFFFF;
  transform: translateY(-1px);
}

.nav-dropdown[open] > summary span { transform: rotate(180deg); }
.nav-dropdown > summary:active { transform: translateY(0) scale(0.98); }

.nav-dropdown[open] .dropdown-panel a:hover,
.nav-dropdown[open] .dropdown-panel a:focus-visible {
  transform: translateX(5px);
  background: rgba(15, 61, 46, 0.08);
  color: #0F3D2E;
}

.nav-dropdown[open] .dropdown-panel a:active { transform: translateX(3px) scale(0.99); }

@media (prefers-reduced-motion: reduce) {
  .nav-dropdown > summary:hover,
  .nav-dropdown > summary:focus-visible,
  .nav-dropdown[open] > summary,
  .nav-dropdown[open] .dropdown-panel a:hover,
  .nav-dropdown[open] .dropdown-panel a:focus-visible,
  .nav-dropdown[open] .dropdown-panel a:active {
    transform: none;
  }
}

/* La couleur vive n'apparaît que pendant l'appui. */
.nav-dropdown > summary:active {
  border-color: var(--mint);
  background: var(--mint);
  color: #0B0F0D;
  transform: scale(0.98);
}

.nav-dropdown[open] .dropdown-panel a:active {
  background: var(--mint);
  color: #0B0F0D;
  transform: translateX(3px) scale(0.99);
}

@media (prefers-reduced-motion: reduce) {
  .nav-dropdown > summary:active,
  .nav-dropdown[open] .dropdown-panel a:active { transform: none; }
}