/* ============================================================
   JUDESYS IR DETALĖS
   Atskiras sluoksnis: viskas, kas gyvena virš bazinio dizaino —
   kaukių atskleidimai, parallax, hover elgsena, mikroanimacijos.
   Įkeliamas paskutinis, todėl nieko nelaužo, tik papildo.

   Taisyklė: kiekvienas judesys turi turėti priežastį. Nieko, kas
   tik „juda". Su prefers-reduced-motion viskas nutyla (žr. pabaigą).
   ============================================================ */

:root{
  --ease-mask:cubic-bezier(.16,1,.3,1);   /* greitas startas, ilga uodega */
  --t-mask:900ms;
  --stagger:90ms;
}

/* ------------------------------------------------------------
   1. KAUKIŲ ATSKLEIDIMAS
   Tekstas ne „atsiranda", o pakyla iš po nematomos briaunos.
   Naudojama hero antraštėje ir kiekvienos sekcijos pavadinime.
------------------------------------------------------------ */
/* Kaukė kerpa viską, kas išeina už eilutės dėžutės. Su line-height .92
   lietuviškų didžiųjų diakritikai (Ė Š Ž) lieka virš jos, o nosinės (Ų Į)
   po ja - todėl reikia atsargos iš abiejų pusių. Neigiama paraštė ją
   atsuka atgal, tad eilučių tarpai nepasikeičia. */
.line{
  display:block;overflow:hidden;
  padding-block:.16em;margin-block:-.16em;
}
.js .line__i{
  display:block;
  transform:translateY(140%);   /* daugiau nei 100%, nes kaukė aukštesnė */
  transition:transform var(--t-mask) var(--ease-mask);
  transition-delay:calc(var(--i,0) * var(--stagger));
}
.js .is-lit .line__i,
.js .rv.is-in .line__i,
.js .is-in .line__i{transform:none;}

/* ------------------------------------------------------------
   2. PAKOPINIS SEKCIJŲ ATSKLEIDIMAS
   Vietoj vieno bendro „fade in" — elementai pasirodo eilės tvarka.
------------------------------------------------------------ */
.js .rv{transition-delay:calc(var(--i,0) * 70ms);}

/* Eilutės ir kortelės tvarkingai įeina viena po kitos.
   Naudojama animacija (ne transition), nes ji pasibaigia ir nepalieka
   inline stiliaus — todėl vėliau nesikerta su hover transformacijomis. */
.js .rv.is-in .service{
  animation:rowIn 720ms var(--ease-mask) backwards;
  animation-delay:calc(var(--i,0) * 70ms);
}
@keyframes rowIn{from{opacity:0;transform:translateY(18px);}}

/* Nuotraukos atsidengia braukiant iš apačios, ne blėsdamos —
   toks atskleidimas primena atidengiamą brėžinį. */
.js .rv.is-in .project{
  animation:wipeIn var(--t-mask) var(--ease-mask) backwards;
  animation-delay:calc(var(--i,0) * 90ms);
}
@keyframes wipeIn{from{clip-path:inset(0 0 100% 0);}to{clip-path:inset(0 0 0 0);}}

/* ------------------------------------------------------------
   3. EIGOS JUOSTA
------------------------------------------------------------ */
.progress{
  position:fixed;inset:0 0 auto 0;z-index:130;height:2px;
  background:transparent;pointer-events:none;
}
.progress span{
  display:block;height:100%;background:var(--accent);
  transform:scaleX(var(--p,0));transform-origin:left;
  transition:transform 120ms linear;
}

/* ------------------------------------------------------------
   4. HERO
------------------------------------------------------------ */
/* Betono tekstūra ant nuotraukos — medžiagiškumas, ne filtras */
.hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Brėžinio ašys */
.hero__rules{position:absolute;inset:0;z-index:0;pointer-events:none;}
.hero__rules span{
  position:absolute;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,rgba(232,232,230,0) 0%,rgba(232,232,230,.22) 22%,rgba(232,232,230,.05) 100%);
  transform:scaleY(0);transform-origin:top;
}
.hero__rules span:nth-child(1){left:12.5%;}
.hero__rules span:nth-child(2){left:31%;}
.hero__rules span:nth-child(3){left:50%;}
.hero__rules span:nth-child(4){left:69%;}
.hero__rules span:nth-child(5){left:87.5%;}
.js .is-lit .hero__rules span{
  transform:scaleY(1);
  transition:transform 1400ms var(--ease-mask);
  transition-delay:calc(120ms + var(--i) * 110ms);
}
@media (max-width:767px){.hero__rules{display:none;}}

