/* ═══════════════════════════════════════════════════════════════════════
   VividHome — Hero: Gallery Wall
   Текстова колона + три безкрайни продуктови колони върху дишащо aurora поле.
   Заменя каруселния hero (.vh-hero). Prefix: .vhw-*
   Цялата анимация е transform/opacity → композитира се на GPU.
   ═══════════════════════════════════════════════════════════════════════ */

.vhw {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--vivid-ink);
}


/* ─────────────────────────────────────────────────────────────────────
   Фон: aurora петна + светлинна вълна + зърнистост
   ───────────────────────────────────────────────────────────────────── */

.vhw__aura {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.vhw__aura i {
  position: absolute;
  display: block;
  border-radius: 50%;
  aspect-ratio: 1;
  will-change: transform;
}

.vhw__aura i:nth-of-type(1) {
  width: min(78vw, 980px); right: -16%; top: -34%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.58), rgba(124, 58, 237, 0) 66%);
}
.vhw__aura i:nth-of-type(2) {
  width: min(64vw, 820px); right: -10%; bottom: -38%;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.54), rgba(37, 99, 235, 0) 68%);
}
.vhw__aura i:nth-of-type(3) {
  width: min(52vw, 640px); left: -20%; top: 8%;
  background: radial-gradient(circle, rgba(244, 63, 94, 0.30), rgba(244, 63, 94, 0) 68%);
}
.vhw__aura i:nth-of-type(4) {
  width: min(46vw, 560px); left: 24%; bottom: -34%;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.28), rgba(6, 182, 212, 0) 70%);
}

/* светлинна вълна, минаваща зад продуктовата стена */
.vhw__sweep {
  position: absolute;
  top: -40%; bottom: -40%; left: -46%;
  width: 36%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.10) 48%,
    rgba(255, 255, 255, 0));
}

/* фина зърнистост — сваля „дигиталния" вид на градиентите */
.vhw__grain {
  position: absolute;
  inset: -6%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.055;
  background-size: 180px 180px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: no-preference) {
  .vhw__aura i:nth-of-type(1) { animation: vhw-aura-1 16s var(--vh-ease-in-out, ease-in-out) infinite alternate; }
  .vhw__aura i:nth-of-type(2) { animation: vhw-aura-2 21s var(--vh-ease-in-out, ease-in-out) infinite alternate; }
  .vhw__aura i:nth-of-type(3) { animation: vhw-aura-3 26s var(--vh-ease-in-out, ease-in-out) infinite alternate; }
  .vhw__aura i:nth-of-type(4) { animation: vhw-aura-4 19s var(--vh-ease-in-out, ease-in-out) infinite alternate; }
  .vhw__sweep { animation: vhw-sweep 12s var(--vh-ease-in-out, ease-in-out) infinite; }
  .vhw__grain { animation: vhw-grain 0.8s steps(1) infinite; }
}

@keyframes vhw-aura-1 { from { transform: translate3d(0,0,0) scale(1);    } to { transform: translate3d(-24%, 18%, 0) scale(1.32); } }
@keyframes vhw-aura-2 { from { transform: translate3d(0,0,0) scale(1.16); } to { transform: translate3d(-26%, -22%, 0) scale(0.88); } }
@keyframes vhw-aura-3 { from { transform: translate3d(0,0,0) scale(1);    } to { transform: translate3d(34%, -20%, 0) scale(1.38); } }
@keyframes vhw-aura-4 { from { transform: translate3d(0,0,0) scale(0.92); } to { transform: translate3d(28%, -24%, 0) scale(1.24); } }

/* дълга пауза между преминаванията — движението да се усеща, не да дразни */
@keyframes vhw-sweep {
  0%        { transform: translateX(0)    skewX(-14deg); }
  60%, 100% { transform: translateX(440%) skewX(-14deg); }
}

@keyframes vhw-grain {
  0%   { transform: translate3d(0, 0, 0); }
  20%  { transform: translate3d(-2.5%, 1.6%, 0); }
  40%  { transform: translate3d(1.8%, -2.4%, 0); }
  60%  { transform: translate3d(-1.6%, -1.8%, 0); }
  80%  { transform: translate3d(2.4%, 1.2%, 0); }
}


/* ─────────────────────────────────────────────────────────────────────
   Layout
   ───────────────────────────────────────────────────────────────────── */

.vhw__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
  /* долният padding пази съдържанието от абсолютно позиционирания trust бар */
  padding-top: calc(var(--vh-header-height) + clamp(40px, 5vw, 72px));
  padding-bottom: clamp(96px, 9vw, 140px);
}

/* без продукти за стената — текстът минава на цяла ширина */
.vhw__grid--solo { grid-template-columns: minmax(0, 1fr); }

.vhw__txt { max-width: 620px; }


/* ── Текст ── */

.vhw__eyebrow {
  display: inline-block;
  font-family: var(--vh-font-body);
  font-size: var(--vh-text-xs);
  font-weight: var(--vh-weight-semibold);
  letter-spacing: var(--vh-tracking-widest);
  text-transform: uppercase;
  color: var(--vh-amber);
  margin-bottom: var(--vh-space-5);
}

