/* METOPA motion layer: the homepage build scene (the building rises column by column) + site-wide reveals.
   Everything here degrades to a static, fully visible page: the JS only adds state. */
:root{--mm-ease:cubic-bezier(.22,1,.36,1);--mm-header:80px}
@media (max-width:921px){:root{--mm-header:72px}}
/* Logged-in visitors: the sticky header sits below the WordPress admin bar. */
@media (min-width:922px){.admin-bar{--mm-header:112px}}
@media (min-width:601px) and (max-width:921px){.admin-bar{--mm-header:118px}}

/* ---------- Build scene ---------- */
.metopa-build.metopa-build{--t:1;--c:1;position:relative;display:block;height:300vh;padding:0;background:#f0efeb}
.metopa-build .metopa-build__stage{position:sticky;top:var(--mm-header);display:grid;grid-template-columns:minmax(0,34fr) minmax(0,66fr);align-items:end;height:calc(100vh - var(--mm-header));height:calc(100svh - var(--mm-header));padding:0 0 0 max(80px,calc((100% - 1280px)/2));overflow:hidden}
.metopa-build .metopa-build__copy{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:0 32px 200px 0;z-index:2}
.metopa-build .metopa-build__media{position:relative;display:block;align-self:stretch;width:100%;height:100%;padding:0}
.metopa-build .metopa-build__sheet{position:absolute;left:50%;bottom:0;display:block;width:100%;aspect-ratio:3/2;padding:0;transform:translateX(-50%);-webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 14%,#000 var(--mb,100%),transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 14%,#000 var(--mb,100%),transparent);mask-composite:intersect}
.metopa-build .metopa-build__sheet.mm-fit{left:var(--sx);bottom:auto;top:var(--sy);width:var(--sw);transform:none}
/* axonometric artwork stands on plain paper all round: nothing to fade out at the edges */
.metopa-build--plan .metopa-build__sheet{-webkit-mask-image:none;mask-image:none}
/* ...but the rising outline must not end up as a hard rule across the top of the sheet */
.metopa-build--plan .metopa-build__edge{-webkit-mask-image:linear-gradient(to right,transparent 3%,#000 12%,#000 88%,transparent 97%),linear-gradient(to bottom,transparent 3%,#000 14%,#000 90%,transparent 99%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 3%,#000 12%,#000 88%,transparent 97%),linear-gradient(to bottom,transparent 3%,#000 14%,#000 90%,transparent 99%);mask-composite:intersect}
.metopa-build .metopa-build__layer{position:absolute;inset:0;margin:0;width:auto;max-width:none}
.metopa-build .metopa-build__layer img{position:static;display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.metopa-build .metopa-build__layer--frame{clip-path:var(--cf,none)}
.metopa-build .metopa-build__layer--built{clip-path:var(--cb,none)}
.metopa-build .metopa-build__edge{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:var(--eo,0);pointer-events:none;z-index:3}
.metopa-build .metopa-build__edge polyline{fill:none;stroke:#c5a27d;stroke-width:1.5;vector-effect:non-scaling-stroke}
/* inspection marks (műszaki ellenőrzés scene): a ticked point with its label */
.metopa-build .metopa-build__mark{position:absolute;z-index:4;display:flex;align-items:center;gap:8px;margin:-11px 0 0 -11px;opacity:calc(var(--m,0)*(1 - var(--b,0)*.999));pointer-events:none}
.metopa-build .metopa-build__mark--left{flex-direction:row-reverse;margin-left:0;transform:translateX(calc(-100% + 11px))}
.metopa-build .metopa-build__mark i{position:relative;flex:none;width:22px;height:22px;border-radius:50%;background:#c5a27d;box-shadow:0 0 0 5px rgba(197,162,125,.28);transform:scale(var(--m,0))}
.metopa-build .metopa-build__mark i::after{content:"";position:absolute;left:7px;top:4px;width:6px;height:10px;border:solid #262626;border-width:0 2px 2px 0;transform:rotate(42deg)}
.metopa-build .metopa-build__mark span{padding:6px 10px;background:#262626;color:#f9f8f6;font:600 11px/1 "Hanken Grotesk",sans-serif;letter-spacing:1.1px;text-transform:uppercase;white-space:nowrap;clip-path:inset(0 calc((1 - var(--m,0))*100%) 0 0)}
.metopa-build .metopa-build__mark--left span{clip-path:inset(0 0 0 calc((1 - var(--m,0))*100%))}
@media (max-width:767px){.metopa-build .metopa-build__mark span{padding:5px 7px;font-size:9px;letter-spacing:.6px}.metopa-build .metopa-build__mark i{width:18px;height:18px}.metopa-build .metopa-build__mark i::after{left:6px;top:3px;width:5px;height:8px}.metopa-build .metopa-build__mark{margin:-9px 0 0 -9px;gap:6px}}
.metopa-build .mm-w{opacity:calc(.24 + .76*clamp(0,calc(var(--t)*var(--n) - var(--i)),1))}
.metopa-build .metopa-build__reveal{opacity:var(--c);transform:translateY(calc((1 - var(--c))*16px))}
.metopa-build .metopa-build__reveal:focus-within{opacity:1;transform:none}

@media (max-width:1024px){
  .metopa-build .metopa-build__stage{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);align-items:stretch;padding:0}
  .metopa-build .metopa-build__copy{gap:12px;padding:32px 32px 16px}
}
@media (max-width:767px){
  .metopa-build.metopa-build{height:220vh;height:220svh}
  .metopa-build .metopa-build__copy{padding:24px 20px 12px}
  .metopa-build .metopa-build__sheet{--mb:86%}
}

/* Static fallbacks: reduced motion, print, no scripting and the Elementor editor show the finished building. */
@media (prefers-reduced-motion:reduce),print,(scripting:none){
  .metopa-build.metopa-build{height:auto}
  .metopa-build .metopa-build__stage{position:relative;top:auto}
}
@media print{.metopa-build.metopa-build{--t:1!important;--c:1!important;--b:1!important;--cb:none!important;--cf:none!important}}
.elementor-editor-active .metopa-build.metopa-build{height:auto}
.elementor-editor-active .metopa-build .metopa-build__stage{position:relative;top:auto}

/* ---------- Partner logos glide at one constant, slow pace ---------- */
.elementor-element-91000b9 .swiper-wrapper{transition-timing-function:linear!important}

/* ---------- Technical-drawing backgrounds are built up column by column (class set by JS) ---------- */
.mm-bg.mm-bg{background-image:none!important}
.mm-bg.mm-bg::before{content:""!important;position:absolute;top:0;left:0;width:100%;height:100%;border:0;opacity:1;mix-blend-mode:normal;transition:none;pointer-events:none;background:var(--mm-bgi) no-repeat var(--mm-b0x) var(--mm-b0y)/var(--mm-bs);clip-path:var(--mm-clip,none)}
@media print{.mm-bg.mm-bg::before{clip-path:none!important}}

/* ---------- The shared "built from columns" keyframes ---------- */
@keyframes mm-build{0%{clip-path:polygon(0% 100%,0.00% 100.00%,12.50% 100.00%,12.50% 100.00%,25.00% 100.00%,25.00% 100.00%,37.50% 100.00%,37.50% 100.00%,50.00% 100.00%,50.00% 100.00%,62.50% 100.00%,62.50% 100.00%,75.00% 100.00%,75.00% 100.00%,87.50% 100.00%,87.50% 100.00%,100.00% 100.00%,100% 100%)}8.33%{clip-path:polygon(0% 100%,0.00% 57.87%,12.50% 57.87%,12.50% 93.03%,25.00% 93.03%,25.00% 100.00%,37.50% 100.00%,37.50% 100.00%,50.00% 100.00%,50.00% 100.00%,62.50% 100.00%,62.50% 100.00%,75.00% 100.00%,75.00% 100.00%,87.50% 100.00%,87.50% 100.00%,100.00% 100.00%,100% 100%)}16.67%{clip-path:polygon(0% 100%,0.00% 29.63%,12.50% 29.63%,12.50% 53.05%,25.00% 53.05%,25.00% 86.38%,37.50% 86.38%,37.50% 100.00%,50.00% 100.00%,50.00% 100.00%,62.50% 100.00%,62.50% 100.00%,75.00% 100.00%,75.00% 100.00%,87.50% 100.00%,87.50% 100.00%,100.00% 100.00%,100% 100%)}25%{clip-path:polygon(0% 100%,0.00% 12.50%,12.50% 12.50%,12.50% 26.57%,25.00% 26.57%,25.00% 48.51%,37.50% 48.51%,37.50% 80.07%,50.00% 80.07%,50.00% 100.00%,62.50% 100.00%,62.50% 100.00%,75.00% 100.00%,75.00% 100.00%,87.50% 100.00%,87.50% 100.00%,100.00% 100.00%,100% 100%)}33.33%{clip-path:polygon(0% 100%,0.00% 3.70%,12.50% 3.70%,12.50% 10.80%,25.00% 10.80%,25.00% 23.72%,37.50% 23.72%,37.50% 44.23%,50.00% 44.23%,50.00% 74.06%,62.50% 74.06%,62.50% 100.00%,75.00% 100.00%,75.00% 100.00%,87.50% 100.00%,87.50% 100.00%,100.00% 100.00%,100% 100%)}41.67%{clip-path:polygon(0% 100%,0.00% 0.46%,12.50% 0.46%,12.50% 2.97%,25.00% 2.97%,25.00% 9.26%,37.50% 9.26%,37.50% 21.09%,50.00% 21.09%,50.00% 40.21%,62.50% 40.21%,62.50% 68.37%,75.00% 68.37%,75.00% 100.00%,87.50% 100.00%,87.50% 100.00%,100.00% 100.00%,100% 100%)}50%{clip-path:polygon(0% 100%,0.00% 0.00%,12.50% 0.00%,12.50% 0.29%,25.00% 0.29%,25.00% 2.33%,37.50% 2.33%,37.50% 7.87%,50.00% 7.87%,50.00% 18.66%,62.50% 18.66%,62.50% 36.44%,75.00% 36.44%,75.00% 62.97%,87.50% 62.97%,87.50% 100.00%,100.00% 100.00%,100% 100%)}58.33%{clip-path:polygon(0% 100%,0.00% 0.00%,12.50% 0.00%,12.50% 0.00%,25.00% 0.00%,25.00% 0.17%,37.50% 0.17%,37.50% 1.80%,50.00% 1.80%,50.00% 6.63%,62.50% 6.63%,62.50% 16.42%,75.00% 16.42%,75.00% 32.92%,87.50% 32.92%,87.50% 57.87%,100.00% 57.87%,100% 100%)}66.67%{clip-path:polygon(0% 100%,0.00% 0.00%,12.50% 0.00%,12.50% 0.00%,25.00% 0.00%,25.00% 0.00%,37.50% 0.00%,37.50% 0.09%,50.00% 0.09%,50.00% 1.35%,62.50% 1.35%,62.50% 5.53%,75.00% 5.53%,75.00% 14.37%,87.50% 14.37%,87.50% 29.63%,100.00% 29.63%,100% 100%)}75%{clip-path:polygon(0% 100%,0.00% 0.00%,12.50% 0.00%,12.50% 0.00%,25.00% 0.00%,25.00% 0.00%,37.50% 0.00%,37.50% 0.00%,50.00% 0.00%,50.00% 0.04%,62.50% 0.04%,62.50% 0.98%,75.00% 0.98%,75.00% 4.56%,87.50% 4.56%,87.50% 12.50%,100.00% 12.50%,100% 100%)}83.33%{clip-path:polygon(0% 100%,0.00% 0.00%,12.50% 0.00%,12.50% 0.00%,25.00% 0.00%,25.00% 0.00%,37.50% 0.00%,37.50% 0.00%,50.00% 0.00%,50.00% 0.00%,62.50% 0.00%,62.50% 0.01%,75.00% 0.01%,75.00% 0.69%,87.50% 0.69%,87.50% 3.70%,100.00% 3.70%,100% 100%)}91.67%{clip-path:polygon(0% 100%,0.00% 0.00%,12.50% 0.00%,12.50% 0.00%,25.00% 0.00%,25.00% 0.00%,37.50% 0.00%,37.50% 0.00%,50.00% 0.00%,50.00% 0.00%,62.50% 0.00%,62.50% 0.00%,75.00% 0.00%,75.00% 0.00%,87.50% 0.00%,87.50% 0.46%,100.00% 0.46%,100% 100%)}100%{clip-path:polygon(0% 100%,0.00% 0.00%,12.50% 0.00%,12.50% 0.00%,25.00% 0.00%,25.00% 0.00%,37.50% 0.00%,37.50% 0.00%,50.00% 0.00%,50.00% 0.00%,62.50% 0.00%,62.50% 0.00%,75.00% 0.00%,75.00% 0.00%,87.50% 0.00%,87.50% 0.00%,100.00% 0.00%,100% 100%)}}

/* ---------- First screen of every page: copy rises in on load (CSS only, so nothing flashes) ---------- */
@media screen and (prefers-reduced-motion:no-preference){
  @keyframes mm-rise{from{opacity:0;transform:translateY(34px)}}
  .elementor[data-elementor-type="wp-page"]>.e-con:first-child :is(.elementor-widget-heading,.elementor-widget-text-editor,.elementor-widget-button){animation:mm-rise 1.1s var(--mm-ease) .1s backwards}
  .elementor[data-elementor-type="wp-page"]>.e-con:first-child .elementor-widget-text-editor{animation-delay:.28s}
  .elementor[data-elementor-type="wp-page"]>.e-con:first-child .elementor-widget-button{animation-delay:.42s}
  /* the opening picture of every subpage is built from columns as the page loads */
  .elementor[data-elementor-type="wp-page"]>.e-con:first-child:not(:has(.swiper)) .elementor-widget-image{animation:mm-build 1.7s linear .15s backwards}
}

/* ---------- Site-wide reveals (classes are added per element by JS only) ---------- */
@media screen{
  /* images: built up column by column while the picture settles */
  .mm-img{clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%);overflow:hidden;overflow:clip}
  .mm-img img{transform:scale(1.14)}
  .mm-img.mm-in{clip-path:none;animation:mm-build 1.5s linear backwards}
  .mm-img.mm-in img{transform:none;transition:transform 2s var(--mm-ease)}
  /* headings: every word swings up out of its own mask, one after another */
  .mm-wd{display:inline-block;overflow:hidden;overflow:clip;vertical-align:top;padding:.16em .06em .14em 0;margin:-.16em -.06em -.14em 0}
  .mm-wd>span{display:inline-block;transform-origin:0 100%}
  .mm-h .mm-wd>span{transform:translateY(125%) rotate(9deg)}
  .mm-h.mm-in .mm-wd>span{transform:none;transition:transform 1.15s var(--mm-ease) calc(var(--i)*70ms)}
  /* small labels above headings: wiped in from the left */
  .mm-e{clip-path:inset(0 100% 0 0);transform:translateX(-14px)}
  .mm-e.mm-in{clip-path:inset(0 -10% 0 0);transform:none;transition:clip-path 1s var(--mm-ease),transform 1.1s var(--mm-ease)}
  /* body copy: a short, late fade so the heading leads */
  .mm-t{opacity:0;transform:translateY(18px)}
  .mm-t.mm-in{opacity:1;transform:none;transition:opacity .9s ease .25s,transform 1s var(--mm-ease) .25s}
  /* cards and rows: siblings rise one after another */
  .mm-c{opacity:0;transform:translateY(56px)}
  .mm-c.mm-in{opacity:1;transform:none;transition:opacity .9s ease calc(var(--i)*110ms),transform 1.2s var(--mm-ease) calc(var(--i)*110ms)}
  .mm-ico{display:block}
}