/* ════════════════════════════════════════════════════════════
   ENHANCE — дизайн-слой (топ-3 улучшения)
   1. Номера-индексы вместо эмодзи (editorial, Cormorant)
   2. Атмосфера на тёмных секциях: зерно + шафрановое свечение
   3. Каскадное появление hero при загрузке
   Подключается последним — переопределяет базовые стили.
════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────
   1. ИКОНКИ-ЭМОДЗИ → НОМЕРА (Cormorant)
─────────────────────────────────────────── */
.audience-card__icon,
.value-card__icon,
.spirit-card__icon,
.benefit-item__icon,
.logistics-card__icon {
  font-family: var(--f-heading) !important;
  font-weight: 600;
  font-style: italic;
  color: var(--c-saffron);
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  font-size: 2.6rem !important;
  line-height: 0.9;
  letter-spacing: 0.02em;
  display: inline-block;
  position: relative;
  padding-bottom: 0.6rem;
  margin-bottom: 1rem;
}

/* короткая шафрановая линия под номером */
.audience-card__icon::after,
.value-card__icon::after,
.spirit-card__icon::after,
.benefit-item__icon::after,
.logistics-card__icon::after {
  content: '';
  position: absolute;
  left: 0.1rem;
  bottom: 0;
  width: 1.7rem;
  height: 2px;
  background: linear-gradient(90deg, var(--c-saffron), transparent);
}

/* в тёмной секции (логистика) номер золотой для контраста */
.section--dark .logistics-card__icon {
  color: var(--c-gold);
}

/* benefit-item: номер в строке с текстом — выровнять по верху */
.benefit-item__icon {
  align-self: flex-start;
  margin-top: -0.2rem;
}

/* ───────────────────────────────────────────
   2. АТМОСФЕРА: зерно + свечение на тёмном
─────────────────────────────────────────── */
.section--dark,
.quote-block {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* шафрановое свечение сверху */
.section--dark::before,
.quote-block::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 65% 75% at 50% -5%,
              rgba(232, 150, 12, 0.16), transparent 68%);
}

/* плёнка зерна (SVG fractalNoise) */
.section--dark::after,
.quote-block::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ───────────────────────────────────────────
   3. КАСКАДНОЕ ПОЯВЛЕНИЕ HERO
─────────────────────────────────────────── */
@keyframes heroReveal {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero__content > * {
  opacity: 0;
  animation: heroReveal 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.hero__content > *:nth-child(1) { animation-delay: 0.15s; }
.hero__content > *:nth-child(2) { animation-delay: 0.32s; }
.hero__content > *:nth-child(3) { animation-delay: 0.49s; }
.hero__content > *:nth-child(4) { animation-delay: 0.66s; }
.hero__content > *:nth-child(5) { animation-delay: 0.83s; }

/* уважение к настройкам доступности */
@media (prefers-reduced-motion: reduce) {
  .hero__content > * {
    opacity: 1;
    animation: none;
  }
}