/* =========================================================================
   pages/index-demos.css - схематичные ролики карусели главной
   (templates/components/demos.html).

   Координаты элементов и курсора - в % от кадра (.demo), поэтому курсор
   попадает в кнопку при любом размере. Текст - в em от ширины кадра
   (container query), сцена масштабируется целиком.

   Все анимации - на длительность --demo-duration и только у слайда с
   классом is-playing; без него виден первый кадр.
   ========================================================================= */

.demo {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
    background: var(--bg-secondary);
    container-type: inline-size;
}
.demo,
.demo * {
    /* --demo-duration задаёт слайд (templates/index.html) */
    animation-duration: var(--demo-duration, 7s);
    animation-timing-function: ease-in-out;
    animation-fill-mode: both;
}
/* невидимая «дорожка»: её animationend - конец сцены */
.demo__timeline {
    position: absolute;
    width: 0;
    height: 0;
}
.is-playing .demo__timeline {
    animation-name: demo-timeline;
    animation-timing-function: linear;
}
@keyframes demo-timeline {
    from { opacity: 0; }
    to { opacity: 1; }
}

.demo__camera {
    position: absolute;
    inset: 0;
    font-size: 2.1cqw;
    transform-origin: var(--fx, 50%) var(--fy, 50%);
}

/* --- Окно приложения ------------------------------------------------------- */
.demo__window {
    position: absolute;
    inset: 6% 5%;
    border-radius: 0.9em;
    border: 1px solid var(--border);
    background: var(--bg-card);
    box-shadow: 0 1em 2.5em -1em rgba(0, 0, 0, 0.25);
}
.demo__bar {
    height: 2.4em;
    display: flex;
    align-items: center;
    gap: 0.45em;
    padding: 0 1em;
    border-bottom: 1px solid var(--border);
    font-size: 0.85em;
    color: var(--text-muted);
}
.demo__bar i {
    width: 0.7em;
    height: 0.7em;
    border-radius: 50%;
    background: var(--border-strong);
}
.demo__bar i:first-child { background: rgba(248, 113, 113, 0.8); }
.demo__bar i:nth-child(2) { background: rgba(251, 191, 36, 0.8); }
.demo__bar i:nth-child(3) { background: rgba(74, 222, 128, 0.8); }
.demo__bar span {
    margin-left: 0.6em;
    font-weight: 600;
}

/* --- Сетка расписания ------------------------------------------------------ */
.demo__grid {
    position: absolute;
    display: grid;
    grid-template-columns: repeat(var(--cols, 6), 1fr);
    grid-auto-rows: 1fr;
    gap: 0.4em;
}
.demo__grid--main { left: 9%; right: 9%; top: 27%; bottom: 12%; }
.demo__grid--low { top: 30%; }
.demo__grid--side { left: 46%; right: 9%; top: 20%; bottom: 12%; }
.demo__cell {
    border-radius: 0.35em;
    background: var(--btn-hover);
}
.demo__cell.is-on {
    background: var(--first-color-hero);
}
.demo__cell.is-on:nth-child(3n) {
    background: var(--second-color-hero);
}

/* --- Курсор и нажатие ------------------------------------------------------- */
.demo__cursor {
    position: absolute;
    z-index: 5;
    width: 2.2em;
    height: 2.2em;
    left: var(--cx0, 80%);
    top: var(--cy0, 90%);
    /* остриё стрелки - в точке left/top */
    margin: -0.25em 0 0 -0.45em;
    fill: #fff;
    stroke: rgba(17, 24, 39, 0.9);
    stroke-width: 1.4;
    stroke-linejoin: round;
    filter: drop-shadow(0 0.15em 0.25em rgba(0, 0, 0, 0.3));
}
/* круг, расходящийся от точки нажатия; позиция - --click-x / --click-y */
.demo__click {
    position: absolute;
    z-index: 4;
    left: var(--click-x);
    top: var(--click-y);
    width: 4em;
    height: 4em;
    margin: -2em 0 0 -2em;
    border-radius: 50%;
    background: rgba(236, 72, 153, 0.35);
    opacity: 0;
    transform: scale(0);
}
.is-playing .demo__click {
    animation-timing-function: ease-out;
}

