/*
 * Стратегия 360 — слой визуальных эффектов поверх текущей продакшен-статики.
 * Не меняет контент и структуру: только глубина, появление секций, линии и hover.
 */

@media (prefers-reduced-motion: reduce) {
  .s360-effects-ready *,
  .s360-effects-ready *::before,
  .s360-effects-ready *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  :root {
    --s360-depth-shadow: 0 22px 54px rgba(14, 30, 58, 0.13);
    --s360-soft-shadow: 0 12px 32px rgba(14, 30, 58, 0.10);
  }

  .s360-effects-ready body {
    perspective: 1400px;
  }

  .s360-section {
    position: relative;
    isolation: isolate;
  }

  .s360-section > .container-page,
  .s360-section > .container-narrow {
    position: relative;
    z-index: 2;
  }

  .s360-section::after {
    content: "";
    position: absolute;
    left: max(2rem, calc((100vw - 76rem) / 2 + 2rem));
    right: max(2rem, calc((100vw - 76rem) / 2 + 2rem));
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(184, 89, 61, 0.72), rgba(107, 127, 79, 0.55), transparent);
    transform: scaleX(0);
    transform-origin: left center;
    opacity: 0;
    transition: transform 1.1s cubic-bezier(.2,.75,.2,1), opacity .6s ease;
    z-index: 3;
    pointer-events: none;
  }

  .s360-section.s360-in::after {
    transform: scaleX(1);
    opacity: 1;
  }

  .s360-section > .container-page,
  .s360-section > .container-narrow,
  .s360-section > article {
    transition: transform 900ms cubic-bezier(.2,.75,.2,1), opacity 720ms ease, filter 900ms ease;
  }

  .s360-effects-ready .s360-section:not(.s360-in) > .container-page,
  .s360-effects-ready .s360-section:not(.s360-in) > .container-narrow {
    opacity: 0;
    transform: translateY(34px) rotateX(4deg);
    filter: blur(5px);
  }

  .s360-copy-reveal {
    transition:
      opacity 720ms ease,
      transform 820ms cubic-bezier(.2,.75,.2,1),
      filter 820ms ease;
    transition-delay: calc(var(--s360-copy-i, 0) * 80ms);
  }

  .s360-effects-ready .s360-section:not(.s360-in) .s360-copy-reveal {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(4px);
  }

  /* Hero: тонкая 3D-плоскость за основателями */
  .s360-hero {
    min-height: 66vh;
  }

  .s360-hero::before {
    content: "";
    position: absolute;
    width: min(52vw, 760px);
    height: min(45vw, 620px);
    right: max(1.5rem, calc((100vw - 76rem) / 2));
    bottom: -6%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.38;
    background:
      linear-gradient(rgba(107,127,79,.20) 1px, transparent 1px),
      linear-gradient(90deg, rgba(107,127,79,.18) 1px, transparent 1px),
      radial-gradient(circle at 80% 20%, rgba(184,89,61,.20), transparent 34%);
    background-size: 44px 44px, 44px 44px, 100% 100%;
    transform: perspective(900px) rotateX(62deg) rotateZ(-8deg) translateY(42px);
    transform-origin: center bottom;
    animation: s360-grid-drift 8s ease-in-out infinite alternate;
    mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 76%, transparent 100%);
  }

  .s360-hero.s360-in::before {
    animation-play-state: running;
  }

  @keyframes s360-grid-drift {
    from { background-position: 0 0, 0 0, 0 0; transform: perspective(900px) rotateX(62deg) rotateZ(-8deg) translateY(42px); }
    to   { background-position: 22px 18px, 18px 22px, 0 0; transform: perspective(900px) rotateX(60deg) rotateZ(-7deg) translateY(30px); }
  }

  /* Второй смысловой блок: спокойная фоновая кинетика */
  .s360-economy::before {
    content: "2026";
    position: absolute;
    right: max(1rem, calc((100vw - 76rem) / 2));
    top: 4%;
    z-index: 0;
    font: 700 clamp(7rem, 18vw, 18rem) var(--font-display, Montserrat, sans-serif);
    color: rgba(14, 30, 58, 0.045);
    line-height: 1;
    pointer-events: none;
    transform: translateY(var(--s360-parallax, 0px));
  }

  .s360-economy::after {
    bottom: auto;
    top: 0;
  }

  .s360-home-page .s360-section-2 {
    padding-top: 3.5rem !important;
  }

  .s360-home-page #kejsy article > div > .font-display,
  .s360-home-page #kejsy article > div > .font-mono {
    color: #B8593D !important;
  }

  .s360-home-page #kejsy article > div > .font-display {
    text-shadow: 0 0 26px rgba(184, 89, 61, 0.28);
  }

  .s360-home-page #kejsy article > div > .font-mono {
    opacity: 0.95;
  }

  /* Меньше пустого отступа между hero и стейтментом на этой странице */
  .s360-kupil-page .s360-hero {
    min-height: auto;
  }

  .s360-kupil-page .s360-economy {
    background: #B8593D !important;
    color: #EFE6D4;
    overflow: hidden;
  }

  .s360-kupil-page .s360-economy::before {
    content: "КОМАНДА";
    right: max(1rem, calc((100vw - 76rem) / 2));
    top: -5%;
    color: rgba(239, 230, 212, 0.10);
    font-size: clamp(5rem, 13vw, 12rem);
  }

  .s360-kupil-page .s360-economy h2,
  .s360-kupil-page .s360-economy p {
    color: #EFE6D4 !important;
  }

  /* Слова цифры/людьми: по умолчанию без заливки (кремовый текст на terracotta),
     при появлении секции (.s360-in) выделяются тёмно-синим ПО ОЧЕРЕДИ. Бегущий блик убран. */
  .s360-kupil-page .s360-economy .s-mark {
    background: transparent;
    color: #EFE6D4;
    border-radius: 3px;
    transition: background-color .55s ease, box-shadow .55s ease;
  }

  .s360-kupil-page .s360-economy.s360-in .s-mark {
    background: #0E1E3A;
    box-shadow: 0 0 24px rgba(14, 30, 58, 0.24);
  }

  .s360-kupil-page .s360-economy.s360-in .s-mark:nth-of-type(2) {
    transition-delay: .5s;
  }

  .s360-kupil-page .kupil-includes {
    background: #0E1E3A !important;
    color: #EFE6D4;
  }

  .s360-kupil-page .kupil-includes h2,
  .s360-kupil-page .kupil-includes p,
  .s360-kupil-page .kupil-includes ul,
  .s360-kupil-page .kupil-includes li,
  .s360-kupil-page .kupil-includes span {
    color: #EFE6D4 !important;
  }

  .s360-kupil-page .kupil-includes li {
    font-size: 1.05rem;
    line-height: 1.55;
  }

  .s360-kupil-page .kupil-includes article {
    background: rgba(239, 230, 212, 0.06) !important;
    border-color: rgba(239, 230, 212, 0.16) !important;
  }

  .s360-kupil-page .kupil-includes .text-terracotta {
    color: #E8C2B0 !important;
  }

  /* Панели сценариев и продуктов */
  .s360-depth-card {
    position: relative;
    transform-style: preserve-3d;
    transition:
      transform 520ms cubic-bezier(.2,.75,.2,1),
      box-shadow 520ms ease,
      border-color 420ms ease,
      background-color 420ms ease;
    will-change: transform;
  }

  .s360-depth-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(120deg, rgba(255,255,255,.22), transparent 34%, rgba(184,89,61,.08) 100%);
    opacity: 0;
    transition: opacity 420ms ease;
    pointer-events: none;
  }

  .s360-depth-card:hover {
    transform: translateY(-8px) rotateX(var(--s360-rx, 0deg)) rotateY(var(--s360-ry, 0deg));
    box-shadow: var(--s360-depth-shadow);
  }

  .s360-depth-card:hover::before {
    opacity: 1;
  }

  .s360-effects-ready .s360-stagger:not(.s360-in) .s360-depth-card {
    opacity: 0;
    transform: translateY(34px) rotateX(7deg);
  }

  .s360-stagger.s360-in .s360-depth-card {
    opacity: 1;
    transition-delay: calc(var(--s360-i, 0) * 95ms);
  }

  #produkty article,
  .s360-who article {
    overflow: hidden;
  }

  #produkty article .btn,
  #zapis .btn {
    box-shadow: 0 12px 26px rgba(184, 89, 61, 0.24);
  }

  /* CoreMessage: живой navy, без тяжёлого pin-scroll */
  .s360-core {
    overflow: hidden;
  }

  .s360-core::before {
    content: "";
    position: absolute;
    inset: -30%;
    z-index: 0;
    background:
      radial-gradient(circle at 18% 30%, rgba(184,89,61,.22), transparent 32%),
      radial-gradient(circle at 78% 70%, rgba(107,127,79,.20), transparent 34%);
    opacity: 0.9;
    filter: blur(24px);
    transform: translate3d(0, 0, 0);
    animation: s360-navy-breath 9s ease-in-out infinite alternate;
    pointer-events: none;
  }

  .s360-core > * {
    position: relative;
    z-index: 2;
  }

  @keyframes s360-navy-breath {
    from { transform: translate3d(-2%, -1%, 0) scale(1); }
    to { transform: translate3d(2%, 1.5%, 0) scale(1.05); }
  }

  /* Founders: более “материальный” split */
  #osnovateli .founders-split {
    box-shadow: var(--s360-soft-shadow);
    transform-style: preserve-3d;
  }

  #osnovateli .founders-split__half:hover {
    filter: saturate(1.05);
  }

  #osnovateli .founders-photo-quote {
    transition: transform 520ms cubic-bezier(.2,.75,.2,1), opacity 420ms ease;
  }

  #osnovateli .founders-split__half:hover .founders-photo-quote {
    transform: translateY(-8px);
  }

  /* Финальный CTA: плашки появляются последовательно и держат фокус */
  #zapis {
    position: relative;
    overflow: hidden;
  }

  #zapis::before {
    content: "";
    position: absolute;
    inset: 3rem max(1.25rem, calc((100vw - 52rem) / 2 + 2rem));
    border: 1px solid rgba(184, 89, 61, 0.22);
    border-radius: 18px;
    opacity: 0;
    transform: scale(.98);
    transition: opacity .8s ease, transform .8s cubic-bezier(.2,.75,.2,1);
    pointer-events: none;
  }

  #zapis.s360-in::before {
    opacity: 1;
    transform: scale(1);
  }

  #zapis .rounded-xl,
  #zapis [class*="rounded-"] {
    transition-delay: calc(var(--s360-i, 0) * 120ms);
  }

  .s360-effects-ready #zapis:not(.s360-in) [class*="rounded-"] {
    opacity: 0;
    transform: translateY(20px);
  }

  #zapis.s360-in [class*="rounded-"] {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .7s ease, transform .7s cubic-bezier(.2,.75,.2,1);
  }
}

@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  .s360-effects-ready .s360-section {
    transition: opacity .55s ease, transform .55s ease;
  }

  .s360-effects-ready .s360-section:not(.s360-in) {
    opacity: 0;
    transform: translateY(18px);
  }
}