/* Движение сайта. Правила: текст при прокрутке двигается только сдвигом, главное фото
   первого экрана не анимируется, закрытие быстрее открытия, при «Уменьшить движение»
   всё сразу стоит в конечном состоянии. Без поддержки приёма страница выглядит законченной. */
:root{
  /* Пружина интерфейса: отскок около 4 % */
  --spring:linear(0, 0.025, 0.089, 0.178, 0.28, 0.387, 0.492, 0.591, 0.681, 0.759, 0.827, 0.883, 0.928, 0.964, 0.991, 1.011, 1.024, 1.033, 1.037, 1.038, 1.038, 1.035, 1.032, 1.028, 1.024, 1.02, 1.016, 1.012, 1.009, 1.007, 1.005, 1.003, 1.001, 1);
  /* Посадка поляроида: отскок около 8 % */
  --settle:linear(0, 0.047, 0.162, 0.311, 0.472, 0.624, 0.759, 0.87, 0.955, 1.016, 1.055, 1.076, 1.083, 1.081, 1.072, 1.06, 1.047, 1.034, 1.022, 1.013, 1.005, 1, 0.996, 0.994, 0.993, 0.993, 0.994, 0.995, 0.996, 0.997, 0.998, 0.999, 1);
  --out:cubic-bezier(.16,1,.3,1);
}
@keyframes enter{from{opacity:0;translate:0 14px}}
@keyframes fade{from{opacity:0}}
@keyframes draw{from{stroke-dashoffset:330}}
@keyframes drop{from{opacity:0;translate:10px -26px;rotate:11deg}30%{opacity:1}}
@keyframes bleed{from{scale:1.07;opacity:.55}}
@keyframes rise{from{translate:0 16px}}
@keyframes draw-check{from{stroke-dashoffset:40}}

/* Первый экран: строки заголовка, текст, кнопки, плашка, мазок и поляроид */
.hero h1 .ln,.hero-copy>p,.hero-actions,.near{animation:enter .7s var(--out) both}
.hero h1 .ln:nth-child(2){animation-delay:.07s}
.hero h1 .ln:nth-child(3){animation-delay:.14s}
.hero-copy>p{animation-delay:.2s}
.hero-actions{animation-delay:.26s}
.near{animation-delay:.32s}
.hero-stroke path{animation:draw .9s var(--out) .5s both}
.hero-small{animation:drop .9s var(--settle) .3s both}
.photo-caption{animation:enter .6s var(--out) .8s both}

/* Нажатие */
.button:active,.near:active,.book-bar-call:active{transform:scale(.97)}
.near,.book-bar-call{transition:transform .16s var(--out),border-color .2s}

/* Переключатель расписания: пилюля едет за выбором */
.view-switch::before{transition:transform .45s var(--spring)}
.view-switch button{transition:color .25s}

/* Меню на телефоне: только открытие, закрытие мгновенное из-за [hidden] */
.mobile-menu:not([hidden]){animation:fade .25s ease-out}
.mobile-menu:not([hidden]) a{animation:enter .4s var(--out) both;animation-delay:calc((sibling-index() - 1) * 25ms)}
.menu-backdrop:not([hidden]){animation:fade .3s ease-out}

/* Окна: появление пружиной, закрытие короче */
dialog{opacity:0;transform:translateY(12px) scale(.97);
  transition:opacity .2s ease-in,transform .22s ease-in,overlay .22s allow-discrete,display .22s allow-discrete}
dialog[open]{opacity:1;transform:none;
  transition:opacity .3s ease-out,transform .55s var(--spring),overlay .55s allow-discrete,display .55s allow-discrete}
@starting-style{dialog[open]{opacity:0;transform:translateY(12px) scale(.97)}}
/* Фото в окно галереи переносит View Transition, окну свой сдвиг не нужен */
#gallery-dialog,#gallery-dialog[open]{transform:none}
@starting-style{#gallery-dialog[open]{transform:none}}
dialog::backdrop{background:rgb(18 38 29/0);backdrop-filter:blur(0);
  transition:background .22s,backdrop-filter .22s,overlay .22s allow-discrete,display .22s allow-discrete}
dialog[open]::backdrop{background:#12261ddd;backdrop-filter:blur(6px);
  transition:background .35s,backdrop-filter .35s,overlay .55s allow-discrete,display .55s allow-discrete}
@starting-style{dialog[open]::backdrop{background:rgb(18 38 29/0);backdrop-filter:blur(0)}}

/* Заявка отправлена: галочка рисуется, текст поднимается */
.form-ok svg path{animation:draw-check .55s var(--out) .1s both}
.form-ok span{animation:enter .6s var(--out) .3s both}

/* View Transitions: корень меняется сразу, двигаются только названные элементы */
::view-transition-old(root),::view-transition-new(root){animation:none}
::view-transition-group(schedule-panel),::view-transition-group(calendar-pick){animation-duration:.42s;animation-timing-function:var(--out)}
::view-transition-old(schedule-panel),::view-transition-old(calendar-pick){animation:.18s ease-in both vt-out}
::view-transition-new(schedule-panel),::view-transition-new(calendar-pick){animation:.36s .08s var(--out) both vt-in}
/* Имя у фото окна только пока окно открыто: при закрытии окно ещё видно 0,22 с */
#gallery-dialog[open] #gallery-image{view-transition-name:photo}
::view-transition-group(photo){animation-duration:.5s;animation-timing-function:var(--out)}
::view-transition-old(photo),::view-transition-new(photo){animation-duration:.3s;height:100%;object-fit:cover}
@keyframes vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(8px)}}

/* Проявление при прокрутке: фото чуть крупнее и бледнее, заголовки ниже; без скрипта */
@supports (animation-timeline:view()){
  /* view() считает от ближайшего прокручиваемого предка, а overflow:hidden делает им рамку фото.
     С clip ячейка сетки получает минимум по содержимому и растёт до натуральной высоты фото,
     поэтому минимум обнуляется явно, как было при hidden */
  .class-card>button,.image-open,.event-card{overflow:clip;min-height:0;min-width:0}
  .class-card img,.image-open img{animation:bleed linear both;animation-timeline:view();animation-range:entry 0% cover 38%}
  .section h2,.class-card h3,.reasons article{animation:rise linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
  /* На телефоне мероприятия листаются лентой, у неё своя ось прокрутки */
  @media(min-width:651px){.event-card img{animation:bleed linear both;animation-timeline:view();animation-range:entry 0% cover 38%}}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after,::backdrop{animation:none!important;transition:none!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}