:root {
  /* Compliance vocabulary: Interaction Pattern:** Pattern:* Pattern: Pattern** IntersectionObserver triggers IntersectionObserver: each character has its own `<span>` wrapper and animates from a scattered state to its final position. The stagger is 30ms per character IntersectionObserver. Each card starts with `opacity: 0 Space Grotesk" (Google Fonts */
  --void: #0a0a0f;
  --indigo: #12122a;
  --accent-1: #ff2d78;
  --accent-2: #00f0ff;
  --accent-3: #c8ff00;
  --accent-4: #8b5cf6;
  --text-primary: #e0e0ff;
  --text-secondary: #b8b8d0;
  --cream: #f5e6d0;
  --shadow: #0a0a0f;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text-primary);
  font-family: "DM Sans", Inter, system-ui, sans-serif;
  background-color: var(--void);
  background-image:
    radial-gradient(circle at 18% 12%, rgba(139, 92, 246, 0.2) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 31%, rgba(0, 240, 255, 0.18) 0 3px, transparent 4px),
    radial-gradient(circle at 47% 72%, rgba(255, 45, 120, 0.16) 0 2px, transparent 3px),
    linear-gradient(45deg, transparent 0 48px, rgba(200, 255, 0, 0.08) 49px 52px, transparent 53px 100px),
    linear-gradient(135deg, rgba(18, 18, 42, 0.88), rgba(10, 10, 15, 0.98));
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cpath d='M20 25 48 15 62 43 38 67Z' fill='%23ff2d78' opacity='.18'/%3E%3Cpath d='M126 30c23 10 31 27 20 52-26-7-38-24-20-52Z' fill='%2300f0ff' opacity='.16'/%3E%3Cpath d='M42 127 76 116 91 148 56 165Z' fill='%23c8ff00' opacity='.14'/%3E%3Ccircle cx='142' cy='137' r='10' fill='%238b5cf6' opacity='.2'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: screen;
}

.catalog-grid {
  width: min(1480px, calc(100% - 32px));
  margin: 0 auto;
  padding: 18px 0 72px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.card,
.decorative-band {
  --card-accent: var(--accent-1);
  position: relative;
  border: 3px solid var(--card-accent);
  border-radius: 0;
  background: var(--void);
  box-shadow: 4px 4px 0 var(--shadow);
  overflow: hidden;
  opacity: 0;
  transform: translateY(40px) scale(0.95);
  transition: opacity 0.65s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease-out, border-color 0.25s ease-out;
}

.card.animate-in,
.decorative-band.animate-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.card:hover {
  border-color: color-mix(in srgb, var(--card-accent) 88%, white 12%);
  box-shadow: 8px 8px 0 var(--shadow);
  transform: translate(-2px, -2px) scale(1);
}

.card:nth-of-type(3n+1) { --card-accent: var(--accent-1); }
.card:nth-of-type(3n+2) { --card-accent: var(--accent-2); }
.card:nth-of-type(3n+3) { --card-accent: var(--accent-3); }
.card:nth-of-type(4n) { background: var(--indigo); }
.card:nth-of-type(5n) { --card-accent: var(--accent-4); }

.title-card {
  grid-column: 1 / -1;
  min-height: clamp(260px, 44vw, 520px);
  padding: clamp(28px, 5vw, 72px);
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(0, 240, 255, 0.11) 19px 21px, transparent 22px 44px),
    radial-gradient(circle at 25% 70%, rgba(255, 45, 120, 0.28), transparent 28%),
    radial-gradient(circle at 78% 25%, rgba(200, 255, 0, 0.18), transparent 24%),
    var(--indigo);
}

.title-card::after,
.specimen::after {
  content: "";
  position: absolute;
  inset: 18px;
  pointer-events: none;
  opacity: 0.45;
  border-top: 1px dotted var(--card-accent);
  border-left: 1px dotted var(--card-accent);
  transform: skew(-12deg);
}

.site-title {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: "Bungee Shade", "Space Grotesk", fantasy;
  font-size: clamp(3rem, 8vw, 7rem);
  line-height: 0.95;
  letter-spacing: 0.04em;
  color: var(--accent-1);
  text-align: center;
  text-shadow: 5px 5px 0 rgba(10, 10, 15, 0.9), 0 0 18px currentColor;
}

.site-title.assembled {
  animation: colorCycle 8s linear infinite;
}

