/* SIWAPAT Premium v3.1 — Hero Motion */

@media (prefers-reduced-motion: no-preference) {
  .hero.motion-ready h1 {
    opacity: 0;
    transform: translateY(36px);
  }

  .hero.motion-ready.motion-play h1 {
    animation: siwapatTextIn 1.15s cubic-bezier(.22,1,.36,1) .2s both;
  }

  .hero.motion-ready .hero > img {
    transform: scale(1.08);
  }

  .hero.motion-ready.motion-play .hero > img {
    animation: siwapatHeroZoom 2s cubic-bezier(.22,1,.36,1) both;
  }
}

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

@keyframes siwapatHeroZoom {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}

/* Phase 2 — Premium Scroll Reveal */
@media (prefers-reduced-motion: no-preference) {
  #about.reveal,
  #services .reveal {
    transition:
      opacity 1.1s cubic-bezier(.22,1,.36,1),
      transform 1.1s cubic-bezier(.22,1,.36,1);
  }

  #services .service-list .reveal:nth-child(2) {
    transition-delay: .10s;
  }

  #services .service-list .reveal:nth-child(3) {
    transition-delay: .20s;
  }

  #services .service-list .reveal:nth-child(4) {
    transition-delay: .30s;
  }

  #services .service-list .reveal:nth-child(5) {
    transition-delay: .40s;
  }
}

/* Phase 2.1 — About Us Motion Refinement */
@media (prefers-reduced-motion: no-preference) {
  #about.reveal {
    opacity: 0;
    transform: translateY(65px);
    transition:
      opacity 1.35s cubic-bezier(.22,1,.36,1),
      transform 1.35s cubic-bezier(.22,1,.36,1);
  }

  #about.reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Phase 3 — Cinematic Project Gallery */
@media (prefers-reduced-motion: no-preference) {

  #projects .project.reveal {
    transition:
      opacity 1s cubic-bezier(.22,1,.36,1),
      transform 1s cubic-bezier(.22,1,.36,1);
  }

  #projects .project:nth-child(4n+2) {
    transition-delay: .10s;
  }

  #projects .project:nth-child(4n+3) {
    transition-delay: .20s;
  }

  #projects .project:nth-child(4n+4) {
    transition-delay: .30s;
  }

  #projects .project .photo img {
    clip-path: inset(0 0 100% 0);
    transform: scale(1.12);
    transition:
      clip-path 1.4s cubic-bezier(.22,1,.36,1),
      transform 1.5s cubic-bezier(.22,1,.36,1);
  }

  #projects .project.visible .photo img {
    clip-path: inset(0 0 0 0);
    transform: scale(1);
  }

  #projects .project.visible:hover .photo img {
    transform: scale(1.055);
  }
}

/* Phase 4 — Mobile Motion Optimization */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {

  .hero.motion-ready.motion-play .hero-bg img {
    animation-duration: 1.4s;
  }

  #about.reveal {
    transform: translateY(35px);
    transition-duration: .85s;
  }

  #about.reveal.visible {
    transform: translateY(0);
  }

  #services .reveal {
    transition-duration: .85s;
  }

  #services .service-list .reveal:nth-child(2) {
    transition-delay: .06s;
  }

  #services .service-list .reveal:nth-child(3) {
    transition-delay: .12s;
  }

  #services .service-list .reveal:nth-child(4) {
    transition-delay: .18s;
  }

  #services .service-list .reveal:nth-child(5) {
    transition-delay: .24s;
  }

  #projects .project.reveal {
    transition-duration: .8s;
    transition-delay: 0s;
  }

  #projects .project .photo img {
    transform: scale(1.05);
    transition:
      clip-path .9s cubic-bezier(.22,1,.36,1),
      transform 1s cubic-bezier(.22,1,.36,1);
  }

  #projects .project.visible .photo img {
    transform: scale(1);
  }

  #projects .project.visible:hover .photo img {
    transform: scale(1);
  }
}