:root {
  --bg: #f8f6f1;
  --ink-soft: rgba(52, 49, 45, 0.34);
  --huu: rgba(255, 255, 255, 0.76);
  --cyan: rgba(116, 221, 220, 0.26);
  --blue: rgba(155, 190, 255, 0.24);
  --lavender: rgba(183, 157, 255, 0.22);
  --peach: rgba(255, 185, 150, 0.18);
  --lime: rgba(184, 239, 153, 0.18);
  --shadow: rgba(54, 48, 42, 0.13);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue",
    Arial, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: #2f2d2a;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

button {
  font: inherit;
}

.calm-space {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  width: 100vw;
  min-height: 100svh;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.86), transparent 34%),
    linear-gradient(145deg, #fbfaf7 0%, #f4f3ee 50%, #f8f6f2 100%);
}

.prism-field {
  position: absolute;
  inset: -10vh -18vw;
  z-index: -2;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 16% 24%, rgba(161, 232, 224, 0.3), transparent 27%),
    radial-gradient(ellipse at 78% 72%, rgba(255, 200, 153, 0.2), transparent 29%),
    radial-gradient(ellipse at 42% 94%, rgba(174, 154, 255, 0.16), transparent 32%);
  animation: fieldDrift 38s ease-in-out infinite alternate;
}

.prism-field::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    linear-gradient(118deg, transparent 0 23%, rgba(112, 222, 216, 0.18) 28%, transparent 40%),
    linear-gradient(125deg, transparent 16%, rgba(176, 154, 255, 0.16) 34%, transparent 48%),
    linear-gradient(133deg, transparent 33%, rgba(255, 185, 146, 0.14) 50%, transparent 63%),
    linear-gradient(141deg, transparent 48%, rgba(184, 238, 154, 0.15) 62%, transparent 76%);
  filter: blur(22px);
  opacity: 0.74;
  transform: rotate(-8deg) scale(1.08);
  animation: prismPass 30s ease-in-out infinite alternate;
}

.prism-field::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 8px 8px;
  opacity: 0.05;
  mix-blend-mode: screen;
}

.ray,
.soft-glow {
  position: absolute;
  pointer-events: none;
}

.ray {
  width: 18vw;
  min-width: 150px;
  height: 120vh;
  top: -10vh;
  border-radius: 999px;
  filter: blur(26px);
  transform: rotate(32deg);
  opacity: 0.32;
}

.ray-a {
  left: 6vw;
  background: linear-gradient(to bottom, transparent, var(--cyan), transparent);
  animation: rayFloat 24s ease-in-out infinite alternate;
}

.ray-b {
  left: 39vw;
  background: linear-gradient(to bottom, transparent, var(--lavender), transparent);
  animation: rayFloat 29s ease-in-out 2s infinite alternate-reverse;
}

.ray-c {
  left: 68vw;
  background: linear-gradient(to bottom, transparent, var(--peach), var(--lime), transparent);
  animation: rayFloat 34s ease-in-out 5s infinite alternate;
}

.soft-glow {
  width: 52vmin;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(45px);
  opacity: 0.42;
}

.glow-a {
  left: 9vw;
  top: 17vh;
  background: radial-gradient(circle, rgba(134, 223, 221, 0.24), transparent 66%);
  animation: glowFloat 32s ease-in-out infinite alternate;
}

.glow-b {
  right: 5vw;
  bottom: 9vh;
  background: radial-gradient(circle, rgba(255, 181, 210, 0.18), transparent 68%);
  animation: glowFloat 35s ease-in-out 4s infinite alternate-reverse;
}

.brand {
  position: relative;
  grid-row: 1;
  align-self: end;
  justify-self: center;
  margin: 0 0 clamp(42px, 7vh, 78px);
  color: var(--ink-soft);
  font-size: clamp(0.66rem, 1.8vw, 0.86rem);
  font-weight: 300;
  letter-spacing: 0.72em;
  text-indent: 0.72em;
  line-height: 1;
  user-select: none;
}

.bubble-stage {
  grid-row: 2;
  display: grid;
  place-items: center;
  min-height: min(48vh, 560px);
  padding: 0 24px;
}

.huu-bubble {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(210px, 52vmin, 380px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: default;
  color: var(--huu);
  background:
    radial-gradient(circle at 31% 29%, rgba(255, 255, 255, 0.84) 0 4%, transparent 18%),
    radial-gradient(circle at 68% 24%, rgba(255, 255, 255, 0.64) 0 4%, transparent 20%),
    radial-gradient(circle at 50% 52%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02) 55%, transparent 70%),
    radial-gradient(circle at 43% 42%, rgba(194, 236, 238, 0.24), transparent 58%),
    radial-gradient(circle at 61% 62%, rgba(213, 198, 255, 0.18), transparent 56%);
  box-shadow:
    inset 18px 17px 36px rgba(255, 255, 255, 0.48),
    inset -24px -22px 48px rgba(151, 190, 218, 0.16),
    0 30px 82px -48px var(--shadow);
  outline: none;
  transform: translate3d(0, 0, 0);
  animation: bubbleBreath 9.5s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
}

.huu-bubble:focus-visible {
  box-shadow:
    inset 18px 17px 36px rgba(255, 255, 255, 0.48),
    inset -24px -22px 48px rgba(151, 190, 218, 0.16),
    0 30px 82px -48px var(--shadow),
    0 0 0 1px rgba(255, 255, 255, 0.62),
    0 0 0 8px rgba(160, 214, 222, 0.16);
}

