/* =============================================================================
   ECO-UI · lightbox das fotos + cursor da marca com eco-pulse
   Sérgio, 20/07/2026. Padrão herdado da LP da Vanusa, recolorido para a ECOCASA
   e com o pulso de água que é a assinatura da marca.
   ============================================================================= */

/* ---------- 1) LIGHTBOX ------------------------------------------------------
   Fundo verde-profundo em vez de preto: preto puro atrás de uma foto de obra
   verde/terrosa cria uma borda dura; o #082A1E da marca assenta na foto. */
.ecolb{
  position:fixed;inset:0;z-index:1200;display:grid;place-items:center;
  padding:clamp(16px,3vw,40px);
  background:rgba(8,42,30,.94);backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity .32s var(--ease,ease);
}
.ecolb.on{opacity:1;pointer-events:auto}
.ecolb__fig{margin:0;display:grid;place-items:center;gap:14px;max-width:100%}
.ecolb img{
  max-width:min(1400px,94vw);max-height:82vh;width:auto;height:auto;
  border-radius:14px;border-bottom:4px solid var(--lima-soft,#A9CF5B);
  box-shadow:0 40px 110px rgba(0,0,0,.6);
  transform:scale(.95);transition:transform .42s cubic-bezier(.16,1,.3,1);
  background:#0F4C37;
}
.ecolb.on img{transform:scale(1)}
.ecolb__cap{
  color:#DCEBDD;font-size:13.5px;line-height:1.5;text-align:center;
  max-width:min(70ch,90vw);font-family:'Poppins',sans-serif;font-weight:300;
}
.ecolb__cap b{color:var(--lima-soft,#A9CF5B);font-weight:600;margin-right:8px}

.ecolb__x,.ecolb__nav{
  position:absolute;z-index:2;
  background:rgba(11,61,44,.86);color:var(--lima-soft,#A9CF5B);
  border:1px solid rgba(169,207,91,.45);border-radius:50%;
  width:48px;height:48px;display:grid;place-items:center;cursor:pointer;
  transition:background .25s ease,color .25s ease,transform .25s ease;
}
.ecolb__x:hover,.ecolb__nav:hover{
  background:var(--lima-soft,#A9CF5B);color:var(--verde,#0B3D2C);transform:scale(1.08)}
.ecolb__x:focus-visible,.ecolb__nav:focus-visible{
  outline:3px solid var(--lima-soft,#A9CF5B);outline-offset:3px}
.ecolb__x{top:clamp(12px,2vw,22px);right:clamp(12px,2vw,22px)}
.ecolb__nav.prev{left:clamp(8px,2vw,22px);top:50%;margin-top:-24px}
.ecolb__nav.next{right:clamp(8px,2vw,22px);top:50%;margin-top:-24px}
.ecolb__nav[hidden]{display:none}
/* contador só aparece quando o grupo tem mais de uma foto */
.ecolb__n{
  position:absolute;top:clamp(12px,2vw,22px);left:clamp(12px,2vw,22px);
  color:#9FBCA6;font-size:12px;letter-spacing:.12em;font-family:'Montserrat',sans-serif;
  font-weight:700;background:rgba(11,61,44,.7);padding:8px 14px;border-radius:999px;
  border:1px solid rgba(169,207,91,.25);
}

/* Afordância: sem isso ninguém descobre que a foto abre. Só entra via JS
   (classe .ecozoom), então foto que o JS julgou pequena demais não ganha lupa. */
.ecozoom{cursor:zoom-in;position:relative}
.ecozoom-wrap{position:relative;display:block;overflow:hidden}
.ecozoom-wrap::after{
  content:"";position:absolute;right:12px;bottom:12px;width:38px;height:38px;
  border-radius:50%;background:rgba(11,61,44,.72) no-repeat center/18px 18px;
  border:1px solid rgba(169,207,91,.5);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9CF5B' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5M11 8v6M8 11h6'/%3E%3C/svg%3E");
  opacity:0;transform:translateY(6px) scale(.9);
  transition:opacity .3s var(--ease,ease),transform .3s var(--ease,ease);
  pointer-events:none;z-index:3;
}
.ecozoom-wrap:hover::after,.ecozoom-wrap:focus-within::after{opacity:1;transform:none}

@media(max-width:767px){
  .ecolb__nav{width:42px;height:42px}
  .ecolb img{max-height:70vh}
  .ecozoom-wrap::after{opacity:1;transform:none;width:32px;height:32px} /* sem hover no toque */
}

/* ---------- 2) CURSOR DA MARCA + ECO-PULSE -----------------------------------
   Ponto lima que acompanha na hora + anel que segue com atraso (lerp). O atraso
   é o que dá sensação de peso; dois círculos colados parecem um bug.

   TRAVA DE SEGURANÇA EM DUAS CAMADAS (lição que já custou caro na LP da Vanusa:
   o cursor custom apareceu no celular do Sérgio). `(hover:hover) and
   (pointer:fine)` NÃO basta — vários Android e tablets reportam hover:hover.
   Aqui o CSS esconde por padrão e só libera em tela grande; o JS ainda exige
   ausência de touch. Se uma das duas falhar, a outra segura. */
.eco-cur,.eco-ring,.eco-pulse{display:none}
.eco-cur-on{cursor:none}
.eco-cur-on a,.eco-cur-on button,.eco-cur-on [role="button"],
.eco-cur-on .ecozoom,.eco-cur-on summary{cursor:none}

@media (hover:hover) and (pointer:fine) and (min-width:1024px){
  .eco-cur,.eco-ring{display:block}

  .eco-cur{
    position:fixed;top:0;left:0;z-index:1300;pointer-events:none;
    width:7px;height:7px;border-radius:50%;
    background:var(--lima-soft,#A9CF5B);
    box-shadow:0 0 10px rgba(169,207,91,.7);
    transform:translate(-50%,-50%);will-change:transform;
  }
  .eco-ring{
    position:fixed;top:0;left:0;z-index:1299;pointer-events:none;
    width:32px;height:32px;border-radius:50%;
    border:1.5px solid rgba(169,207,91,.6);
    transform:translate(-50%,-50%);will-change:transform;
    transition:width .3s var(--ease,ease),height .3s var(--ease,ease),
               background .3s ease,border-color .3s ease,opacity .25s ease;
  }
  /* sobre algo clicável: cresce, ganha fundo e respira devagar (o "eco" parado) */
  .eco-ring.hot{
    width:56px;height:56px;
    background:rgba(169,207,91,.13);
    border-color:var(--lima-soft,#A9CF5B);
    animation:ecoRespira 2.6s ease-in-out infinite;
  }
  .eco-ring.click{width:24px;height:24px;background:rgba(169,207,91,.22)}
  .eco-cur.hide,.eco-ring.hide{opacity:0}

  /* ECO-PULSE: a onda que sai do clique. Duas ondas defasadas — a segunda é o
     "eco" da primeira, que é a leitura de gota caindo na água (e água é
     literalmente o produto da casa). Elemento descartável: o JS cria, a
     animação roda uma vez e o próprio elemento se remove no animationend. */
  .eco-pulse{
    display:block;position:fixed;top:0;left:0;z-index:1298;pointer-events:none;
    width:18px;height:18px;border-radius:50%;
    border:1.5px solid rgba(169,207,91,.75);
    transform:translate(-50%,-50%) scale(.4);
    animation:ecoPulse .95s cubic-bezier(.22,.61,.36,1) forwards;
  }
  .eco-pulse.eco2{
    border-color:rgba(114,159,40,.5);
    animation-delay:.13s;animation-duration:1.05s;
  }
}

@keyframes ecoPulse{
  0%  {transform:translate(-50%,-50%) scale(.4); opacity:.85}
  70% {opacity:.28}
  100%{transform:translate(-50%,-50%) scale(4.6);opacity:0}
}
@keyframes ecoRespira{
  0%,100%{box-shadow:0 0 0 0 rgba(169,207,91,.30)}
  50%    {box-shadow:0 0 0 7px rgba(169,207,91,0)}
}

/* Quem pede menos movimento não recebe cursor custom NEM eco-pulse — e o cursor
   nativo volta, senão a pessoa fica sem ponteiro nenhum. */
@media (prefers-reduced-motion:reduce){
  .eco-cur,.eco-ring,.eco-pulse{display:none!important}
  .eco-cur-on,.eco-cur-on a,.eco-cur-on button,
  .eco-cur-on [role="button"],.eco-cur-on .ecozoom{cursor:auto}
  .ecolb,.ecolb img{transition:none}
}
/* rede extra: em tela pequena o ponteiro nativo volta mesmo se .eco-cur-on ficar */
@media (max-width:1023px){
  .eco-cur-on,.eco-cur-on a,.eco-cur-on button,
  .eco-cur-on [role="button"],.eco-cur-on .ecozoom{cursor:auto}
  .ecozoom{cursor:pointer}
}