/* ==========================================================
 * ANIMATIONS & BACKGROUND
 * Keyframes, @property definitions, and animated background canvas
 * ========================================================== */

/* ==========================================================
 * PROJECT SLIDE TRANSITIONS ("insane" cinematic)
 * ========================================================== */
/* Give the carousel a perspective so slides can 3D tilt */
.carousel-container {
  perspective: 1200px;
}

/* base state to hide overflow during transitions */
.carousel-slide {
  position: relative;
}

/* Entry from the right (next) */
@keyframes slideInCinematic {
  0% {
    opacity: 0;
    transform: translate3d(30%, 0, 0) rotateY(-25deg) scale(0.9);
    filter: blur(8px) brightness(0.8);
  }
  60% {
    opacity: 1;
    transform: translate3d(-2%, 0, 0) rotateY(6deg) scale(1.02);
    filter: blur(0) brightness(1);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateY(0deg) scale(1);
    filter: blur(0) brightness(1);
  }
}

/* Exit to the left (when going next) */
@keyframes slideOutCinematic {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateY(0deg) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translate3d(-35%, 0, -120px) rotateY(25deg) scale(0.92);
    filter: blur(10px) brightness(0.9);
  }
}

/* Mirror directions for prev */
@keyframes slideInCinematicPrev {
  0% {
    opacity: 0;
    transform: translate3d(-30%, 0, 0) rotateY(25deg) scale(0.9);
    filter: blur(8px) brightness(0.8);
  }
  60% {
    opacity: 1;
    transform: translate3d(2%, 0, 0) rotateY(-6deg) scale(1.02);
    filter: blur(0) brightness(1);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateY(0deg) scale(1);
    filter: blur(0) brightness(1);
  }
}

@keyframes slideOutCinematicPrev {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateY(0deg) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translate3d(35%, 0, -120px) rotateY(-25deg) scale(0.92);
    filter: blur(10px) brightness(0.9);
  }
}

/* A sweeping light sheen overlay during entry */
.project-card.anim-enter::after,
.project-card.anim-enter-prev::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255, 255, 255, 0.16) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  animation: sweepSheen 700ms ease 120ms forwards;
  border-radius: 18px;
}

@keyframes sweepSheen {
  to {
    transform: translateX(100%);
  }
}

/* Hook classes applied by JS */
.project-card.anim-enter {
  animation: slideInCinematic 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.project-card.anim-exit {
  animation: slideOutCinematic 650ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.project-card.anim-enter-prev {
  animation: slideInCinematicPrev 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.project-card.anim-exit-prev {
  animation: slideOutCinematicPrev 650ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Animated Background Custom Properties */
@property --c-0 {
  syntax: "<color>";
  inherits: false;
  initial-value: hsla(360, 0%, 2%, 1);
}
@property --x-0 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 25%;
}
@property --y-0 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 21%;
}
@property --s-start-0 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 5%;
}
@property --s-end-0 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 66%;
}
@property --c-1 {
  syntax: "<color>";
  inherits: false;
  initial-value: hsla(360, 0%, 1%, 1);
}
@property --x-1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 82%;
}
@property --y-1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 19%;
}
@property --s-start-1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 5%;
}
@property --s-end-1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 66%;
}
@property --c-2 {
  syntax: "<color>";
  inherits: false;
  initial-value: hsla(360, 0%, 0%, 1);
}
@property --x-2 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 81%;
}
@property --y-2 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 57%;
}
@property --s-start-2 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 5%;
}
@property --s-end-2 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 66%;
}
@property --c-3 {
  syntax: "<color>";
  inherits: false;
  initial-value: hsla(360, 0%, 7%, 1);
}
@property --x-3 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 90%;
}
@property --y-3 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 98%;
}
@property --s-start-3 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 5%;
}
@property --s-end-3 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 66%;
}
@property --c-4 {
  syntax: "<color>";
  inherits: false;
  initial-value: hsla(360, 0%, 4%, 1);
}
@property --x-4 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 84%;
}
@property --y-4 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 52%;
}
@property --s-start-4 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 5%;
}
@property --s-end-4 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 66%;
}

