@property --primary-color {
  syntax: "<color>";
  inherits: true;
  initial-value: #ffdd4a;
}

@property --secondary-color {
  syntax: "<color>";
  inherits: true;
  initial-value: #ff9854;
}

:root {
  --ink: #0a0a09;
  --paper: #fffbed;
  --pointer-x: 50vw;
  --pointer-y: 47vh;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  background: var(--paper);
  color: var(--ink);
  cursor: none;
}

.sky {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 100svh;
  overflow: hidden;
  background: var(--paper);
  perspective: 1100px;
}

.atmosphere,
.color-cloud,
.pointer-light,
.grain {
  position: absolute;
  inset: 0;
}

.atmosphere {
  z-index: -1;
  overflow: hidden;
  background: var(--paper);
}

.color-cloud {
  --primary-color: #ffdd4a;
  --secondary-color: #ff9854;
  inset: 47% auto auto 50%;
  width: min(72vmin, 720px);
  height: auto;
  aspect-ratio: 1;
  transform: translate(
    calc(-50% + var(--cloud-shift-x, 0px)),
    calc(-50% + var(--cloud-shift-y, 0px))
  );
  animation: palette-cycle 30s linear infinite;
  will-change: transform;
}

.cloud-puff {
  position: absolute;
  filter: blur(48px) saturate(1.05);
  opacity: 0.72;
  will-change: transform, border-radius;
}

.cloud-puff--primary {
  top: 3%;
  left: 0;
  width: 79%;
  height: 66%;
  border-radius: 63% 37% 52% 48% / 45% 58% 42% 55%;
  background: radial-gradient(ellipse at 54% 54%, var(--primary-color) 0 23%, color-mix(in srgb, var(--primary-color) 78%, transparent) 49%, transparent 76%);
  animation: drift-primary 23s -7s cubic-bezier(0.42, 0.08, 0.58, 0.92) infinite;
}

.cloud-puff--secondary {
  right: 0;
  bottom: 3%;
  width: 75%;
  height: 64%;
  border-radius: 42% 58% 38% 62% / 57% 41% 59% 43%;
  background: radial-gradient(ellipse at 47% 44%, var(--secondary-color) 0 20%, color-mix(in srgb, var(--secondary-color) 72%, transparent) 47%, transparent 76%);
  animation: drift-secondary 29s -17s cubic-bezier(0.4, 0.06, 0.6, 0.94) infinite;
}

