.glass-effect {
  background: rgba(17, 17, 17, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.glass-effect-gsap {
background: rgba(17, 17, 17, 0.7);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
overflow: hidden;
}

.glass-effect-gsap:hover {
box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.45);
}

.glass-effect:hover {
  box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.45);
  transform: translateY(-2px);
}

.glass-effect-light {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px 0 rgba(255, 255, 255, 0.1);
}


.glass-effect-dark {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
}

.glass-effect-dark:hover {
  background: rgba(0, 0, 0, 0.8);
  box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.6);
}

.glass-effect-dark[pointer="header"]:hover {
background: rgba(0, 0, 0, 0.75);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
}

.glass-effect-blue {
  background: rgba(0, 114, 255, 0.2);
  border: 1px solid rgba(0, 114, 255, 0.3);
  box-shadow: 0 8px 32px 0 rgba(0, 114, 255, 0.2);
}

.glass-effect-purple {
  background: rgba(128, 0, 255, 0.2);
  border: 1px solid rgba(128, 0, 255, 0.3);
  box-shadow: 0 8px 32px 0 rgba(128, 0, 255, 0.2);
}

.glass-effect-red {
background: rgba(255, 0, 0, 0.2);
border: 1px solid rgba(255, 0, 0, 0.3);
box-shadow: 0 8px 32px 0 rgba(255, 0, 0, 0.2);
}

.glass-effect-redC {
background: rgba(255, 0, 0, 0.2);
border: 1px solid rgba(255, 0, 0, 0.3);
}

.glass-effect-green {
  background: rgba(0, 255, 128, 0.2);
  border: 1px solid rgba(0, 255, 128, 0.3);
  box-shadow: 0 8px 32px 0 rgba(0, 255, 128, 0.2);
}

.glass-effect:active {
  transform: translateY(1px);
  box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.3);
}

.glass-effect-gradient {
  position: relative;
  border: none;
  background-clip: padding-box;
  padding: 1px;
}

.glass-effect-gradient::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0.3)
  );
  -webkit-mask: 
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
  mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.glass-effect-glow {
  position: relative;
}

.glass-effect-glow::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.1);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.glass-effect-glow:hover::after {
  opacity: 1;
}

.glass-effect-frost {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.glass-effect {
  will-change: transform, box-shadow;
  backface-visibility: hidden;
  perspective: 1000px;
  transition: all 0.5 ease-in-out;
  transform: translateZ(0);
}

@media (prefers-color-scheme: dark) {
  .glass-effect {
      background: rgba(23, 23, 23, 0.8);
  }
  
  .glass-effect-light {
      background: rgba(255, 255, 255, 0.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .glass-effect,
  .glass-effect::before,
  .glass-effect::after {
      transition: none !important;
      transform: none !important;
  }
}

.glass-effect-subtle {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background: rgba(17, 17, 17, 0.5);
}

.glass-effect-strong {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(17, 17, 17, 0.85);
}

@supports not (backdrop-filter: blur(10px)) {
  .glass-effect {
      background: rgba(17, 17, 17, 0.9);
  }
  
  .glass-effect-light {
      background: rgba(255, 255, 255, 0.3);
  }
}

@import url("https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,500&display=swap");

:root {
--shiny-cta-bg: #000000;
--shiny-cta-bg-subtle: #1a1818;
--shiny-cta-fg: #ffffff;
--shiny-cta-highlight: #c400ff;
--shiny-cta-highlight-subtle: #8484ff;
}

@property --gradient-angle {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}

@property --gradient-angle-offset {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}

@property --gradient-percent {
syntax: "<percentage>";
initial-value: 5%;
inherits: false;
}

@property --gradient-shine {
syntax: "<color>";
initial-value: white;
inherits: false;
}

.shiny-cta {
--animation: gradient-angle linear infinite;
--duration: 3s;
--shadow-size: 2px;
isolation: isolate;
position: relative;
overflow: hidden;
cursor: pointer;
outline-offset: 4px;
padding: 0.75rem 2.5rem;
font-family: inherit;
font-size: 1rem;
line-height: 1.2;
border: 1px solid transparent;
border-radius: 14px;
color: var(--shiny-cta-fg);
background: linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg))
    padding-box,
  conic-gradient(
      from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
      transparent,
      var(--shiny-cta-highlight) var(--gradient-percent),
      var(--gradient-shine) calc(var(--gradient-percent) * 2),
      var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3),
      transparent calc(var(--gradient-percent) * 4)
    )
    border-box;
box-shadow: inset 0 0 0 1px var(--shiny-cta-bg-subtle);

&::before,
&::after,
span::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  translate: -50% -50%;
  z-index: -1;
}

