@cupcodev/ui 5.1.3 → 6.0.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cupcodev/ui",
   "private": false,
-  "version": "5.1.3",
+  "version": "6.0.1",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",

package/styles/global.css

@@ -696,22 +696,23 @@
 
   /* ===== Blob CTA Button (Webflow button-1) ===== */
   .cc-blob-cta {
-    --cc-blob-shell: linear-gradient(140deg, rgba(255, 255, 255, 0.64), rgba(248, 243, 255, 0.52));
-    --cc-blob-border: rgba(124, 91, 187, 0.26);
-    --cc-blob-shadow: 0 12px 26px -18px rgba(58, 42, 88, 0.45), 0 8px 20px -16px rgba(124, 91, 187, 0.5);
-    --cc-blob-shadow-hover: 0 16px 30px -18px rgba(58, 42, 88, 0.52), 0 10px 26px -16px rgba(124, 91, 187, 0.58);
-    --cc-blob-wrap-bg: rgba(255, 255, 255, 0.26);
-    --cc-blob-bg: linear-gradient(140deg, rgba(255, 255, 255, 0.62), rgba(246, 238, 255, 0.5));
-    --cc-blob-bg-hover: linear-gradient(140deg, rgba(255, 255, 255, 0.7), rgba(238, 224, 252, 0.56));
-    --cc-blob-bg-active: linear-gradient(140deg, rgba(255, 255, 255, 0.56), rgba(228, 210, 248, 0.48));
-    --cc-blob-label: hsl(var(--cc-ink, 261 35% 25%));
-    --cc-blob-glow-1: rgba(151, 90, 182, 0.38);
-    --cc-blob-glow-2: rgba(237, 30, 121, 0.23);
+    --cc-blob-shell: linear-gradient(140deg, rgba(244, 255, 249, 0.72), rgba(226, 255, 240, 0.56));
+    --cc-blob-border: rgba(24, 183, 101, 0.34);
+    --cc-blob-shadow: 0 12px 26px -18px rgba(17, 78, 54, 0.32), 0 10px 24px -16px rgba(24, 183, 101, 0.36);
+    --cc-blob-shadow-hover: 0 16px 30px -18px rgba(17, 78, 54, 0.38), 0 12px 28px -16px rgba(24, 183, 101, 0.42);
+    --cc-blob-wrap-bg: rgba(224, 255, 241, 0.34);
+    --cc-blob-bg: linear-gradient(140deg, rgba(255, 255, 255, 0.66), rgba(230, 255, 242, 0.52));
+    --cc-blob-bg-hover: linear-gradient(140deg, rgba(255, 255, 255, 0.72), rgba(208, 250, 227, 0.58));
+    --cc-blob-bg-active: linear-gradient(140deg, rgba(247, 255, 251, 0.58), rgba(191, 245, 217, 0.5));
+    --cc-blob-label: #114e36;
+    --cc-blob-glow-1: rgba(24, 183, 101, 0.28);
+    --cc-blob-glow-2: rgba(66, 255, 211, 0.2);
     --cc-blob-glow-opacity-1: 0.34;
     --cc-blob-glow-opacity-2: 0.24;
     --cc-blob-color-opacity: 0.88;
     --cc-blob-blur-md: var(--glass-blur-md, 16px);
     --cc-blob-blur-sm: var(--glass-blur-sm, 10px);
+    --cc-blob-radius: 9999px;
     --cc-blob-font: var(
       --font-display,
       "Tomorrow",
@@ -728,11 +729,13 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 160px;
-    height: 60px;
+    width: auto;
+    min-width: 0;
+    height: auto;
+    min-height: 0;
     border: 0;
-    border-radius: 12px;
-    padding: 0 16px;
+    border-radius: var(--cc-blob-radius);
+    padding: 10px 15px;
     cursor: pointer;
     background: var(--cc-blob-shell);
     color: var(--cc-blob-label);
@@ -752,7 +755,7 @@
   }
 
   .cc-blob-cta:focus-visible {
-    outline: 2px solid rgba(237, 30, 121, 0.55);
+    outline: 2px solid rgba(24, 183, 101, 0.45);
     outline-offset: 2px;
   }
 
@@ -770,33 +773,29 @@
   }
 
   .cc-blob-cta--sm {
-    width: 132px;
-    height: 50px;
-    border-radius: 10px;
+    border-radius: var(--cc-blob-radius);
   }
 
   .cc-blob-cta--md {
-    width: 160px;
-    height: 60px;
-    border-radius: 12px;
+    border-radius: var(--cc-blob-radius);
   }
 
   .cc-blob-cta--lg {
-    width: 184px;
-    height: 68px;
-    border-radius: 14px;
+    border-radius: var(--cc-blob-radius);
   }
 
   .cc-blob-cta__color-wrap {
     position: absolute;
     inset: 0;
     z-index: 0;
-    border-radius: inherit;
+    border-radius: var(--cc-blob-radius);
     background-color: var(--cc-blob-wrap-bg);
     border: 1px solid rgba(255, 255, 255, 0.65);
     backdrop-filter: blur(var(--cc-blob-blur-sm)) saturate(120%);
     -webkit-backdrop-filter: blur(var(--cc-blob-blur-sm)) saturate(120%);
     overflow: hidden;
+    clip-path: inset(0 round var(--cc-blob-radius));
+    -webkit-mask-image: -webkit-radial-gradient(white, black);
     pointer-events: none;
   }
 
