/* Shared project case-study pages: animations + scroll reveals */

:root {
  --project-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* Page shell entrance */
.project-container {
  animation: projectContainerIn 0.5s var(--project-ease-out) forwards;
}

@keyframes projectContainerIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Above-the-fold hero stagger (load) */
.project-page .animate-in {
  opacity: 0;
  transform: translateY(16px);
  animation: projectFadeInUp 0.48s var(--project-ease-out) forwards;
}

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

.project-page .delay-1 { animation-delay: 0.06s; }
.project-page .delay-2 { animation-delay: 0.12s; }
.project-page .delay-3 { animation-delay: 0.18s; }
.project-page .delay-4 { animation-delay: 0.24s; }
.project-page .delay-5 { animation-delay: 0.32s; }

.project-page .breadcrumb {
  opacity: 0;
  animation: projectFadeInUp 0.48s var(--project-ease-out) 0.08s forwards;
}

.project-page .go-back-link {
  transition:
    background-color 0.2s var(--project-ease-out),
    color 0.2s var(--project-ease-out),
    transform 0.2s var(--project-ease-out);
}

.project-page .go-back-link svg {
  transition: transform 0.2s var(--project-ease-out);
}

.project-page .go-back-link:active {
  transform: scale(0.97);
  transition-duration: 0.12s;
}

@media (hover: hover) and (pointer: fine) {
  .project-page .go-back-link:hover {
    transform: translateX(-4px);
  }

  .project-page .go-back-link:hover svg {
    transform: translateX(-2px);
  }

  html[dir="rtl"] .project-page .go-back-link:hover {
    transform: translateX(4px);
  }

  html[dir="rtl"] .project-page .go-back-link:hover svg {
    transform: translateX(2px);
  }
}

/* Below-the-fold: reveal on scroll */
.project-page .reveal-on-scroll {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.48s var(--project-ease-out),
    transform 0.48s var(--project-ease-out);
}

.project-page .reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Mobile screens horizontal strip (AOUN, WSELL) */
.mobile-screens-grid {
  display: flex;
  flex-direction: row;
  gap: 32px;
  margin-top: 24px;
  margin-left: -100px;
  margin-right: -100px;
  padding-left: 100px;
  padding-right: 32px;
  justify-content: flex-start;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}

.mobile-screens-grid::-webkit-scrollbar {
  display: none;
}

.mobile-screen {
  flex: 0 0 356px;
  width: 356px;
  height: 725px;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  background: none !important;
  box-shadow: none !important;
  border: none;
  object-fit: contain;
}

@media (max-width: 1024px) {
  .mobile-screens-grid {
    margin-left: -60px;
    margin-right: -60px;
    padding-left: 60px;
    padding-right: 24px;
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .mobile-screens-grid {
    gap: 20px;
    padding: 0 calc(50vw - 178px);
    margin: 0 calc(-50vw + 50%);
    scroll-snap-type: x mandatory;
  }

  .mobile-screen {
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
}

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  .mobile-screens-grid {
    scroll-behavior: auto;
  }
}

@media (max-width: 480px) {
  .mobile-screens-grid {
    gap: 16px;
    padding: 0 calc(50vw - 174px) 12px calc(50vw - 174px);
  }

  .mobile-screen {
    flex: 0 0 348px;
    width: 348px;
    height: 707px;
  }
}

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

  .project-page .animate-in,
  .project-page .breadcrumb {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .project-page .reveal-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .mobile-screens-grid {
    scroll-behavior: auto;
  }
}