/**
 * Shared smooth animations and page transitions.
 * Loaded by index (home) and project pages.
 */

/* Navigation progress bar — appears instantly on click, every browser */
#nav-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: #FF5F00;
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 10px rgba(255, 95, 0, 0.55);
}

/* Cross-page View Transitions API (cooler navigation between index <-> project) */
::view-transition-old(root) {
  animation: page-out 0.28s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
::view-transition-new(root) {
  animation: page-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) 0.05s backwards;
}
@keyframes page-out {
  to {
    opacity: 0;
    transform: scale(0.98);
    filter: blur(2px);
  }
}
@keyframes page-in {
  from {
    opacity: 0;
    transform: scale(1.02);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
}

/* Prevent flash: app containers start invisible, then fade in when content is ready */
#portfolio-app,
#project-app {
  opacity: 0;
  transform: scale(0.995);
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
#portfolio-app.shell-visible,
#portfolio-app.page-visible,
#project-app.shell-visible,
#project-app.page-visible {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  #portfolio-app,
  #project-app { transition: none; transform: none !important; }
  #portfolio-app.shell-visible,
  #project-app.shell-visible,
  #portfolio-app.page-visible,
  #project-app.page-visible { opacity: 1; transform: none !important; }
  .card,
  .card img,
  .btn,
  .resume-btn,
  nav a,
  .dropdown-toggle,
  .dropdown-menu { transition: none; transform: none !important; }
  .page-visible .section-title,
  .page-visible .hero,
  .page-visible .project-grid .card,
  #project-app.page-visible main { animation: none; }
  .reveal-in,
  .hero h1,
  .hero p,
  .hero-content h1,
  .hero-content p { animation: none !important; opacity: 1 !important; transform: none !important; }
  .gallery-wrap .slide,
  .gallery-slideshow .slide { transition: none !important; }
}

/* Smooth scroll for anchor links */
html {
  scroll-behavior: smooth;
}

/* Top bar: sticky so it stays visible on scroll; smooth transition */
header {
  position: sticky;
  top: 0;
  z-index: 500;
  transition: padding 0.2s ease, box-shadow 0.2s ease;
}
header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
  pointer-events: none;
}

/* Nav and dropdown transitions */
nav a,
.dropdown-toggle,
.li-icon {
  transition: opacity 0.2s ease, color 0.2s ease;
}
nav a:hover,
.dropdown-toggle:hover {
  opacity: 0.85;
}
.dropdown-menu {
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.dropdown:hover .dropdown-menu {
  animation: dropdown-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes dropdown-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Hero: dramatic staggered entrance */
.page-visible .hero {
  animation: fade-in 0.5s ease-out;
}
.page-visible .hero-content h1 {
  animation: hero-title-in 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.1s backwards;
}
.page-visible .hero-content p {
  animation: hero-subtitle-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.35s backwards;
}
@keyframes hero-title-in {
  from {
    opacity: 0;
    transform: translateY(32px) scale(0.96);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
@keyframes hero-subtitle-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Cards: lift, shadow, and image zoom on hover */
.card {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
  overflow: hidden;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}
.card img {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.card:hover img {
  transform: scale(1.06);
}

/* Buttons */
.btn,
.resume-btn,
.card-arrow {
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}
.btn:hover,
.resume-btn:hover {
  transform: scale(1.03);
}

/* Section titles and project grid: entrance on load */
.page-visible .section-title {
  animation: fade-in-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.08s backwards;
}
.page-visible .project-grid .card {
  animation: card-enter 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
.page-visible .project-grid .card:nth-child(1) { animation-delay: 0.1s; }
.page-visible .project-grid .card:nth-child(2) { animation-delay: 0.18s; }
.page-visible .project-grid .card:nth-child(3) { animation-delay: 0.26s; }
.page-visible .project-grid .card:nth-child(4) { animation-delay: 0.34s; }
@keyframes card-enter {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scroll-triggered reveal: elements get .reveal-in when in view */
.reveal-in {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-in.stagger-1 { transition-delay: 0.05s; }
.reveal-in.stagger-2 { transition-delay: 0.1s; }
.reveal-in.stagger-3 { transition-delay: 0.15s; }
.reveal-in.stagger-4 { transition-delay: 0.2s; }

/* Home: about, skills, collage sections reveal when scrolled into view */
.page-visible .about-section.reveal-in.is-visible,
.page-visible .wix-container .section-title.reveal-in.is-visible,
.page-visible .skills-title.reveal-in.is-visible,
.page-visible .collage-container.reveal-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.page-visible .skill-item.reveal-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Project page: main content fade-in, then sections reveal on scroll */
#project-app.page-visible main {
  animation: project-main-enter 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.06s backwards;
}
@keyframes project-main-enter {
  from {
    opacity: 0;
    transform: translateY(36px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#project-app main .hero-title.reveal-in.is-visible,
#project-app main .hero-columns.reveal-in.is-visible,
#project-app main .section-title.reveal-in.is-visible,
#project-app main .split-row.reveal-in.is-visible,
#project-app main .gallery-wrap.reveal-in.is-visible,
#project-app main .gallery-slideshow.reveal-in.is-visible,
#project-app main .grid-2col.reveal-in.is-visible,
#project-app main .grid-3col.reveal-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Slideshow: horizontal slide transition handled by .slideshow-track translateX */