/* ============================================================
   r1studio — слой движения и полировки интерфейса
   Палитра сохранена: #EEF0E8 · #E1E6DC · #D9DECF · #17251C · #6E8C74
   ============================================================ */

:root {
  --r1-bg: #EEF0E8;
  --r1-ink: #17251C;
  --r1-olive: #6E8C74;
  --r1-line: #D9DECF;
  --r1-muted: #58645A;
  --r1-ease: cubic-bezier(.16, 1, .3, 1);
  --r1-ease-soft: cubic-bezier(.22, .61, .36, 1);
}

/* ------------------------- база ------------------------- */
body { text-rendering: optimizeLegibility; }
::selection { background: #CBD8BE; color: #17251C; }
a, button, input, textarea, summary { transition-timing-function: var(--r1-ease); }
img { transition: transform 1.1s var(--r1-ease); }

/* --------------------- прогресс чтения --------------------- */
#scroll-progress {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 80;
  height: 2px;
  width: 100%;
  pointer-events: none;
}
#scroll-progress > span {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #96A97E 0%, #6E8C74 55%, #17251C 100%);
  will-change: transform;
  pointer-events: none;
}

/* ----------------- «Купить сайт» сверху ----------------- */
#buy-bar {
  position: fixed;
  left: 0;
  right: 0;
  top: 14px;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding: 0 16px;
  pointer-events: none;
  transition: opacity .6s var(--r1-ease), transform .65s var(--r1-ease);
}
#buy-bar.is-hidden { opacity: 0; transform: translate3d(0, -12px, 0); }
#buy-bar.is-hidden .buy-pill { pointer-events: none; }

.buy-pill {
  position: relative;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem 1rem .6rem .8rem;
  border: 1px solid #C8D0C2;
  border-radius: 999px;
  background: rgba(238, 240, 232, .95);
  color: var(--r1-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 8px 26px -22px rgba(23, 37, 28, .9), inset 0 1px 0 rgba(255, 255, 255, .55);
  transition: background-color .55s var(--r1-ease), color .55s var(--r1-ease),
    border-color .55s var(--r1-ease), box-shadow .6s var(--r1-ease), transform .5s var(--r1-ease);
}
.buy-pill::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 999px;
  border: 1px solid rgba(110, 140, 116, .6);
  opacity: 0;
  pointer-events: none;
  animation: r1-ring 3.4s var(--r1-ease) 1.8s 3;
}
.buy-pill:hover,
.buy-pill:focus-visible {
  background: var(--r1-ink);
  border-color: var(--r1-ink);
  color: #F3F4EE;
  box-shadow: 0 18px 34px -24px rgba(23, 37, 28, .95);
  transform: translate3d(0, -1px, 0);
}
.buy-pill__dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--r1-olive);
  transition: background-color .55s var(--r1-ease), transform .55s var(--r1-ease);
}
.buy-pill:hover .buy-pill__dot { background: #CBD8BE; transform: scale(1.3); }

.buy-type { position: relative; display: inline-block; }
.buy-type__ghost { visibility: hidden; white-space: nowrap; }
.buy-type__text { position: absolute; left: 0; top: 0; white-space: nowrap; }
.buy-char { display: inline-block; opacity: 0; }
.buy-char.is-printed { animation: r1-print .44s var(--r1-ease) forwards; }
.buy-type__caret {
  display: inline-block;
  width: 1px;
  height: 1.02em;
  margin-left: .26em;
  vertical-align: -.12em;
  background: currentColor;
  animation: r1-blink 1s steps(1) infinite;
}
.buy-pill.is-typed .buy-type__caret { animation: r1-blink 1.5s steps(1) infinite; opacity: .5; }
.buy-pill__arrow {
  width: 12px;
  height: 12px;
  opacity: .65;
  transition: transform .5s var(--r1-ease), opacity .5s var(--r1-ease);
}
.buy-pill:hover .buy-pill__arrow { transform: translate3d(2px, -2px, 0); opacity: 1; }
.buy-pill.is-stamped { animation: r1-stamp .55s var(--r1-ease); }

@keyframes r1-print {
  0% { opacity: 0; transform: translate3d(0, -3px, 0) scale(1.18); filter: blur(2.5px); }
  55% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes r1-blink { 0%, 48% { opacity: 1; } 49%, 100% { opacity: 0; } }
@keyframes r1-stamp { 0% { transform: scale(1.05); } 45% { transform: scale(.985); } 100% { transform: scale(1); } }
@keyframes r1-ring {
  0% { opacity: 0; transform: scale(1); }
  18% { opacity: .55; }
  60% { opacity: 0; transform: scale(1.14); }
  100% { opacity: 0; transform: scale(1.14); }
}

@media (max-width: 767px) {
  #buy-bar { top: calc(60px + 12px); }
  .buy-pill { font-size: 10px; letter-spacing: .14em; padding: .52rem .82rem .52rem .66rem; gap: .45rem; }
  .buy-pill__arrow { width: 11px; height: 11px; }
}

/* ------------------ появление при прокрутке ------------------ */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity .65s var(--r1-ease-soft), transform .75s var(--r1-ease-soft);
  transition-delay: var(--r1-delay, 0ms);
}
.js [data-reveal="left"] { transform: translate3d(-22px, 0, 0); }
.js [data-reveal="zoom"] { transform: scale(.978) translate3d(0, 12px, 0); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* набор заголовка по буквам */
.js [data-split] .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: .16em;
  margin-bottom: -.16em;
}
.js [data-split] .ch {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 105%, 0);
  transition: transform .8s var(--r1-ease), opacity .55s var(--r1-ease);
  transition-delay: calc(var(--ci, 0) * 16ms);
}
.js [data-split].is-in .ch { opacity: 1; transform: none; }
.js [data-split] .w:last-child .ch:last-child { color: var(--r1-olive); }

