:root {
  --primary-color: #6c5ce7;
  --secondary-color: #a29bfe;
  --accent-color: #00cec9;
  --text-color: #fff;
  --glass-bg: rgb(255 255 255 / 10%);
  --glass-border: rgb(255 255 255 / 20%);
  --font-main: "Outfit", sans-serif;
  --skew-x: 0deg;
  --skew-y: 0deg;
  --asymmetric-radius-top-left: 50%;
  --asymmetric-radius-top-right: 50%;
  --asymmetric-radius-bottom-left: 60%;
  --asymmetric-radius-bottom-right: 60%;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-main);
  background: linear-gradient(to bottom, #0f0c29, #302b63, #24243e);
  color: var(--text-color);
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Abstract Background Shapes */
.background-shapes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

.shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 60%;
  animation: float 10s infinite ease-in-out;
}

.shape-1 {
  width: 300px;
  height: 300px;
  background: var(--primary-color);
  top: -50px;
  left: -50px;
}

.shape-2 {
  width: 400px;
  height: 400px;
  background: var(--secondary-color);
  bottom: -100px;
  right: -100px;
  animation-delay: 2s;
}

.shape-3 {
  width: 200px;
  height: 200px;
  background: var(--accent-color);
  top: 40%;
  left: 60%;
  animation-delay: 4s;
}

@keyframes float {
  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(30px, -30px);
  }
}

/* Glassmorphism Container */
.glass-container {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: 480px;

  /* Mobile-first max width */
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
}

@media (width >= 768px) {
  .glass-container {
    height: 90vh;
    border-radius: 30px;
    box-shadow: 0 8px 32px 0 rgb(31 38 135 / 37%);
  }
}

/* Header */
.landing-header {
  padding: 20px 24px;
  display: flex;
  justify-content: center;

  /* Center logo */
  align-items: center;
  position: relative;
}

.logo {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 2px;
  background: linear-gradient(to right, #fff, #a29bfe);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 10px rgb(162 155 254 / 30%);
}

.nav-menu {
  position: absolute;
  right: 24px;
}

.menu-icon {
  width: 24px;
  height: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}

.menu-icon span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #fff;
  border-radius: 2px;
}

/* Main Content */
.landing-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 30px 40px;
  text-align: center;
}

.hero-title {
  font-size: 42px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 12px;
  background: linear-gradient(to bottom right, #fff, #dfe6e9);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-subtitle {
  font-size: 18px;
  font-weight: 300;
  color: rgb(255 255 255 / 80%);
  margin-bottom: 40px;
  letter-spacing: 1px;
}

/* Visual Element - AI Bubble */
.visual-element {
  width: 300px;
  height: 300px;
  margin-bottom: 60px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
}

/* AI Bubble Container */
.ai-bubble {
  position: relative;
  width: 180px;
  height: 180px;
  z-index: 2;
  animation: float-bubble 4s ease-in-out infinite;
}

.bubble-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgb(0 206 201 / 40%), transparent 70%);
  border-radius: 50%;
  animation: pulse-glow 3s ease-in-out infinite;
  filter: blur(20px);
}

.bubble-content {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgb(108 92 231 / 20%), rgb(162 155 254 / 15%));
  backdrop-filter: blur(10px);
  border-radius: 50% / 60% 60% 40% 40%;
  border: 2px solid rgb(0 206 201 / 30%);
  box-shadow:
    0 0 40px rgb(0 206 201 / 40%),
    inset 0 0 30px rgb(255 255 255 / 10%);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
  animation: bubble-pulse 3s ease-in-out infinite;

  --bubble-happy-intensity: 0;
  --bubble-angry-intensity: 0;
  --press-offset-x: 0;
  --press-offset-y: 0;
  --press-force: 0;
  --dent-x: 50%;
  --dent-y: 50%;
  --dent-strength: 0;
  --dent-size: 40px;

  touch-action: none;
  will-change: transform, border-radius;
  transition:
    transform 0.35s cubic-bezier(0.25, 0.9, 0.38, 1.05),
    border-radius 0.35s cubic-bezier(0.4, 0.9, 0.25, 1.05);
}

