@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&display=swap");

:root {
  color-scheme: dark;
  --viewport-height: 100vh;
}

@supports (height: 100dvh) {
  :root {
    --viewport-height: 100dvh;
  }
}

* {
  box-sizing: border-box;
}

html {
  width: 100vw;
  height: var(--viewport-height);
  overflow: hidden;
}

body {
  width: 100vw;
  height: var(--viewport-height);
  min-height: var(--viewport-height);
  overflow: hidden;
  margin: 0;
  padding: 0;
  font-family: "Space Grotesk", "Sarabun", sans-serif;
  color: white;
  background: linear-gradient(0deg, #62a0d8 0%, #2178d1 50%, #085cb3 100%);
  background-attachment: fixed;
}

main {
  width: 100vw;
  height: var(--viewport-height);
  min-height: var(--viewport-height);
  display: flex;
  align-items: stretch;
  justify-content: center;
  position: relative;
}

.sky-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: var(--viewport-height);
  background: linear-gradient(0deg, #62a0d8 0%, #2178d1 50%, #085cb3 100%);
  z-index: -1;
  transition: filter 0.3s ease;
}

svg {
  width: 0;
  height: 0;
  position: absolute;
}

.cloud-container {
  width: 100vw;
  height: var(--viewport-height);
  position: absolute;
  top: 0;
  left: 0;
  filter: url(#filter);
}

.cloud {
  anchor-name: --cloud;
  width: min(680px, 90vw);
  aspect-ratio: 2.4 / 1;
  height: auto;
  max-height: 45vh;
  min-height: 180px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: default;
  will-change: auto;
  touch-action: none;
  border: none;
  outline: none;
}

textarea::-webkit-resizer,
textarea::-moz-resizer {
  display: none;
}

.resize-handle {
  position: absolute;
  position-anchor: --cloud;
  top: anchor(bottom);
  left: anchor(right);
  transform: translate(-100%, -100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  font-size: 42px;
  color: white;
}

.cloud-container:has(.cloud:hover) ~ .resize-handle {
  opacity: 0.5;
}

.message-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(90vw, 420px);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: 28px;
  background: rgba(6, 18, 43, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(18px);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-shadow: 0 25px 50px rgba(3, 7, 18, 0.45);
}

.message-card p {
  margin: 0;
  font-size: clamp(1.1rem, 4vw, 1.6rem);
  font-weight: 500;
}

.message-card a {
  font-size: clamp(1.1rem, 4vw, 1.5rem);
  font-weight: 600;
  color: white;
  text-decoration: none;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.35);
  transition: background 0.2s ease, transform 0.2s ease;
}

.message-card a:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

@keyframes lightning-glow {
  0% {
    opacity: 0.8;
  }

  15%,
  100% {
    opacity: 0;
  }
}

.lightning-glow {
  position: absolute;
  position-anchor: --cloud;
  top: anchor(center);
  left: anchor(center);
  --lightning-x: 0px;
  --lightning-y: 0px;
  transform: translate(
    calc(-50% + var(--lightning-x)),
    calc(-50% + var(--lightning-y))
  );
  width: 33%;
  height: 33%;
  border-radius: 50%;
  background: radial-gradient(closest-side, white, rgba(255, 255, 255, 0));
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: overlay;
  filter: blur(50px);
}

.lightning-glow.flash {
  animation: lightning-glow 0.8s ease-out;
}

@media (max-width: 540px) {
  body {
    overflow: hidden;
  }

  .cloud {
    width: min(420px, 88vw);
    max-width: 92vw;
    max-height: 40vh;
    min-height: 160px;
    top: 26%;
  }

  .message-card {
    width: min(88vw, 360px);
    padding: clamp(1.2rem, 5vw, 1.65rem);
    border-radius: 22px;
    gap: 0.6rem;
    top: 60%;
    bottom: auto;
    transform: translate(-50%, -50%);
  }

  .message-card p,
  .message-card a {
    word-break: break-word;
  }
}