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

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
  font-family: Arial, sans-serif;
}

.icon-showcase {
  text-align: center;
}

.app-icon {
  display: block;
  text-decoration: none;
  width: 180px;
  height: 180px;
  margin: 0 auto 20px;
  padding: 30px;
  background: linear-gradient(145deg, #222, #333);
  border-radius: 40px;
  box-shadow: 
    0 10px 30px rgba(0,0,0,0.5),
    0 0 20px rgba(0,255,200,0.2);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
}

.diamond-icon {
  width: 100%;
  height: 100%;
}

.diamond {
  transform-origin: center;
  animation: diamondShine 4s ease-in-out infinite;
}

.star {
  transform-origin: center;
  animation: starGlow 2s ease-in-out infinite;
}

.stars g:nth-child(2) {
  animation-delay: 0.3s;
}

.stars g:nth-child(3) {
  animation-delay: 0.6s;
}

@keyframes diamondShine {
  0%, 100% {
    filter: brightness(1) drop-shadow(0 0 10px rgba(0,255,150,0.3));
    transform: scale(1);
  }
  50% {
    filter: brightness(1.4) drop-shadow(0 0 25px rgba(0,255,150,0.6));
    transform: scale(1.02);
  }
}

@keyframes starGlow {
  0%, 100% {
    opacity: 0.8;
    filter: drop-shadow(0 0 3px rgba(255,255,255,0.6));
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.9));
  }
}

h1 {
  color: white;
  font-size: 24px;
  text-shadow: 0 2px 10px rgba(0,255,200,0.3);
  margin-top: 20px;
}

.app-icon:hover {
  transform: scale(1.05);
  box-shadow: 
    0 15px 40px rgba(0,0,0,0.6),
    0 0 30px rgba(0,255,200,0.3);
}

.app-icon:hover .diamond {
  animation: diamondShine 2s ease-in-out infinite;
}

.app-icon:hover .star {
  animation: starGlow 1s ease-in-out infinite;
}

.facets line, .facets path {
  animation: facetShine 5s ease-in-out infinite;
  stroke-width: 0.8;
}

@keyframes facetShine {
  0%, 100% {
    stroke: rgba(255,255,255,0.3);
  }
  25% {
    stroke: rgba(255,255,255,0.7);
  }
  50% {
    stroke: rgba(255,255,255,0.4);
  }
  75% {
    stroke: rgba(255,255,255,0.6);
  }
}

.crystal-highlight {
  animation: crystalGlow 4s ease-in-out infinite;
  opacity: 0.5;
}

@keyframes crystalGlow {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.6;
  }
}

.internal-reflection {
  animation: reflectionMove 6s ease-in-out infinite;
}

@keyframes reflectionMove {
  0%, 100% {
    opacity: 0.2;
    transform: translateX(0) translateY(0);
  }
  25% {
    opacity: 0.4;
    transform: translateX(2px) translateY(-1px);
  }
  50% {
    opacity: 0.3;
    transform: translateX(-1px) translateY(2px);
  }
  75% {
    opacity: 0.5;
    transform: translateX(1px) translateY(-2px);
  }
}

.diamond path.facet-plane {
  animation: facetPlaneShine 6s ease-in-out infinite;
}

@keyframes facetPlaneShine {
  0%, 100% {
    opacity: 0.2;
    filter: brightness(1);
  }
  25% {
    opacity: 0.4;
    filter: brightness(1.3);
  }
  50% {
    opacity: 0.3;
    filter: brightness(1.1);
  }
  75% {
    opacity: 0.5;
    filter: brightness(1.4);
  }
}

/* Update animation for full diamond coverage */
@keyframes patternShift {
  0%, 100% {
    opacity: 0.2;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(1.02);
  }
}

.triangle-pattern {
  animation: patternShift 4s ease-in-out infinite;
  mix-blend-mode: soft-light;
}

.fractal-layer {
  animation: patternShift 4s ease-in-out infinite reverse;
  animation-delay: -2s;
  mix-blend-mode: overlay;
}

.fractal-layer-2 {
  animation: patternShift 3s ease-in-out infinite;
  animation-delay: -1s;
  mix-blend-mode: overlay;
}

/* Add new product SVG styling */
.product-img {
  background: linear-gradient(145deg, rgba(0,255,150,0.1), rgba(0,180,100,0.05));
  position: relative;
  overflow: hidden;
}

.product-img::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 5 L90 25 L90 75 L50 95 L10 75 L10 25 Z' fill='rgba(0,255,150,0.1)' stroke='rgba(0,255,150,0.3)' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
}

.plushie::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M20 80 Q50 95 80 80 Q95 60 80 40 Q50 20 20 40 Q5 60 20 80' fill='rgba(0,255,150,0.1)' stroke='rgba(0,255,150,0.3)' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
}

.keychain::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='30' r='20' fill='rgba(0,255,150,0.1)' stroke='rgba(0,255,150,0.3)' stroke-width='2'/%3E%3Cpath d='M50 50 L50 90' stroke='rgba(0,255,150,0.3)' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
}

.shirt::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M20 20 L80 20 L90 40 L70 40 L70 90 L30 90 L30 40 L10 40 Z' fill='rgba(0,255,150,0.1)' stroke='rgba(0,255,150,0.3)' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
}

.wristband::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M20 40 Q50 30 80 40 Q90 50 80 60 Q50 70 20 60 Q10 50 20 40' fill='rgba(0,255,150,0.1)' stroke='rgba(0,255,150,0.3)' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
}

.headband::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M10 45 Q50 35 90 45 Q50 55 10 45' fill='rgba(0,255,150,0.1)' stroke='rgba(0,255,150,0.3)' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
}

.beanie::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M20 80 Q50 95 80 80 Q95 60 80 40 Q50 20 20 40 Q5 60 20 80' fill='rgba(0,255,150,0.1)' stroke='rgba(0,255,150,0.3)' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
}

.cap::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M10 50 Q50 30 90 50 L80 70 Q50 85 20 70 Z' fill='rgba(0,255,150,0.1)' stroke='rgba(0,255,150,0.3)' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
}

.pennant::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M10 10 L90 10 L50 90 Z' fill='rgba(0,255,150,0.1)' stroke='rgba(0,255,150,0.3)' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Enhance product card hover effects */
.product-card:hover .product-img::before {
  transform: scale(1.1);
  filter: drop-shadow(0 0 10px rgba(0,255,150,0.3));
}

/* Add animated background pattern */
.product-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, 
    transparent 0%,
    rgba(0,255,150,0.05) 25%,
    transparent 50%,
    rgba(0,255,150,0.05) 75%,
    transparent 100%
  );
  background-size: 200% 200%;
  animation: shimmer 3s infinite linear;
  pointer-events: none;
}

@keyframes shimmer {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 200% 200%;
  }
}