* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: sans-serif; background: #0b0e1a; color: #fff; overflow-x: hidden; }

nav {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0 2rem;
  height: 56px;
  background: rgba(11,14,26,0.9);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: sticky;
  top: 0;
  z-index: 10;
}
.logo { font-size: 1.2rem; font-weight: 700; margin-right: auto; }
nav a { color: #aaa; text-decoration: none; font-size: 0.9rem; }
nav a:hover { color: #fff; }
nav button {
  cursor: pointer;
  padding: 0.45rem 1.2rem;
  border: none;
  border-radius: 999px;
  background: #ff3cac;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
}

.banner {
  position: relative;
  width: 80vw;
  min-width: 400px;
  height: 50vw;
  min-height: 400px;
  margin: 2rem auto;
  overflow: hidden;
  background: #0b0e1a;
  border-radius: 12px;

  /* dissolve zones: image fades in entering from right, fades out exiting left.
     purely spatial — tied to position within the banner, not animation timing. */
  mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}

/*
  Split-axis arc technique:
  .char-x  → translateX only, linear → constant horizontal speed
  .char-y  → translateY only, ease-in-out → smooth rise & fall
  Combined they trace a fluid parabolic (rainbow) arc.
*/

.char-x {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: move-x 3.6s linear infinite;
}

.char-y {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 55%;
  width: auto;
  transform: scaleX(-1); /* face direction of travel */
  animation: move-y 3.6s ease-in-out infinite;
}

@keyframes move-x {
  from { transform: translateX(calc(100% + 200px)); }
  to   { transform: translateX(-200px); }
}

@keyframes move-y {
  0%   { transform: scaleX(-1) translateY(0%); }
  50%  { transform: scaleX(-1) translateY(-80%); }
  100% { transform: scaleX(-1) translateY(0%); }
}