/*! GP RealEstate · 08-artwork.css - Генеративна архітектурна графіка.
 *  Стилі до SVG, який будує js/09-artwork.js. */

.artwork{
  width:100%;height:100%;display:block;
  /* Лінії малюються самі, коли картка зʼявляється у вʼюпорті */
}
.artwork.is-flat{background:transparent}

/* ── Малювання ліній: обводка «пишеться» ────────────────────────────────
   ⚠️ ВАЖЛИВО: за замовчуванням графіка ВИДИМА повністю. Анімація вмикається
   класом .is-drawing, який ставить js/09-artwork.js у момент появи картки
   у вʼюпорті. Так графіка ніколи не залишиться невидимою через те, що
   IntersectionObserver не спрацював - це правило проєкту: жоден ефект
   не є умовою видимості. */
@media (prefers-reduced-motion: no-preference){
  .artwork.is-drawing path[stroke],
  .artwork.is-drawing rect[stroke],
  .artwork.is-drawing circle[stroke],
  .artwork.is-drawing ellipse[stroke]{
    stroke-dasharray:1200;
    stroke-dashoffset:1200;
    animation:draw 1.4s var(--ease) forwards;
  }
  /* Заливки (світло у вікнах) НЕ чіпаємо з CSS - вони задані в самому SVG
     і видимі завжди. CSS відповідає лише за те, як малюються контури. */
  @keyframes draw{ to{ stroke-dashoffset:0 } }
}

/* ── Медіа-контейнер під графіку ───────────────────────────────────────── */
.re-media.is-artwork{
  background:#0A140D;
  display:block;
}
.re-media.is-artwork .artwork{
  transition:transform var(--dur-slow) var(--ease);
}
.re-card:hover .re-media.is-artwork .artwork{ transform:scale(1.06) }

/* Тип обʼєкта - підпис унизу графіки, як штамп на кресленні.
   Знизу-зліва, бо зверху вже бейджі, а зверху-справа - «обране». */
.artwork-tag{
  position:absolute;left:var(--sp-4);bottom:var(--sp-4);z-index:2;
  display:inline-flex;align-items:center;gap:var(--sp-2);
  padding:4px var(--sp-3);border-radius:4px;
  font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  white-space:nowrap;
  color:rgba(255,255,255,.62);
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(4px);
}
.artwork-tag::before{
  content:"";width:14px;height:1px;background:currentColor;opacity:.7;
}

/* ── Велика графіка на сторінці обʼєкта ────────────────────────────────── */
.re-gallery .is-artwork{
  background:#0A140D;position:relative;overflow:hidden;
}
.re-gallery .is-artwork .artwork{width:100%;height:100%}

/* ── Hero: архітектурне креслення, що малює себе ───────────────────────── */
.hero-art{
  position:relative;width:100%;height:100%;
  background:linear-gradient(155deg,#12341A 0%,#061309 100%);
  overflow:hidden;
}
.hero-art svg{position:absolute;inset:0;width:100%;height:100%}
.hero-art .grid-layer{opacity:.16}
.hero-art .draw-layer path,
.hero-art .draw-layer rect,
.hero-art .draw-layer circle{
  stroke-dasharray:2000;stroke-dashoffset:2000;
  animation:draw 2.4s var(--ease) forwards;
}
.hero-art .draw-layer > *:nth-child(1){ animation-delay:.15s }
.hero-art .draw-layer > *:nth-child(2){ animation-delay:.35s }
.hero-art .draw-layer > *:nth-child(3){ animation-delay:.55s }
.hero-art .draw-layer > *:nth-child(4){ animation-delay:.75s }
.hero-art .draw-layer > *:nth-child(5){ animation-delay:.95s }
.hero-art .draw-layer > *:nth-child(n+6){ animation-delay:1.15s }

/* Мʼяке світло, що повільно дихає */
.hero-art::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 46% at 62% 38%, rgba(127,212,106,.22), transparent 70%);
  animation:breathe 7s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{ opacity:.65; transform:scale(1) }
  50%    { opacity:1;   transform:scale(1.06) }
}

@media (prefers-reduced-motion: reduce){
  .artwork path[stroke],.artwork rect[stroke],.artwork circle[stroke],.artwork ellipse[stroke],
  .hero-art .draw-layer path,.hero-art .draw-layer rect,.hero-art .draw-layer circle{
    stroke-dasharray:none;stroke-dashoffset:0;animation:none;
  }
  .hero-art::after{ animation:none }
}