/* Движение сайта OmNomNom — 29.09.2026, по просьбе Павла: «при загрузке выкатывалась надпись, при скролле
   плавно появлялись кнопки и текст с разных сторон, кнопки подсвечивались цветом при наведении».

   Как устроено:
   • Первый экран — чистый CSS: анимация идёт с первой же отрисовки, без мигания и без ожидания скриптов.
     Строки больших заголовков завёрнуты прямо в HTML в <om-line><om-lift> и выезжают из-под своей строки.
     Рукописные фразы «пишутся» слева направо, наклейки ставятся как штамп, фото проявляются.
   • Ниже первого экрана — site-motion.js: блок появляется, когда до него докрутили, один раз
     (заголовки — по строкам, текст — со своей стороны, фото — шторкой, карточки — по очереди).
   • Кнопки — заливка цветом при наведении мышью, стрелка шагает вперёд, при нажатии кнопка чуть проседает.
   • «Уменьшить движение» в настройках системы → анимаций нет. Без JS всё видно сразу. */

:root{--om-out:cubic-bezier(.16,1,.3,1);--om-write:cubic-bezier(.65,0,.35,1);--om-red:#E03127}

/* Строка заголовка = маска, из-под которой выезжает текст. <br> остаются на месте: без этих стилей заголовок
   выглядит как раньше. Поля маски компенсированы отрицательными отступами — размеры строки не меняются. */
om-line{display:inline-block;vertical-align:top;overflow:hidden;padding:.12em .08em .24em;margin:-.12em -.08em -.24em}
om-lift{display:inline-block}

/* ── Первый экран ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  @keyframes om-lift{from{translate:0 135%}}
  @keyframes om-rise{from{opacity:0;translate:0 26px}}
  @keyframes om-from-left{from{opacity:0;translate:-44px 0}}
  @keyframes om-from-right{from{opacity:0;translate:44px 0}}
  @keyframes om-pop{from{opacity:0;translate:0 14px;scale:.92}}
  @keyframes om-write{from{clip-path:inset(-30% 100% -30% -8%)}to{clip-path:inset(-30% -8% -30% -8%)}}
  @keyframes om-unveil{from{clip-path:inset(0 0 0 100%);scale:1.12}to{clip-path:inset(0);scale:1}}
  @keyframes om-settle{from{scale:1.09}}
  @keyframes om-stamp{0%{opacity:0;scale:1.6;rotate:-14deg}55%{opacity:1;scale:.93;rotate:2deg}78%{scale:1.03;rotate:-1deg}100%{opacity:1;scale:1;rotate:0deg}}
  @keyframes om-card-in{from{opacity:0;translate:90px 0;rotate:9deg}}

  /* главная: «Азия тут.» пишется маркером, потом подзаголовок, кнопки и карточка игры «прилетает» на стол */
  .overview-logo img{animation:om-write 1.3s var(--om-write) .15s backwards}
  .overview-deck{animation:om-rise .8s var(--om-out) .95s backwards}
  .overview-hero-actions>.button{animation:om-pop .7s var(--om-out) 1.08s backwards}
  .overview-hero-actions>.button+.button{animation-delay:1.16s}
  .overview-play-game{animation:om-card-in 1s var(--om-out) 1.2s backwards}

  /* история бренда */
  .history-hero .history-era{animation:om-from-left .7s var(--om-out) .05s backwards}
  .history-hero h1 om-lift{animation:om-lift 1s var(--om-out) .12s backwards}
  .history-hero h1 om-line:nth-of-type(2) om-lift{animation-delay:.2s}
  .history-hero h1 om-line:nth-of-type(3) om-lift{animation-delay:.28s}
  .history-hero h1 om-line:nth-of-type(4) om-lift{animation-delay:.36s}
  .history-hero-lead{animation:om-rise .8s var(--om-out) .72s backwards}
  .history-scroll-link{animation:om-rise .7s var(--om-out) .86s backwards}
  .history-hero-art img{animation:om-unveil 1.3s var(--om-out) .08s backwards}
  .history-hero-caption{animation:om-rise .7s var(--om-out) 1s backwards}
  .history-hero-stamp{animation:om-stamp .8s cubic-bezier(.2,.8,.3,1) 1.15s backwards}

  /* франшиза */
  .fr-hero .fr-eyebrow{animation:om-from-left .7s var(--om-out) .05s backwards}
  .fr-hero h1 om-lift{animation:om-lift 1s var(--om-out) .12s backwards}
  .fr-hero h1 om-line:nth-of-type(2) om-lift{animation-delay:.21s}
  .fr-hero h1 om-line:nth-of-type(3) om-lift{animation-delay:.3s}
  .fr-hero .fr-hand{animation:om-write 1.05s var(--om-write) .55s backwards}
  .fr-hero .fr-status{animation:om-rise .8s var(--om-out) .8s backwards}
  .fr-hero .fr-cta>*{animation:om-pop .7s var(--om-out) .92s backwards}
  .fr-hero .fr-cta>*+*{animation-delay:1s}
  .fr-hero-media img{animation:om-unveil 1.3s var(--om-out) .1s backwards}
  .fr-sticker{animation:om-stamp .8s cubic-bezier(.2,.8,.3,1) 1.15s backwards}

  /* работа у нас */
  .team-hero .team-eyebrow{animation:om-from-left .7s var(--om-out) .05s backwards}
  .team-hero h1 om-lift{animation:om-lift 1s var(--om-out) .12s backwards}
  .team-hero h1 om-line:nth-of-type(2) om-lift{animation-delay:.21s}
  .team-hero h1 om-line:nth-of-type(3) om-lift{animation-delay:.3s}
  .team-hero .hand{animation:om-write 1.05s var(--om-write) .55s backwards}
  .team-hero .team-lead{animation:om-rise .8s var(--om-out) .8s backwards}
  .team-hero .team-quick{animation:om-rise .8s var(--om-out) .92s backwards}
  .team-side>*{animation:om-from-right .9s var(--om-out) .35s backwards}
  .team-side>*+*{animation-delay:.47s}

  /* страницы кафе */
  .cafe-hero-video,.mall-hero-photos img{animation:om-settle 1.8s var(--om-out) backwards}
  .cafe-hero-content>span{animation:om-from-left .7s var(--om-out) .1s backwards}
  .cafe-hero-content h1 om-lift{animation:om-lift 1s var(--om-out) .15s backwards}
  .cafe-hero-content h1 om-line:nth-of-type(2) om-lift{animation-delay:.24s}
  .cafe-hero-content>p{animation:om-rise .8s var(--om-out) .55s backwards}
  .cafe-hero-content>button{animation:om-pop .7s var(--om-out) .7s backwards}
  .cafe-hero .hero-scroll{animation:om-rise .7s var(--om-out) 1s backwards}

  /* тексты-документы */
  .credits-page>h1,.legal>h1{animation:om-rise .8s var(--om-out) .05s backwards}
}

