@font-face {
  font-family: "OUYZ Display";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("type.woff2") format("woff2");
  unicode-range: U+2E, U+4F, U+55, U+59, U+5A;
}

:root {
  --ink: #f2f1ee;
  --muted: rgba(242, 241, 238, 0.55);
  --faint: rgba(242, 241, 238, 0.27);
  --violet: #9a8cff;
  --mx: 0;
  --my: 0;
  --display: "OUYZ Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans: "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
}

* { box-sizing: border-box; }

html {
  background: #040405;
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  overflow-x: hidden;
  overflow-x: clip;
  color: var(--ink);
  background: radial-gradient(120% 90% at 50% 40%, #08080a 0%, #050506 50%, #030303 100%);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 静态胶片颗粒：消除暗部渐变色带，不参与动画 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: 0.03;
  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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}

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

a:focus-visible {
  outline: 1px solid rgba(170, 160, 255, 0.85);
  outline-offset: 6px;
  border-radius: 2px;
}

::selection { background: rgba(122, 106, 255, 0.3); color: var(--ink); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cover {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 24px 11vh;
  text-align: center;
  overflow: hidden;
  overflow: clip;
}

.mark {
  margin: 0 -0.14em 0 0; /* 让尾部句点向右悬挂，OUYZ 字群保持光学居中 */
  font-family: var(--display);
  font-size: clamp(4.6rem, min(15.5vw, 32vh), 15rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.048em;
  white-space: nowrap;
  /* 显式层叠上下文：光圈的 ::after 光晕用 z-index:-1 垫在字群之下，
     必须有它才能画在 body 不透明背景之上——否则整页会没有光。 */
  isolation: isolate;
  animation: rise 950ms 120ms cubic-bezier(0.18, 0.75, 0.2, 1) both;
}

/* 句点即光圈：全页唯一的光源 */
.aperture {
  position: relative;
  top: 0.012em; /* 圆形字形的基线过冲 */
  display: inline-block;
  width: 0.165em;
  height: 0.165em;
  margin-left: 0.06em;
  vertical-align: baseline;
  border-radius: 50%;
  background: radial-gradient(circle at 62% 34%, #12121c 0%, #08080d 52%, #040406 100%);
  box-shadow:
    inset 0 0 0.024em rgba(0, 0, 0, 0.92),
    inset -0.012em 0.012em 0.05em rgba(150, 136, 255, 0.14),
    0 0 0.06em rgba(196, 188, 255, 0.22),
    0 0 0.22em rgba(134, 118, 255, 0.18);
}

/* 发丝级虹彩边缘：常亮的微光基环 + 右上受光弧，46s 一圈，7s 一次呼吸 */
.aperture::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      transparent 0turn 0.04turn,
      rgba(178, 165, 255, 0.95) 0.09turn,
      rgba(240, 248, 255, 1) 0.135turn,
      rgba(214, 236, 245, 0.98) 0.16turn,
      rgba(150, 136, 255, 0.7) 0.22turn,
      transparent 0.3turn 0.57turn,
      rgba(244, 200, 150, 0.34) 0.655turn,
      transparent 0.73turn 1turn),
    rgba(160, 148, 255, 0.15);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2.6px), #000 calc(100% - 1px));
  mask: radial-gradient(closest-side, transparent calc(100% - 2.6px), #000 calc(100% - 1px));
  animation:
    aperture-spin 46s linear infinite,
    aperture-breathe 7s ease-in-out infinite;
}

/* 从缝隙漏出的光，是整个房间的照明 */
.aperture::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: min(76vmax, 1240px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(126, 110, 255, 0.16) 0%,
    rgba(100, 156, 196, 0.055) 30%,
    rgba(126, 110, 255, 0.022) 50%,
    transparent 68%);
  transform: translate(-50%, -50%) translate3d(calc(var(--mx) * 6px), calc(var(--my) * 5px), 0);
  pointer-events: none;
  contain: paint;
}

.slogan {
  margin: clamp(2.1rem, 4.6vh, 3.2rem) 0 0;
  font-size: clamp(0.95rem, 1.2vw, 1.2rem);
  font-weight: 400;
  letter-spacing: 0.32em;
  text-indent: 0.32em; /* 抵消末字后的字距，保持视觉居中 */
  color: var(--muted);
  animation: rise 800ms 380ms cubic-bezier(0.18, 0.75, 0.2, 1) both;
}

.doors {
  position: fixed;
  z-index: 4;
  left: 50%;
  bottom: max(4.4vh, calc(env(safe-area-inset-bottom, 0px) + 20px));
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 2rem;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: nowrap;
  animation: fade 900ms 640ms ease both;
}

.doors a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.32rem;
  transition: color 240ms ease;
}

.doors a span {
  color: var(--faint);
  font-size: 12px;
  transition: color 240ms ease, transform 240ms ease;
}

.doors a:hover { color: var(--ink); }
.doors a:hover span { color: var(--violet); transform: translate(1px, -1px); }

.doors__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--faint);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes aperture-spin {
  to { transform: rotate(1turn); }
}

@keyframes aperture-breathe {
  0%, 100% { opacity: 0.78; }
  50% { opacity: 1; }
}

@media (max-width: 760px) {
  .cover { padding-bottom: 13vh; }

  .mark { font-size: clamp(4.2rem, min(21vw, 26vh), 9rem); }

  .slogan {
    font-size: 0.95rem;
    letter-spacing: 0.3em;
    text-indent: 0.3em;
  }

  .doors { gap: 1.6rem; font-size: 12px; }
}

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

  .aperture::before { animation: none; }
}