/* =====================================================
   NAV + MENIU + TRANZITIE + FOOTER — brand M, stil NEO-BRUTALISM
   folosit pe toate paginile (index / galerie / contact)
   Reguli: borduri groase, umbre dure (0 blur), 0 rotunjimi,
   culori plate din paleta M, tipografie grotesk grea.
===================================================== */
:root{
  /* paleta M (plat) */
  --red:#c8102e;
  --red-deep:#9d0b22;
  --pistachio:#8bbf6b; --lemon:#f3c64b; --strawberry:#e2789b;
  --blueberry:#6f7fc4; --mango:#f29b4a; --mint:#7fcbb6;

  /* sistem neo-brutalist */
  --ink:#111111;
  --paper:#f4efe2;
  --paper-2:#fffdf6;
  --acid:#ffd400;
  --white:#ffffff;
  --cream:#f4efe2;
  --bd:3px; --bd-lg:5px;
  --sh-sm:4px 4px 0 var(--ink);
  --sh:8px 8px 0 var(--ink);
  --sh-lg:12px 12px 0 var(--ink);

  --font-title:"Bricolage Grotesque","Arial Black",system-ui,sans-serif;
  --font-body:"Space Grotesk",system-ui,sans-serif;
  --font-mono:"Space Mono",ui-monospace,monospace;
  --font-logo:"Bricolage Grotesque",system-ui,sans-serif;

  --ease:cubic-bezier(.2,.9,.3,1);
}

/* logo reutilizabil (M gros ca fallback) */
.logo-img{width:100%;height:100%;object-fit:contain;display:block}
.logo-fallback{display:none;font-family:var(--font-logo);font-weight:800;color:var(--red);line-height:1}
.no-logo .logo-img{display:none}
.no-logo .logo-fallback{display:block}

/* ---------- HEADER ---------- */
.sm-header{
  position:fixed;top:0;left:0;right:0;z-index:90;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 5vw;pointer-events:none;
}
.sm-header > *{pointer-events:auto}
.sm-logo{
  width:62px;height:62px;background:var(--white);
  border:var(--bd) solid var(--ink);box-shadow:var(--sh-sm);
  display:flex;align-items:center;justify-content:center;padding:9px;text-decoration:none;
  transition:transform .12s var(--ease), box-shadow .12s var(--ease);
}
.sm-logo:hover{transform:translate(-3px,-3px);box-shadow:var(--sh)}
.sm-logo .logo-fallback{font-size:30px}