/* --------------------------- герой --------------------------- */
#top { position: relative; overflow: hidden; }
#top::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(52% 62% at 92% 4%, rgba(110, 140, 116, .16) 0%, rgba(110, 140, 116, 0) 68%),
    radial-gradient(46% 52% at 2% 98%, rgba(200, 208, 190, .55) 0%, rgba(200, 208, 190, 0) 70%);
}
#top > div { position: relative; z-index: 1; }

/* сайдбар и мобильная шапка почти непрозрачны — отключаем дорогой blur при скролле */
aside.backdrop-blur-md,
header.backdrop-blur-md {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background-color: #EEF0E8 !important;
}

/* -------------------------- работы -------------------------- */
#works article { transition: opacity .7s var(--r1-ease-soft), transform .8s var(--r1-ease-soft); }
/* превью мягко «проявляется» масштабом — дешевле, чем clip-path */
.js #works article > a:first-child {
  transform: scale(.982);
  transition: transform .9s var(--r1-ease-soft);
}
.js #works article.is-in > a:first-child { transform: none; }
#works article .grid { transition: transform .6s var(--r1-ease); }
#works article:hover .grid { transform: translate3d(4px, 0, 0); }
#works article .grid > a {
  transition: transform .55s var(--r1-ease), background-color .55s var(--r1-ease),
    color .55s var(--r1-ease), border-color .55s var(--r1-ease);
}
#works article .grid > a:hover { transform: translate3d(0, -2px, 0) scale(1.06); }
#works article h3 { transition: color .5s var(--r1-ease), letter-spacing .6s var(--r1-ease); }
#works article:hover h3 { color: #2C4436; }

/* -------------------------- контакт -------------------------- */
#contact-form input,
#contact-form textarea {
  border-bottom: 1px solid #C8D0C2;
  transition: border-color .5s var(--r1-ease), box-shadow .5s var(--r1-ease);
}
#contact-form input:focus,
#contact-form textarea:focus {
  border-color: var(--r1-olive);
  box-shadow: 0 1px 0 0 var(--r1-olive);
}
#contact-form button[type="submit"] {
  transition: background-color .55s var(--r1-ease), transform .5s var(--r1-ease), box-shadow .55s var(--r1-ease);
}
#contact-form button[type="submit"]:hover {
  transform: translate3d(0, -2px, 0);
  box-shadow: 0 16px 26px -22px rgba(23, 37, 28, .95);
}

/* ------------------------- навигация ------------------------- */
#side-nav a {
  transition: background-color .45s var(--r1-ease), color .45s var(--r1-ease), padding-left .45s var(--r1-ease);
}
#side-nav a:hover,
#side-nav a.nav-active { padding-left: .95rem; }
footer a { transition: color .45s var(--r1-ease); }

@keyframes r1-aside-in {
  from { opacity: 0; transform: translate3d(-12px, 0, 0); }
  to { opacity: 1; transform: none; }
}
@media (min-width: 768px) {
  .js aside > a { animation: r1-aside-in .9s var(--r1-ease) .05s both; }
  .js aside > p { animation: r1-aside-in .9s var(--r1-ease) .12s both; }
  .js aside > nav { animation: r1-aside-in .9s var(--r1-ease) .2s both; }
  .js aside > div { animation: r1-aside-in .9s var(--r1-ease) .3s both; }
}

/* ------------------- живые превью работ ------------------- */
/* iframe занимает ту же площадь, что и прежний скриншот 16:9 */
.live-preview {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

/* На телефоне 16:9 давало полоску ~200px — сайт внутри нечитаем.
   Делаем превью высоким (почти экран), чтобы его можно было листать. */
@media (max-width: 767px) {
  #works .work-frame {
    aspect-ratio: auto;
    height: clamp(430px, 72vh, 640px);
  }
  /* мобильный заголовок и описания чуть крупнее */
  #about h2 { font-size: 27px; line-height: 1.22; }
  #about p { font-size: 16px; line-height: 1.75; }
  #works article h3 { font-size: 27px; }
  #works article p { font-size: 15px; line-height: 1.7; }
}

/* набор текста «О студии» по символам */
.typing-caret {
  position: relative;
  display: inline-block;
  width: 0;
  height: 1em;
  vertical-align: -.1em;
}
.typing-caret::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 0;
  width: 2px;
  height: 1em;
  background: var(--r1-olive);
  animation: r1-blink 1s steps(1) infinite;
}

/* --------------------- уменьшение движения --------------------- */
@media (prefers-reduced-motion: reduce) {
  .typing-caret { display: none !important; }
  .js [data-typewriter] [data-type-text] { min-height: 0 !important; }
  .js [data-reveal],
  .js [data-split] .ch { opacity: 1 !important; transform: none !important; }
  .js #works article > a:first-child { transform: none !important; }
  .buy-pill::before { animation: none; opacity: 0; }
  .buy-type__caret { animation: none; opacity: .4; }
  .js aside > a, .js aside > p, .js aside > nav, .js aside > div { animation: none; }
  html { scroll-behavior: auto; }
}