body:is([data-intro=open],[data-intro=transition]) { overflow: hidden; }
body[data-intro=open] :is(.cosmic-nebula,.liquid-lens,.horizon) { animation-play-state: paused; }
dialog.intro-screen {
  position: fixed; inset: 0; width: 100vw; height: 100%; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; border-radius: 0; background: #030711;
  box-shadow: none; overflow: hidden; isolation: isolate; color: #f4faff;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  opacity: 1; transform: scale(1); filter: blur(0);
  transition: opacity 1.55s cubic-bezier(.22,.65,.25,1), transform 1.65s cubic-bezier(.22,.65,.25,1), filter 1.45s ease;
}
dialog.intro-screen::backdrop { background: transparent; backdrop-filter: none; }
body[data-glass=ready] dialog.intro-screen { background: #030711; }
dialog.intro-screen[data-leaving=true] { opacity: 0; transform: scale(1.16); filter: blur(14px); pointer-events: none; }
.intro-screen #intro-video {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%;
  max-height: none; object-fit: cover; object-position: center; border-radius: 0;
}
/* Keep landscape-film identity safe in near-square windows. Phones use the native portrait film. */
@media (min-aspect-ratio: 4/5) and (max-aspect-ratio: 3/2) { .intro-screen[data-format=landscape] #intro-video { object-fit: contain; } }
@media (max-aspect-ratio: 4/5) { .intro-screen[data-format=landscape] #intro-video { object-fit: contain; } }
.intro-top {
  position: absolute; z-index: 2; inset: max(22px,env(safe-area-inset-top)) 5vw auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.intro-top>span { font-size: 12px; letter-spacing: .13em; color: #d8eaf7; text-shadow: 0 2px 10px #000; }
.intro-controls {
  position: absolute; z-index: 2; left: 5vw; right: 5vw; bottom: max(28px,env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.intro-gate { position: absolute; z-index: 2; top: 70%; left: 5vw; right: 5vw; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.intro-screen :is(#close-video,#intro-sound,#intro-start,#intro-silent) {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: auto; min-height: 44px; padding: 11px 19px; border: 1px solid #e3f4ff80;
  border-radius: 30px; color: #f4faff; background: #0c19285c;
  box-shadow: inset 0 1px 1px #fff7,inset 0 -1px 1px #d2e9ff33;
  backdrop-filter: blur(5px); font: 500 13px/1.4 'Avenir Next',Avenir,'Segoe UI',sans-serif;
}
.intro-screen :is(#intro-start,#intro-silent,#intro-sound)[hidden] { display: none; }
.intro-screen #intro-start { background: #d4eff024; padding: 15px 26px; }
.intro-screen #intro-silent { border-color: transparent; box-shadow: none; background: transparent; padding: 5px 12px; }
.intro-screen #intro-sound svg { width: 18px; height: 18px; }
.intro-screen #video-status { max-width: 460px; margin: 0; font-size: 12px; line-height: 1.6; color: #d2e5f5; }
.intro-screen #video-status:empty { display: none; }
.intro-screen #video-status:not(:empty) { flex-basis: 100%; order: 3; }
.intro-top,.intro-controls,.intro-gate { transition: opacity .35s ease; }
.intro-screen[data-leaving=true] :is(.intro-top,.intro-controls,.intro-gate) { opacity: 0; }
#entry-flare { position: fixed; z-index: 20; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 46%,#bdefff60 0%,#6bc8e21a 28%,transparent 66%); }
body[data-arrival=true] #entry-flare { animation: entry-flare 1.8s ease-out both; }
body[data-arrival=true] :is(.site-header,main,footer) { animation: site-arrival 1.65s cubic-bezier(.2,.7,.2,1) both; }
@keyframes entry-flare { 0% { opacity: 0; } 35% { opacity: .8; } 100% { opacity: 0; } }
@keyframes site-arrival { from { opacity: .12; filter: blur(9px); } to { opacity: 1; filter: blur(0); } }
.site-sound { position: fixed; z-index: 25; right: max(24px,env(safe-area-inset-right)); bottom: max(24px,env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 12px 17px; border-radius: 30px; border: 1px solid #e3f4ff60; color: #eaf9ff; background: #122c4280; backdrop-filter: blur(6px); box-shadow: inset 0 1px 1px #fff6; font-size: 12px; }
.site-sound svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.site-sound[aria-pressed=true] .sound-muted,.site-sound[aria-pressed=false] .sound-waves { display: none; }
@media(max-width:600px) {
  .site-sound { width: 46px; height: 46px; padding: 11px; right: max(16px,env(safe-area-inset-right)); bottom: max(16px,env(safe-area-inset-bottom)); }
  .site-sound span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media(max-height:500px) { .intro-gate { top: 65%; flex-direction: row; justify-content: center; gap: 6px; } .intro-top>span { display: none; } .intro-top { justify-content: flex-end; } }
@media(prefers-reduced-motion:reduce) {
  dialog.intro-screen,.intro-top,.intro-controls,.intro-gate { transition: none; }
  dialog.intro-screen[data-leaving=true] { transform: none; filter: none; }
  body[data-arrival=true] :is(#entry-flare,.site-header,main,footer) { animation: none; }
}
html[lang=ru] h1 { font-size: clamp(42px,4.2vw,63px); letter-spacing: -.055em; }
html[lang=zh-Hans] { font-family: 'Avenir Next','PingFang SC','Microsoft YaHei','Noto Sans CJK SC',sans-serif; }
html[lang=zh-Hans] h1 { font-size: clamp(42px,4.7vw,64px); letter-spacing: .015em; line-height: 1.3; }
@media(max-width:800px) { html[lang=ru] h1 { font-size: clamp(37px,7.2vw,59px); } }
@media(max-width:480px) {
  .intro-top { left: 18px; right: 18px; }
  .intro-top>span { font-size: 10px; letter-spacing: .05em; }
  .intro-controls { left: 18px; right: 18px; }
  .intro-screen :is(#close-video,#intro-sound,#intro-start) { font-size: 12px; padding: 10px 15px; }
  html[lang=ru] h1 { font-size: clamp(32px,8.3vw,40px); }
  html[lang=ru] .hero-actions { gap: 8px; }
  html[lang=ru] .hero-actions .primary-link { padding-inline: 13px; }
  html[lang=zh-Hans] h1 { font-size: clamp(34px,9.5vw,46px); }
}