/* ============================================================
   РПИК Дәуір — animations.css
   Глобальная система анимаций для всех страниц
   ============================================================ */

/* ── Сброс для тех, кто предпочитает без движения ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   1. БАЗОВЫЕ KEYFRAMES
   ============================================================ */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(50px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeRight {
  from { opacity: 0; transform: translateX(-50px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes scaleX {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-80px) skewX(-2deg); }
  to   { opacity: 1; transform: translateX(0) skewX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(80px) skewX(2deg); }
  to   { opacity: 1; transform: translateX(0) skewX(0); }
}

@keyframes pulse-brand {
  0%, 100% { box-shadow: 0 0 0 0 oklch(0.685 0.19 45 / 0.4); }
  50%       { box-shadow: 0 0 0 12px oklch(0.685 0.19 45 / 0); }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}

@keyframes stampIn {
  0%   { opacity: 0; transform: rotate(-8deg) scale(1.4); }
  60%  { opacity: 1; transform: rotate(2deg) scale(0.95); }
  100% { opacity: 1; transform: rotate(0deg) scale(1); }
}

@keyframes scanLine {
  0%   { top: -2px; opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

@keyframes progressBar {
  from { width: 0; }
  to   { width: var(--target-width, 100%); }
}

@keyframes barGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ============================================================
   2. SCROLL-REVEAL КЛАССЫ
   ============================================================ */

[data-animate] {
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-animate="fade-up"]    { transform: translateY(50px); }
[data-animate="fade-down"]  { transform: translateY(-30px); }
[data-animate="fade-left"]  { transform: translateX(60px); }
[data-animate="fade-right"] { transform: translateX(-60px); }
[data-animate="scale-in"]   { transform: scale(0.85); }
[data-animate="zoom-in"]    { transform: scale(0.7); filter: blur(8px); }
[data-animate="stamp"]      { transform: rotate(-8deg) scale(1.4); }

[data-animate].is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Стаггер-задержки */
[data-delay="100"] { transition-delay: 0.1s; }
[data-delay="150"] { transition-delay: 0.15s; }
[data-delay="200"] { transition-delay: 0.2s; }
[data-delay="250"] { transition-delay: 0.25s; }
[data-delay="300"] { transition-delay: 0.3s; }
[data-delay="350"] { transition-delay: 0.35s; }
[data-delay="400"] { transition-delay: 0.4s; }
[data-delay="500"] { transition-delay: 0.5s; }
[data-delay="600"] { transition-delay: 0.6s; }
[data-delay="700"] { transition-delay: 0.7s; }
[data-delay="800"] { transition-delay: 0.8s; }

/* ============================================================
   3. HERO PAGE ENTRANCE
   ============================================================ */

.hero__eyebrow {
  animation: fadeDown 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

.hero h1 .accent {
  animation: slideInLeft 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

.hero h1 .h1__sub {
  animation: slideInLeft 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
}

.hero .hero__sub {
  animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}

.hero .hero__actions {
  animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.65s both;
}

.hero__visual img {
  animation: slideInRight 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both,
             float 6s ease-in-out 1.3s infinite;
}

.reg-mark { animation: fadeIn 0.5s ease both; }
.reg-mark.tl { animation-delay: 0.8s; }
.reg-mark.tr { animation-delay: 0.9s; }
.reg-mark.bl { animation-delay: 1.0s; }
.reg-mark.br { animation-delay: 1.1s; }

/* Сканирующая линия в hero */
.hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    oklch(0.685 0.19 45 / 0.4) 40%,
    oklch(0.685 0.19 45 / 0.8) 50%,
    oklch(0.685 0.19 45 / 0.4) 60%,
    transparent 100%
  );
  animation: scanLine 3s linear 1.5s 1 forwards;
  pointer-events: none;
  z-index: 10;
}

/* ============================================================
   4. CMYK STRIP
   ============================================================ */

.cmyk-strip span {
  transform-origin: left center;
  animation: scaleX 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.cmyk-strip .cmyk-c { animation-delay: 0.05s; }
.cmyk-strip .cmyk-m { animation-delay: 0.12s; }
.cmyk-strip .cmyk-y { animation-delay: 0.19s; }
.cmyk-strip .cmyk-k { animation-delay: 0.26s; }

/* ============================================================
   5. STATS SECTION
   ============================================================ */

.stats__cell {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}
.stats__cell.is-visible  { opacity: 1; transform: translateY(0); }
.stats__cell:nth-child(1) { transition-delay: 0s; }
.stats__cell:nth-child(2) { transition-delay: 0.15s; }
.stats__cell:nth-child(3) { transition-delay: 0.3s; }

/* Прогресс-линия снизу каждой ячейки */
.stats__cell::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--brand);
  transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.5s;
}
.stats__cell.is-visible::after { width: 100%; }

/* ============================================================
   6. SECTION HEAD
   ============================================================ */

.section__label {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.section__label.is-visible { opacity: 1; transform: translateX(0); }

.section__title {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s,
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}
.section__title.is-visible { opacity: 1; transform: translateY(0); }

.section__meta {
  opacity: 0;
  transition: opacity 0.6s ease 0.25s;
}
.section__meta.is-visible { opacity: 0.5; }

/* Линия под section__head */
.section__head {
  position: relative;
}
.section__head::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--brand), transparent);
  transition: width 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}
.section__head.is-visible::after { width: 40%; }

/* ============================================================
   7. SERVICES GRID
   ============================================================ */

.services-grid .service {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.2s ease, color 0.2s ease,
              box-shadow 0.3s ease;
}
.services-grid .service.is-visible   { opacity: 1; transform: translateY(0); }
.services-grid .service:nth-child(1) { transition-delay: 0s; }
.services-grid .service:nth-child(2) { transition-delay: 0.08s; }
.services-grid .service:nth-child(3) { transition-delay: 0.16s; }
.services-grid .service:nth-child(4) { transition-delay: 0.24s; }
.services-grid .service:nth-child(5) { transition-delay: 0.32s; }
.services-grid .service:nth-child(6) { transition-delay: 0.40s; }

.service:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 20px 40px oklch(0.685 0.19 45 / 0.2);
}