/* ==========================================================================
   1. Масштабируемость: сетка заполняется, нажатие на «Корпус 2»,
      сетка перестраивается под другой корпус
   ========================================================================= */
.demo--scale {
    --fx: 27%;
    --fy: 18%;
    --cx0: 78%;
    --cy0: 88%;
    --click-x: 26.8%;
    --click-y: 18.1%;
}
.demo__tabs {
    position: absolute;
    left: 9%;
    top: 15%;
    display: flex;
    gap: 0.6em;
}
.demo__tab {
    padding: 0.35em 0.9em;
    border-radius: 0.5em;
    background: var(--btn-hover);
    font-size: 0.85em;
    font-weight: 600;
    color: var(--text-muted);
}
.demo__tab--1 { background: var(--text-main); color: var(--bg-main); }

.demo--scale .demo__cell.is-filling:nth-child(3n) { --fill: var(--second-color-hero); }
.is-playing .demo--scale .demo__cell.is-filling {
    animation-name: demo-cell-refill;
    /* лесенкой: каждая следующая клетка чуть позже */
    animation-delay: calc(var(--i) * 25ms);
}
.is-playing .demo--scale .demo__camera { animation-name: demo-scale-camera; }
.is-playing .demo--scale .demo__cursor { animation-name: demo-scale-cursor; }
.is-playing .demo--scale .demo__tab--1 { animation-name: demo-tab-off; }
.is-playing .demo--scale .demo__tab--2 { animation-name: demo-tab-on; }

@keyframes demo-cell-refill {
    0%, 4%   { background: var(--btn-hover); }
    12%, 50% { background: var(--fill, var(--first-color-hero)); }
    54%      { background: var(--btn-hover); }
    64%, 100% { background: var(--fill2, var(--accent-gradient)); }
}
.demo--scale .demo__cell.is-filling:nth-child(2n) { --fill2: var(--first-color-hero); }
.demo--scale .demo__cell.is-filling:nth-child(5n) { --fill2: var(--btn-hover); }
@keyframes demo-scale-camera {
    0%, 30%  { transform: scale(1); }
    44%, 56% { transform: scale(1.7); }
    70%, 100% { transform: scale(1); }
}
@keyframes demo-scale-cursor {
    0%, 22%  { left: 78%; top: 88%; }
    42%, 100% { left: 26.8%; top: 18.4%; }
}
@keyframes demo-tab-off {
    0%, 50% { background: var(--text-main); color: var(--bg-main); }
    52%, 100% { background: var(--btn-hover); color: var(--text-muted); }
}
@keyframes demo-tab-on {
    0%, 50% { background: var(--btn-hover); color: var(--text-muted); }
    52%, 100% { background: var(--text-main); color: var(--bg-main); }
}
.is-playing .demo--scale .demo__click { animation-name: demo-click-50; }

/* ==========================================================================
   2. Гибкость: включение «Без окон у учителей», окна в сетке закрываются
   ========================================================================= */
.demo--flex {
    --fx: 22%;
    --fy: 26%;
    --cx0: 80%;
    --cy0: 88%;
    --click-x: 38.5%;
    --click-y: 26.1%;
}
.demo__panel {
    position: absolute;
    left: 9%;
    top: 20%;
    width: 33%;
    bottom: 12%;
    display: flex;
    flex-direction: column;
    gap: 0.6em;
}
.demo__setting {
    height: 18%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6em;
    padding: 0 0.8em;
    border-radius: 0.6em;
    background: var(--btn-hover);
    font-size: 0.8em;
    font-weight: 600;
}
.demo__toggle {
    position: relative;
    flex-shrink: 0;
    width: 2.6em;
    height: 1.5em;
    border-radius: 1em;
    background: var(--border-strong);
}
.demo__toggle::after {
    content: "";
    position: absolute;
    top: 0.2em;
    left: 0.2em;
    width: 1.1em;
    height: 1.1em;
    border-radius: 50%;
    background: #fff;
}
.demo__toggle.is-on { background: var(--accent); }
.demo__toggle.is-on::after { left: 1.3em; }
.demo__cell.is-gap { background: transparent; outline: 1px dashed var(--border-strong); outline-offset: -1px; }

