:root {
  --tri-size: clamp(200px, 25vw, 300px);
  --circle-size: clamp(150px, 12vw, 200px);
}

body {
  margin: 0;
  height: 100vh;
  background-color: #09090b;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

.container {
  position: relative;
  width: 90vw;
  height: 90vh;

  /* ---- Perspective needed for 3D flip ---- */
  perspective: 1000px;
}

.bg-circle {
  position: absolute;
  width: min(max(70vw, 500px), 800px);
  height: min(max(70vw, 500px), 800px);
  border-radius: 50%;
  border: 4px solid #0c0f1c;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.venn-container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  max-width: 400px;
  transform: translate(-50%, -50%);
  z-index: 0;
}

.venn-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ------------------------ */
/* TITLE + SUBTITLE STACK   */
/* ------------------------ */
.logo-container {
  position: absolute;
  top: 53%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 3;
}

.logo {
  width: clamp(400px, 60vw, 700px);
  height: auto;
}

h1 {
  font-size: clamp(48px, 10vw, 140px);
  margin: 0;
}

h2 {
  margin: 0.2em 0 0 0;
  font-size: clamp(18px, 3vw, 40px);
  white-space: nowrap;
}

h1:hover,
h2:hover {
  cursor: default;
}

/* ------------------------ */
/* SHAPES                   */
/* ------------------------ */

a.shape {
  position: absolute;
  width: var(--tri-size);
  height: var(--tri-size);
  text-decoration: none;
  color: white;
  font-size: clamp(18px, 2vw, 32px);
  z-index: 4;

  top: 50%;
  left: 50%;

  transform-style: preserve-3d;
  transition: transform 0.6s ease;

  transform: translate(-50%, -50%);
}

/* Circle uses its own size */
a.circle-top {
  width: var(--circle-size);
  height: var(--circle-size);
}

/* SVG behind text */
a.shape.svg {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;

  backface-visibility: hidden;
}

.hitbox {
  position: absolute;
  width: 160px;
  height: 160px;
  transform: translate(-50%, -50%);
  z-index: 4;

  background: none;
  pointer-events: auto;

  animation: float-hitbox 6s ease-in-out infinite;
}

.hitbox:hover .shape {
  transform: translate(-50%, -50%) rotateX(180deg);
}

/* ------------------------ */
/* TEXT INSIDE SHAPES        */
/* ------------------------ */

a.shape span {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  color: #a8b9d2;

  backface-visibility: hidden;
}

/* Top triangles → text tight to bottom edge */
.tri-top-left span,
.tri-top-right span {
  bottom: 20%;
}

/* Bottom triangles → text tight to top edge */
.tri-bottom-left span,
.tri-bottom-right span {
  top: 25%;
}

/* Circle text centered naturally */
.circle-top span {
  top: 45%;
  transform: translate(-50%, -50%);
}

/* ------------------------ */
/* SHAPE POSITIONS          */
/* ------------------------ */

.circle-top-hitbox {
  top: 14%;
  left: 50%;
}

.tri-top-left-hitbox {
  top: 18%;
  left: 12%;
}

.tri-top-right-hitbox {
  top: 18%;
  left: 88%;
}

.tri-bottom-left-hitbox {
  top: 85%;
  left: 25%;
}

.tri-bottom-right-hitbox {
  top: 85%;
  left: 75%;
}

/* Rotate ONLY the SVGs for bottom triangles */
.tri-bottom-left svg,
.tri-bottom-right svg {
  transform: rotate(180deg);
}

/* ------------------------ */
/* RESPONSIVE POSITIONING   */
/* ------------------------ */
@media (max-width: 900px) {
  .logo-container {
    top: 50%;
  }
  .tri-top-left-hitbox {
    left: 22%;
    top: 20%;
  }
  .tri-top-right-hitbox {
    left: 78%;
    top: 20%;
  }
  .tri-bottom-left-hitbox {
    left: 30%;
    top: 78%;
  }
  .tri-bottom-right-hitbox {
    left: 70%;
    top: 78%;
  }
}

@media (max-width: 600px) {
  .tri-top-left-hitbox {
    left: 25%;
    top: 22%;
  }
  .tri-top-right-hitbox {
    left: 75%;
    top: 22%;
  }
  .tri-bottom-left-hitbox {
    left: 30%;
    top: 74%;
  }
  .tri-bottom-right-hitbox {
    left: 70%;
    top: 74%;
  }
}

@media (max-width: 450px) {
  .tri-top-left-hitbox {
    left: 30%;
    top: 25%;
  }
  .tri-top-right-hitbox {
    left: 70%;
    top: 25%;
  }
  .tri-bottom-left-hitbox {
    left: 30%;
    top: 72%;
  }
  .tri-bottom-right-hitbox {
    left: 70%;
    top: 72%;
  }
}

/* -------------------------------------- */
/* FLOATING ANIMATION FOR SHAPES          */
/* -------------------------------------- */

@keyframes float-hitbox {
  0% {
    transform: translate(-50%, -50%) translate(0, 0);
  }
  25% {
    transform: translate(-50%, -50%) translate(4px, -6px);
  }
  50% {
    transform: translate(-50%, -50%) translate(-4px, 3px);
  }
  75% {
    transform: translate(-50%, -50%) translate(3px, 5px);
  }
  100% {
    transform: translate(-50%, -50%) translate(0, 0);
  }
}

/* Give each shape a slightly different timing for organic motion */
.circle-top-hitbox {
  animation-duration: 7s;
  animation-delay: 0.2s;
}
.tri-top-left-hitbox {
  animation-duration: 6.5s;
  animation-delay: -1s;
}
.tri-top-right-hitbox {
  animation-duration: 7.5s;
  animation-delay: 0.5s;
}
.tri-bottom-left-hitbox {
  animation-duration: 6.8s;
  animation-delay: -0.5s;
}
.tri-bottom-right-hitbox {
  animation-duration: 7.2s;
  animation-delay: -1.3s;
}