@import url(
  'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800;900&display=swap'
);

* {
  box-sizing: border-box;
}

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

body {
  display: flex;
  align-items: center;
  justify-content: center;

overflow: hidden;

background:
    radial-gradient(
      circle at 50% 42%,
      #18233d 0%,
      #0b1020 35%,
      #04060d 68%,
      #010204 100%
    );

font-family: "Inter", sans-serif;
}

/* =========================
   BACKGROUND GLOW
========================= */

body::before {
  content: "";

position: absolute;

width: 600px;
  height: 300px;

background:
    radial-gradient(
      ellipse,
      rgba(71, 125, 255, .15),
      transparent 65%
    );

filter: blur(20px);

animation:
    backgroundPulse 5s ease-in-out infinite;
}

/* =========================
   STAGE
========================= */

.stage {
  position: relative;

display: flex;
  align-items: center;
  justify-content: center;

perspective: 800px;
}

/* =========================
   LOGO
========================= */

.logo {
  position: relative;

display: flex;
  align-items: center;

gap: 28px;

z-index: 2;

animation:
    logoFloat 5s ease-in-out infinite;
}

/* =========================
   LOGO MARK
========================= */

.mark {
  position: relative;

width: 86px;
  height: 86px;

display: flex;
  align-items: center;
  justify-content: center;

border-radius: 24px;

background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.18),
      rgba(255,255,255,.025)
    );

border:
    1px solid rgba(255,255,255,.22);

box-shadow:
    0 15px 40px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.25),
    0 0 40px rgba(72,122,255,.18);

backdrop-filter:
    blur(12px);

overflow: hidden;

transform:
    rotate(-5deg);
}

/* animated color inside mark */

.mark::before {
  content: "";

position: absolute;

width: 150%;
  height: 150%;

background:
    conic-gradient(
      from 0deg,
      #6ae4ff,
      #6878ff,
      #c56cff,
      #ff70bb,
      #6ae4ff
    );

opacity: .45;

filter: blur(18px);

animation:
    rotateGlow 5s linear infinite;
}

/* glass shine */

.mark::after {
  content: "";

position: absolute;

width: 120%;
  height: 35%;

top: -10%;
  left: -60%;

background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.55),
      transparent
    );

transform:
    rotate(-35deg);

animation:
    markShine 4s ease-in-out infinite;
}

.mark span {
  position: relative;

z-index: 2;

font-size: 49px;
  font-weight: 900;

color: white;

text-shadow:
    0 2px 8px rgba(0,0,0,.3),
    0 0 20px rgba(110,220,255,.5);
}

/* =========================
   WORD AREA
========================= */

.word {
  position: relative;
}

/* =========================
   MAIN TEXT
========================= */

.main-text {
  position: relative;

display: block;

font-size:
    clamp(44px, 8vw, 92px);

line-height: .95;

font-weight: 900;

letter-spacing: -.055em;

color: transparent;

background:
    linear-gradient(
      110deg,
      #ffffff 0%,
      #9edfff 18%,
      #ffffff 31%,
      #777eff 46%,
      #db78ff 60%,
      #ffffff 74%,
      #6cecff 88%,
      #ffffff 100%
    );

background-size: 250% auto;

-webkit-background-clip: text;
  background-clip: text;

filter:
    drop-shadow(
      0 5px 15px rgba(0,0,0,.45)
    );

animation:
    textShimmer 6s linear infinite;
}

/* subtle ghost glow */

.main-text::before {
  content: attr(data-text);

position: absolute;

inset: 0;

color: #778cff;

opacity: .18;

filter: blur(14px);

z-index: -1;
}

/* sharp highlight */

.main-text::after {
  content: attr(data-text);

position: absolute;

inset: 0;

color: transparent;

-webkit-text-stroke:
    1px rgba(255,255,255,.18);

pointer-events: none;
}

/* =========================
   TAGLINE
========================= */

.tagline {
  margin-top: 14px;

font-size: 10px;
  font-weight: 400;

letter-spacing: .55em;

color:
    rgba(210,220,240,.55);
}

/* =========================
   ANIMATED LINE
========================= */

.line {
  position: relative;

margin-top: 17px;

width: 100%;
  height: 1px;

overflow: hidden;

background:
    rgba(255,255,255,.08);
}

.line-glow {
  position: absolute;

width: 35%;
  height: 100%;

left: -40%;

background:
    linear-gradient(
      90deg,
      transparent,
      #61dcff,
      #aa75ff,
      transparent
    );

box-shadow:
    0 0 10px #6edfff;

animation:
    lineMove 3.5s ease-in-out infinite;
}

/* =========================
   REFLECTION
========================= */

.reflection {
  position: absolute;

left: 112px;
  top: 94px;

font-size:
    clamp(44px, 8vw, 92px);

font-weight: 900;

letter-spacing: -.055em;

color:
    rgba(150,190,255,.07);

transform:
    scaleY(-1)
    skewX(-3deg);

filter: blur(2px);

mask-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.45),
      transparent 75%
    );

-webkit-mask-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.45),
      transparent 75%
    );

pointer-events: none;
}

/* =========================
   ANIMATIONS
========================= */

@keyframes textShimmer {

0% {
    background-position:
      200% center;
  }

100% {
    background-position:
      -50% center;
  }
}

@keyframes logoFloat {

0%,
  100% {
    transform:
      translateY(0)
      rotateX(0deg);
  }

50% {
    transform:
      translateY(-9px)
      rotateX(2deg);
  }
}

@keyframes rotateGlow {

from {
    transform:
      rotate(0deg);
  }

to {
    transform:
      rotate(360deg);
  }
}

@keyframes markShine {

0%,
  30% {
    left: -80%;
  }

65%,
  100% {
    left: 120%;
  }
}

@keyframes lineMove {

0% {
    left: -40%;
  }

100% {
    left: 110%;
  }
}

@keyframes backgroundPulse {

0%,
  100% {
    opacity: .6;

transform:
      scale(.9);
  }

50% {
    opacity: 1;

transform:
      scale(1.1);
  }
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 650px) {

.logo {
    gap: 16px;
  }

.mark {
    width: 58px;
    height: 58px;

border-radius: 17px;
  }

.mark span {
    font-size: 32px;
  }

.main-text {
    font-size: 42px;
  }

.tagline {
    font-size: 7px;
    letter-spacing: .35em;
  }

.reflection {
    display: none;
  }
}

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground