/* MOTOR DE CONVITES — Depth Engine 2.0
   Parallax em camadas + ambiente leve, sem depender de bibliotecas externas.
   O JS define data-depth-parallax, data-depth-ambience e data-depth-density. */
:root{
  --depth-bg-x:0px;
  --depth-bg-y:0px;
  --depth-content-x:0px;
  --depth-content-y:0px;
  --depth-front-x:0px;
  --depth-front-y:0px;
  --depth-bg-scale:1.025;
  --depth-transition:220ms;
}

/* O fundo ganha uma pequena margem de segurança para não revelar bordas ao mover. */
html:not([data-depth-parallax="none"]) .screen .screen-bg{
  /* Overscan fisico: a imagem cobre as bordas mesmo durante o deslocamento.
     'scale' isolada, sem overscan, revelava o fundo solido nas laterais. */
  width:calc(100% + 112px)!important;
  max-width:none!important;
  height:calc(100% + 112px)!important;
  top:-56px!important;
  left:50%!important;
  right:auto!important;
  object-fit:cover;
  translate:var(--depth-bg-x) var(--depth-bg-y);
  scale:var(--depth-bg-scale);
  transform-origin:50% 50%;
  transition:translate var(--depth-transition) cubic-bezier(.2,.72,.2,1),scale var(--depth-transition) cubic-bezier(.2,.72,.2,1);
  will-change:translate,scale;
}

/* Camada intermediária: conteúdo se move pouco para preservar leitura. */
html:not([data-depth-parallax="none"]) .screen.is-active .page-wrap,
html:not([data-depth-parallax="none"]) .screen.is-active .splash-content{
  translate:var(--depth-content-x) var(--depth-content-y);
  transition:translate var(--depth-transition) cubic-bezier(.2,.72,.2,1);
  will-change:translate;
}

/* Foreground: personagens reagem um pouco mais que o conteúdo. */
html:not([data-depth-parallax="none"]) .screen.is-active .splash-character-stage,
html:not([data-depth-parallax="none"]) .screen.is-active .home-characters,
html:not([data-depth-parallax="none"]) .screen.is-active .about-character-stage{
  translate:var(--depth-front-x) var(--depth-front-y);
  transition:translate var(--depth-transition) cubic-bezier(.2,.72,.2,1);
  will-change:translate;
}

/* Intensidades: o JS produz valores normalizados; o CSS controla a escala visual. */
html[data-depth-parallax="subtle"]{--depth-bg-scale:1.025}
html[data-depth-parallax="medium"]{--depth-bg-scale:1.045}
html[data-depth-parallax="deep"]{--depth-bg-scale:1.065}

.depth-ambience{
  position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;
  contain:layout paint style;
}
.depth-ambience__item{
  position:absolute;left:var(--x);top:108%;opacity:0;
  animation:depthFloat var(--duration) linear var(--delay) infinite;
  will-change:transform,opacity;
}

html[data-depth-ambience="sparkles"] .depth-ambience__item{
  width:var(--size);height:var(--size);border-radius:50%;
  background:radial-gradient(circle,#fff 0 18%,color-mix(in srgb,var(--theme-accent,#ffd166) 82%,#fff 18%) 20% 44%,transparent 68%);
  filter:drop-shadow(0 0 7px color-mix(in srgb,var(--theme-accent,#ffd166) 72%,transparent));
}
html[data-depth-ambience="leaves"] .depth-ambience__item{
  width:calc(var(--size) * 1.35);height:var(--size);border-radius:80% 12% 80% 12%;
  background:color-mix(in srgb,var(--theme-primary,#4f79ff) 72%,#7aa84c 28%);
  transform-origin:50% 50%;
}
html[data-depth-ambience="orbs"] .depth-ambience__item{
  width:calc(var(--size) * 2.1);height:calc(var(--size) * 2.1);border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--theme-accent,#ffd166) 38%,#fff 30%) 0 12%,color-mix(in srgb,var(--theme-primary,#4f79ff) 20%,transparent) 42%,transparent 72%);
  filter:blur(1.5px);
}

@keyframes depthFloat{
  0%{opacity:0;translate:0 0;rotate:0deg}
  12%{opacity:var(--opacity)}
  50%{translate:var(--drift) -56vh;rotate:160deg}
  88%{opacity:var(--opacity)}
  100%{opacity:0;translate:calc(var(--drift) * -0.55) -122vh;rotate:340deg}
}

/* Em telas compactas, o ambiente fica ainda mais discreto. */
@media(max-width:480px){
  .depth-ambience{opacity:.72}
}

/* Acessibilidade/economia: profundidade nunca é requisito funcional. */
@media(prefers-reduced-motion:reduce){
  .depth-ambience{display:none!important}
  .screen .screen-bg,.screen .page-wrap,.screen .splash-content,.screen .splash-character-stage,.screen .home-characters,.screen .about-character-stage{
    translate:none!important;scale:none!important;transition:none!important;will-change:auto!important;
  }
}
/* Safari e Aventura Canina não usam translateX(-50%) no mobile.
   Como o overscan amplia o fundo, centralizamos pelo left, sem tocar no
   transform usado para zoom/transição de cada tema. Conto Encantado já
   possui translateX(-50%) estrutural e por isso mantém o left:50%. */
@media(max-width:699px){
  html:is([data-template="safari"],[data-template="aventura-canina"]):not([data-depth-parallax="none"]) .screen .screen-bg{left:-56px!important;}
}