*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  cursor: none !important; /* real cursor hidden; replaced by #custom-cursor div */
}


/* ─── Custom cursor (mix-blend-mode: difference) ────────── */
/* White square + difference = black on light bg, white on dark bg */

.custom-cursor {
  position: fixed;
  width: 10px;
  height: 10px;
  background: white;
  mix-blend-mode: difference;
  pointer-events: none;
  z-index: 9999;
  left: 0;
  top: 0;
  transform: translate(-100px, -100px); /* off-screen until first mousemove */
  will-change: transform; /* GPU-composited — no layout cost */
}

:root {
  --bg:      #ffffff;
  --ink:     #000000;
  --card:    transparent;
  --rule:    #000000;
  --muted:   rgba(0, 0, 0, 0.4);
  --hatch-a: #d8d8d8;
  --hatch-b: #e8e8e8;
  --font:    'Inter', sans-serif;
}

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

/* ─── Bottom Panel ────────────────────────────────────── */
/* Dark card aesthetic — black background, white type, rounded corners.  */

.bottom-panel {
  position: fixed;
  bottom: 44px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: stretch;
  width: min(860px, calc(100vw - 32px));
  background: #0d0d0d;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0;
  font-family: var(--font);
  overflow: hidden;          /* clip children to rounded corners */
  box-shadow: 0 12px 40px rgba(0,0,0,0.22);
}

/* Arrows */
.bp-arrow {
  flex-shrink: 0;
  width: 44px;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.45);
  transition: background 0.15s, color 0.15s, opacity 0.15s;
}

.bp-arrow:hover {
  background: rgba(255,255,255,0.07);
  color: #ffffff;
}

.bp-arrow--disabled {
  opacity: 0.15;
  cursor: default;
  pointer-events: none;
}

/* Viewport clips the sliding track */
.bp-viewport {
  flex: 1;
  overflow: hidden;
  border-left: 1px solid rgba(255,255,255,0.1);
  border-right: 1px solid rgba(255,255,255,0.1);
}

.bp-track {
  display: flex;
  width: 400%;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Each slide occupies 1/4 of the track = 100% of the viewport */
.bp-slide {
  width: calc(100% / 4);
  padding: 13px 22px 15px;
  box-sizing: border-box;
  min-height: 73px;
}

.bp-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 13px;
  font-family: 'Inter', sans-serif;
}

/* Category buttons */
.bp-cats {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
}

.bp-cat-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.18);
  padding: 5px 14px;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  color: rgba(255,255,255,0.45);
  font-family: var(--font);
  border-radius: 3px;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
  user-select: none;
}

.bp-cat-btn:hover {
  border-color: rgba(255,255,255,0.6);
  color: #ffffff;
}

.bp-cat-btn.active {
  background: #ffffff;
  color: #0d0d0d;
  border-color: #ffffff;
}

/* Contact links */
.bp-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}

.bp-link {
  font-size: 10px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  transition: color 0.12s;
  white-space: nowrap;
}

.bp-link:hover {
  color: #ffffff;
}

/* Credits slide */
.bp-slide--credits {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bp-credits {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  text-align: center;
  line-height: 1.8;
}

/* ─── Key button (Collectable Signature) ─────────────── */

.bp-key-btn {
  flex-shrink: 0;
  margin-left: auto;
  background: none;
  border: none;
  padding: 0 2px;
  cursor: pointer;
  opacity: 0.22;
  transition: opacity 0.25s ease-out;
  line-height: 0;
  display: flex;
  align-items: center;
  user-select: none;
}

.bp-key-btn:hover {
  opacity: 1;
}

.bp-key-btn img {
  height: 20px;
  width: auto;
  display: block;
  pointer-events: none;
}

/* ─── Bio overlay ────────────────────────────────────── */

/* ─── Sitemap overlay ───────────────────────────────────────── */

.sitemap-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 900;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease-out;
}

