/* ol · O olhar — a pintura dela na parede em meia-luz; você move a luz: traço, sombra, proporção */
@property --ol-l { syntax: "<number>"; inherits: true; initial-value: .12; }

.ol { --ol-sangra: max(var(--margem), calc((100vw - var(--larg)) / 2)); }
.ol-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  grid-template-areas: "palco cabeca" "palco corpo";
  column-gap: clamp(2.5rem, 6.5vw, 6.5rem);
  row-gap: clamp(1.75rem, 3vw, 2.75rem);
}
.ol-cabeca { grid-area: cabeca; align-self: end; padding-top: clamp(1rem, 5vw, 4.5rem); }
.ol-corpo { grid-area: corpo; align-self: start; }
.ol-palco { grid-area: palco; --ol-l: .12; transition: --ol-l .8s var(--curva); }

.ol-titulo, .ol-ponte { position: relative; }
.ol-aspa { position: absolute; translate: -100% 0; padding-right: .04em; color: var(--veio); }
.ol-assina { display: flex; align-items: center; gap: .8rem; margin: 1.3rem 0 0; font-size: var(--t-rotulo); letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: var(--tinta-2); }
.ol-assina i { width: 2.25rem; height: 1px; background: var(--nogueira); flex: none; }

/* ---------- a parede do ateliê: sai da borda da tela ---------- */
.ol-parede {
  --ol-fundo: color-mix(in oklab, var(--taupe) 70%, var(--tinta));
  position: relative; overflow: hidden; isolation: isolate;
  margin: 0; margin-left: calc(-1 * var(--ol-sangra));
  aspect-ratio: 1 / 1.1;
  border-radius: 0 var(--raio) var(--raio) 0;
  background: linear-gradient(180deg in oklab, color-mix(in oklab, var(--taupe) 84%, var(--tinta)), var(--ol-fundo));
  box-shadow: 0 40px 80px -50px rgb(84 56 20 / .6);
}
.ol-cone { /* a claridade que a lâmpada põe na parede */
  position: absolute; z-index: 0; top: 3%; left: calc(18% + var(--ol-l) * 64%); width: 130%; height: 105%; translate: -50% 0;
  background: radial-gradient(closest-side at 50% 0% in oklab, rgb(255 244 220 / .95), rgb(255 232 192 / .5) 40%, rgb(255 226 180 / 0) 100%);
}
.ol-mesa {
  position: absolute; z-index: 1; left: 0; bottom: 0; width: 100%; height: 19%; max-width: none; object-fit: cover;
  filter: saturate(.5) brightness(.84);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 38%); mask-image: linear-gradient(180deg, transparent, #000 38%);
}
.ol-parede::after { /* a mesa some na meia-luz para os lados */
  content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 24%; pointer-events: none;
  background: radial-gradient(58% 130% at calc(var(--ol-ox) + var(--ol-ow) / 2) 100% in oklab, transparent 45%, color-mix(in oklab, var(--ol-fundo) 80%, transparent) 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 55%); mask-image: linear-gradient(180deg, transparent, #000 55%);
}
.ol-sombra {
  position: absolute; z-index: 2; left: var(--ol-ox); bottom: 0; width: var(--ol-ow); height: auto; max-width: none;
  transform-origin: 50% 82%;
  transform: translate(calc((.5 - var(--ol-l)) * 13%), 2%) skewX(calc((var(--ol-l) - .5) * 7deg)) scale(1.05);
  opacity: calc(.8 - var(--ol-l) * .42);
}
.ol-parede { --ol-ow: 74%; --ol-ox: 19%; }
.ol-obra { position: absolute; z-index: 3; left: var(--ol-ox); bottom: 0; width: var(--ol-ow); aspect-ratio: 960 / 1280; }
.ol-cavalete { position: absolute; inset: 0; width: 100%; height: 100%; }
.ol-tela { position: absolute; left: 15.9%; top: 16.6%; width: 69.8%; height: 52.8%; overflow: hidden; }
.ol-relevo { /* luz rasante: o relevo da pincelada aparece quando a luz vem de lado */
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  mix-blend-mode: overlay; opacity: clamp(0, calc(1 - var(--ol-l) * 2.1), 1);
}
.ol-eixos { /* proporção: as linhas de construção do retrato, em luz */
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  fill: none; stroke: var(--fio); stroke-width: 1.25; stroke-linecap: round; vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 3px var(--luz)) drop-shadow(0 0 9px rgb(255 205 130 / .9));
  opacity: clamp(0, calc((var(--ol-l) - .66) * 5), .92);
}
.ol-eixos path { stroke-dasharray: 1; stroke-dashoffset: clamp(0, calc(1 - (var(--ol-l) - .64) * 3.4), 1); vector-effect: non-scaling-stroke; }
.ol-penumbra { /* a meia-luz: tudo o que a lâmpada não alcança */
  position: absolute; z-index: 4; inset: 0; pointer-events: none;
  background: color-mix(in oklab, var(--tinta) 82%, var(--nogueira));
  mix-blend-mode: multiply;
  opacity: clamp(0, calc((1 - var(--ol-l)) * 1.2), .74);
  -webkit-mask-image: radial-gradient(62% 58% at calc(18% + var(--ol-l) * 64%) 38%, transparent 0, rgb(0 0 0 / .18) 34%, #000 100%);
  mask-image: radial-gradient(62% 58% at calc(18% + var(--ol-l) * 64%) 38%, transparent 0, rgb(0 0 0 / .18) 34%, #000 100%);
}
.ol-lampada {
  position: absolute; z-index: 5; top: 3%; left: calc(18% + var(--ol-l) * 64%); width: clamp(4rem, 9vw, 7rem); height: 3px; translate: -50% 0;
  border-radius: 2px; background: var(--fio);
  box-shadow: 0 0 6px var(--luz), 0 0 22px rgb(255 214 150 / .9), 0 0 60px rgb(255 200 120 / .6);
}

/* ---------- o comando: a régua de luz ---------- */
.ol-comando { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 1.25rem; margin-top: 1.1rem; }
.ol-dica { margin: 0; font-size: var(--t-rotulo); letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--tinta-2); }
.ol-regua { position: relative; height: 48px; }
.ol-trilho { position: absolute; left: 12px; right: 12px; top: 50%; height: 1px; background: var(--linha); }
.ol-trilho i { position: absolute; left: 0; top: -1px; height: 3px; width: calc(var(--ol-l) * 100%); border-radius: 2px; background: var(--fio); box-shadow: 0 0 0 1px rgb(201 163 111 / .45), 0 0 10px var(--luz), 0 0 26px rgb(255 205 130 / .95); }
.ol-trilho b { position: absolute; left: calc(var(--ol-l) * 100%); top: 50%; width: 22px; height: 22px; translate: -50% -50%; border-radius: 50%; background: var(--fio); box-shadow: 0 0 0 1px var(--veio), 0 0 12px var(--luz), 0 0 30px rgb(255 195 110 / .95), 0 6px 14px -6px rgb(84 56 20 / .6); }
.ol-faixa { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.ol-regua:focus-within .ol-trilho b { outline: 2px solid var(--nogueira); outline-offset: 4px; }
.ol-marcas { grid-column: 2; display: flex; justify-content: space-between; margin-inline: -.25rem; }
.ol-marca {
  min-height: 48px; padding: 0 .25rem; border: 0; background: none; cursor: pointer;
  font: 600 var(--t-rotulo)/1 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2);
  transition: color .6s;
}
.ol-marca[aria-pressed="true"] { color: var(--nogueira); box-shadow: inset 0 -1px 0 var(--veio); }
.ol-marca:hover { color: var(--tinta); }
/* legenda de museu: placa de vidro na parede, como a do nome no hero */
.ol-placa {
  position: absolute; z-index: 6; left: var(--ol-sangra); bottom: clamp(.9rem, 2vw, 1.5rem);
  width: max-content; max-width: calc(100% - 2 * var(--margem)); padding: .8rem 1.1rem .85rem; border-radius: var(--raio);
  font-size: .875rem; line-height: 1.4; color: var(--tinta-2);
  background: linear-gradient(180deg in oklab, rgb(255 250 240 / .9), rgb(255 246 230 / .8));
  -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .7), 0 24px 50px -26px rgb(84 56 20 / .6);
}
.ol-placa b { display: block; font-family: var(--f-titulo); font-weight: 400; font-size: 1.2rem; line-height: 1.15; color: var(--tinta); }
.ol-placa-pt { display: none; }

