/* Letreiro — hand-painted azulejo lettering, after the street-name plaques and house numbers of Angra do Heroísmo
   (Regulamento Municipal de Toponímia, Anexo I and III). Real text stays in the page (readable, translatable);
   letreiro.js paints a copy on glazed tiles. */
@import url("https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:wght@700&display=swap");

:root {
  --az-cobalt: var(--cobalt, #1C4597);
  --az-navy: var(--navy, #0E2250);
  --az-glaze: #F5F0E4;            /* warm tin glaze, as on the tile pack */
  --az-grout: #D8D1C2;            /* lime grout */
  --az-ouro: #C38A26;             /* ochre-gold glaze: Azorean rococo, the gold of the flag */
  --az-basalto: #2A2A2D;          /* Terceira basalt, as round Angra's doors and in the calçada */
  --az-letra: "Libre Caslon Text", var(--f, Georgia), serif;   /* a plain Roman, as the regulation's "tipo de letra sugerido" */
  --az-ease: cubic-bezier(.2, .7, .2, 1);
}

/* the readable copy: kept for screen readers, search and the PT/EN switch */
.az-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- painted letters (shared) ---------- */
.az-c { display: inline-block; transform: translateY(var(--y, 0)) rotate(var(--r, 0deg)); }
.az-c::before {
  content: attr(data-l);
  color: color-mix(in srgb, var(--az-cobalt) var(--k, 50%), var(--az-navy));
  text-shadow: 0 0 .05em color-mix(in srgb, var(--az-cobalt) 30%, transparent);   /* cobalt bleeding into the glaze */
}
.az-w { display: inline-block; white-space: nowrap; }
.az-esp { display: inline-block; width: .3em; }

/* ---------- placa: Angra's street-name plaque, 12 tiles (4 x 3) or 20 tiles (5 x 4) ---------- */
.az-placa, .az-numero { --az-tile: clamp(54px, 7vw, 92px); display: block; width: fit-content; max-width: 100%; }
.az-placa .az-p, .az-numero .az-p {
  position: relative; display: block;
  width: calc(var(--cols, 3) * var(--t, 72px)); height: calc(var(--rows, 2) * var(--t, 72px));
  box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 calc(var(--t, 72px) * .05) calc(var(--t, 72px) * .14) rgba(20,30,60,.10);
}
.az-azulejos {
  position: absolute; inset: 0; display: grid; background: var(--az-grout);
  grid-template-columns: repeat(var(--cols, 3), 1fr); grid-template-rows: repeat(var(--rows, 2), 1fr);
}
.az-azulejos i { position: relative; overflow: hidden; transform: rotate(var(--j, 0deg)); }
.az-azulejos i::before {
  content: ""; position: absolute; inset: 0;
  background: var(--az-glaze) url("../tile-liso-512.webp") center / cover;
  transform: var(--tf, rotate(var(--q, 0deg))); filter: brightness(var(--b, 1));
}
/* border tiles: one painted corner, one edge (and a centre for the cartela), turned and mirrored into place.
   angra is Angra's own rounded floral border; faixa, acanto and cartela are mainland plaques */
[data-orla="angra"] i[data-p="canto"]::before { background-image: url("../orla-angra-canto-512.webp"); }
[data-orla="angra"] i[data-p="borda"]::before { background-image: url("../orla-angra-borda-512.webp"); }
[data-orla="faixa"] i[data-p="canto"]::before { background-image: url("../orla-faixa-canto-512.webp"); }
[data-orla="faixa"] i[data-p="borda"]::before { background-image: url("../orla-faixa-borda-512.webp"); }
[data-orla="acanto"] i[data-p="canto"]::before { background-image: url("../orla-acanto-canto-512.webp"); }
[data-orla="acanto"] i[data-p="borda"]::before { background-image: url("../orla-acanto-borda-512.webp"); }
[data-orla="cartela"] i[data-p="canto"]::before { background-image: url("../orla-cartela-canto-512.webp"); }
[data-orla="cartela"] i[data-p="borda"]::before { background-image: url("../orla-cartela-borda-512.webp"); }
[data-orla="cartela"] i[data-p="centro"]::before { background-image: url("../orla-cartela-centro-512.webp"); }
[data-orla="cartela"] .az-c::before { color: color-mix(in srgb, var(--az-navy) var(--k, 50%), #0A1838); }
.az-orla { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: url(#az-pincel); }
.az-texto {
  position: absolute; left: 50%; top: var(--ty, 50%); transform: translate(-50%, -50%);
  width: max-content; text-align: center;
  font-family: var(--az-letra); font-weight: 700; font-variant-numeric: lining-nums;
  letter-spacing: .03em; line-height: 1; filter: url(#az-pincel);
}
/* the name stacked, the joining word (DE, DA, DOS…) smaller on its own line */
.az-ln { display: block; font-size: calc(var(--t, 72px) * .5 * var(--fs, 1)); line-height: 1.04; }
.az-ln--liga { font-size: calc(var(--t, 72px) * .3 * var(--fs, 1)); line-height: 1.3; }
.az-l1 { display: block; }
.az-l2 { display: block; font-size: calc(var(--t, 72px) * .17 * var(--fs, 1)); letter-spacing: .12em; margin-top: calc(var(--t, 72px) * .1 * var(--fs, 1)); }
/* grout runs over the paint: letters are broken by the joints, as on a real panel */
.az-juntas {
  position: absolute; inset: 0; pointer-events: none; opacity: .6;
  --h: calc(var(--g, 2px) / 2);
  background:
    repeating-linear-gradient(90deg, var(--az-grout) 0 var(--h), transparent var(--h) calc(var(--t, 72px) - var(--h)), var(--az-grout) calc(var(--t, 72px) - var(--h)) var(--t, 72px)),
    repeating-linear-gradient(180deg, var(--az-grout) 0 var(--h), transparent var(--h) calc(var(--t, 72px) - var(--h)), var(--az-grout) calc(var(--t, 72px) - var(--h)) var(--t, 72px));
}

/* colourways (painted-line borders: az-placa--simples, az-placa--ouro, and the house numbers) */
.az-placa, .az-numero { --az-orla1: var(--az-cobalt); --az-orla2: var(--az-cobalt); --az-flor: var(--az-cobalt); }
.az-placa--ouro { --az-orla1: var(--az-ouro); --az-flor: var(--az-ouro); }
/* set in a basalt surround, like the cantaria round Angra's doors and windows */
.az-placa--basalto .az-p {
  margin: calc(var(--t, 72px) * .2);
  box-shadow: 0 0 0 calc(var(--t, 72px) * .2) var(--az-basalto),
              0 calc(var(--t, 72px) * .08) calc(var(--t, 72px) * .2) calc(var(--t, 72px) * .2) rgba(0,0,0,.18);
}

/* número: Angra's house number, one small white ceramic plate cut to an elongated octagon (Anexo III) */
.az-numero { --az-tile: clamp(44px, 5.5vw, 68px); filter: drop-shadow(0 calc(var(--az-tile) * .04) calc(var(--az-tile) * .08) rgba(20,30,60,.16)); }
.az-numero .az-p { box-shadow: none; background: var(--az-glaze) url("../tile-liso-512.webp") center / cover; }
.az-numero .az-l1 { font-size: calc(var(--t, 72px) * .6); letter-spacing: .01em; }
.az-numero.az-anim:not(.is-on) .az-p { opacity: 0; }
.az-numero.az-anim.is-on .az-p { animation: az-assenta .5s var(--az-ease) both; }

/* ---------- letras: one letter per tile, laid down one by one ---------- */
.az-letras { --az-tile: clamp(40px, 7.5vw, 84px); display: block; }
.az-letras .az-p { display: flex; flex-wrap: wrap; align-items: center; row-gap: calc(var(--az-tile) * .28); }
.az-letras .az-w {
  display: inline-flex; gap: max(1px, calc(var(--az-tile) * .028)); padding: max(1px, calc(var(--az-tile) * .028));
  background: var(--az-grout);
}
.az-letras .az-esp { width: calc(var(--az-tile) * .45); height: 1px; }
.az-t {
  position: relative; display: grid; place-items: center; flex: none;
  width: var(--az-tile); height: var(--az-tile); transform: rotate(var(--j, 0deg));
}
.az-t::after {   /* the tile: glaze, its own rim, and quarter flowers that meet the neighbours' */
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%231C4597'%3E%3Cg id='f'%3E%3Cellipse cx='0' cy='-6.5' rx='3.4' ry='6.2' transform='rotate(45)'/%3E%3Cellipse cx='0' cy='-6.5' rx='3.4' ry='6.2' transform='rotate(135)'/%3E%3Cellipse cx='0' cy='-6.5' rx='3.4' ry='6.2' transform='rotate(-45)'/%3E%3Cellipse cx='0' cy='-6.5' rx='3.4' ry='6.2' transform='rotate(-135)'/%3E%3C/g%3E%3Cuse href='%23f' x='100'/%3E%3Cuse href='%23f' y='100'/%3E%3Cuse href='%23f' x='100' y='100'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat,
    var(--az-glaze) url("../tile-liso-512.webp") center / cover;
  transform: rotate(var(--q, 0deg)); filter: brightness(var(--b, 1));
}
.az-t::before {
  content: attr(data-l); position: relative; z-index: 1;
  font: 700 calc(var(--az-tile) * .6) / 1 var(--az-letra); font-variant-numeric: lining-nums;
  color: color-mix(in srgb, var(--az-cobalt) var(--k, 50%), var(--az-navy));
  text-shadow: 0 0 .05em color-mix(in srgb, var(--az-cobalt) 30%, transparent);
  transform: translateY(var(--y, 0)) rotate(var(--r, 0deg)); filter: url(#az-pincel);
}
.az-letras--ouro .az-t::before { color: var(--az-ouro); }

/* ---------- tinta: painted letters with no tiles (headings over glaze or wall) ---------- */
.az-tinta .az-p { display: block; filter: url(#az-pincel-fino); }

/* ---------- motion: tiles set one by one, then the paint ---------- */
@keyframes az-assenta { from { opacity: 0; transform: translateY(-12%) rotate(calc(var(--j, 0deg) * 6)) scale(1.05); } }
@keyframes az-pinta { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
.az-anim:not(.is-on) .az-azulejos i, .az-anim:not(.is-on) .az-t, .az-anim:not(.is-on) .az-c,
.az-anim:not(.is-on) .az-orla { opacity: 0; }
.az-anim.is-on .az-azulejos i, .az-anim.is-on .az-t { animation: az-assenta .5s var(--az-ease) both; animation-delay: calc(var(--n, 0) * 55ms); }
.az-anim.is-on .az-t::before { animation: az-pinta .45s ease-out both; animation-delay: calc(var(--n, 0) * 55ms + 260ms); }
.az-anim.is-on .az-c { animation: az-pinta .4s ease-out both; animation-delay: calc(var(--d0, 0ms) + var(--i, 0) * 45ms); }
.az-anim.is-on .az-orla { animation: az-pinta .9s ease-out both; animation-delay: var(--d0, 0ms); }
.az-feito .az-azulejos i, .az-feito .az-t, .az-feito .az-t::before, .az-feito .az-c, .az-feito .az-orla,
.az-numero.az-feito .az-p { animation: none !important; opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) {
  .az-anim .az-azulejos i, .az-anim .az-t, .az-anim .az-t::before, .az-anim .az-c, .az-anim .az-orla,
  .az-numero.az-anim .az-p { animation: none !important; opacity: 1 !important; }
}