@cupcodev/ui 3.1.0 → 5.0.0

package/styles/global.css

@@ -86,10 +86,10 @@
   
   /* ===== GLASS MORPHISM UTILITIES ===== */
   .glass {
-    background: var(--glass-bg);
+    background: hsl(var(--glass-bg));
     backdrop-filter: blur(var(--glass-blur-md));
     -webkit-backdrop-filter: blur(var(--glass-blur-md));
-    border: 1px solid var(--glass-border);
+    border: 1px solid hsl(var(--glass-border));
     position: relative;
   }
   
@@ -122,10 +122,10 @@
   }
   
   .glass-strong {
-    background: var(--glass-bg-strong);
+    background: hsl(var(--glass-bg-strong));
     backdrop-filter: blur(var(--glass-blur-lg));
     -webkit-backdrop-filter: blur(var(--glass-blur-lg));
-    border: 1px solid var(--glass-border);
+    border: 1px solid hsl(var(--glass-border));
   }
   
   .glass-inverse {
@@ -586,6 +586,10 @@
   .cc-gradient-galaxy {
     background: var(--cc-gradient-galaxy);
   }
+
+  .gradient-primary {
+    background: linear-gradient(135deg, hsl(281, 83%, 47.8%), hsl(331, 83%, 53.5%));
+  }
   
   .cc-gradient-comet {
     background: var(--cc-gradient-comet);
@@ -689,6 +693,334 @@
     60% { transform: scale(0.995, 1.005); }
     100% { transform: scale(1, 1); }
   }
+
+  /* ===== 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));
+    --cc-blob-glow-1: rgba(151, 90, 182, 0.38);
+    --cc-blob-glow-2: rgba(237, 30, 121, 0.23);
+    --cc-blob-glow-opacity-1: 0.34;
+    --cc-blob-glow-opacity-2: 0.24;
+    --cc-blob-color-opacity: 0.88;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 160px;
+    height: 60px;
+    border: 0;
+    border-radius: 12px;
+    padding: 0 16px;
+    cursor: pointer;
+    background: var(--cc-blob-shell);
+    color: var(--cc-blob-label);
+    border: 1px solid var(--cc-blob-border);
+    overflow: visible;
+    isolation: isolate;
+    box-shadow: var(--cc-blob-shadow);
+    backdrop-filter: blur(var(--glass-blur-md)) saturate(145%);
+    -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(145%);
+    text-decoration: none;
+    transition: transform 200ms ease, box-shadow 300ms ease;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .cc-blob-cta:focus {
+    outline: none;
+  }
+
+  .cc-blob-cta:focus-visible {
+    outline: 2px solid rgba(237, 30, 121, 0.55);
+    outline-offset: 2px;
+  }
+
+  .cc-blob-cta:hover {
+    box-shadow: var(--cc-blob-shadow-hover);
+  }
+
+  .cc-blob-cta:active {
+    transform: translateY(1px);
+  }
+
+  .cc-blob-cta:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  .cc-blob-cta--sm {
+    width: 132px;
+    height: 50px;
+    border-radius: 10px;
+  }
+
+  .cc-blob-cta--md {
+    width: 160px;
+    height: 60px;
+    border-radius: 12px;
+  }
+
+  .cc-blob-cta--lg {
+    width: 184px;
+    height: 68px;
+    border-radius: 14px;
+  }
+
+  .cc-blob-cta__color-wrap {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    border-radius: inherit;
+    background-color: var(--cc-blob-wrap-bg);
+    border: 1px solid rgba(255, 255, 255, 0.65);
+    backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
+    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
+    overflow: hidden;
+    pointer-events: none;
+  }
+
+  .cc-blob-cta__bg {
+    position: absolute;
+    z-index: 3;
+    top: 50%;
+    left: 50%;
+    width: 97%;
+    height: 95%;
+    border-radius: inherit;
+    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(--glass-blur-sm));
+    -webkit-backdrop-filter: blur(var(--glass-blur-sm));
+    transform: translate(-50%, -50%);
+    transition: all 0.3s ease-in-out;
+  }
+
+  .cc-blob-cta:hover .cc-blob-cta__bg {
+    -webkit-backdrop-filter: blur(6px);
+    backdrop-filter: blur(6px);
+    background: var(--cc-blob-bg-hover);
+  }
+
+  .cc-blob-cta:active .cc-blob-cta__bg {
+    background: var(--cc-blob-bg-active);
+  }
+
+  .cc-blob-cta__label {
+    position: relative;
+    z-index: 5;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--cc-blob-label);
+    font-family: var(--font-display);
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 1;
+    letter-spacing: 0.01em;
+    text-align: center;
+    pointer-events: none;
+    white-space: nowrap;
+  }
+
+  .cc-blob-cta--lg .cc-blob-cta__label {
+    font-size: 15px;
+  }
+
+  .cc-blob-cta--sm .cc-blob-cta__label {
+    font-size: 13px;
+  }
+
+  .cc-blob-cta__color {
+    position: absolute;
+    z-index: 1;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    filter: blur(16px);
+    mix-blend-mode: normal;
+    opacity: var(--cc-blob-color-opacity);
+    will-change: transform;
+  }
+
+  .cc-blob-cta__color--1 {
+    top: -30%;
+    left: -5%;
+    background-image: linear-gradient(112deg, #ff0f33d6, #ff6600db);
+  }
+
+  .cc-blob-cta__color--2 {
+    top: -30%;
+    left: 29%;
+    background-image: linear-gradient(251deg, #07fc, #ad15ffe0);
+  }
+
+  .cc-blob-cta__color--3 {
+    top: -30%;
+    left: 8%;
+    background-image: linear-gradient(251deg, #7300ffd6, #e815ffd9);
+  }
+
+  .cc-blob-cta:hover .cc-blob-cta__color--1,
+  .cc-blob-cta:focus-visible .cc-blob-cta__color--1 {
+    animation: cc-blob-cta-move-1 3.5s linear infinite;
+  }
+
+  .cc-blob-cta:hover .cc-blob-cta__color--2,
+  .cc-blob-cta:focus-visible .cc-blob-cta__color--2 {
+    animation: cc-blob-cta-move-2 3.5s linear infinite;
+  }
+
+  .cc-blob-cta:hover .cc-blob-cta__color--3,
+  .cc-blob-cta:focus-visible .cc-blob-cta__color--3 {
+    animation: cc-blob-cta-move-3 3.5s linear infinite;
+  }
+
+  .cc-blob-cta--secondary .cc-blob-cta__color--1 {
+    background-image: linear-gradient(112deg, #8dff4ed9, #18b765db);
+  }
+
+  .cc-blob-cta--secondary .cc-blob-cta__color--2 {
+    background-image: linear-gradient(251deg, #42ffd3e0, #15d4ffe0);
+  }
+
+  .cc-blob-cta--secondary .cc-blob-cta__color--3 {
+    background-image: linear-gradient(251deg, #7cff95d4, #15ff8fd9);
+  }
+
+  .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-cta--half {
+    --cc-blob-wrap-bg: rgba(235, 227, 250, 0.35);
+    --cc-blob-bg: linear-gradient(140deg, rgba(255, 255, 255, 0.66), rgba(236, 227, 252, 0.54));
+    --cc-blob-label: hsl(var(--cc-purple));
+    --cc-blob-border: rgba(124, 91, 187, 0.34);
+    --cc-blob-glow-1: rgba(124, 91, 187, 0.34);
+    --cc-blob-glow-2: rgba(95, 110, 255, 0.22);
+  }
+
+  .cc-blob-cta__glow {
+    position: absolute;
+    border-radius: 50%;
+    pointer-events: none;
+  }
+
+  .cc-blob-cta__glow--1 {
+    z-index: -3;
+    width: 220px;
+    height: 140px;
+    top: 18%;
+    right: -42%;
+    background-color: var(--cc-blob-glow-1);
+    opacity: var(--cc-blob-glow-opacity-1);
+    filter: blur(52px);
+  }
+
+  .cc-blob-cta__glow--2 {
+    z-index: -2;
+    width: 250px;
+    height: 170px;
+    top: 30%;
+    right: 50%;
+    background-color: var(--cc-blob-glow-2);
+    opacity: var(--cc-blob-glow-opacity-2);
+    filter: blur(56px);
+  }
+
+  .dark .cc-blob-cta {
+    --cc-blob-shell: linear-gradient(140deg, hsl(var(--cc-ink) / 0.62), hsl(var(--cc-ink) / 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) / 0.52);
+    --cc-blob-bg: linear-gradient(140deg, hsl(var(--cc-ink) / 0.78), hsl(var(--cc-ink) / 0.62));
+    --cc-blob-bg-hover: linear-gradient(140deg, hsl(var(--cc-ink) / 0.86), hsl(var(--cc-ink) / 0.68));
+    --cc-blob-bg-active: linear-gradient(140deg, hsl(var(--cc-ink) / 0.66), hsl(var(--cc-ink) / 0.52));
+    --cc-blob-label: #ffffff;
+    --cc-blob-glow-1: hsl(var(--cc-ink));
+    --cc-blob-glow-2: rgba(124, 91, 187, 0.48);
+    --cc-blob-glow-opacity-1: 0.35;
+    --cc-blob-glow-opacity-2: 0.22;
+    --cc-blob-color-opacity: 1;
+  }
+
+  .dark .cc-blob-cta__color-wrap {
+    border-color: transparent;
+  }
+
+  .dark .cc-blob-cta__bg {
+    box-shadow: none;
+  }
+
+  .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);
+  }
+
+  .dark .cc-blob-cta--half {
+    --cc-blob-wrap-bg: hsl(var(--cc-ink) / 0.48);
+    --cc-blob-bg: linear-gradient(140deg, hsl(var(--cc-ink) / 0.74), rgba(16, 12, 35, 0.64));
+    --cc-blob-bg-hover: linear-gradient(140deg, hsl(var(--cc-ink) / 0.82), rgba(16, 12, 35, 0.7));
+    --cc-blob-bg-active: linear-gradient(140deg, hsl(var(--cc-ink) / 0.68), rgba(12, 8, 25, 0.62));
+    --cc-blob-label: #ece6ff;
+  }
+
+  @keyframes cc-blob-cta-move-1 {
+    0% { transform: translate3d(0%, 0%, 0); }
+    16.67% { transform: translate3d(120%, 0%, 0); }
+    33.33% { transform: translate3d(230%, -20%, 0); }
+    50% { transform: translate3d(240%, 60%, 0); }
+    66.67% { transform: translate3d(80%, 80%, 0); }
+    83.33% { transform: translate3d(0%, 80%, 0); }
+    100% { transform: translate3d(0%, 0%, 0); }
+  }
+
+  @keyframes cc-blob-cta-move-2 {
+    0% { transform: translate3d(0%, 0%, 0); }
+    16.67% { transform: translate3d(130%, 0%, 0); }
+    33.33% { transform: translate3d(170%, 30%, 0); }
+    50% { transform: translate3d(170%, 80%, 0); }
+    66.67% { transform: translate3d(0%, 100%, 0); }
+    83.33% { transform: translate3d(-80%, 40%, 0); }
+    100% { transform: translate3d(0%, 0%, 0); }
+  }
+
+  @keyframes cc-blob-cta-move-3 {
+    0% { transform: translate3d(0%, 0%, 0); }
+    16.67% { transform: translate3d(120%, 0%, 0); }
+    33.33% { transform: translate3d(120%, 80%, 0); }
+    50% { transform: translate3d(-120%, 80%, 0); }
+    66.67% { transform: translate3d(-120%, 0%, 0); }
+    83.33% { transform: translate3d(-120%, 0%, 0); }
+    100% { transform: translate3d(0%, 0%, 0); }
+  }
   
   /* ===== FONT UTILITIES ===== */
   .font-cupcode {
@@ -781,157 +1113,313 @@
     left: 2px;
   }
   
-  /* ===== AUDIO PLAYER CIRCLE ===== */
-  .circle {
-    display: grid;
-    grid-template-rows: 1fr;
-    grid-row: 4/6;
-    grid-column: 2/3;
-    align-items: center;
-    justify-items: center;
-    width: 6rem;
-    height: 100%;
-    border-radius: 1rem;
-    position: absolute;
-    top: calc(50% - 48px / 3);
-    transform: translate(-50%, -50%);
-    left: 50%;
-  }
-  
-  .circle__btn {
+  /* ===== VIDEO WATCH BUTTON ===== */
+  .cc-video-watch-btn {
     position: relative;
-    z-index: 300;
-    display: flex;
-    grid-row: 1/2;
-    grid-column: 1/2;
+    display: inline-flex;
     align-items: center;
-    justify-content: center;
-    justify-self: center;
-    width: 3rem;
-    height: 3rem;
-    margin: 0.6rem;
-    border-radius: 50%;
-    background-color: #e4ebf5;
-    color: #ffffff;
-    box-shadow:
-      0.3rem 0.3rem 0.6rem #c8d0e7,
-      -0.2rem -0.2rem 0.5rem #ffffff;
-    font-size: 3.2rem;
+    justify-content: flex-start;
+    width: 64px;
+    height: 64px;
+    padding: 7px;
+    border: 1px solid rgba(159, 160, 255, 0.3);
+    border-radius: 9999px;
+    background: rgba(255, 255, 255, 0.08);
+    color: rgba(248, 244, 255, 0.96);
+    text-decoration: none;
     cursor: pointer;
-    transition: all 0.3s;
+    overflow: visible;
+    isolation: isolate;
+    transform: translateZ(0);
+    -webkit-tap-highlight-color: transparent;
+    box-shadow:
+      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),
+      border-color 220ms ease,
+      background-color 220ms ease,
+      box-shadow 220ms ease;
   }
 
-  .dark .circle__btn {
-    background-color: rgba(23, 16, 45, 0.92);
-    color: rgba(248, 244, 255, 0.92);
-    box-shadow:
-      0.3rem 0.3rem 0.6rem rgba(4, 1, 18, 0.6),
-      -0.2rem -0.2rem 0.5rem rgba(115, 72, 180, 0.35);
+  .cc-video-watch-btn:focus {
+    outline: none;
   }
-  
-  .circle__btn:hover {
-    color: #7c5bbb40;
-    background-color: #fff;
+
+  .cc-video-watch-btn:hover,
+  .cc-video-watch-btn:focus-visible {
+    width: 180px;
+    border-color: rgba(208, 154, 255, 0.5);
+    background: rgba(255, 255, 255, 0.13);
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.55),
+      0 18px 38px -20px rgba(151, 90, 182, 0.62);
   }
 
-  .dark .circle__btn:hover {
-    color: var(--cc-hover-overlay);
-    background-color: rgba(39, 27, 75, 0.95);
+  .cc-video-watch-btn:focus-visible {
+    outline: 2px solid rgba(237, 30, 121, 0.45);
+    outline-offset: 2px;
   }
-  
-  .circle__btn:hover ~ .circle__back-1 {
-    background: linear-gradient(to bottom, #7c5bbb30 0%, #975ab630 100%);
+
+  .cc-video-watch-btn:active {
+    transform: translateY(1px);
   }
 
-  .dark .circle__btn:hover ~ .circle__back-1 {
-    background: linear-gradient(to bottom, rgba(124, 91, 187, 0.45) 0%, rgba(151, 90, 182, 0.3) 100%);
+  .cc-video-watch-btn__bg {
+    position: relative;
+    z-index: 2;
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    width: 48px;
+    height: 48px;
+    padding: 0 16px 0 14px;
+    border: 1px solid rgba(255, 255, 255, 0.28);
+    border-radius: 9999px;
+    overflow: hidden;
+    backdrop-filter: blur(14px) saturate(130%);
+    -webkit-backdrop-filter: blur(14px) saturate(130%);
+    background:
+      radial-gradient(120% 140% at 84% 18%, rgba(255, 255, 255, 0.56) 0%, rgba(255, 255, 255, 0.15) 45%, rgba(255, 255, 255, 0.06) 100%),
+      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),
+      border-color 220ms ease,
+      box-shadow 220ms ease;
   }
-  
-  .circle__btn.shadow {
+
+  .cc-video-watch-btn:hover .cc-video-watch-btn__bg,
+  .cc-video-watch-btn:focus-visible .cc-video-watch-btn__bg {
+    width: 164px;
+    border-color: rgba(255, 255, 255, 0.38);
     box-shadow:
-      inset 0.2rem 0.2rem 0.5rem #c8d0e7,
-      inset -0.2rem -0.2rem 0.5rem #ffffff;
+      inset 0 1px 0 rgba(255, 255, 255, 0.52),
+      0 6px 18px -16px rgba(151, 90, 182, 0.78);
   }
 
-  .dark .circle__btn.shadow {
-    box-shadow:
-      inset 0.2rem 0.2rem 0.5rem rgba(4, 1, 18, 0.8),
-      inset -0.2rem -0.2rem 0.5rem rgba(107, 66, 174, 0.35);
+  .cc-video-watch-btn__icon {
+    position: relative;
+    z-index: 2;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    transform: translateX(2px);
+    color: hsl(var(--cc-pink));
+    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.32));
+    transition: transform 320ms ease;
   }
-  
-  .circle__btn .play {
-    position: absolute;
+
+  .cc-video-watch-btn:hover .cc-video-watch-btn__icon,
+  .cc-video-watch-btn:focus-visible .cc-video-watch-btn__icon {
+    transform: translateX(0);
+  }
+
+  .cc-video-watch-btn__label {
+    position: relative;
+    z-index: 2;
+    display: inline-block;
+    max-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
     opacity: 0;
-    transition: 0.02s linear;
-    font-size: 25px;
+    transform: translateX(10px);
+    font-family: var(--font-display);
+    font-size: 0.875rem;
+    font-weight: 600;
+    line-height: 1;
+    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;
   }
-  
-  .circle__btn .play.visibility {
+
+  .cc-video-watch-btn:hover .cc-video-watch-btn__label,
+  .cc-video-watch-btn:focus-visible .cc-video-watch-btn__label {
+    max-width: 96px;
     opacity: 1;
-    transition: 0.02s linear;
+    transform: translateX(0);
   }
-  
-.circle__btn .pause {
-  position: absolute;
-  opacity: 0;
-  transition: 0.02s linear;
-  font-size: 25px;
-}
 
-.circle__btn .pause.visibility {
-  opacity: 1;
-}
-  
-  .circle__back-1,
-  .circle__back-2 {
-    z-index: 100;
-    grid-row: 1/2;
-    grid-column: 1/2;
-    width: 3rem;
-    height: 3rem;
+  .cc-video-watch-btn__mask {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    border-radius: inherit;
+    overflow: hidden;
+    opacity: 0.86;
+    pointer-events: none;
+  }
+
+  .cc-video-watch-btn__blob {
+    position: absolute;
+    width: 50px;
+    height: 50px;
     border-radius: 50%;
-    filter: blur(1px);
+    will-change: transform;
   }
-  
-  .circle__back-1 {
-    background: linear-gradient(to bottom, #c8d0e7 0%, #ffffff 100%);
-    box-shadow:
-      0.4rem 0.4rem 0.8rem #c8d0e7,
-      -0.4rem -0.4rem 0.8rem #ffffff;
-    animation: waves 4s linear infinite;
+
+  .cc-video-watch-btn__blob--1 {
+    top: -8px;
+    left: -12px;
+    background: radial-gradient(
+      circle at 30% 30%,
+      rgba(159, 160, 255, 0.82) 0%,
+      rgba(124, 91, 187, 0.58) 55%,
+      rgba(124, 91, 187, 0) 100%
+    );
+    animation: cc-video-watch-blob-1 9.5s linear infinite;
   }
 
-  .dark .circle__back-1 {
-    background: linear-gradient(to bottom, rgba(54, 36, 92, 0.75) 0%, rgba(92, 42, 120, 0.65) 100%);
-    box-shadow:
-      0.4rem 0.4rem 0.8rem rgba(4, 1, 18, 0.55),
-      -0.4rem -0.4rem 0.8rem rgba(112, 70, 179, 0.28);
+  .cc-video-watch-btn__blob--2 {
+    top: 12px;
+    left: 26px;
+    background: radial-gradient(
+      circle at 30% 30%,
+      rgba(249, 104, 173, 0.86) 0%,
+      rgba(237, 30, 121, 0.6) 55%,
+      rgba(237, 30, 121, 0) 100%
+    );
+    animation: cc-video-watch-blob-2 9.5s linear infinite;
   }
-  
-  .circle__back-2 {
-    box-shadow:
-      0.4rem 0.4rem 0.8rem #c8d0e7,
-      -0.4rem -0.4rem 0.8rem #ffffff;
-    animation: waves 4s linear 2s infinite;
+
+  .cc-video-watch-btn__blob--3 {
+    top: -16px;
+    left: 18px;
+    background: radial-gradient(
+      circle at 30% 30%,
+      rgba(111, 248, 222, 0.8) 0%,
+      rgba(89, 200, 255, 0.56) 55%,
+      rgba(89, 200, 255, 0) 100%
+    );
+    animation: cc-video-watch-blob-3 9.5s linear infinite;
   }
 
-  .dark .circle__back-2 {
-    box-shadow:
-      0.4rem 0.4rem 0.8rem rgba(4, 1, 18, 0.55),
-      -0.4rem -0.4rem 0.8rem rgba(112, 70, 179, 0.28);
+  .cc-video-watch-btn__blob--4 {
+    top: 8px;
+    left: 50px;
+    background: radial-gradient(
+      circle at 30% 30%,
+      rgba(255, 197, 115, 0.82) 0%,
+      rgba(255, 142, 161, 0.54) 55%,
+      rgba(255, 142, 161, 0) 100%
+    );
+    animation: cc-video-watch-blob-4 9.5s linear infinite;
   }
-  
-  @keyframes waves {
-    0% {
-      opacity: 1;
-      transform: scale(1);
+
+  .cc-video-watch-btn__blob--5 {
+    top: -10px;
+    left: 64px;
+    background: radial-gradient(
+      circle at 30% 30%,
+      rgba(95, 110, 255, 0.82) 0%,
+      rgba(151, 90, 182, 0.55) 55%,
+      rgba(151, 90, 182, 0) 100%
+    );
+    animation: cc-video-watch-blob-5 9.5s linear infinite;
+  }
+
+  .cc-video-watch-btn__glow {
+    position: absolute;
+    inset: 8px;
+    z-index: 0;
+    border-radius: 9999px;
+    pointer-events: none;
+    background: radial-gradient(80% 120% at 50% 85%, rgba(151, 90, 182, 0.52), rgba(151, 90, 182, 0));
+    filter: blur(16px);
+    opacity: 0.28;
+    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 {
+    opacity: 0.72;
+  }
+
+  .dark .cc-video-watch-btn {
+    border-color: rgba(159, 160, 255, 0.38);
+    background: rgba(255, 255, 255, 0.11);
+  }
+
+  .dark .cc-video-watch-btn__bg {
+    border-color: rgba(255, 255, 255, 0.32);
+  }
+
+  @keyframes cc-video-watch-blob-1 {
+    0%, 21.05% {
+      transform: translate3d(0, 0, 0);
     }
-    50% {
-      opacity: 1;
+    47.37% {
+      transform: translate3d(130px, 68px, 0);
+    }
+    73.68% {
+      transform: translate3d(160px, -70px, 0);
+    }
+    100% {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes cc-video-watch-blob-2 {
+    0%, 21.05% {
+      transform: translate3d(0, 0, 0);
+    }
+    47.37% {
+      transform: translate3d(-140px, -53px, 0);
+    }
+    73.68% {
+      transform: translate3d(-260px, 40px, 0);
+    }
+    100% {
+      transform: translate3d(-66px, 0, 0);
+    }
+  }
+
+  @keyframes cc-video-watch-blob-3 {
+    0%, 21.05% {
+      transform: translate3d(0, 0, 0);
+    }
+    47.37% {
+      transform: translate3d(100px, -73px, 0);
+    }
+    73.68% {
+      transform: translate3d(100px, 0, 0);
+    }
+    100% {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes cc-video-watch-blob-4 {
+    0%, 21.05% {
+      transform: translate3d(0, 0, 0);
+    }
+    47.37% {
+      transform: translate3d(-140px, -48px, 0);
+    }
+    73.68% {
+      transform: translate3d(20px, 80px, 0);
     }
     100% {
-      opacity: 0;
-      transform: scale(2);
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes cc-video-watch-blob-5 {
+    0%, 21.05% {
+      transform: translate3d(0, 0, 0);
+    }
+    47.37% {
+      transform: translate3d(180px, 10px, 0);
+    }
+    73.68% {
+      transform: translate3d(80px, -80px, 0);
+    }
+    100% {
+      transform: translate3d(0, 0, 0);
     }
   }
   
@@ -1137,6 +1625,133 @@
   .animate-float-and-rotate-fast {
     animation: floatC 4.8s ease-in-out infinite;
   }
+
+  .cc-animacoes-cta-wrap {
+    position: relative;
+    display: inline-flex;
+  }
+
+  .cc-animacoes-cta-btn {
+    transform-origin: 50% 56%;
+    will-change: transform;
+  }
+
+  .cc-animacoes-cta-badge-wrap {
+    position: absolute;
+    right: -9px;
+    top: -12px;
+    z-index: 12;
+    pointer-events: none;
+  }
+
+  .cc-animacoes-cta-badge {
+    position: relative;
+    z-index: 2;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 999px;
+    border: 1px solid rgba(255, 255, 255, 0.8);
+    background: linear-gradient(130deg, #f9247c, #ff8b3d);
+    color: #fff;
+    font-size: 10px;
+    font-weight: 700;
+    line-height: 1;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    padding: 4px 7px;
+    box-shadow: 0 8px 20px -10px rgba(249, 36, 124, 0.7);
+    transform-origin: 62% 72%;
+    animation: cc-animacoes-cta-wobble 2.6s ease-in-out infinite;
+    will-change: transform;
+  }
+
+  .cc-animacoes-cta-confetti {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 78px;
+    height: 52px;
+    z-index: 1;
+    pointer-events: none;
+    overflow: visible;
+  }
+
+  .cc-animacoes-cta-confetti line {
+    stroke: rgba(255, 246, 245, 0.96);
+    stroke-width: 1.8;
+    stroke-linecap: round;
+    transform-origin: 39px 26px;
+    animation: cc-animacoes-confetti 1.35s ease-in-out infinite;
+  }
+
+  .cc-animacoes-cta-confetti line:nth-child(2) {
+    animation-delay: 120ms;
+  }
+
+  .cc-animacoes-cta-confetti line:nth-child(3) {
+    animation-delay: 240ms;
+  }
+
+  .cc-animacoes-cta-confetti line:nth-child(4) {
+    animation-delay: 360ms;
+  }
+
+  .cc-animacoes-cta-confetti line:nth-child(5) {
+    animation-delay: 480ms;
+  }
+
+  .cc-animacoes-cta-confetti line:nth-child(6) {
+    animation-delay: 600ms;
+  }
+
+  .cc-animacoes-cta-confetti line:nth-child(7) {
+    animation-delay: 720ms;
+  }
+
+  .cc-animacoes-cta-confetti line:nth-child(8) {
+    animation-delay: 840ms;
+  }
+
+  @keyframes cc-animacoes-cta-wobble {
+    0%,
+    82%,
+    100% {
+      transform: rotate(0deg);
+    }
+    84% {
+      transform: rotate(-2.6deg);
+    }
+    86% {
+      transform: rotate(2.2deg);
+    }
+    88% {
+      transform: rotate(-1.5deg);
+    }
+    90% {
+      transform: rotate(1.1deg);
+    }
+    92% {
+      transform: rotate(-0.6deg);
+    }
+  }
+
+  @keyframes cc-animacoes-confetti {
+    0%,
+    100% {
+      opacity: 0.45;
+      transform: scale(0.7) rotate(0deg);
+    }
+    35% {
+      opacity: 1;
+      transform: scale(1.06) rotate(-4deg);
+    }
+    70% {
+      opacity: 0.68;
+      transform: scale(0.82) rotate(3deg);
+    }
+  }
   
   /* ===== HERO SECTION ===== */
   #hero-section-one {
@@ -1246,16 +1861,26 @@
     img.ElementoFlutuante2 {
       display: none;
     }
-    .circle {
-      transform: translate(0%, -50%);
-      top: calc(50% - 32px / 3);
-      right: 0%;
-      left: unset;
-      width: 5rem;
+    .cc-video-watch-btn {
+      width: 60px;
+      height: 60px;
+      padding: 6px;
+    }
+    .cc-video-watch-btn:hover,
+    .cc-video-watch-btn:focus-visible {
+      width: 168px;
+    }
+    .cc-video-watch-btn__bg {
+      width: 46px;
+      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 {
+      width: 154px;
     }
-    .circle__btn {
-      width: 2rem;
-      height: 2rem;
+    .cc-video-watch-btn__label {
+      font-size: 0.8125rem;
     }
     .row-column-content {
       max-width: 100%;