/* "Zeryapp is back" pop-up (ZS-419). Markup: Views/Shared/_AppPromo.cshtml, logic: js/app-promo.js.
   Below 768px a bottom sheet (Google penalises full-screen pop-ups on phones; a sheet is allowed),
   from 768px a centred card with a QR code. The site's Cairo has weights 400-600 only, so the
   headline thickens 600 with a hairline stroke instead of loading another font file. */

/* While it is open the page behind does not scroll (wheel, touch, keys). The gutter keeps the
   scrollbar's place, so the page does not jump sideways when the bar goes. */
html.zy-promo-open, html.zy-promo-open body { overflow: hidden; }
html.zy-promo-open { scrollbar-gutter: stable; }

.zy-promo { position: fixed; inset: 0; z-index: 2000; font-family: "Cairo", sans-serif; color: #fff; }
.zy-promo[hidden] { display: none; }
.zy-promo__shade { position: absolute; inset: 0; background: rgba(5, 6, 9, .62); animation: zyp-fade .35s ease-out both; }

.zy-promo__panel {
    position: absolute; overflow: hidden; box-sizing: border-box; text-align: center;
    background: radial-gradient(120% 70% at 50% 0%, #1e1f26 0%, #121318 55%, #0c0d11 100%);
    left: 0; right: 0; bottom: 0; max-height: 100%; overflow-y: auto; overscroll-behavior: contain;
    border-radius: 28px 28px 0 0; padding: 10px 18px calc(18px + env(safe-area-inset-bottom));
    box-shadow: 0 -18px 60px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(250, 193, 71, .45);
    animation: zyp-up .55s cubic-bezier(.2, .9, .25, 1.15) both;
}
.zy-promo__grab { width: 44px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .22); margin: 0 auto 2px; }
.zy-promo__close {
    position: absolute; top: 12px; left: 14px; z-index: 2; width: 36px; height: 36px; padding: 0;
    border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .85);
    font: 400 20px/36px "Cairo", sans-serif; cursor: pointer;
}
.zy-promo__close:hover, .zy-promo__close:focus-visible { background: rgba(255, 255, 255, .16); outline: none; }

/* ---- the art ---- */
.zy-promo__hero { position: relative; margin: -2px auto 0; aspect-ratio: 400 / 228;
    width: min(345px, calc(28vh * 400 / 228)); max-width: 100%; }
.zy-promo__hero svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.zy-promo__note { transform-box: fill-box; transform-origin: center; animation: zyp-rise 3.6s ease-in-out infinite both; }
.zy-promo__twinkle { transform-box: fill-box; transform-origin: center; animation: zyp-twinkle 2.4s ease-in-out infinite both; }
.zy-promo__wings { transform-box: fill-box; transform-origin: 50% 70%; animation: zyp-wings 3.2s ease-in-out infinite both; }
.zy-promo__burst { transform-box: fill-box; transform-origin: center; animation: zyp-burst 1.1s cubic-bezier(.15, .8, .3, 1) .25s both; }
.zy-promo__phone { transform-box: fill-box; transform-origin: center; animation: zyp-phone .8s cubic-bezier(.2, .9, .25, 1.2) .15s both; }
.zy-promo__rays { transform-box: fill-box; transform-origin: center; animation: zyp-spin 40s linear infinite; }

/* ---- the words ---- */
.zy-promo__head { margin: 2px 0 0; color: #fff; font-weight: 600; -webkit-text-stroke: .6px currentColor;
    font-size: clamp(21px, 6.2vw, 27px); line-height: 1.38; }
.zy-promo__word { height: 1.22em; width: auto; vertical-align: -.32em; margin-left: .12em;
    filter: drop-shadow(0 0 10px rgba(250, 193, 71, .45)); }
.zy-promo__soft { color: rgba(255, 255, 255, .92); }
.zy-promo__feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; padding: 0; list-style: none; }
.zy-promo__feats li { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12.5px;
    font-weight: 600; line-height: 1.35; color: rgba(255, 255, 255, .88); }