@@ -807,13 +806,14 @@
     left: 50%;
     width: 97%;
     height: 95%;
-    border-radius: inherit;
+    border-radius: var(--cc-blob-radius);
     background: var(--cc-blob-bg);
     box-shadow:
       inset 0 1px 0 rgba(255, 255, 255, 0.7),
       0 4px 14px -14px rgba(58, 42, 88, 0.45);
     backdrop-filter: blur(var(--cc-blob-blur-sm));
     -webkit-backdrop-filter: blur(var(--cc-blob-blur-sm));
+    clip-path: inset(0 round var(--cc-blob-radius));
     transform: translate(-50%, -50%);
     transition: all 0.3s ease-in-out;
   }
@@ -868,19 +868,19 @@
   .cc-blob-cta__color--1 {
     top: -30%;
     left: -5%;
-    background-image: linear-gradient(112deg, #ff0f33d6, #ff6600db);
+    background-image: linear-gradient(112deg, #8dff4ed9, #18b765db);
   }
 
   .cc-blob-cta__color--2 {
     top: -30%;
     left: 29%;
-    background-image: linear-gradient(251deg, #07fc, #ad15ffe0);
+    background-image: linear-gradient(251deg, #42ffd3e0, #15d4ffe0);
   }
 
   .cc-blob-cta__color--3 {
     top: -30%;
     left: 8%;
-    background-image: linear-gradient(251deg, #7300ffd6, #e815ffd9);
+    background-image: linear-gradient(251deg, #7cff95d4, #15ff8fd9);
   }
 
   .cc-blob-cta:hover .cc-blob-cta__color--1,
@@ -899,28 +899,29 @@
   }
 
   .cc-blob-cta--secondary .cc-blob-cta__color--1 {
-    background-image: linear-gradient(112deg, #8dff4ed9, #18b765db);
+    background-image: linear-gradient(112deg, #ff0f33d6, #ff6600db);
   }
 
   .cc-blob-cta--secondary .cc-blob-cta__color--2 {
-    background-image: linear-gradient(251deg, #42ffd3e0, #15d4ffe0);
+    background-image: linear-gradient(251deg, #07fc, #ad15ffe0);
   }
 
   .cc-blob-cta--secondary .cc-blob-cta__color--3 {
-    background-image: linear-gradient(251deg, #7cff95d4, #15ff8fd9);
+    background-image: linear-gradient(251deg, #7300ffd6, #e815ffd9);
   }
 
   .cc-blob-cta--secondary {
-    --cc-blob-wrap-bg: rgba(224, 255, 241, 0.34);
-    --cc-blob-bg: linear-gradient(140deg, rgba(255, 255, 255, 0.66), rgba(230, 255, 242, 0.52));
-    --cc-blob-bg-hover: linear-gradient(140deg, rgba(255, 255, 255, 0.72), rgba(208, 250, 227, 0.58));
-    --cc-blob-bg-active: linear-gradient(140deg, rgba(247, 255, 251, 0.58), rgba(191, 245, 217, 0.5));
-    --cc-blob-label: #114e36;
-    --cc-blob-border: rgba(24, 183, 101, 0.34);
-    --cc-blob-shadow: 0 12px 26px -18px rgba(17, 78, 54, 0.32), 0 10px 24px -16px rgba(24, 183, 101, 0.36);
-    --cc-blob-shadow-hover: 0 16px 30px -18px rgba(17, 78, 54, 0.38), 0 12px 28px -16px rgba(24, 183, 101, 0.42);
-    --cc-blob-glow-1: rgba(24, 183, 101, 0.28);
-    --cc-blob-glow-2: rgba(66, 255, 211, 0.2);
+    --cc-blob-shell: linear-gradient(140deg, rgba(255, 255, 255, 0.64), rgba(248, 243, 255, 0.52));
+    --cc-blob-wrap-bg: rgba(255, 255, 255, 0.26);
+    --cc-blob-bg: linear-gradient(140deg, rgba(255, 255, 255, 0.62), rgba(246, 238, 255, 0.5));
+    --cc-blob-bg-hover: linear-gradient(140deg, rgba(255, 255, 255, 0.7), rgba(238, 224, 252, 0.56));
+    --cc-blob-bg-active: linear-gradient(140deg, rgba(255, 255, 255, 0.56), rgba(228, 210, 248, 0.48));
+    --cc-blob-label: hsl(var(--cc-ink, 261 35% 25%));
+    --cc-blob-border: rgba(124, 91, 187, 0.26);
+    --cc-blob-shadow: 0 12px 26px -18px rgba(58, 42, 88, 0.45), 0 8px 20px -16px rgba(124, 91, 187, 0.5);
+    --cc-blob-shadow-hover: 0 16px 30px -18px rgba(58, 42, 88, 0.52), 0 10px 26px -16px rgba(124, 91, 187, 0.58);
+    --cc-blob-glow-1: rgba(151, 90, 182, 0.38);
+    --cc-blob-glow-2: rgba(237, 30, 121, 0.23);
   }
 
   .cc-blob-cta--half {
@@ -961,33 +962,29 @@
   }
 
   .dark .cc-blob-cta {
-    --cc-blob-shell: linear-gradient(
-      140deg,
-      hsl(var(--cc-ink, 261 35% 25%) / 0.62),
-      hsl(var(--cc-ink, 261 35% 25%) / 0.48)
-    );
-    --cc-blob-border: rgba(124, 91, 187, 0.36);
-    --cc-blob-shadow: 0 0 15px #3913b659;
-    --cc-blob-shadow-hover: 0 0 22px rgba(57, 19, 182, 0.5);
-    --cc-blob-wrap-bg: hsl(var(--cc-ink, 261 35% 25%) / 0.52);
+    --cc-blob-shell: linear-gradient(140deg, rgba(7, 22, 15, 0.78), rgba(9, 37, 24, 0.62));
+    --cc-blob-border: rgba(24, 183, 101, 0.34);
+    --cc-blob-shadow: 0 0 15px rgba(16, 126, 74, 0.38);
+    --cc-blob-shadow-hover: 0 0 24px rgba(16, 126, 74, 0.5);
+    --cc-blob-wrap-bg: rgba(9, 37, 24, 0.42);
     --cc-blob-bg: linear-gradient(
       140deg,
-      hsl(var(--cc-ink, 261 35% 25%) / 0.78),
-      hsl(var(--cc-ink, 261 35% 25%) / 0.62)
+      rgba(7, 22, 15, 0.76),
+      rgba(9, 37, 24, 0.6)
     );
     --cc-blob-bg-hover: linear-gradient(
       140deg,
-      hsl(var(--cc-ink, 261 35% 25%) / 0.86),
-      hsl(var(--cc-ink, 261 35% 25%) / 0.68)
+      rgba(9, 37, 24, 0.82),
+      rgba(11, 45, 29, 0.64)
     );
     --cc-blob-bg-active: linear-gradient(
       140deg,
-      hsl(var(--cc-ink, 261 35% 25%) / 0.66),
-      hsl(var(--cc-ink, 261 35% 25%) / 0.52)
+      rgba(8, 31, 21, 0.7),
+      rgba(8, 31, 21, 0.56)
     );
-    --cc-blob-label: #ffffff;
-    --cc-blob-glow-1: hsl(var(--cc-ink, 261 35% 25%));
-    --cc-blob-glow-2: rgba(124, 91, 187, 0.48);
+    --cc-blob-label: #ecfff6;
+    --cc-blob-glow-1: rgba(24, 183, 101, 0.3);
+    --cc-blob-glow-2: rgba(66, 255, 211, 0.18);
     --cc-blob-glow-opacity-1: 0.35;
     --cc-blob-glow-opacity-2: 0.22;
     --cc-blob-color-opacity: 1;
@@ -1002,16 +999,21 @@
   }
 
   .dark .cc-blob-cta--secondary {
-    --cc-blob-wrap-bg: rgba(9, 37, 24, 0.42);
-    --cc-blob-bg: linear-gradient(140deg, rgba(7, 22, 15, 0.76), rgba(9, 37, 24, 0.6));
-    --cc-blob-bg-hover: linear-gradient(140deg, rgba(9, 37, 24, 0.82), rgba(11, 45, 29, 0.64));
-    --cc-blob-bg-active: linear-gradient(140deg, rgba(8, 31, 21, 0.7), rgba(8, 31, 21, 0.56));
-    --cc-blob-label: #ecfff6;
-    --cc-blob-border: rgba(24, 183, 101, 0.34);
-    --cc-blob-shadow: 0 0 15px rgba(16, 126, 74, 0.38);
-    --cc-blob-shadow-hover: 0 0 24px rgba(16, 126, 74, 0.5);
-    --cc-blob-glow-1: rgba(24, 183, 101, 0.3);
-    --cc-blob-glow-2: rgba(66, 255, 211, 0.18);
+    --cc-blob-shell: linear-gradient(
+      140deg,
+      hsl(var(--cc-ink, 261 35% 25%) / 0.62),
+      hsl(var(--cc-ink, 261 35% 25%) / 0.48)
+    );
+    --cc-blob-border: rgba(124, 91, 187, 0.36);
+    --cc-blob-shadow: 0 0 15px #3913b659;
+    --cc-blob-shadow-hover: 0 0 22px rgba(57, 19, 182, 0.5);
+    --cc-blob-wrap-bg: hsl(var(--cc-ink, 261 35% 25%) / 0.52);
+    --cc-blob-bg: linear-gradient(140deg, hsl(var(--cc-ink, 261 35% 25%) / 0.78), hsl(var(--cc-ink, 261 35% 25%) / 0.62));
+    --cc-blob-bg-hover: linear-gradient(140deg, hsl(var(--cc-ink, 261 35% 25%) / 0.86), hsl(var(--cc-ink, 261 35% 25%) / 0.68));
+    --cc-blob-bg-active: linear-gradient(140deg, hsl(var(--cc-ink, 261 35% 25%) / 0.66), hsl(var(--cc-ink, 261 35% 25%) / 0.52));
+    --cc-blob-label: #ffffff;
+    --cc-blob-glow-1: hsl(var(--cc-ink, 261 35% 25%));
+    --cc-blob-glow-2: rgba(124, 91, 187, 0.48);
   }
 
   .dark .cc-blob-cta--half {
@@ -1178,7 +1180,7 @@
       inset 0 1px 0 rgba(255, 255, 255, 0.45),
       0 14px 34px -22px rgba(0, 0, 0, 0.8);
     transition:
-      width 420ms cubic-bezier(0.22, 0.61, 0.36, 1),
+      width 520ms cubic-bezier(0.22, 1, 0.36, 1),
       border-color 220ms ease,
       background-color 220ms ease,
       box-shadow 220ms ease;
@@ -1188,8 +1190,7 @@
     outline: none;
   }
 
-  .cc-video-watch-btn:hover,
-  .cc-video-watch-btn:focus-visible {
+  .cc-video-watch-btn:hover {
     width: 180px;
     border-color: rgba(208, 154, 255, 0.5);
     background: rgba(255, 255, 255, 0.13);
@@ -1226,13 +1227,12 @@
       linear-gradient(120deg, rgba(151, 90, 182, 0.2), rgba(124, 91, 187, 0.16));
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
     transition:
-      width 420ms cubic-bezier(0.22, 0.61, 0.36, 1),
+      width 520ms cubic-bezier(0.22, 1, 0.36, 1),
       border-color 220ms ease,
       box-shadow 220ms ease;
   }
 
-  .cc-video-watch-btn:hover .cc-video-watch-btn__bg,
-  .cc-video-watch-btn:focus-visible .cc-video-watch-btn__bg {
+  .cc-video-watch-btn:hover .cc-video-watch-btn__bg {
     width: 164px;
     border-color: rgba(255, 255, 255, 0.38);
     box-shadow:
@@ -1253,8 +1253,7 @@
     transition: transform 320ms ease;
   }
 
-  .cc-video-watch-btn:hover .cc-video-watch-btn__icon,
-  .cc-video-watch-btn:focus-visible .cc-video-watch-btn__icon {
+  .cc-video-watch-btn:hover .cc-video-watch-btn__icon {
     transform: translateX(0);
   }
 
@@ -1274,16 +1273,16 @@
     letter-spacing: 0.01em;
     color: hsl(var(--cc-pink));
     transition:
-      max-width 380ms cubic-bezier(0.22, 0.61, 0.36, 1),
-      opacity 240ms ease,
-      transform 320ms ease;
+      max-width 420ms cubic-bezier(0.22, 1, 0.36, 1),
+      opacity 320ms ease,
+      transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
   }
 
-  .cc-video-watch-btn:hover .cc-video-watch-btn__label,
-  .cc-video-watch-btn:focus-visible .cc-video-watch-btn__label {
+  .cc-video-watch-btn:hover .cc-video-watch-btn__label {
     max-width: 96px;
     opacity: 1;
     transform: translateX(0);
+    color: hsl(var(--cc-purple));
   }
 
   .cc-video-watch-btn__mask {
@@ -1298,70 +1297,100 @@
 
   .cc-video-watch-btn__blob {
     position: absolute;
-    width: 50px;
-    height: 50px;
+    width: 88px;
+    height: 88px;
     border-radius: 50%;
     will-change: transform;
+    filter: blur(10px) saturate(125%);
+    opacity: 0.94;
+    mix-blend-mode: screen;
+    animation: none;
+    transition: transform 560ms cubic-bezier(0.22, 1, 0.36, 1), opacity 320ms ease;
   }
 
   .cc-video-watch-btn__blob--1 {
-    top: -8px;
-    left: -12px;
+    top: -30px;
+    left: -34px;
     background: radial-gradient(
-      circle at 30% 30%,
-      rgba(159, 160, 255, 0.82) 0%,
-      rgba(124, 91, 187, 0.58) 55%,
+      circle at 36% 34%,
+      rgba(159, 160, 255, 0.52) 0%,
+      rgba(124, 91, 187, 0.34) 34%,
+      rgba(124, 91, 187, 0.16) 56%,
+      rgba(124, 91, 187, 0.05) 72%,
       rgba(124, 91, 187, 0) 100%
     );
-    animation: cc-video-watch-blob-1 9.5s linear infinite;
   }
 
   .cc-video-watch-btn__blob--2 {
-    top: 12px;
-    left: 26px;
+    top: 2px;
+    left: 6px;
     background: radial-gradient(
-      circle at 30% 30%,
-      rgba(249, 104, 173, 0.86) 0%,
-      rgba(237, 30, 121, 0.6) 55%,
+      circle at 34% 34%,
+      rgba(249, 104, 173, 0.5) 0%,
+      rgba(237, 30, 121, 0.34) 34%,
+      rgba(237, 30, 121, 0.16) 56%,
+      rgba(237, 30, 121, 0.05) 72%,
       rgba(237, 30, 121, 0) 100%
     );
-    animation: cc-video-watch-blob-2 9.5s linear infinite;
   }
 
   .cc-video-watch-btn__blob--3 {
-    top: -16px;
-    left: 18px;
+    top: -34px;
+    left: 24px;
     background: radial-gradient(
-      circle at 30% 30%,
-      rgba(111, 248, 222, 0.8) 0%,
-      rgba(89, 200, 255, 0.56) 55%,
+      circle at 34% 34%,
+      rgba(111, 248, 222, 0.48) 0%,
+      rgba(89, 200, 255, 0.32) 34%,
+      rgba(89, 200, 255, 0.14) 56%,
+      rgba(89, 200, 255, 0.04) 72%,
       rgba(89, 200, 255, 0) 100%
     );
-    animation: cc-video-watch-blob-3 9.5s linear infinite;
   }
 
   .cc-video-watch-btn__blob--4 {
-    top: 8px;
-    left: 50px;
+    top: -2px;
+    left: 54px;
     background: radial-gradient(
-      circle at 30% 30%,
-      rgba(255, 197, 115, 0.82) 0%,
-      rgba(255, 142, 161, 0.54) 55%,
+      circle at 34% 34%,
+      rgba(255, 197, 115, 0.5) 0%,
+      rgba(255, 142, 161, 0.32) 34%,
+      rgba(255, 142, 161, 0.15) 56%,
+      rgba(255, 142, 161, 0.04) 72%,
       rgba(255, 142, 161, 0) 100%
     );
-    animation: cc-video-watch-blob-4 9.5s linear infinite;
   }
 
   .cc-video-watch-btn__blob--5 {
-    top: -10px;
-    left: 64px;
+    top: -26px;
+    left: 86px;
     background: radial-gradient(
-      circle at 30% 30%,
-      rgba(95, 110, 255, 0.82) 0%,
-      rgba(151, 90, 182, 0.55) 55%,
+      circle at 34% 34%,
+      rgba(95, 110, 255, 0.5) 0%,
+      rgba(151, 90, 182, 0.34) 34%,
+      rgba(151, 90, 182, 0.16) 56%,
+      rgba(151, 90, 182, 0.05) 72%,
       rgba(151, 90, 182, 0) 100%
     );
-    animation: cc-video-watch-blob-5 9.5s linear infinite;
+  }
+
+  .cc-video-watch-btn:hover .cc-video-watch-btn__blob--1 {
+    animation: cc-video-watch-blob-1 10.2s cubic-bezier(0.42, 0, 0.58, 1) infinite both;
+  }
+
+  .cc-video-watch-btn:hover .cc-video-watch-btn__blob--2 {
+    animation: cc-video-watch-blob-2 10.2s cubic-bezier(0.42, 0, 0.58, 1) infinite both;
+  }
+
+  .cc-video-watch-btn:hover .cc-video-watch-btn__blob--3 {
+    animation: cc-video-watch-blob-3 10.2s cubic-bezier(0.42, 0, 0.58, 1) infinite both;
+  }
+
+  .cc-video-watch-btn:hover .cc-video-watch-btn__blob--4 {
+    animation: cc-video-watch-blob-4 10.2s cubic-bezier(0.42, 0, 0.58, 1) infinite both;
+  }
+
+  .cc-video-watch-btn:hover .cc-video-watch-btn__blob--5 {
+    animation: cc-video-watch-blob-5 10.2s cubic-bezier(0.42, 0, 0.58, 1) infinite both;
   }
 
   .cc-video-watch-btn__glow {
@@ -1376,8 +1405,7 @@
     transition: opacity 320ms ease;
   }
 
-  .cc-video-watch-btn:hover .cc-video-watch-btn__glow,
-  .cc-video-watch-btn:focus-visible .cc-video-watch-btn__glow {
+  .cc-video-watch-btn:hover .cc-video-watch-btn__glow {
     opacity: 0.72;
   }
 
@@ -1390,81 +1418,136 @@
     border-color: rgba(255, 255, 255, 0.32);
   }
 
+  .dark .cc-video-watch-btn:hover .cc-video-watch-btn__label {
+    color: hsl(var(--cc-pink));
+  }
+
   @keyframes cc-video-watch-blob-1 {
-    0%, 21.05% {
+    0%, 18% {
       transform: translate3d(0, 0, 0);
     }
-    47.37% {
+    44% {
       transform: translate3d(130px, 68px, 0);
     }
-    73.68% {
+    72% {
       transform: translate3d(160px, -70px, 0);
     }
+    88% {
+      transform: translate3d(24px, -12px, 0);
+    }
     100% {
       transform: translate3d(0, 0, 0);
     }
   }
 
   @keyframes cc-video-watch-blob-2 {
-    0%, 21.05% {
+    0%, 18% {
       transform: translate3d(0, 0, 0);
     }
-    47.37% {
+    44% {
       transform: translate3d(-140px, -53px, 0);
     }
-    73.68% {
+    72% {
       transform: translate3d(-260px, 40px, 0);
     }
+    88% {
+      transform: translate3d(-18px, 6px, 0);
+    }
     100% {
-      transform: translate3d(-66px, 0, 0);
+      transform: translate3d(0, 0, 0);
     }
   }
 
   @keyframes cc-video-watch-blob-3 {
-    0%, 21.05% {
+    0%, 18% {
       transform: translate3d(0, 0, 0);
     }
-    47.37% {
+    44% {
       transform: translate3d(100px, -73px, 0);
     }
-    73.68% {
+    72% {
       transform: translate3d(100px, 0, 0);
     }
+    88% {
+      transform: translate3d(18px, -10px, 0);
+    }
     100% {
       transform: translate3d(0, 0, 0);
     }
   }
 
   @keyframes cc-video-watch-blob-4 {
-    0%, 21.05% {
+    0%, 18% {
       transform: translate3d(0, 0, 0);
     }
-    47.37% {
+    44% {
       transform: translate3d(-140px, -48px, 0);
     }
-    73.68% {
+    72% {
       transform: translate3d(20px, 80px, 0);
     }
+    88% {
+      transform: translate3d(6px, 16px, 0);
+    }
     100% {
       transform: translate3d(0, 0, 0);
     }
   }
 
   @keyframes cc-video-watch-blob-5 {
-    0%, 21.05% {
+    0%, 18% {
       transform: translate3d(0, 0, 0);
     }
-    47.37% {
+    44% {
       transform: translate3d(180px, 10px, 0);
     }
-    73.68% {
+    72% {
       transform: translate3d(80px, -80px, 0);
     }
+    88% {
+      transform: translate3d(12px, -14px, 0);
+    }
     100% {
       transform: translate3d(0, 0, 0);
     }
   }
   
+
+  :root {
+    --theme-x: 50%;
+    --theme-y: 50%;
+  }
+
+  ::view-transition-old(root),
+  ::view-transition-new(root) {
+    animation: none;
+    mix-blend-mode: normal;
+  }
+
+  ::view-transition-old(root) {
+    z-index: 0;
+  }
+
+  ::view-transition-new(root) {
+    z-index: 1;
+  }
+
+  @keyframes theme-reveal {
+    from {
+      clip-path: circle(0% at var(--theme-x) var(--theme-y));
+      opacity: 0.7;
+    }
+
+    to {
+      clip-path: circle(150% at var(--theme-x) var(--theme-y));
+      opacity: 1;
+    }
+  }
+
+  ::view-transition-new(root) {
+    animation: theme-reveal 0.4s ease-in-out forwards;
+  }
+
   /* ===== MARQUEE ANIMATIONS ===== */
   @keyframes slide-left {
     to {
@@ -1908,8 +1991,7 @@
       height: 60px;
       padding: 6px;
     }
-    .cc-video-watch-btn:hover,
-    .cc-video-watch-btn:focus-visible {
+    .cc-video-watch-btn:hover {
       width: 168px;
     }
     .cc-video-watch-btn__bg {
@@ -1917,8 +1999,7 @@
       height: 46px;
       padding: 0 14px 0 13px;
     }
-    .cc-video-watch-btn:hover .cc-video-watch-btn__bg,
-    .cc-video-watch-btn:focus-visible .cc-video-watch-btn__bg {
+    .cc-video-watch-btn:hover .cc-video-watch-btn__bg {
       width: 154px;
     }
     .cc-video-watch-btn__label {