.is-playing .demo--flex .demo__camera { animation-name: demo-flex-camera; }
.is-playing .demo--flex .demo__cursor { animation-name: demo-flex-cursor; }
.is-playing .demo--flex .demo__click { animation-name: demo-click-45; }
.is-playing .demo--flex .demo__setting--1 .demo__toggle { animation-name: demo-toggle-track; }
.is-playing .demo--flex .demo__setting--1 .demo__toggle::after { animation-name: demo-toggle-knob; }
.is-playing .demo--flex .demo__cell.is-gap { animation-name: demo-gap-close; }

@keyframes demo-flex-camera {
    0%, 20%  { transform: scale(1); }
    36%, 54% { transform: scale(1.8); }
    68%, 100% { transform: scale(1); }
}
@keyframes demo-flex-cursor {
    0%, 14%  { left: 80%; top: 88%; }
    36%, 100% { left: 38.5%; top: 26.4%; }
}
@keyframes demo-toggle-track {
    0%, 46% { background: var(--border-strong); }
    50%, 100% { background: var(--accent); }
}
@keyframes demo-toggle-knob {
    0%, 46% { left: 0.2em; }
    52%, 100% { left: 1.3em; }
}
@keyframes demo-gap-close {
    0%, 72% { background: transparent; outline-color: var(--border-strong); }
    84%, 100% { background: var(--first-color-hero); outline-color: transparent; }
}

/* ==========================================================================
   3. Экспорт: нажатие «Excel», внизу появляется скачанный файл
   ========================================================================= */
.demo--export {
    --fx: 74%;
    --fy: 19%;
    --cx0: 50%;
    --cy0: 86%;
    --click-x: 71.5%;
    --click-y: 19.5%;
}
.demo__button {
    position: absolute;
    top: 15.5%;
    height: 8%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5em;
    font-size: 0.85em;
    font-weight: 700;
}
.demo__button--excel {
    left: 64%;
    width: 15%;
    background: rgba(16, 124, 65, 0.15);
    color: rgba(16, 124, 65, 1);
}
html.dark-theme .demo__button--excel { color: rgba(74, 222, 128, 1); }
.demo__button--pdf {
    left: 81%;
    width: 10%;
    background: var(--btn-hover);
    color: var(--text-muted);
}
.demo__file {
    position: absolute;
    right: 9%;
    bottom: 10%;
    display: flex;
    align-items: center;
    gap: 0.7em;
    padding: 0.7em 1em;
    border-radius: 0.8em;
    border: 1px solid var(--border);
    background: var(--bg-card);
    box-shadow: 0 0.8em 2em -0.5em rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateY(1.5em);
}
.demo__file-icon {
    padding: 0.4em 0.5em;
    border-radius: 0.35em;
    background: rgba(16, 124, 65, 1);
    color: #fff;
    font-size: 0.7em;
    font-weight: 800;
}
.demo__file-name {
    font-size: 0.85em;
    font-weight: 600;
}
.demo__file-check {
    width: 1.3em;
    height: 1.3em;
    border-radius: 50%;
    background: var(--success);
    opacity: 0;
    transform: scale(0);
}
.demo__file-check::after {
    content: "";
    display: block;
    width: 0.35em;
    height: 0.65em;
    margin: 0.22em auto 0;
    border: solid #fff;
    border-width: 0 0.15em 0.15em 0;
    transform: rotate(45deg);
}

.is-playing .demo--export .demo__camera { animation-name: demo-export-camera; }
.is-playing .demo--export .demo__cursor { animation-name: demo-export-cursor; }
.is-playing .demo--export .demo__click { animation-name: demo-click-45; }
.is-playing .demo--export .demo__button--excel { animation-name: demo-press; }
.is-playing .demo--export .demo__file { animation-name: demo-file-in; }
.is-playing .demo--export .demo__file-check { animation-name: demo-check-in; }