.sitemap-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.sitemap-close {
  position: fixed;
  top: 52px;
  left: 50%;
  transform: translateX(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  color: rgba(255,255,255,0.5);
  transition: color 0.2s ease-out;
  line-height: 0;
  z-index: 901;
}

.sitemap-close:hover { color: #ffffff; }

.sitemap-modal {
  padding-top: 120px;
  padding-bottom: 120px;
  padding-left:  max(calc(50vw - 430px), 16px);
  padding-right: max(calc(50vw - 430px), 16px);
}

.sitemap-tree {
  font-family: 'Courier New', 'Roboto Mono', monospace;
  font-size: 14px;
  line-height: 1.08;
  font-style: normal;
  font-weight: normal;
  font-variant-ligatures: none;
  color: #ffffff;
  background: none;
  border: none;
  white-space: pre;
  margin: 0;
  width: 100%;
}

.sitemap-tree-root  { color: #ffffff; letter-spacing: 0.1em; display: block; margin-bottom: 1em; }
.sitemap-tree-cat,
.sitemap-tree-year,
.sitemap-tree-tag,
.sitemap-tree-cnt   { color: #ffffff; font-style: normal; font-weight: normal; }

/* Item row: title left, char count right */
.sitemap-tree-item-row {
  display: inline-flex;
  width: 100%;
  justify-content: space-between;
  align-items: baseline;
  cursor: pointer;
}
.sitemap-tree-item-row:hover .sitemap-tree-item { opacity: 0.6; }
.sitemap-tree-item  { color: #ffffff; font-style: normal; font-weight: normal; }
.sitemap-tree-item-count {
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  padding-left: 2em;
  flex-shrink: 0;
  letter-spacing: 0.04em;
}

/* ─── Bio overlay ───────────────────────────────────────────── */

.bio-overlay {
  position: fixed;
  inset: 0;
  background: #000000;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease-out;
}

.bio-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.bio-close {
  position: absolute;
  top: 52px;
  left: 50%;
  transform: translateX(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  color: rgba(255,255,255,0.5);
  transition: color 0.2s ease-out;
  line-height: 0;
}

.bio-close:hover { color: #ffffff; }

.bio-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  max-width: 340px;
  text-align: center;
}

.bio-modal-title {
  font-family: var(--font);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  margin: 0;
}

.bio-modal-sub {
  font-family: var(--font);
  font-size: 8.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin: -14px 0 0;
}

.bio-modal-body {
  font-family: var(--font);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
}

/* ─── Password overlay ────────────────────────────────── */

.password-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.52);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease-out;
}

/* Grayscale background image behind the overlay tint */
.password-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('key_background.png') center center / cover no-repeat;
  filter: grayscale(1);
  z-index: -1;
}

.password-overlay.open {
  opacity: 1;
  pointer-events: all;
}

/* X close button — centered at top of overlay */
.password-close {
  position: absolute;
  top: 52px;
  left: 50%;
  transform: translateX(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  color: rgba(255,255,255,0.5);
  transition: color 0.2s ease-out;
  line-height: 0;
}

.password-close:hover {
  color: #ffffff;
}

.password-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  max-width: 340px;
  text-align: center;
}

.password-hint-title {
  font-family: 'Roboto Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  margin: 0;
}

.password-hint-sub {
  font-family: 'Roboto Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin: -14px 0 0;
}

.password-input {
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  outline: none;
  color: #ffffff;
  font-family: 'Roboto Mono', monospace;
  font-size: 15px;
  letter-spacing: 0.22em;
  padding: 6px 0 10px;
  text-align: center;
  width: 230px;
  caret-color: rgba(255,255,255,0.4);
  transition: border-bottom-color 0.2s;
}

.password-input:focus {
  border-bottom-color: rgba(255,255,255,0.35);
}

.password-input::placeholder {
  color: rgba(255,255,255,0.08);
  letter-spacing: 0.4em;
}

.password-error {
  font-family: 'Roboto Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  min-height: 11px;
  margin: -14px 0 0;
}

@keyframes pw-shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-8px); }
  40%     { transform: translateX(8px); }
  60%     { transform: translateX(-5px); }
  80%     { transform: translateX(5px); }
}

.password-input.pw-shake {
  animation: pw-shake 0.32s ease;
}

