feat: docs.pivoine.art

Projects/docs.pivoine.art/components/icons/PivoineDocsIcon.css

@@ -0,0 +1,477 @@
+/* Pivoine Docs Icon Styles */
+
+.pivoine-docs-icon-wrapper {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  cursor: pointer;
+  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+  transform-style: preserve-3d;
+}
+
+.pivoine-docs-icon-wrapper:not(.is-interactive) {
+  cursor: default;
+}
+
+.pivoine-docs-icon {
+  width: 100%;
+  height: 100%;
+  display: block;
+  filter: drop-shadow(0 10px 40px rgba(168, 85, 247, 0.3));
+  transition: filter 0.4s ease;
+}
+
+/* Background pulse */
+.bg-circle {
+  animation: bg-pulse 4s ease-in-out infinite;
+}
+
+/* CLOSED STATE - Petals start small and close to center */
+.outer-petal {
+  transform-origin: 128px 128px;
+  transform: scale(0.3);
+  opacity: 0.5;
+  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.middle-petal {
+  transform-origin: 128px 128px;
+  transform: scale(0.4);
+  opacity: 0.6;
+  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s;
+}
+
+.inner-petal {
+  transform-origin: 128px 128px;
+  transform: scale(0.5);
+  opacity: 0.7;
+  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s;
+}
+
+/* Non-interactive version stays slightly more open */
+.pivoine-docs-icon-wrapper:not(.is-interactive) .outer-petal {
+  transform: scale(0.85);
+  opacity: 0.85;
+}
+
+.pivoine-docs-icon-wrapper:not(.is-interactive) .middle-petal {
+  transform: scale(0.88);
+  opacity: 0.9;
+}
+
+.pivoine-docs-icon-wrapper:not(.is-interactive) .inner-petal {
+  transform: scale(0.9);
+  opacity: 0.95;
+}
+
+/* Sparkles twinkle */
+.sparkle {
+  animation: twinkle 2s ease-in-out infinite;
+}
+
+.sparkle-1 {
+  animation-delay: 0s;
+}
+
+.sparkle-2 {
+  animation-delay: 0.5s;
+}
+
+.sparkle-3 {
+  animation-delay: 1s;
+}
+
+.sparkle-4 {
+  animation-delay: 1.5s;
+}
+
+/* Particles orbit */
+.particle {
+  animation: orbit 8s linear infinite;
+  transform-origin: 128px 128px;
+}
+
+.particle-1 {
+  animation-delay: 0s;
+}
+
+.particle-2 {
+  animation-delay: 2s;
+}
+
+.particle-3 {
+  animation-delay: 4s;
+}
+
+.particle-4 {
+  animation-delay: 6s;
+}
+
+/* Center circle pulse */
+.center-circle {
+  animation: center-pulse 3s ease-in-out infinite;
+}
+
+/* Pages subtle movement */
+.page {
+  transform-origin: center;
+  animation: page-float 3s ease-in-out infinite;
+}
+
+.page-1 {
+  animation-delay: 0s;
+}
+
+.page-2 {
+  animation-delay: 0.3s;
+}
+
+.page-3 {
+  animation-delay: 0.6s;
+}
+
+/* Text lines appear */
+.text-line {
+  stroke-dasharray: 30;
+  stroke-dashoffset: 30;
+  animation: line-appear 2s ease-out forwards;
+}
+
+.line-1 {
+  animation-delay: 0.2s;
+}
+
+.line-2 {
+  animation-delay: 0.4s;
+}
+
+.line-3 {
+  animation-delay: 0.6s;
+}
+
+.line-4 {
+  animation-delay: 0.8s;
+}
+
+.line-5 {
+  animation-delay: 1s;
+}
+
+/* HOVER - BLOOM OPEN! */
+.pivoine-docs-icon-wrapper.is-interactive:hover {
+  transform: scale(1.08) translateY(-8px);
+}
+
+.pivoine-docs-icon-wrapper.is-interactive:hover .pivoine-docs-icon {
+  filter: drop-shadow(0 20px 60px rgba(168, 85, 247, 0.6));
+}
+
+/* Petals bloom open on hover */
+.pivoine-docs-icon-wrapper.is-interactive:hover .outer-petal {
+  transform: scale(1);
+  opacity: 0.85;
+  filter: url(#intense-glow);
+}
+
+.pivoine-docs-icon-wrapper.is-interactive:hover .middle-petal {
+  transform: scale(1);
+  opacity: 0.9;
+  filter: url(#intense-glow);
+}
+
+.pivoine-docs-icon-wrapper.is-interactive:hover .inner-petal {
+  transform: scale(1);
+  opacity: 0.95;
+  filter: url(#intense-glow);
+}
+
+.pivoine-docs-icon-wrapper.is-interactive:hover .center-circle {
+  animation: center-glow 1s ease-in-out infinite;
+}
+
+.pivoine-docs-icon-wrapper.is-interactive:hover .sparkle {
+  animation: sparkle-burst 0.8s ease-out infinite;
+}
+
+.pivoine-docs-icon-wrapper.is-interactive:hover .page {
+  animation: page-fan 0.8s ease-out forwards;
+}
+
+/* Click effects */
+.pivoine-docs-icon-wrapper.is-clicked {
+  animation: icon-bounce 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.pivoine-docs-icon-wrapper.is-clicked .pivoine-docs-icon {
+  animation: icon-spin 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
+  filter: drop-shadow(0 25px 80px rgba(168, 85, 247, 0.9));
+}
+
+.pivoine-docs-icon-wrapper.is-clicked .petal {
+  animation: petal-explode 0.8s ease-out;
+}
+
+.pivoine-docs-icon-wrapper.is-clicked .center-circle {
+  animation: center-burst 0.8s ease-out;
+}
+
+/* Ripple effect */
+.ripple-effect {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(168, 85, 247, 0.6) 0%, rgba(168, 85, 247, 0) 70%);
+  transform: translate(-50%, -50%) scale(0);
+  animation: ripple-expand 1s ease-out;
+  pointer-events: none;
+}
+
+/* Label */
+.icon-label {
+  margin-top: 0.5rem;
+}
+
+.label-text {
+  font-size: 1.25rem;
+  font-weight: 700;
+  background: linear-gradient(135deg, #a855f7, #ec4899);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: label-shimmer 3s ease-in-out infinite;
+}
+
+/* Keyframes */
+@keyframes bg-pulse {
+  0%,
+  100% {
+    opacity: 0.4;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.7;
+    transform: scale(1.05);
+  }
+}
+
+@keyframes twinkle {
+  0%,
+  100% {
+    opacity: 0.4;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.3);
+  }
+}
+
+@keyframes orbit {
+  from {
+    transform: rotate(0deg) translateX(80px) rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg) translateX(80px) rotate(-360deg);
+  }
+}
+
+@keyframes center-pulse {
+  0%,
+  100% {
+    opacity: 0.6;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.15);
+  }
+}
+
+@keyframes page-float {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-2px);
+  }
+}
+
+@keyframes line-appear {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes center-glow {
+  0%,
+  100% {
+    opacity: 0.8;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.2);
+    filter: url(#intense-glow);
+  }
+}
+
+@keyframes sparkle-burst {
+  0%,
+  100% {
+    opacity: 0.8;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.8);
+  }
+}
+
+@keyframes page-fan {
+  0% {
+    transform: translateY(0) rotate(0deg);
+  }
+  100% {
+    transform: translateY(-3px) rotate(2deg);
+  }
+}
+
+@keyframes icon-bounce {
+  0% {
+    transform: scale(1) translateY(0) rotateZ(0deg);
+  }
+  30% {
+    transform: scale(0.9) translateY(0) rotateZ(0deg);
+  }
+  60% {
+    transform: scale(1.15) translateY(-15px) rotateZ(180deg);
+  }
+  80% {
+    transform: scale(0.95) translateY(0) rotateZ(360deg);
+  }
+  100% {
+    transform: scale(1) translateY(0) rotateZ(360deg);
+  }
+}
+
+@keyframes icon-spin {
+  0% {
+    transform: perspective(1000px) rotateY(0deg);
+  }
+  50% {
+    transform: perspective(1000px) rotateY(180deg);
+  }
+  100% {
+    transform: perspective(1000px) rotateY(360deg);
+  }
+}
+
+@keyframes petal-explode {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.3);
+    opacity: 0.8;
+    filter: url(#intense-glow);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+    filter: url(#petal-glow);
+  }
+}
+
+@keyframes center-burst {
+  0% {
+    transform: scale(1);
+    opacity: 0.8;
+  }
+  50% {
+    transform: scale(1.8);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0.8;
+  }
+}
+
+@keyframes ripple-expand {
+  0% {
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(3);
+    opacity: 0;
+  }
+}
+
+@keyframes label-shimmer {
+  0%,
+  100% {
+    filter: brightness(1);
+  }
+  50% {
+    filter: brightness(1.3);
+  }
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .pivoine-docs-icon-wrapper.is-interactive:hover {
+    transform: scale(1.05) translateY(-4px);
+  }
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .pivoine-docs-icon-wrapper,
+  .pivoine-docs-icon,
+  .petal,
+  .sparkle,
+  .particle,
+  .center-circle,
+  .page,
+  .text-line,
+  .ripple-effect,
+  .label-text {
+    animation: none !important;
+    transition: none !important;
+  }
+
+  .pivoine-docs-icon-wrapper.is-interactive:hover {
+    transform: scale(1.03);
+  }
+
+  /* Show petals in semi-open state for reduced motion */
+  .outer-petal {
+    transform: scale(0.85);
+    opacity: 0.85;
+  }
+
+  .middle-petal {
+    transform: scale(0.88);
+    opacity: 0.9;
+  }
+
+  .inner-petal {
+    transform: scale(0.9);
+    opacity: 0.95;
+  }
+}
+
+/* Touch devices */
+@media (hover: none) and (pointer: coarse) {
+  .pivoine-docs-icon-wrapper.is-interactive:active {
+    transform: scale(0.95);
+  }
+}