/* Таймер-«табло аэропорта» (flap.js). Ячейка становится чернильной, цифры — на отдельных
   плашках с шарнирной линией; верхняя половина падает, нижняя приезжает. */
.timer--flap { gap: 8px; }
.timer--flap .timer__cell { background: transparent; border-color: var(--line); padding: 8px 7px 7px; gap: 5px; min-width: 0; }
.timer--flap .timer__cell span { color: var(--muted); opacity: .9; }
.timer--flap .flap-src { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.timer--flap .timer__cell.is-tick b { transform: none; opacity: 1; }

/* .timer__cell span (подпись «дней») в brand.css ловит и половинки плашек — возвращаем им наследование */
.timer--flap .timer__cell .flap__half { font-size: inherit; letter-spacing: 0; text-transform: none; color: inherit; opacity: 1; }
.flap-group { display: inline-flex; gap: 3px; user-select: none; -webkit-user-select: none; }
/* Специфичность выше, чем у .timer__cell span в brand.css (плашка — тоже span) */
.timer--flap .timer__cell .flap {
  position: relative; display: block; width: 24px; height: 36px;
  perspective: 260px; font-family: var(--sans); font-size: 24px; font-weight: 600; letter-spacing: 0;
  text-transform: none; opacity: 1; font-variant-numeric: tabular-nums lining-nums; color: var(--ink);
}
.flap__half {
  position: absolute; left: 0; width: 100%; height: 50%; overflow: hidden;
  background: var(--acc-soft); backface-visibility: hidden;
}
.flap__half i { position: absolute; left: 0; width: 100%; height: 36px; line-height: 36px; text-align: center; font-style: normal; }
.flap__half--top, .flap__leaf--top { top: 0; border-radius: 5px 5px 0 0; background: var(--acc-soft); }
.flap__half--top i, .flap__leaf--top i { top: 0; }
.flap__half--bottom, .flap__leaf--bottom { bottom: 0; border-radius: 0 0 5px 5px; background: color-mix(in srgb, var(--acc-soft) 85%, var(--acc) 15%); }
.flap__half--bottom i, .flap__leaf--bottom i { top: -18px; }
.flap::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line); z-index: 3; }

.flap__leaf { z-index: 2; display: none; }
.flap__leaf--top { transform-origin: 50% 100%; }
.flap__leaf--bottom { transform-origin: 50% 0; transform: rotateX(90deg); }
.flap.is-flipping .flap__leaf { display: block; }
.flap.is-flipping .flap__leaf--top { animation: flap-top .28s ease-in forwards; }
.flap.is-flipping .flap__leaf--bottom { animation: flap-bottom .28s ease-out .28s forwards; }
@keyframes flap-top { from { transform: rotateX(0); } to { transform: rotateX(-90deg); } }
@keyframes flap-bottom { from { transform: rotateX(90deg); } to { transform: rotateX(0); } }

@media (max-width: 420px) { .timer--flap .timer__cell .flap { width: 21px; height: 32px; font-size: 21px; } .flap__half i { height: 32px; line-height: 32px; } .flap__half--bottom i, .flap__leaf--bottom i { top: -16px; } .timer--flap { gap: 6px; } }
@media (prefers-reduced-motion: reduce) { .flap.is-flipping .flap__leaf { display: none; } }