/* practice_cards_micro.css
   Цель: «нетипично красиво», но по‑деловому.

   В этом варианте возвращаем анимацию, но без цирка:
   - скан‑полосы идут строго сверху вниз
   - появляются не постоянно, а «в разное время» (разные циклы/задержки)
   - работает для:
       1) двух карточек на /pages/interior.html
       2) ведущей кнопки на /pages/about.html (Дизайн/строительство)
       3) (моб.) у двух крупных кнопок оставляем спокойный glow + редкий скан
*/

/* 1) Моб. кнопки: не «плаваем», но даём редкий скан сверху вниз */
.pp-landing .btn.glow{ animation: none !important; position: relative; overflow: hidden; }

.pp-landing .btn.glow::before,
.pp-landing .btn.glow::after{
  content:"";
  position:absolute;
  left:-20%;
  right:-20%;
  height:56px;
  top:0;
  transform: translateY(-160%);
  opacity:0;
  pointer-events:none;
  mix-blend-mode: screen;
  z-index: 0;
}

.pp-landing .btn.glow::before{
  background:
    linear-gradient(to bottom,
      rgba(255,255,255,0) 0%,
      rgba(255,122,0,.10) 25%,
      rgba(255,255,255,.12) 50%,
      rgba(255,122,0,.12) 75%,
      rgba(255,255,255,0) 100%);
  animation: ppScanA 12.7s linear infinite;
  animation-delay: -3.1s;
}

.pp-landing .btn.glow::after{
  background:
    linear-gradient(to bottom,
      rgba(255,255,255,0) 0%,
      rgba(120,190,255,.07) 25%,
      rgba(255,255,255,.10) 50%,
      rgba(120,190,255,.08) 75%,
      rgba(255,255,255,0) 100%);
  animation: ppScanB 18.9s linear infinite;
  animation-delay: -9.7s;
}

/* 2) Две карточки на desktop: добавляем "чертёжную" сетку + угловые скобы */
.pp-linkcard{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.pp-linkcard > *{ position: relative; z-index: 2; }

/* 2.1) Скан‑полосы (внутренние span), строго сверху вниз, «хаотично» по времени */
.pp-linkcard .pp-scan{
  position:absolute;
  left:-18%;
  right:-18%;
  height:62px;
  top:0;
  transform: translateY(-170%);
  opacity:0;
  pointer-events:none;
  mix-blend-mode: screen;
  z-index: 1;
}

.pp-linkcard .pp-scan.pp-scan-a{
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,122,0,.00) 0px,
      rgba(255,122,0,.00) 8px,
      rgba(255,122,0,.10) 10px,
      rgba(255,255,255,.10) 12px,
      rgba(255,122,0,.10) 14px,
      rgba(255,122,0,.00) 18px
    );
  filter: blur(.2px);
  animation: ppScanA var(--ppScanADur, 11.4s) linear infinite;
  animation-delay: var(--ppScanADelay, -2.2s);
}

.pp-linkcard .pp-scan.pp-scan-b{
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(120,190,255,.00) 0px,
      rgba(120,190,255,.00) 9px,
      rgba(120,190,255,.08) 11px,
      rgba(255,255,255,.10) 13px,
      rgba(120,190,255,.08) 15px,
      rgba(120,190,255,.00) 19px
    );
  filter: blur(.25px);
  animation: ppScanB var(--ppScanBDur, 17.2s) linear infinite;
  animation-delay: var(--ppScanBDelay, -7.4s);
}

/* Разные циклы/задержки для каждой карточки — имитация хаоса */
.pp-layout-desktop .grid > .pp-linkcard:nth-of-type(1){
  --ppScanADur: 10.7s;
  --ppScanADelay: -1.8s;
  --ppScanBDur: 19.3s;
  --ppScanBDelay: -11.2s;
}
.pp-layout-desktop .grid > .pp-linkcard:nth-of-type(2){
  --ppScanADur: 13.6s;
  --ppScanADelay: -8.6s;
  --ppScanBDur: 16.1s;
  --ppScanBDelay: -4.9s;
}

/* статичная сетка, очень мягкая */
.pp-linkcard::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .14;
  z-index: 0;
  pointer-events:none;
}

