:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: #07080b; color: #fff; }
.gateway { --travel: calc(max(680px, 100svh) * .09); position: relative; isolation: isolate; width: 100%; min-height: 680px; height: 100svh; overflow: hidden; cursor: pointer; user-select: none; }
.voice-bg, .tech-bg { position: absolute; inset: 0; z-index: -3; }
.voice-bg { background: radial-gradient(ellipse at 29% 25%, #283970 0, #141c39 30%, #090a13 67%); }
.voice-bg span { position: absolute; inset: 0; background-image: radial-gradient(circle, #c9b6ff 0 1px, transparent 2px); background-size: 197px 173px; opacity: .38; }
.tech-bg { background: radial-gradient(ellipse at 96% 94%, #3d2822, #090a0b 42%); clip-path: polygon(0 100%, 100% 0, 100% 100%, 0 100%); z-index: -2; transform-origin: 100% 100%; }
.seam { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.hover-area { position: absolute; inset: 0; cursor: pointer; outline: none; }
.hover-tech { clip-path: polygon(0 100%, 100% 0, 100% 100%, 0 100%); }
.voice-layer, .tech-layer { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.voice-layer { clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%); }
.tech-layer { clip-path: polygon(0 100%, 100% 0, 100% 100%, 0 100%); }
.brand { position: absolute; z-index: 2; pointer-events: none; top: 3.5%; left: 4.8%; display: flex; align-items: center; gap: 13px; font-size: 21px; font-weight: 800; letter-spacing: .075em; }
.brand img { object-fit: contain; }
.product { position: absolute; z-index: 1; text-align: center; }
.voice { left: 3%; top: 15%; width: 48%; }
.product-label { display: inline-block; margin: 0 0 1.3em; padding: .55em 1em; border: 1px solid #ffffff35; border-radius: 999px; color: #eee8ff; font-weight: 700; font-size: clamp(12px, 1vw, 16px); }
.product-label::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: #c9b6ff; vertical-align: 2px; }
.voice h1 { display: grid; place-items: center; margin: 0; color: #e4d9ff; font-size: clamp(56px, 7.1vw, 125px); font-weight: 900; line-height: .87; letter-spacing: -.04em; perspective: 1000px; }
.tech { right: 2.5%; top: 46%; width: 47%; }
.tech h2 { display: grid; place-items: center; margin: 0; font-size: clamp(56px, 7.1vw, 125px); font-weight: 900; line-height: .87; letter-spacing: -.04em; perspective: 1000px; }
.title-language { grid-area: 1 / 1; white-space: nowrap; }
.title-char { display: inline-block; backface-visibility: hidden; transform-origin: center; }
.title-en { opacity: 0; }
.tech .title-en { font-size: clamp(42px, 5.4vw, 90px); line-height: .9; }
@media (prefers-reduced-motion: no-preference) {
  .title-en { opacity: 1; }
  .title-en .title-char { opacity: 0; transform: perspective(600px) rotateX(-90deg); }
  .title-zh .title-char { animation: show-chinese 19s cubic-bezier(.4, 0, .2, 1) infinite; animation-delay: calc(var(--i) * .14s); }
  .title-en .title-char { animation: show-english 19s cubic-bezier(.4, 0, .2, 1) infinite; animation-delay: calc(var(--i) * .14s); }
  .closing-en { opacity: 1; }
  .closing-en .closing-char { opacity: 0; transform: perspective(600px) rotateX(-90deg); }
  .closing-zh .closing-char { animation: show-chinese 19s cubic-bezier(.4, 0, .2, 1) infinite; animation-delay: calc(var(--i) * .14s); }
  .closing-en .closing-char { animation: show-english 19s cubic-bezier(.4, 0, .2, 1) infinite; animation-delay: calc(var(--i) * .14s); }
  .is-entering .title-char { animation-play-state: paused; }
  .is-entering .closing-char { animation-play-state: paused; }
}
@keyframes show-chinese {
  0%, 26.316% { opacity: 1; transform: perspective(600px) rotateX(0); }
  31.579% { opacity: 0; transform: perspective(600px) rotateX(90deg); }
  91.053% { opacity: 0; transform: perspective(600px) rotateX(-90deg); }
  96.316%, 100% { opacity: 1; transform: perspective(600px) rotateX(0); }
}
@keyframes show-english {
  0%, 35.789% { opacity: 0; transform: perspective(600px) rotateX(-90deg); }
  41.053%, 76.316% { opacity: 1; transform: perspective(600px) rotateX(0); }
  81.579%, 100% { opacity: 0; transform: perspective(600px) rotateX(90deg); }
}
.enter { display: inline-flex; pointer-events: none; cursor: pointer; align-items: center; gap: 22px; margin-top: 2.2em; padding: 7px 7px 7px 21px; border-radius: 14px; color: #17131d; font-size: 15px; font-weight: 800; text-decoration: none; transition: transform .28s cubic-bezier(.16, 1, .3, 1), box-shadow .28s ease, background-color .28s ease; }
.enter span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; font-size: 20px; transition: transform .3s cubic-bezier(.16, 1, .3, 1), background-color .25s ease; }
.enter-voice { background: #ded0ff; }
.enter-voice span { background: #17121f; color: white; }
.enter-tech { background: #f6eee2; border-radius: 999px; }
.enter-tech span { background: #f9dcae; border-radius: 50%; }
.gateway:has(.enter-voice:focus-visible) .enter-voice, .gateway:has(.enter-tech:focus-visible) .enter-tech { outline: 3px solid white; outline-offset: 5px; }
.tech-image { position: absolute; right: -3%; top: 76%; width: min(55%, 850px); transform: rotate(3deg); opacity: .8; }
.tech-image img { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 15px 70px #000; }
.closing { display: grid; place-items: center; position: absolute; pointer-events: none; bottom: 2.5%; left: 50%; z-index: 2; margin: 0; transform: translateX(-50%); width: max-content; max-width: 90%; text-align: center; font-size: clamp(12px, 1.1vw, 17px); font-weight: 600; letter-spacing: .18em; text-shadow: 0 2px 8px #000; perspective: 600px; }
.closing-language { grid-area: 1 / 1; white-space: nowrap; }
.closing-en { opacity: 0; font-size: clamp(8px, .82vw, 12px); letter-spacing: .14em; }
.closing-char { display: inline-block; backface-visibility: hidden; transform-origin: center; }
.arrival-preview { position: fixed; inset: 0; z-index: 10; width: 100%; height: 100%; border: 0; opacity: 0; pointer-events: none; background: #08090a; color-scheme: dark; transition: opacity .8s cubic-bezier(.22, .72, .28, 1); }
.arrival-preview.is-visible { opacity: 1; pointer-events: auto; }
.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; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .tech-bg, .hover-tech, .voice-layer, .tech-layer { transition: clip-path 3.4s cubic-bezier(.22, .72, .28, 1); }
  .seam, .product, .tech-image { transition: transform 3.4s cubic-bezier(.22, .72, .28, 1); }
  .gateway:not(.is-entering):has(.hover-voice:hover) .enter-voice,
  .gateway:not(.is-entering):has(.enter-voice:focus-visible) .enter-voice { transform: translateY(-4px) scale(1.02); box-shadow: 0 18px 38px -18px #000c, inset 0 1px 0 #ffffff55; }
  .gateway:not(.is-entering):has(.hover-voice:hover) .enter-voice span,
  .gateway:not(.is-entering):has(.enter-voice:focus-visible) .enter-voice span { transform: translate(3px, -3px) rotate(5deg); background: #251839; }
  .gateway:not(.is-entering):has(.hover-tech:hover) .enter-tech,
  .gateway:not(.is-entering):has(.enter-tech:focus-visible) .enter-tech { transform: translateY(-4px) scale(1.02); box-shadow: 0 18px 38px -18px #000c, inset 0 1px 0 #ffffff70; }
  .gateway:not(.is-entering):has(.hover-tech:hover) .enter-tech span,
  .gateway:not(.is-entering):has(.enter-tech:focus-visible) .enter-tech span { transform: translate(3px, -3px) rotate(5deg); background: #ffe1b4; }
  .gateway:not(.is-entering):has(.hover-voice:hover) .voice { transform: translate(1vw, var(--travel)) scale(1.04); }
  .gateway:not(.is-entering):has(.hover-voice:hover) .tech { transform: translate(1vw, var(--travel)); }
  .gateway:not(.is-entering):has(.hover-voice:hover) .tech-image { transform: translate(1vw, var(--travel)) rotate(3deg); }
  .gateway:not(.is-entering):has(.hover-tech:hover) .voice { transform: translate(-1vw, calc(-1 * var(--travel))); }
  .gateway:not(.is-entering):has(.hover-tech:hover) .tech { transform: translate(-1vw, calc(-1 * var(--travel))) scale(1.04); }
  .gateway:not(.is-entering):has(.hover-tech:hover) .tech-image { transform: translate(-1vw, calc(-1 * var(--travel))) rotate(3deg) scale(1.04); }
}
@media (min-width: 761px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
  .gateway:not(.is-entering):has(.hover-voice:hover) :is(.tech-bg, .hover-tech, .tech-layer) { clip-path: polygon(0 109%, 100% 9%, 100% 100%, 0 100%); }
  .gateway:not(.is-entering):has(.hover-voice:hover) .voice-layer { clip-path: polygon(0 0, 100% 0, 100% 9%, 0 109%); }
  .gateway:not(.is-entering):has(.hover-voice:hover) .seam { transform: translateY(9%); }
  .gateway:not(.is-entering):has(.hover-tech:hover) :is(.tech-bg, .hover-tech, .tech-layer) { clip-path: polygon(0 91%, 100% -9%, 100% 100%, 0 100%); }
  .gateway:not(.is-entering):has(.hover-tech:hover) .voice-layer { clip-path: polygon(0 0, 100% 0, 100% -9%, 0 91%); }
  .gateway:not(.is-entering):has(.hover-tech:hover) .seam { transform: translateY(-9%); }
}
@media (max-width: 760px) {
  .gateway { --travel: calc(max(720px, 100svh) * .06); min-height: 720px; }
  .brand { top: 22px; left: 24px; font-size: 16px; gap: 9px; }
  .brand img { width: 23px; height: 31px; }
  :is(.tech-bg, .hover-tech, .tech-layer) { clip-path: polygon(0 58%, 100% 42%, 100% 100%, 0 100%); }
  .voice-layer { clip-path: polygon(0 0, 100% 0, 100% 42%, 0 58%); }
  .seam { top: 42%; height: 16%; }
  .voice { top: 15%; left: 5%; width: 90%; }
  .product-label { font-size: 12px; margin-bottom: 1em; }
  .voice h1 { font-size: clamp(43px, 11vw, 75px); }
  .tech { top: 59%; right: 5%; width: 90%; }
  .tech h2 { font-size: clamp(43px, 11vw, 75px); }
  .enter { margin-top: 1.3em; font-size: 14px; }
  .enter span { width: 34px; height: 34px; }
  .tech-image { right: -13%; top: 83%; width: 78%; opacity: .47; }
  .closing { bottom: 2%; font-size: 11px; letter-spacing: .1em; }
}
@media (max-width: 760px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
  .gateway:not(.is-entering):has(.hover-voice:hover) :is(.tech-bg, .hover-tech, .tech-layer) { clip-path: polygon(0 64%, 100% 48%, 100% 100%, 0 100%); }
  .gateway:not(.is-entering):has(.hover-voice:hover) .voice-layer { clip-path: polygon(0 0, 100% 0, 100% 48%, 0 64%); }
  .gateway:not(.is-entering):has(.hover-voice:hover) .seam { transform: translateY(37.5%); }
  .gateway:not(.is-entering):has(.hover-tech:hover) :is(.tech-bg, .hover-tech, .tech-layer) { clip-path: polygon(0 52%, 100% 36%, 100% 100%, 0 100%); }
  .gateway:not(.is-entering):has(.hover-tech:hover) .voice-layer { clip-path: polygon(0 0, 100% 0, 100% 36%, 0 52%); }
  .gateway:not(.is-entering):has(.hover-tech:hover) .seam { transform: translateY(-37.5%); }
}
@media (prefers-reduced-motion: no-preference) {
  .is-entering .tech-bg { transition: transform 2.4s cubic-bezier(.65, 0, .35, 1); will-change: transform; }
  .is-entering :is(.voice-layer, .tech-layer) { clip-path: none; transition: none; }
  .is-entering .seam { transition: opacity .5s ease; opacity: 0; }
  .is-entering .product { transition: transform 2.4s cubic-bezier(.65, 0, .35, 1), opacity .5s ease; will-change: transform, opacity; }
  .is-entering .brand, .is-entering .closing, .is-entering .tech-image, .is-entering .enter { transition: opacity .5s ease; opacity: 0; }
  .is-entering .hover-area { pointer-events: none; }
  .is-entering .enter { pointer-events: none; }
  .entering-voice .tech-bg { transform: translate3d(0, 110%, 0); }
  .entering-tech .tech-bg { transform: scale(2.5); }
  .entering-voice .voice { transform: translate(23vw, 15vh) scale(1.07); }
  .entering-tech .tech { transform: translate(-24vw, 4vh) scale(1.07); }
  .entering-voice .tech, .entering-tech .voice { opacity: 0; }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .entering-voice .voice { transform: translateY(22vh) scale(1.07); }
  .entering-tech .tech { transform: translateY(-14vh) scale(1.07); }
}
@media (prefers-reduced-motion: reduce) {
  .arrival-preview, .is-entering .tech-bg, .is-entering .product { transition: none; }
  .closing-en { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .arrival-preview.is-returning { opacity: 0; transform: scale(1.012); filter: blur(3px); pointer-events: none; transition: opacity .7s ease, transform 1.1s cubic-bezier(.22, .72, .28, 1), filter .7s ease; }
  .gateway.is-returning { cursor: default; }
  .gateway.is-returning .hover-area { pointer-events: none; }
  .gateway.is-returning .tech-bg { transform: none; transition: transform 1.4s cubic-bezier(.22, .72, .28, 1); }
  .gateway.is-returning .product { opacity: 1; transform: none; transition: transform 1.4s cubic-bezier(.22, .72, .28, 1), opacity .65s ease; }
  .gateway.is-returning .tech-image { opacity: .8; transform: rotate(3deg); transition: transform 1.4s cubic-bezier(.22, .72, .28, 1), opacity .65s ease; }
  .gateway.is-returning .enter { pointer-events: none; }
  .gateway.is-returning .brand,
  .gateway.is-returning .closing,
  .gateway.is-returning .enter { opacity: 1; transition: opacity .7s ease .18s; }
  .gateway.is-returning .seam { opacity: 1; transition: opacity .7s ease .22s; }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .gateway.is-returning .tech-image { opacity: .47; }
}