/* Klímamester Szeged • Premium Motion System v15
   Folyamatos animáció csak a HERO fényképén; más elemek belépéskor mozognak.
   Mozgás: opacity + transform; nincs layout-ot módosító animáció. */
:root {
  --km-ease-out: cubic-bezier(.2,.76,.2,1);
  --km-ease-spring: cubic-bezier(.2,1.04,.26,1);
  --km-shadow-hover: 0 18px 42px rgba(5,39,79,.12);
}
/* Ken Burns: lágy, lassú zoom, a kép fókusza megmarad */
@keyframes km-ken-burns {
  0% { transform: translate3d(0,0,0) scale(1.025); }
  100% { transform: translate3d(-.7%, -.5%, 0) scale(1.095); }
}
.hero-photo, .service-hero-art, .guide-hero-img, .mobile-hero-image {
  transform-origin: 72% 44%;
  animation: km-ken-burns 23s ease-in-out infinite alternate;
  backface-visibility: hidden;
}
/* Kapcsolat és GYIK statikus képei változatlanok, hogy a fotó ne fárasszon. */

/* Belépő elemek: csak akkor rejtettek, ha a JS rendesen felállt. */
.km-motion-ready .km-reveal:not(.km-in) {
  opacity:0;
  transform:translate3d(var(--km-enter-x,0px), var(--km-enter-y,21px),0)
            scale(var(--km-enter-scale, .985));
}
.km-reveal {
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  transition: opacity .68s var(--km-ease-out), transform .78s var(--km-ease-spring);
  transition-delay:var(--km-delay,0ms);
}
.km-in {opacity:1;transform:translate3d(0,0,0) scale(1)}
.km-reveal[data-km-type="left"] {--km-enter-x:-23px;--km-enter-y:5px;--km-enter-scale:1}
.km-reveal[data-km-type="right"] {--km-enter-x:23px;--km-enter-y:5px;--km-enter-scale:1}
.km-reveal[data-km-type="zoom"] {--km-enter-x:0px;--km-enter-y:7px;--km-enter-scale:.955}
.km-reveal[data-km-type="fade"] {--km-enter-x:0px;--km-enter-y:0px;--km-enter-scale:1}

