/* ==========================================================================
   Secao 07, CAMADAS (peca de destaque da home v2). Dono: agente CAMADAS.
   Cena 3D em CSS (perspective + preserve-3d) presa a rolagem por GSAP ScrollTrigger (s-layers.js).
   Estado padrao = ESTATICO: vista explodida inteira e parada, lista das seis camadas, interruptor funcionando
   (sem JS, com movimento reduzido ou se o GSAP nao carregar). O JS poe .is-live para ligar a cena presa.
   ========================================================================== */

/* propriedades registradas: o interruptor Done fast / Done right anima sem JS, e nao briga com o scrub do GSAP (que mexe em --o, x, y, z) */
@property --fo{ syntax:"<number>"; inherits:true; initial-value:1 }
@property --fz{ syntax:"<length>"; inherits:true; initial-value:0px }
@property --wet{ syntax:"<number>"; inherits:true; initial-value:0 }

.layers{
  --G:250px;               /* distancia entre camadas na vista explodida (o JS ajusta por tela) */
  --sc:.4;                 /* escala da cena no estado estatico */
  --cx:-210px; --cy:0px;    /* deslocamento da cena no estado estatico */
  --lw:1px;
  padding-block:var(--sec-y);
  overflow:clip;
}

/* ------------------------------------------------------------------ estado estatico: duas colunas */
.layers__stage{
  position:relative; width:min(var(--wrap-w),100% - 2 * var(--gutter)); margin-inline:auto;
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(28px,4vw,72px); align-items:center;
}
.layers__ui{ order:1; display:grid; gap:clamp(28px,3vw,44px); min-width:0 }
.layers__scene{
  order:2; position:relative; min-width:0; height:clamp(500px,60vw,780px); perspective:4600px; overflow:hidden; border-radius:var(--r-lg);
  contain:layout paint;
}
.layers__shade,.layers__hint,.layers__link,.layers__count,.layers__steps{ display:none }

.layers__intro .lead{ margin-top:20px; max-width:44ch }
.layers__intro .h2{ max-width:14ch }

/* ------------------------------------------------------------------ cena 3D */
.layers__cam,.layers__turn{ position:absolute; inset:0; transform-style:preserve-3d }
.layers__cam{ transform:translate3d(var(--cx),var(--cy),0) rotateX(-12deg) scale(var(--sc)) }
.layers__turn{ transform:rotateY(-48deg) }