.pointer-light {
  background:
    radial-gradient(circle 24px at var(--pointer-x) var(--pointer-y), #ffffff 0 100%, transparent 100%),
    radial-gradient(circle 115px at var(--pointer-x) var(--pointer-y), rgba(255, 255, 255, 0.76) 0%, rgba(255, 255, 255, 0.42) 30%, rgba(255, 255, 255, 0.18) 54%, transparent 80%);
  opacity: 0;
  transition: opacity 320ms ease;
  will-change: background;
}

body.is-pointer-active .pointer-light { opacity: 1; }

.grain {
  inset: 47% auto auto 50%;
  width: min(72vmin, 720px);
  height: auto;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  opacity: 0.045;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mask-image: radial-gradient(ellipse at center, #000 15%, transparent 72%);
  mix-blend-mode: multiply;
}

.hero {
  position: absolute;
  top: 47%;
  left: 50%;
  width: min(94vw, 1120px);
  text-align: center;
  transform: translate(-50%, -50%)
    translate3d(var(--text-shift-x, 0px), var(--text-shift-y, 0px), 0)
    rotateX(var(--text-rotate-x, 0deg))
    rotateY(var(--text-rotate-y, 0deg));
  transform-style: preserve-3d;
  transform-origin: center;
  animation: enter 1.2s cubic-bezier(0.2, 0.75, 0.25, 1) both;
  will-change: transform;
}

h1 {
  margin: 0;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(5rem, 11vw, 9.8rem);
  font-weight: 500;
  line-height: 0.86;
  letter-spacing: -0.055em;
  transform: translateZ(42px);
  animation: title-float 7s -2s ease-in-out infinite alternate;
  will-change: transform;
}

.hero p {
  margin: clamp(2rem, 3.6vw, 2.8rem) 0 0;
  font-family: "DM Sans", sans-serif;
  font-size: clamp(0.95rem, 1.45vw, 1.28rem);
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.5;
  transform: translateZ(20px);
  animation: subtitle-float 8.5s -5s ease-in-out infinite alternate;
  will-change: transform;
}

.coming-soon {
  position: absolute;
  bottom: clamp(2rem, 6vh, 4.75rem);
  left: 50%;
  margin: 0;
  font-family: "DM Sans", sans-serif;
  font-size: clamp(0.78rem, 1.1vw, 1rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  transform: translateX(-50%);
  white-space: nowrap;
  animation: footer-enter 1.2s 220ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

@keyframes palette-cycle {
  0%, 25% {
    --primary-color: #ffdd4a;
    --secondary-color: #ff9854;
  }
  33%, 58% {
    --primary-color: #ff9652;
    --secondary-color: #5eaee4;
  }
  66%, 91% {
    --primary-color: #65b4e6;
    --secondary-color: #ffdc4c;
  }
  100% {
    --primary-color: #ffdd4a;
    --secondary-color: #ff9854;
  }
}

@keyframes drift-primary {
  0%, 100% {
    transform: translate3d(calc(var(--cloud-near-x, 0px) - 6%), calc(var(--cloud-near-y, 0px) - 4%), 0) rotate(-7deg) scale(0.96);
    border-radius: 63% 37% 52% 48% / 45% 58% 42% 55%;
  }
  24% {
    transform: translate3d(calc(var(--cloud-near-x, 0px) + 18%), calc(var(--cloud-near-y, 0px) + 7%), 0) rotate(6deg) scale(1.06);
    border-radius: 44% 56% 65% 35% / 61% 38% 62% 39%;
  }
  51% {
    transform: translate3d(calc(var(--cloud-near-x, 0px) + 6%), calc(var(--cloud-near-y, 0px) + 28%), 0) rotate(12deg) scale(1.02);
    border-radius: 57% 43% 38% 62% / 36% 63% 37% 64%;
  }
  76% {
    transform: translate3d(calc(var(--cloud-near-x, 0px) - 9%), calc(var(--cloud-near-y, 0px) + 14%), 0) rotate(-2deg) scale(1.09);
    border-radius: 39% 61% 56% 44% / 62% 44% 56% 38%;
  }
}

@keyframes drift-secondary {
  0%, 100% {
    transform: translate3d(calc(var(--cloud-far-x, 0px) + 4%), calc(var(--cloud-far-y, 0px) + 5%), 0) rotate(8deg) scale(1.03);
    border-radius: 42% 58% 38% 62% / 57% 41% 59% 43%;
  }
  29% {
    transform: translate3d(calc(var(--cloud-far-x, 0px) - 20%), calc(var(--cloud-far-y, 0px) - 5%), 0) rotate(-5deg) scale(0.95);
    border-radius: 61% 39% 55% 45% / 39% 63% 37% 61%;
  }
  54% {
    transform: translate3d(calc(var(--cloud-far-x, 0px) - 8%), calc(var(--cloud-far-y, 0px) - 26%), 0) rotate(-11deg) scale(1.08);
    border-radius: 36% 64% 49% 51% / 64% 37% 63% 36%;
  }
  82% {
    transform: translate3d(calc(var(--cloud-far-x, 0px) - 27%), calc(var(--cloud-far-y, 0px) - 16%), 0) rotate(3deg) scale(1);
    border-radius: 58% 42% 64% 36% / 43% 60% 40% 57%;
  }
}

@keyframes enter {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 20px));
  }
}

@keyframes title-float {
  from { transform: translate3d(0, -3px, 42px); }
  to { transform: translate3d(0, 3px, 42px); }
}

@keyframes subtitle-float {
  from { transform: translate3d(0, 2px, 20px); }
  to { transform: translate3d(0, -2px, 20px); }
}

@keyframes footer-enter {
  from {
    opacity: 0;
    transform: translate(-50%, 16px);
  }
}

@media (max-width: 640px) {
  .hero {
    top: 45%;
    width: 92vw;
  }

  h1 {
    font-size: clamp(4.1rem, 21vw, 6rem);
    line-height: 0.9;
    letter-spacing: -0.065em;
  }

  .hero p {
    width: min(84vw, 23rem);
    margin: 1.55rem auto 0;
    font-size: 0.92rem;
    line-height: 1.55;
  }

  .color-cloud {
    inset: 45% auto auto 50%;
    width: min(112vw, 520px);
    height: auto;
    aspect-ratio: 1;
  }

  .pointer-light {
    background:
      radial-gradient(circle 18px at var(--pointer-x) var(--pointer-y), #ffffff 0 100%, transparent 100%),
      radial-gradient(circle 85px at var(--pointer-x) var(--pointer-y), rgba(255, 255, 255, 0.76) 0%, rgba(255, 255, 255, 0.4) 32%, rgba(255, 255, 255, 0.16) 56%, transparent 82%);
  }

  .grain {
    inset: 45% auto auto 50%;
    width: min(112vw, 520px);
    height: auto;
  }
}

@media (hover: none), (pointer: coarse) {
  body { cursor: auto; }
  .pointer-light {
    opacity: 0.28;
    animation: touch-glow 12s ease-in-out infinite alternate;
  }
}

@media (prefers-reduced-motion: reduce) {
  .color-cloud,
  .cloud-puff,
  .pointer-light,
  .hero,
  h1,
  .hero p,
  .coming-soon { animation: none; }
  .pointer-light { transition: none; }
}

@keyframes touch-glow {
  from { --pointer-x: 35vw; --pointer-y: 41vh; }
  to { --pointer-x: 68vw; --pointer-y: 50vh; }
}