.bubble-content::before,
.bubble-content::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0%;
  transition: opacity 0.3s ease;
}

.bubble-content::before {
  background: radial-gradient(circle, rgb(0 206 201 / 35%), transparent 70%);
  opacity: calc(var(--bubble-happy-intensity, 0%));
}

.bubble-content::after {
  background: radial-gradient(circle, rgb(255 99 132 / 30%), transparent 70%);
  opacity: calc(var(--bubble-angry-intensity, 0%));
}

.bubble-content.happy {
  border-color: rgb(0 206 201 / calc(0.3 + var(--bubble-happy-intensity, 0)));
  animation: happy-pulse 2.8s ease-in-out infinite;
}

.bubble-content.angry {
  border-color: rgb(255 71 87 / calc(0.3 + var(--bubble-angry-intensity, 0)));
  animation: angry-pulse 1.4s ease-in-out infinite;
}

.bubble-content.squish-active,
.bubble-content.squish-pulse {
  animation: none;
  transform:
    translate3d(
      calc(var(--press-offset-x) * 12px),
      calc(var(--press-offset-y) * 12px),
      0
    )
    scale(calc(1 + (var(--press-force) * 0.12)))
    skew(var(--skew-x, 0deg), var(--skew-y, 0deg));
  border-radius:
    var(--asymmetric-radius-top-left, 50%)
    var(--asymmetric-radius-top-right, 50%)
    var(--asymmetric-radius-bottom-right, 60%)
    var(--asymmetric-radius-bottom-left, 60%);
}

.bubble-content.squish-pulse {
  transition:
    transform 0.32s cubic-bezier(0.4, 0.9, 0.25, 1.05),
    border-radius 0.32s cubic-bezier(0.4, 0.9, 0.25, 1.05);
}

