/* ============================================================
   ТОТАЛ СТРОЙ — начална (фирмена) страница
   Надгражда style.css: използва същите токени и компоненти.
   ============================================================ */

/* марка от две думи — нужен е интервал между тях */
.mark span{margin-right:.3em}

/* ---------- Мрежа с проекти ---------- */
.projects{
  display:grid;gap:clamp(16px,2vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}

.proj{
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);
  color:inherit;text-decoration:none;overflow:hidden;position:relative;
  transition:border-color .35s,transform .35s var(--ease);
}
.proj::before{
  content:"";position:absolute;left:0;top:0;width:2px;height:0;z-index:2;
  background:linear-gradient(var(--gold),transparent);
  transition:height .5s var(--ease);
}
@media (hover:hover){
  a.proj:hover{border-color:var(--line-2);transform:translateY(-3px)}
  a.proj:hover::before{height:100%}
  a.proj:hover .proj-media img{transform:scale(1.045)}
  a.proj:hover .proj-cta svg{transform:translateX(4px)}
}
.proj:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.proj-media{
  display:block;position:relative;aspect-ratio:16/10;
  background:var(--surface-2);overflow:hidden;
}
.proj-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease);
}
.proj-media::after{
  content:"";position:absolute;inset:auto 0 0 0;height:45%;
  background:linear-gradient(transparent,rgba(15,16,19,.65));
  pointer-events:none;
}

.proj-body{
  display:flex;flex-direction:column;flex:1;
  padding:clamp(22px,2.6vw,32px);
}

.proj-top{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-bottom:14px;
}
.proj-status{
  font-family:"Oswald",sans-serif;font-size:var(--t-xs);
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
  border:1px solid var(--gold-dim);background:var(--gold-dim);
  padding:4px 10px;line-height:1.4;
}
.proj-place{
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3);
}

.proj-name{
  font-family:"Oswald",sans-serif;font-weight:700;
  font-size:clamp(26px,1.4rem + 1.5vw,40px);line-height:1.05;
  letter-spacing:.05em;color:#fff;display:block;
  margin-bottom:12px;padding-bottom:14px;border-bottom:1px solid var(--line);
}

.proj-desc{
  display:block;font-size:var(--t-sm);color:var(--text-2);
  margin-bottom:18px;
}

.proj-facts{
  display:flex;flex-wrap:wrap;gap:10px 26px;margin-bottom:22px;
}
.proj-facts span{
  display:flex;align-items:baseline;gap:7px;
  font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-3);
}
.proj-facts b{
  font-family:"Oswald",sans-serif;font-weight:600;
  font-size:var(--t-lg);letter-spacing:.03em;color:var(--text);
}

.proj-cta{
  margin-top:auto;align-self:flex-start;
  display:inline-flex;align-items:center;gap:9px;
  font-family:"Oswald",sans-serif;font-size:var(--t-sm);
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-2);
  text-decoration:none;min-height:44px;
}
.proj-cta svg{
  width:18px;height:18px;flex:none;
  transition:transform .35s var(--ease);
}
a.proj-cta:hover{color:#fff}

/* карта "очаквайте" — без изображение и без връзка към страница */
.proj.soon{
  background:var(--bg-2);
  border-style:dashed;border-color:var(--line-2);
}
.proj.soon .proj-name{color:var(--text-2)}

@media (max-width:520px){
  .proj-media{aspect-ratio:16/11}
}

/* ============================================================
   Хиро "клип" — кръстосано преливане на кадри + бавен зум.
   Ако има реален видеоклип (videos/hero.mp4), home.js го слага отгоре.
   ============================================================ */
.reel{position:absolute;inset:0}
.reel-f{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:52% 42%;
  opacity:0;transform:scale(1.04);will-change:opacity,transform;
}
.reel-f:first-child{opacity:1}

.js .reel-f{
  animation:reel 34s linear infinite;
}
.js .reel-f:nth-child(1){animation-delay:0s}
.js .reel-f:nth-child(2){animation-delay:-25.5s}
.js .reel-f:nth-child(3){animation-delay:-17s}
.js .reel-f:nth-child(4){animation-delay:-8.5s}

@keyframes reel{
  0%   {opacity:0;transform:scale(1.13)}
  3%   {opacity:1}
  25%  {opacity:1}
  30%  {opacity:0;transform:scale(1.04)}
  100% {opacity:0;transform:scale(1.04)}
}

/* реалният клип, ако бъде добавен */
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:52% 42%;
  opacity:0;transition:opacity 1.2s var(--ease);
}
.hero-video.on{opacity:1}

@media (prefers-reduced-motion:reduce){
  .js .reel-f{animation:none}
  .js .reel-f:first-child{opacity:1;transform:none}
}

/* ============================================================
   Манифест — централна фраза и широк кадър
   ============================================================ */
.manifest{padding-block:clamp(72px,10vw,148px) clamp(48px,6vw,88px)}

.manifest-say{
  max-width:34ch;margin:0 auto clamp(50px,7vw,92px);
  padding-inline:var(--gutter);
  text-align:center;text-wrap:balance;
  font-size:clamp(23px,1.1rem + 2.2vw,44px);
  line-height:1.34;letter-spacing:-.018em;
  color:var(--gold);
}

.band{
  margin:0;position:relative;overflow:hidden;
  max-width:calc(var(--maxw) + 120px);margin-inline:auto;
  padding-inline:var(--gutter);
}
.band img{
  width:100%;height:clamp(280px,52vh,620px);object-fit:cover;
  display:block;
}
.band-mark{
  position:absolute;left:calc(var(--gutter) + clamp(22px,4vw,64px));
  top:50%;transform:translateY(-50%);
  display:grid;gap:clamp(4px,.6vw,9px);
  font-family:"Oswald",sans-serif;font-weight:300;
  font-size:clamp(38px,3vw + 1rem,74px);line-height:.9;
  color:rgba(255,255,255,.94);
}
.band-mark span{
  display:grid;place-items:center;
  width:1.5em;height:1.5em;
  border:1px solid rgba(255,255,255,.5);
}
.band-mark span:last-child{margin-left:.75em}

.band-cap{
  max-width:calc(var(--maxw) + 120px);
  margin:clamp(16px,2vw,24px) auto 0;
  padding-inline:var(--gutter);
  font-size:var(--t-sm);color:var(--text-2);
}
.band-cap::before{
  content:"";display:block;width:34px;height:1px;
  background:var(--gold);margin-bottom:14px;
}