/* ==========================================================================
   Klima Varna — motion layer: entrances, parallax, magnetics, marquee
   Всичко се анимира само чрез transform, opacity и mask.
   ========================================================================== */

/* --- Scroll progress ----------------------------------------------------- */
.progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:55;pointer-events:none;
  background:linear-gradient(90deg,var(--marine),var(--sun));
  transform:scaleX(var(--p,0));transform-origin:0 50%;
  opacity:0;transition:opacity .4s var(--ease);
}
.is-scrolled .progress{opacity:.9}

/* --- Heading wipe reveal ------------------------------------------------- */
.rise{
  opacity:0;transform:translate3d(0,var(--rise-y,30px),0);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 var(--wipe,0%),transparent calc(var(--wipe,0%) + 12%));
  mask-image:linear-gradient(180deg,#000 0%,#000 var(--wipe,0%),transparent calc(var(--wipe,0%) + 12%));
  will-change:transform,opacity;
}
.rise.is-in{
  opacity:1;transform:none;--wipe:120%;
  transition:
    opacity .7s var(--ease) var(--d,0s),
    transform .9s var(--spring) var(--d,0s),
    --wipe .85s var(--ease) var(--d,0s);
  will-change:auto;
}
@property --wipe{syntax:'<percentage>';inherits:false;initial-value:0%}

/* --- Masked line (numbers, tags) ---------------------------------------- */
.mask{display:inline-block;overflow:hidden;vertical-align:bottom}
.mask__in{display:inline-block;transform:translate3d(0,105%,0)}
.is-in .mask__in,.mask.is-in .mask__in{
  transform:none;transition:transform 1s var(--spring) var(--d,0s);
}

/* --- Hero choreography --------------------------------------------------- */
.hero__eyebrows .chip{opacity:0;transform:translate3d(0,14px,0) scale(.96)}
.is-ready .hero__eyebrows .chip{
  opacity:1;transform:none;
  transition:opacity .7s var(--ease) var(--d,0s),transform .9s var(--spring) var(--d,0s);
}
.hero__eyebrows .chip:nth-child(1){--d:.02s}
.hero__eyebrows .chip:nth-child(2){--d:.08s}
.hero__eyebrows .chip:nth-child(3){--d:.14s}
/* H1 = LCP: реве́лът започва веднага, само с маска, без opacity. */
.hero h1{--d:.04s;--rise-y:26px;opacity:1}
.hero h1.rise{opacity:1}
.hero__lead{--d:.2s}
.hero .btn-row{--d:.3s}
.hero__strip{--d:.4s}
.hero__unit{
  opacity:0;transform:translate3d(60px,0,0) scale(1.02);
}
.is-ready .hero__unit{
  opacity:.5;transform:translate3d(0,var(--py,0px),0);
  transition:opacity 1.2s var(--ease) .12s,transform 1.3s var(--ease) .12s;
}
.is-ready .hero__unit.is-floating{animation:heroFloat 15s var(--ease) infinite alternate 2s}

/* --- Parallax (JS writes --py) ------------------------------------------ */
[data-parallax]{transform:translate3d(0,var(--py,0px),0)}
.plate .plate__art[data-parallax]{transition:none}

/* --- Magnetic pointer (JS writes --mx/--my) ----------------------------- */
@media (hover:hover) and (pointer:fine){
  .magnetic{transform:translate3d(var(--mx,0px),var(--my,0px),0)}
  .btn.magnetic:hover{transform:translate3d(var(--mx,0px),calc(var(--my,0px) - 2px),0)}
  .service.magnetic:hover{transform:translate3d(var(--mx,0px),calc(var(--my,0px) - 6px),0)}
}
@media (hover:none){
  .card:hover,.service:hover,.pcard-post:hover,.btn:hover{transform:none}
  .service:hover::after{opacity:0}
}

/* --- Brand marquee ------------------------------------------------------- */
.marquee{
  position:relative;flex:1;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee__track{display:flex;width:max-content;animation:marquee 38s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__row{display:flex;align-items:center;gap:clamp(1.4rem,3.4vw,2.6rem);padding-right:clamp(1.4rem,3.4vw,2.6rem)}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* --- Accordion content fade ----------------------------------------------
   The button sits inside an <h3>, so the panel is NOT its sibling — the fade
   has to hang off the item. Gated on :has() so browsers without it simply show
   the answer instead of hiding it forever. */
@supports selector(:has(*)){
  .acc__panel .acc__inner{opacity:0;transform:translate3d(0,10px,0);transition:opacity .5s var(--ease),transform .6s var(--ease)}
  .acc__item:has(.acc__btn[aria-expanded=true]) .acc__inner{opacity:1;transform:none;transition-delay:.12s}
}

/* --- Price rows ---------------------------------------------------------- */
.ptable tbody tr{opacity:0;transform:translate3d(0,14px,0)}
.ptable.is-in tbody tr{opacity:1;transform:none;transition:opacity .7s var(--ease) var(--rd,0s),transform .8s var(--spring) var(--rd,0s),background .4s var(--ease)}
.ptable tbody tr:nth-child(1){--rd:.02s}
.ptable tbody tr:nth-child(2){--rd:.07s}
.ptable tbody tr:nth-child(3){--rd:.12s}
.ptable tbody tr:nth-child(4){--rd:.17s}
.ptable tbody tr:nth-child(5){--rd:.22s}
.ptable tbody tr:nth-child(6){--rd:.27s}
.ptable tbody tr:nth-child(7){--rd:.32s}
.ptable tbody tr:nth-child(8){--rd:.37s}

/* --- Plate / media micro-motion ----------------------------------------- */
.plate{transition:transform .8s var(--ease),box-shadow .6s var(--ease)}
@media (hover:hover){
  .plate:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(14,28,30,.09),var(--shadow-lift)}
  .plate:hover .plate__art{transform:scale(1.03)}
}
.plate__art{transition:transform 1.2s var(--ease)}

/* --- CTA drifting light -------------------------------------------------- */
.cta__bg{animation:ctaDrift 22s var(--ease) infinite alternate}
@keyframes ctaDrift{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.06) translate3d(-1.5%,1%,0)}}