/* ============================================================
   8. WHY GRID
   ============================================================ */

.why__copy {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.why__copy.is-visible { opacity: 1; transform: translateX(0); }

.why__image { overflow: hidden; }
.why__image img {
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s ease;
}
.why__image:hover img {
  transform: scale(1.06);
  filter: saturate(1) contrast(1.05);
}

.why__item {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.why__item.is-visible  { opacity: 1; transform: translateX(0); }
.why__item:nth-child(1) { transition-delay: 0s; }
.why__item:nth-child(2) { transition-delay: 0.12s; }
.why__item:nth-child(3) { transition-delay: 0.24s; }

.why__item:hover .why__idx { transform: scale(1.15); transition: transform 0.2s ease; }
.why__item:hover h3         { color: var(--brand); transition: color 0.2s ease; }

/* ============================================================
   9. CTA BANNER
   ============================================================ */

.cta-banner h2 {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.cta-banner h2.is-visible { opacity: 1; transform: translateY(0); }

.cta-banner p {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease 0.2s, transform 0.7s ease 0.2s;
}
.cta-banner p.is-visible { opacity: 0.92; transform: translateY(0); }

.cta-banner .btn {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.6s ease 0.4s, transform 0.6s ease 0.4s,
              background 0.15s ease, color 0.15s ease, transform 0.2s ease;
}
.cta-banner .btn.is-visible { opacity: 1; transform: translateY(0); }

.cta-banner {
  background-attachment: fixed;
}

/* ============================================================
   10. CLIENTS WALL
   ============================================================ */

.clients-wall .client {
  opacity: 0;
  transform: scale(0.85) translateY(20px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.15s ease;
}
.clients-wall .client.is-visible  { opacity: 1; transform: scale(1) translateY(0); }
.clients-wall .client:nth-child(1) { transition-delay: 0s; }
.clients-wall .client:nth-child(2) { transition-delay: 0.06s; }
.clients-wall .client:nth-child(3) { transition-delay: 0.12s; }
.clients-wall .client:nth-child(4) { transition-delay: 0.18s; }
.clients-wall .client:nth-child(5) { transition-delay: 0.24s; }
.clients-wall .client:nth-child(6) { transition-delay: 0.30s; }
.clients-wall .client:nth-child(7) { transition-delay: 0.36s; }
.clients-wall .client:nth-child(8) { transition-delay: 0.42s; }

.client__logo { transition: transform 0.3s ease; }
.clients-wall .client:hover .client__logo { transform: scale(1.08); }

/* ============================================================
   11. MATERIALS SECTION
   ============================================================ */

.materials__copy {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.materials__copy.is-visible { opacity: 1; transform: translateX(0); }

.materials__side {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s,
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}
.materials__side.is-visible { opacity: 1; transform: translateX(0); }

.mat-list__item {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.2s ease, padding-left 0.2s ease;
}
.mat-list__item.is-visible    { opacity: 1; transform: translateX(0); }
.mat-list__item:nth-child(1) { transition-delay: 0.05s; }
.mat-list__item:nth-child(2) { transition-delay: 0.10s; }
.mat-list__item:nth-child(3) { transition-delay: 0.15s; }
.mat-list__item:nth-child(4) { transition-delay: 0.20s; }
.mat-list__item:nth-child(5) { transition-delay: 0.25s; }
.mat-list__item:nth-child(6) { transition-delay: 0.30s; }
.mat-list__item:nth-child(7) { transition-delay: 0.35s; }
.mat-list__item:hover { background: var(--paper-2); padding-left: 8px; }

.materials__tag {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.materials__side.is-visible .materials__tag:nth-child(1) { opacity: 1; transform: translateX(0); transition-delay: 0.3s; }
.materials__side.is-visible .materials__tag:nth-child(2) { opacity: 1; transform: translateX(0); transition-delay: 0.4s; }
.materials__side.is-visible .materials__tag:nth-child(3) { opacity: 1; transform: translateX(0); transition-delay: 0.5s; }

/* ============================================================
   12. FEATURE GRID (страницы услуг)
   ============================================================ */

.feature-grid .feature {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.3s ease;
}
.feature-grid .feature.is-visible  { opacity: 1; transform: translateY(0); }
.feature-grid .feature:nth-child(1) { transition-delay: 0s; }
.feature-grid .feature:nth-child(2) { transition-delay: 0.07s; }
.feature-grid .feature:nth-child(3) { transition-delay: 0.14s; }
.feature-grid .feature:nth-child(4) { transition-delay: 0.21s; }
.feature-grid .feature:nth-child(5) { transition-delay: 0.28s; }
.feature-grid .feature:nth-child(6) { transition-delay: 0.35s; }

/* ============================================================
   13. STEPS (история, процессы)
   ============================================================ */

.steps .step {
  opacity: 0;
  transform: translateY(40px) scale(0.97);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.2s ease;
}
.steps .step.is-visible  { opacity: 1; transform: translateY(0) scale(1); }
.steps .step:nth-child(1) { transition-delay: 0s; }
.steps .step:nth-child(2) { transition-delay: 0.12s; }
.steps .step:nth-child(3) { transition-delay: 0.24s; }
.steps .step:nth-child(4) { transition-delay: 0.36s; }

.step__num { display: inline-block; }
.steps .step.is-visible .step__num { animation: stampIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
.steps .step:nth-child(1).is-visible .step__num { animation-delay: 0.05s; }
.steps .step:nth-child(2).is-visible .step__num { animation-delay: 0.17s; }
.steps .step:nth-child(3).is-visible .step__num { animation-delay: 0.29s; }

/* ============================================================
   14. TEAM CARDS
   ============================================================ */

.team-card {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.team-card.is-visible  { opacity: 1; transform: translateY(0); }
.team-card:nth-child(1) { transition-delay: 0s; }
.team-card:nth-child(2) { transition-delay: 0.15s; }

.team-card__image { overflow: hidden; }
.team-card__image img {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
}
.team-card:hover .team-card__image img {
  transform: scale(1.06);
  filter: saturate(0.85) contrast(1.05);
}

/* ============================================================
   15. SVC CARDS
   ============================================================ */

.svc-cards .svc-card {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.2s ease;
}
.svc-cards .svc-card.is-visible  { opacity: 1; transform: translateY(0); }
.svc-cards .svc-card:nth-child(1) { transition-delay: 0s; }
.svc-cards .svc-card:nth-child(2) { transition-delay: 0.1s; }
.svc-cards .svc-card:nth-child(3) { transition-delay: 0.2s; }
.svc-cards .svc-card:nth-child(4) { transition-delay: 0.3s; }

/* ============================================================
   16. PERSONA
   ============================================================ */

.persona {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.persona.is-visible { opacity: 1; transform: translateY(0); }

/* Reveal sweep для фото персоны */
.persona__photo { overflow: hidden; position: relative; }
.persona__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--brand);
  transform-origin: right center;
  transform: scaleX(1);
  transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
  z-index: 1;
}
.persona.is-visible .persona__photo::after { transform: scaleX(0); }

/* ============================================================
   17. CALLOUT & MANAGER
   ============================================================ */

.callout {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.callout.is-visible { opacity: 1; transform: translateY(0); }

.manager {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.manager.is-visible { opacity: 1; transform: translateY(0); }

.manager__photo { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.manager:hover .manager__photo { transform: scale(1.06); }

/* ============================================================
   18. FEEDBACK STRIP
   ============================================================ */

.feedback-strip__copy {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.feedback-strip__copy.is-visible { opacity: 1; transform: translateX(0); }

.feedback-strip .btn {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s,
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s,
              background 0.15s ease, color 0.15s ease;
}
.feedback-strip .btn.is-visible { opacity: 1; transform: translateX(0); }

/* ============================================================
   19. FOOTER
   ============================================================ */

.site-footer .footer__grid {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-footer .footer__grid.is-visible { opacity: 1; transform: translateY(0); }

.footer__nav a {
  transition: color 0.2s ease, padding-left 0.2s ease, opacity 0.2s ease;
}
.footer__nav a:hover { padding-left: 6px; }

/* ============================================================
   20. КНОПКИ — RIPPLE И HOVER
   ============================================================ */

.btn {
  position: relative;
  overflow: hidden;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: oklch(1 0 0 / 0.15);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
  z-index: 0;
}
.btn > * { position: relative; z-index: 1; }
.btn:hover::before { transform: scaleX(1); }

.btn-brand:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px oklch(0.685 0.19 45 / 0.35);
  background: oklch(0.62 0.19 45);
}
.btn-ghost:hover  { transform: translateY(-2px); }
.btn-dark:hover   { transform: translateY(-2px); box-shadow: 0 8px 24px oklch(0.685 0.19 45 / 0.25); }

/* ============================================================
   21. SCROLL PROGRESS BAR + HEADER SCROLLED
   ============================================================ */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--brand), oklch(0.62 0.19 45));
  z-index: 200;
  transition: width 0.1s linear;
  pointer-events: none;
}

.site-header {
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
.site-header.is-scrolled {
  box-shadow: 0 4px 24px oklch(0.16 0.01 270 / 0.09);
  background: oklch(0.985 0.005 80 / 0.95);
  /* blur on ::before — backdrop-filter on header itself creates a
     containing block and collapses the fixed mobile sidebar */
}
.site-header.is-scrolled::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  pointer-events: none;
}

/* ============================================================
   22. PORTFOLIO GRID
   ============================================================ */

.portfolio-grid .port-item {
  opacity: 0;
  transform: scale(0.92) translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.portfolio-grid .port-item.is-visible { opacity: 1; transform: scale(1) translateY(0); }
.portfolio-grid .port-item:nth-child(1) { transition-delay: 0s; }
.portfolio-grid .port-item:nth-child(2) { transition-delay: 0.07s; }
.portfolio-grid .port-item:nth-child(3) { transition-delay: 0.14s; }
.portfolio-grid .port-item:nth-child(4) { transition-delay: 0.21s; }
.portfolio-grid .port-item:nth-child(5) { transition-delay: 0.28s; }
.portfolio-grid .port-item:nth-child(6) { transition-delay: 0.35s; }
.portfolio-grid .port-item:nth-child(7) { transition-delay: 0.42s; }
.portfolio-grid .port-item:nth-child(8) { transition-delay: 0.49s; }

/* ============================================================
   23. FORM FIELDS
   ============================================================ */

.form-field {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.form-field.is-visible { opacity: 1; transform: translateY(0); }

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px oklch(0.685 0.19 45 / 0.15);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* ============================================================
   24. NAV UNDERLINE
   ============================================================ */

.nav a:not(.btn) {
  position: relative;
}
.nav a:not(.btn)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--brand);
  transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav a:not(.btn):hover::after { width: 100%; }

/* ============================================================
   25. IMAGE REVEAL HELPER
   ============================================================ */

.image-reveal { position: relative; overflow: hidden; }
.image-reveal::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--brand);
  transform-origin: right center;
  transform: scaleX(1);
  z-index: 1;
  transition: transform 0.9s cubic-bezier(0.77, 0, 0.175, 1);
}
.image-reveal.is-visible::before { transform: scaleX(0); }
.image-reveal img {
  transform: scale(1.1);
  transition: transform 0.9s cubic-bezier(0.77, 0, 0.175, 1);
}
.image-reveal.is-visible img { transform: scale(1); }

/* ============================================================
   26. TABLE ROW HOVER
   ============================================================ */

.svc-specs tr { transition: background 0.15s ease; }
.svc-specs tr:hover { background: var(--paper-2); }

/* ============================================================
   27. ОБЩИЙ FADE-IN ПРИ ЗАГРУЗКЕ СТРАНИЦЫ
   ============================================================ */

.dauir { animation: fadeIn 0.4s ease both; }