/* ─── Zoom buttons ────────────────────────────────────── */

.zoom-btn {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  width: 30px;
  height: 30px;
  background: var(--bg);
  border: 1px solid var(--ink);
  cursor: pointer;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  user-select: none;
  pointer-events: all;
}

.zoom-btn:hover {
  background: var(--ink);
  color: var(--bg);
}

#zoom-out { left: 22px; }
#zoom-in  { right: 22px; }

/* ─── Canvas ──────────────────────────────────────────── */

.canvas-wrap {
  position: fixed;
  inset: 0;
  overflow: hidden;
  transition: opacity 0.35s ease-out;
  /* isolation: isolate cria um compositing group para o canvas.
     O cursor (mix-blend-mode: difference) blenda contra o output agrupado
     em vez de contra cada item individualmente — reduz drasticamente
     o número de layers que o compositor Safari precisa de achatar por frame. */
  isolation: isolate;
}


/* ─── Lens strips (left / right edge magnification) ────────────
   Técnica: 3 zonas por lado, cada uma com um scaleX crescente
   do interior para o exterior. Os scalers de cada zona ocupam
   sempre a largura total da faixa (15vw) de modo que o ponto de
   transform-origin (right para esquerda, left para direita) fique
   sempre na borda interna — garante joins matematicamente exatos.
   JS calcula os offsets de translação para cada world element
   usando a fórmula: A_{i+1} = Ai + (xBound − innerX)×(1/N_{i+1} − 1/Ni).
   Sem filtros SVG — tudo GPU (transforms). Safari-safe.
   z-index 2: acima do canvas (z 0), abaixo dos edge-fades (z 4).
   pointer-events: none — cliques passam para o canvas principal. ── */

.lens-strip {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 15vw;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
  background: var(--bg);
}

.lens-strip--left  { left: 0; }
.lens-strip--right { right: 0; }

/* Zone containers clip each band */
.lens-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  overflow: hidden;
}

/* Left zones: inner (10-15vw), mid (5-10vw), outer (0-5vw) */
.lens-zone-l--inner { left: 10vw; width: 5vw; }
.lens-zone-l--mid   { left: 5vw;  width: 5vw; }
.lens-zone-l--outer { left: 0;    width: 5vw; }

/* Right zones: inner (0-5vw of strip), mid (5-10vw), outer (10-15vw) */
.lens-zone-r--inner { left: 0;    width: 5vw; }
.lens-zone-r--mid   { left: 5vw;  width: 5vw; }
.lens-zone-r--outer { left: 10vw; width: 5vw; }

/* Zone scalers span the full 15vw strip; left: offset places them
   so their right (left) edge aligns with the strip's inner boundary */
.lens-zone-scaler {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 15vw;
}

/* Left scalers → transform-origin: right = strip's inner boundary (screen 15vw) */
.lens-zone-scaler-l--inner { left: -10vw; transform: scaleX(1.5); transform-origin: right center; }
.lens-zone-scaler-l--mid   { left: -5vw;  transform: scaleX(2.5); transform-origin: right center; }
.lens-zone-scaler-l--outer { left: 0;     transform: scaleX(4);   transform-origin: right center; }

/* Right scalers → transform-origin: left = strip's inner boundary (screen 85vw) */
.lens-zone-scaler-r--inner { left: 0;     transform: scaleX(1.5); transform-origin: left center; }
.lens-zone-scaler-r--mid   { left: -5vw;  transform: scaleX(2.5); transform-origin: left center; }
.lens-zone-scaler-r--outer { left: -10vw; transform: scaleX(4);   transform-origin: left center; }

body.is-filtered .lens-strip {
  display: none;
}

.canvas-wrap.faded {
  opacity: 0;
  pointer-events: none;
}

.world {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform; /* GPU compositing layer — keeps pan/zoom on the compositor thread */
  transform-origin: 0 0;  /* must be 0 0 so scale() in applyTransform() works correctly */
}

