Upload README.md

README.md

@@ -68,19 +68,23 @@ body {
 
 /* Logo area */
 .logo-stage {
+  position: relative;
+  isolation: isolate;
+
   display: flex;
   align-items: center;
   justify-content: center;
+
   min-height: 360px;
   margin: 0 auto 1.5rem;
   overflow: visible;
   cursor: pointer;
+
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
 }
 
-/*
-  The wrapper owns the smooth shrink/rotation transition.
-  This avoids conflicts with the continuously animated vortex rings.
-*/
 .logo-vortex {
   position: relative;
   display: grid;
@@ -88,51 +92,76 @@ body {
   width: fit-content;
   margin: 0 auto;
 
-  border-radius: 0.5rem;
+  border-radius: 0.75rem;
   outline: 0 solid transparent;
   outline-offset: 0;
 
   transform:
-    perspective(900px)
+    perspective(1000px)
     translateZ(0)
     scale(1)
-    rotate(0deg)
-    rotateX(0deg);
+    rotate(0deg);
 
   transform-origin: center;
   will-change: transform, filter, border-radius, box-shadow, outline-offset;
 
+  /*
+    The return is delayed by the same duration as the entrance.
+    Leaving early therefore does not interrupt the collapse/spin.
+  */
   transition:
-    transform 760ms cubic-bezier(0.16, 1, 0.3, 1) 760ms,
-    filter 620ms ease 760ms,
-    border-radius 620ms ease 760ms,
-    box-shadow 620ms ease 760ms,
-    outline 620ms ease 760ms,
-    outline-offset 620ms ease 760ms;
+    transform 720ms cubic-bezier(0.16, 1, 0.3, 1) 720ms,
+    filter 620ms ease 720ms,
+    border-radius 620ms ease 720ms,
+    box-shadow 620ms ease 720ms,
+    outline 620ms ease 720ms,
+    outline-offset 620ms ease 720ms;
 }
 
 .logo-vortex::before,
 .logo-vortex::after {
   content: "";
   position: absolute;
-  inset: -22px;
-  z-index: 0;
+  z-index: -1;
   pointer-events: none;
 
   border-radius: 50%;
-  border: 2px solid rgba(255, 255, 255, 0);
   opacity: 0;
 
-  transform: rotate(0deg) scale(0.82);
   transition:
-    opacity 360ms ease,
-    border-color 360ms ease,
-    transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
+    opacity 320ms ease 720ms,
+    transform 720ms cubic-bezier(0.16, 1, 0.3, 1) 720ms,
+    filter 420ms ease 720ms;
+}
+
+.logo-vortex::before {
+  inset: -34px;
+
+  border:
+    3px solid
+    rgba(255, 255, 255, 0.88);
+
+  border-left-color: rgba(255, 255, 255, 0.08);
+  border-right-color: rgba(255, 255, 255, 0.28);
+
+  filter:
+    drop-shadow(0 0 8px rgba(255, 255, 255, 0.75))
+    drop-shadow(0 0 22px rgba(255, 255, 255, 0.35));
+
+  transform: rotate(0deg) scale(0.78);
 }
 
 .logo-vortex::after {
-  inset: -42px;
-  border-style: dashed;
+  inset: -60px;
+
+  border:
+    2px dashed
+    rgba(255, 255, 255, 0.42);
+
+  filter:
+    drop-shadow(0 0 12px rgba(255, 255, 255, 0.28));
+
+  transform: rotate(0deg) scale(0.7);
 }
 
 .logo-image {
@@ -146,100 +175,117 @@ body {
   margin: 0 auto;
   object-fit: contain;
 
-  border-radius: 0.5rem;
+  border-radius: 0.75rem;
 
   filter: contrast(1.15);
 
-  transform: translateZ(0);
+  transform:
+    translateZ(0)
+    scale(1)
+    rotate(0deg);
+
   transform-origin: center;
+  will-change: transform, filter, border-radius;
 
   transition:
-    filter 620ms ease,
-    border-radius 620ms ease;
+    transform 720ms cubic-bezier(0.16, 1, 0.3, 1) 720ms,
+    filter 620ms ease 720ms,
+    border-radius 620ms ease 720ms;
+
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -webkit-user-drag: none;
+  pointer-events: none;
 }
 
 .logo-stage:hover .logo-vortex {
   border-radius: 50%;
-  transition-delay: 0s;
+  outline: 2px solid rgba(255, 255, 255, 0.88);
+  outline-offset: 18px;
 
   transform:
-    perspective(900px)
+    perspective(1000px)
     translateZ(0)
-    scale(0.42)
-    rotate(540deg)
-    rotateX(18deg);
-
-  outline: 2px solid rgba(255, 255, 255, 0.92);
-  outline-offset: 18px;
+    scale(0.46)
+    rotate(540deg);
 
   box-shadow:
     0 0 0 5px #000,
-    0 0 0 7px rgba(255, 255, 255, 0.96),
+    0 0 0 7px rgba(255, 255, 255, 0.92),
     0 0 0 15px #000,
-    0 0 0 17px rgba(255, 255, 255, 0.44),
-    0 0 38px 20px rgba(255, 255, 255, 0.34),
-    0 0 92px 34px rgba(255, 255, 255, 0.16);
+    0 0 0 17px rgba(255, 255, 255, 0.36),
+    0 0 42px 20px rgba(255, 255, 255, 0.28),
+    0 0 110px 42px rgba(255, 255, 255, 0.13);
+
+  transition-delay: 0s;
 }
 
 .logo-stage:hover .logo-image {
   border-radius: 50%;
 
+  transform:
+    translateZ(0)
+    scale(0.92)
+    rotate(-180deg);
+
   filter:
     grayscale(100%)
-    contrast(220%)
-    brightness(18%)
-    blur(8px)
+    contrast(245%)
+    brightness(15%)
+    blur(5px)
     drop-shadow(0 0 5px #fff)
-    drop-shadow(0 0 18px rgba(255, 255, 255, 0.8))
-    drop-shadow(0 0 45px rgba(255, 255, 255, 0.45));
+    drop-shadow(0 0 18px rgba(255, 255, 255, 0.72))
+    drop-shadow(0 0 42px rgba(255, 255, 255, 0.38));
+
+  transition-delay: 0s;
 }
 
 .logo-stage:hover .logo-vortex::before {
   opacity: 1;
-  border-color: rgba(255, 255, 255, 0.95);
-  animation: vortex-ring-forward 0.9s linear infinite;
+  transform: rotate(720deg) scale(1.08);
+  filter:
+    drop-shadow(0 0 10px rgba(255, 255, 255, 0.9))
+    drop-shadow(0 0 28px rgba(255, 255, 255, 0.48));
+
+  animation: singularity-ring 900ms linear 720ms infinite;
+  transition-delay: 0s;
 }
 
 .logo-stage:hover .logo-vortex::after {
   opacity: 0.72;
-  border-color: rgba(255, 255, 255, 0.48);
-  animation: vortex-ring-reverse 1.25s linear infinite;
-}
+  transform: rotate(-540deg) scale(1.18);
 
-@keyframes vortex-ring-forward {
-  0% {
-    transform: rotate(0deg) scale(0.84);
-  }
+  animation: singularity-ring-reverse 1.35s linear 720ms infinite;
+  transition-delay: 0s;
+}
 
-  50% {
-    transform: rotate(180deg) scale(1.08);
+@keyframes singularity-ring {
+  from {
+    transform: rotate(720deg) scale(1.08);
   }
 
-  100% {
-    transform: rotate(360deg) scale(0.84);
+  to {
+    transform: rotate(1080deg) scale(1.08);
   }
 }
 
-@keyframes vortex-ring-reverse {
-  0% {
-    transform: rotate(360deg) scale(1.08);
-  }
-
-  50% {
-    transform: rotate(180deg) scale(0.9);
+@keyframes singularity-ring-reverse {
+  from {
+    transform: rotate(-540deg) scale(1.18);
   }
 
-  100% {
-    transform: rotate(0deg) scale(1.08);
+  to {
+    transform: rotate(-900deg) scale(1.18);
   }
 }
 
-/* Benchmark remains centered and only scales slightly on hover. */
+/* Benchmark remains centered and enlarges substantially on hover. */
 .benchmark-image {
   display: block;
   position: static;
 
-  width: min(78%, 760px);
+  width: min(76%, 760px);
   height: auto;
   max-width: 100%;
   margin: 2.5rem auto;
@@ -248,14 +294,24 @@ body {
   border-radius: 0.5rem;
   outline: none;
 
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -webkit-user-drag: none;
+
   filter: none !important;
   transform: scale(1) !important;
   animation: none !important;
   box-shadow: none !important;
 
+  position: relative;
+  z-index: 1;
+  transform-origin: center;
+
   transition:
-    transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
-    box-shadow 320ms ease !important;
+    transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
+    box-shadow 420ms ease,
+    filter 420ms ease !important;
 }
 
 .benchmark-image:hover {
@@ -264,9 +320,13 @@ body {
   outline-offset: 0;
 
   filter: none !important;
-  transform: scale(1.045) !important;
+  z-index: 8;
+  transform: scale(1.28) !important;
   animation: none !important;
-  box-shadow: 0 18px 55px rgba(255, 255, 255, 0.08) !important;
+  filter: contrast(1.05) brightness(1.03) !important;
+  box-shadow:
+    0 24px 80px rgba(0, 0, 0, 0.55),
+    0 0 48px rgba(255, 255, 255, 0.08) !important;
 }
 
 p,
@@ -326,14 +386,12 @@ table {
 
 @media (prefers-reduced-motion: reduce) {
   .logo-vortex,
-  .logo-vortex:hover,
   .logo-vortex::before,
   .logo-vortex::after,
-  .logo-vortex:hover::before,
-  .logo-vortex:hover::after,
-  .logo-image {
-    animation: none;
-    transition: none;
+  .logo-image,
+  .benchmark-image {
+    animation: none !important;
+    transition: none !important;
   }
 }
 </style>