.huu-bubble::before,
.huu-bubble::after {
  content: "";
  position: absolute;
  inset: -1.5%;
  border-radius: inherit;
  pointer-events: none;
}

.huu-bubble::before {
  background:
    conic-gradient(
      from 18deg,
      rgba(117, 219, 222, 0.55),
      rgba(201, 164, 255, 0.44),
      rgba(255, 185, 199, 0.34),
      rgba(255, 232, 151, 0.38),
      rgba(133, 233, 206, 0.42),
      rgba(117, 219, 222, 0.55)
    );
  filter: blur(1.8px);
  opacity: 0.62;
  mask: radial-gradient(circle, transparent 67%, #000 69%, #000 74%, transparent 76%);
  -webkit-mask: radial-gradient(circle, transparent 67%, #000 69%, #000 74%, transparent 76%);
  animation: rimDrift 18s linear infinite;
}

.huu-bubble::after {
  inset: 2%;
  border: 1px solid rgba(255, 255, 255, 0.54);
  box-shadow:
    inset 0 0 1px rgba(255, 255, 255, 0.8),
    inset 0 0 34px rgba(255, 255, 255, 0.2);
  opacity: 0.74;
}

.bubble-sheen {
  position: absolute;
  inset: 10% 13% auto auto;
  width: 28%;
  height: 19%;
  border-radius: 999px 999px 999px 60%;
  background: rgba(255, 255, 255, 0.54);
  filter: blur(9px);
  opacity: 0.44;
  transform: rotate(-23deg);
}

.bubble-ring {
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 19% 27%, rgba(255, 255, 255, 0.58), transparent 16%),
    radial-gradient(circle at 78% 74%, rgba(134, 223, 221, 0.2), transparent 21%),
    radial-gradient(circle at 20% 78%, rgba(204, 176, 255, 0.15), transparent 24%);
  opacity: 0.62;
  mix-blend-mode: screen;
}

.huu-text {
  position: relative;
  z-index: 2;
  color: var(--huu);
  font-size: clamp(2.2rem, 8vw, 4.5rem);
  font-weight: 200;
  letter-spacing: 0.23em;
  text-indent: 0.23em;
  line-height: 1;
  text-shadow: 0 0 22px rgba(255, 255, 255, 0.22);
  opacity: 0.8;
  user-select: none;
  animation: wordQuiet 9.5s ease-in-out infinite;
}

.huu-bubble.is-releasing {
  animation: bubbleRelease 1.65s ease-out forwards;
}

.huu-bubble.is-releasing .huu-text {
  animation: wordRelease 1.65s ease-out forwards;
}

.huu-bubble.is-releasing::before {
  animation: rimRelease 1.65s ease-out forwards;
}

.huu-bubble.is-returning {
  animation: bubbleReturn 2.8s ease-out both, bubbleBreath 9.5s ease-in-out 2.8s infinite;
}

@keyframes fieldDrift {
  from { transform: translate3d(-1.8%, -1%, 0) scale(1.02); }
  to { transform: translate3d(1.5%, 1.2%, 0) scale(1.06); }
}

@keyframes prismPass {
  from { transform: translate3d(-2%, -1%, 0) rotate(-11deg) scale(1.08); opacity: 0.55; }
  to { transform: translate3d(3%, 2%, 0) rotate(-6deg) scale(1.12); opacity: 0.78; }
}

@keyframes rayFloat {
  from { transform: translate3d(-7%, -2%, 0) rotate(31deg); opacity: 0.2; }
  to { transform: translate3d(9%, 4%, 0) rotate(36deg); opacity: 0.38; }
}

@keyframes glowFloat {
  from { transform: translate3d(-4%, 3%, 0) scale(0.95); }
  to { transform: translate3d(4%, -2%, 0) scale(1.12); }
}

@keyframes bubbleBreath {
  0%, 100% { transform: translate3d(0, 0, 0) scale(0.988); }
  50% { transform: translate3d(0, -8px, 0) scale(1.012); }
}

@keyframes rimDrift {
  to { transform: rotate(360deg); }
}

@keyframes wordQuiet {
  0%, 100% { opacity: 0.66; filter: blur(0.15px); }
  50% { opacity: 0.84; filter: blur(0); }
}

@keyframes bubbleRelease {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
  55% {
    opacity: 0.5;
    transform: translate3d(0, -4px, 0) scale(1.06);
    filter: blur(1px);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -14px, 0) scale(1.18);
    filter: blur(14px);
  }
}

@keyframes wordRelease {
  0% { opacity: 0.78; transform: scale(1); filter: blur(0); }
  100% { opacity: 0; transform: scale(1.18); filter: blur(8px); }
}

@keyframes rimRelease {
  0% { opacity: 0.62; filter: blur(1.8px); }
  100% { opacity: 0.08; filter: blur(15px); }
}

@keyframes bubbleReturn {
  0% {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.92);
    filter: blur(16px);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(0.988);
    filter: blur(0);
  }
}

@media (max-width: 560px) {
  .brand {
    margin-bottom: clamp(34px, 6vh, 58px);
    letter-spacing: 0.58em;
    text-indent: 0.58em;
  }

  .bubble-stage {
    min-height: 42vh;
  }

  .huu-bubble {
    width: clamp(220px, 70vmin, 310px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}