/* ==========================================================================
   PORTFOLIO ANIMATIONS
   Animations subtiles, précises et silencieuses — Maxime Caignaert
   ========================================================================== */

:root {
  --anim-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --anim-view-dur: 240ms;
  --anim-micro-dur: 180ms;
}

/* ==========================================================================
   TRANSITIONS ENTRE VUES
   ========================================================================== */
.view-entering {
  animation: viewEnter var(--anim-view-dur) var(--anim-ease) both;
}

@keyframes viewEnter {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.lab-view.view-entering { animation: none; }

/* ==========================================================================
   MICRO-INTERACTIONS
   ========================================================================== */
.header-nav a {
  position: relative;
}

.header-nav a::after {
  display: none !important;
}

.project-item .item-title {
  display: inline-block;
  transition: transform var(--anim-micro-dur) var(--anim-ease);
}

.project-item:hover .item-title,
.project-item.active .item-title,
.project-item:focus-visible .item-title {
  transform: translateX(2px);
}

.project-item .item-number { flex-shrink: 0; }

#contact-submit-arrow {
  display: inline-block;
  transition: transform var(--anim-micro-dur) var(--anim-ease);
}

.form-submit-btn:hover #contact-submit-arrow,
.form-submit-btn:focus-visible #contact-submit-arrow {
  transform: translateX(3px);
}

:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 3px;
  border-radius: 1px;
}

.project-item:focus-visible,
.header-brand:focus-visible,
.header-nav a:focus-visible {
  outline-offset: 4px;
}

/* ==========================================================================
   PREFERS-REDUCED-MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --anim-view-dur: 0ms;
    --anim-micro-dur: 0ms;
  }
  .view-entering, .header-nav a::after, .project-item .item-title, #contact-submit-arrow {
    animation: none !important;
    transition: none !important;
  }
}

@media (hover: none) {
  .header-nav a::after { display: none; }
  .project-item:hover .item-title { transform: none; }
  .form-submit-btn:hover #contact-submit-arrow { transform: none; }
}