/* Menu animations */
.menu,
.contacts {
  clip-path: inset(50% 50% 50% 50%);
  transition:
    clip-path 0.9s cubic-bezier(0.83, 0, 0.17, 1),
    opacity 0.5s ease,
    visibility 0.5s ease;
}

.menu.is-open,
.contacts.is-open {
  clip-path: inset(0% 0% 0% 0%);
}

.menu__label,
.menu-category {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.55s cubic-bezier(0.83, 0, 0.17, 1),
    transform 0.55s cubic-bezier(0.83, 0, 0.17, 1);
}

.menu__label.is-visible,
.menu-category.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.contacts__hero,
.contacts__stage,
.contacts__card,
.contacts__media {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.55s cubic-bezier(0.83, 0, 0.17, 1),
    transform 0.55s cubic-bezier(0.83, 0, 0.17, 1);
}

.contacts__hero.is-visible,
.contacts__stage.is-visible,
.contacts__card.is-visible,
.contacts__media.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.header--menu-open .header__left,
.header--menu-open .header__right,
.header--contacts-open .header__left,
.header--contacts-open .header__right {
  opacity: 0;
  transform: translateY(-120%);
}

.header__left,
.header__right {
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.83, 0, 0.17, 1);
}

/* Hero intro */
#hero .hero__brand {
  opacity: 0;
  transform: translateY(24px);
}

.hero--ready .hero__brand {
  animation: heroFadeUp 0.9s cubic-bezier(0.83, 0, 0.17, 1) 0.2s forwards;
}

.hero--ready .hero__title {
  opacity: 1;
  transform: translateY(0);
}

.hero-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%);
}

.hero-char--space {
  width: 0.28em;
}

.hero--ready .hero-char {
  animation: heroCharReveal 0.8s cubic-bezier(0.83, 0, 0.17, 1) forwards;
  animation-delay: calc(0.35s + var(--char-delay, 0s));
}

@keyframes heroFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroCharReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Project transitions */
.project__image,
.project__video {
  transform: scale(calc(1.14 - var(--section-progress, 0) * 0.08))
             translateY(calc((1 - var(--section-progress, 0)) * 30px));
  transition: transform 0.15s linear, filter 0.6s ease, opacity 0.45s ease;
  filter: brightness(calc(0.72 + var(--section-progress, 0) * 0.28));
}

.project.is-active .project__image,
.project.is-active .project__video {
  transform: scale(calc(1.02 - var(--section-progress, 0) * 0.02))
             translateY(calc((1 - var(--section-progress, 0)) * 12px));
}

.project.is-past .project__image,
.project.is-past .project__video {
  filter: brightness(0.55);
}

@media (max-width: 900px) {
  .project__image,
  .project__video,
  .project.is-active .project__image,
  .project.is-active .project__video {
    transform: none;
    transition: filter 0.6s ease, opacity 0.45s ease;
    will-change: auto;
  }
}

.project__overlay {
  opacity: calc(0.95 - var(--section-progress, 0) * 0.25);
  transition: opacity 0.3s ease;
}

.project__number,
.project__client,
.project__title,
.project__subtitle,
.project__client-right {
  transition:
    opacity 0.75s cubic-bezier(0.83, 0, 0.17, 1),
    transform 0.75s cubic-bezier(0.83, 0, 0.17, 1);
}

.project:not(.is-active) .project__number,
.project:not(.is-active) .project__client,
.project:not(.is-active) .project__title,
.project:not(.is-active) .project__subtitle,
.project:not(.is-active) .project__client-right {
  opacity: 0;
  transform: translateY(36px);
}

.project.is-active .project__number {
  transition-delay: 0.05s;
}

.project.is-active .project__client {
  transition-delay: 0.1s;
}

.project.is-active .project__title {
  transition-delay: 0.16s;
}

.project.is-active .project__subtitle {
  transition-delay: 0.24s;
}

.project.is-active .project__client-right {
  transition-delay: 0.18s;
}

.project::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--brand-red);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  transition: opacity 0.35s ease;
}

.project.is-next::after {
  opacity: 0.08;
}

/* Info section */
.info-section__grid,
.info-section__footer {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.9s cubic-bezier(0.83, 0, 0.17, 1),
    transform 0.9s cubic-bezier(0.83, 0, 0.17, 1);
}

.info-section.is-visible .info-section__grid {
  opacity: 1;
  transform: translateY(0);
}

.info-section.is-visible .info-section__footer {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.15s;
}

.footer-sticky-scroll .info-section__footer,
.site-footer,
#siteFooter {
  opacity: 1;
  transform: none;
}

.info-block {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.8s cubic-bezier(0.83, 0, 0.17, 1),
    transform 0.8s cubic-bezier(0.83, 0, 0.17, 1);
}

.info-section.is-visible .info-block:nth-child(1) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

.info-section.is-visible .info-block:nth-child(2) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.22s;
}

/* Video modal */
.video-modal__content {
  transform: scale(0.94) translateY(20px);
  opacity: 0;
  transition:
    transform 0.55s cubic-bezier(0.83, 0, 0.17, 1),
    opacity 0.55s cubic-bezier(0.83, 0, 0.17, 1);
}

.video-modal__backdrop {
  opacity: 0;
  transition: opacity 0.45s ease;
}

.video-modal.video-modal--animating {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.video-modal.video-modal--visible .video-modal__backdrop {
  opacity: 1;
}

.video-modal.video-modal--visible .video-modal__content {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.progress__fill {
  transition: width 0.7s cubic-bezier(0.83, 0, 0.17, 1);
}

.progress {
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.progress.is-visible {
  transform: translateX(-50%) translateY(0);
}

.progress:not(.is-visible) {
  transform: translateX(-50%) translateY(12px);
}

@media (prefers-reduced-motion: reduce) {
  .menu,
  #hero .hero__brand,
  #hero .hero__panel--left .hero__side-title,
  #hero .hero__panel--right .hero__side-title,
  #hero .hero__side-tagline,
  .hero__title,
  .hero-char,
  .project__image,
  .info-section__grid,
  .info-section__footer,
  .video-modal__content {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  #hero .hero__side-tagline {
    transform: translate3d(-50%, 0, 0) !important;
  }
}