/* Metric House — secțiunile mari de pe Acasă, Despre și Cum lucrăm.
   Efectele pornesc când secțiunea devine activă (clasa .active, pusă de fx.js).
   Ordine: 1. secțiuni și intrări animate  2. planșa animată (Cum lucrăm, Studio)
   3. Acasă  4. Despre  5. banda de contact  6. telefon  7. mișcare redusă. */

/* =========================== 1. secțiuni și intrări animate =========================== */
.pg{position:relative;padding:clamp(80px,11vw,160px) 0;overflow:hidden}
.pg > .c{width:100%}
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease-out),transform 1s var(--ease-out);transition-delay:calc(var(--d,0) * 110ms + 150ms)}
.pg.active .rv{opacity:1;transform:none}
.rvi{clip-path:polygon(0 0,0 0,-45% 100%,-45% 100%);transition:clip-path 1.3s var(--ease-io);transition-delay:calc(var(--d,0) * 140ms + 200ms)}
.pg.active .rvi{clip-path:polygon(0 0,145% 0,100% 100%,-45% 100%)}
.disp .ln{display:block;overflow:hidden;padding-top:.06em}
.disp .ln > span{display:block;transform:translateY(110%);transition:transform 1.1s var(--ease-io) .2s}
.pg.active .disp .ln > span{transform:none}
.draw path,.draw circle{transition:stroke-dashoffset 1.6s cubic-bezier(.6,0,.2,1);transition-delay:calc(var(--i,0) * 90ms + 300ms)}
[data-words] span{transition:color .35s}