/* ---------- a fala dela ---------- */
.ol-fala { margin: 0; }
.ol-ponte { margin: 1.7rem 0 0; max-width: 34rem; font-family: var(--f-titulo); font-size: clamp(1.55rem, 2.35vw, 2.15rem); line-height: 1.18; text-wrap: pretty; }
.ol-ponte em { font-style: normal; color: var(--ouro); }
.ol-fecho { margin-top: 1.9rem; padding-top: 1.5rem; border-top: 1px solid var(--linha); max-width: 36rem; }
.ol-fecho .wf-elo { margin-top: .4rem; }

@media (max-width: 899.98px) {
  .ol-grade { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cabeca" "palco" "corpo"; row-gap: 2rem; }
  .ol-cabeca { padding-top: 0; }
  .ol-parede { margin-inline: calc(-1 * var(--margem)); border-radius: 0; aspect-ratio: 1 / 1.24; --ol-ow: 88%; --ol-ox: 6%; }
  .ol-comando { grid-template-columns: minmax(0, 1fr); }
  .ol-dica { margin-top: .4rem; }
  .ol-aspa { position: static; translate: none; padding: 0; }
  .ol-placa { left: var(--margem); bottom: .75rem; padding: .6rem .9rem .65rem; }
  .ol-placa b { font-size: 1.08rem; }
  .ol-marcas { grid-column: 1; }
}
@media (min-width: 600px) and (max-width: 899.98px) {
  .ol-parede { aspect-ratio: 1 / .95; --ol-ow: 66%; --ol-ox: 17%; }
}