/* ---------- 1. Global background + layout ---------- */
body {
  margin: 0;
  min-height: 100vh;
  font-family: sans-serif;

  display: flex;
  justify-content: center;
  align-items: center;

  /* animated gradient */
  background: linear-gradient(270deg, #000000, #1f151f, #1b1d1d, #000000);
  background-size: 200% 100%;
  animation: gradient 15s ease infinite;
}



@keyframes gradient {
  0% {
    background-position: 0% 50%
  }

  50% {
    background-position: 100% 50%
  }

  100% {
    background-position: 0% 50%
  }
}

/* canvas stays behind everything */
#particle-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  z-index: -1;
}

/* ---------- 2. Skewed card strip ---------- */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10vmin;
  overflow: visible;
  /* allow cards to animate from outside */
  transform: skew(5deg);
}

/* each card */
.container .card {
  flex: 1;
  /* equal width in the row           */
  height: 60vmin;
  position: relative;
  will-change: flex-grow;
  overflow: hidden;
  /* keep card__head inside bounds */

  /* Initial hidden state */
  opacity: 0;

  /* CLOSE transition - fast & snappy */
  transition: flex-grow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}


/* Fly-in animation keyframes - multiple directions */
@keyframes flyFromBottom {
  from {
    opacity: 0;
    transform: translateY(100px) scale(0.9) rotate(5deg);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0);
  }
}

@keyframes flyFromTop {
  from {
    opacity: 0;
    transform: translateY(-100px) scale(0.9) rotate(-5deg);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0);
  }
}

@keyframes flyFromLeft {
  from {
    opacity: 0;
    transform: translateX(-100px) scale(0.9) rotate(-8deg);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1) rotate(0);
  }
}

@keyframes flyFromRight {
  from {
    opacity: 0;
    transform: translateX(100px) scale(0.9) rotate(8deg);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1) rotate(0);
  }
}

@keyframes flyFromBottomLeft {
  from {
    opacity: 0;
    transform: translate(-80px, 80px) scale(0.85) rotate(-10deg);
  }

  to {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0);
  }
}

@keyframes flyFromTopRight {
  from {
    opacity: 0;
    transform: translate(80px, -80px) scale(0.85) rotate(10deg);
  }

  to {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0);
  }
}

/* Cards fly in with stagger from random directions */
.container.visible .card {
  opacity: 1;
}

.container.visible .card:nth-child(1) {
  animation: flyFromLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: 0s;
}

.container.visible .card:nth-child(2) {
  animation: flyFromTop 0.8s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: 0.1s;
}

.container.visible .card:nth-child(3) {
  animation: flyFromBottom 0.8s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: 0.15s;
}

.container.visible .card:nth-child(4) {
  animation: flyFromTopRight 0.8s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: 0.2s;
}

.container.visible .card:nth-child(5) {
  animation: flyFromRight 0.8s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: 0.25s;
}

/* visual gap between cards except last */
.container .card:not(:nth-child(5)) {
  margin-right: 1em;
}

/* card image (single definition) */
.container .card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);

  /* CLOSE - fast snap back to grayscale */
  transition: filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* OPEN - smooth color reveal */
.container .card:hover img {
  transition: filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* overlay heading */
.container .card .card__head {
  color: #000;
  /* default text    */
  background: rgba(255, 30, 173, .90);
  /* ↑ alpha for a11y*/
  padding: .5em;
  transform: rotate(-90deg);
  transform-origin: 0 0;
  min-width: 100%;
  text-align: center;
  position: absolute;
  left: 0;
  font-size: 1em;
  white-space: nowrap;

  /* CLOSE - fast snap back */
  transition:
    top 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    font-size 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* OPEN - smooth reveal */
.container .card:hover .card__head {
  transition:
    top 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    font-size 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- 3. Hover states ---------- */
/* Block hover effects when body has hover-blocked class (during/after load) */
body.hover-blocked .container .card:hover {
  flex-grow: 1;
  transition: none;
}

body.hover-blocked .container .card:hover img {
  filter: grayscale(100%);
}

body.hover-blocked .container .card:hover .card__head {
  top: auto;
  color: #000;
  background: rgba(255, 30, 173, .90);
  font-size: 1em;
  transform: rotate(-90deg);
}

.container .card:hover {
  flex-grow: 20;
  /* OPEN transition - slower & smoother */
  transition: flex-grow 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.container .card:hover img {
  filter: grayscale(0);
}

.container .card:hover .card__head {
  top: calc(100% - 2em);
  color: #fff;
  background: rgba(0, 0, 0, .5);
  font-size: 2em;
  transform: rotate(0deg);
}

/* ---------- 4. Motion‑reduced fallback ---------- */
@media (prefers-reduced-motion: reduce) {

  .container .card,
  .container .card:hover,
  .container.visible .card,
  .container.visible .card:nth-child(1),
  .container.visible .card:nth-child(2),
  .container.visible .card:nth-child(3),
  .container.visible .card:nth-child(4),
  .container.visible .card:nth-child(5) {
    transition: none;
    animation: none;
    opacity: 1;
  }

  .container .card:hover {
    flex-grow: 4;
    /* smaller jump to avoid jarring layout shift */
  }

  .container .card img,
  .container .card:hover img {
    transition: none;
  }

  .container .card .card__head,
  .container .card:hover .card__head {
    transition: none;
  }
}