.bubble-dent {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.bubble-dent::after {
  content: "";
  position: absolute;
  top: var(--dent-y, 50%);
  left: var(--dent-x, 50%);
  width: var(--dent-size, 40px);
  height: var(--dent-size, 40px);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(calc(0.9 + var(--dent-strength, 0) * 0.4));
  opacity: 0%;
  background: radial-gradient(circle, rgb(0 0 0 / 35%) 0%, rgb(0 0 0 / 10%) 60%, transparent 100%);
  filter: blur(4px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    width 0.2s ease,
    height 0.2s ease;
  mix-blend-mode: multiply;
}

.bubble-content.squish-active .bubble-dent::after {
  opacity: calc(25% + var(--dent-strength, 0%) * 50%);
}

.bubble-content.squish-pulse .bubble-dent::after {
  opacity: calc(35% + var(--dent-strength, 0%) * 55%);
}

.bubble-content.stroking {
  transform: scale(1.04);
}

.bubble-content.poking {
  animation: flinch 0.18s ease-in-out;
}

.bubble-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  z-index: 3;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.bubble-content.exploded {
  animation: explode 1s ease both;
  pointer-events: none;
  filter: brightness(1.5) saturate(1.4);
}

.bubble-content.exploded .bubble-face {
  opacity: 0%;
  transform: scale(0.6);
}

.bubble-content.exploded::after {
  content: "";
  position: absolute;
  inset: -15%;
  border-radius: inherit;
  background: radial-gradient(circle, rgb(255 255 255 / 85%), rgb(255 197 120 / 25%) 40%, transparent 70%);
  opacity: 0%;
  animation: explosion-flare 0.9s ease-out forwards;
  pointer-events: none;
  z-index: 4;
}

.face-brows {
  display: flex;
  justify-content: center;
  width: 200px;
  gap: 16px;
  padding: 4px 6px;
  margin-top: -16px;
  overflow: visible;
}

.brow {
  position: relative;
  width: 54px;
  height: 16px;

  --happy-intensity: var(--bubble-happy-intensity, 0);
  --angry-intensity: var(--bubble-angry-intensity, 0);

  transform-origin: bottom center;
  transition:
    transform 0.25s ease,
    width 0.25s ease,
    height 0.25s ease;
}

.brow::after {
  content: "";
  position: absolute;
  top: -15%;
  left: 0;
  width: 100%;
  height: 2.6px;
  transform: translateY(-50%);
  border-radius: 6px;
  background:
    linear-gradient(
      135deg,
      rgb(0 206 201 / 75%) 0%,
      rgb(0 206 201 / 95%) 55%,
      rgb(129 255 243 / 100%) 100%
    );
  filter:
    drop-shadow(0 10px 24px rgb(0 0 0 / 55%))
    drop-shadow(0 0 46px rgb(118 255 244 / 90%))
    drop-shadow(0 0 32px rgb(0 206 201 / 70%));
  box-shadow:
    0 0 16px rgb(118 255 244 / 55%),
    0 0 28px rgb(0 206 201 / 70%);
}

.brow::before {
  content: "";
  position: absolute;
  top: 115%;
  left: 0;
  width: 100%;
  height: 2.9px;
  border-radius: 10px;
  transform: translateY(-50%) scaleX(0.9);
  background:
    linear-gradient(
      135deg,
      rgb(0 160 156 / 45%) 0%,
      rgb(0 206 201 / 65%) 45%,
      rgb(120 255 247 / 80%) 100%
    );
  opacity: 70%;
  filter:
    drop-shadow(0 5px 14px rgb(0 0 0 / 45%))
    drop-shadow(0 0 20px rgb(118 255 244 / 50%));
  pointer-events: none;
}

.brow-left {
  transform-origin: right center;

  --smile-lift-left: calc(var(--happy-intensity) * 10px);
  --frown-drop-left: calc(var(--angry-intensity) * 5.6px);
  --smile-tilt-left: calc(var(--happy-intensity) * -6.4deg);
  --frown-tilt-left: calc(var(--angry-intensity) * 8deg);

  transform:
    translate(
      calc(-18px + (var(--happy-intensity) * -0.6px) + (var(--angry-intensity) * -2.4px)),
      calc(-11.5px - var(--smile-lift-left) + var(--frown-drop-left))
    )
    rotate(calc(-1.2deg + var(--smile-tilt-left) + var(--frown-tilt-left)))
    scaleX(calc(1.05 + (var(--happy-intensity) * 0.18) + (var(--angry-intensity) * 0.02)));
}

.brow-right {
  transform-origin: left center;

  --smile-lift-right: calc(var(--happy-intensity) * 6.4px);
  --frown-drop-right: calc(var(--angry-intensity) * 9.8px);
  --smile-tilt-right: calc(var(--happy-intensity) * 3.8deg);
  --frown-tilt-right: calc(var(--angry-intensity) * -9.6deg);

  transform:
    translate(
      calc(17px - (var(--happy-intensity) * 2.8px) - (var(--angry-intensity) * 0.2px)),
      calc(-8px - var(--smile-lift-right) + var(--frown-drop-right))
    )
    rotate(calc(0.2deg + var(--smile-tilt-right) + var(--frown-tilt-right)))
    scaleX(calc(1.12 + (var(--happy-intensity) * 0.05) + (var(--angry-intensity) * 0.11)));
}

.face-mouth-block-disabled {
  display: none;
}

/*
.face-mouth::before,
.face-mouth::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 46px;
  height: 1.5px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--mouth-color), rgb(255 255 255 / 85%));
  transform: translateY(-50%) rotate(-5deg);
  filter:
    drop-shadow(0 6px 14px rgb(0 0 0 / 35%)),
    drop-shadow(0 0 26px rgb(198 255 229 / 90%));
}

.face-mouth::before {
  left: 0;
}

.face-mouth::after {
  right: 0;
  transform: translateY(-50%) rotate(5deg);
}


.face-mouth {
  position: relative;
  width: 140px;
  height: 28px;
  transform: translateY(34px);
  pointer-events: none;
}

.face-mouth::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 130px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgb(205 255 229 / 95%), rgb(255 255 255 / 80%));
  transform: translate(-50%, -50%) rotate(0deg);
  box-shadow:
    0 6px 20px rgb(0 0 0 / 45%),
    0 0 32px rgb(198 255 229 / 95%);
}

.bubble-content.stroking .face-mouth::after {
  transform: translate(-50%, -60%) rotate(-10deg) scaleX(1.08);
  box-shadow:
    0 8px 18px rgb(0 0 0 / 35%),
    0 0 36px rgb(198 255 229 / 100%);
}

.bubble-content.poking .face-mouth::after {
  transform: translate(-50%, -40%) rotate(10deg) scaleX(0.95);
  box-shadow:
    0 4px 18px rgb(0 0 0 / 55%),
    0 0 30px rgb(255 180 200 / 80%);
  background: linear-gradient(90deg, rgb(255 200 210 / 90%), rgb(255 255 255 / 75%));
}

.bubble-content.happy .face-mouth {
  transform: translateY(30px);
}

.bubble-content.angry .face-mouth {
  transform: translateY(44px);
  --mouth-color: rgb(198 255 229 / 80%);
}

.bubble-content.happy .face-mouth::before,
.bubble-content.happy .face-mouth::after {
  background: linear-gradient(90deg, rgb(195 255 241 / 95%), rgb(255 255 255 / 85%));
}

.bubble-content.happy .face-mouth::before {
  transform: translateY(-50%) rotate(-2deg);
}

.bubble-content.happy .face-mouth::after {
  transform: translateY(-50%) rotate(2deg);
}

.bubble-content.angry .face-mouth::before,
.bubble-content.angry .face-mouth::after {
  background: linear-gradient(90deg, rgb(255 179 193 / 90%), rgb(255 255 255 / 80%));
}

.bubble-content.angry .face-mouth::before {
  transform: translateY(-50%) rotate(-6deg);
}

.bubble-content.angry .face-mouth::after {
  transform: translateY(-50%) rotate(6deg);
}
*/

.bubble-ripple-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}

/* Glow Trail Layer */
.bubble-glow-trail-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 2;
}