/* угловые скобы (как рамки на чертеже) */
.pp-linkcard::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to right, rgba(255,255,255,.22) 0 24px, transparent 24px) top left/100% 2px no-repeat,
    linear-gradient(to bottom, rgba(255,255,255,.18) 0 18px, transparent 18px) top left/2px 100% no-repeat,

    linear-gradient(to left, rgba(255,255,255,.22) 0 24px, transparent 24px) top right/100% 2px no-repeat,
    linear-gradient(to bottom, rgba(255,255,255,.18) 0 18px, transparent 18px) top right/2px 100% no-repeat,

    linear-gradient(to right, rgba(255,255,255,.18) 0 24px, transparent 24px) bottom left/100% 2px no-repeat,
    linear-gradient(to top, rgba(255,255,255,.14) 0 18px, transparent 18px) bottom left/2px 100% no-repeat,

    linear-gradient(to left, rgba(255,255,255,.18) 0 24px, transparent 24px) bottom right/100% 2px no-repeat,
    linear-gradient(to top, rgba(255,255,255,.14) 0 18px, transparent 18px) bottom right/2px 100% no-repeat;
  opacity: .12;
  z-index: 1;
  pointer-events:none;
}

/* hover: сетка чуть проявляется, карточка чуть "приподнимается" (но без шоу) */
.pp-linkcard:hover::before{ opacity: .22; }
.pp-linkcard:hover::after{ opacity: .20; }

/* 3) Убираем слово "Открыть" — оставляем небольшой знак ↗ и делаем его аккуратным */
.pp-link-cta{
  margin-top: 12px;
  font-weight: 900;
  opacity: .75;
  display:inline-flex;
  align-items:center;
  gap: 8px;
}

/* маленький "маячок"-индикатор, что карточка кликабельна */
.pp-link-cta::before{
  content:"";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,122,0,.55);
  box-shadow: 0 0 10px rgba(255,122,0,.35);
}

/* На hover индикатор чуть ярче */
.pp-linkcard:hover .pp-link-cta{ opacity: .92; }
.pp-linkcard:hover .pp-link-cta::before{
  background: rgba(255,122,0,.75);
  box-shadow: 0 0 14px rgba(255,122,0,.45);
}

/* Доступность: focus для клавиатуры */
.pp-linkcard:focus-visible{ outline: 2px solid rgba(255,122,0,.55); outline-offset: 2px; }

/* 4) Ведущая кнопка на about.html (иконка‑кнопка «Дизайн/строительство») */
.practice-soc{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.practice-soc .pp-scan{ z-index: 0; }
.practice-soc .practice-soc-text{ position: relative; z-index: 2; }

.practice-soc .pp-scan{ 
  position:absolute;
  left:-18%;
  right:-18%;
  height:56px;
  top:0;
  transform: translateY(-170%);
  opacity:0;
  pointer-events:none;
  mix-blend-mode: screen;
}

.practice-soc .pp-scan.pp-scan-a{ animation: ppScanA 11.9s linear infinite; animation-delay: -5.1s; }
.practice-soc .pp-scan.pp-scan-b{ animation: ppScanB 18.2s linear infinite; animation-delay: -13.4s; }

.practice-soc .pp-scan.pp-scan-a{
  background: linear-gradient(to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,122,0,.12) 32%,
    rgba(255,255,255,.14) 50%,
    rgba(255,122,0,.14) 68%,
    rgba(255,255,255,0) 100%);
}
.practice-soc .pp-scan.pp-scan-b{
  background: linear-gradient(to bottom,
    rgba(255,255,255,0) 0%,
    rgba(120,190,255,.08) 30%,
    rgba(255,255,255,.10) 50%,
    rgba(120,190,255,.08) 70%,
    rgba(255,255,255,0) 100%);
}

/* Ключевая идея: движение только сверху вниз. Длинные «паузы» → не бесит. */
@keyframes ppScanA{
  0%, 72%{ opacity:0; transform: translateY(-170%); }
  74%{ opacity:.55; }
  86%{ opacity:.75; transform: translateY(20%); }
  100%{ opacity:0; transform: translateY(170%); }
}

@keyframes ppScanB{
  0%, 78%{ opacity:0; transform: translateY(-170%); }
  80%{ opacity:.45; }
  90%{ opacity:.65; transform: translateY(40%); }
  100%{ opacity:0; transform: translateY(170%); }
}

/* Уважение к reduced motion */
@media (prefers-reduced-motion: reduce){
  .pp-linkcard{ transition: none !important; }
  .pp-scan, .pp-landing .btn.glow::before, .pp-landing .btn.glow::after{ animation: none !important; }
}