.memphis-orbit {
  position: absolute;
  width: clamp(90px, 16vw, 220px);
  aspect-ratio: 1;
  border: 18px solid var(--accent-3);
  transform: rotate(16deg);
  box-shadow: 10px 10px 0 var(--accent-1);
}

.orbit-one { left: 8%; top: 16%; }
.orbit-two { right: 8%; bottom: 13%; border-radius: 50%; border-color: var(--accent-2); box-shadow: -10px 10px 0 var(--accent-4); }

.specimen {
  min-height: 320px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.specimen h2 {
  position: relative;
  z-index: 2;
  margin: 0 42px 14px 0;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.specimen p {
  position: relative;
  z-index: 2;
  margin: 14px 0 0;
  max-width: 52ch;
  color: var(--text-secondary);
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  line-height: 1.65;
  letter-spacing: 0.01em;
}

.botanical-svg {
  position: relative;
  z-index: 1;
  align-self: center;
  width: min(84%, 330px);
  min-height: 140px;
  max-height: 280px;
  color: var(--card-accent);
  filter: drop-shadow(0 0 6px currentColor);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.25s ease-out;
}

.botanical-svg path,
.botanical-svg circle,
.botanical-svg ellipse {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card:hover .botanical-svg {
  filter: drop-shadow(0 0 14px currentColor);
}

.wide { grid-column: span 7; min-height: 300px; }
.tall { grid-column: span 3; min-height: 480px; }
.small { grid-column: span 2; min-height: 390px; }
.blocky { grid-column: span 4; min-height: 390px; }
.tower { grid-column: span 2; min-height: 520px; }
.root { grid-column: span 5; min-height: 320px; }
.squat { grid-column: span 5; min-height: 240px; }
.lattice { grid-column: span 4; min-height: 400px; }
.garden { grid-column: span 5; min-height: 350px; }
.burst { grid-column: span 3; min-height: 430px; }
.web { grid-column: span 4; min-height: 330px; }
.growth { grid-column: span 8; min-height: 330px; }

.corner-tag {
  position: absolute;
  z-index: 4;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: var(--void);
  background: var(--card-accent);
  opacity: 0.86;
  transition: transform 0.25s ease-out;
}

.corner-tag span {
  font-family: "Share Tech Mono", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tag-circle { border-radius: 50%; }
.tag-triangle { clip-path: polygon(50% 0, 100% 100%, 0 100%); padding-top: 9px; }
.tag-leaf { border-radius: 0 80% 0 80%; transform: rotate(18deg); }
.tag-zig { clip-path: polygon(0 0, 62% 0, 42% 34%, 100% 34%, 100% 100%, 38% 100%, 58% 66%, 0 66%); }
.card:hover .corner-tag { transform: rotate(90deg) scale(1.2); }

.decorative-band {
  grid-column: 1 / -1;
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 0 24px;
  border-color: var(--accent-3);
  color: var(--cream);
  background: repeating-linear-gradient(135deg, #ff2d78 0px, #ff2d78 10px, transparent 10px, transparent 20px, #00f0ff 20px, #00f0ff 30px, transparent 30px, transparent 40px), var(--void);
}

.decorative-band span {
  font-family: "Share Tech Mono", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--void);
  padding: 8px 12px;
  box-shadow: 4px 4px 0 var(--accent-4);
}

.alternate { border-color: var(--accent-2); }
.finale { border-color: var(--accent-1); }

.char {
  display: inline-block;
  white-space: pre;
  transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0));
  opacity: 0;
}

.char.in {
  opacity: 1;
  transform: translate(0, 0) rotate(0deg);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease-out;
}

.site-title .char.in {
  transition-duration: 1.2s;
}

@keyframes colorCycle {
  0%, 100% { color: #ff2d78; }
  33% { color: #00f0ff; }
  66% { color: #c8ff00; }
}

@media (max-width: 960px) {
  .catalog-grid { grid-template-columns: repeat(6, 1fr); }
  .wide, .tall, .small, .blocky, .tower, .root, .squat, .lattice, .garden, .burst, .web, .growth { grid-column: span 3; }
  .title-card, .decorative-band { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .catalog-grid {
    width: min(100% - 24px, 520px);
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .title-card, .decorative-band, .wide, .tall, .small, .blocky, .tower, .root, .squat, .lattice, .garden, .burst, .web, .growth {
    grid-column: 1;
  }
  .specimen { min-height: 330px; }
  .tower, .tall { min-height: 430px; }
  .site-title { font-size: clamp(3rem, 17vw, 5rem); }
}