.tile {
  position: absolute;
  overflow: visible;
  /* contain: layout limita o escopo de reflow ao interior de cada tile —
     criação/remoção de tiles não invalida layout de elementos externos. */
  contain: layout;
}

/* ─── Items (base) ────────────────────────────────────── */

.item {
  position: absolute;
  background: transparent;
  border: none;
  padding: 16px;
  cursor: inherit; /* inherit the canvas square cursor */
  user-select: none;
}

/* Mural items start grayscale; hover reveals colour instantly, fades back on leave.
   Filter is scoped to #world only — lens zone worlds apply grayscale at the
   container level instead, to avoid creating hundreds of GPU compositing layers.
   NOTE: no transition on the base state — prevents all 100+ items from being
   permanently promoted to compositor layers, which causes random disappearance
   under GPU memory pressure. The fade-back transition is added/removed via JS
   only for the item that just lost hover (.item--leaving class). */
#world .item {
  filter: grayscale(1);
}

#world .item:hover {
  filter: grayscale(0); /* instant colour reveal */
}

#world .item.item--leaving {
  filter: grayscale(1);
  transition: filter 0.4s ease-out; /* fade back — only this item gets a compositor layer */
}

/* Lens zones: single filter on each world container (no hover needed).
   6 GPU layers instead of 6 × N_items — fixes flickering under animation. */
#world-l0, #world-l1, #world-l2,
#world-r0, #world-r1, #world-r2 {
  filter: grayscale(1);
}

/* Zoom buttons hidden while a category filter is active */
body.is-filtered .zoom-btn {
  display: none;
}

.item__tag {
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

/* ─── Book ────────────────────────────────────────────── */

.item--book {
  display: flex;
  flex-direction: column;
}

.item__book-cover {
  height: 180px;
  flex: none;
  background: repeating-linear-gradient(
    -45deg,
    var(--hatch-a) 0px,
    var(--hatch-a) 1px,
    var(--hatch-b) 1px,
    var(--hatch-b) 9px
  );
  margin-bottom: 12px;
}

.item--book .item__title {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  margin-bottom: 4px;
}

.item--book .item__subtitle {
  font-family: 'Roboto Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
}

/* ─── Article ─────────────────────────────────────────── */

.item--article .item__title {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
}

.item--article .item__excerpt {
  font-size: 12px;
  line-height: 1.65;
  color: var(--muted);
  font-weight: 300;
}

/* ─── Link ────────────────────────────────────────────── */

.item__link-url {
  font-size: 13px;
  font-family: var(--font);
  font-weight: 500;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.item--link .item__excerpt {
  font-size: 11px;
  line-height: 1.55;
  color: var(--muted);
  font-weight: 300;
}

/* ─── Image ───────────────────────────────────────────── */

.item--image {
  display: flex;
  flex-direction: column;
}

.item__image-placeholder {
  flex: 1;
  min-height: 80px;
  background: repeating-linear-gradient(
    -45deg,
    var(--hatch-a) 0px,
    var(--hatch-a) 1px,
    var(--hatch-b) 1px,
    var(--hatch-b) 9px
  );
  margin-bottom: 10px;
}

.item__img {
  width: 100%;
  height: 240px;        /* fixed so layout estimates are reliable */
  object-fit: cover;
  display: block;
}

.item__caption {
  font-family: 'Roboto Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  color: var(--muted);
}

/* ─── Quote ───────────────────────────────────────────── */

.item--quote {
  border-left: 3px solid var(--ink);
  padding-left: 18px;
}

.item__quote-mark {
  font-family: var(--font);
  font-size: 56px;
  line-height: 0.65;
  color: var(--ink);
  opacity: 0.12;
  margin-bottom: 14px;
}

.item__quote-text {
  font-size: 14px;
  line-height: 1.7;
  font-style: italic;
  margin-bottom: 12px;
}

.item__quote-author {
  font-family: 'Roboto Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
}

/* ─── Artist ──────────────────────────────────────────── */

.item--artist {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.item__artist-portrait {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  background: repeating-linear-gradient(
    45deg,
    var(--hatch-a) 0px,
    var(--hatch-a) 1px,
    var(--hatch-b) 1px,
    var(--hatch-b) 7px
  );
  margin: 8px auto 14px;
  flex-shrink: 0;
}

.item--artist .item__title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
  line-height: 1.3;
}

.item--artist .item__subtitle {
  font-family: 'Roboto Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
}

/* ─── Note ────────────────────────────────────────────── */

.item--note .item__title {
  font-size: 13px;
  font-weight: 500;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--rule);
  line-height: 1.35;
}

.item--note .item__excerpt {
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted);
  font-weight: 300;
}

