/* ===== Static: анимации интерфейса =====
   Всё под html.sg-anim: класс ставит anim.js. Без него (JS не загрузился)
   страница видна сразу и целиком, просто без движения.
   Двигаем только transform и opacity, кривые ease-out, 150–350 мс. */
:root{
  --sg-ease:cubic-bezier(.22,1,.36,1);
  --sg-fast:.16s;
  --sg-dur:.28s;
  --sg-popup:.26s;
  --sg-skel-color:#3a3a3c;
  --sg-skel-shine:rgba(255,255,255,.06);
}

@keyframes sg-in{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}
@keyframes sg-fade{from{opacity:0}to{opacity:1}}
@keyframes sg-shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@keyframes sg-spin{to{transform:rotate(360deg)}}
@keyframes sg-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes sg-shake{0%,100%{transform:none}20%{transform:translateX(-5px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@keyframes sg-drop{from{opacity:0;transform:translate3d(0,-4px,0) scale(.98)}to{opacity:1;transform:none}}
@keyframes sg-toast-in{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:none}}
@keyframes sg-toast-out{from{opacity:1;transform:none}to{opacity:0;transform:translate3d(0,12px,0)}}

/* ----- 1. Появление содержимого страницы -----
   fill-mode backwards: после окончания действуют обычные стили (hover и т.п.). */
html.sg-anim .tm-main:not(.sg-settled)>*{animation:sg-in var(--sg-dur) var(--sg-ease) backwards}
html.sg-anim .tm-main:not(.sg-settled)>:nth-child(2){animation-delay:.04s}
html.sg-anim .tm-main:not(.sg-settled)>:nth-child(3){animation-delay:.08s}
html.sg-anim .tm-main:not(.sg-settled)>:nth-child(n+4){animation-delay:.12s}

/* ----- 2. Списки и сетки: появление лесенкой (первые 24, дальше сразу) ----- */
html.sg-anim :is(#rows,#gifts)>:nth-child(-n+24),
html.sg-anim .tm-main:not(.sg-settled) .tm-grid>.tm-grid-item:nth-child(-n+24){animation:sg-in var(--sg-dur) var(--sg-ease) backwards}
html.sg-anim :is(#rows,#gifts,.tm-grid)>:nth-child(2){animation-delay:.025s}
html.sg-anim :is(#rows,#gifts,.tm-grid)>:nth-child(3){animation-delay:.05s}
html.sg-anim :is(#rows,#gifts,.tm-grid)>:nth-child(4){animation-delay:.075s}
html.sg-anim :is(#rows,#gifts,.tm-grid)>:nth-child(5){animation-delay:.1s}
html.sg-anim :is(#rows,#gifts,.tm-grid)>:nth-child(6){animation-delay:.125s}
html.sg-anim :is(#rows,#gifts,.tm-grid)>:nth-child(7){animation-delay:.15s}
html.sg-anim :is(#rows,#gifts,.tm-grid)>:nth-child(8){animation-delay:.175s}
html.sg-anim :is(#rows,#gifts,.tm-grid)>:nth-child(9){animation-delay:.2s}
html.sg-anim :is(#rows,#gifts,.tm-grid)>:nth-child(10){animation-delay:.225s}
html.sg-anim :is(#rows,#gifts,.tm-grid)>:nth-child(11){animation-delay:.25s}
html.sg-anim :is(#rows,#gifts,.tm-grid)>:nth-child(n+12){animation-delay:.275s}

/* скелетоны на время загрузки */
.sg-skel{pointer-events:none}
.sg-skel-line,.sg-skel-box{position:relative;display:block;overflow:hidden;background:var(--sg-skel-color);border-radius:6px}
.sg-skel-line{height:12px;width:60%}
.sg-skel-line+.sg-skel-line{margin-top:8px;height:10px;width:40%;opacity:.7}
.sg-skel-line.sg-w30{width:30%}.sg-skel-line.sg-w50{width:50%}.sg-skel-line.sg-w80{width:80%}
.sg-skel-line:after,.sg-skel-box:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,var(--sg-skel-shine),transparent);transform:translateX(-100%);animation:sg-shimmer 1.4s ease-in-out infinite}
tr.sg-skel .table-cell{padding-top:16px;padding-bottom:16px}
.tm-grid-item.sg-skel .tm-grid-item-thumb{background:var(--sg-skel-color)}
.tm-grid-item.sg-skel .tm-grid-item-content{padding:10px 12px 12px}
.sg-skel-page .sg-skel-line:first-child{height:22px;width:45%;margin-bottom:16px}
.sg-skel-page .sg-skel-box{height:220px;border-radius:var(--def-border-radius,12px);margin:0 0 16px}

/* ----- 3. Карточки подарков ----- */
html.sg-anim .tm-grid-item{transition:transform var(--sg-fast) var(--sg-ease)}
html.sg-anim .tm-grid-item:not(.sg-skel):active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){
  html.sg-anim .tm-grid-item-thumb img{transition:transform .35s var(--sg-ease)}
  html.sg-anim .tm-grid-item:not(.sg-skel):hover .tm-grid-item-thumb img{transform:scale(1.05)}
}

/* ----- 4. Окна: шторка на телефоне, scale+fade на компьютере, плавное закрытие ----- */
html.sg-anim .popup-container{transition:width 0s 0s,left 0s 0s,background-color var(--sg-popup) ease-out}
html.sg-anim .popup-container.hide{transition:width 0s var(--sg-popup),left 0s var(--sg-popup),background-color var(--sg-popup) ease-out}
html.sg-anim .popup{transition:transform var(--sg-popup) var(--sg-ease)}
@media (min-width:480px){
  html.sg-anim .popup{transition:transform var(--sg-popup) var(--sg-ease),opacity var(--sg-popup) var(--sg-ease)}
  html.sg-anim .popup-container.hide .popup{transform:scale(.96);opacity:0}
}

/* ----- 5. Кнопки: нажатие, загрузка, успех, ошибка ----- */
html.sg-anim .btn{transition:transform var(--sg-fast) var(--sg-ease)}
html.sg-anim .btn:not([disabled]):active{transform:scale(.97)}
.sg-busy,.sg-done{position:relative;pointer-events:none;color:transparent!important}
.sg-busy>:not(.sg-btn-fx),.sg-done>:not(.sg-btn-fx){opacity:0}
.sg-btn-fx{position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;color:#fff;pointer-events:none}
.sg-spin{display:block;width:20px;height:20px;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:sg-spin .7s linear infinite}
.sg-check{display:block;width:20px;height:20px;animation:sg-pop .22s var(--sg-ease) backwards}
.sg-shake{animation:sg-shake .32s ease-out}

/* ----- 7. Вкладки и фильтры ----- */
.sg-tabs{position:relative}
.sg-tabs .tm-header-tab.tab-active:after{visibility:hidden}
.sg-tab-ind{position:absolute;bottom:0;left:0;height:4px;border-radius:3px 3px 0 0;background-color:var(--field-accent-color);transform-origin:0 50%;pointer-events:none;will-change:transform}
.sg-tab-ind.sg-move{transition:transform var(--sg-dur) var(--sg-ease)}
html.sg-anim .tm-dropdown.open>.dropdown-menu{animation:sg-drop .18s var(--sg-ease);transform-origin:100% 0}

/* уведомления: снизу, выезжают и уезжают */
.sg-toasts{position:fixed;left:0;right:0;bottom:calc(20px + env(safe-area-inset-bottom));z-index:220;display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 16px;pointer-events:none}
.sg-toast{max-width:340px;padding:10px 18px;border-radius:var(--def-border-radius,12px);background:#2c2c2e;color:#fafafa;font-size:14px;line-height:19px;text-align:center;box-shadow:0 4px 16px rgba(0,0,0,.35);animation:sg-toast-in var(--sg-dur) var(--sg-ease) backwards}
.sg-toast.sg-out{animation:sg-toast-out .2s ease-out forwards}

/* ----- 6. Счётчики: цифры одной ширины, без сдвига строки ----- */
[data-sg-nano]{font-variant-numeric:tabular-nums}

/* ----- 8. Подбор красивого адреса: полоска прогресса ----- */
.sg-progress{position:relative;width:100%;max-width:260px;height:4px;margin:18px auto 0;overflow:hidden;border-radius:2px;background:#2c2c2e}
.sg-progress-fill{position:absolute;top:0;left:0;bottom:0;width:100%;background:#4db2ff;transform:scaleX(.03);transform-origin:0 50%;transition:transform .35s var(--sg-ease)}
.sg-progress:after{content:"";position:absolute;top:0;left:0;bottom:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);animation:sg-shimmer 1.6s ease-in-out infinite;transform:translateX(-100%)}
.sg-progress.sg-progress-done:after,.sg-progress.sg-progress-fail:after{animation:none;opacity:0}
.sg-progress.sg-progress-fail .sg-progress-fill{opacity:.35}

/* ----- Меньше движения: всё мгновенно, анимации не крутятся ----- */
@media (prefers-reduced-motion:reduce){
  html.sg-anim *,html.sg-anim *:before,html.sg-anim *:after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  html.sg-anim .tm-grid-item:hover,html.sg-anim .tm-grid-item:hover .tm-grid-item-thumb img,html.sg-anim .btn:active,html.sg-anim .tm-grid-item:active{transform:none!important}
}