/*
  Wortic macOS UI Kit — Auth / Aurora (entrar sem senha, tela única)
  wm-auth-aurora — a experiência passwordless da v2 trazida fiel para o kit:
  fundo "aurora" vivo (4 blobs borrados + grão), cartão de vidro, marca
  animada, e um fluxo de TRÊS passos num só cartão (e-mail -> código ->
  sucesso) com a animação de "transferência" carta->casa entre os passos.

  PORTE FIEL: o visual é o de central.wortic.com.br (v2, _LOGIN_HTML). Para
  bater pixel a pixel, as cores de assinatura da aurora ficam em custom
  properties LOCAIS deste componente (--wm-aurora-*), com o MESMO hex da v2.
  É a exceção que o AGENTS.md prevê ("se precisou de um valor literal, defina-o
  num custom property local"): estas cores são a identidade da tela, não um
  token do sistema. Todo o resto é namespaced .wm-auth-aurora / __ (BEM).

  Sem janela macOS: cartão centrado, como auth-login/auth-otp (veto do Will).
*/

@layer components {
  /* ---------- raiz + cores de assinatura (hex idêntico à v2) ---------- */
  .wm-auth-aurora {
    /* azuis, ciano e violeta da aurora — a paleta que faz a tela ser "aquela" */
    --wm-aurora-azul: #1d59f0;
    --wm-aurora-azul2: #2f6ff0;
    --wm-aurora-azul-claro: #8fc0ff;
    --wm-aurora-ciano: #63d2ff;
    --wm-aurora-violeta: #8a7bff;
    --wm-aurora-tinta: #0e1730;
    --wm-aurora-tinta2: #4a5578;
    --wm-aurora-linha: rgba(23, 50, 102, 0.12);
    --wm-aurora-vidro: rgba(255, 255, 255, 0.58);
    --wm-aurora-vidro-borda: rgba(255, 255, 255, 0.85);
    --wm-aurora-fundo: #eaf0fb;
    --wm-aurora-verde: #2fae7a;
    --wm-aurora-verde2: #1f9c6a;
    --wm-aurora-erro: #e0525f;
    --wm-aurora-erro-texto: #c0384a;

    position: relative;
    isolation: isolate;
    min-height: 100dvh;
    overflow: hidden;
    background: var(--wm-aurora-fundo);
    color: var(--wm-aurora-tinta);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Inter, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  /* ---------- aurora viva ---------- */
  .wm-auth-aurora__aurora {
    position: absolute;
    inset: -20% -10% -10% -10%;
    z-index: 0;
    filter: blur(58px) saturate(1.25);
    pointer-events: none;
  }
  .wm-auth-aurora__blob {
    position: absolute;
    display: block;
    border-radius: 50%;
    opacity: 0.55;
    will-change: transform;
  }
  .wm-auth-aurora__blob--1 {
    width: 46vw; height: 46vw; left: -6vw; top: -8vw;
    background: radial-gradient(circle at 30% 30%, var(--wm-aurora-azul) 0, rgba(29, 89, 240, 0) 68%);
    animation: wm-aurora-flo1 26s ease-in-out infinite;
  }
  .wm-auth-aurora__blob--2 {
    width: 42vw; height: 42vw; right: -8vw; top: 6vw;
    background: radial-gradient(circle at 60% 40%, var(--wm-aurora-ciano) 0, rgba(99, 210, 255, 0) 66%);
    opacity: 0.5;
    animation: wm-aurora-flo2 32s ease-in-out infinite;
  }
  .wm-auth-aurora__blob--3 {
    width: 50vw; height: 50vw; left: 12vw; bottom: -22vw;
    background: radial-gradient(circle at 50% 50%, var(--wm-aurora-violeta) 0, rgba(138, 123, 255, 0) 68%);
    opacity: 0.42;
    animation: wm-aurora-flo3 30s ease-in-out infinite;
  }
  .wm-auth-aurora__blob--4 {
    width: 34vw; height: 34vw; right: 6vw; bottom: -10vw;
    background: radial-gradient(circle at 40% 40%, var(--wm-aurora-azul-claro) 0, rgba(143, 192, 255, 0) 66%);
    opacity: 0.5;
    animation: wm-aurora-flo1 24s ease-in-out infinite reverse;
  }
  @keyframes wm-aurora-flo1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(4vw,3vw) scale(1.12)} }
  @keyframes wm-aurora-flo2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-5vw,4vw) scale(1.08)} }
  @keyframes wm-aurora-flo3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(3vw,-4vw) scale(1.14)} }

  /* ---------- parallax do mouse: usa a propriedade `translate` (SEPARADA de
     transform), entao COMPOE com o float das keyframes sem quebra-lo. Cada
     blob tem profundidade diferente -> paralaxe. Gated em reduced-motion. ---------- */
  .wm-auth-aurora { --wm-aurora-mx: 0; --wm-aurora-my: 0; }
  .wm-auth-aurora__blob { transition: translate .5s cubic-bezier(.2, .8, .2, 1); will-change: transform, translate; }
  .wm-auth-aurora__blob--1 { translate: calc(var(--wm-aurora-mx) * 34px) calc(var(--wm-aurora-my) * 34px); }
  .wm-auth-aurora__blob--2 { translate: calc(var(--wm-aurora-mx) * -26px) calc(var(--wm-aurora-my) * -22px); }
  .wm-auth-aurora__blob--3 { translate: calc(var(--wm-aurora-mx) * 44px) calc(var(--wm-aurora-my) * 30px); }
  .wm-auth-aurora__blob--4 { translate: calc(var(--wm-aurora-mx) * -30px) calc(var(--wm-aurora-my) * 38px); }
  @media (prefers-reduced-motion: reduce) { .wm-auth-aurora__blob { translate: none !important; transition: none; } }

  .wm-auth-aurora__grain {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* ---------- palco + cartão ---------- */
  .wm-auth-aurora__stage {
    position: relative;
    z-index: 2;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    gap: 16px;
  }
  .wm-auth-aurora__card {
    width: 100%;
    max-width: 420px;
    background: var(--wm-aurora-vidro);
    backdrop-filter: blur(30px) saturate(1.5);
    -webkit-backdrop-filter: blur(30px) saturate(1.5);
    border: 1px solid var(--wm-aurora-vidro-borda);
    border-radius: 28px;
    padding: 36px 36px 36px;
    box-shadow:
      0 34px 90px -26px rgba(20, 45, 110, 0.42),
      0 2px 8px rgba(20, 45, 110, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.75);
    animation: wm-aurora-entra 0.6s cubic-bezier(.16, 1, .3, 1) both;
    overflow: hidden;
    position: relative;
  }
  .wm-auth-aurora__card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 28px;
    pointer-events: none;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.35), transparent 42%);
  }
  @keyframes wm-aurora-entra { from{opacity:0;transform:translateY(14px) scale(.985)} to{opacity:1;transform:none} }

  /* ---------- marca animada ---------- */
  .wm-auth-aurora__brand {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }
  .wm-auth-aurora__brand::before {
    /* glow azul de fundo removido (pedido do founder) — sem borrao atras da logo */
    content: none;
  }
  @keyframes wm-aurora-aura {
    0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(.82)}
    50%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}
  }
  .wm-auth-aurora__mark {
    position: relative;
    z-index: 1;
    display: block;
    animation: wm-aurora-monta 1.15s cubic-bezier(.18, 1, .3, 1) both;
  }
  .wm-auth-aurora__mark svg,
  .wm-auth-aurora__mark img {
    height: 38px;
    width: auto;
    display: block;
    animation: wm-aurora-respira 5.5s 1.15s ease-in-out infinite;
  }
  @keyframes wm-aurora-monta {
    0%{opacity:0;transform:scale(.42) rotate(-48deg)}
    62%{opacity:1;transform:scale(1.1) rotate(6deg)}
    100%{opacity:1;transform:scale(1) rotate(0)}
  }
  @keyframes wm-aurora-respira {
    0%,100%{transform:translateY(0) scale(1)}
    50%{transform:translateY(-2px) scale(1.045)}
  }
  .wm-auth-aurora__mark::after {
    /* efeito vidro/gloss removido (pedido do founder) — sem brilho sobre a logo */
    content: none;
  }
  @keyframes wm-aurora-gloss { 0%,74%{background-position:130% 0} 92%,100%{background-position:-50% 0} }

  /* ---------- textos ---------- */
  .wm-auth-aurora__title {
    font-size: clamp(22px, 4.4vw, 26px);
    font-weight: 700;
    letter-spacing: -.02em;
    text-align: center;
    margin: 0 0 6px;
    text-wrap: balance;
  }
  .wm-auth-aurora__sub {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--wm-aurora-tinta2);
    text-align: center;
    margin: 0 auto 20px;
    max-width: none;
    text-wrap: balance;
  }
  .wm-auth-aurora__sub strong { color: var(--wm-aurora-tinta); font-weight: 650; }

  /* ---------- passos (transição + entrada em cascata) ---------- */
  .wm-auth-aurora__step { position: relative; }
  @keyframes wm-aurora-passo { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
  .wm-auth-aurora__step--sai { animation: wm-aurora-passo-sai .32s ease forwards; }
  @keyframes wm-aurora-passo-sai { to{opacity:0;transform:translateY(-12px)} }
  .wm-auth-aurora__step[hidden] { display: none !important; }

  /* reveal escalonado (marca -> título+subtítulo -> controles -> link/rodapé).
     Os campos ficam de fora do stagger de propósito: assim trocar a aba
     e-mail/WhatsApp não re-anima o input. */
  @keyframes wm-aurora-surge { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
  .wm-auth-aurora__title,
  .wm-auth-aurora__sub,
  .wm-auth-aurora__tabs,
  .wm-auth-aurora__error,
  .wm-auth-aurora__cta,
  .wm-auth-aurora__acoes,
  .wm-auth-aurora__footer {
    animation: wm-aurora-surge .55s cubic-bezier(.16, 1, .3, 1) both;
  }
  .wm-auth-aurora__title  { animation-delay: .08s; }
  .wm-auth-aurora__sub    { animation-delay: .14s; }
  .wm-auth-aurora__tabs   { animation-delay: .22s; }
  .wm-auth-aurora__error  { animation-delay: .30s; }
  .wm-auth-aurora__cta    { animation-delay: .30s; }
  .wm-auth-aurora__acoes  { animation-delay: .38s; }
  .wm-auth-aurora__footer { animation-delay: .44s; }

  /* ---------- campos glass ---------- */
  .wm-auth-aurora__field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    background: rgba(255, 255, 255, 0.66);
    border: 1px solid var(--wm-aurora-linha);
    border-radius: 16px;
    padding: 0 16px;
    height: 56px;
    transition: border-color .25s, background .25s, box-shadow .25s;
  }
  .wm-auth-aurora__field[hidden]{ display:none !important; }
  .wm-auth-aurora__field svg {
    width: 19px; height: 19px;
    color: #7d88a6;
    flex: none;
    transition: color .25s;
  }
  .wm-auth-aurora__field input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: 16px;
    color: var(--wm-aurora-tinta);
    padding: 0;
  }
  .wm-auth-aurora__field input::placeholder { color: #9aa3bd; }
  .wm-auth-aurora__field--on { background: rgba(255, 255, 255, 0.92); }
  .wm-auth-aurora__field--on svg { color: var(--wm-aurora-azul); }
  .wm-auth-aurora__field--on::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 1.6px;
    background: linear-gradient(115deg, var(--wm-aurora-azul-claro), var(--wm-aurora-azul2), var(--wm-aurora-ciano), var(--wm-aurora-azul2), var(--wm-aurora-azul-claro));
    background-size: 280% 100%;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: wm-aurora-borda 2.6s linear infinite;
    pointer-events: none;
  }
  .wm-auth-aurora__field--err { border-color: var(--wm-aurora-erro); background: rgba(255, 244, 245, 0.92); }
  .wm-auth-aurora__field--err::before { display: none; }
  .wm-auth-aurora__field--ok { border-color: var(--wm-aurora-verde); }
  @keyframes wm-aurora-borda { to{background-position:280% 0} }
  .wm-auth-aurora__field--otp input {
    letter-spacing: .42em;
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    font-size: 20px;
    text-align: left;
  }
  .wm-auth-aurora__error {
    color: var(--wm-aurora-erro-texto);
    font-size: 13px;
    margin: 0 2px;
    min-height: 18px;
    text-align: center;
  }

  /* ---------- CTA com brilho ---------- */
  .wm-auth-aurora__cta {
    margin-top: 2px;
    width: 100%;
    height: 54px;
    border: 0;
    border-radius: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font: inherit;
    font-size: 16px;
    font-weight: 650;
    color: #fff;
    background: linear-gradient(120deg, var(--wm-aurora-azul) 0, #3f7bff 52%, var(--wm-aurora-azul) 100%);
    background-size: 200% 100%;
    box-shadow: 0 14px 30px -10px rgba(29, 89, 240, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, filter .25s, background-position .5s;
    position: relative;
    overflow: hidden;
  }
  .wm-auth-aurora__cta:hover {
    transform: translateY(-1px);
    background-position: 100% 0;
    box-shadow: 0 18px 38px -10px rgba(29, 89, 240, 0.68);
  }
  .wm-auth-aurora__cta:active { transform: translateY(0) scale(.99); }
  .wm-auth-aurora__cta[disabled] {
    opacity: .6;
    cursor: default;
    transform: none;
    box-shadow: 0 10px 24px -12px rgba(29, 89, 240, 0.5);
  }
  .wm-auth-aurora__cta svg { width: 18px; height: 18px; transition: transform .25s; }
  .wm-auth-aurora__cta:hover svg { transform: translateX(3px); }
  .wm-auth-aurora__cta::after {
    content: "";
    position: absolute;
    top: 0; left: -60%;
    width: 40%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transform: skewX(-18deg);
    animation: wm-aurora-brilho 4.5s ease-in-out infinite;
  }
  @keyframes wm-aurora-brilho { 0%,60%{left:-60%} 80%,100%{left:130%} }
  .wm-auth-aurora__spin {
    width: 19px; height: 19px;
    border-radius: 50%;
    border: 2.4px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    animation: wm-aurora-girar .7s linear infinite;
  }
  @keyframes wm-aurora-girar { to{transform:rotate(360deg)} }

  /* ---------- transfer flow (carta -> casa) ---------- */
  .wm-auth-aurora__tf {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 2px 0 20px;
  }
  .wm-auth-aurora__tf[hidden] { display: none; }
  .wm-auth-aurora__tf-node {
    width: 56px; height: 56px;
    border-radius: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--wm-aurora-linha);
    box-shadow: 0 6px 16px rgba(23, 50, 102, 0.08);
    transition: border-color .4s, box-shadow .4s;
  }
  .wm-auth-aurora__tf-node svg { width: 28px; height: 28px; }
  .wm-auth-aurora__tf-line{ position:relative; flex:0 1 120px; height:3px; border-radius:99px; overflow:visible;
    background:var(--wm-aurora-linha, rgba(23,50,102,.16)); transition:background .3s; }
  .wm-auth-aurora__tf-dot{ position:absolute; top:50%; left:0; width:7px; height:7px; margin-top:-3.5px; border-radius:50%;
    background:var(--wm-aurora-azul2,#2f6ff0); box-shadow:0 0 7px var(--wm-aurora-ciano,#63d2ff);
    opacity:0; will-change:left,opacity,transform; animation:wm-aurora-tf-flow 1.6s linear infinite; }
  .wm-auth-aurora__tf-dot:nth-child(2){animation-delay:.32s}
  .wm-auth-aurora__tf-dot:nth-child(3){animation-delay:.64s}
  .wm-auth-aurora__tf-dot:nth-child(4){animation-delay:.96s}
  .wm-auth-aurora__tf-dot:nth-child(5){animation-delay:1.28s}
  @keyframes wm-aurora-tf-flow{ 0%{left:0;opacity:0;transform:scale(.5)} 12%{opacity:1;transform:scale(1)} 85%{opacity:1;transform:scale(1)} 100%{left:100%;opacity:0;transform:scale(.5)} }
  .wm-auth-aurora__tf-node svg[hidden]{ display:none; }
  @media (prefers-reduced-motion:reduce){ .wm-auth-aurora__tf-dot{ animation:none; opacity:.7 } }
  .wm-auth-aurora__tf--done .wm-auth-aurora__tf-line{ background:#2fae7a; }
  .wm-auth-aurora__tf--done .wm-auth-aurora__tf-dot{ animation:none; opacity:0; }
  .wm-auth-aurora__tf--done .wm-auth-aurora__tf-node {
    border-color: var(--wm-aurora-verde);
    box-shadow: 0 0 0 3px rgba(47, 174, 122, 0.16);
  }

  /* ---------- sucesso ---------- */
  .wm-auth-aurora__badge {
    width: 76px; height: 76px;
    border-radius: 50%;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(140deg, var(--wm-aurora-verde), var(--wm-aurora-verde2));
    color: #fff;
    box-shadow: 0 16px 34px -10px rgba(31, 156, 106, 0.6);
    animation: wm-aurora-pop .55s cubic-bezier(.2, .7, .2, 1) both;
  }
  .wm-auth-aurora__badge svg { width: 38px; height: 38px; }
  @keyframes wm-aurora-pop { 0%{transform:scale(.4);opacity:0} 60%{transform:scale(1.12)} 100%{transform:scale(1);opacity:1} }

  /* ---------- ações + rodapé ---------- */
  .wm-auth-aurora__acoes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    font-size: 13px;
    color: var(--wm-aurora-tinta2);
  }
  .wm-auth-aurora__acoes a,
  .wm-auth-aurora__link {
    color: var(--wm-aurora-azul);
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    background: none;
    border: 0;
    font: inherit;
    padding: 0;
  }
  .wm-auth-aurora__acoes a:hover,
  .wm-auth-aurora__link:hover { text-decoration: underline; }
  /* rodapé agora vive DENTRO do cartão (só no /entrar): discreto, centrado,
     com uma hairline sutil acima separando das ações. */
  .wm-auth-aurora__footer {
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--wm-aurora-linha);
    font-size: 12px;
    line-height: 1.5;
    color: #7c88a6;
    text-align: center;
  }
  /* cadeado + texto como UM bloco centrado: o SVG flui inline colado ao inicio
     do texto (gap via margin-right), e o conjunto centraliza; se o texto quebrar
     em 2 linhas, segue centrado. Sem margin-right:auto, sem posicao absoluta. */
  .wm-auth-aurora__footer svg {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    display: inline-block;
    vertical-align: -2px;
    margin-right: 6px;
  }

  @media (prefers-reduced-motion: reduce) {
    .wm-auth-aurora *,
    .wm-auth-aurora *::before,
    .wm-auth-aurora *::after { animation-duration: .001s !important; }
    .wm-auth-aurora__blob,
    .wm-auth-aurora__cta::after { animation: none; }
    /* entrada/cascata e marca: sem movimento nenhum (aparecem já no lugar) */
    .wm-auth-aurora__card,
    .wm-auth-aurora__mark,
    .wm-auth-aurora__mark svg,
    .wm-auth-aurora__mark img,
    .wm-auth-aurora__title,
    .wm-auth-aurora__sub,
    .wm-auth-aurora__tabs,
    .wm-auth-aurora__error,
    .wm-auth-aurora__cta,
    .wm-auth-aurora__acoes,
    .wm-auth-aurora__footer { animation: none !important; }
  }
}

