/* ARBI.RU — движение и истории главной.
   Анимация здесь служит навигации, а не украшению: появление секций подсказывает
   порядок чтения, а сторис дают короткий вход в частые ситуации. Всё отключается
   при prefers-reduced-motion. */

html { scroll-behavior: smooth; }

@keyframes arbi-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes arbi-hero-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes arbi-soft-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(215, 245, 66, .45); }
  50% { box-shadow: 0 0 0 8px rgba(215, 245, 66, 0); }
}

/* Появление секций. Класс ставится observer-ом; без JS содержимое остаётся
   видимым, поэтому страница не зависит от скрипта. */
[data-reveal] {
  opacity: 1;
}
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Герой входит сразу, без ожидания observer-а. */
.hero__text > * { animation: arbi-hero-in .65s both; }
.hero__text > *:nth-child(2) { animation-delay: .06s; }
.hero__text > *:nth-child(3) { animation-delay: .12s; }
.hero__text > *:nth-child(4) { animation-delay: .18s; }
.hero__text > *:nth-child(5) { animation-delay: .24s; }
.hero__demo { animation: arbi-hero-in .8s .18s both; }

/* ------------------------------------------------------------------ сторис */
.stories-section { padding: 24px 0 8px; }
.stories-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.stories-head h2 { margin: 0; font-size: var(--step-24); }
.stories-head p { margin: 0; color: var(--graphite-500); font-size: var(--step-13); }
.story-bubbles { display: flex; gap: 16px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.story-bubble { flex: 0 0 112px; display: flex; flex-direction: column; align-items: center; gap: 8px; border: 0; background: transparent; padding: 0; cursor: pointer; text-align: center; color: var(--graphite-800); scroll-snap-align: start; }
.story-bubble__ring { position: relative; width: 86px; height: 86px; padding: 3px; border-radius: 50%; background: linear-gradient(135deg, var(--lime-500), var(--graphite-900)); transition: transform .22s ease, background .22s ease; }
.story-bubble__ring::after { content: ''; position: absolute; inset: 3px; border-radius: inherit; border: 3px solid var(--paper); }
.story-bubble__ring img { position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; border: 3px solid var(--paper); }
.story-bubble:hover .story-bubble__ring, .story-bubble:focus-visible .story-bubble__ring { transform: scale(1.06) rotate(-2deg); }
.story-bubble:focus-visible { outline: 3px solid var(--lime-500); outline-offset: 4px; border-radius: 12px; }
.story-bubble__label { font-size: var(--step-13); font-weight: 600; line-height: 1.25; }
.story-bubble__note { color: var(--graphite-500); font-size: var(--step-11, .6875rem); line-height: 1.25; }
.story-bubble--accent .story-bubble__ring { background: linear-gradient(135deg, var(--lime-500), var(--graphite-700)); animation: arbi-soft-pulse 3.8s infinite; }

.story-modal { position: fixed; inset: 0; z-index: 12000; display: grid; place-items: center; padding: 20px; }
.story-modal[hidden] { display: none; }
.story-modal__backdrop { position: absolute; inset: 0; background: rgba(10, 14, 7, .74); backdrop-filter: blur(4px); }
.story-modal__card { position: relative; z-index: 1; width: min(430px, 100%); height: min(760px, calc(100vh - 40px)); border-radius: 22px; overflow: hidden; background: var(--graphite-900); box-shadow: 0 32px 90px rgba(0, 0, 0, .42); color: #fff; }
.story-modal__bars { position: absolute; top: 12px; left: 14px; right: 56px; z-index: 4; display: flex; gap: 4px; }
.story-bar { flex: 1 1 0; height: 3px; border-radius: 99px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.story-bar span { display: block; height: 100%; width: 0; background: #fff; }
.story-bar.is-active span { animation: story-fill 7s linear forwards; }
.story-bar.is-done span { width: 100%; }
.story-modal__close { position: absolute; top: 8px; right: 10px; z-index: 5; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(15, 20, 10, .58); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.story-modal__slide { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.story-modal__slide[hidden] { display: none; }
.story-modal__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-modal__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 12, 5, .10) 0%, rgba(8, 12, 5, .16) 36%, rgba(8, 12, 5, .92) 100%); }
.story-modal__content { position: relative; z-index: 4; padding: 24px 22px 28px; }
.story-modal__eyebrow { margin: 0 0 6px; color: var(--lime-500); font-size: var(--step-12); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.story-modal__title { margin: 0; font-size: var(--step-30); line-height: 1.08; color: #fff; }
.story-modal__text { margin: 10px 0 0; max-width: 34ch; color: rgba(255, 255, 255, .84); font-size: var(--step-14); line-height: 1.5; }
.story-modal__cta { display: inline-flex; margin-top: 16px; }
.story-modal__nav { position: absolute; inset: 0; z-index: 3; display: flex; }
.story-modal__nav button { flex: 1 1 50%; border: 0; background: transparent; cursor: pointer; }
.story-modal__nav button:last-child { flex: 1 1 35%; }
.story-modal__nav button:focus-visible { outline: 2px solid var(--lime-500); outline-offset: -6px; }
body.story-open { overflow: hidden; }
@keyframes story-fill { from { width: 0; } to { width: 100%; } }

/* ------------------------------------------------------------------ большие баннеры */
.feature-banner { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--graphite-900); min-height: 390px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr); align-items: stretch; color: #fff; }
.feature-banner__text { position: relative; z-index: 2; padding: clamp(26px, 4vw, 54px); display: flex; flex-direction: column; justify-content: center; }
.feature-banner__text .eyebrow { color: var(--lime-500); }
.feature-banner h2 { color: #fff; font-size: clamp(28px, 3.2vw, 48px); line-height: 1.05; margin: 0; max-width: 15ch; }
.feature-banner p { color: rgba(255, 255, 255, .78); max-width: 45ch; margin: 14px 0 0; font-size: var(--step-15); line-height: 1.6; }
.feature-banner__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.feature-banner__media { position: relative; min-height: 300px; overflow: hidden; }
.feature-banner__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 26%; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.feature-banner:hover .feature-banner__media img { transform: scale(1.035); }
.feature-banner__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--graphite-900) 0%, rgba(19, 23, 14, .08) 48%, transparent 100%); }
.feature-banner__badge { position: absolute; z-index: 2; right: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 999px; background: rgba(19, 23, 14, .78); color: #fff; font-size: var(--step-12); backdrop-filter: blur(6px); }
.feature-banner__badge b { color: var(--lime-500); }

.mini-banners { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mini-banner { position: relative; isolation: isolate; min-height: 190px; border-radius: var(--radius-lg); overflow: hidden; background: var(--paper-warm); border: 1px solid var(--line-200); padding: 22px; display: flex; flex-direction: column; justify-content: flex-end; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.mini-banner__art { position: absolute; z-index: -1; inset: 0; background-position: right center; background-size: cover; opacity: .9; transition: transform .6s ease; }
.mini-banner:hover { transform: translateY(-3px); border-color: var(--lime-500); box-shadow: 0 16px 40px rgba(19, 23, 14, .10); }
.mini-banner:hover .mini-banner__art { transform: scale(1.03); }
.mini-banner__label { font-size: var(--step-12); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--graphite-500); }
.mini-banner h3 { margin: 6px 0 0; font-size: var(--step-20); max-width: 16ch; }
.mini-banner p { margin: 6px 0 0; color: var(--graphite-500); font-size: var(--step-13); max-width: 28ch; }
.mini-banner__link { margin-top: 12px; font-size: var(--step-13); font-weight: 600; color: var(--graphite-800); }

/* Плавность карточек и кнопок. */
.card, .svc, .jcard, .specialist-card, .request-card, .category-tile { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.card--link:hover, .category-tile:hover, .specialist-card:hover, .request-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(19, 23, 14, .08); }
.btn, .link-action, .story-bubble { transition: background-color .18s ease, color .18s ease, transform .18s ease, border-color .18s ease; }
.btn:active { transform: translateY(1px); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--lime-500); outline-offset: 3px; }

@media (max-width: 760px) {
  .feature-banner { grid-template-columns: 1fr; min-height: 0; }
  .feature-banner__media { min-height: 250px; order: -1; }
  .feature-banner__media::after { background: linear-gradient(0deg, var(--graphite-900) 0%, transparent 60%); }
  .feature-banner__text { padding: 22px; margin-top: -40px; }
  .mini-banners { grid-template-columns: 1fr; }
  .story-bubble { flex-basis: 92px; }
  .story-bubble__ring { width: 72px; height: 72px; }
  .story-modal__card { width: min(390px, 100%); height: min(720px, calc(100vh - 24px)); }
  .story-modal__title { font-size: var(--step-24); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; transition-duration: .001ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .story-bubble--accent .story-bubble__ring { animation: none; }
}