/* Morphing Shapes - CSS Zen Garden */
/* Showcases: clip-path animations, polygon morphing, CSS custom properties */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --color-1: #ff006e;
  --color-2: #8338ec;
  --color-3: #3a86ff;
  --color-4: #06ffa5;
  --color-5: #ffbe0b;
  --color-6: #fb5607;
  --color-7: #ff85a1;
  --color-8: #00f5d4;
  --bg-dark: #0a0a1a;
  --text-light: rgba(255, 255, 255, 0.9);
  --text-muted: rgba(255, 255, 255, 0.6);
}

body {
  min-height: 100vh;
  background: var(--bg-dark);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: var(--text-light);
  overflow-x: hidden;
}

.canvas {
  position: relative;
  min-height: 100vh;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  overflow: hidden;
}

/* Base shape styles */
.shape {
  position: fixed;
  opacity: 0.7;
  mix-blend-mode: screen;
  will-change: clip-path;
  transition: clip-path 0.3s ease;
}

/* Shape 1 - Large morphing triangle to hexagon */
.shape-1 {
  width: min(500px, 80vw);
  height: min(500px, 80vw);
  top: 10%;
  left: -10%;
  background: linear-gradient(135deg, var(--color-1), var(--color-2));
  animation: morph1 8s ease-in-out infinite;
}

@keyframes morph1 {
  0%, 100% {
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  }
  25% {
    clip-path: polygon(50% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  }
  50% {
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  }
  75% {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  }
}

/* Shape 2 - Star morphing */
.shape-2 {
  width: min(400px, 70vw);
  height: min(400px, 70vw);
  top: 5%;
  right: -5%;
  background: linear-gradient(45deg, var(--color-3), var(--color-4));
  animation: morph2 10s ease-in-out infinite;
}

@keyframes morph2 {
  0%, 100% {
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  }
  33% {
    clip-path: polygon(50% 5%, 55% 40%, 90% 40%, 60% 60%, 75% 95%, 50% 75%, 25% 95%, 40% 60%, 10% 40%, 45% 40%);
  }
  66% {
    clip-path: polygon(50% 0%, 65% 30%, 100% 30%, 70% 55%, 85% 100%, 50% 70%, 15% 100%, 30% 55%, 0% 30%, 35% 30%);
  }
}

/* Shape 3 - Square to diamond to octagon */
.shape-3 {
  width: min(350px, 60vw);
  height: min(350px, 60vw);
  bottom: 20%;
  left: 15%;
  background: linear-gradient(180deg, var(--color-5), var(--color-6));
  animation: morph3 7s ease-in-out infinite;
}

@keyframes morph3 {
  0%, 100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  25% {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  }
  50% {
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  }
  75% {
    clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
  }
}

/* Shape 4 - Organic blob-like morphing */
.shape-4 {
  width: min(300px, 50vw);
  height: min(300px, 50vw);
  bottom: 10%;
  right: 10%;
  background: linear-gradient(225deg, var(--color-7), var(--color-8));
  animation: morph4 12s ease-in-out infinite;
}

@keyframes morph4 {
  0%, 100% {
    clip-path: polygon(50% 0%, 80% 10%, 100% 40%, 95% 70%, 70% 100%, 30% 95%, 5% 70%, 0% 35%, 20% 10%);
  }
  25% {
    clip-path: polygon(40% 5%, 70% 0%, 100% 30%, 90% 60%, 80% 100%, 40% 90%, 0% 70%, 10% 40%, 30% 20%);
  }
  50% {
    clip-path: polygon(60% 0%, 90% 20%, 100% 50%, 85% 80%, 60% 100%, 20% 85%, 0% 50%, 15% 20%, 45% 5%);
  }
  75% {
    clip-path: polygon(45% 0%, 85% 15%, 100% 45%, 90% 75%, 65% 95%, 25% 100%, 5% 65%, 0% 30%, 25% 5%);
  }
}

/* Shape 5 - Pentagon morphing */
.shape-5 {
  width: min(250px, 45vw);
  height: min(250px, 45vw);
  top: 40%;
  left: 5%;
  background: linear-gradient(90deg, var(--color-2), var(--color-3));
  animation: morph5 9s ease-in-out infinite;
  opacity: 0.6;
}

@keyframes morph5 {
  0%, 100% {
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  }
  33% {
    clip-path: polygon(50% 10%, 95% 35%, 78% 95%, 22% 95%, 5% 35%);
  }
  66% {
    clip-path: polygon(50% 5%, 100% 45%, 85% 100%, 15% 100%, 0% 45%);
  }
}

/* Shape 6 - Arrow morphing */
.shape-6 {
  width: min(200px, 35vw);
  height: min(200px, 35vw);
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(315deg, var(--color-4), var(--color-5));
  animation: morph6 6s ease-in-out infinite;
  opacity: 0.5;
}

@keyframes morph6 {
  0%, 100% {
    clip-path: polygon(50% 0%, 100% 50%, 75% 50%, 75% 100%, 25% 100%, 25% 50%, 0% 50%);
  }
  50% {
    clip-path: polygon(50% 0%, 100% 100%, 50% 75%, 0% 100%);
  }
}

/* Shape 7 - Cross morphing */
.shape-7 {
  width: min(280px, 50vw);
  height: min(280px, 50vw);
  top: 60%;
  right: 25%;
  background: linear-gradient(60deg, var(--color-1), var(--color-4));
  animation: morph7 11s ease-in-out infinite;
  opacity: 0.5;
}

@keyframes morph7 {
  0%, 100% {
    clip-path: polygon(35% 0%, 65% 0%, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0% 65%, 0% 35%, 35% 35%);
  }
  50% {
    clip-path: polygon(40% 5%, 60% 5%, 60% 40%, 95% 40%, 95% 60%, 60% 60%, 60% 95%, 40% 95%, 40% 60%, 5% 60%, 5% 40%, 40% 40%);
  }
}

/* Shape 8 - Small accent shape */
.shape-8 {
  width: min(150px, 25vw);
  height: min(150px, 25vw);
  bottom: 40%;
  left: 40%;
  background: linear-gradient(135deg, var(--color-6), var(--color-7));
  animation: morph8 5s ease-in-out infinite;
  opacity: 0.6;
}

@keyframes morph8 {
  0%, 100% {
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  }
  33% {
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
  }
  66% {
    clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
  }
}

/* Content styles */
.content {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 800px;
}

header h1 {
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 200;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--color-1), var(--color-3), var(--color-4));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 5s ease-in-out infinite;
  background-size: 200% auto;
}