/* Animált aláhúzás a főmenüben. */
.main-nav a::after {content:"";height:2px;position:absolute;left:-7px;right:-7px;bottom:0;
  background:var(--blue,#0987ed);transform-origin:center;transform:scaleX(0);
  transition:transform .34s var(--km-ease-out);}
.main-nav a.active::after,.main-nav a:hover::after,.main-nav a:focus-visible::after {transform:scaleX(1)}
.brand .brand-snow{transition:transform .6s var(--km-ease-spring),filter .4s ease}
@media (hover:hover) and (pointer:fine){.brand:hover .brand-snow{transform:rotate(24deg) scale(1.07);filter:drop-shadow(0 1px 5px #61bcfa99)}}

/* Nagyvállalati microinteraction-rendszer: gomb, kártya, link. */
.btn, .blog-btn, .blog-btn-secondary, .contact-submit, .mobile-quote-submit,
.mobile-call, .mobile-service-button, .faq-filter, .blog-filter, .contact-mode-tile {
  transition:transform .25s var(--km-ease-spring), box-shadow .3s ease,
    background-color .26s ease, border-color .26s ease, color .26s ease;
}
.btn, .blog-btn, .contact-submit, .mobile-quote-submit { position:relative;overflow:hidden;isolation:isolate; }
.btn::after, .blog-btn::after, .contact-submit::after, .mobile-quote-submit::after {
  content:"";position:absolute;inset:-60% auto -60% -80%;width:38%;transform:skewX(-22deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
  pointer-events:none;transition:left .65s var(--km-ease-out);
}
@media (hover:hover) and (pointer:fine){
  .btn:hover, .blog-btn:hover, .contact-submit:hover, .mobile-quote-submit:hover{transform:translate3d(0,-3px,0);box-shadow:0 13px 26px rgba(1,115,213,.18)}
  .btn:hover::after,.blog-btn:hover::after,.contact-submit:hover::after,.mobile-quote-submit:hover::after{left:140%}
  .service-card:hover,.blog-card:hover,.decision-card:hover,.type-grid article:hover,
  .metric-grid article:hover,.price-box:hover,.hp-card:hover,.faq-decision-card:hover,
  .contact-mode-tile:hover,.mobile-service:hover{transform:translate3d(0,-6px,0);box-shadow:var(--km-shadow-hover)}
  .service-card:hover>img,.blog-card:hover .blog-card-photo img,.blog-featured:hover img,
  .mobile-service:hover>img {transform:scale(1.065)}
  .text-link:hover .icon,.service-card:hover .text-link .icon,
  .mobile-service-button:hover .icon{transform:translate3d(3px,0,0)}
}
.btn:active,.blog-btn:active,.contact-submit:active,.mobile-quote-submit:active,
.mobile-call:active,.mobile-service-button:active,.contact-mode-tile:active,
.faq-filter:active,.blog-filter:active {transform:scale(.972)}
.service-card,.blog-card,.decision-card,.type-grid article,.metric-grid article,
.price-box,.hp-card,.faq-decision-card,.contact-mode-tile,.mobile-service{
  transition: transform .38s var(--km-ease-spring),box-shadow .38s ease,border-color .3s ease;
}
.service-card>img,.blog-card-photo img,.blog-featured img,.mobile-service>img{
  transition:transform .85s var(--km-ease-out);backface-visibility:hidden;
}
.text-link .icon,.mobile-service-button .icon {transition:transform .28s var(--km-ease-spring)}

/* Pill és GYIK animációk, nem nyúlnak a panel belső logikájához. */
.faq-filter,.blog-filter,.guide-toc a,.service-jump a,.guide-tags span,.service-highlight-pills span {transition:background-color .25s ease, border-color .25s ease, color .25s ease,box-shadow .25s ease,transform .25s var(--km-ease-spring)}
@media (hover:hover) and (pointer:fine){
  .faq-filter:hover,.blog-filter:hover,.guide-toc a:hover,.service-jump a:hover{transform:translateY(-2px)}
}
.faq-item,.faq-stack details,.guide-faq .faq-stack details{
  transition:box-shadow .35s ease,border-color .35s ease,background-color .35s ease;
}
.faq-item:focus-within,.faq-stack details[open],.guide-faq .faq-stack details[open]{box-shadow:0 9px 23px rgba(5,70,122,.08);border-color:#9acffc}
.faq-stack summary::after,.guide-faq .faq-stack summary::after{transition:transform .28s var(--km-ease-spring)}
.faq-stack details[open] summary::after,.guide-faq .faq-stack details[open] summary::after{transform:rotate(180deg)}

/* Mobilmenü megnyitásakor finom panelérkezés és egymás után belépő sorok. */
@keyframes km-menu-in{from{opacity:0;transform:translate3d(0,-11px,0) scale(.983)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes km-menu-item-in{from{opacity:0;transform:translate3d(0,7px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
.site-header>.mobile-menu:not([hidden]) {animation:km-menu-in .33s var(--km-ease-spring) both;transform-origin:top center}
.site-header>.mobile-menu:not([hidden]) a{animation:km-menu-item-in .35s var(--km-ease-out) both;animation-delay:calc(var(--km-nav-idx,0) * 33ms)}
.mobile-menu-button span{transition:transform .33s var(--km-ease-spring),opacity .22s ease}
.mobile-menu a{transition:background-color .22s ease,color .22s ease}

/* Passzív, 2px-es olvasási jelző a hosszabb aloldalakon. */
.km-scroll-progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:10050;
  background:linear-gradient(90deg,#0b8eff,#65cdf5);transform:scaleX(0);transform-origin:left center;
  pointer-events:none;transition:transform .085s linear;box-shadow:0 0 8px rgba(2,128,236,.25)}

@media(max-width:760px){
  /* Mobilon gyorsabb, kisebb, finomabb belépések és azonnali tap visszajelzések. */
  .km-reveal{transition-duration:.52s,.6s}
  .km-motion-ready .km-reveal:not(.km-in){--km-enter-y:13px;--km-enter-scale:.993}
  .mobile-hero-image{animation-duration:19s;transform-origin:82% 50%}
  .mobile-service{backface-visibility:hidden}
  .mobile-call:active{box-shadow:0 5px 20px rgba(0,153,94,.25)}
  .mobile-service-button:active{background:#045ea9}
}
/* Környezeti/accessibility beállítás: a teljes oldal animáció nélkül használható. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .km-motion-ready .km-reveal:not(.km-in){opacity:1 !important;transform:none !important}
  .hero-photo,.service-hero-art,.guide-hero-img,.mobile-hero-image{animation:none !important;transform:none !important}
  .km-scroll-progress{transition:none !important}
}

/* V16 – nagyobb, jól olvasható asztali menü (6 menüpont, szélességhez igazítva) */
@media (min-width:1101px){
  .site-header .main-nav{gap:clamp(9px,1.05vw,19px)}
  .site-header .main-nav a{font-size:clamp(13.5px,1.08vw,16px);font-weight:650;letter-spacing:-.2px}
}
@media (min-width:1101px) and (max-width:1320px){
  .site-header{gap:9px;padding-left:18px;padding-right:18px}
  .site-header .header-right{gap:7px}
  .site-header .header-phone b{font-size:11px}
  .site-header .header-quote{width:106px;font-size:12px}
  .site-header .brand-type strong{font-size:17px}
}
/* V16 – szellősebb mobil kezdőlap és opcionális visszaigazoló cím. */
@media (max-width:760px){
  .mobile-app{--mobile-gap:8px}
  .mobile-services{margin-top:3px}
  .km-mobile-email-details{margin:2px 0 0;border:1px solid #dbeaf5;border-radius:9px;background:#f8fcff;color:#214763;}
  .km-mobile-email-details summary{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;list-style:none;padding:6px 11px;font-size:12px;font-weight:650;line-height:1.25}
  .km-mobile-email-details summary::-webkit-details-marker{display:none}
  .km-mobile-email-details summary span{font-size:17px;color:#1682d8;transition:transform .25s ease}
  .km-mobile-email-details[open] summary span{transform:rotate(45deg)}
  .km-mobile-email-input{display:block;padding:0 8px 8px}
  .km-mobile-email-input input{display:block;width:100%;min-height:39px;border:1px solid #bed9ee;border-radius:7px;padding:8px 10px;font-size:14px;outline-offset:2px;background:#fff;color:#0b2948}
  .km-mobile-email-input input:focus-visible{outline:2px solid #399ce9}
  .mobile-services>.mobile-service{min-width:0}
}
.km-quote-email small{font-size:12px;font-weight:450;color:#6d8497}
@media(prefers-reduced-motion:reduce){.km-mobile-email-details summary span{transition:none}}

/* V18 – csak kattintható fotók a mobil kezdőlapon; tömör, két opciós űrlap */
@media(max-width:760px){
 .mobile-services{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:1px;padding:0 10px}
 .mobile-services .mobile-service-link{display:block;width:100%;height:88px;min-width:0;overflow:hidden;border-radius:11px;background:#fff;box-shadow:0 5px 14px rgba(11,61,107,.12);position:relative;isolation:isolate;outline-offset:3px;-webkit-tap-highlight-color:transparent;transition:transform .22s ease,box-shadow .22s ease}
 .mobile-services .mobile-service-link img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.22,1,.36,1)}
 .mobile-services .mobile-service-link:active{transform:scale(.965);box-shadow:0 2px 7px rgba(11,61,107,.13)}
 .mobile-services .mobile-service-link:focus-visible{outline:3px solid #0987ed}
 .mobile-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
 .mobile-options label span{font-size:11.8px;line-height:1.18;white-space:normal;text-align:center;height:38px;padding:3px 7px;letter-spacing:0}
 .mobile-quote-form{gap:6px}
 .mobile-quote{padding:10px 10px 8px}
 .mobile-app{--mobile-gap:7px}
 .mobile-input{height:38px}
 .mobile-input input{font-size:14px}
 .mobile-hero{height:185px}
}
@media(max-width:360px){
 .mobile-services .mobile-service-link{height:79px}
 .mobile-options label span{font-size:10.8px}
 .mobile-hero{height:178px}
}
@media(hover:hover) and (pointer:fine){
 .mobile-services .mobile-service-link:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(11,61,107,.18)}
 .mobile-services .mobile-service-link:hover img{transform:scale(1.045)}
}
@media(prefers-reduced-motion:reduce){.mobile-services .mobile-service-link,.mobile-services .mobile-service-link img{transition:none!important}}

/* V18 – külön tömörítés a 320–360 px-es telefonokhoz. */
@media(max-width:360px){
 .mobile-app{--mobile-gap:5px}
 .mobile-hero{height:160px}
 .mobile-hero-copy{padding-top:11px;padding-left:15px}
 .mobile-hero h1{font-size:24px;margin-bottom:7px;line-height:1.02}
 .mobile-hero-location{font-size:12.5px;margin-bottom:3px}
 .mobile-hero-description{font-size:11.5px;max-width:226px;line-height:1.24}
 .mobile-services .mobile-service-link{height:67px}
 .mobile-quote{padding:8px 9px 7px}
 .mobile-quote-heading{margin-bottom:5px;gap:7px}
 .mobile-quote h2{font-size:20px}
 .mobile-quote-heading p{font-size:10.8px}
 .mobile-quote-form{gap:4px}
 .mobile-input{height:34px}
 .mobile-options label span{height:34px;font-size:10.4px}
 .mobile-quote-submit{height:41px;font-size:14px}
 .mobile-call{height:52px}
 .mobile-call strong{font-size:21px}
 .mobile-contacts{min-height:49px;padding:3px 6px}
}