/* Плашка-объявление и cookie-баннер. Чтобы отключить - уберите <link> на этот файл и <script> js/notices.js. */

/* ===== Плашка-объявление ===== */
/* плашка идёт в потоке страницы и уезжает при прокрутке; фиксированная шапка плавно поднимается за ней (--ay считает notices.js) */
.top{top:var(--ay,0px)}
.ann{--bgc:var(--c1);--fg:var(--on1);--sh:.3;position:relative;z-index:19;display:grid;grid-template-rows:0fr;background:var(--bgc);color:var(--fg);
  transition:grid-template-rows .85s var(--e)}
.ann.show{grid-template-rows:1fr}
.ann-accent2{--bgc:var(--c2);--fg:var(--on2)}
.ann-dark{--bgc:rgba(var(--bkr),.92);--fg:var(--tx);--sh:.1;box-shadow:inset 0 -1px rgba(var(--c1r),.35)}
.ann-clip{min-height:0;overflow:hidden}
.ann-in{position:relative;display:flex;align-items:center;justify-content:center;min-height:46px;padding:8px 54px 8px 16px;
  opacity:0;transform:translateY(-10px);transition:opacity .6s var(--e) .2s,transform .8s var(--e) .2s}
.ann.show .ann-in{opacity:1;transform:none}
/* блик пробегает по плашке несколько раз и затихает */
.ann-in::before{content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-120%);
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,var(--sh)) 50%,transparent 70%)}
.ann.show .ann-in::before{animation:annSheen 9s ease-in-out 1.6s 3}
@keyframes annSheen{0%{transform:translateX(-120%)}20%,100%{transform:translateX(120%)}}
.ann-text{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 16px;margin:0;font-size:15px;line-height:1.35;font-weight:600;text-align:center}
.ann-msg{display:inline-flex;align-items:center;gap:10px}
.ann-pulse{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:currentColor}
.ann-pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:currentColor;animation:annPing 1.9s var(--e) 1.4s 3 backwards}
@keyframes annPing{to{transform:scale(3.4);opacity:0}}
.ann-link{display:inline-flex;align-items:center;gap:8px;padding:6px 15px;border-radius:999px;font-size:14px;font-weight:700;white-space:nowrap;
  background:var(--fg);color:var(--bgc);transition:transform .4s var(--e),box-shadow .4s var(--e)}
.ann-dark .ann-link{background:var(--c1);color:var(--on1)}
.ann-link:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.28)}
.ann-link:active{transform:scale(.97)}
.ann-link i{position:relative;display:block;width:12px;height:2px;border-radius:2px;background:currentColor;transition:width .4s var(--e)}
.ann-link i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border:solid currentColor;border-width:2px 2px 0 0;rotate:45deg}
.ann-link:hover i{width:20px}
.ann-x{position:absolute;right:10px;top:50%;translate:0 -50%;display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;
  background:transparent;color:inherit;cursor:pointer;opacity:.75;transition:opacity .3s,background-color .3s,rotate .5s var(--e)}
.ann-x:hover{opacity:1;rotate:90deg;background:rgba(0,0,0,.16)}
.ann-dark .ann-x:hover{background:rgba(255,255,255,.14)}
.ann-x:focus-visible,.ann-link:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.ann-dark .ann-link:focus-visible{outline-color:var(--c2)}

/* ===== Cookie-баннер ===== */
.ck{position:fixed;left:0;right:0;bottom:calc(16px + env(safe-area-inset-bottom));z-index:35;display:flex;justify-content:center;padding:0 16px;pointer-events:none}
.ck-card{pointer-events:auto;display:flex;align-items:center;gap:16px;width:min(780px,100%);padding:16px 18px;border-radius:20px;
  background:rgba(var(--bkr),.84);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);
  border:1px solid rgba(var(--c1r),.3);box-shadow:0 20px 56px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.03) inset;
  opacity:0;transform:translateY(calc(100% + 48px)) scale(.97);
  transition:transform .95s cubic-bezier(.34,1.28,.5,1),opacity .5s var(--e)}
.ck.show .ck-card{opacity:1;transform:none}
.ck-ic{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:rgba(var(--c1r),.12);color:var(--c1)}
.ck-ic svg{width:24px;height:24px;rotate:-120deg;transition:rotate 1.5s cubic-bezier(.34,1.56,.64,1) .35s}
.ck.show .ck-ic svg{rotate:0deg}
.ck-text{flex:1;margin:0;font-size:14.5px;line-height:1.5;color:var(--tx2)}
.ck-text a{color:var(--c1);text-decoration:underline;text-decoration-color:rgba(var(--c1r),.5);text-underline-offset:3px;transition:text-decoration-color .3s}
.ck-text a:hover{text-decoration-color:var(--c1)}
.ck-btns{flex:none;display:flex;gap:10px}
.ck-btn{padding:11px 20px;border-radius:999px;border:1px solid var(--c1);background:var(--c1);color:var(--on1);font-family:inherit;font-size:14px;font-weight:700;line-height:1.1;cursor:pointer;
  transition:transform .35s var(--e),box-shadow .35s var(--e),background-color .35s var(--e),border-color .35s var(--e)}
.ck-btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(var(--c1r),.32)}
.ck-btn:active{transform:scale(.97)}
.ck-btn.ghost{background:transparent;border-color:rgba(255,255,255,.28);color:var(--tx)}
.ck-btn.ghost:hover{border-color:var(--c1);background:rgba(var(--c1r),.1);box-shadow:none}
.ck-btn:focus-visible,.ck-text a:focus-visible,.ck-reopen:focus-visible{outline:2px solid var(--c2);outline-offset:3px}
.ck-re{margin:0;padding:0 16px 22px;text-align:center}
.ck-reopen{padding:6px 10px;border:0;background:none;color:var(--mut);font-family:inherit;font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;transition:color .3s}
.ck-reopen:hover{color:var(--c1)}
@media(max-width:640px){
  .ann-text{font-size:14px}
  .ck-card{flex-wrap:wrap;gap:12px 14px;padding:14px}
  .ck-ic{width:40px;height:40px}.ck-ic svg{width:21px;height:21px}
  .ck-text{flex:1 1 calc(100% - 60px);font-size:13.5px}
  .ck-btns{width:100%}
  .ck-btn{flex:1;padding:12px 10px}
}
@media(prefers-reduced-motion:reduce){
  .ann,.ann-in,.ann-x,.ann-link,.ck-card,.ck-ic svg,.ck-btn{transition:none!important}
  .ann-in::before,.ann-pulse::after{animation:none!important}
  .ck-ic svg{rotate:0deg}
}
