/* Custom keyframes */
@keyframes float {
  0%, 100% { transform: translateY(0) translateX(0); }
  33% { transform: translateY(-20px) translateX(15px); }
  66% { transform: translateY(10px) translateX(-10px); }
}

@keyframes drift {
  0% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-30px) rotate(5deg); }
}

@keyframes scroll-wheel {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(8px); opacity: 0; }
}

@keyframes line-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Global styles */
html { scroll-behavior: auto; }

::selection {
  background: var(--color-peach);
  color: #1a1a1a;
}

::-moz-selection {
  background: var(--color-peach);
  color: #1a1a1a;
}

body {
  font-family: var(--font-sans);
  background-color: #000;
  color: #fff;
  cursor: auto;
  overflow-x: hidden;
}

/* Nav theme utility */
.nav-name-wb,
.nav-link,
.nav-social-link {
  transition: color 0.4s ease;
}

.nav-name-wb.is-peach,
.nav-link.is-peach,
.nav-social-link.is-peach {
  color: var(--color-peach);
}

/* Work card hover overlay styles */
.work-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  aspect-ratio: 16 / 9;
  background-color: var(--color-dark);
}

.work-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.work-card:focus-visible {
  outline: 2px solid #2E54FE;
  outline-offset: 4px;
}

.work-card:hover img {
  transform: scale(1.08);
}

.work-card:focus-visible img {
  transform: scale(1.08);
}

.work-card .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--color-blue) 80%, transparent), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
}

.work-card:hover .overlay {
  opacity: 1;
}

.work-card:focus-visible .overlay {
  opacity: 1;
}

.work-card .overlay h3,
.work-card .overlay span {
  color: #FFBC95;
}

.work-card .project-name {
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.3s ease;
}

.work-card:hover .project-name {
  transform: translateY(0);
  opacity: 1;
}

.work-card:focus-visible .project-name {
  transform: translateY(0);
  opacity: 1;
}

/* Service card hover */
.service-card {
  transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
  filter: saturate(0.7);
}

.service-card:hover {
  transform: scale(1.05);
  filter: saturate(1);
  box-shadow: 0 20px 60px color-mix(in srgb, var(--color-blue) 15%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

#hero .absolute {
  will-change: transform;
}

/* Nav dot hop animation */
@keyframes hop-bounce {
  0%   { transform: translateY(0) scale(1); }
  30%  { transform: translateY(-10px) scale(1.2); }
  50%  { transform: translateY(0) scale(0.9); }
  70%  { transform: translateY(-4px) scale(1.1); }
  100% { transform: translateY(0) scale(1); }
}

.nav-dot {
  transition: transform 0.2s ease;
}

.group:hover .nav-dot {
  animation: hop-bounce 0.6s ease forwards;
}

/* 3D Shapes container */
#click-shapes {
  perspective: 800px;
}

.shape-3d {
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* Mouse-driven text scale characters */
.hero-char {
  display: inline-block;
  will-change: transform;
  transform-origin: center bottom;
}