/* psdcv.pt — página «brevemente» da concelhia do PSD de Castelo de Vide (frente K).
   Sem fontes de fora (só as do sistema), sem inline. Escuro por omissão do sistema, claro idem; [data-theme] força.
   A cena é um <svg> em traço (sempre presente: é o fallback sem WebGL e o estado com movimento reduzido); o Pixi
   acrescenta por cima a luz em partículas. O texto é texto real, nunca no canvas. */
:root {
  --psd: #F47920;            /* laranja oficial (Pantone 151) — barras, selo, luz; nunca texto pequeno sobre claro */
  --fundo: #f4efe6; --fundo-2: #ebe3d6; --tinta: #1b2026; --suave: #4d5560;
  --traco: #2a3038; --traco-fundo: rgb(42 48 56 / .28); --colina: #ece4d6; --casa: #fbf8f2; --janela: #c8561a;
  --botao: #1b2026; --botao-tinta: #f4efe6;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter: 16px; --largura: 1180px;
  --px: 0; --py: 0;          /* parallax (-1…1), escrito pelo site.js */
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #0d131a; --fundo-2: #111a24; --tinta: #eef1f4; --suave: #aeb8c3;
    --traco: #c7d0d9; --traco-fundo: rgb(199 208 217 / .30); --colina: #101922; --casa: #16212c; --janela: #F47920;
    --botao: #eef1f4; --botao-tinta: #0d131a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fundo: #0d131a; --fundo-2: #111a24; --tinta: #eef1f4; --suave: #aeb8c3;
  --traco: #c7d0d9; --traco-fundo: rgb(199 208 217 / .30); --colina: #101922; --casa: #16212c; --janela: #F47920;
  --botao: #eef1f4; --botao-tinta: #0d131a;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--fundo); }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; background: var(--fundo); color: var(--tinta);
  font: 400 16px/1.55 var(--sans); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--psd); outline-offset: 3px; border-radius: 4px; }

/* topo: logótipo oficial (negativo sobre o laranja, com a área de segurança) + «Castelo de Vide»; «Área reservada» */
.topo { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; max-width: var(--largura); margin: 0 auto; padding: calc(env(safe-area-inset-top) + 16px) var(--gutter) 0; }
.marca { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; min-height: 44px; }
.selo { display: inline-flex; padding: 8px; border-radius: 6px; background: var(--psd); }
.selo img { display: block; width: 64px; height: auto; }
.marca-nome { font: 700 1rem/1.1 var(--sans); letter-spacing: .01em; white-space: nowrap; }
.reservada { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; white-space: nowrap; border-radius: 999px;
  border: 1px solid var(--traco-fundo); color: var(--suave); font: 500 .85rem var(--sans); text-decoration: none;
  transition: color .2s, border-color .2s; }
.reservada:hover { color: var(--tinta); border-color: var(--tinta); }

/* hero */
.hero { position: relative; flex: 1; display: flex; min-height: 640px; overflow: hidden;
  background: linear-gradient(to bottom, var(--fundo) 0%, var(--fundo) 30%, var(--fundo-2) 100%); }