.slab{
  position:absolute; left:50%; top:50%; width:900px; height:1200px; margin:-600px 0 0 -450px;
  transform-style:preserve-3d;
  transform:translate3d(0,0,calc(var(--m) * var(--G) * -1));
  translate:0 0 var(--fz);
  transition:--fo .4s var(--ease-out), --fz .4s var(--ease-out), --wet .4s var(--ease-out);
}
.slab__f{ position:absolute; inset:0; opacity:calc(var(--o,1) * var(--fo,1)); filter:brightness(var(--b,1)); backface-visibility:hidden; box-shadow:0 0 0 2px rgba(221,219,212,.5) }
.slab__f>img,.slab__svg{ position:absolute; inset:0; width:100%; height:100%; display:block; max-width:none; object-fit:cover; object-position:50% 50% }
.slab--photo .slab__f{ box-shadow:none }
.slab__s{ position:absolute; display:block; opacity:calc(var(--o,1) * var(--fo,1)); filter:brightness(var(--b,1)); background:var(--sc,#BDB9AC); backface-visibility:hidden }
.slab__s--r{ right:0; top:0; width:var(--d); height:100%; transform-origin:100% 50%; transform:rotateY(-90deg) }
.slab__s--t{ left:0; top:0; width:100%; height:var(--d); transform-origin:50% 0; transform:rotateX(-90deg); background:var(--st,#E6E4DC) }
.slab__pin{ position:absolute; left:0; top:var(--pin-y,26%); width:2px; height:2px; display:block }
.slab__pin--b{ top:100% }
.slab--grout .slab__f,.slab--framing .slab__f{ box-shadow:none }
.slab--grout .slab__s,.slab--framing .slab__s--t{ background:transparent }
.slab--grout .slab__s--r{ background:repeating-linear-gradient(0deg,#B9B6AA 0 135px,transparent 135px 150px) }
/* a face em destaque ganha um fio claro (a camada ativa "acende"); as outras so ficam mais fundas */
.slab.is-on .slab__f{ box-shadow:0 0 0 3px rgba(255,255,255,.9) }
.slab--grout.is-on .slab__f,.slab--framing.is-on .slab__f{ box-shadow:none }

/* mancha de agua no madeiramento: so aparece em Done fast */
.slab__stain{ opacity:var(--wet,0) }

/* ------------------------------------------------------------------ painel: lista das seis camadas */
.layers__panel{ display:grid; gap:clamp(24px,2.4vw,34px) }
.layers__list{ display:grid; gap:0; border-top:1px solid rgba(143,142,135,.35) }
.layers__item{
  display:grid; grid-template-columns:62px minmax(0,1fr); column-gap:14px; align-items:baseline; padding:15px 0 16px; border-bottom:1px solid rgba(143,142,135,.35);
}
.layers__n{ grid-row:1 / span 4; font-size:13px; font-weight:600; letter-spacing:.1em; color:var(--pedra); font-variant-numeric:tabular-nums }
.layers__n i{ display:none; font-style:normal }
.layers__name{ font-size:clamp(21px,1.9vw,26px); font-weight:600; letter-spacing:-.04em; line-height:1.15 }
.layers__what{ color:var(--pedra); font-size:16.5px; line-height:1.45 }
.layers__why{ margin-top:4px; font-size:15px; color:var(--pedra); line-height:1.45 }
.layers__flag{
  display:inline-flex; align-items:center; gap:7px; justify-self:start; margin-top:9px; padding:5px 12px 5px 9px; border-radius:var(--r-pill);
  border:1px solid rgba(143,142,135,.6); font-size:12.5px; font-weight:500; color:var(--pedra); letter-spacing:.01em;
}
.layers__flag .i{ width:13px; height:13px }

/* ------------------------------------------------------------------ interruptor Done fast / Done right (radio nativo: funciona sem JS) */
.layers__final{ min-width:0; margin:0; padding:0; border:0; display:grid; gap:20px }
.layers__legend{ padding:0; margin-bottom:12px; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--pedra) }
.layers__switch{
  position:relative; display:grid; grid-template-columns:1fr 1fr; width:min(100%,420px); padding:5px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
.layers__radio{ position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none }
.layers__thumb{
  position:absolute; z-index:0; left:5px; top:5px; bottom:5px; width:calc(50% - 5px); border-radius:var(--r-pill); background:#fff;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.6); transform:translateX(100%); transition:transform .4s var(--ease-out), background-color .4s;
}
.layers__opt{
  position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:8px; min-height:52px; padding:0 14px; border-radius:var(--r-pill);
  font-size:15.5px; font-weight:600; letter-spacing:-.01em; color:#fff; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent;
  transition:color .4s;
}
.layers__opt .i{ width:17px; height:17px }
#lay-right:checked ~ .layers__opt--right,#lay-fast:checked ~ .layers__opt--fast{ color:var(--grafite) }
#lay-fast:checked ~ .layers__thumb{ transform:none; background:var(--pedra) }
#lay-fast:focus-visible ~ .layers__opt--fast,#lay-right:focus-visible ~ .layers__opt--right{ outline:2px solid #fff; outline-offset:2px }

.layers__verdict{ display:grid; gap:12px; min-height:0 }
.layers__bul{ display:grid; gap:7px; font-size:16px; line-height:1.4; color:var(--pedra) }
.layers__bul li{ position:relative; padding-left:20px }
.layers__bul li::before{ content:""; position:absolute; left:0; top:.62em; width:8px; height:8px; border-radius:50%; background:var(--rejunte) }
.layers__bul--right,.layers__bul--fast,.layers__warn{ display:none }
.layers__note{ font-size:13px; color:var(--pedra); opacity:.8 }
.layers__warn{
  align-items:center; gap:9px; justify-self:start; padding:9px 16px 9px 12px; border-radius:var(--r-pill); background:var(--pedra); color:var(--grafite); font-size:15px; font-weight:600;
}
.layers__warn .i{ width:16px; height:16px }
.layers__cta{ justify-self:start }

.layers:has(#lay-right:checked) .layers__bul--right{ display:grid }
.layers:has(#lay-fast:checked) .layers__bul--fast{ display:grid }
.layers:has(#lay-fast:checked) .layers__warn{ display:inline-flex; animation:layWarn .5s var(--ease-out) both }
@keyframes layWarn{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
/* Done fast: a membrana e a placa cimenticia somem, o madeiramento chega mais perto e a agua mancha */
.layers:has(#lay-fast:checked){ --fastmode:1 }
.layers:has(#lay-fast:checked) .slab--skip{ --fo:0 }
.layers:has(#lay-fast:checked) .slab--framing{ --fz:calc(var(--G) * 2); --wet:1 }
.layers:has(#lay-fast:checked) .slab--thinset{ --wet:0 }

/* sem :has (navegador muito antigo) o estado "right" continua correto: nada some, a lista de Done right aparece */
@supports not selector(:has(*)){ .layers__bul--right{ display:grid } }

/* ------------------------------------------------------------------ tela menor, estado estatico */
@media (max-width:899px){
  .layers__stage{ grid-template-columns:minmax(0,1fr); gap:28px }
  .layers__scene{ order:0; height:clamp(420px,112vw,560px) }
  .layers__ui{ order:1 }
  .layers__intro .h2{ max-width:none }
  .layers{ --sc:.22; --cx:-96px; --G:200px }
}

/* ==========================================================================
   MODO AO VIVO: cena presa na tela (so existe quando o JS pos .is-live)
   ========================================================================== */
.layers.is-live{ padding-block:0; overflow:visible; background:var(--profundo) }
.layers.is-live .layers__stage{
  display:block; width:auto; margin:0; height:100vh; overflow:hidden; background:var(--profundo);
}
.layers.is-live .layers__scene{
  position:absolute; inset:0; height:auto; border-radius:0; perspective:5200px; contain:none; overflow:hidden; background:var(--profundo);
}
.layers.is-live .layers__cam{ transform:none; will-change:transform }
.layers.is-live .layers__turn{ transform:none; will-change:transform }
.layers.is-live .slab{ transform:none; will-change:transform }
.layers.is-live .layers__shade{
  display:block; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(0deg,rgba(28,28,27,.9) 0,rgba(28,28,27,.55) 34%,rgba(28,28,27,0) 62%),linear-gradient(90deg,rgba(28,28,27,.62) 0,rgba(28,28,27,0) 56%),linear-gradient(180deg,rgba(28,28,27,.5) 0,rgba(28,28,27,0) 20%);
}
.layers.is-live .layers__ui{ position:absolute; inset:0; z-index:3; display:block; pointer-events:none }
.layers.is-live .layers__ui a,.layers.is-live .layers__ui button,.layers.is-live .layers__ui label{ pointer-events:auto }

/* titulo da abertura sobre a foto */
.layers.is-live .layers__intro{
  position:absolute; left:var(--edge); right:var(--gutter); bottom:clamp(40px,8vh,88px); max-width:760px; will-change:transform,opacity;
}
.layers.is-live .layers__intro .h2{ max-width:none; color:#fff }
.layers.is-live .layers__intro .lead{ color:var(--pedra); margin-top:18px; max-width:50ch }
.layers.is-live .layers__intro .kick{ color:#fff }

/* painel lateral */
.layers.is-live .layers__panel{
  position:absolute; left:var(--edge); top:calc(var(--hd-solid) + (100% - var(--hd-solid)) / 2); width:min(400px,calc(100% - 2 * var(--gutter))); transform:translateY(-50%);
  display:grid; gap:0; opacity:0; visibility:hidden; will-change:opacity;
}
.layers.is-live .layers__count{
  display:flex; align-items:baseline; gap:8px; margin-bottom:6px; font-variant-numeric:tabular-nums; color:var(--pedra); font-size:18px; font-weight:500;
}
.layers.is-live .layers__now{ font-size:clamp(76px,8.6vw,120px); font-weight:300; letter-spacing:-.06em; line-height:.9; color:#fff }
.layers.is-live .layers__steps{ display:flex; gap:6px; margin:0 0 18px -6px }
.layers.is-live .layers__list{ display:grid; border-top:0; grid-template-areas:"x"; min-height:0 }
.layers.is-live .layers__item{
  grid-area:x; grid-template-columns:minmax(0,1fr); padding:0; border:0; align-content:start; opacity:0; transform:translateY(16px); pointer-events:none;
  transition:opacity .35s, transform .6s var(--ease-out);
}
.layers.is-live .layers__item.is-on{ opacity:1; transform:none; pointer-events:auto; transition-delay:.12s }
.layers.is-live .layers__n{ display:none }
.layers.is-live .layers__name{ font-size:clamp(30px,3.1vw,44px); letter-spacing:-.05em; line-height:1.05 }
.layers.is-live .layers__what{ margin-top:10px; font-size:clamp(18px,1.45vw,21px); color:#fff }
.layers.is-live .layers__why{ margin-top:12px; font-size:16px }

/* fim da cena: interruptor, veredito e CTA tomam o lugar da lista */
.layers.is-live .layers__final{
  grid-area:auto; position:absolute; left:0; right:0; top:0; opacity:0; visibility:hidden; transform:translateY(18px);
  transition:opacity .45s, transform .7s var(--ease-out), visibility 0s .45s;
}
.layers.is-live.is-final .layers__final{ opacity:1; visibility:visible; transform:none; transition:opacity .5s .1s, transform .8s var(--ease-out) .1s, visibility 0s }
.layers.is-live.is-final .layers__list,.layers.is-live.is-final .layers__count,.layers.is-live.is-final .layers__steps{ opacity:0; visibility:hidden; transition:opacity .3s, visibility 0s .3s }
.layers.is-live .layers__list,.layers.is-live .layers__count,.layers.is-live .layers__steps{ transition:opacity .4s }
.layers.is-live .layers__switch{ width:100% }

/* botoes de passo (01 a 06), criados pelo JS */
.layers__step{
  position:relative; display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:none; color:var(--pedra);
  font-size:13px; font-weight:600; letter-spacing:.04em; font-variant-numeric:tabular-nums; transition:color .3s;
}
.layers__step::before{ content:""; position:absolute; inset:7px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(143,142,135,.55); transition:background-color .3s, box-shadow .3s, transform .4s var(--ease-out) }
.layers__step span{ position:relative }
.layers__step:hover::before{ box-shadow:inset 0 0 0 1px #fff }
.layers__step.is-on{ color:var(--grafite) }
.layers__step.is-on::before{ background:#fff; box-shadow:none; transform:scale(1.08) }
.layers__step.is-past{ color:#fff }
.layers__step.is-past::before{ background:rgba(255,255,255,.14); box-shadow:none }

/* linha que liga o rotulo a camada */
.layers.is-live .layers__link{ display:block; position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; overflow:visible; opacity:0 }
.layers__line{ fill:none; stroke:#fff; stroke-width:1.5; stroke-linecap:round; vector-effect:non-scaling-stroke }
.layers__dot{ fill:#fff; stroke:var(--profundo); stroke-width:3 }

/* dica de rolagem */
.layers.is-live .layers__hint{
  display:grid; place-items:center; position:absolute; z-index:3; left:50%; bottom:22px; width:44px; height:44px; margin-left:-22px; border-radius:50%;
  border:1px solid rgba(255,255,255,.55); color:#fff; pointer-events:none; animation:layHint 1.8s var(--ease-soft) infinite;
}
.layers__hint svg{ width:18px; height:18px }
@keyframes layHint{ 0%{ transform:translateY(0); opacity:1 } 60%{ transform:translateY(8px); opacity:.35 } 100%{ transform:translateY(0); opacity:1 } }

/* ------------------------------------------------------------------ ao vivo no celular: desenho em cima, painel embaixo */
@media (max-width:899px){
  .layers.is-live .layers__stage{ height:100vh }
  .layers.is-live .layers__intro{ bottom:clamp(96px,14vh,130px); left:var(--gutter) }
  .layers.is-live .layers__panel{
    top:auto; bottom:calc(86px + env(safe-area-inset-bottom)); left:var(--gutter); right:var(--gutter); width:auto; transform:none; padding-top:6px;
  }
  .layers.is-live .layers__count{ position:absolute; right:0; top:58px; margin:0; font-size:15px; gap:5px }
  .layers.is-live .layers__now{ font-size:26px; font-weight:600; letter-spacing:-.03em; line-height:1 }
  .layers.is-live .layers__steps{ margin:0 0 6px -6px }
  .layers.is-live .layers__name{ font-size:28px }
  .layers.is-live .layers__what{ margin-top:6px; font-size:17px }
  .layers.is-live .layers__why{ margin-top:8px; font-size:14.5px }
  .layers.is-live .layers__flag{ margin-top:8px }
  .layers.is-live .layers__final{ top:auto; bottom:0; gap:12px }
  .layers.is-live .layers__legend{ display:none }
  .layers.is-live .layers__bul{ font-size:14.5px; gap:5px }
  .layers.is-live .layers__note{ display:none }
  .layers.is-live .layers__hint{ display:none }
}
@media (max-width:899px) and (max-height:700px){ .layers.is-live .layers__bul{ display:none !important } }

/* ------------------------------------------------------------------ movimento reduzido: nada ao vivo (o JS nem liga), transicoes quase instantaneas */
@media (prefers-reduced-motion:reduce){
  .layers__hint{ animation:none }
  .slab{ transition:none }
}