/* Фото предмета по кнопке (frontend/render-loader.js): кнопка на карточке, ожидание, проявка кадра, общая кнопка
   «Загрузить все фото». В анимациях только transform и opacity — blur и перерисовка фона лагают на слабом железе. */

/* ---------- кнопка на карточке: справа снизу, где потом будет «Посмотреть с двух сторон» ---------- */
.skin-card__photo-btn {
    position: absolute;
    right: 7px;
    bottom: 8px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    height: 26px;
    min-width: 26px;
    padding: 0;
    border-radius: 13px;
    background: rgba(10, 12, 14, 0.76);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #E8E8E8;
    font: inherit;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.25s ease,
        transform 0.2s cubic-bezier(.2, .8, .2, 1), opacity 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}
.skin-card__image:has(.skin-card__photo-btn) .stickers-row { padding-right: 38px; }
.skin-card__photo-btn:active { transform: scale(0.9); }
.skin-card__photo-btn:focus-visible { outline: 2px solid #00E599; outline-offset: 2px; }

/* подпись раскрывается влево при наведении на саму кнопку (только где наведение настоящее) */
.ph-btn__lbl {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    opacity: 0;
    padding-left: 0;
    transition: max-width 0.3s cubic-bezier(.2, .8, .2, 1), opacity 0.2s ease, padding 0.3s cubic-bezier(.2, .8, .2, 1);
}
@media (hover: hover) {
    .skin-card__photo-btn:hover { background: rgba(14, 18, 16, 0.92); border-color: rgba(0, 229, 153, 0.5); color: #00E599; }
    .skin-card__photo-btn:hover .ph-btn__lbl,
    .skin-card__photo-btn:focus-visible .ph-btn__lbl { max-width: 130px; opacity: 1; padding-left: 10px; }
}

/* значки состояний лежат стопкой — виден один, смена — масштабом с лёгким перелётом */
.ph-btn__ico, .ph-all__ico { position: relative; display: grid; place-items: center; flex: none; }
.ph-btn__ico { width: 24px; height: 24px; }
.ph-i {
    grid-area: 1 / 1;
    display: grid;
    place-items: center;
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.18s ease, transform 0.32s cubic-bezier(.34, 1.56, .64, 1);
}
.ph-i svg { width: 14px; height: 14px; display: block; }
[data-ph="idle"] .ph-i-cam,
[data-ph="queued"] .ph-i-spin,
[data-ph="rendering"] .ph-i-spin,
[data-ph="done"] .ph-i-ok,
[data-ph="failed"] .ph-i-err,
[data-ph="offline"] .ph-i-wait { opacity: 1; transform: none; }

/* кольцо загрузки: дуга с хвостом крутится, в очереди — тише и медленнее, когда рисуется — зелёная и быстрее */
.ph-i-spin i {
    display: block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(232, 232, 232, 0) 0deg, rgba(232, 232, 232, 0.9) 290deg, rgba(232, 232, 232, 0) 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.4px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2.4px), #000 calc(100% - 2px));
}
/* Крутится только там, где кольцо видно: в очереди, пока рисуется, и у «Загрузить все фото» в работе.
   Раньше кольцо крутилось и невидимым (opacity 0) у каждой кнопки «Загрузить фото» — 50 кнопок
   давали постоянную работу главного потока в простое (замер 16.10). */
[data-ph="queued"] .ph-i-spin i,
[data-ph="rendering"] .ph-i-spin i { animation: ph-spin 1.25s linear infinite; }
.ph-all[data-state="running"] .ph-i-spin i { animation: ph-spin 0.8s linear infinite; }
[data-ph="rendering"] .ph-i-spin i {
    background: conic-gradient(from 0deg, rgba(0, 229, 153, 0) 0deg, #00E599 290deg, rgba(0, 229, 153, 0) 360deg);
    animation-duration: 0.8s;
}
@keyframes ph-spin { to { transform: rotate(360deg); } }
.skin-card__photo-btn[data-ph="rendering"] { border-color: rgba(0, 229, 153, 0.55); box-shadow: 0 0 0 3px rgba(0, 229, 153, 0.12), 0 2px 8px rgba(0, 0, 0, 0.35); }
.skin-card__photo-btn[data-ph="offline"] { color: #F0B35B; border-color: rgba(240, 179, 91, 0.45); }
.skin-card__photo-btn[data-ph="failed"] { color: #F0B35B; border-color: rgba(240, 179, 91, 0.45); }
/* готово: зелёный круг с галочкой и волна от кнопки */
.skin-card__photo-btn[data-ph="done"] { background: #00E599; border-color: #00E599; color: #04140D; cursor: default; }
.skin-card__photo-btn[data-ph="done"]::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    pointer-events: none;
    animation: ph-ping 0.9s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes ph-ping { from { box-shadow: 0 0 0 0 rgba(0, 229, 153, 0.6); } to { box-shadow: 0 0 0 12px rgba(0, 229, 153, 0); } }
/* «сделать первым» и «пока рано» — короткий отклик на нажатие */
.skin-card__photo-btn.is-bump { animation: ph-bump 0.45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes ph-bump { 40% { transform: translateY(-3px) scale(1.12); } }
.skin-card__photo-btn.is-nudge { animation: ph-nudge 0.4s ease; }
@keyframes ph-nudge { 20%, 60% { transform: translateX(-3px); } 40%, 80% { transform: translateX(3px); } }
/* уходит, уступая место кнопке «Посмотреть с двух сторон» */
.skin-card__photo-btn.is-leaving { opacity: 0; transform: scale(0.6); pointer-events: none; }
.skin-card__view-btn.is-arriving { animation: ph-arrive 0.35s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes ph-arrive { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@media (hover: hover) {
    /* без наведения кнопка «посмотреть» прячется, как у остальных карточек: показать на миг и убрать плавно */
    .skin-card:not(:hover) .skin-card__view-btn.is-arriving { animation: ph-arrive-out 1.6s ease both; }
    @keyframes ph-arrive-out { 0% { opacity: 0; transform: scale(0.6); } 20%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(0.85); } }
}

/* ---------- кадр, пока фото ждут ---------- */
.skin-card__image.is-waiting > img { opacity: 0.8; transition: opacity 0.4s ease, transform 0.38s cubic-bezier(.2, .8, .2, 1); }
/* узел рисует именно этот предмет — по кадру проходит блик */
.ph-sweep { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; transition: opacity 0.3s ease; }
.ph-sweep.is-out { opacity: 0; }
.ph-sweep::before {
    content: '';
    position: absolute;
    top: -15%;
    bottom: -15%;
    left: -60%;
    width: 50%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.14) 40%, rgba(255, 255, 255, 0.26) 50%, rgba(255, 255, 255, 0.14) 60%, rgba(255, 255, 255, 0) 100%);
    transform: translateX(0) skewX(-14deg);
    animation: ph-sweep 1.7s cubic-bezier(.45, .05, .55, .95) infinite;
    will-change: transform;
}
@keyframes ph-sweep { to { transform: translateX(340%) skewX(-14deg); } }

/* ---------- проявка: иконка уходит, кадр выплывает из лёгкого приближения, вспышка как у фотоаппарата ---------- */
.skin-card .skin-card__image > img.ph-new {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    opacity: 0;
    transform: scale(1.07);
    transition: opacity 0.55s ease, transform 0.9s cubic-bezier(.2, .8, .2, 1);
}
.skin-card .skin-card__image.is-revealing > img.ph-new { opacity: 1; transform: none; }
.skin-card .skin-card__image.is-revealing > img:not(.ph-new) { opacity: 0; transform: scale(0.92); transition: opacity 0.35s ease, transform 0.5s ease; }
.ph-flash {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 72%);
    opacity: 0;
    animation: ph-flash 0.7s ease-out forwards;
}
@keyframes ph-flash { 0% { opacity: 0; } 16% { opacity: 0.6; } 100% { opacity: 0; } }

/* ---------- «Загрузить все фото» ---------- */
.ph-all-slot { display: inline-flex; }
.ph-all {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px 0 11px;
    border-radius: 11px;
    background: rgba(0, 229, 153, 0.07);
    border: 1px solid rgba(0, 229, 153, 0.3);
    color: #E6F6EF;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.ph-all[hidden] { display: none; }
.ph-all:hover { background: rgba(0, 229, 153, 0.13); border-color: rgba(0, 229, 153, 0.55); }
.ph-all:active { transform: scale(0.97); }
.ph-all:focus-visible { outline: 2px solid #00E599; outline-offset: 2px; }
.ph-all.is-in { animation: ph-all-in 0.38s cubic-bezier(.2, .8, .2, 1) both; }
.ph-all.is-out { animation: ph-all-out 0.3s ease both; pointer-events: none; }
@keyframes ph-all-in { from { opacity: 0; transform: translateX(-6px) scale(0.96); } }
@keyframes ph-all-out { to { opacity: 0; transform: scale(0.94); } }
.ph-all__ico { width: 18px; height: 18px; color: #00E599; }
.ph-all__ico .ph-i svg { width: 17px; height: 17px; }
.ph-all__ico .ph-i-spin i { width: 16px; height: 16px; background: conic-gradient(from 0deg, rgba(0, 229, 153, 0) 0deg, #00E599 290deg, rgba(0, 229, 153, 0) 360deg); animation-duration: 0.8s; }
.ph-all[data-state="idle"] .ph-i-cam,
.ph-all[data-state="running"] .ph-i-spin,
.ph-all[data-state="done"] .ph-i-ok,
.ph-all[data-state="offline"] .ph-i-wait { opacity: 1; transform: none; }
.ph-all__num {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 99px;
    background: #00E599;
    color: #04140D;
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1.35;
    text-align: center;
    font-variant-numeric: tabular-nums;
    box-sizing: content-box;
}
.ph-all__num:empty, .ph-all__eta:empty { display: none; }
.ph-all__eta { font-size: 0.74rem; font-weight: 600; color: #8FD9BA; font-variant-numeric: tabular-nums; min-width: 6.5ch; }
/* пока идёт загрузка, место под «≈2 мин» занято с начала — кнопка не прыгает по ширине, когда оценка появляется */
.ph-all[data-state="running"] .ph-all__eta:empty { display: inline-block; }
/* прогресс заливкой самой кнопки слева направо */
.ph-all__fill {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(0, 229, 153, 0.12), rgba(0, 229, 153, 0.26));
    transform-origin: left center;
    transform: scaleX(var(--p, 0));
    transition: transform 0.6s cubic-bezier(.2, .8, .2, 1);
}
.ph-all[data-state="running"] { cursor: default; }
.ph-all[data-state="running"] .ph-all__num { background: rgba(0, 229, 153, 0.16); color: #CFF7E8; }
.ph-all[data-state="done"] { cursor: default; background: rgba(0, 229, 153, 0.16); border-color: rgba(0, 229, 153, 0.6); }
.ph-all[data-state="offline"] { cursor: default; background: rgba(240, 179, 91, 0.08); border-color: rgba(240, 179, 91, 0.4); color: #F7E3C4; }
.ph-all[data-state="offline"] .ph-all__ico { color: #F0B35B; }
.ph-all[data-state="offline"] .ph-all__num { background: rgba(240, 179, 91, 0.18); color: #F7E3C4; }
.ph-all[data-state="offline"] .ph-all__fill { background: rgba(240, 179, 91, 0.12); }
@media (max-width: 600px) {
    .ph-all { height: 34px; padding: 0 10px; font-size: 0.8rem; gap: 7px; }
    .ph-all__eta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ph-i, .ph-btn__lbl, .skin-card__photo-btn, .ph-all, .ph-all__fill { transition: none; }
    [data-ph] .ph-i-spin i, .ph-all[data-state] .ph-i-spin i { animation-duration: 2.4s; }
    .skin-card .skin-card__image > img.ph-new { transform: none; transition: opacity 0.3s ease; }
    .skin-card .skin-card__image.is-revealing > img:not(.ph-new) { transform: none; }
    .skin-card__photo-btn.is-bump, .skin-card__photo-btn.is-nudge, .ph-all.is-in, .ph-all.is-out,
    .skin-card__view-btn.is-arriving, .skin-card__photo-btn[data-ph="done"]::after { animation: none; }
}