:root {
  color-scheme: light;
  --ink: #080808;
  --paper: #f2f3f5;
  --px: 0px;
  --py: 0px;
  --rx: 0deg;
  --ry: 0deg;
  --btn-x: 0px;
  --btn-y: 0px;
  font-family: Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
}

* {
  box-sizing: border-box;
}

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

body {
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
}

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

img {
  display: block;
}

.entrance-main,
.hero,
.hero-reveal,
.hero-drift,
.hero-drift picture {
  position: absolute;
  inset: 0;
}

.hero {
  overflow: hidden;
  isolation: isolate;
  background: var(--paper);
  perspective: 1200px;
  cursor: none;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  opacity: 0.045;
  mix-blend-mode: multiply;
}

.hero-reveal {
  z-index: 1;
  overflow: hidden;
  opacity: 0;
  transform: scale(1.15);
  animation: heroReveal 1.8s 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-drift {
  inset: -3%;
  transform: translate3d(var(--px), var(--py), 0) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

.hero-visual {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform-origin: 54% 46%;
  animation: swimForward 4.8s 1.8s cubic-bezier(0.55, 0.05, 0.45, 0.95) infinite;
  will-change: transform;
}

.hero.is-surging .hero-visual {
  animation-play-state: paused;
  transform: translate3d(0, -1.5%, 0) scale(1.14) rotate(0.35deg);
  transition: transform 460ms cubic-bezier(0.16, 1, 0.3, 1);
}

.entrance-header {
  position: fixed;
  top: 28px;
  left: 36px;
  z-index: 7;
  opacity: 0;
  transform: translateY(-12px);
  animation: elementIn 900ms 1.18s ease forwards;
}

.topshi-logo {
  display: block;
  width: 186px;
  height: 66px;
  overflow: hidden;
}

.topshi-logo svg {
  display: block;
  width: 186px;
  height: auto;
  transform: translateY(-2px);
}

.hand-echo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}

.hand-echo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hand-echo-left {
  clip-path: polygon(0 12%, 33% 12%, 34% 58%, 0 58%);
  transform-origin: 16% 34%;
  animation: leftHandStroke 2.8s 1.9s ease-in-out infinite;
}

.hand-echo-right {
  clip-path: polygon(64% 38%, 100% 38%, 100% 100%, 66% 100%);
  transform-origin: 84% 69%;
  animation: rightHandStroke 2.8s 2.35s ease-in-out infinite;
}

.flow-canvas {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  opacity: 0.52;
  mix-blend-mode: difference;
  pointer-events: none;
}

.cursor-orbit {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(0, 0, 0, 0.52);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0);
  transition: width 180ms ease, height 180ms ease, opacity 180ms ease, background 180ms ease;
}

.entrance-page.has-pointer .cursor-orbit {
  opacity: 1;
}

.entrance-page.is-over-discover .cursor-orbit {
  width: 72px;
  height: 72px;
  border-color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.08);
  mix-blend-mode: difference;
}

.discover-wrap {
  position: absolute;
  left: 50%;
  bottom: 9.5vh;
  z-index: 7;
  transform: translateX(-50%);
  opacity: 0;
  animation: discoverIn 900ms 1.48s ease forwards;
}

.discover-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-width: 154px;
  min-height: 54px;
  border: 1px solid #080808;
  border-radius: 50%;
  background: rgba(8, 8, 8, 0.92);
  color: #ffffff;
  padding: 0 24px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  transform: translate3d(var(--btn-x), var(--btn-y), 0);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
  transition: transform 180ms ease, background 220ms ease, color 220ms ease, box-shadow 220ms ease;
}

.discover-link i {
  display: inline-block;
  font-style: normal;
  font-size: 1.05rem;
  letter-spacing: 0;
  transition: transform 220ms ease;
}

.discover-link::after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 50%;
  transform: scale(0.88);
  opacity: 0.3;
  animation: discoverPulse 2.4s ease-in-out infinite;
}

.discover-link:hover,
.discover-link:focus-visible {
  background: #ffffff;
  color: #080808;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.2);
}

.discover-link:hover i,
.discover-link:focus-visible i {
  transform: translateX(5px);
}

.discover-link:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 5px;
}

.intro-curtain {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  background: #050505;
  animation: curtainReveal 1.3s 0.12s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

.entrance-page.is-leaving .intro-curtain {
  animation: curtainReturn 620ms cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

@keyframes curtainReveal {
  from { transform: translateY(0); }
  to { transform: translateY(-100%); }
}

@keyframes curtainReturn {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes heroReveal {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes swimForward {
  0%, 100% { transform: translate3d(-0.6%, 1.1%, 0) scale(1.015) rotate(-0.35deg); }
  42% { transform: translate3d(0.8%, -1.35%, 0) scale(1.095) rotate(0.42deg); }
  72% { transform: translate3d(0.2%, -0.35%, 0) scale(1.045) rotate(0deg); }
}

@keyframes leftHandStroke {
  0%, 22%, 100% { opacity: 0; filter: blur(0); transform: translate3d(0, 0, 0) scale(1); }
  40% { opacity: 0.24; filter: blur(1px); transform: translate3d(-1.1%, -0.55%, 0) scale(1.035); }
  62% { opacity: 0; filter: blur(3px); transform: translate3d(-2.1%, -1%, 0) scale(1.07); }
}

@keyframes rightHandStroke {
  0%, 30%, 100% { opacity: 0; filter: blur(0); transform: translate3d(0, 0, 0) scale(1); }
  48% { opacity: 0.24; filter: blur(1px); transform: translate3d(1.1%, 0.5%, 0) scale(1.035); }
  70% { opacity: 0; filter: blur(3px); transform: translate3d(2.2%, 1.05%, 0) scale(1.075); }
}

@keyframes elementIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes discoverIn {
  to {
    opacity: 1;
    transform: translateX(-50%);
  }
}

@keyframes discoverPulse {
  0%, 100% { opacity: 0.25; transform: scale(0.9); }
  50% { opacity: 0.65; transform: scale(1.06); }
}

@media (max-width: 900px) {
  .discover-wrap {
    bottom: 10vh;
  }
}

@media (max-width: 680px) {
  .entrance-header {
    top: 18px;
    left: 18px;
  }

  .topshi-logo,
  .topshi-logo svg {
    width: 148px;
  }

  .topshi-logo {
    height: 54px;
  }

  .hero-drift {
    inset: -2%;
  }

  .hero-visual {
    object-position: center 42%;
  }

  .hand-echo img {
    object-position: center 42%;
  }

  .hand-echo-left {
    clip-path: polygon(0 22%, 50% 22%, 50% 63%, 0 63%);
    transform-origin: 18% 42%;
  }

  .hand-echo-right {
    clip-path: polygon(49% 49%, 100% 49%, 100% 88%, 52% 88%);
    transform-origin: 82% 68%;
  }

  .discover-wrap {
    bottom: 8vh;
  }

  .discover-link {
    min-width: 146px;
    min-height: 52px;
  }
}

@media (hover: none), (pointer: coarse) {
  .hero {
    cursor: auto;
  }

  .cursor-orbit {
    display: none;
  }
}

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

  .hero-drift {
    transform: none;
  }
}