/* ===== Заставка Zebra Coffee ===== */
#zebra-intro{position:fixed;top:0;left:0;width:100%;height:100vh;height:100dvh;z-index:99999;overflow:hidden;overscroll-behavior:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;font-family:"Inter","Segoe UI",Helvetica,Arial,sans-serif;color:#fff;-webkit-font-smoothing:antialiased}
html.zi-seen #zebra-intro{display:none}
/* пока идёт заставка, сайта не видно (в том числе на телефонах) */
html.zi-intro,html.zi-intro body{background:#031211!important;overflow:hidden!important}
html.zi-intro body>*:not(#zebra-intro):not(#topbar){visibility:hidden!important}
body.zi-lock{overflow:hidden}
#zebra-intro.opening{opacity:0;pointer-events:none;transition:opacity 1.1s cubic-bezier(.4,0,.2,1) .1s}

.zi-dark{position:absolute;inset:0;background:radial-gradient(ellipse 85% 65% at 50% 42%,#073431 0,#031211 52%,#000 100%)}
/* фон выбора языка = фон сайта Zebra Coffee */
.zi-teal{display:none;position:absolute;inset:0;opacity:0;transition:opacity 1.4s cubic-bezier(.4,0,.2,1);
background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.15) 0%,transparent 40%),radial-gradient(circle at 80% 80%,rgba(255,255,255,.12) 0%,transparent 40%),radial-gradient(circle at 50% 50%,rgba(0,0,0,.1) 0%,transparent 60%),radial-gradient(circle at 50% 30%,#00c9c9 0%,#00a3a3 50%,#007a7a 100%)}
#zebra-intro.lang-show .zi-teal{display:none;opacity:1}

.zi-logo{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(30px,6vh,46px);transition:opacity 1.1s ease,transform 1.3s cubic-bezier(.4,0,.2,1)}
#zebra-intro.phase-out .zi-logo{opacity:0;transform:scale(1.07)}
.zi-mark{display:grid;place-items:center}
.zi-mark>svg{grid-area:1/1;width:min(74vw,320px);height:auto;overflow:visible}
.zi-glow{filter:blur(14px);opacity:0;animation:zi-glow-in 1.8s 7.4s ease forwards}
@keyframes zi-glow-in{to{opacity:.5}}
.zp{fill:#fff;fill-opacity:0;stroke:#5ff5e4;stroke-width:.9;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;
animation:zi-draw var(--t) cubic-bezier(.45,.05,.35,1) var(--d) forwards,zi-fillin 1.1s var(--fill) ease forwards,zi-tone 1.1s var(--fill) ease forwards}
@keyframes zi-draw{to{stroke-dashoffset:0}}
@keyframes zi-fillin{to{fill-opacity:1}}
@keyframes zi-tone{to{stroke-opacity:0}}
.zi-load{width:min(52vw,220px);height:4px;border-radius:4px;background:rgba(255,255,255,.16)}
.zi-load i{display:block;height:100%;width:0;border-radius:4px;background:#fff;box-shadow:0 0 10px rgba(255,255,255,.35);animation:zi-load 8.8s cubic-bezier(.4,0,.2,1) forwards}
@keyframes zi-load{0%{width:0}8%{width:7%}22%{width:25%}38%{width:39%}52%{width:62%}70%{width:75%}88%{width:94%}100%{width:100%}}

@media (prefers-reduced-motion:reduce){.zp{animation-duration:.01s!important;animation-delay:0s!important}}

.zi-skip{position:relative;overflow:hidden;z-index:3;min-width:190px;height:46px;padding:0 28px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:rgba(255,255,255,.08);color:#fff;font:600 .95rem 'Onest','Inter',Arial,sans-serif;letter-spacing:.04em;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .25s,color .25s,opacity .4s;opacity:0;animation:zi-skip-in .6s 1s ease forwards}
.zi-skip:hover{border-color:#fff;color:#fff}
.zi-skip span{margin-left:4px}
.zi-skip:disabled{opacity:0 !important;pointer-events:none}
@keyframes zi-skip-in{to{opacity:1}}

/* загрузка — прямо на фоне кнопки «Пропустить»: где прошла заливка, текст меняет цвет */
.zi-load{display:none}
.zi-skip{width:190px;min-width:0;box-sizing:border-box;padding:0}
.zi-skip .zi-t{position:relative;display:block;width:100%;text-align:center;font-weight:600;color:#fff;white-space:nowrap}
.zi-skip-fill{font-style:normal;position:absolute;left:0;top:0;bottom:0;width:0;overflow:hidden;background:linear-gradient(90deg,#14c9b8,#7ff7e8);animation:zi-load 8.8s cubic-bezier(.4,0,.2,1) forwards}
.zi-skip-fill .zi-t{position:absolute;left:0;top:0;width:188px;height:100%;display:flex;align-items:center;justify-content:center;color:#031211}