.palco { position: absolute; inset: 0; pointer-events: none; }
.palco canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cena { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 72%; display: block; overflow: visible; }
.cena path { fill: none; stroke: var(--traco); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.cena .c-serra path { stroke: var(--traco-fundo); }
.cena .cheio { fill: var(--fundo); }
.cena .chao { fill: var(--colina); stroke: var(--traco); }
.cena .casa { fill: var(--casa); }
.cena .janelas { fill: var(--janela); fill-opacity: .55; stroke: none; }
.cena .contorno { stroke: var(--psd); stroke-width: 1.8; }
.cena .luz { stroke: var(--psd); stroke-width: 3.2; stroke-dasharray: .06 .94; stroke-dashoffset: 0; opacity: 0; }
.camada { transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.c-serra   { transform: translate(calc(var(--px) * -8px),  calc(var(--py) * -4px)); }
.c-encosta { transform: translate(calc(var(--px) * -16px), calc(var(--py) * -8px)); }
.c-vila    { transform: translate(calc(var(--px) * -26px), calc(var(--py) * -12px)); }

.texto { position: relative; z-index: 2; width: 100%; max-width: var(--largura); margin: 0 auto;
  padding: 40px var(--gutter) 0; }
.sobre { margin: 0 0 14px; font: 600 .78rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--suave); }
h1 { margin: 0; max-width: 13ch; font: 800 clamp(2.3rem, 9vw, 4.2rem)/1.03 var(--sans); letter-spacing: -.02em; text-wrap: balance; }
h1 .acento { color: inherit; box-shadow: inset 0 -.14em 0 var(--psd); }
.frase { margin: 18px 0 0; max-width: 34ch; font-size: clamp(1.02rem, 2.6vw, 1.2rem); color: var(--suave); }
.breve { display: inline-flex; align-items: center; gap: 10px; margin: 26px 0 0; padding: 9px 16px 9px 12px; border-radius: 999px;
  background: var(--psd); color: #14181d; font: 700 .9rem/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; }
.breve::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #14181d; }

.rodape { position: relative; z-index: 2; padding: 18px var(--gutter) calc(env(safe-area-inset-bottom) + 18px);
  background: var(--fundo-2); color: var(--suave); font-size: .85rem; text-align: center; border-top: 3px solid var(--psd); }
.rodape p { margin: 0; }

@media (max-width: 380px) { .marca-nome { font-size: .9rem; } .reservada { padding: 0 10px; font-size: .8rem; } }
/* ecrãs largos e baixos (iPhone Duo aberto ~890×626, tablets ao alto): texto num campo à esquerda, que NUNCA passa do
   centro (onde fica a dobra do Duo), e a cena à direita */
@media (min-width: 760px) and (max-width: 899px) {
  .texto { max-width: 46vw; margin-left: 0; padding-top: 24px; }
  h1 { font-size: clamp(2.2rem, 5.4vw, 3.2rem); }
  .cena { left: 34%; width: 66%; height: 84%; -webkit-mask-image: linear-gradient(to right, transparent 4%, #000 24%); mask-image: linear-gradient(to right, transparent 4%, #000 24%); }
  .palco canvas { -webkit-mask-image: linear-gradient(to right, transparent 36%, #000 50%); mask-image: linear-gradient(to right, transparent 36%, #000 50%); }
}
@media (min-width: 900px) {
  :root { --gutter: 32px; }
  .selo img { width: 76px; }
  .texto { padding-top: 10vh; }
  h1 { max-width: 12.5ch; }
  /* a cena encosta-se à direita: o texto fica num campo limpo à esquerda */
  .cena { left: 26%; width: 74%; height: 86%; }
  /* o mesmo esbatido (30 %→45 % da largura da página) nos dois: a cena começa a 26 %, o canvas a 0 */
  .cena { -webkit-mask-image: linear-gradient(to right, transparent 5%, #000 26%); mask-image: linear-gradient(to right, transparent 5%, #000 26%); }
  .palco canvas { -webkit-mask-image: linear-gradient(to right, transparent 30%, #000 45%); mask-image: linear-gradient(to right, transparent 30%, #000 45%); }
}

/* movimento (só com movimento permitido): o castelo desenha-se e uma luz percorre-o; o Pixi substitui a luz */
@media (prefers-reduced-motion: no-preference) {
  .cena .contorno { stroke-dasharray: 1; stroke-dashoffset: 1; animation: desenha 2.4s .2s cubic-bezier(.6, .1, .2, 1) forwards; }
  .cena .luz { animation: percorre 6s 2.6s linear infinite, aparece .6s 2.6s forwards; }
  :root.pixi .cena .luz { animation: none; opacity: 0; }
  .texto > * { animation: sobe .8s cubic-bezier(.2, .7, .2, 1) both; }
  .texto > :nth-child(2) { animation-delay: .08s; } .texto > :nth-child(3) { animation-delay: .16s; } .texto > :nth-child(4) { animation-delay: .24s; }
  .breve::before { animation: pulsa 2.2s ease-in-out infinite; }
}
@keyframes desenha { to { stroke-dashoffset: 0; } }
@keyframes percorre { to { stroke-dashoffset: -1; } }
@keyframes aparece { to { opacity: .9; } }
@keyframes sobe { from { transform: translateY(14px); } }   /* sem opacity: o h1 conta para o LCP logo no 1.º desenho */
@keyframes pulsa { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .camada { transition: none; transform: none; } }