/* =========================================================
   THEME: HOLOGRAM SLICE (CSS)
   ========================================================= */

/* ---------------------------------------------------------
   [PC] SECTION BASE & INITIAL STATE (DEPTH Z-AXIS)
   --------------------------------------------------------- */
main section {
  opacity: 0;
  filter: blur(15px) contrast(200%);
  transform: perspective(1200px) translate3d(0, 100px, -800px) rotateX(45deg);
  transition: 
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity, filter;
}

main section:nth-child(even) {
  transform: perspective(1200px) translate3d(0, 100px, -800px) rotateX(-45deg);
}

/* ---------------------------------------------------------
   [PC] ACTIVE STATE (HOLOGRAM FLY-IN)
   --------------------------------------------------------- */
main section.is-visible {
  opacity: 1;
  filter: blur(0px) contrast(100%);
  transform: perspective(1200px) translate3d(0, 0, 0) rotateX(0deg);
}

main section.is-visible h1 {
  animation: cyber-slice 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

main section.is-visible ul > li {
  animation: card-flip-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

main section.is-visible ul > li:nth-child(1) { animation-delay: 0.10s; }
main section.is-visible ul > li:nth-child(2) { animation-delay: 0.18s; }
main section.is-visible ul > li:nth-child(3) { animation-delay: 0.26s; }
main section.is-visible ul > li:nth-child(4) { animation-delay: 0.34s; }

@keyframes cyber-slice {
  0% {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    transform: translateX(-80px) skewX(-20deg);
    opacity: 0;
  }
  50% {
    clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transform: translateX(0) skewX(0deg);
    opacity: 1;
  }
}

@keyframes card-flip-in {
  0% {
    opacity: 0;
    transform: perspective(600px) rotateY(-90deg) scale(0.6);
  }
  70% {
    transform: perspective(600px) rotateY(10deg) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: perspective(600px) rotateY(0deg) scale(1);
  }
}

/* ---------------------------------------------------------
   [MOBILE] MILD RESPONSIVE ANIMATION (HEIGHT-SAFE)
   --------------------------------------------------------- */
@media screen and (max-width: 768px) {
  main section,
  main section:nth-child(even) {
    opacity: 0 !important;
    filter: blur(4px) !important;
    transform: translateY(12px) !important;
    transition: opacity 0.45s ease-out, filter 0.45s ease-out, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: opacity, filter, transform !important;
  }

  main section.is-visible {
    opacity: 1 !important;
    filter: blur(0px) !important;
    transform: translateY(0) !important;
  }

  main section h1,
  main section ul > li,
  main section dl {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}