/* ── Ниже первого экрана: состояния, которые ставит site-motion.js ─────────── */
html.om-motion body{overflow-x:clip}
html.om-motion [data-om]{transition:opacity .8s var(--om-out) var(--om-d,0ms),translate 1s var(--om-out) var(--om-d,0ms),scale 1s var(--om-out) var(--om-d,0ms),rotate 1s var(--om-out) var(--om-d,0ms),clip-path 1.1s var(--om-out) var(--om-d,0ms)}
html.om-motion [data-om=up]:not(.om-in){opacity:0;translate:0 32px}
html.om-motion [data-om=left]:not(.om-in){opacity:0;translate:-60px 0}
html.om-motion [data-om=right]:not(.om-in){opacity:0;translate:60px 0}
html.om-motion [data-om=pop]:not(.om-in){opacity:0;translate:0 16px;scale:.92}
html.om-motion [data-om=card]:not(.om-in){opacity:0;translate:0 44px;rotate:-1.2deg}
html.om-motion [data-om^=photo]{clip-path:inset(0)}
html.om-motion [data-om=photo-l]:not(.om-in){clip-path:inset(0 100% 0 0);scale:1.08}
html.om-motion [data-om=photo-r]:not(.om-in){clip-path:inset(0 0 0 100%);scale:1.08}
html.om-motion [data-om=photo-up]:not(.om-in){clip-path:inset(100% 0 0 0);scale:1.08}
html.om-motion [data-om=stamp]:not(.om-in){opacity:0;scale:1.55;rotate:-12deg}
html.om-motion [data-om=lines] om-lift{transition:translate 1s var(--om-out) calc(var(--om-d,0ms) + var(--om-l,0ms))}
html.om-motion [data-om=lines]:not(.om-in) om-lift{translate:0 135%}

/* ── Кнопки ────────────────────────────────────────────────────────────────
   Жёлтые и тёмно-синие заливаются красным (белый текст на красном бренда — 4,5:1),
   прозрачные на тёмном фоне — жёлтым, контурные на светлом — синим. Заливка — подложка ::before,
   поэтому цвета, отступы и размеры самих кнопок не меняются. */
