/* Gate-only composition. Original field, entry glass and brand-film transitions remain in styles.css. */
.enter-gate:has(.gate-promo) { display: block; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y pinch-zoom; }
.enter-gate:has(.gate-promo) .enter-gate__atmosphere { overflow: clip; }
.enter-gate:has(.gate-promo).is-entering { overflow: hidden; }
.enter-gate__composition { contain: paint; }
.enter-gate__composition { position: relative; z-index: 3; width: 100%; min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 104px; padding: 116px 36px 70px; box-sizing: border-box; }
.gate-promo { --promo-rx: 0deg; --promo-ry: 0deg; --promo-px: 0px; --promo-py: 0px; --promo-light-x: 50%; --promo-light-y: 28%; position: relative; width: min(740px, 72vw, calc((100svh - 420px) * 1.7778)); min-width: 280px; aspect-ratio: 16 / 9; perspective: 1100px; flex: none; }
.gate-promo__entrance { z-index: 1; }
.gate-promo__entrance, .gate-promo__float, .gate-promo__tilt { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.gate-promo__tilt { transform: translateY(0) rotateX(var(--promo-rx)) rotateY(var(--promo-ry)); transition: transform 640ms cubic-bezier(.16,1,.3,1); }
.gate-promo.is-hovered[data-state="cover"] .gate-promo__tilt { transform: translateY(-8px) rotateX(var(--promo-rx)) rotateY(var(--promo-ry)) scale(1.012); transition-duration: 190ms; }
.gate-promo__play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; color: #fff; text-align: left; cursor: pointer; pointer-events: auto; transform: translateZ(1px); transform-style: preserve-3d; -webkit-tap-highlight-color: transparent; touch-action: pan-y pinch-zoom; }
.gate-promo__play:disabled { cursor: default; }
.gate-promo__background { position: absolute; inset: 0; border-radius: 18px; overflow: hidden; background: #566067; box-shadow: 0 22px 64px #0009, 0 0 0 1px #e6f1ff45, 0 1px 0 #fff6 inset; transform: translateZ(0); pointer-events: none; transition: box-shadow 500ms ease, opacity 180ms ease; }
.gate-promo__background img { width: 100%; height: 100%; object-fit: contain; }
.gate-promo__background::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #18232f80, transparent 65%), radial-gradient(ellipse at var(--promo-light-x) var(--promo-light-y), #fff3, transparent 68%); }
.gate-promo.is-hovered .gate-promo__background { box-shadow: 0 32px 70px #000b, 0 0 0 1px #eaf4ff80, 0 0 34px rgba(var(--gate-light-rgb), .1); }
/* Clip only the foreground group at the background plane; 2px absorbs perspective antialiasing at the lower edge. */
.gate-promo__person-window { position: absolute; inset: 0; z-index: 3; perspective: 1100px; clip-path: inset(-65% 0 2px round 0 0 18px 18px); pointer-events: none; }
.gate-promo__person { position: absolute; width: 63.65625%; aspect-ratio: 1358 / 1345; overflow: clip; left: 34.46875%; bottom: 1.6%; pointer-events: none; transform: translate3d(var(--promo-px), var(--promo-py), 40px); transform-origin: 60% bottom; transition: transform 500ms cubic-bezier(.16,1,.3,1), opacity 180ms ease; }
/* Only the exposed head extends the button's hit area; transparent image margins never cover Gate whitespace. */
.gate-promo__person img { position: absolute; width: 188.51252%; max-width: none; height: auto; left: -47.864507%; top: -7.063197%; }
.gate-promo__head-hit { position: absolute; left: 55%; top: -15%; width: 24%; height: 23%; border-radius: 48% 48% 0 0; transform: translate3d(var(--promo-px), var(--promo-py), 40px); }
.gate-promo__title-layer { position: absolute; inset: 0; z-index: 2; transform: translate3d(calc(var(--promo-px) * .35), calc(var(--promo-py) * .35), 0px); pointer-events: none; transition: transform 500ms cubic-bezier(.16,1,.3,1), opacity 180ms ease; }
.gate-promo__title { position: absolute; inset: 0; width: 100%; height: 100%; }
.gate-promo__title img { width: 100%; height: 100%; object-fit: contain; }
.gate-promo[data-language="zh"] .gate-promo__title { left: 2%; }
.gate-promo[data-language="en"] .gate-promo__title { left: 3%; }

.gate-promo__play-mark { position: absolute; bottom: 9%; left: 6%; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #ffffffb0; border-radius: 50%; background: #ffffff12; color: white; transform: translateZ(60px); pointer-events: none; transition: opacity 180ms ease; }
.gate-promo__play-mark svg { width: 14px; height: 14px; margin-left: 2px; }
.gate-promo__languages { position: absolute; z-index: 8; left: 0; top: -68px; display: flex; align-items: center; gap: 5px; padding: 2px 5px; border: 1px solid #d7e5f32b; border-radius: 12px; background: #12181d50; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.gate-promo__languages button { min-height: 42px; padding: 0 14px; border: 0; border-radius: 7px; background: transparent; color: #aeb8c0; font: 500 12px/1.2 Arial, "Microsoft YaHei UI", sans-serif; cursor: pointer; white-space: nowrap; transition: color 180ms ease, background 180ms ease; }
.gate-promo__languages button[aria-pressed="true"] { color: #fff; background: #ffffff0d; box-shadow: inset 0 -1px 0 #e5edf366; }
.gate-promo__languages > span { color: #ffffff45; font: 12px/1 Arial, sans-serif; }
.gate-promo__languages { transition: opacity 160ms ease-out; }
.gate-promo[data-state="leaving"] .gate-promo__languages { opacity: 0; pointer-events: none; }
.gate-promo__screen { position: absolute; inset: 0; z-index: 6; border-radius: 18px; overflow: hidden; background: #060809; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 160ms ease, visibility 160ms; }
.gate-promo__screen video { display: block; width: 100%; height: 100%; object-fit: contain; }
.gate-promo__close { position: absolute; right: 12px; top: 12px; z-index: 8; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid #ffffff80; border-radius: 50%; background: #050a10b8; color: white; font: 30px/1 Arial, sans-serif; cursor: pointer; }
.gate-promo__feedback { position: absolute; z-index: 7; inset: 30% 12% auto; display: grid; justify-items: center; gap: 12px; text-align: center; pointer-events: none; }
.gate-promo__message { margin: 0; padding: 8px 12px; border-radius: 8px; color: white; background: #000b; font: 14px/1.6 Arial, "Microsoft YaHei UI", sans-serif; }
.gate-promo__retry { pointer-events: auto; min-height: 44px; padding: 8px 18px; border: 1px solid #fff9; border-radius: 22px; background: #202830e6; color: #fff; font: 14px/1.5 Arial, "Microsoft YaHei UI", sans-serif; cursor: pointer; }
.gate-promo [hidden] { display: none !important; }
.gate-promo button:focus-visible { outline: 2px solid #f9e4a7; outline-offset: 5px; }
.gate-promo:not([data-state="cover"]) .gate-promo__screen { visibility: visible; opacity: 1; pointer-events: auto; }
.gate-promo:not([data-state="cover"]) .gate-promo__play { pointer-events: none; visibility: hidden; }
.gate-promo:not([data-state="cover"]) .gate-promo__tilt { transform: none; }
.gate-promo[data-state="leaving"] { pointer-events: none; }
.gate-promo[data-state="leaving"] .gate-promo__screen { visibility: hidden; opacity: 0; }
.enter-gate__composition .enter-gate__label { bottom: calc(100% + 26px); }
.enter-gate__composition .enter-gate__button-glow { pointer-events: none; }
.enter-gate__logo { position: absolute; z-index: 1; width: 72%; height: auto; object-fit: contain; transform: translateZ(31px); opacity: .83; filter: brightness(.92) drop-shadow(0 0 2px #ffffff33); pointer-events: none; transition: filter 260ms ease, opacity 260ms ease; }
.enter-gate__button:is(:hover, :focus-visible, :active) .enter-gate__logo { opacity: 1; filter: brightness(1.2) drop-shadow(0 0 6px #ffffffe0) drop-shadow(0 0 12px #e7faff66); }
.enter-gate:has(.gate-promo) .enter-gate__bloom { left: var(--gate-entry-x, 50%); top: var(--gate-entry-y, 50%); }

.gate-promo__float { transform: translateY(0); }
.gate-promo__aura { position: absolute; inset: -2px; border-radius: 22px; pointer-events: none; opacity: 0; box-shadow: 0 0 26px rgba(230,246,255,.2), 0 0 56px rgba(var(--gate-light-rgb),.14), 0 28px 52px #0006; transform: translateZ(-2px); }
.gate-promo.is-settled[data-state="cover"] .gate-promo__float { animation: gate-promo-float 7.6s ease-in-out infinite; }
.gate-promo.is-settled[data-state="cover"] .gate-promo__aura { animation: gate-promo-breathe 7.6s ease-in-out infinite; }
.gate-promo:not([data-state="cover"]) .gate-promo__float { animation: none; transform: none; }
.gate-promo:not([data-state="cover"]) .gate-promo__aura { animation: none; opacity: 0; }
.gate-promo:not(.is-ready) :is(.gate-promo__background, .gate-promo__person, .gate-promo__title-layer, .gate-promo__play-mark, .gate-promo__languages) { opacity: 0; }
.gate-promo.is-ready:not(.is-settled) .gate-promo__background { animation: gate-promo-background-in 850ms cubic-bezier(.12,.85,.22,1) both; }
.gate-promo.is-ready:not(.is-settled) .gate-promo__person { animation: gate-promo-person-in 900ms cubic-bezier(.12,.85,.22,1) 500ms both; }
.gate-promo.is-ready:not(.is-settled) .gate-promo__head-hit { animation: gate-promo-head-in 900ms cubic-bezier(.12,.85,.22,1) 500ms both; }
.gate-promo.is-ready:not(.is-settled) .gate-promo__title-layer { animation: gate-promo-copy-in 680ms linear 1300ms both; }
.gate-promo.is-ready:not(.is-settled) .gate-promo__play-mark { animation: gate-promo-fade-in 320ms ease-out 1600ms both; }
.gate-promo.is-ready:not(.is-settled) .gate-promo__languages { animation: gate-promo-fade-in 380ms ease-out 1980ms both; }
@keyframes gate-promo-background-in { from { opacity: 0; translate: 0 32px; scale: .94; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes gate-promo-person-in { from { opacity: 0; translate: 0 42px; scale: .92; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes gate-promo-head-in { from { translate: 0 42px; scale: .92; } to { translate: 0 0; scale: 1; } }
@keyframes gate-promo-copy-in {
  0% { opacity: 0; translate: -38px 0; animation-timing-function: cubic-bezier(.55,.04,.78,.52); }
  84% { opacity: 1; translate: -2px 0; animation-timing-function: cubic-bezier(.16,1,.3,1); }
  100% { opacity: 1; translate: 0 0; }
}
@keyframes gate-promo-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes gate-promo-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes gate-promo-breathe { 0%, 100% { opacity: .18; } 50% { opacity: .68; } }

@media (max-width: 760px) {
  .enter-gate__composition { padding: 104px 24px 50px; gap: 96px; }
  .gate-promo { width: min(580px, 100%); min-width: 0; }

  
  .gate-promo__languages { top: -72px; }
}
@media (max-width: 560px) {
  .enter-gate__composition { padding: 110px 18px 58px; gap: 98px; }
  .gate-promo { width: 100%; }
  .gate-promo__person { bottom: .8%; transform: translate3d(var(--promo-px), var(--promo-py), 18px); }
  .gate-promo__title-layer { transform: translate3d(0, 0, 0); }
  .gate-promo__person-window { clip-path: inset(-65% 0 2px round 0 0 12px 12px); }

  
  .gate-promo__background, .gate-promo__screen { border-radius: 12px; }
  .gate-promo__play-mark { width: 30px; height: 30px; bottom: 8%; left: 5%; transform: translateZ(26px); }
  .gate-promo__play-mark svg { width: 11px; height: 11px; }
  .gate-promo__languages { top: -68px; }
  .gate-promo__languages button { min-height: 44px; padding: 0 12px; }
  .gate-promo__close { right: 8px; top: 8px; }
  .gate-promo__feedback { inset: 34% 8% auto; gap: 4px; }
  .gate-promo__message { font-size: 12px; padding: 4px 8px; }
}
@media (max-height: 650px) and (min-width: 761px) { .gate-promo { width: min(500px, 72vw); } .enter-gate__composition { gap: 88px; } }
@media (prefers-reduced-motion: reduce) {
  .gate-promo .gate-promo__entrance, .gate-promo .gate-promo__float, .gate-promo .gate-promo__tilt { transform: none !important; }
  .gate-promo *, .gate-promo *::after { animation-duration: 120ms !important; animation-delay: 0ms !important; transition-duration: 120ms !important; }
  .gate-promo :is(.gate-promo__background, .gate-promo__person, .gate-promo__head-hit, .gate-promo__title-layer) { translate: none !important; scale: 1 !important; }
  .gate-promo .gate-promo__float, .gate-promo .gate-promo__aura { animation: none !important; }
  .gate-promo.is-settled[data-state="cover"] .gate-promo__aura { opacity: .2; }
}