/* Tela de entrada: abertura animada + formulários de conta. */

#splash {
  position: fixed; inset: 0; z-index: 200; background: #000;
  display: grid; place-items: center; overflow: hidden;
}
#splash.gone { opacity: 0; pointer-events: none; transition: opacity .55s ease; }

.sp-dots { position: absolute; inset: 0; opacity: .13;
  background-image: radial-gradient(#6B3FA0 1.6px, transparent 1.7px); background-size: 17px 17px; }

.sp-enso {
  position: absolute; width: min(430px, 62vw); aspect-ratio: 1; border-radius: 50%;
  border: 17px solid #5A3392; border-right-color: transparent; border-top-color: var(--purple);
  transform: rotate(-125deg) scale(.35); opacity: 0;
  animation: sp-enso 1s cubic-bezier(.2,.8,.3,1) .1s forwards;
}
@keyframes sp-enso { to { transform: rotate(26deg) scale(1); opacity: .5; } }

.sp-line {
  position: absolute; left: 50%; top: 50%; width: 44vw; height: 2px; background: var(--paper);
  transform-origin: 0 50%; opacity: 0; animation: sp-line .55s ease-out forwards;
}
@keyframes sp-line {
  0%   { opacity: 0;  transform: var(--rot) translateX(9vw)  scaleX(.08); }
  45%  { opacity: .7; }
  100% { opacity: 0;  transform: var(--rot) translateX(30vw) scaleX(1.1); }
}

.sp-sweep {
  position: absolute; left: -45%; width: 55%; height: 46vh; background: var(--paper);
  transform: skewX(-14deg); opacity: 0;
  animation: sp-sweep .68s cubic-bezier(.5,0,.3,1) .5s forwards;
}
@keyframes sp-sweep {
  0% { opacity: .92; left: -45%; } 70% { opacity: .92; } 100% { opacity: 0; left: 112%; }
}

.sp-mark { position: relative; z-index: 3; text-align: center; }
.sp-logo {
  display: block; width: min(560px, 74vw); mix-blend-mode: screen;
  clip-path: inset(0 100% 0 0); animation: sp-rev .6s cubic-bezier(.3,0,.2,1) .76s forwards;
}
@keyframes sp-rev { to { clip-path: inset(0 -3% 0 0); } }

.sp-seal {
  position: absolute; right: 2%; top: 4%; width: 54px; height: 54px;
  background: var(--crimson); color: #FFF0F0; display: grid; place-items: center;
  font-size: 29px; border-radius: 5px; transform: rotate(-9deg) scale(2.8); opacity: 0;
  animation: sp-seal .28s cubic-bezier(.4,1.6,.5,1) 1.24s forwards;
}
@keyframes sp-seal { to { transform: rotate(-9deg) scale(1); opacity: 1; } }

.sp-tag { margin-top: 6px; font-size: 13px; color: var(--text2); letter-spacing: .18em;
          text-transform: uppercase; opacity: 0; animation: sp-fade .5s ease-out 1.4s forwards; }
.sp-cta { margin-top: 26px; display: flex; gap: 10px; justify-content: center;
          opacity: 0; animation: sp-fade .5s ease-out 1.6s forwards; }
@keyframes sp-fade { to { opacity: 1; } }
.sp-cta button { font-size: 14px; padding: 11px 24px; border-radius: var(--r); }
.sp-cta .go  { background: var(--crimson); color: #FFF0F0; font-weight: 500; }
.sp-cta .go:hover { background: var(--crimson-hi); }
.sp-cta .alt { border: 1px solid var(--line2); color: var(--text2); }
.sp-cta .alt:hover { border-color: var(--purple-line); color: var(--text); }
.sp-foot { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center;
           font-size: 11px; color: var(--text4); letter-spacing: .12em;
           opacity: 0; animation: sp-fade .5s ease-out 1.8s forwards; }
.sp-skip { position: absolute; top: 18px; right: 20px; font-size: 12px; color: var(--text4); z-index: 4; }
.sp-skip:hover { color: var(--text2); }

@media (prefers-reduced-motion: reduce) {
  #splash * { animation: none !important; opacity: 1 !important;
              clip-path: none !important; transform: none !important; }
  .sp-line, .sp-sweep { display: none; }
  .sp-enso { opacity: .5 !important; }
}

/* ---------- porta de entrada ---------- */
#porta { min-height: 100vh; display: grid; place-items: center; padding: 30px 20px; position: relative; }
#porta .fundo {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(760px, 88%); mix-blend-mode: screen; opacity: .09; pointer-events: none;
}
.caixa {
  position: relative; z-index: 2; width: 100%; max-width: 372px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 26px 24px;
}
.caixa .marca { display: block; height: 30px; width: auto; margin: 0 auto 20px;
                mix-blend-mode: screen; }
.caixa h1 { font-family: var(--f-d); font-size: 22px; transform: skewX(-8deg);
            text-align: center; margin-bottom: 5px; }
.caixa .sub { text-align: center; font-size: 13px; color: var(--text3); margin-bottom: 20px; line-height: 1.5; }
.campos { display: flex; flex-direction: column; gap: 11px; }
.campos label { font-size: 12px; color: var(--text3); margin-bottom: 4px; display: block; }
.caixa .enviar { width: 100%; padding: 11px; border-radius: var(--r); font-size: 14px;
                 background: var(--crimson); color: #FFF0F0; font-weight: 500; margin-top: 16px; }
.caixa .enviar:hover { background: var(--crimson-hi); }
.caixa .enviar:disabled { opacity: .55; cursor: default; }
.troca { text-align: center; font-size: 13px; color: var(--text3); margin-top: 16px; }
.troca button { color: var(--purple-soft); text-decoration: underline; text-underline-offset: 3px; }
.aviso { margin-top: 13px; font-size: 12.5px; line-height: 1.5; padding: 9px 11px; border-radius: 6px; display: none; }
.aviso.on { display: block; }
.aviso.erro { background: var(--crimson-dim); color: var(--crimson-soft); }
.aviso.bom  { background: rgba(62,158,114,.16); color: var(--ok); }
.forca { height: 3px; border-radius: 2px; background: var(--panel2); margin-top: 6px; overflow: hidden; }
.forca span { display: block; height: 100%; width: 0; transition: width .2s, background .2s; }
.regra { font-size: 11.5px; color: var(--text4); margin-top: 5px; }

/* ---------- lista de obras ---------- */
#obras { min-height: 100vh; padding: 22px; display: none; }
#obras.on { display: block; }
.obras-wrap { max-width: 940px; margin: 0 auto; }
.obras-top { display: flex; align-items: center; gap: 11px; margin-bottom: 24px; }
.obras-top .quem { font-size: 12.5px; color: var(--text3); }
.obras-h { display: flex; align-items: baseline; gap: 11px; margin-bottom: 15px; }
.obras-h h2 { font-family: var(--f-d); font-size: 24px; transform: skewX(-8deg); color: var(--paper); }
.obras-h span { font-size: 13px; color: var(--text3); }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 11px; }
.obra {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 13px 14px; text-align: left; position: relative;
}
.obra:hover { border-color: var(--purple-line); }
.obra .nome { font-size: 14.5px; font-weight: 500; color: var(--paper); margin-bottom: 4px;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obra .meta { font-size: 11.5px; color: var(--text3); font-family: var(--f-m); }
.obra .apagar { position: absolute; top: 9px; right: 10px; color: var(--text4); font-size: 15px; line-height: 1; }
.obra .apagar:hover { color: var(--crimson-soft); }
.nova {
  border: 1px dashed var(--line2); border-radius: var(--r-lg); padding: 13px 14px;
  color: var(--text3); display: grid; place-items: center; min-height: 74px; font-size: 13px;
}
.nova:hover { border-color: var(--purple-line); color: var(--purple-soft); }
.vazio { color: var(--text4); font-size: 13.5px; line-height: 1.7; padding: 26px 2px; }