@keyframes background-gradient-animation {
  0% {
    --c-0: hsla(360, 0%, 3%, 1);
    --x-0: 25%;
    --y-0: 21%;
    --s-start-0: 5%;
    --s-end-0: 66%;
    --c-1: hsla(360, 0%, 2%, 1);
    --x-1: 82%;
    --y-1: 19%;
    --s-start-1: 5%;
    --s-end-1: 66%;
    --c-2: hsla(360, 0%, 1%, 1);
    --x-2: 81%;
    --y-2: 57%;
    --s-start-2: 5%;
    --s-end-2: 66%;
    --c-3: hsla(360, 0%, 8%, 1);
    --x-3: 90%;
    --y-3: 98%;
    --s-start-3: 5%;
    --s-end-3: 66%;
    --c-4: hsla(360, 0%, 5%, 1);
    --x-4: 84%;
    --y-4: 52%;
    --s-start-4: 5%;
    --s-end-4: 66%;
  }
  100% {
    --c-0: hsla(360, 0%, 2%, 1);
    --x-0: 0%;
    --y-0: 5%;
    --s-start-0: 5%;
    --s-end-0: 66%;
    --c-1: hsla(360, 0%, 1%, 1);
    --x-1: 92%;
    --y-1: 44%;
    --s-start-1: 5%;
    --s-end-1: 66%;
    --c-2: hsla(360, 0%, 1%, 1);
    --x-2: 66%;
    --y-2: 71%;
    --s-start-2: 5%;
    --s-end-2: 66%;
    --c-3: hsla(360, 0%, 3%, 1);
    --x-3: 23%;
    --y-3: 70%;
    --s-start-3: 5%;
    --s-end-3: 66%;
    --c-4: hsla(360, 0%, 4%, 1);
    --x-4: 48%;
    --y-4: 63%;
    --s-start-4: 5%;
    --s-end-4: 66%;
  }
}

body::before {
  --c-0: hsla(360, 0%, 2%, 1);
  --x-0: 25%;
  --y-0: 21%;
  --c-1: hsla(360, 0%, 1%, 1);
  --x-1: 82%;
  --y-1: 19%;
  --c-2: hsla(360, 0%, 0%, 1);
  --x-2: 81%;
  --y-2: 57%;
  --c-3: hsla(360, 0%, 7%, 1);
  --x-3: 90%;
  --y-3: 98%;
  --c-4: hsla(360, 0%, 4%, 1);
  --x-4: 84%;
  --y-4: 52%;
  background-color: hsla(360, 0%, 5%, 1);
  z-index: -1;
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(
      circle at var(--x-0) var(--y-0),
      var(--c-0) var(--s-start-0),
      transparent var(--s-end-0)
    ),
    radial-gradient(
      circle at var(--x-1) var(--y-1),
      var(--c-1) var(--s-start-1),
      transparent var(--s-end-1)
    ),
    radial-gradient(
      circle at var(--x-2) var(--y-2),
      var(--c-2) var(--s-start-2),
      transparent var(--s-end-2)
    ),
    radial-gradient(
      circle at var(--x-3) var(--y-3),
      var(--c-3) var(--s-start-3),
      transparent var(--s-end-3)
    );
  animation: background-gradient-animation 20s linear infinite alternate;
  background-blend-mode: normal, normal, normal, normal;
  filter: blur(20px);
}

#starsCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Pulse Animation for contact button and timeline dots */
@keyframes pulseBorder {
  0% {
    box-shadow: 0 0 0 0 rgba(107, 202, 232, 0.7);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(107, 202, 232, 0);
  }
}
@keyframes dotPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(107, 202, 232, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(107, 202, 232, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(107, 202, 232, 0);
  }
}

/* Hero entrance animations */
@keyframes heroContentIntro {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
    filter: blur(8px);
  }
  60% {
    opacity: 1;
    transform: translateY(-10px) scale(1.03);
    filter: blur(0);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
@keyframes heroTitleReveal {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    filter: blur(8px);
  }
  60% {
    opacity: 1;
    transform: translateY(-10px) scale(1.05);
    filter: blur(0);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
@keyframes heroSubtitleReveal {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes heroDescReveal {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes heroSocialReveal {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Other small keyframes */
@keyframes heroTextFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes continuousJump {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
@keyframes funFactFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes statFadeIn {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes skillFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}