/* Seção 04 · Cadeira — tratamentos (prefixo tr-) */
.tr-secao{
  --tr-f0:min(44vw,600px);
  --tr-sobra:clamp(0px,(100vw - var(--largura) - 2*var(--margem))/2,70px);
  --tr-fw:calc(var(--tr-f0) + var(--tr-sobra));
  --tr-col:calc(100% - var(--tr-f0) + var(--margem) + 36px);
  --tr-painel:calc(var(--tr-fw)*1.72*.79 - var(--respiro));
  --tr-fh:min(124vw,660px);
  padding-block:var(--respiro);
}

/* parede de nogueira: a mesma do hero, com a luz vindo do lado da cadeira */
.tr-parede{position:absolute;inset:0;z-index:-3;
  background:
    linear-gradient(180deg, rgb(34 19 10 / .6) 0, rgb(34 19 10 / 0) 120px),
    radial-gradient(ellipse 55% 46% at 78% 22% in oklab, #7c5029 0%, rgb(124 80 41 / 0) 72%),
    radial-gradient(ellipse 46% 40% at 14% 6% in oklab, #644027 0%, rgb(100 64 39 / 0) 70%),
    linear-gradient(90deg, rgb(46 27 15 / .34) 0, rgb(46 27 15 / .2) 48%, rgb(46 27 15 / 0) 70%),
    radial-gradient(ellipse 70% 46% at 6% 100% in oklab, #2b1707 0%, rgb(43 23 7 / 0) 72%),
    radial-gradient(ellipse 60% 40% at 82% 100% in oklab, #341d04 0%, rgb(52 29 4 / 0) 70%),
    linear-gradient(180deg in oklab, #553521 0%, #43281a 50%, #341f12 100%)}
.tr-parede::after{content:"";position:absolute;inset:0;mix-blend-mode:screen;
  background:radial-gradient(ellipse 62% 420px at 74% 0 in oklab, rgb(255 206 140 / .2) 0%, rgb(255 206 140 / 0) 100%);
  animation:tr-luz 26s ease-in-out infinite alternate}
@keyframes tr-luz{from{opacity:.5}to{opacity:1}}
.tr-veio{position:absolute;inset:0;z-index:-2;width:100%;height:100%;mix-blend-mode:multiply;opacity:.42;pointer-events:none}
.tr-veio--luz{mix-blend-mode:screen;opacity:.10}

.tr-palco{position:relative}

/* a foto real da cadeira, dissolvendo na madeira */
.tr-foto{position:absolute;z-index:-1;pointer-events:none;
  left:calc(-1*var(--margem));right:calc(-1*var(--margem));top:calc(-1*var(--respiro));height:var(--tr-fh)}
.tr-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 58%;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 52%,rgb(0 0 0 / .55) 66%,rgb(0 0 0 / .16) 80%,transparent 92%);
  mask-image:linear-gradient(to bottom,#000 0,#000 52%,rgb(0 0 0 / .55) 66%,rgb(0 0 0 / .16) 80%,transparent 92%)}
.tr-sombra{position:absolute;z-index:-1;pointer-events:none;left:calc(-1*var(--margem));right:calc(-1*var(--margem));top:calc(-1*var(--respiro));height:calc(var(--tr-fh) + 120px);
  background:linear-gradient(180deg, rgb(34 19 10 / .55) 0, rgb(34 19 10 / 0) 90px),
    linear-gradient(0deg, rgb(58 35 21 / 0) 0, rgb(58 35 21 / .78) 22%, rgb(58 35 21 / .6) 34%, rgb(58 35 21 / 0) 58%)}

/* cabeçalho */
.tr-cabeca{padding-top:calc(var(--tr-fh) - var(--respiro) - 118px)}
.tr-titulo{margin-top:16px;font-size:clamp(37px,10.6vw,58px)}
.tr-titulo i{padding-right:.04em}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .tr-titulo{background:linear-gradient(178deg,#f3e2b8 6%,#dcbb7b 38%,#c9a35c 62%,#b48c4a 96%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
    filter:drop-shadow(0 1.5px .5px rgb(24 12 3 / .75)) drop-shadow(0 5px 8px rgb(24 12 3 / .35));padding-bottom:.2em;margin-bottom:-.2em}
}
.tr-apoio{margin-top:16px;color:var(--gelo);max-width:26em}

/* a lista: letras de latão sobre a nogueira */
.tr-lista{list-style:none;margin-top:clamp(34px,5vw,56px);border-top:1px solid rgb(201 163 92 / .28)}
.tr-item{position:relative;border-bottom:1px solid rgb(201 163 92 / .28)}
.tr-item::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,#fff4dc,#ffe9c2 40%,rgb(255 232 190 / 0) 92%);box-shadow:0 0 10px 1px rgb(255 214 150 / .45);
  transform:scaleX(0);transform-origin:left center;opacity:0;transition:transform .9s var(--ease),opacity .5s}
.tr-h{font:inherit}
.tr-linha{display:grid;grid-template-columns:34px minmax(0,1fr) 22px;align-items:baseline;column-gap:10px;width:100%;padding:15px 0 13px;
  background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tr-num{font-family:var(--f-titulo);font-style:italic;font-weight:300;font-size:17px;letter-spacing:.04em;color:var(--latao-claro);transition:opacity .5s var(--ease)}
.tr-linha:focus-visible{outline-offset:2px;border-radius:2px}
.tr-nome{font-family:var(--f-titulo);font-weight:300;font-size:clamp(27px,7.6vw,42px);line-height:1.08;letter-spacing:.008em;color:#d9ba7c;text-wrap:balance;transition:opacity .5s var(--ease)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .tr-nome{background:linear-gradient(178deg,#f3e2b8 6%,#dcbb7b 40%,#c9a35c 66%,#b48c4a 98%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding-bottom:.12em;margin-bottom:-.12em}
}
.tr-sinal{display:none;position:relative;width:15px;height:15px;align-self:center;justify-self:end}
.tr-sinal::before,.tr-sinal::after{content:"";position:absolute;left:0;right:0;top:7px;height:1px;background:var(--latao-claro);transition:transform .5s var(--ease)}
.tr-sinal::after{transform:rotate(90deg)}

.tr-desc-in{padding:0 0 20px 44px}
.tr-rot{display:none}
.tr-p{font-size:16px;line-height:1.6;color:var(--gelo);max-width:30em}
.tr-fala{font-family:var(--f-titulo);font-weight:300;font-style:italic;font-size:1.16em;line-height:1.3;color:var(--latao-claro)}
.tr-fala--abre{display:block;font-size:1.4em;margin-bottom:6px}

.tr-fio{display:none}

/* fecho */
.tr-pe{margin-top:clamp(34px,5vw,52px);display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.tr-nota{font-size:15px;line-height:1.5;color:#e0d6c0;max-width:26em;padding-left:16px;border-left:1px solid var(--latao)}

/* ───────── com JS, no celular: uma descrição aberta por vez ───────── */
@media (max-width:999px){
  .tr-on .tr-sinal{display:block}
  .tr-on .tr-desc{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .6s var(--ease),visibility 0s .6s}
  .tr-on .tr-desc-in{min-height:0;overflow:hidden;opacity:0;transition:opacity .4s var(--ease)}
  .tr-on .tr-item.tr-ativo .tr-desc{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .6s var(--ease),visibility 0s}
  .tr-on .tr-item.tr-ativo .tr-desc-in{opacity:1;transition:opacity .7s var(--ease) .15s}
  .tr-on .tr-item.tr-ativo .tr-sinal::after{transform:rotate(0deg)}
  .tr-on .tr-item:not(.tr-ativo) .tr-nome{opacity:.82}
  .tr-on .tr-item:not(.tr-ativo) .tr-num{opacity:.75}
  .tr-on.tr-chegou .tr-item.tr-ativo::after{transform:scaleX(1);opacity:1}
}

/* ───────── telas largas: lista à esquerda, cadeira à direita, descrição no pé da foto ───────── */
@media (min-width:1000px){
  .tr-foto{left:auto;right:calc(-1*var(--margem) - var(--tr-sobra));width:var(--tr-fw);height:auto}
  .tr-item::after{display:none}
  .tr-item{position:static}
  .tr-foto img{height:auto;object-fit:fill;
    -webkit-mask-image:linear-gradient(to right,transparent 0,transparent 5%,rgb(0 0 0 / .12) 13%,rgb(0 0 0 / .58) 25%,#000 37%),linear-gradient(to bottom,#000 0,#000 64%,rgb(0 0 0 / .5) 74%,transparent 86%);
    mask-image:linear-gradient(to right,transparent 0,transparent 5%,rgb(0 0 0 / .12) 13%,rgb(0 0 0 / .58) 25%,#000 37%),linear-gradient(to bottom,#000 0,#000 64%,rgb(0 0 0 / .5) 74%,transparent 86%);
    -webkit-mask-composite:source-in;mask-composite:intersect}
  .tr-sombra{left:auto;right:calc(-1*var(--margem) - var(--tr-sobra));width:var(--tr-fw);height:calc(var(--tr-fw)*1.72);
    background:linear-gradient(180deg, rgb(34 19 10 / .5) 0, rgb(34 19 10 / 0) 110px),
      linear-gradient(180deg, rgb(52 31 18 / 0) 68%, rgb(52 31 18 / .62) 79%, rgb(52 31 18 / .5) 86%, rgb(52 31 18 / 0) 99%)}
  .tr-cabeca{padding-top:0;width:var(--tr-col)}
  .tr-titulo{margin-top:24px;font-size:clamp(46px,5.4vw,88px)}
  .tr-apoio{max-width:calc(100% - 48px);margin-top:20px}
  .tr-lista{width:var(--tr-col);border-top:0}
  .tr-item{border-bottom:0}
  .tr-linha{grid-template-columns:58px minmax(0,1fr);padding:10px 0 8px}
  .tr-num{font-size:21px}
  .tr-nome{font-size:clamp(34px,3.5vw,52px)}
  .tr-pe{width:var(--tr-col);flex-direction:row;align-items:center;gap:28px}
  .tr-desc-in{padding:0 0 14px 68px}

  .tr-on .tr-sinal{display:none}
  .tr-on .tr-rot{display:flex;align-items:baseline;gap:16px;font-size:11.5px;font-weight:400;letter-spacing:.26em;text-transform:uppercase;color:var(--latao-claro);margin-bottom:10px}
  .tr-on .tr-rot b{font-family:var(--f-titulo);font-weight:300;font-style:italic;font-size:clamp(54px,5vw,76px);line-height:.9;letter-spacing:0;color:#d9ba7c;padding:0 .06em .1em 0;
    background:linear-gradient(178deg,#f3e2b8 6%,#dcbb7b 40%,#c9a35c 66%,#b48c4a 98%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .tr-on .tr-desc{position:absolute;left:calc(var(--tr-col) + 34px);right:0;top:var(--tr-painel);visibility:hidden;opacity:0;transform:translate3d(0,10px,0);transition:opacity .25s,transform .25s,visibility 0s .25s}
  .tr-on .tr-desc-in{padding:0}
  .tr-on .tr-p{font-size:clamp(17px,1.3vw,19px);line-height:1.6;max-width:23em}
  .tr-on .tr-fala{font-size:1.2em}
  .tr-on .tr-fala--abre{font-size:clamp(26px,2.3vw,34px);line-height:1.2;margin-bottom:12px;text-wrap:balance}
  .tr-on .tr-item.tr-ativo .tr-desc{visibility:visible;opacity:1;transform:none;transition:opacity .7s var(--ease) .12s,transform .8s var(--ease) .12s,visibility 0s}
  .tr-on .tr-item:not(.tr-ativo) .tr-nome{opacity:.74}
  .tr-on .tr-item:not(.tr-ativo) .tr-num{opacity:.7}
  .tr-on:not(.tr-chegou) .tr-item.tr-ativo .tr-desc{opacity:0;transform:translate3d(0,10px,0)}
  .tr-on.tr-chegou:not(.tr-pronto) .tr-item.tr-ativo .tr-desc{transition-delay:1.5s}
  .tr-on .tr-item:not(.tr-ativo) .tr-linha:hover .tr-nome{opacity:.9}

  /* o fio: da linha acesa até a descrição */
  .tr-on .tr-fio{display:block;position:absolute;inset:0;pointer-events:none}
  .tr-fio i{position:absolute;display:block}
  .tr-fio-t{left:var(--tr-col);top:var(--tr-t0,0);height:var(--tr-th,0);width:1px;background:linear-gradient(180deg,rgb(201 163 92 / 0),rgb(201 163 92 / .34) 8%,rgb(201 163 92 / .34) 88%,rgb(201 163 92 / 0));opacity:0;transition:opacity 1.2s var(--ease)}
  .tr-chegou .tr-fio-t{opacity:1}
  .tr-fio-h{left:var(--tr-x,0);top:var(--tr-y,0);width:var(--tr-w,0);height:1px;
    background:linear-gradient(90deg,rgb(255 232 190 / 0),#ffe9c2 30%,#fff4dc);box-shadow:0 0 10px 1px rgb(255 214 150 / .4);
    transform:scaleX(0);transform-origin:left center;transition:top .7s var(--ease),left .7s var(--ease),width .7s var(--ease),transform 1s var(--ease) .35s}
  .tr-chegou .tr-fio-h{transform:scaleX(1)}
  .tr-fio-v{left:var(--tr-col);top:var(--tr-vy,0);height:var(--tr-vh,0);width:1px;background:#fff0d2;box-shadow:0 0 10px 1px rgb(255 214 150 / .5),0 0 28px 5px rgb(255 200 130 / .2);
    transform:scaleY(0);transform-origin:center var(--tr-vo,top);transition:top .7s var(--ease),height .7s var(--ease),transform .8s var(--ease) 1.05s}
  .tr-chegou .tr-fio-v{transform:scaleY(1)}
  .tr-fio-v::after{content:"";position:absolute;left:-3px;width:7px;height:7px;border-radius:50%;background:#fff4dc;box-shadow:0 0 10px 2px rgb(255 214 150 / .7);top:var(--tr-pt,auto);bottom:var(--tr-pb,auto)}
}
@media (min-width:1580px){
  .tr-foto img{
    -webkit-mask-image:linear-gradient(to right,transparent 0,transparent 5%,rgb(0 0 0 / .12) 13%,rgb(0 0 0 / .58) 25%,#000 37%,#000 86%,transparent 100%),linear-gradient(to bottom,#000 0,#000 64%,rgb(0 0 0 / .5) 74%,transparent 86%);
    mask-image:linear-gradient(to right,transparent 0,transparent 5%,rgb(0 0 0 / .12) 13%,rgb(0 0 0 / .58) 25%,#000 37%,#000 86%,transparent 100%),linear-gradient(to bottom,#000 0,#000 64%,rgb(0 0 0 / .5) 74%,transparent 86%)}
}