/* ── abas de canal (e-mail | WhatsApp) — controle segmentado ────────────────── */
.wm-auth-aurora__tabs{ display:flex; gap:4px; padding:4px; margin-bottom:20px; background:rgba(255,255,255,.55); border-radius:14px; box-shadow:inset 0 0 0 1px var(--wm-aurora-linha,rgba(23,50,102,.12)); }
.wm-auth-aurora__tab{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 8px; border:0; border-radius:10px; background:transparent; cursor:pointer; font:inherit; font-size:14px; font-weight:600; color:var(--wm-aurora-tinta2,#4a5578); transition:background .2s,color .2s,box-shadow .2s; }
.wm-auth-aurora__tab svg{ width:18px; height:18px; flex:none; }
.wm-auth-aurora__tab.is-active{ background:#fff; color:var(--wm-aurora-azul,#1d59f0); box-shadow:0 2px 8px rgba(20,45,110,.12); }
.wm-auth-aurora__tab:not(.is-active):hover{ color:var(--wm-aurora-tinta,#0e1730); }
@media (max-width:420px){ .wm-auth-aurora__tab span{ font-size:13px; } }

/* === parallax ROBUSTO (Edi 2026-09-22): move o container .wm-auth-aurora__aurora
   inteiro via transform (universal; nao depende da propriedade translate isolada
   nem de rAF). Compoe com o float dos blobs (transform proprio nas keyframes, pois
   o container e ancestral). Magnitude perceptivel. Gated em reduced-motion. === */
.wm-auth-aurora__aurora{
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
  transform: translate3d(calc(var(--wm-aurora-mx,0) * 46px), calc(var(--wm-aurora-my,0) * 46px), 0);
}
@media (prefers-reduced-motion: reduce){ .wm-auth-aurora__aurora{ transform:none; transition:none } }