/* Entrada "A Assinatura" (página inicial) */
html:not(.intro-on) .intro{display:none}
html.intro-on body{overflow:hidden}
.intro{
  position:fixed;inset:0;z-index:60;
  display:grid;place-items:center;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
  padding-block:calc(24px + env(safe-area-inset-top,0px)) calc(24px + env(safe-area-inset-bottom,0px));
  background:var(--paper);
  transition:background-color .6s ease;
}
.intro.leaving{background-color:rgba(244,242,251,0);pointer-events:none}
.intro .stage{width:min(1080px, 100%);position:relative;transform-origin:0 0}
.intro .stage svg{display:block;width:100%;height:auto;overflow:visible}
.intro .mark-hit{cursor:pointer}
.intro .controls{
  position:absolute;left:0;right:0;bottom:calc(-1 * clamp(70px, 12vh, 120px));
  display:flex;justify-content:center;gap:12px;flex-wrap:wrap;
  opacity:0;transform:translateY(8px);transition:opacity .6s ease, transform .6s ease;
  pointer-events:none;
}
.intro .controls.show{opacity:1;transform:none;pointer-events:auto}
.intro .skip{
  position:absolute;
  top:calc(18px + env(safe-area-inset-top,0px));
  right:max(18px, calc(env(safe-area-inset-right,0px) + 18px));
  font:500 11px/1 var(--f-ui);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-soft);background:none;border:0;padding:10px 4px;cursor:pointer;opacity:.75;
  transition:opacity .3s;
}
.intro .skip:hover{opacity:1}
.intro .skip.gone{opacity:0;pointer-events:none}