.glow-trail {
  position: absolute;
  width: 20px;
  height: 20px;
  left: calc(var(--trail-x, 50%) - 10px);
  top: calc(var(--trail-y, 50%) - 10px);
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      var(--trail-color, #6c5ce7) 0%,
      var(--trail-color, #6c5ce7) 40%,
      transparent 70%
    );
  box-shadow:
    0 0 12px var(--trail-color, #6c5ce7),
    0 0 24px var(--trail-color, #6c5ce7),
    0 0 36px var(--trail-color, #6c5ce7);
  animation: glow-trail-fade 1s ease-out forwards;
  pointer-events: none;
}

@keyframes glow-trail-fade {
  0% {
    transform: scale(1);
    opacity: 100%;
  }

  50% {
    transform: scale(1.2);
    opacity: 70%;
  }

  100% {
    transform: scale(1.5);
    opacity: 0%;
  }
}

.bubble-ripple {
  position: absolute;
  width: 18%;
  aspect-ratio: 1 / 1;
  left: calc(var(--x, 50%) - 9%);
  top: calc(var(--y, 50%) - 9%);
  border-radius: 50%;
  transform: scale(0.2);
  opacity: 85%;
  mix-blend-mode: screen;
  border: 2px solid rgb(255 255 255 / 60%);
  animation: ripple-burst 0.7s ease-out forwards;
  animation-delay: var(--delay, 0ms);
}

.bubble-ripple.stroke {
  border-color: rgb(140 246 222 / 70%);
}

.bubble-ripple.stroke-boost {
  border-color: rgb(140 246 222 / 90%);
  animation: ripple-burst 0.9s ease-out forwards;
}

.bubble-ripple.poke {
  border-color: rgb(255 179 193 / 90%);
  animation: ripple-burst-strong 0.55s ease-out forwards;
}

.bubble-ripple.explosion {
  border-color: rgb(255 255 255 / 80%);
  animation: ripple-explosion 1s ease-out forwards;
}

/* LEES Text */
.ai-text {
  font-size: 36px;
  font-weight: 700;
  color: var(--accent-color);
  text-shadow:
    0 0 20px var(--accent-color),
    0 0 40px var(--accent-color),
    0 0 60px var(--accent-color);
  z-index: 3;
  animation: text-glow 2s ease-in-out infinite;
  letter-spacing: 2px;
}

/* Inner Letters */
.inner-letters {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.inner-letter {
  position: absolute;
  font-size: 16px;
  font-weight: 600;
  color: rgb(255 255 255 / 60%);
  text-shadow: 0 0 10px rgb(255 255 255 / 50%);
  animation: float-letter 6s ease-in-out infinite;
}

.inner-letter-1 {
  top: 20%;
  left: 30%;
  animation-delay: 0s;
}

.inner-letter-2 {
  top: 30%;
  left: 70%;
  animation-delay: 0.5s;
}

.inner-letter-3 {
  top: 50%;
  left: 20%;
  animation-delay: 1s;
}

.inner-letter-4 {
  top: 60%;
  left: 80%;
  animation-delay: 1.5s;
}

.inner-letter-5 {
  top: 70%;
  left: 40%;
  animation-delay: 2s;
}

.inner-letter-6 {
  top: 80%;
  left: 60%;
  animation-delay: 2.5s;
}

/* Floating Letters Outside */
.floating-letters {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.letter {
  position: absolute;
  font-size: 20px;
  font-weight: 600;
  color: rgb(255 255 255 / 70%);
  text-shadow: 0 0 15px rgb(255 255 255 / 50%);
  animation: float-around 8s ease-in-out infinite;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.2s ease, opacity 0.2s ease;
  user-select: none;
}

.letter:hover {
  transform: scale(1.2);
  color: rgb(255 255 255 / 90%);
}

.letter.exploding {
  animation: letter-explode 0.5s ease-out forwards;
  pointer-events: none;
}

.letter.hidden {
  opacity: 0%;
  visibility: hidden;
}

@keyframes letter-explode {
  0% {
    transform: scale(1);
    opacity: 100%;
  }

  100% {
    transform: scale(0);
    opacity: 0%;
  }
}

/* 폭발형 터짐 효과 */
.letter-explosion-fragment {
  position: fixed;
  width: var(--fragment-size, 12px);
  height: var(--fragment-size, 12px);
  background: var(--fragment-color, #6c5ce7);
  border-radius: 2px;
  box-shadow:
    0 0 8px var(--fragment-color, #6c5ce7),
    0 0 16px var(--fragment-color, #6c5ce7),
    0 0 24px var(--fragment-color, #6c5ce7),
    2px 2px 4px var(--fragment-color, #6c5ce7),
    -2px -2px 4px var(--fragment-color, #6c5ce7);
  opacity: 90%;
  pointer-events: none;
  z-index: 1000;
  animation: explosion-burst-effect 0.5s ease-out forwards;
  animation-delay: var(--fragment-delay, 0s);
  transform: translate(-50%, -50%) rotate(var(--fragment-rotation, 0deg));
}

@keyframes explosion-burst-effect {
  0% {
    transform: translate(-50%, -50%) translate(0, 0) rotate(var(--fragment-rotation, 0deg)) scale(1);
    opacity: 100%;
  }

  50% {
    opacity: 80%;
  }

  100% {
    transform:
      translate(-50%, -50%)
      translate(var(--fragment-x, 0), var(--fragment-y, 0))
      rotate(calc(var(--fragment-rotation, 0deg) + 180deg))
      scale(0.3);
    opacity: 0%;
  }
}

.letter-1 {
  top: 10%;
  left: 20%;
  animation-delay: 0s;
}

.letter-2 {
  top: 15%;
  right: 25%;
  animation-delay: 1s;
}

.letter-3 {
  bottom: 30%;
  left: 15%;
  animation-delay: 2s;
}

.letter-4 {
  bottom: 25%;
  right: 20%;
  animation-delay: 3s;
}

.letter-5 {
  top: 50%;
  left: 5%;
  animation-delay: 4s;
}

.letter-6 {
  top: 45%;
  right: 5%;
  animation-delay: 5s;
}

.letter-7 {
  bottom: 10%;
  left: 50%;
  animation-delay: 6s;
}

.letter-8 {
  top: 30%;
  left: 50%;
  animation-delay: 7s;
}

.letter-9 {
  top: 5%;
  left: 50%;
  animation-delay: 8s;
}

.letter-10 {
  bottom: 5%;
  right: 10%;
  animation-delay: 9s;
}

.letter-11 {
  top: 60%;
  right: 30%;
  animation-delay: 10s;
}

.bubble-message-container {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0%;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 5;
  overflow: visible;
}

.bubble-message-container.visible {
  opacity: 100%;
}

.bubble-message {
  padding: 10px 14px;
  border-radius: 14px;
  color: #fff;
  font-weight: 600;
  font-size: 24px;
  transform: translateY(8px);
  transition: transform 0.3s ease, color 0.3s ease, text-shadow 0.3s ease;
  text-shadow: 0 0 12px rgb(0 0 0 / 40%);
  white-space: nowrap;
  overflow: visible;
}

.bubble-message-container.visible .bubble-message {
  transform: translateY(0);
}

.bubble-message.happy {
  color: #8cf6de;
  text-shadow: 0 0 18px rgb(140 246 222 / 70%);
}

.bubble-message.angry {
  color: #ffb3c1;
  text-shadow: 0 0 18px rgb(255 120 145 / 70%);
  transform: translateY(8px) rotate(-2deg);
}

.bubble-message-container.visible .bubble-message.angry {
  transform: translateY(0) rotate(-2deg);
}

/* Sparkle Particles */
.sparkles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.sparkle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgb(255 255 255 / 80%);
  border-radius: 50%;
  box-shadow: 0 0 10px rgb(255 255 255 / 80%);
  animation: sparkle-float 4s ease-in-out infinite;
}

.sparkle-1 {
  top: 20%;
  left: 30%;
  animation-delay: 0s;
}

.sparkle-2 {
  top: 40%;
  right: 25%;
  animation-delay: 0.5s;
}

.sparkle-3 {
  bottom: 30%;
  left: 40%;
  animation-delay: 1s;
}

.sparkle-4 {
  bottom: 20%;
  right: 35%;
  animation-delay: 1.5s;
}

.sparkle-5 {
  top: 60%;
  left: 20%;
  animation-delay: 2s;
}

.sparkle-6 {
  top: 50%;
  right: 15%;
  animation-delay: 2.5s;
}

.sparkle-7 {
  bottom: 50%;
  left: 60%;
  animation-delay: 3s;
}

.sparkle-8 {
  top: 30%;
  left: 70%;
  animation-delay: 3.5s;
}

/* Animations */
@keyframes float-bubble {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-15px) rotate(2deg);
  }
}

@keyframes pulse-glow {
  0%,
  100% {
    opacity: 60%;
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    opacity: 100%;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

@keyframes bubble-pulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.02);
  }
}

@keyframes text-glow {
  0%,
  100% {
    text-shadow:
      0 0 20px var(--accent-color),
      0 0 40px var(--accent-color),
      0 0 60px var(--accent-color);
  }

  50% {
    text-shadow:
      0 0 30px var(--accent-color),
      0 0 60px var(--accent-color),
      0 0 90px var(--accent-color);
  }
}

@keyframes float-letter {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 60%;
  }

  25% {
    transform: translate(10px, -10px) rotate(5deg);
    opacity: 80%;
  }

  50% {
    transform: translate(-5px, -15px) rotate(-5deg);
    opacity: 100%;
  }

  75% {
    transform: translate(-10px, -5px) rotate(3deg);
    opacity: 80%;
  }
}

@keyframes float-around {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 70%;
  }

  25% {
    transform: translate(15px, -20px) rotate(10deg);
    opacity: 100%;
  }

  50% {
    transform: translate(-10px, -30px) rotate(-10deg);
    opacity: 90%;
  }

  75% {
    transform: translate(-15px, -10px) rotate(5deg);
    opacity: 80%;
  }
}

@keyframes sparkle-float {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 80%;
  }

  50% {
    transform: translate(10px, -15px) scale(1.5);
    opacity: 100%;
  }
}

@keyframes happy-pulse {
  0%,
  100% {
    box-shadow:
      0 0 30px rgb(0 206 201 / 40%),
      inset 0 0 30px rgb(255 255 255 / 12%);
  }

  50% {
    box-shadow:
      0 0 45px rgb(0 206 201 / 60%),
      inset 0 0 40px rgb(255 255 255 / 18%);
  }
}

@keyframes angry-pulse {
  0%,
  100% {
    box-shadow:
      0 0 25px rgb(255 71 87 / 45%),
      inset 0 0 25px rgb(255 255 255 / 12%);
  }

  50% {
    box-shadow:
      0 0 55px rgb(255 71 87 / 65%),
      inset 0 0 40px rgb(255 255 255 / 18%);
  }
}

@keyframes flinch {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.95);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes explode {
  0% {
    opacity: 100%;
    transform: scale(1) rotate(0deg);
  }

  100% {
    opacity: 20%;
    transform: scale(1.6) rotate(18deg);
  }
}

@keyframes explosion-flare {
  0% {
    opacity: 0%;
    transform: scale(0.7);
  }

  40% {
    opacity: 90%;
    transform: scale(1);
  }

  100% {
    opacity: 0%;
    transform: scale(1.4);
  }
}

@keyframes ripple-burst {
  0% {
    transform: scale(0.2);
    opacity: 90%;
  }

  100% {
    transform: scale(1.4);
    opacity: 0%;
  }
}

@keyframes ripple-burst-strong {
  0% {
    transform: scale(0.25);
    opacity: 95%;
  }

  100% {
    transform: scale(1.8);
    opacity: 0%;
  }
}

@keyframes ripple-explosion {
  0% {
    transform: scale(0.3);
    opacity: 100%;
  }

  100% {
    transform: scale(2.4);
    opacity: 0%;
  }
}

/* CTA Button */
.cta-button {
  width: 100%;
  max-width: 300px;
  padding: 18px;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  background: rgb(255 255 255 / 10%);
  border: 1px solid rgb(255 255 255 / 30%);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
  box-shadow: 0 4px 15px rgb(0 0 0 / 20%);
  font-family: var(--font-main);
}

.cta-button:hover {
  background: rgb(255 255 255 / 20%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgb(0 0 0 / 30%);
  border-color: rgb(255 255 255 / 50%);
}

.cta-button:active {
  transform: translateY(0);
}

/* Floating GET STARTED Button */
.floating-button-container {
  position: fixed;
  bottom: 30px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  z-index: 10;
  padding: 0 20px;
  pointer-events: none;
}

.floating-button {
  width: 100%;
  max-width: 240px;
  padding: 12px 15px;
  font-size: 24px;
  font-weight: 600;
  background: rgb(255 255 255 / 5%);
  backdrop-filter: blur(20px);
  color: transparent;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 30px;
  cursor: grab;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgb(0 0 0 / 20%);
  font-family: var(--font-main);
  pointer-events: auto;
  user-select: none;
  touch-action: pan-x;
  letter-spacing: 0.5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.floating-button:active {
  cursor: grabbing;
}

.floating-button:hover {
  background: rgb(255 255 255 / 10%);
  border-color: rgb(255 255 255 / 25%);
  box-shadow: 0 8px 25px rgb(0 0 0 / 30%);
}

.floating-button .button-text {
  background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.floating-button .arrow-icon {
  animation: arrow-bounce 2s ease-in-out infinite;
  flex-shrink: 0;
  filter: drop-shadow(0 0 5px rgb(255 255 255 / 50%));
}

@keyframes arrow-bounce {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bubble-content,
  .bubble-content::before,
  .bubble-content::after,
  .ai-bubble,
  .bubble-glow,
  .ai-text,
  .wave-line,
  .inner-letter,
  .letter,
  .floating-button,
  .floating-button .arrow-icon {
    animation: none !important;
    transition: none !important;
  }
}