@keyframes shimmer {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}

.tagline {
  font-size: clamp(0.9rem, 2vw, 1.2rem);
  color: var(--text-muted);
  letter-spacing: 0.2em;
  margin-top: 1rem;
  font-style: italic;
}

main {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding: 2rem 0;
}

.text-block {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  padding: 2rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.text-block h2 {
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  font-weight: 300;
  margin-bottom: 1rem;
  color: var(--color-4);
}

.text-block p {
  font-size: clamp(0.9rem, 2vw, 1.1rem);
  line-height: 1.8;
  color: var(--text-muted);
}

footer {
  padding-top: 2rem;
}

footer p {
  font-size: 0.85rem;
  color: var(--text-muted);
  letter-spacing: 0.1em;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .canvas {
    padding: 1rem;
    gap: 2rem;
  }

  .shape {
    opacity: 0.5;
  }

  .text-block {
    padding: 1.5rem;
  }

  header h1 {
    letter-spacing: 0.15em;
  }
}

@media (max-width: 480px) {
  .shape-5,
  .shape-6,
  .shape-7,
  .shape-8 {
    display: none;
  }

  .canvas {
    padding: 0.75rem;
  }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .shape,
  header h1 {
    animation: none;
  }

  .shape-1 {
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  }

  .shape-2 {
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  }

  .shape-3 {
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  }

  .shape-4 {
    clip-path: polygon(50% 0%, 80% 10%, 100% 40%, 95% 70%, 70% 100%, 30% 95%, 5% 70%, 0% 35%, 20% 10%);
  }
}