.zy-promo__ico { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center;
    background: radial-gradient(circle at 30% 30%, rgba(250, 193, 71, .28), rgba(250, 193, 71, .08));
    box-shadow: inset 0 0 0 1px rgba(250, 193, 71, .55); }
.zy-promo__ico svg { width: 20px; height: 20px; fill: none; stroke: #fac147; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.zy-promo__cta { display: flex; justify-content: center; align-items: center; gap: 18px; }
.zy-promo__badge { display: inline-block; border-radius: 10px; animation: zyp-glow 2.6s ease-in-out 1s infinite; }
.zy-promo__badge img { display: block; height: 58px; width: auto; }
.zy-promo__qr { display: none; }
.zy-promo__later { display: block; margin: 8px auto 0; padding: 6px 14px; border: 0; background: none;
    color: rgba(255, 255, 255, .62); font: 600 14px "Cairo", sans-serif; cursor: pointer; }
.zy-promo__later:hover, .zy-promo__later:focus-visible { color: #fff; outline: none; text-decoration: underline; }

/* ---- computers and wide tablets: a centred card ---- */
@media (min-width: 768px) {
    .zy-promo__panel {
        left: 50%; top: 50%; right: auto; bottom: auto; width: min(860px, calc(100vw - 48px)); max-height: calc(100vh - 32px);
        transform: translate(-50%, -50%); border-radius: 28px; padding: 28px 34px 26px; text-align: right;
        display: grid; grid-template-columns: 1fr minmax(320px, 410px); gap: 26px; align-items: center;
        box-shadow: 0 30px 90px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(250, 193, 71, .45);
        animation-name: zyp-pop; animation-duration: .5s;
    }
    .zy-promo__grab { display: none; }
    .zy-promo__close { top: 16px; left: 16px; }
    .zy-promo__hero { order: 2; width: 100%; aspect-ratio: 400 / 300; }
    .zy-promo__copy { order: 1; }
    .zy-promo__head { font-size: 33px; }
    .zy-promo__feats { grid-template-columns: 1fr; gap: 10px; margin: 18px 0; }
    .zy-promo__feats li { flex-direction: row; font-size: 16px; gap: 12px; }
    .zy-promo__cta { justify-content: flex-start; }
    .zy-promo__badge img { height: 64px; }
    .zy-promo__qr { display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .7);
        font-size: 13px; font-weight: 600; line-height: 1.5; text-decoration: none; }
    .zy-promo__qr img { width: 92px; height: 92px; border-radius: 10px; border: 3px solid #fff;
        box-shadow: 0 0 0 2px rgba(250, 193, 71, .6); background: #fff; }
    .zy-promo__qr span { white-space: nowrap; }
    .zy-promo__later { margin: 10px 0 0; padding: 6px 0; }
}

@keyframes zyp-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes zyp-pop { from { transform: translate(-50%, -46%) scale(.92); opacity: 0; } to { transform: translate(-50%, -50%); opacity: 1; } }
@keyframes zyp-fade { from { opacity: 0; } }
@keyframes zyp-rise { 0% { transform: translateY(14px) rotate(-6deg); opacity: 0; } 25%, 75% { opacity: 1; } 100% { transform: translateY(-38px) rotate(8deg); opacity: 0; } }
@keyframes zyp-twinkle { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes zyp-wings { 0%, 100% { transform: scale(1); opacity: .78; } 50% { transform: scale(1.035); opacity: .95; } }
@keyframes zyp-burst { from { transform: scale(.2); opacity: 0; } 60% { opacity: 1; } to { transform: scale(1); opacity: 1; } }
@keyframes zyp-phone { from { transform: translateY(40px) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes zyp-spin { to { transform: rotate(360deg); } }
@keyframes zyp-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(250, 193, 71, 0); } 50% { box-shadow: 0 0 0 4px rgba(250, 193, 71, .14); } }

/* Respect "reduce motion": the finished picture, nothing moving. */
@media (prefers-reduced-motion: reduce) {
    .zy-promo *, .zy-promo__panel, .zy-promo__shade { animation: none !important; }
    .zy-promo__note { opacity: .9; }
}