@media (min-width: 768px) {
  .work-row:hover .work-article {
    width: 35% !important;
  }
  .work-row .work-article:hover {
    width: 65% !important;
  }
}
@keyframes heroTitleReveal {
  0% {
    opacity: 0;
    letter-spacing: -0.12em;
    transform: scale(0.95) skewX(-2deg) translateY(30px);
  }
  100% {
    opacity: 1;
    letter-spacing: -0.06em;
    transform: scale(1) skewX(0) translateY(0);
  }
}
@keyframes heroBadgeReveal {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes heroSubtitleReveal {
  0% {
    opacity: 0;
    transform: skewY(1deg) translateY(20px);
  }
  100% {
    opacity: 1;
    transform: skewY(0) translateY(0);
  }
}
@keyframes heroDescReveal {
  0% {
    opacity: 0;
    transform: translateX(-15px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes imageWipe {
  0% {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    transform: scale(1.1) rotate(0.5deg);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transform: scale(1) rotate(0deg);
  }
}
.hero-left-column {
  container-type: inline-size;
}
.anim-hero-title {
  opacity: 0;
  animation: heroTitleReveal 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  font-size: clamp(2.2rem, 19cqw, 3.75rem) !important;
  line-height: 0.92 !important;
  letter-spacing: -0.06em !important;
  white-space: nowrap !important;
}
.anim-hero-badge {
  opacity: 0;
  animation: heroBadgeReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}
.anim-hero-subtitle {
  opacity: 0;
  animation: heroSubtitleReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards;
}
.anim-hero-desc {
  opacity: 0;
  animation: heroDescReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
}
.anim-hero-img {
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  animation: imageWipe 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}
.anim-hero-tag {
  opacity: 0;
  animation: heroBadgeReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}
.anim-hero-nav-item {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.anim-hero-nav-item.active {
  opacity: 1;
  transform: translateY(0);
}
.anim-hero-nav-item:nth-child(1) { transition-delay: 0.45s; }
.anim-hero-nav-item:nth-child(2) { transition-delay: 0.55s; }
.anim-hero-nav-item:nth-child(3) { transition-delay: 0.65s; }
.anim-hero-nav-item:nth-child(4) { transition-delay: 0.75s; }

.anim-work-title {
  opacity: 0;
  transform: translateY(20px) skewY(0.5deg);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.anim-work-title.active {
  opacity: 1;
  transform: translateY(0) skewY(0);
}
.anim-work-desc-box-1 {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s, transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}
.anim-work-desc-box-1.active {
  opacity: 1;
  transform: translateX(0);
}
.anim-work-desc-box-2 {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s, transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}
.anim-work-desc-box-2.active {
  opacity: 1;
  transform: translateX(0);
}
.anim-work-item {
  opacity: 0;
  transform: translateY(40px) scale(0.99);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.anim-work-item.active {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.anim-exp-header {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.anim-exp-header.active {
  opacity: 1;
  transform: translateY(0);
}
.anim-exp-focus {
  opacity: 0;
  transform: scale(0.97) translateY(15px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.1s, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}
.anim-exp-focus.active {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.anim-exp-card {
  opacity: 0;
  transform: translateY(30px) rotateX(8deg);
  transform-origin: top;
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.anim-exp-card.active {
  opacity: 1;
  transform: translateY(0) rotateX(0);
}
.anim-clients-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.anim-clients-left.active {
  opacity: 1;
  transform: translateX(0);
}
.anim-clients-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s, transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}
.anim-clients-right.active {
  opacity: 1;
  transform: translateX(0);
}
.anim-logo-item {
  opacity: 0;
  transform: scale(0.85) rotateY(10deg);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.anim-logo-item.active {
  opacity: 1;
  transform: scale(1) rotateY(0);
}
.anim-contact-header {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.anim-contact-header.active {
  opacity: 1;
  transform: translateY(0);
}
.anim-contact-link {
  opacity: 0;
  transform: translateY(25px) skewX(-1deg);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.anim-contact-link.active {
  opacity: 1;
  transform: translateY(0) skewX(0);
}

/* Steps hover dynamic widening */
@media (min-width: 1024px) {
  .steps-container {
    display: flex !important;
  }
  .step-card {
    flex: 1 !important;
    width: 33.333% !important;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
  .steps-container:hover .step-card {
    flex: 0.8 !important;
    width: 26% !important;
    opacity: 0.6;
  }
  .steps-container .step-card:hover {
    flex: 1.4 !important;
    width: 48% !important;
    opacity: 1;
    background: #0c0c0c !important;
  }
}

/* Custom enhancements for smooth scrolling and responsiveness */
html {
  scroll-behavior: smooth;
}

@media (min-width: 1024px) {
  .anim-hero-title {
    font-size: clamp(90px, 19cqw, 141px) !important;
    line-height: 0.88 !important;
    letter-spacing: -0.07em !important;
  }
}

@media (max-width: 767px) {
  .work-article .absolute.bottom-0 {
    transform: translateY(0) !important;
  }
}