.vhw__heading {
  font-family: var(--vh-font-heading);
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  font-weight: var(--vh-weight-extrabold);
  line-height: var(--vh-leading-tight);
  letter-spacing: var(--vh-tracking-tighter);
  color: var(--vh-white);
  margin: 0 0 var(--vh-space-6);
}

.vhw__heading em {
  font-style: normal;
  background: var(--vh-gradient-h);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.vhw__text {
  font-family: var(--vh-font-body);
  font-size: var(--vh-text-md);
  line-height: var(--vh-leading-relaxed);
  color: rgba(255, 255, 255, 0.72);
  max-width: 520px;
  margin: 0 0 var(--vh-space-8);
}

.vhw__ctas { display: flex; gap: var(--vh-space-4); flex-wrap: wrap; }

/* появяване при зареждане — на статичен hero няма .is-active слайд, който да го задвижи.
   САМО transform, БЕЗ opacity: H1-ът е LCP елементът на началната и
   opacity:0 + delay буташе LCP до ~5.5s на бавни устройства (замерено 27.07).
   Плъзгането пази усещането за entrance, а текстът се брои боядисан веднага. */
@media (prefers-reduced-motion: no-preference) {
  .vhw__eyebrow, .vhw__heading, .vhw__text, .vhw__ctas {
    transform: translateY(16px);
    animation: vhw-slide-up 0.7s var(--vh-ease-out, ease-out) forwards;
  }
  .vhw__eyebrow { animation-delay: 0.15s; }
  .vhw__heading { animation-delay: 0.28s; }
  .vhw__text    { animation-delay: 0.41s; }
  .vhw__ctas    { animation-delay: 0.54s; }
}

@keyframes vhw-slide-up { to { transform: none; } }


/* ─────────────────────────────────────────────────────────────────────
   Продуктовата стена — три колони в противоположни посоки
   ───────────────────────────────────────────────────────────────────── */

.vhw__wall {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  height: clamp(380px, 44vw, 560px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 11%, #000 86%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 11%, #000 86%, transparent 100%);
}

.vhw__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  will-change: transform;
}

.vhw__tile {
  position: relative;
  flex: none;
  border-radius: var(--vh-radius-md);
  overflow: hidden;
  background: var(--vivid-ink);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34);
  transition: transform var(--vh-duration-base) var(--vh-ease-out, ease-out);
}

.vhw__tile img {
  display: block;
  width: 100%;
  /* ЗАДЪЛЖИТЕЛНО: WP извежда <img width="600" height="600">, а презентационните
     атрибути важат като height декларация. Докато height не е auto,
     aspect-ratio не оразмерява елемента и плочките излизаха 188×600 вместо
     квадратни. Всяко авторско правило бие атрибута — стига да съществува. */
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 700ms var(--vh-ease-out, ease-out);
}

.vhw__tile:hover { transform: translateY(-4px); }
.vhw__tile:hover img { transform: scale(1.06); }

.vhw__price {
  position: absolute;
  left: 9px;
  bottom: 9px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--vivid-ink);
  font-family: var(--vh-font-body);
  font-size: var(--vh-text-sm);
  font-weight: var(--vh-weight-bold);
  line-height: 1.3;
  border-radius: var(--vh-radius-full);
  padding: 4px 10px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--vh-duration-base) var(--vh-ease-out, ease-out),
              transform var(--vh-duration-base) var(--vh-ease-out, ease-out);
}

.vhw__tile:hover .vhw__price { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  /* Темпо на стената.
     Ходът е 50% от височината на колоната = 1216px при 12 квадратни плочки
     на 1440px. Оттам: 30s ≈ 41 px/s нагоре, 36s ≈ 34 px/s надолу — двете
     посоки нарочно с различна скорост, за да не се четат като един блок.

     Числата бяха 44s/52s, но са писани преди плочките да се оправят: докато
     aspect-ratio-то беше счупено (188×600 вместо 188×188), колоната беше 3×
     по-висока и същите секунди даваха 84 px/s. След фикса същите 44s станаха
     27 px/s — пълзене. Ако броят плочки се промени, преизчисли:
     duration = (височина_на_колоната / 2) / желаните_px_за_секунда. */
  .vhw__col[data-dir="up"]   { animation: vhw-up   30s linear infinite; }
  .vhw__col[data-dir="down"] { animation: vhw-down 36s linear infinite; }
  .vhw__wall:hover .vhw__col { animation-play-state: paused; }
}

@keyframes vhw-up   { from { transform: translateY(0);    } to { transform: translateY(-50%); } }
@keyframes vhw-down { from { transform: translateY(-50%); } to { transform: translateY(0);    } }


/* ─────────────────────────────────────────────────────────────────────
   Responsive — три колони се пазят и на телефон
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .vhw__wall { gap: 13px; }
}

@media (max-width: 860px) {
  .vhw__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    padding-bottom: clamp(110px, 16vw, 150px);
  }
  .vhw__txt { max-width: none; }
  .vhw__wall { height: clamp(330px, 78vw, 460px); gap: 9px; }
}