/* =============================================================
   DARK VELOCITY — Animations
   ============================================================= */

/* ── Keyframes ── */
@keyframes popUp {
  from { opacity: 0; transform: scale(0.88) translateY(18px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

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

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

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes icon-hover {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-5px) rotate(-6deg); }
  60%  { transform: translateY(2px) rotate(2deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

@keyframes avatarFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-7px); }
}

/* ── Scroll-reveal base state (toggled by IntersectionObserver) ── */
.button-entrance {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity   0.55s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.button-entrance.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Section header reveal — LinkStack uses h2/h3/h4 inside .column ── */
.column h2:not(.is-visible),
.column h3:not(.is-visible),
.column h4:not(.is-visible),
.column h5:not(.is-visible) {
  opacity: 0;
  transform: translateX(-12px);
  transition:
    opacity   0.5s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.column h2.is-visible,
.column h3.is-visible,
.column h4.is-visible,
.column h5.is-visible {
  opacity: 1 !important;
  transform: translateX(0) !important;
  transition:
    opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* H1 (profile name) must never be hidden */
h1, .credit-footer h2, .credit-footer h3, .credit-footer h4 {
  opacity: 1 !important;
  transform: none !important;
}

/* ── Profile section ── */
.fadein {
  animation: fadein 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.12s;
}

/* ── Hover: wrapper classes ── */
.button-hover {
  display: block;
  position: relative; /* needed for ::after ring */
}

.social-hover {
  display: inline-block;
}

/* ── Social icon hover (scale + lift defined in skeleton-auto.css) ── */

/* ── Icon bounce ── */
.icon-hover .hvr-icon {
  display: inline-block;
  transition: transform 0.3s ease;
}

.icon-hover:hover .hvr-icon {
  animation: icon-hover 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ── Footer ── */
.credit-hover {
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.credit-hover:hover {
  transform: scale(1.07);
}

.footer-hover {
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.footer-hover:hover {
  transform: translateY(-5px);
}

/* ── CSS scroll-driven animation (Chrome 115+) — only when JS is absent ── */
@supports (animation-timeline: view()) and (not (display: none)) {
  .button-entrance:not(.js-observer) {
    opacity: 0;
    animation: popUp linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }
}

/* ── Reduced-motion: disable all entrance/float animations ── */
@media (prefers-reduced-motion: reduce) {
  .button-entrance,
  .button-entrance.is-visible,
  h5,
  h5.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  .fadein {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .icon-hover:hover .hvr-icon,
  .credit-hover,
  .footer-hover {
    animation: none;
    transition: none;
  }
}