/* --- Sun sweep on the section rule -------------------------------------- */
.rule{position:relative;overflow:hidden}
.rule::after{
  content:"";position:absolute;inset:0;width:0;background:linear-gradient(90deg,var(--sun),transparent);
  transition:width 1.4s var(--ease);
}
.rule.is-in::after{width:32%}

/* --- Responsive refinements --------------------------------------------- */
@media (max-width:1200px){
  .bento__tall{min-height:480px}
}
@media (max-width:1080px){
  :root{--section-y:clamp(3.6rem,7.5vw,6rem)}
  .contact{gap:2rem}
}
@media (max-width:980px){
  .section-head--split{gap:1.2rem}
  .benefits .plate{min-height:300px}
}
@media (max-width:760px){
  :root{--nav-h:68px}
  .hero{min-height:auto;padding-top:calc(var(--nav-h) + 74px);padding-bottom:1rem}
  .hero h1{max-width:100%}
  /* Manual <br> stays: hiding it glued the words together, because in the copy
     the break replaces the space ("климатици<br>във" -> "климатицивъв"). */
  .hero__lead{font-size:var(--step-0)}
  .hero__eyebrows{gap:.4rem}
  .btn{padding:.78rem .95rem .78rem 1.1rem;font-size:.92rem}
  .btn--lg{padding:.92rem 1rem .92rem 1.25rem;font-size:.96rem}
  .hero .btn-row .btn{flex:1 1 100%;justify-content:space-between}
  .statement__inner{padding:1.3rem}
  .statement blockquote{max-width:100%}
  .foot__bottom{flex-direction:column;align-items:flex-start;gap:.6rem}
  .acc__btn{grid-template-columns:auto 1fr auto;gap:.7rem}
  .acc__sign{width:30px;height:30px}
  .pagehead{padding-top:calc(var(--nav-h) + 3.4rem)}
}
@media (max-width:420px){
  .plate__stat b{font-size:var(--step-2)}
  .contact__form{padding:4px}
  .contact__form-core{padding:1.05rem}
  .pcard{padding:1rem}
}
/* Телефон в хоризонтален режим */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:auto;padding-top:calc(var(--nav-h) + 40px)}
  .navmodal{align-content:start;overflow-y:auto}
  .navmodal a{font-size:1.4rem;padding:.3rem 0}
}
/* Много широки екрани */
@media (min-width:1700px){
  :root{--shell:1480px}
}

/* --- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .rise,.mask__in,.hero__eyebrows .chip,.hero__unit,.ptable tbody tr,.acc__panel .acc__inner{
    opacity:1!important;transform:none!important;
    -webkit-mask-image:none!important;mask-image:none!important;
  }
  .marquee__track,.cta__bg,.hero__unit{animation:none!important}
  .rule::after{display:none}
}

/* ==========================================================================
   Phones: readable type and thumb-sized targets
   ========================================================================== */
@media (max-width:760px){
  /* --- Type floor ---------------------------------------------------------
     Uppercase Cyrillic in mono under ~11px is unreadable on a phone, and the
     secondary лева price was smaller still. */
  .eyebrow{font-size:.74rem}
  .chip{font-size:.72rem}
  .hero__eyebrows .chip{font-size:.72rem;padding:.46rem .78rem}
  .foot__col>b{font-size:.76rem}
  .pnote__group>b{font-size:.74rem}
  .pnote__group li>span{font-size:.9rem}
  .pnote__group li>em{font-size:.95rem}
  .pnote__group li>em i{font-size:.74rem}
  .t-price span,.pcard__price span{font-size:.78rem}
  .pcard__name{font-size:.98rem}
  .step__n{font-size:.78rem}
  .pagehead__facts b i{font-size:.74rem}
  .pagehead__facts span{font-size:.9rem}
  .form-note,.pricing__note,.pnote__text{font-size:.84rem}
  .crumbs{font-size:.84rem}

  /* --- Layout ------------------------------------------------------------- */
  /* Two columns for the footer lists, so 44px rows do not stretch the page. */
  .foot__col:not(.foot__about) ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem}
  .foot__col ul li+li{border-top:0}
  .pnote__shop{padding:.9rem}
  .lead-modal__form{gap:.7rem}
}

@media (max-width:420px){
  /* One column again — two would cut the longer city and service names. */
  .foot__col:not(.foot__about) ul{grid-template-columns:1fr}
  .foot__col ul li+li{border-top:1px solid var(--line-soft)}
  .hero__eyebrows .chip{font-size:.7rem}
}

/* Thumb targets on every touch device, tablets included — not just narrow ones. */
@media (hover:none),(max-width:760px){
  .foot__col ul a,
  .foot__col ul .muted{display:flex;align-items:center;min-height:44px;line-height:1.35}
  .contact__row a{display:inline-flex;align-items:center;min-height:44px}
  .link-more{min-height:44px;align-items:center}
  .radio-chip{min-height:44px;padding-block:.5rem}
  .brand{min-height:44px}
  .callbar .btn{min-height:46px}
  .subnav a,.navmodal__sub a{min-height:40px;display:flex;align-items:center}
}