/* ─── Filtered View ───────────────────────────────────── */

.filtered-view {
  position: fixed;
  inset: 0;
  padding: 60px 40px 160px; /* bottom clears the bottom panel */
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease-out;
}

.filtered-view.visible {
  opacity: 1;
  pointer-events: all;
}

.filtered-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
  max-width: 1160px;
  margin: 0 auto;
}

/* Override mural-specific positioning inside grid */
.filtered-grid .item {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  height: auto !important;
}

.filtered-grid .item--book .item__book-cover {
  min-height: 0;
  padding-bottom: 130%;
  flex: none;
}

.filtered-grid .item--image .item__image-placeholder {
  flex: none;
  height: 180px;
}

.filtered-grid .item--artist .item__artist-portrait {
  /* unchanged */
}

/* ─── Scrollbar ───────────────────────────────────────── */

.filtered-view::-webkit-scrollbar { width: 5px; }
.filtered-view::-webkit-scrollbar-track { background: transparent; }
.filtered-view::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 2px; }

/* ─── Hero Text ───────────────────────────────────────────── */

.hero-text {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  z-index: 10;
  pointer-events: none;
  text-align: center;
  font-family: 'Inter', sans-serif;
  white-space: nowrap;
  opacity: 1;
  transition: opacity 1s ease-out;
}

.hero-text.hidden {
  opacity: 0;
}

.hero-hello {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  color: var(--ink);
}

.hero-tagline {
  font-size: 56px;
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin-bottom: 10px;
}

.hero-sub {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  opacity: 0.85;
}

.hero-arrow {
  height: 9px;
  width: auto;
  display: inline;
  vertical-align: -1px;
  pointer-events: none;
}

/* ─── Apresentação slide ──────────────────────────────────── */

.bp-apresentacao {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.bp-apresentacao-photo {
  width: 49px;
  height: 49px;
  flex-shrink: 0;
  background: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,0.06) 0px,
    rgba(255,255,255,0.06) 1px,
    rgba(255,255,255,0.03) 1px,
    rgba(255,255,255,0.03) 9px
  );
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
}

.bp-apresentacao-text {
  flex: 1;
  font-size: 11px;
  line-height: 1.65;
  color: rgba(255,255,255,0.5);
  font-family: var(--font);
}

/* ─── Language Toggle ─────────────────────────────────────── */

.lang-toggle {
  position: fixed;
  bottom: 159px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: opacity 0.27s ease-out, bottom 0.38s cubic-bezier(0, 0, 0.2, 1);
}


.lang-label {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  user-select: none;
  font-family: var(--font);
  transition: color 0.2s;
}

.lang-toggle.pt-active .lang-pt,
.lang-toggle.en-active .lang-en {
  color: var(--ink);
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 18px;
  cursor: pointer;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle-track {
  position: absolute;
  inset: 0;
  background: var(--ink);
  border-radius: 9px;
  transition: background 0.2s;
}

.toggle-track::before {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--bg);
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* checked = PT (knob slides to the right) */
.toggle-switch input:checked + .toggle-track::before {
  transform: translateX(18px);
}

/* ─── Cursor tooltip ──────────────────────────────────────── */

.cursor-tooltip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 200;
  pointer-events: none;
  font-family: var(--font);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--ink);
  padding: 5px 9px;
  white-space: nowrap;
  will-change: transform; /* compositor-only, same as cursor */
  opacity: 0;
  transition: opacity 0.2s ease-out;
  user-select: none;
}

.cursor-tooltip.visible {
  opacity: 1;
}