/* Parallax: fonas juda lėčiau nei tekstas — hero įgauna gylį */
.hero__bg,.hero__col{will-change:transform;}
.hero__bg .photo{transform:scale(1.08);transform-origin:center 40%;}

/* Eyebrow, lead, mygtukai ir apatinė juosta įeina po antrašte */
.js .hero__eyebrow,
.js .hero__lead,
.js .hero__actions,
.js .hero__bar-inner span{
  opacity:0;transform:translateY(16px);
  transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-mask);
}
.js .is-lit .hero__eyebrow{opacity:1;transform:none;transition-delay:60ms;}
.js .is-lit .hero__lead{opacity:1;transform:none;transition-delay:520ms;}
.js .is-lit .hero__actions{opacity:1;transform:none;transition-delay:640ms;}
.js .is-lit .hero__bar-inner span{
  opacity:1;transform:none;
  transition-delay:calc(760ms + var(--i) * 80ms);
}

/* ------------------------------------------------------------
   5. PASLAUGŲ EILUTĖS
   Užvedus: numeris atgyja, pavadinimas pasislenka, o po eilute
   iš kairės nubrėžiama oranžinė linija — kaip pažymėta vieta brėžinyje.
------------------------------------------------------------ */
.service{text-decoration:none;}          /* buvo paveldimas pabraukimas */
.service::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--accent-ctx);
  transform:scaleX(0);transform-origin:left;
  transition:transform 520ms var(--ease-mask);
}
.service:hover::after,.service:focus-visible::after{transform:scaleX(1);}

.service__num{
  transition:color var(--t-ui) var(--ease-ui),transform 420ms var(--ease-mask);
}
.service:hover .service__num,.service:focus-within .service__num{
  transform:translateX(4px);
}
.service__title{transition:transform 480ms var(--ease-mask);}
.service:hover .service__title,.service:focus-within .service__title{
  transform:translateX(10px);
}
.service__desc{transition:color var(--t-ui) var(--ease-ui),opacity var(--t-ui) var(--ease-ui);}
.service:hover .service__desc{color:var(--ink);}

/* Kai užvedama ant vienos eilutės, kitos prigęsta — dėmesys viena kryptimi */
@media (min-width:1024px) and (hover:hover){
  .services__list:hover .service:not(:hover){opacity:.45;}
  .service{transition:background var(--t-ui) var(--ease-ui),opacity 360ms var(--ease-ui);}
}

/* ------------------------------------------------------------
   6. PROJEKTŲ KORTELĖS
   Užvedus nuotrauka priartėja ir atgauna dalį spalvos — objektas
   tarsi „pabunda". Viršuje nubrėžiama akcento linija.
------------------------------------------------------------ */
.project{text-decoration:none;}
.project .photo{
  transition:transform var(--t-image) var(--ease-out),
             filter var(--t-image) var(--ease-out);
}
.project:hover .photo,.project:focus-visible .photo{
  transform:scale(1.05);
  filter:grayscale(.25) contrast(1.06);
}
.project::after{
  content:"";position:absolute;left:0;top:0;right:0;height:3px;z-index:2;
  background:var(--accent);
  transform:scaleX(0);transform-origin:left;
  transition:transform 560ms var(--ease-mask);
}
.project:hover::after,.project:focus-visible::after{transform:scaleX(1);}

.project__overlay > div{
  transform:translateY(10px);opacity:.92;
  transition:transform 560ms var(--ease-mask),opacity 400ms var(--ease-ui);
}
.project:hover .project__overlay > div{transform:none;opacity:1;}

.project__code::before{
  content:"";display:inline-block;width:6px;height:6px;margin-right:8px;
  background:var(--accent);vertical-align:middle;
  transform:scale(0);transition:transform 420ms var(--ease-mask);
}
.project:hover .project__code::before{transform:scale(1);}

/* ------------------------------------------------------------
   7. PROCESAS
   Kairėje brėžiama vertikali linija, sekanti slinkties poziciją.
------------------------------------------------------------ */
.process__list{position:relative;}
.process__list::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--accent-ctx);
  transform:scaleY(var(--p,0));transform-origin:top;
  transition:transform 160ms linear;
}
.step__num{transition:color var(--t-ui) var(--ease-ui),transform 420ms var(--ease-mask);}
.step:hover .step__num{transform:translateX(6px);}