.sm-toggle{
  display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 22px;
  border:var(--bd) solid var(--ink);box-shadow:var(--sh);background:var(--acid);color:var(--ink);
  font-family:var(--font-body);font-weight:700;font-size:15px;letter-spacing:.02em;text-transform:uppercase;
  cursor:pointer;transition:transform .12s var(--ease), box-shadow .12s var(--ease), background .2s;
}
.sm-toggle:hover{transform:translate(-3px,-3px);box-shadow:12px 12px 0 var(--ink)}
.sm-toggle:active{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--ink)}
body.sm-open .sm-toggle{background:var(--red);color:#fff}
.sm-toggle .ico{position:relative;width:18px;height:18px;flex:none}
.sm-toggle .ico i{position:absolute;left:0;top:8px;width:18px;height:3px;background:var(--ink);transition:transform .3s var(--ease), background .2s}
.sm-toggle .ico i:nth-child(2){transform:rotate(90deg)}
body.sm-open .sm-toggle .ico i{background:#fff}
body.sm-open .sm-toggle .ico i:nth-child(1){transform:rotate(45deg)}
body.sm-open .sm-toggle .ico i:nth-child(2){transform:rotate(-45deg)}

/* ---------- OVERLAY (click-away) ---------- */
.sm-overlay{
  position:fixed;inset:0;z-index:69;background:rgba(17,17,17,.55);
  opacity:0;visibility:hidden;transition:opacity .3s, visibility .3s;
}
body.sm-open .sm-overlay{opacity:1;visibility:visible}

/* ---------- PRELAYERE + PANOU ---------- */
.sm-prelayer,.sm-panel{
  position:fixed;top:0;right:0;height:100%;width:min(440px,90vw);
  transform:translateX(100%);transition:transform .5s var(--ease);
  border-left:var(--bd-lg) solid var(--ink);
}
.sm-prelayer{z-index:71}
.sm-prelayer--1{background:var(--acid);z-index:72}
.sm-prelayer--2{background:var(--red);z-index:73}
.sm-panel{
  z-index:74;background:var(--paper-2);color:var(--ink);
  display:flex;flex-direction:column;justify-content:center;gap:38px;
  padding:8vh 42px;
}
body.sm-open .sm-prelayer--1{transform:translateX(0);transition-delay:.04s}
body.sm-open .sm-prelayer--2{transform:translateX(0);transition-delay:.1s}
body.sm-open .sm-panel{transform:translateX(0);transition-delay:.17s}

.sm-kicker{
  font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);background:var(--acid);border:var(--bd) solid var(--ink);box-shadow:var(--sh-sm);
  padding:7px 11px;align-self:flex-start;
}

.sm-nav{display:flex;flex-direction:column;border-top:var(--bd) solid var(--ink)}
.sm-nav a{
  display:flex;align-items:baseline;gap:16px;text-decoration:none;color:var(--ink);
  padding:14px 10px;border-bottom:var(--bd) solid var(--ink);transition:background .2s;
}
.sm-nav a:hover{background:var(--acid)}
.sm-nav a.active{background:var(--red)}
.sm-nav a.active .t,.sm-nav a.active .n{color:#fff}
.sm-nav a .n{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--red)}
.sm-nav a .t{
  font-family:var(--font-title);font-weight:800;text-transform:uppercase;letter-spacing:-.03em;
  font-size:clamp(34px,5vw,54px);line-height:1;transition:color .2s, transform .2s var(--ease);
  display:inline-block;
}
.sm-nav a:hover .t{transform:translateX(10px)}

/* stagger la deschidere */
.sm-nav a{overflow:hidden}
.sm-nav a .t,.sm-nav a .n{will-change:transform;transform:translateY(115%);opacity:0;transition:transform .45s var(--ease),opacity .35s}
body.sm-open .sm-nav a .n,body.sm-open .sm-nav a .t{opacity:1;transform:translateY(0)}
body.sm-open .sm-nav a:nth-child(1) .t,body.sm-open .sm-nav a:nth-child(1) .n{transition-delay:.24s}
body.sm-open .sm-nav a:nth-child(2) .t,body.sm-open .sm-nav a:nth-child(2) .n{transition-delay:.3s}
body.sm-open .sm-nav a:nth-child(3) .t,body.sm-open .sm-nav a:nth-child(3) .n{transition-delay:.36s}

.sm-foot{display:flex;flex-direction:column;gap:14px}
.sm-foot .lab{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.sm-socials{display:flex;gap:12px}
.sm-socials a{
  width:48px;height:48px;border:var(--bd) solid var(--ink);box-shadow:var(--sh-sm);background:var(--white);
  display:flex;align-items:center;justify-content:center;color:var(--ink);
  transition:transform .12s var(--ease), box-shadow .12s var(--ease), background .2s;
}
.sm-socials a svg{width:20px;height:20px}
.sm-socials a:hover{background:var(--acid);transform:translate(-3px,-3px);box-shadow:var(--sh)}

/* ---------- PAGE TRANSITION (bare drepte, alternante) ---------- */
.pt{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1600;display:flex;pointer-events:none;visibility:hidden}
.pt.active{visibility:visible;pointer-events:auto}
.pt__panel{position:relative;flex:1;height:100%;background:var(--red);
  border-right:var(--bd) solid var(--ink);
  transform:translateY(-101%);
  will-change:transform;backface-visibility:hidden;
  transition:transform .42s var(--ease)}
.pt__panel:nth-child(2){background:var(--ink)}
.pt__panel:nth-child(3){background:var(--acid)}
.pt__panel:nth-child(4){background:var(--ink)}
.pt__panel:nth-child(5){background:var(--red);border-right:none}
.pt.cover .pt__panel{transform:translateY(0)}
.pt.covered .pt__panel{transform:translateY(0);transition:none}
.pt.reveal .pt__panel{transform:translateY(101%)}
.pt.cover .pt__panel:nth-child(1),.pt.reveal .pt__panel:nth-child(1){transition-delay:0s}
.pt.cover .pt__panel:nth-child(2),.pt.reveal .pt__panel:nth-child(2){transition-delay:.05s}
.pt.cover .pt__panel:nth-child(3),.pt.reveal .pt__panel:nth-child(3){transition-delay:.1s}
.pt.cover .pt__panel:nth-child(4),.pt.reveal .pt__panel:nth-child(4){transition-delay:.15s}
.pt.cover .pt__panel:nth-child(5),.pt.reveal .pt__panel:nth-child(5){transition-delay:.2s}
@media (prefers-reduced-motion:reduce){.pt{display:none!important}}

/* ---------- FOOTER pagina ---------- */
.site-foot{
  padding:26px 5vw;background:var(--ink);color:var(--acid);
  border-top:var(--bd-lg) solid var(--ink);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;align-items:center;
  font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.site-foot a{color:#fff;text-decoration:none;border-bottom:2px solid var(--red)}
.site-foot a:hover{color:var(--acid);border-bottom-color:var(--acid)}

/* =====================================================
   BUTON „SUS" + BANDA DE JOS (zero blur, doar blocuri)
===================================================== */
.btt-wrap{position:fixed;bottom:2rem;right:2rem;width:56px;height:56px;z-index:95;pointer-events:none;
  opacity:0;transform:translateY(14px);transition:opacity .25s var(--ease),transform .25s var(--ease)}
.btt-wrap.show{opacity:1;transform:none;pointer-events:auto}
/* alb, nu galben: butonul pluteste si peste sectiunea acida, unde ar disparea */
.btt-wrap .back-to-top{position:absolute;inset:0;z-index:2;width:100%;height:100%;
  border:var(--bd) solid var(--ink);box-shadow:var(--sh-sm);
  background:var(--white);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:transform .12s var(--ease), box-shadow .12s var(--ease), background .2s}
.btt-wrap .back-to-top svg{width:22px;height:22px}
.btt-wrap:hover .back-to-top{background:var(--red);color:#fff;transform:translate(-3px,-3px);box-shadow:var(--sh)}
.btt-wrap .back-to-top:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
/* particulele gooey sunt inlocuite de patratele care urca, fara filtru de blur */
.btt-goo{position:absolute;left:50%;bottom:0;width:120px;height:190px;transform:translateX(-50%);
  pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:1}
.btt-wrap.on .btt-goo{opacity:1}
.btt-bubble{position:absolute;left:50%;bottom:44px;background:var(--red);border:2px solid var(--ink);
  transform:translateX(-50%);
  animation:btt-rise var(--dur,2.4s) linear forwards;will-change:transform,opacity}
@keyframes btt-rise{
  0%{transform:translate(-50%,6px) rotate(0);opacity:0}
  16%{transform:translate(calc(-50% + var(--dx0,0px)),-2px) rotate(20deg);opacity:1}
  72%{opacity:1}
  100%{transform:translate(calc(-50% + var(--dx,0px)),-120px) rotate(140deg);opacity:0}}
.btt-wrap.paused .btt-bubble{animation-play-state:paused}

/* ---------- banda de jos: valuri BLOC (crenelaje) ---------- */
.gelato-tide{position:relative;left:0;right:0;width:100%;height:150px;margin:0 0 -72px;pointer-events:none;
  overflow:hidden;background:transparent}
.gelato-tide .tide-waves{position:absolute;left:0;bottom:0;width:100%;height:100%;display:block}
.gelato-tide .tide-goo{position:absolute;inset:0;pointer-events:none}
.tide-bubble{position:absolute;bottom:60px;background:var(--white);border:2px solid var(--ink);
  animation:tide-rise var(--dur,4.5s) linear forwards;will-change:transform,opacity}
@keyframes tide-rise{
  0%{transform:translateY(10px) rotate(0);opacity:0}
  16%{transform:translateY(0) rotate(15deg);opacity:1}
  100%{transform:translateY(calc(-1 * var(--h,120px))) rotate(160deg);opacity:0}}
/* footerul sta peste banda de jos */
.site-foot{position:relative;z-index:4;margin-top:0}
@media (max-width:768px){.btt-wrap{bottom:1.2rem;right:1.2rem}}
@media (prefers-reduced-motion:reduce){.gelato-tide .tide-goo{display:none}.btt-goo{display:none}}

/* =====================================================
   FOOTER MARTEZZI — identic pe toate paginile
   3 coloane (Brand / Contact / Legal) + bara de jos
===================================================== */
.mz-footer{position:relative;z-index:4;margin-top:0;
  background:var(--ink);color:var(--white);
  border-top:var(--bd-lg) solid var(--ink);padding:56px 5vw 0}
.mz-footer__cols{max-width:1200px;margin:0 auto;display:grid;
  grid-template-columns:1.3fr 1fr 1fr;gap:44px;align-items:start}
.mz-foot-col h4{font-family:var(--font-mono);font-size:12px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--acid);
  margin-bottom:16px;padding-bottom:8px;border-bottom:2px solid rgba(255,255,255,.18)}
.mz-foot-col p{font-family:var(--font-body);font-weight:500;font-size:15px;
  line-height:1.5;margin:0 0 10px;color:rgba(255,255,255,.85)}
.mz-foot-col ul{list-style:none;margin:6px 0 0;padding:0}
.mz-foot-col li{margin:0 0 8px}
.mz-footer a{color:#fff;font-weight:700;text-decoration:none;
  border-bottom:2px solid var(--red);
  transition:color .2s var(--ease), border-color .2s var(--ease)}
.mz-footer a:hover{color:var(--acid);border-bottom-color:var(--acid)}
.mz-foot-logo{display:inline-block;font-family:var(--font-title);font-weight:800;
  font-size:clamp(34px,4.5vw,46px);letter-spacing:-.03em;color:var(--acid);
  line-height:1;margin-bottom:14px}
.mz-foot-brand p{color:rgba(255,255,255,.9);font-weight:600}
.mz-footer__bottom{max-width:1200px;margin:44px auto 0;padding:20px 0;
  border-top:2px solid rgba(255,255,255,.18);
  font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(255,255,255,.7)}
@media (max-width:820px){
  .mz-footer{padding:40px 6vw 0}
  .mz-footer__cols{grid-template-columns:1fr;gap:34px}
  .mz-footer__bottom{margin-top:34px}
}