/* LocaliPet — cenas do usuário, sem stickers e sem animações.
   Arquivos de arte: public/pet-scene-*.webp, sempre com canal alpha.
   NÃO substituir mapas, fotografias cadastradas ou identidade da marca. */
.shell[data-locali-route] {
  --pet-story-photo: url('/pet-scene-garden.webp');
  --pet-story-height: 210px;
  --pet-story-bottom: -12px;
  --pet-story-position: center bottom;
  --pet-story-scale: contain;
}
.shell[data-locali-route="pets"] { --pet-story-photo: url('/pet-scene-home.webp'); --pet-story-height: 248px; }
.shell[data-locali-route="painel"] { --pet-story-photo: url('/pet-scene-diary.webp'); --pet-story-height: 186px; }
.shell[data-locali-route="mapa"] { --pet-story-photo: url('/pet-scene-explore.webp'); --pet-story-height: 128px; }
.shell[data-locali-route="protecao"] { --pet-story-photo: url('/pet-scene-protection.webp'); --pet-story-height: 190px; }
.shell[data-locali-route="busca"] { --pet-story-photo: url('/pet-scene-lost.webp'); --pet-story-height: 180px; }
.shell[data-locali-route="configuracoes"] { --pet-story-photo: url('/pet-scene-bird.webp'); --pet-story-height: 117px; }
.shell[data-locali-route="historico"] { --pet-story-photo: url('/pet-scene-history.webp'); --pet-story-height: 150px; }
.shell[data-locali-route="perdido"] { --pet-story-photo: url('/pet-scene-lost.webp'); --pet-story-height: 150px; }
.shell[data-locali-route="recentes"] { --pet-story-photo: url('/pet-scene-garden.webp'); --pet-story-height: 140px; }
/* O tutor pode optar por um protagonista; o padrão mostra as espécies
   em telas diferentes para não comunicar 'LocaliDog'. */
.shell[data-pet-story="cat"] { --pet-story-photo: url('/pet-scene-history.webp'); }
.shell[data-pet-story="bird"] { --pet-story-photo: url('/pet-scene-bird.webp'); }
.shell[data-pet-story="dog"] { --pet-story-photo: url('/pet-scene-home.webp'); }
.shell[data-pet-story="dog"][data-locali-route="painel"] { --pet-story-photo: url('/pet-scene-diary.webp'); }
.shell[data-pet-story="dog"][data-locali-route="mapa"] { --pet-story-photo: url('/pet-scene-explore.webp'); }
.shell[data-pet-story="dog"][data-locali-route="busca"] { --pet-story-photo: url('/pet-scene-lost.webp'); }
/* Cena orgânica: um único desenho transparente fundido à própria seção,
   sem fundo retangular, moldura, sombra, object-fit:cover ou movimento. */
