/* ==========================================================================
   starstory.studio — библиотека движения
   Источник: макет «Kids Books Animations.dc.html», блоки 01–11.
   Подключать после theme.css. Ничего кроме анимаций здесь нет.
   ========================================================================== */

:root {
  --ease-out-soft: cubic-bezier(.16, .84, .44, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-spring-soft: cubic-bezier(.34, 1.42, .5, 1);
  --ease-bar: cubic-bezier(.32, .72, 0, 1);
  --ease-page: cubic-bezier(.4, .05, .3, 1);
}

/* --- keyframes ----------------------------------------------------------- */
@keyframes kb-up      { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } }
@keyframes kb-up-sm   { from { opacity: 0; transform: translateY(8px) }  to { opacity: 1; transform: none } }
@keyframes kb-pop     { 0% { opacity: 0; transform: scale(.6) translateY(6px) } 70% { opacity: 1; transform: scale(1.06) } 100% { opacity: 1; transform: scale(1) } }
@keyframes kb-float   { 0%, 100% { transform: translateY(0) rotate(-1.2deg) } 50% { transform: translateY(-8px) rotate(1.2deg) } }
@keyframes kb-line    { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes kb-unblur  { from { filter: blur(12px) saturate(.7); opacity: .55 } to { filter: none; opacity: 1 } }
@keyframes kb-spin    { to { transform: rotate(360deg) } }
@keyframes kb-sheen   { from { background-position: -140% 0 } to { background-position: 240% 0 } }
@keyframes kb-toast   { 0% { opacity: 0; transform: translateY(14px) scale(.96) } 12%, 82% { opacity: 1; transform: none } 100% { opacity: 0; transform: translateY(-6px) scale(.98) } }
@keyframes kb-ring    { from { box-shadow: 0 0 0 0 rgba(106,90,184,.28) } to { box-shadow: 0 0 0 18px rgba(106,90,184,0) } }
@keyframes kb-in-right{ from { opacity: 0; transform: translateX(28px) } to { opacity: 1; transform: none } }
@keyframes kb-in-left { from { opacity: 0; transform: translateX(-28px) } to { opacity: 1; transform: none } }
@keyframes kb-check   { 0% { transform: scale(0) rotate(-25deg) } 60% { transform: scale(1.18) } 100% { transform: scale(1) } }
@keyframes kb-bar     { from { width: 4% } to { width: 100% } }
@keyframes kb-backdrop{ from { opacity: 0 } to { opacity: 1 } }
@keyframes kb-modal-in{ from { opacity: 0; transform: translateY(26px) scale(.9) } to { opacity: 1; transform: none } }
@keyframes kb-book-open { from { transform: rotateY(-96deg) } to { transform: rotateY(0) } }
@keyframes kb-flip-fwd  { from { transform: rotateY(0) } to { transform: rotateY(-180deg) } }
@keyframes kb-flip-back { from { transform: rotateY(0) } to { transform: rotateY(180deg) } }

/* --- 01 герой ------------------------------------------------------------ */
/* Разметка: data-hero на секции, data-hero-item на каждом элементе по порядку. */
[data-hero-item]              { animation: kb-up .62s var(--ease-out-soft) both }
[data-hero-item="1"]          { animation-delay: .09s }
[data-hero-item="pop"]        { animation: kb-pop .5s var(--ease-spring) both }
[data-hero-badges] > *        { animation: kb-pop .46s var(--ease-spring) both }
[data-hero-badges] > :nth-child(1) { animation-delay: .38s }
[data-hero-badges] > :nth-child(2) { animation-delay: .46s }
[data-hero-badges] > :nth-child(3) { animation-delay: .54s }
[data-hero-cover]             { animation: kb-pop .7s var(--ease-spring) .12s both }
[data-hero-cover] > *         { animation: kb-float 6s ease-in-out infinite }
/* На узком экране карточки стоят столбиком ~600px высотой: рост до 106% и покачивание
   с поворотом сдвигают его верх на 15–20px — карточка наезжает на значки героя. */
@media (max-width: 960px) {
  [data-hero-cover]           { animation: kb-up .6s var(--ease-out-soft) .12s both }
  [data-hero-cover] > *       { animation: none }
}

/* --- 02 скролл-появление ------------------------------------------------- */
/* JS ставит .is-in, когда блок вошёл в кадр. */
[data-reveal]                 { opacity: 0 }
[data-reveal].is-in           { animation: kb-up .6s var(--ease-out-soft) both }

/* --- 03 галерея стилей --------------------------------------------------- */
[data-style-card] {
  cursor: pointer;
  animation: kb-pop .5s var(--ease-spring) both;
  transition: transform .22s var(--ease-spring), box-shadow .22s ease, border-color .2s ease;
}
[data-style-card]:hover       { transform: translateY(-6px); box-shadow: 0 22px 44px -26px rgba(44,39,64,.45) }
[data-style-card] img         { transition: transform .5s var(--ease-out-soft) }
[data-style-card]:hover img   { transform: scale(1.07) }
[data-style-card] [data-check]{ animation: kb-check .42s var(--ease-spring) both }
/* задержку выставляет JS: style.animationDelay = i * 45ms */

/* --- 04 три шага --------------------------------------------------------- */
[data-steps-line].is-in       { animation: kb-line .8s var(--ease-out-soft) .25s both; transform-origin: left center }
[data-step].is-in             { animation: kb-up .58s var(--ease-out-soft) both }
[data-step].is-in:nth-child(1){ animation-delay: .25s }
[data-step].is-in:nth-child(2){ animation-delay: .41s }
[data-step].is-in:nth-child(3){ animation-delay: .57s }

/* --- 05 тарифы и FAQ ----------------------------------------------------- */
[data-plan]                   { transition: transform .24s var(--ease-out-soft), box-shadow .24s ease, border-color .2s ease }
[data-plan]:hover             { transform: translateY(-4px); box-shadow: 0 22px 44px -28px rgba(44,39,64,.45) }
[data-plan].is-in             { animation: kb-up .55s var(--ease-out-soft) both }

/* Аккордеон без замера высоты: grid-template-rows 0fr → 1fr. */
[data-faq-body]               { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .34s var(--ease-out-soft) }
[data-faq-body] > *           { overflow: hidden }
[data-faq-body] > * > *       { opacity: 0; transition: opacity .28s ease .06s }
[data-faq].is-open [data-faq-body]         { grid-template-rows: 1fr }
[data-faq].is-open [data-faq-body] > * > * { opacity: 1 }
[data-faq-plus]               { transition: transform .28s var(--ease-spring) }
[data-faq].is-open [data-faq-plus]         { transform: rotate(45deg) }

/* --- 06 загрузка фото ---------------------------------------------------- */
[data-dropzone]               { transition: border-color .2s ease, background .2s ease, transform .2s var(--ease-spring) }
[data-dropzone].is-drag       { border-color: #6A5AB8; background: #EDEAF8; transform: scale(1.01); animation: kb-ring 1.2s ease-out infinite }
[data-photo]                  { animation: kb-pop .48s var(--ease-spring) both }
[data-photo-progress] > i     { display: block; height: 100%; border-radius: 999px; background: #fff; animation: kb-bar 1.1s var(--ease-bar) both }
[data-photo-overlay]          { transition: opacity .3s ease; pointer-events: none !important }
[data-photo].is-done [data-photo-overlay] { opacity: 0 !important; pointer-events: none !important; display: none !important }

/* --- 07 генерация: плёнка страниц ---------------------------------------- */
[data-gen-page]               { transition: box-shadow .4s ease, transform .4s var(--ease-out-soft) }
[data-gen-page] img           { transition: filter .7s ease }
[data-gen-page][data-state="queued"] img,
[data-gen-page][data-state="current"] img { filter: blur(12px) saturate(.75) }
[data-gen-page][data-state="current"]     { transform: scale(1.03); box-shadow: 0 22px 44px -22px rgba(90,77,168,.6) }
[data-gen-page][data-state="done"] img    { filter: none; animation: kb-unblur .7s ease both }
[data-gen-page][data-state="done"] [data-gen-overlay] { display: none }
[data-gen-spinner]            { animation: kb-spin .9s linear infinite }
[data-gen-bar] > i            { display: block; height: 100%; border-radius: 999px; background: #6A5AB8; transition: width .6s var(--ease-bar) }

/* --- 08 переходы между шагами -------------------------------------------- */
[data-panel][data-dir="fwd"]  { animation: kb-in-right .38s var(--ease-out-soft) both }
[data-panel][data-dir="back"] { animation: kb-in-left .38s var(--ease-out-soft) both }
[data-stepdot]                { transition: background .32s ease, color .32s ease, transform .32s var(--ease-spring) }
[data-stepdot].is-active      { transform: scale(1.12) }
[data-stepline] > i           { display: block; height: 100%; background: #6A5AB8; transform: scaleX(0); transform-origin: left center; transition: transform .42s var(--ease-out-soft) }
[data-stepline].is-done > i   { transform: scaleX(1) }

/* --- 09 микро ------------------------------------------------------------ */
[data-btn-primary]            { transition: background .15s ease, transform .16s var(--ease-spring), box-shadow .2s ease }
[data-btn-primary]:hover      { transform: translateY(-2px); box-shadow: 0 18px 30px -14px rgba(90,77,168,.6) }
[data-btn-primary]:active     { transform: translateY(1px) scale(.98) }
[data-btn-ghost]              { transition: background .15s ease, transform .16s ease }
[data-btn-ghost]:active       { transform: translateY(1px) }
input, textarea, select       { transition: border-color .18s ease, box-shadow .18s ease }
input:focus, textarea:focus, select:focus { border-color: #6A5AB8; box-shadow: 0 0 0 3px rgba(106,90,184,.16); outline: 0 }
[data-toast]                  { animation: kb-toast 2.6s var(--ease-out-soft) both }

/* Сегментный переключатель (пол, язык) — «капля» переезжает между позициями.
   Ширина капли считается от padding-box, поэтому обязательно calc(...) с
   вычетом padding трека, иначе в крайнем положении она вылезает за трек. */
[data-segmented]              { position: relative; display: flex; background: #EDEAF8; border-radius: 999px; padding: 4px }
[data-segmented] [data-pill]  {
  position: absolute; top: 4px; bottom: 4px; left: 4px;
  width: calc((100% - 8px) / var(--seg-count, 2));
  border-radius: 999px; background: #fff;
  box-shadow: 0 2px 6px -2px rgba(44,39,64,.28);
  transform: translateX(calc(var(--seg-index, 0) * 100%));
  transition: transform .52s var(--ease-spring-soft);
}
[data-segmented].is-sliding [data-pill] { transform: translateX(calc(var(--seg-index, 0) * 100%)) scale(1.1, .84) }
[data-segmented] button       { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; background: transparent; border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap; color: #5A5473; transition: color .3s ease }
[data-segmented] button.is-active { color: #2C2740 }

/* --- 10 скелетоны -------------------------------------------------------- */
[data-skeleton] {
  background: linear-gradient(90deg, #EDEAF8 12%, #F7F6FC 32%, #EDEAF8 52%);
  background-size: 220% 100%;
  animation: kb-sheen 1.5s ease-in-out infinite;
}
[data-loaded]                 { animation: kb-up-sm .45s var(--ease-out-soft) both }
/* задержки: JS ставит animationDelay — 120ms шаг для скелетона, 60ms для контента */

/* --- 11 демо-книжка ------------------------------------------------------ */
[data-book-backdrop]          { animation: kb-backdrop .26s ease both; background: rgba(44,39,64,.72) }
[data-book-panel]             { animation: kb-modal-in .46s var(--ease-spring-soft) both }
/* transform-origin панели JS ставит по центру нажатой карточки */
[data-spread]                 { perspective: 1800px }
[data-page]                   { position: relative; overflow: hidden; background: #EDEAF8 }
[data-page="left"]            { border-radius: 14px 4px 4px 14px; box-shadow: inset -14px 0 22px -18px rgba(44,39,64,.55) }
[data-page="right"]           { border-radius: 4px 14px 14px 4px; box-shadow: inset 14px 0 22px -18px rgba(44,39,64,.55); transform-origin: left center }
[data-spread].is-opening [data-page="right"] { animation: kb-book-open .62s var(--ease-out-soft) .1s both }
[data-leaf]                   { position: absolute; inset: 0; transform-style: preserve-3d }
[data-leaf] img               { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; backface-visibility: hidden }
[data-leaf] img:last-child    { transform: rotateY(180deg) }
[data-leaf][data-dir="fwd"]   { transform-origin: left center;  animation: kb-flip-fwd .62s var(--ease-page) both }
[data-leaf][data-dir="back"]  { transform-origin: right center; animation: kb-flip-back .62s var(--ease-page) both }

/* --- доступность --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
  }
}