/* ============ Flip cards (Works) ============ */
.flip-card {
  perspective: 1200px;
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner,
.flip-card:focus-within .flip-card-inner {
  transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.flip-card-back {
  transform: rotateY(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .flip-card-inner {
    transition: none;
  }
}

/* ============ Base ============ */
html {
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: rgba(10, 10, 10, 0.12);
}
.dark ::selection {
  background: rgba(245, 245, 244, 0.16);
}

/* ============ Nav links ============ */
.nav-link {
  position: relative;
  color: currentColor;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}
.nav-link:hover {
  opacity: 1;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.nav-link:hover::after {
  transform: scaleX(1);
}
.nav-link[aria-expanded="true"] {
  opacity: 1;
}

/* ============ Hero inline links ============ */
.hero-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: rgba(10, 10, 10, 0.35);
  transition: text-decoration-color 0.3s ease;
}
.hero-link:hover {
  text-decoration-color: rgba(10, 10, 10, 1);
}
.dark .hero-link {
  text-decoration-color: rgba(245, 245, 244, 0.35);
}
.dark .hero-link:hover {
  text-decoration-color: rgba(245, 245, 244, 1);
}

/* ============ Theme toggle (day/night capsule) ============ */
.theme-icon-sun {
  color: rgba(10, 10, 10, 0.6);
}
.theme-icon-moon {
  color: rgba(10, 10, 10, 0.25);
}
.dark .theme-icon-sun {
  color: rgba(245, 245, 244, 0.25);
}
.dark .theme-icon-moon {
  color: rgba(245, 245, 244, 0.7);
}
.theme-switch-thumb {
  transform: translateX(0);
}
.dark .theme-switch-thumb {
  transform: translateX(1.75rem);
}

/* ============ Language toggle ============ */
.lang-option {
  opacity: 0.4;
  transition: opacity 0.3s ease;
}
.lang-option[data-active="true"] {
  opacity: 1;
}

/* ============ Fade-up entrance ============ */
.fade-up {
  opacity: 0;
  transform: translateY(14px);
  animation: fadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--delay, 0ms);
}
@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fade-up {
    animation: none;
    opacity: 1;
    transform: none;
  }
}