/* Animaciones compartidas */
@media (prefers-reduced-motion: no-preference) {
  .contact-item.has-extra {
    position: relative;
    overflow: hidden;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  }

  .contact-item.has-extra::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 20%, rgba(245,196,24,.22) 50%, transparent 80%);
    transform: translateX(-130%);
    transition: transform .45s ease;
    pointer-events: none;
  }

  .contact-item.has-extra:hover,
  .contact-item.has-extra:focus-within {
    transform: translateY(-4px) scale(1.015);
    box-shadow: 0 14px 36px rgba(0,0,0,.2);
    border-color: rgba(245,196,24,.6);
  }

  .contact-item.has-extra:hover::after,
  .contact-item.has-extra:focus-within::after {
    transform: translateX(130%);
  }

  .contact-item.has-extra .ci-value a {
    display: inline-block;
    transition: color .25s ease, text-shadow .25s ease;
  }

  .contact-item.has-extra:hover .ci-value a,
  .contact-item.has-extra:focus-within .ci-value a {
    color: #F5C418;
    text-shadow: 0 0 16px rgba(245,196,24,.45);
  }

  body.page-leave {
    animation: pageOut .45s ease forwards;
  }

  body.page-enter {
    animation: pageIn .55s ease both;
  }
}

@keyframes pageOut {
  from { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  to { opacity: 0; transform: translateY(16px) scale(.985); filter: blur(2px); }
}

@keyframes pageIn {
  from { opacity: 0; transform: translateY(20px) scale(.988); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}