.shell[data-locali-route] .page-heading {
  position: relative;
  isolation: isolate;
  background: none;
  overflow: visible;
}
.shell[data-locali-route] .page-heading::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: auto -24px -10px;
  height: calc(var(--pet-story-height) * .8);
  pointer-events: none;
  background: radial-gradient(ellipse 92% 64% at 50% 90%, rgba(187,227,207,.37),transparent 90%);
  mask-image: linear-gradient(to bottom,transparent,#000 45%,#000);
}
.shell[data-locali-route] .page-heading::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: auto;
  left: -12px;
  right: -12px;
  bottom: var(--pet-story-bottom);
  width: auto;
  max-width: none;
  height: var(--pet-story-height);
  border: 0;
  border-radius: 0;
  opacity: 1;
  background: var(--pet-story-photo) var(--pet-story-position) / var(--pet-story-scale) no-repeat;
  pointer-events: none;
  transform: none;
  animation: none !important;
  -webkit-mask-image: linear-gradient(to bottom,#000 0%,#000 80%,transparent 100%);
  mask-image: linear-gradient(to bottom,#000 0%,#000 80%,transparent 100%);
}
.shell[data-locali-route="pets"] .page-heading {
  min-height: 278px;
  padding: 8px 0 204px;
  margin-bottom: 8px;
}
.shell[data-locali-route="painel"] .page-heading {
  min-height: 200px;
  padding: 8px 0 137px;
  margin-bottom: 8px;
}
.shell[data-locali-route="protecao"] .page-heading {
  min-height: 210px;
  padding: 8px 0 153px;
  margin-bottom: 8px;
}
.shell[data-locali-route="busca"] .page-heading {
  min-height: 201px;
  padding: 8px 0 136px;
}
.shell[data-locali-route="configuracoes"] .page-heading {
  min-height: 142px;
  padding: 9px 117px 30px 0;
  margin-bottom: 6px;
}
.shell[data-locali-route="configuracoes"] .page-heading::after {
  left: auto;
  right: 0;
  bottom: 6px;
  width: 120px;
  height: 123px;
}
.shell[data-locali-route="mapa"] .page-heading {
  min-height: 92px;
  padding: 6px 133px 6px 0;
  margin-bottom: 5px;
}
.shell[data-locali-route="mapa"] .page-heading::after {
  left: auto;
  right: -7px;
  bottom: 0;
  width: 139px;
  height: 98px;
}
.shell[data-locali-route="mapa"] .page-heading::before { display: none; }
/* A imagem está na seção real — o mapa e suas ações conservam gestos,
   posição, tiles, controles, overlay e o cálculo flex de 100dvh. */
.shell[data-locali-route="mapa"] .pet-map-stage,
.shell[data-locali-route="mapa"] .pet-map-stage .map { min-height: 0; }
/* Cenas das ocorrências e do modo perdido não invadem formulários/botões. */
.shell[data-locali-route="protecao"] .pet-lost-mode-illustration {
  z-index: 0;
  height: 173px;
  background: url('/pet-scene-lost.webp') center bottom / auto 170px no-repeat;
  pointer-events: none;
}
.shell[data-locali-route="protecao"] .pet-lost-mode-copy,
.shell[data-locali-route="protecao"] .pet-lost-mode-story > .button { z-index: 1; }
.shell[data-locali-route="protecao"] .protection-history {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-bottom: 171px;
}
.shell[data-locali-route="protecao"] .protection-history::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  right: 0;
  height: 170px;
  background: url('/pet-scene-history.webp') center bottom / auto 160px no-repeat;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom,transparent 0%,#000 25%,#000);
  mask-image: linear-gradient(to bottom,transparent 0%,#000 25%,#000);
}
/* Preferência ilustrativa local, não muda cadastro nem espécie biológica. */
.pet-story-settings { display: grid; gap: 11px; }
.pet-story-settings h2 { margin: 0; font-size: 19px; }
.pet-story-settings p { margin: 0; color: #57766e; font-size: 13px; line-height: 1.5; }
.pet-story-settings select {
  width: 100%; min-height: 45px; border: 1px solid #b6d5c8; border-radius: 14px;
  background: rgba(255,255,255,.69); color: #073e43; padding: 8px 12px;
  font: inherit; font-weight: 800;
}
.pet-story-settings select:focus-visible { outline: 3px solid #e9ab96; outline-offset: 2px; }
/* Native illustration assets are 1200x900 (4:3) and alpha cutout; no cover
   on mobile heroes (that would chop off heads/branches). */
@media (max-width: 899px) {
  .shell[data-locali-route="pets"] .page-heading { min-height: 274px; padding-bottom: 201px; }
  .shell[data-locali-route="pets"] .page-heading::after { height: 246px; bottom: -9px; }
  .shell[data-locali-route="painel"] .page-heading { min-height: 194px; padding-bottom: 132px; }
  .shell[data-locali-route="painel"] .page-heading::after { height: 191px; bottom: -8px; }
  .shell[data-locali-route="protecao"] .page-heading { min-height: 198px; padding-bottom: 143px; }
  .shell[data-locali-route="protecao"] .page-heading::after { height: 190px; bottom: -7px; }
  .shell[data-locali-route="mapa"] .page-heading { min-height: 89px; padding: 3px 126px 5px 0; }
  .shell[data-locali-route="mapa"] .page-heading::after { width: 130px; height: 100px; }
  .shell[data-locali-route="mapa"] .map-page-actions { margin-top: 7px; }
}
@media (max-width: 360px) {
  .shell[data-locali-route="mapa"] .page-heading { padding-right: 102px; min-height: 78px; }
  .shell[data-locali-route="mapa"] .page-heading::after { width: 102px; height: 81px; }
  .shell[data-locali-route="pets"] .page-heading::after { height: 219px; }
  .shell[data-locali-route="pets"] .page-heading { min-height: 244px; padding-bottom: 180px; }
}
@media (max-width: 899px) and (max-height: 690px) {
  .shell[data-locali-route="mapa"] .page-heading { min-height: 65px; padding-right: 100px; }
  .shell[data-locali-route="mapa"] .page-heading::after { width: 100px; height: 70px; }
}
/* Large screens keep scenes at editorial scale, never blown up and pixelated. */
@media (min-width: 900px) {
  .shell[data-locali-route="pets"] .page-heading,
  .shell[data-locali-route="painel"] .page-heading,
  .shell[data-locali-route="protecao"] .page-heading { max-height: none; }
  .shell[data-locali-route] .page-heading::after { background-size: contain; }
  .shell[data-locali-route="pets"] .page-heading::after { width: 450px; height: 265px; left: auto; right: 8%; bottom: 0; }
  .shell[data-locali-route="painel"] .page-heading::after { width: 330px; height: 228px; left: auto; right: 8%; bottom: 0; }
  .shell[data-locali-route="protecao"] .page-heading::after { width: 360px; height: 237px; left: auto; right: 8%; bottom: 0; }
  .shell[data-locali-route="configuracoes"] .page-heading::after { width: 135px; height: 125px; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .shell[data-locali-route] .page-heading::before { display: none; }
}
@media print {
  .shell[data-locali-route] .page-heading::after { animation: none !important; }
}