:root {
  color-scheme: dark;
  --slide-duration: 3600ms;
  --drift-duration: 6200ms;
  --bg: #030506;
  --text: #eef7f8;
  --muted: #a4b1b7;
  --dim: #65737b;
  --line: rgba(189, 220, 230, .18);
  --accent: #36c8f2;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", "Microsoft YaHei UI", "PingFang SC", Arial, sans-serif;
  letter-spacing: 0;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
  background-size: 76px 76px;
  mix-blend-mode: screen;
  opacity: .5;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  padding: 0 clamp(22px, 4vw, 58px);
  background: linear-gradient(to bottom, rgba(3, 5, 6, .82), rgba(3, 5, 6, .18));
}

.brand,
.site-nav {
  display: flex;
  align-items: center;
}

.brand {
  gap: 12px;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: .08em;
}

.brand-mark {
  width: 8px;
  height: 32px;
  background: linear-gradient(to bottom, transparent, var(--accent), #ecfeff, transparent);
  box-shadow: 0 0 20px rgba(54, 200, 242, .55);
}

.site-nav {
  gap: clamp(24px, 4vw, 54px);
  color: #d7e2e6;
  font-size: 14px;
}

.site-nav a {
  position: relative;
  padding: 10px 0;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(.36);
  transform-origin: left;
}

.projector {
  position: relative;
  width: 100vw;
  min-height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  perspective: 1180px;
  perspective-origin: 64% 50%;
  background:
    radial-gradient(circle at 78% 22%, rgba(73, 144, 172, .2), transparent 28%),
    linear-gradient(120deg, #05090c 0%, #080d11 42%, #030506 100%);
}

.projector::before,
.projector::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.projector::before {
  background:
    radial-gradient(ellipse at 62% 48%, transparent 0%, transparent 34%, rgba(3, 5, 6, .5) 62%, rgba(3, 5, 6, .88) 100%),
    linear-gradient(90deg, rgba(3, 5, 6, .88), rgba(3, 5, 6, .26) 38%, rgba(3, 5, 6, .44));
}

.projector::after {
  background:
    linear-gradient(to bottom, rgba(3, 5, 6, .8), transparent 24%, transparent 68%, rgba(3, 5, 6, .84)),
    radial-gradient(circle at 50% 50%, transparent 0%, rgba(0, 0, 0, .32) 72%, rgba(0, 0, 0, .68) 100%);
}

.projector-beam {
  position: absolute;
  inset: 10% -10% 0 26%;
  z-index: 1;
  pointer-events: none;
  background:
    conic-gradient(from 258deg at 12% 48%, transparent 0deg, rgba(141, 210, 232, .1) 18deg, rgba(255, 255, 255, .22) 23deg, rgba(54, 200, 242, .12) 30deg, transparent 44deg);
  filter: blur(18px);
  opacity: .66;
  animation: beamPulse 6.4s ease-in-out infinite;
}

.slide {
  position: absolute;
  inset: clamp(90px, 12vh, 138px) clamp(34px, 7vw, 120px) clamp(78px, 10vh, 118px) clamp(34px, 20vw, 350px);
  z-index: 1;
  opacity: 0;
  transform: translate3d(8vw, 2vh, -460px) scale(.68) rotateX(5deg) rotateY(-5deg);
  transform-origin: center;
  transition:
    opacity 860ms cubic-bezier(.22, .72, .2, 1),
    filter 1100ms cubic-bezier(.16, .84, .18, 1);
  filter: brightness(.52) contrast(1.08) saturate(.86) blur(7px);
  backface-visibility: hidden;
  will-change: opacity, transform, filter;
  transform-style: preserve-3d;
}

.slide::before,
.slide::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.slide::before {
  z-index: 2;
  border: 1px solid rgba(207, 237, 244, .18);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .035),
    0 0 70px rgba(54, 200, 242, .13),
    0 28px 140px rgba(0, 0, 0, .74);
}

.slide::after {
  z-index: 3;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .09), transparent 10%, transparent 88%, rgba(255, 255, 255, .08)),
    linear-gradient(to bottom, rgba(255, 255, 255, .1), transparent 16%, transparent 84%, rgba(255, 255, 255, .08));
  mix-blend-mode: screen;
  opacity: .42;
}

.slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.08);
  backface-visibility: hidden;
  will-change: transform;
}

.slide.is-active {
  opacity: 1;
  animation: slideApproach var(--slide-duration) cubic-bezier(.12, .82, .18, 1) forwards;
}

.slide.is-active img {
  animation: imageDrift var(--drift-duration) cubic-bezier(.18, .72, .18, 1) forwards;
}

.hero-copy {
  position: relative;
  z-index: 5;
  width: min(780px, calc(100% - 44px));
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 110px 0 80px clamp(22px, 4vw, 72px);
  pointer-events: none;
}

.hero-copy h1 {
  max-width: 800px;
  margin: 0 0 26px;
  color: #f2fbfd;
  font-size: clamp(54px, 8vw, 128px);
  line-height: .94;
  font-weight: 800;
  letter-spacing: 0;
  text-shadow:
    0 0 18px rgba(255, 255, 255, .08),
    0 18px 50px rgba(0, 0, 0, .58);
}

.hero-copy p {
  max-width: 620px;
  margin: 0;
  color: rgba(220, 233, 238, .82);
  font-size: clamp(16px, 1.55vw, 21px);
  line-height: 1.86;
  text-shadow: 0 8px 30px rgba(0, 0, 0, .72);
}

.slide-status {
  position: fixed;
  right: clamp(24px, 4vw, 70px);
  bottom: clamp(24px, 5vw, 58px);
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--dim);
  font-size: 13px;
  letter-spacing: .08em;
}

.slide-status [data-current] {
  color: var(--accent);
  font-size: 24px;
  font-weight: 760;
}

.slide-status i {
  width: 74px;
  height: 1px;
  overflow: hidden;
  background: rgba(183, 218, 230, .2);
}

.slide-status i::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--accent);
  animation: progress var(--slide-duration) linear infinite;
}

@keyframes imageDrift {
  from { transform: scale(1.075) translate3d(.45%, 0, 0); }
  to { transform: scale(1.045) translate3d(-.45%, 0, 0); }
}

@keyframes slideApproach {
  0% {
    transform: translate3d(10vw, 2.2vh, -560px) scale(.58) rotateX(7deg) rotateY(-7deg);
    filter: brightness(.46) contrast(1.04) saturate(.78) blur(9px);
  }
  18% {
    filter: brightness(.68) contrast(1.1) saturate(.9) blur(4px);
  }
  72% {
    transform: translate3d(1vw, .2vh, -44px) scale(.96) rotateX(1deg) rotateY(-.7deg);
    filter: brightness(.88) contrast(1.15) saturate(.98) blur(.8px);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1) rotateX(0) rotateY(0);
    filter: brightness(.92) contrast(1.16) saturate(1) blur(0);
  }
}

@keyframes beamPulse {
  0%, 100% { opacity: .45; transform: translateX(-2%) scaleX(.95); }
  45% { opacity: .76; transform: translateX(1%) scaleX(1.04); }
}

@keyframes progress {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

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

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

  .site-header {
    min-height: 92px;
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
    padding-top: 22px;
    padding-bottom: 12px;
  }

  .site-nav {
    width: 100%;
    justify-content: space-between;
    gap: 18px;
    font-size: 15px;
  }

  .slide {
    inset: auto 0 84px 0;
    height: 42dvh;
    transform: translate3d(0, 4vh, -360px) scale(.7) rotateX(4deg);
    filter: brightness(.58) contrast(1.06) saturate(.86) blur(4px);
  }

  .slide::before {
    border-left: 0;
    border-right: 0;
  }

  .hero-copy {
    width: 100%;
    justify-content: center;
    padding: 110px 24px 42dvh;
  }

  .hero-copy h1 {
    max-width: 360px;
    font-size: clamp(56px, 17vw, 84px);
  }

  .hero-copy p {
    max-width: 330px;
    font-size: 17px;
  }

  .slide-status {
    right: 24px;
    bottom: 26px;
  }
}