/* =========================== 2. planșa animată =========================== */
.pg.pg-proc{padding-top:clamp(40px,5vw,72px)}
.pgrid{min-height:calc(100svh - var(--hdr) - 80px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:center}
.ptxt{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;column-gap:28px;row-gap:clamp(28px,4vh,48px);align-self:center}
.ptxt h2{grid-column:1 / -1;font-size:clamp(40px,4.6vw,76px);margin-bottom:clamp(40px,5vw,72px)}
.ruler{position:relative;display:flex;flex-direction:column;justify-content:space-between;height:clamp(220px,34vh,320px);padding-left:30px}
.ruler::before,.ruler::after{content:'';position:absolute;left:11px;top:0;bottom:0;width:2px;background:#b4b4bb}
.ruler::after{background:var(--rosu);width:3px;left:10.5px;transform-origin:50% 0;transform:scaleY(var(--rp,0))}
.ruler button{background:none;border:0;padding:0;min-height:36px;text-align:left;font-family:'Josefin Sans',sans-serif;font-size:16px;color:var(--piatra);cursor:pointer;white-space:nowrap;position:relative;transition:color .3s}
.ruler button::before{content:'';position:absolute;left:-24px;top:50%;width:12px;height:1px;background:#b4b4bb;transition:background .3s,width .3s}
.ruler button.on{color:var(--negru)}
.ruler button.on::before{background:var(--rosu);width:18px}
.pstages{position:relative;min-height:220px;align-self:center}
.pst{position:absolute;inset:0 0 auto 0;opacity:0;transform:translateY(24px);transition:opacity .5s,transform .6s var(--ease-out);pointer-events:none}
.pst.on{opacity:1;transform:none;pointer-events:auto}
.pst h3{font-family:'Josefin Sans',sans-serif;font-weight:300;font-size:clamp(30px,2.8vw,44px);color:var(--negru);line-height:1.1;margin-bottom:16px}
.pst p{max-width:24em}
.play{display:inline-flex;align-items:center;gap:10px;align-self:start;background:none;border:1px solid var(--negru);color:var(--negru);min-height:44px;padding:0 18px 0 14px;font-family:'Josefin Sans',sans-serif;font-size:15px;cursor:pointer;grid-column:1 / -1;width:fit-content}
.play svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.play .i-play{display:none}
.play[aria-pressed="true"] .i-play{display:block}
.play[aria-pressed="true"] .i-pause{display:none}
.play:hover{background:var(--negru);color:#fff}
.pdraw{position:relative;height:calc(100svh - var(--hdr) - 120px);max-height:760px;display:flex;flex-direction:column;justify-content:center}
.pdw{width:100%;height:100%;max-height:100%;display:block;overflow:hidden}
.sk path{fill:none;stroke:#7a7a82;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.st{fill:none;stroke:var(--rosu);stroke-width:4}
.st.thin{stroke-width:1.6}
.sttx{font-family:'Josefin Sans',sans-serif;font-size:13.5px;letter-spacing:1.5px;fill:var(--rosu)}
.sttx.big{font-size:26px;letter-spacing:2px;font-weight:600}
.pcap{position:absolute;right:0;bottom:0;font-style:italic;font-size:15px;color:var(--piatra);opacity:0;transition:opacity .6s}
.pcap.on{opacity:1}

/* =========================== 3. Acasă =========================== */
/* imaginea mare */
.pg-hero{min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;padding-bottom:clamp(48px,8vh,96px);background:#000;color:#fff}
.hero-img{position:absolute;inset:0;clip-path:polygon(0 0,0 0,-45% 100%,-45% 100%);transition:clip-path 1.6s var(--ease-io)}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:47% 60%;transform:scale(1.08);transition:transform 2.6s var(--ease-out)}
.hero-img::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.35) 45%,rgba(0,0,0,0) 70%),linear-gradient(0deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,0) 45%);pointer-events:none}
.pg-hero.active .hero-img{clip-path:polygon(0 0,145% 0,100% 100%,-45% 100%)}
.pg-hero.active .hero-img img{transform:none}
.hero-dg{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.hero-dg path{fill:none;stroke:var(--rosu);stroke-width:3;vector-effect:non-scaling-stroke;stroke-dasharray:200;stroke-dashoffset:200;transition:stroke-dashoffset 1.8s var(--ease-io) .9s}
.pg-hero.active .hero-dg path{stroke-dashoffset:0}
.hero-in{position:relative;z-index:3}
.hero-in h1{font-size:clamp(52px,8.4vw,150px);color:#fff;margin:18px 0 22px}
.hero-in p{font-size:clamp(18px,1.5vw,22px);max-width:30em;color:#f1f1f3}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px 40px;margin-top:30px}
.link.light{color:#fff}
.win4{display:grid;grid-template-columns:repeat(2,22px);gap:6px}
.win4 i{display:block;width:22px;height:22px;background:#fff;transform:scale(0);transition:transform .6s cubic-bezier(.3,1.5,.5,1)}
.win4 i:nth-child(1){transition-delay:.5s}
.win4 i:nth-child(2){background:var(--rosu);transition-delay:.9s}
.win4 i:nth-child(3){transition-delay:.6s}
.win4 i:nth-child(4){transition-delay:.7s}
.pg-hero.active .win4 i{transform:none}
.hero-cap{position:absolute;z-index:3;right:clamp(20px,6vw,96px);bottom:clamp(20px,4vh,40px);font-style:italic;font-size:15px;color:#e6e6e9;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.pg-hero .wmk{bottom:auto;top:calc(var(--hdr) + 16px)}

/* fondatorul, pe scurt */
.intro-in{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:end}
.intro-in h2{grid-column:1 / span 7;font-size:clamp(32px,3.8vw,60px);line-height:1.1}
.intro-in .txt{grid-column:9 / span 4;display:flex;flex-direction:column;gap:18px}
.intro-in .txt.frm{margin-right:calc(clamp(22px,2.6vw,38px) * -1)}
.founder{display:flex;align-items:center;gap:16px}
.founder .av{flex:none;width:72px;height:72px;border-radius:50%;overflow:hidden;position:relative}
.founder .av img{width:280%;height:auto;max-width:none;position:absolute;left:-121%;top:-54%}
.founder .av .wmk{display:none}
.founder strong{display:block;font-family:'Josefin Sans',sans-serif;font-weight:400;font-size:20px;color:var(--negru)}
.founder span{font-style:italic;font-size:15px;color:var(--piatra)}

/* proiecte recente */
.pg-teaser{background:#000;color:#e6e6e9}
.teaser-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,56px)}
.teaser-head h2{font-size:clamp(40px,4.6vw,76px);color:#fff}
.teaser{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:clamp(16px,2vw,32px);align-items:start}
.teaser li:nth-child(2){margin-top:clamp(40px,8vw,120px)}
.teaser li:nth-child(3){margin-top:clamp(20px,4vw,60px)}
.teaser a{display:block;text-decoration:none;color:#e6e6e9}
.teaser .ph{aspect-ratio:4/5;overflow:hidden}
.teaser li:first-child .ph{aspect-ratio:4/4.4}
.teaser .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.teaser a:hover .ph img{transform:scale(1.05)}
.teaser .ph::after{content:'';position:absolute;left:0;right:0;bottom:0;height:4px;z-index:4;background:var(--rosu);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease-io)}
.teaser a:hover .ph::after,.teaser a:focus-visible .ph::after{transform:scaleX(1)}
.teaser h3{font-family:'Josefin Sans',sans-serif;font-weight:300;font-size:clamp(22px,2vw,30px);color:#fff;margin-top:16px;line-height:1.15}
.teaser .cap{color:#b9b9c0}

/* ce facem */
.band-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px;flex-wrap:wrap}
.band-head h2{font-size:clamp(36px,4vw,64px)}
.svc-band{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--negru);border-bottom:1px solid var(--negru)}
.svc-band a{position:relative;display:flex;align-items:center;gap:20px;padding:clamp(24px,3vw,40px) clamp(12px,2vw,28px);text-decoration:none;color:var(--negru);overflow:hidden;min-height:44px;isolation:isolate}
.svc-band a + a{border-left:1px solid var(--negru)}
.svc-band a::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--negru);clip-path:polygon(0 0,0 0,-60% 100%,-60% 100%);transition:clip-path .7s var(--ease-io)}
.svc-band a:hover,.svc-band a:focus-visible{color:#fff}
.svc-band a:hover::before,.svc-band a:focus-visible::before{clip-path:polygon(0 0,160% 0,100% 100%,-60% 100%)}
.svc-band svg{flex:none;width:96px;height:auto;overflow:visible}
.svc-band svg .k{stroke:currentColor;transition:stroke .4s}
.svc-band svg .k.r{stroke:var(--rosu)}
.svc-band strong{display:block;font-family:'Josefin Sans',sans-serif;font-weight:300;font-size:clamp(24px,2.2vw,34px);line-height:1.1}
.svc-band span{font-size:15px}

/* =========================== 4. Despre =========================== */
/* povestea */
.about-lines{position:absolute;right:-4vw;top:50%;transform:translateY(-50%);height:88%;width:auto;opacity:.16;pointer-events:none}
.about-lines path{fill:none;stroke:var(--negru);stroke-width:2;vector-effect:non-scaling-stroke;transition:stroke-dashoffset 2.4s cubic-bezier(.6,0,.2,1);transition-delay:calc(var(--i,0) * 160ms)}
.about-lines path.r{stroke:var(--rosu)}
.page-sub .about-lines{left:max(var(--gut),calc((100vw - var(--max)) / 2 + var(--gut)));right:auto;top:auto;bottom:8%;transform:none;height:56%;opacity:.1}
.about-in{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.page-sub .about-in{z-index:1}
.about-in h2{grid-column:1 / span 10;font-size:clamp(30px,3.7vw,60px);line-height:1.12}
.about-txt{grid-column:6 / span 6;margin-top:clamp(28px,5vh,56px);display:flex;flex-direction:column;gap:20px;font-size:clamp(17px,1.3vw,19px)}
.about-txt.frm{margin-right:calc(clamp(22px,2.6vw,38px) * -1)}

/* echipa: fotografia cu etichete trasate */
.team-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,96px);align-items:center}
.team-txt{display:flex;flex-direction:column;gap:18px}
.team-txt.frm{padding-top:clamp(30px,3vw,44px)}
.team-txt h2{font-size:clamp(44px,5vw,84px);margin-bottom:6px}
.bio h3{font-family:'Josefin Sans',sans-serif;font-weight:400;font-size:24px;color:var(--negru);margin-bottom:4px}
.bio p{font-size:16px}
.team-ph{position:relative;margin:0 auto;max-width:980px}
.team-ph img{width:100%;height:auto;filter:grayscale(1) contrast(1.05)}
.pg-team .team-ph{margin:0;max-width:none;height:min(78svh,820px);aspect-ratio:1390/1600;justify-self:center;position:relative}
.page-sub .pg-team .team-ph{height:min(80svh,820px)}
.pg-team .team-ph .prot,.pg-team .team-ph img{width:100%;height:100%}
.team-ann{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.team-ann .ln{fill:none;stroke:var(--negru);stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:1200;stroke-dashoffset:1200;transition:stroke-dashoffset 1.6s cubic-bezier(.6,0,.2,1) 1.2s}
.pg-team.active .team-ann .ln{stroke-dashoffset:0}
.team-ann .dot{fill:var(--rosu);transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .5s var(--ease-pop) 1s}
.pg-team.active .team-ann .dot{transform:none}
.tag{position:absolute;display:flex;flex-direction:column;gap:2px;color:#111;opacity:0;transform:translateY(10px);transition:opacity .6s,transform .6s}
.tag.in,.pg-team.active .tag{opacity:1;transform:none}
.pg-team .tag{transition-delay:2s}
.tag strong{font-family:'Josefin Sans',sans-serif;font-weight:400;font-size:clamp(18px,2.2vw,30px);line-height:1.1;color:var(--negru)}
.tag span{font-style:italic;font-size:clamp(13px,1.2vw,16px);color:var(--piatra)}
.tag-l{left:3%;bottom:calc(73.125% + 10px)}
.tag-r{right:2%;bottom:calc(70.625% + 10px);text-align:right}

/* materiale */
.pg-mat{background:var(--beton)}
.mat-in{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:center;height:min(80svh,820px)}
.mat-frame{position:absolute;left:calc(var(--gut) + (100% - 2 * var(--gut)) * 2.5 / 12);right:calc(var(--gut) + (100% - 2 * var(--gut)) * .5 / 12);top:12%;bottom:4%;width:auto;height:auto;overflow:visible;pointer-events:none}
.mat-frame path{fill:none;stroke:var(--negru);stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset 2s cubic-bezier(.6,0,.2,1) .4s}
.pg-mat.active .mat-frame path{stroke-dashoffset:0}
.ma{grid-column:1 / span 4;margin:0;position:relative;z-index:1;align-self:start}
.mb{grid-column:10 / span 3;margin:0;position:relative;z-index:1;align-self:end}
.ma .prot,.mb .prot{aspect-ratio:4/5;max-height:62svh}
.ma img,.mb img{width:100%;height:100%;object-fit:cover}
.ma .cap,.mb .cap{margin-top:10px}
.mt{grid-column:6 / span 3;position:relative;z-index:1}
.mt.frm{background:var(--beton)}
.mt h2{font-size:clamp(30px,2.8vw,46px);line-height:1.1;margin-bottom:18px}
.mt p{margin-bottom:22px}

/* =========================== 5. banda de contact =========================== */
.pg-cta{background:var(--negru);color:#e6e6e9}
.cta-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:end}
.cta-in h2{font-size:clamp(36px,4.6vw,76px);color:#fff;line-height:1.05}
.cta-in .r{display:flex;flex-direction:column;gap:28px}
.cta-in .r.frm{color:#fff}
.btn-w{display:inline-flex;align-items:center;min-height:56px;padding:0 30px;background:#fff;color:#000;text-decoration:none;font-family:'Josefin Sans',sans-serif;font-size:18px;width:fit-content;position:relative;overflow:hidden;isolation:isolate}
.btn-w::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--rosu);clip-path:polygon(0 0,0 0,-60% 100%,-60% 100%);transition:clip-path .6s var(--ease-io)}
.btn-w:hover,.btn-w:focus-visible{color:#fff}
.btn-w:hover::before,.btn-w:focus-visible::before{clip-path:polygon(0 0,160% 0,100% 100%,-60% 100%)}

/* =========================== 6. telefon (max 900px) =========================== */
@media (max-width:900px){
  .pg{display:block;padding:72px 0}
  /* planșa */
  .pgrid{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);align-items:stretch;gap:8px;min-height:0}
  .pdraw{order:-1;height:auto;min-height:0}
  .pdw{height:auto}
  .pcap{display:none}
  .ptxt{grid-template-columns:1fr;row-gap:12px;align-self:start}
  .ptxt h2{font-size:40px;order:-1}
  .ruler{flex-direction:row;height:auto;padding:14px 0 0;gap:4px;justify-content:space-between}
  .ruler::before,.ruler::after{left:0;right:0;top:0;bottom:auto;width:auto;height:2px}
  .ruler::after{height:3px;transform-origin:0 50%;transform:scaleX(var(--rp,0))}
  .ruler button{font-size:0;min-height:32px;min-width:44px;flex:1}
  .ruler button::before{left:50%;top:0;width:1px;height:12px;transform:translateX(-50%)}
  .ruler button.on::before{width:2px;height:16px}
  .pst h3{font-size:28px;margin-bottom:8px}
  .pst p{font-size:16px}
  .pstages{min-height:150px}
  /* Acasă */
  .pg-hero{padding:calc(var(--hdr) + 32px) 0 56px;display:flex;align-items:flex-end}
  .hero-img::before{background:linear-gradient(0deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.4) 55%,rgba(0,0,0,.1) 100%)}
  .hero-cap{display:none}
  .intro-in h2,.intro-in .txt{grid-column:1 / -1}
  .teaser{grid-template-columns:1fr;gap:44px}
  .teaser li:nth-child(n){margin-top:0}
  .svc-band{grid-template-columns:1fr}
  .svc-band a + a{border-left:0;border-top:1px solid var(--negru)}
  /* Despre */
  .about-lines{height:60%;top:auto;bottom:0;transform:none;right:-20vw}
  .page-sub .about-lines{display:none}
  .about-in h2,.about-txt{grid-column:1 / -1}
  .team-in{grid-template-columns:1fr}
  .team-ph{margin:0 calc(var(--gut) * -1)}
  .pg-team .team-ph{height:auto;width:calc(100% + 2 * var(--gut));margin:0 calc(var(--gut) * -1)}
  .tag-r{right:3%}
  .mat-in{height:auto;display:flex;flex-direction:column;gap:28px;align-items:stretch}
  .mat-frame{display:none}
  .ma .prot,.mb .prot{max-height:none}
  .mb{width:70%;align-self:flex-end}
  .cta-in{grid-template-columns:1fr}
}

/* =========================== 7. mișcare redusă: starea finală, fără animații =========================== */
@media (prefers-reduced-motion:reduce){
  .rv,.rvi,.disp .ln > span,.hero-img,.hero-img img,.win4 i{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .hero-dg path,.mat-frame path,.team-ann .ln{stroke-dashoffset:0!important;transition:none!important}
  .team-ann .dot{transform:none!important}
  .pg-team .tag{opacity:1;transform:none}
}