/* Card do barco 3D da tese — portado de /root/demo.html (WebGL puro, sem dependência).
   `@scope` prende tudo ao wrapper. Cores e fontes apontam para os tokens do tema. */
@scope (.q3d-bloco) {

.q3d{position:relative;width:100%;max-width:520px;margin-inline:auto;aspect-ratio:4/5;border-radius:22px;overflow:hidden;isolation:isolate;
  /* Céu e mar da cena: areia no céu, mar-aberto → abissal na água. */
  background:linear-gradient(var(--color-areia) 0 58%,var(--color-mar-aberto) 60%,var(--color-abissal)) center/cover no-repeat;
  box-shadow:0 40px 80px -50px color-mix(in srgb, var(--color-abissal) 65%, transparent),0 0 0 1px color-mix(in srgb, var(--color-profundo) 6%, transparent);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.q3d[data-poster]{background-image:var(--q3d-poster)}
.q3d canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .8s ease}
.q3d[data-ready=true] canvas{opacity:1}

.q3d-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;opacity:0;transition:opacity .6s .3s}
.q3d[data-ready=true] .q3d-lines{opacity:1}
.q3d-lines line{stroke-width:1;stroke-dasharray:2 3}
.q3d-lines [data-q3d-line=vela]{stroke:color-mix(in srgb, var(--color-profundo) 55%, transparent)}
.q3d-lines [data-q3d-line=quilha]{stroke:color-mix(in srgb, var(--color-dourado-claro) 80%, transparent);transition:opacity .5s}
.q3d-lines circle{fill:none;stroke-width:1.2}
.q3d-lines [data-q3d-dot=vela]{stroke:var(--color-profundo)}
.q3d-lines [data-q3d-dot=quilha]{stroke:var(--color-dourado-claro)}
.q3d-rot{position:absolute;margin:0;font-family:var(--font-small);font-size:10px;letter-spacing:.16em;text-transform:uppercase;line-height:1.5;pointer-events:none}
.q3d-rot b{display:block;font-family:var(--font-heading);font-size:15px;font-weight:600;letter-spacing:.02em;text-transform:none;margin-bottom:2px}
.q3d-rot--vela{top:6.5%;left:6%;color:var(--color-ardosia);max-width:44%}
.q3d-rot--vela b{color:var(--color-profundo)}
.q3d-rot--quilha{top:61%;right:6%;text-align:right;color:color-mix(in srgb, var(--color-neve) 72%, transparent);max-width:46%;transition:opacity .5s}
.q3d-rot--quilha b{color:var(--color-dourado-claro)}
.q3d[data-keel=off] .q3d-rot--quilha,.q3d[data-keel=off] [data-q3d-line=quilha],.q3d[data-keel=off] [data-q3d-dot=quilha]{opacity:.25}
.q3d-ui{position:absolute;left:6%;right:6%;bottom:5%;display:flex;align-items:center;justify-content:space-between;gap:12px}
.q3d-btn{display:inline-flex;align-items:center;gap:8px;font:600 13px/1 var(--font-body);color:var(--color-neve);
  background:color-mix(in srgb, var(--color-abissal) 45%, transparent);border:1px solid color-mix(in srgb, var(--color-dourado-claro) 55%, transparent);border-radius:999px;padding:10px 16px;cursor:pointer;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .25s,border-color .25s}
.q3d-btn:hover{background:color-mix(in srgb, var(--color-abissal) 70%, transparent);border-color:var(--color-dourado-claro)}
.q3d-btn:focus-visible{outline:2px solid var(--color-dourado-claro);outline-offset:3px}
.q3d-btn i{width:8px;height:8px;border-radius:50%;background:var(--color-dourado-claro);box-shadow:0 0 10px var(--color-dourado-claro);transition:background .25s,box-shadow .25s}
/* cor-literal: início — LED aceso do botão "tirar a quilha"; cor de peça, não do tema */
.q3d-btn[aria-pressed=true] i{background:#c0392b;box-shadow:0 0 10px #e74c3c}
/* cor-literal: fim */
.q3d-hint{font:500 10px/1.2 var(--font-small);letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb, var(--color-neve) 50%, transparent)}
.q3d-status{position:absolute;left:6%;right:6%;bottom:12.5%;margin:0;font:500 12px/1.4 var(--font-body);color:var(--color-neve);opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s;pointer-events:none}
.q3d[data-keel=off] .q3d-status{opacity:.92;transform:none}
@media (max-width:480px){.q3d{border-radius:16px}.q3d-rot{font-size:9px}.q3d-rot b{font-size:13px}.q3d-hint{display:none}}
@media (prefers-reduced-motion:reduce){.q3d canvas,.q3d-lines{transition:none}}
}