:is(.button-yellow,.header-cafe,.fr-btn-yellow,.team-btn-yellow,.asia-stop-actions button,.primary-action,.cafe-hero-content button,.night-menu-link,.book-link,.button-ghost,.fr-btn-ghost,.team-btn-ghost,.fr-links a,.team-submit,.overview-cafe-actions a){position:relative;isolation:isolate;overflow:hidden;transition:transform .2s var(--om-out),scale .15s var(--om-out),color .25s,background-color .25s,border-color .25s,box-shadow .3s}
:is(.button-yellow,.header-cafe,.fr-btn-yellow,.team-btn-yellow,.asia-stop-actions button,.primary-action,.cafe-hero-content button,.night-menu-link,.book-link,.button-ghost,.fr-btn-ghost,.team-btn-ghost,.fr-links a,.team-submit,.overview-cafe-actions a)::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--om-sweep,var(--om-red));transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--om-out);pointer-events:none}
:is(.button-ghost,.fr-btn-ghost,.team-btn-ghost){--om-sweep:#FFC400}
.overview-cafe-actions a{--om-sweep:#092a61}
:is(.button-yellow,.header-cafe,.fr-btn-yellow,.team-btn-yellow,.asia-stop-actions button,.primary-action,.cafe-hero-content button,.night-menu-link,.book-link,.button-ghost,.fr-btn-ghost,.team-btn-ghost,.fr-links a,.team-submit,.overview-cafe-actions a):active{scale:.97}
:is(.button,.header-cafe,.fr-btn,.team-btn) svg,:is(.primary-action,.cafe-hero-content button,.night-menu-link,.book-link) span[aria-hidden]{display:inline-block;transition:translate .3s var(--om-out)}

@media (hover:hover){
  :is(.button-yellow,.header-cafe,.fr-btn-yellow,.team-btn-yellow,.asia-stop-actions button,.primary-action,.cafe-hero-content button,.night-menu-link,.book-link,.button-ghost,.fr-btn-ghost,.team-btn-ghost,.fr-links a,.team-submit,.overview-cafe-actions a):hover::before{transform:scaleX(1)}
  /* жёлтые и синие → красный */
  :is(.button-yellow,.header-cafe,.fr-btn-yellow,.team-btn-yellow,.asia-stop-actions button,.primary-action,.cafe-hero-content button,.night-menu-link,.book-link,.fr-links a,.team-submit):hover{color:#fff;box-shadow:0 14px 30px -12px rgba(224,49,39,.75)}
  /* свой цвет под заливкой: без этого на миг мелькал бы прежний цвет наведения (синий или белый) */
  .asia-stop-actions button:hover{background-color:#ffd33f}
  :is(.cafe-hero-content button,.night-copy .night-menu-link,.book-link):hover{background-color:#ffcf31}
  :is(.fr-links a,.team-submit):hover{background-color:#022C6D}
  /* прозрачные на тёмном → жёлтый */
  :is(.button-ghost,.fr-btn-ghost,.team-btn-ghost):hover{color:#022C6D;border-color:#FFC400;box-shadow:inset 0 0 0 2px #FFC400,0 14px 30px -14px rgba(255,196,0,.6)}
  :is(.fr-btn-ghost,.team-btn-ghost):hover{background-color:transparent}
  /* контурные на светлом → синий */
  .overview-cafe-actions a:hover{background-color:transparent;color:#fff;border-color:#092a61}
  /* стрелки шагают вперёд */
  :is(.button,.header-cafe,.fr-btn,.team-btn):hover svg{translate:4px 0}
  :is(.primary-action,.cafe-hero-content button,.night-menu-link,.book-link):hover span[aria-hidden]{translate:3px -3px}
  /* текстовые ссылки краснеют вместе с подчёркиванием */
  :is(.history-text-link,.history-scroll-link,.overview-hits-all){transition:color .2s,border-color .2s}
  :is(.history-text-link,.history-scroll-link,.overview-hits-all):hover{color:var(--om-red);border-color:var(--om-red)}
}

@media (prefers-reduced-motion:reduce){
  :is(.button-yellow,.header-cafe,.fr-btn-yellow,.team-btn-yellow,.asia-stop-actions button,.primary-action,.cafe-hero-content button,.night-menu-link,.book-link,.button-ghost,.fr-btn-ghost,.team-btn-ghost,.fr-links a,.team-submit,.overview-cafe-actions a)::before{transition:none}
  :is(.button,.header-cafe,.fr-btn,.team-btn) svg,:is(.primary-action,.cafe-hero-content button,.night-menu-link,.book-link) span[aria-hidden]{transition:none}
}