&:active {
  translate: 0 1px;
}
}

/* Dots pattern */
.shiny-cta::before {
--size: calc(100% - var(--shadow-size) * 3);
--position: 2px;
--space: calc(var(--position) * 2);
width: var(--size);
height: var(--size);
background: radial-gradient(
    circle at var(--position) var(--position),
    white calc(var(--position) / 4),
    transparent 0
  )
  padding-box;
background-size: var(--space) var(--space);
background-repeat: space;
mask-image: conic-gradient(
  from calc(var(--gradient-angle) + 45deg),
  black,
  transparent 10% 90%,
  black
);
border-radius: inherit;
opacity: 0.4;
z-index: -1;
}

/* Inner shimmer */
.shiny-cta::after {
--animation: shimmer linear infinite;
width: 100%;
aspect-ratio: 1;
background: linear-gradient(
  -50deg,
  transparent,
  var(--shiny-cta-highlight),
  transparent
);
mask-image: radial-gradient(circle at bottom, transparent 40%, black);
opacity: 0.6;
}

.shiny-cta span {
z-index: 1;

&::before {
  --size: calc(100% + 1rem);
  width: var(--size);
  height: var(--size);
  box-shadow: inset 0 -1ex 2rem 4px var(--shiny-cta-highlight);
  opacity: 0;
}
}

/* Animate */
.shiny-cta {
--transition: 800ms cubic-bezier(0.25, 1, 0.5, 1);
transition: var(--transition);
transition-property: --gradient-angle-offset, --gradient-percent,
  --gradient-shine;

&,
&::before,
&::after {
  animation: var(--animation) var(--duration),
    var(--animation) calc(var(--duration) / 0.4) reverse paused;
  animation-composition: add;
}

span::before {
  transition: opacity var(--transition);
  animation: calc(var(--duration) * 1.5) breathe linear infinite;
}
}

.shiny-cta:is(:hover, :focus-visible) {
--gradient-percent: 20%;
--gradient-angle-offset: 95deg;
--gradient-shine: var(--shiny-cta-highlight-subtle);

&,
&::before,
&::after {
  animation-play-state: running;
}

span::before {
  opacity: 1;
}
}

@keyframes gradient-angle {
to {
  --gradient-angle: 360deg;
}
}

@keyframes shimmer {
to {
  rotate: 360deg;
}
}

@keyframes breathe {
from,
to {
  scale: 1;
}
50% {
  scale: 1.2;
}
}

.glass-effect-modern {
background: rgba(9, 9, 11, 0.75);
backdrop-filter: blur(12px) saturate(150%);
-webkit-backdrop-filter: blur(12px) saturate(150%);
border-right: 1px solid rgba(255, 255, 255, 0.05);
position: relative;
overflow: hidden;
z-index: 50;
}

.glass-effect-modern::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(
  90deg, 
  rgba(255, 255, 255, 0), 
  rgba(255, 255, 255, 0.03), 
  rgba(255, 255, 255, 0)
);
}

.glass-effect-modern::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(
  90deg, 
  rgba(255, 255, 255, 0), 
  rgba(255, 255, 255, 0.05), 
  rgba(255, 255, 255, 0)
);
}