@keyframes demo-export-camera {
    0%, 22%  { transform: scale(1); }
    38%, 54% { transform: scale(2); }
    66%, 100% { transform: scale(1); }
}
@keyframes demo-export-cursor {
    0%, 12%  { left: 50%; top: 86%; }
    36%, 100% { left: 71.5%; top: 19.8%; }
}
@keyframes demo-press {
    0%, 43%  { transform: scale(1); }
    45%      { transform: scale(0.92); }
    48%, 100% { transform: scale(1); }
}
@keyframes demo-file-in {
    0%, 64%  { opacity: 0; transform: translateY(1.5em); }
    72%, 100% { opacity: 1; transform: none; }
}
@keyframes demo-check-in {
    0%, 76%  { opacity: 0; transform: scale(0); }
    82%      { opacity: 1; transform: scale(1.2); }
    86%, 100% { opacity: 1; transform: scale(1); }
}

/* ==========================================================================
   4. Редактор: урок берётся курсором и переносится в свободную клетку
   ========================================================================= */
.demo--editor {
    --fx: 40%;
    --fy: 62%;
    --cx0: 82%;
    --cy0: 88%;
    --click-x: 29.3%;
    --click-y: 57.5%;
}
/* координаты совпадают с клетками сетки .demo__grid--main (6 столбцов) */
.demo__lesson,
.demo__target {
    position: absolute;
    left: 22.8%;
    top: 51.9%;
    width: 13%;
    height: 11.1%;
    border-radius: 0.45em;
}
.demo__lesson {
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #fff;
    font-size: 0.75em;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 0.3em 0.8em -0.3em rgba(236, 72, 153, 0.6);
}
.demo__target {
    left: 50.4%;
    top: 64.4%;
    border: 2px dashed transparent;
}

.is-playing .demo--editor .demo__camera { animation-name: demo-editor-camera; }
.is-playing .demo--editor .demo__cursor { animation-name: demo-editor-cursor; }
.is-playing .demo--editor .demo__click { animation-name: demo-click-34; }
.is-playing .demo--editor .demo__lesson { animation-name: demo-editor-lesson; }
.is-playing .demo--editor .demo__target { animation-name: demo-editor-target; }

@keyframes demo-editor-camera {
    0%, 16%  { transform: scale(1); }
    30%, 70% { transform: scale(1.5); }
    84%, 100% { transform: scale(1); }
}
@keyframes demo-editor-cursor {
    0%, 8%   { left: 82%; top: 88%; }
    28%, 38% { left: 29.3%; top: 57.5%; }
    60%, 100% { left: 56.9%; top: 70%; }
}
@keyframes demo-editor-lesson {
    0%, 33%  { left: 22.8%; top: 51.9%; transform: scale(1); }
    37%      { left: 22.8%; top: 51.9%; transform: scale(1.08) rotate(-2deg); }
    60%      { left: 50.4%; top: 64.4%; transform: scale(1.08) rotate(-2deg); }
    64%, 100% { left: 50.4%; top: 64.4%; transform: scale(1); }
}
@keyframes demo-editor-target {
    0%, 36%  { border-color: transparent; background: transparent; }
    40%, 60% { border-color: var(--accent); background: transparent; }
    64%      { border-color: var(--success); background: rgba(34, 197, 94, 0.25); }
    80%, 100% { border-color: transparent; background: transparent; }
}

/* --- Нажатие: момент - в имени анимации (% от длительности сцены) --------- */
@keyframes demo-click-34 {
    0%, 33% { opacity: 0; transform: scale(0); }
    34%     { opacity: 1; transform: scale(0.3); }
    42%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes demo-click-45 {
    0%, 44% { opacity: 0; transform: scale(0); }
    45%     { opacity: 1; transform: scale(0.3); }
    53%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes demo-click-50 {
    0%, 49% { opacity: 0; transform: scale(0); }
    50%     { opacity: 1; transform: scale(0.3); }
    58%, 100% { opacity: 0; transform: scale(1); }
}