/* Keep custom CSS minimal; Tailwind handles most styling */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 800ms ease, transform 800ms ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.title-anim {
  transition: opacity 200ms ease, transform 200ms ease;
}
.title-fade-out {
  opacity: 0;
  transform: scale(0.95);
}

.filter-btn[aria-pressed="true"] {
  background: rgba(47, 102, 255, 0.14);
  border-color: rgba(47, 102, 255, 0.42);
  color: rgb(30, 64, 175);
}
.dark .filter-btn[aria-pressed="true"] {
  background: rgba(47, 102, 255, 0.20);
  border-color: rgba(47, 102, 255, 0.55);
  color: rgb(191, 219, 254);
}

.portfolio-card {
  transition: opacity 200ms ease, transform 200ms ease;
}
.portfolio-card.is-hidden {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

.navlink {
  position: relative;
  transition: color 180ms ease, background-color 180ms ease;
}
.navlink::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 6px;
  height: 2px;
  border-radius: 9999px;
  background: rgba(31, 78, 230, 0.75);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 180ms ease;
}
.navlink:hover::after,
.navlink:focus-visible::after {
  transform: scaleX(1);
}
.dark .navlink::after {
  background: rgba(96, 165, 250, 0.85);
}

/* Small nicety: smooth gradient border without extra libs */
.gradient-border {
  position: relative;
}
.gradient-border::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(47,102,255,.55), rgba(16,185,129,.35), rgba(99,102,241,.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

@keyframes platform-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.platform-marquee {
  animation: platform-marquee 12s linear infinite;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .platform-marquee {
    animation: none;
  }

  .title-anim {
    transition: none;
  }
}