/* ------------------------------------------------------------
   8. STATISTIKA
------------------------------------------------------------ */
.stat__value{display:block;}
.stat__label{position:relative;padding-left:0;}
.js .rv.is-in .stat__label::before{
  content:"";position:absolute;left:0;top:-10px;width:100%;height:1px;
  background:var(--line-strong);
  transform:scaleX(0);transform-origin:left;
  animation:ruleIn 700ms var(--ease-mask) forwards;
  animation-delay:calc(var(--i,0) * 90ms + 200ms);
}
@keyframes ruleIn{to{transform:scaleX(1);}}

/* ------------------------------------------------------------
   9. MYGTUKAI IR NUORODOS
------------------------------------------------------------ */
.btn__label{
  display:inline-grid;overflow:hidden;
  padding-block:.18em;margin-block:-.18em;
}
.btn__label-i{
  grid-area:1/1;display:block;
  transition:transform 460ms var(--ease-mask);
}
.btn__label-i:nth-child(2){transform:translateY(115%);}
.btn:hover .btn__label-i:nth-child(1),
.btn:focus-visible .btn__label-i:nth-child(1){transform:translateY(-115%);}
.btn:hover .btn__label-i:nth-child(2),
.btn:focus-visible .btn__label-i:nth-child(2){transform:translateY(0);}

.btn--primary{position:relative;overflow:hidden;isolation:isolate;}
/* Tamsesnis atspalvis įslenka iš apačios, o ne persijungia staiga */
.btn--primary::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--accent-hover);
  transform:translateY(101%);transition:transform 460ms var(--ease-mask);
}
.btn--primary:hover{background:var(--accent);}
.btn--primary:hover::before,.btn--primary:focus-visible::before{transform:translateY(0);}

.btn--secondary{position:relative;}
.btn--secondary::before{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:var(--accent-ctx);transform:scaleX(0);transform-origin:left;
  transition:transform 460ms var(--ease-mask);
}
.hero .btn--secondary::before{background:var(--accent);}
.btn--secondary:hover::before,.btn--secondary:focus-visible::before{transform:scaleX(1);}

.btn--ghost{position:relative;border-bottom-color:transparent;}
.btn--ghost::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(1);transform-origin:right;
  transition:transform 380ms var(--ease-mask);
}
.btn--ghost:hover::after{transform:scaleX(0);}

/* Meniu nuorodos: linija nubrėžiama užvedus, ne tik aktyviam punktui */
.header__link:hover::after{transform:scaleX(1);}

/* ------------------------------------------------------------
   10. FORMOS LAUKAI
   Fokusuojant apatinė linija nubrėžiama iš kairės.
------------------------------------------------------------ */
.field{position:relative;}
.field input,.field select,.field textarea{transition:border-color 200ms var(--ease-ui);}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-width:1px;}
.field::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:var(--accent-ctx);transform:scaleX(0);transform-origin:left;
  transition:transform 380ms var(--ease-mask);pointer-events:none;
}
.field:focus-within::after{transform:scaleX(1);}
.field__label{transition:color 200ms var(--ease-ui);}
.field:focus-within .field__label{color:var(--accent-ctx);}

/* ------------------------------------------------------------
   11. PUSLAPIŲ PERĖJIMAS
   Trumpas pritemimas išeinant ir prašviesėjimas atėjus.
------------------------------------------------------------ */
.js body{
  opacity:1;
  transition:opacity 260ms var(--ease-ui);
}
.js body.is-leaving{opacity:0;}

/* ------------------------------------------------------------
   12. REDUCED MOTION
   Vartotojui, išjungusiam animacijas, lieka statiškas puslapis —
   bet niekas nedingsta ir nelieka nematoma.
------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .js .line__i,
  .js .hero__eyebrow,.js .hero__lead,.js .hero__actions,.js .hero__bar-inner span,
  .js body{opacity:1 !important;transform:none !important;}
  .js .rv.is-in .service,.js .rv.is-in .project{animation:none !important;}
  .hero__rules span{transform:scaleY(1) !important;}
  .progress span,.process__list::before{transform:none !important;}
  .hero__bg .photo{transform:none;}
  .services__list:hover .service:not(:hover){opacity:1 !important;}
}