/* =====================================================
   NXTSTEP — VISUAL "TEMPLO" (oficial desde 19/10/2026)
   Camada por cima do style.css: vale com a classe "v3"
   do <html> (fixa no index.html). Mesmas cores dos temas;
   muda a forma e o movimento. Ideia: arquitetura grega.
   Placas com moldura dupla, faixa de grega, títulos de
   inscrição, a escada feita de colunas e o "feito"
   virando uma coroa de louros. Movimento calmo: revelar,
   erguer, fechar a coroa (o movimento está em design.js).
===================================================== */

.v3 {
    --r-sm: 4px;
    --r-md: 6px;
    --r-lg: 10px;

    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

    --frame: color-mix(in srgb, var(--gold) 30%, var(--line));
    --glow: color-mix(in srgb, var(--gold) 35%, transparent);

    /* coroa de louros do Templo ("Louro A", escolha dela): folhas finas alternando
       pelo ramo, aberta no alto, com um laço embaixo. Vale para os Louros Cor de
       Prata, o "feito" dos hábitos, as medalhas do Panteão e a frase do dia. */
    --laurel-shape: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27%3E%3Cpath d=%27M63.34 88.65C67.50 87.34 70.52 82.74 70.69 78.54C66.74 79.99 63.29 84.29 63.34 88.65ZM73.93 82.79C77.76 84.57 82.89 83.24 85.73 80.32C81.96 78.78 76.72 79.62 73.93 82.79ZM82.22 73.97C84.70 70.73 84.48 65.63 82.28 62.37C80.05 65.61 79.78 70.71 82.22 73.97ZM87.41 63.03C91.28 62.34 94.41 58.56 94.93 54.80C91.24 55.65 87.75 59.11 87.41 63.03ZM88.99 51.03C89.14 47.24 86.22 43.54 82.79 42.31C82.82 45.96 85.36 49.93 88.99 51.03ZM86.81 39.12C89.38 36.53 89.69 32.03 88.01 28.94C85.66 31.55 84.91 36.01 86.81 39.12ZM81.09 28.45C79.20 25.50 75.05 24.31 71.81 25.28C73.78 28.03 77.79 29.63 81.09 28.45ZM72.37 20.05C72.95 16.74 70.77 13.24 67.84 11.88C67.44 15.09 69.25 18.79 72.37 20.05ZM36.66 88.65C36.71 84.29 33.26 79.99 29.31 78.54C29.48 82.74 32.50 87.34 36.66 88.65ZM26.07 82.79C23.28 79.62 18.04 78.78 14.27 80.32C17.11 83.24 22.24 84.57 26.07 82.79ZM17.78 73.97C20.22 70.71 19.95 65.61 17.72 62.37C15.52 65.63 15.30 70.73 17.78 73.97ZM12.59 63.03C12.25 59.11 8.76 55.65 5.07 54.80C5.59 58.56 8.72 62.34 12.59 63.03ZM11.01 51.03C14.64 49.93 17.18 45.96 17.21 42.31C13.78 43.54 10.86 47.24 11.01 51.03ZM13.19 39.12C15.09 36.01 14.34 31.55 11.99 28.94C10.31 32.03 10.62 36.53 13.19 39.12ZM18.91 28.45C22.21 29.63 26.22 28.03 28.19 25.28C24.95 24.31 20.80 25.50 18.91 28.45ZM27.63 20.05C30.75 18.79 32.56 15.09 32.16 11.88C29.23 13.24 27.05 16.74 27.63 20.05Z%27/%3E%3Cpath d=%27M55.43 90.62A39 39 0 0 0 74.01 21.27%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.5%27 stroke-linecap=%27round%27/%3E%3Cpath d=%27M44.57 90.62A39 39 0 0 1 25.99 21.27%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.5%27 stroke-linecap=%27round%27/%3E%3Cpath d=%27M45 93L55 87M55 93L45 87%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.5%27 stroke-linecap=%27round%27/%3E%3C/svg%3E");

    /* faixa de grega (o ornamento grego), usada como máscara: pega a cor do tema */
    --meander: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'%3E%3Cpath d='M0 .8H16M0 11.2H16M2 11.2V2.6H12.4V8.6H6V5.4H9' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E");
}

/* fundo com caneluras de coluna, quase invisíveis */
.v3 body {
    background:
        repeating-linear-gradient(90deg, transparent 0 46px, color-mix(in srgb, var(--line) 22%, transparent) 46px 47px),
        var(--bg);
}

/* =========================
   PLACAS (cartões com moldura dupla)
========================= */

.v3 .panel,
.v3 .rank,
.v3 .habit-new-box,
.v3 .partner,
.v3 .note-cta,
.v3 .day-close,
.v3 .review-link,
.v3 .note-item,
.v3 .quit-card,
.v3 .quote {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: inset 0 0 0 4px var(--surface), inset 0 0 0 5px var(--frame);
}

.v3 .day-close {
    padding: 4px 14px;
}

.v3 .day-close .note-cta {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.v3 .day-close .note-cta:not(#note-cta) {
    border-top: 1px solid var(--line);
}

.v3 .panel h3,
.v3 .pantheon-group h3 {
    text-align: center;
    font-size: 1.08rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.v3 .panel > .muted.small:first-of-type {
    text-align: center;
}

/* =========================
   TÍTULOS DE INSCRIÇÃO
========================= */

.v3 .brand {
    letter-spacing: .32em;
    font-size: 1.12rem;
}

.v3 .page-head:not(.note-head):not(.month-head) {
    text-align: center;
}

.v3 .page-head h2,
.v3 .month-head h2 {
    font-size: clamp(1.7rem, 7.4vw, 2.1rem);
    letter-spacing: .16em;
    text-transform: uppercase;
}

.v3 .month-head h2 {
    font-size: clamp(1.3rem, 6vw, 1.7rem);
    letter-spacing: .1em;
}

.v3 .note-head h2 {
    font-size: clamp(1.4rem, 6vw, 1.7rem);
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* faixa de grega embaixo dos títulos */
.v3 .page-head:not(.note-head):not(.month-head)::after,
.v3 .today-head::after,
.v3 .rank-name::after {
    content: "";
    display: block;
    width: 128px;
    height: 12px;
    margin: 16px auto 0;
    background: var(--gold-ink);
    opacity: .75;
    -webkit-mask: var(--meander) repeat-x left center / 16px 12px;
    mask: var(--meander) repeat-x left center / 16px 12px;
}

.v3 .section-title {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--muted);
    font-size: .92rem;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.v3 .section-title::before,
.v3 .section-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

/* =========================
   BOTÕES E CAMPOS
========================= */

.v3 .btn {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-sm);
    font-size: .86rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: transform .3s var(--ease-out), box-shadow .25s ease;
}

.v3 .btn:active {
    transform: translateY(1px) scale(.985);
}

.v3 .btn-primary {
    box-shadow: inset 0 0 0 3px var(--gold), inset 0 0 0 4px color-mix(in srgb, var(--on-gold) 35%, transparent);
}

.v3 .btn-ghost {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--line);
}

.v3 .feature-goal-btn,
.v3 .cheer-btn {
    font-size: .76rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.v3 .input:not(.note-text):not(select) {
    padding-left: 2px;
    padding-right: 2px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
}

.v3 .input:focus {
    border-color: var(--gold-ink);
}

.v3 select.input,
.v3 .note-text {
    border-radius: var(--r-md);
}

.v3 .icon-btn {
    border-radius: var(--r-sm);
}

.v3 .day-chip,
.v3 .icon-opt,
.v3 .retro-kind button,
.v3 .cal-mode button,
.v3 .theme-pick button,
.v3 .mood-opt {
    border-radius: var(--r-sm);
    transition: transform .3s var(--ease-out), background-color .2s ease;
}

.v3 .ripple {
    position: absolute;
    border-radius: 50%;
    background: currentColor;
    opacity: .12;
    transform: scale(0);
    animation: v3-ripple .7s var(--ease-out) forwards;
    pointer-events: none;
}

@keyframes v3-ripple {
    to { transform: scale(1); opacity: 0; }
}

/* =========================
   HOJE
========================= */

.v3 .today-head {
    text-align: center;
}

.v3 .date-line {
    color: var(--gold-ink);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
}

/* a escada feita de colunas: fuste com caneluras, capitel em cima, base embaixo */
.v3 .stairs {
    gap: 4px;
    height: 220px;
    margin: 26px 4px 16px;
    padding: 0 6px;
    background: linear-gradient(var(--line), var(--line)) left bottom / 100% 1px no-repeat;
}

.v3 .step {
    --c: var(--surface-2);
    position: relative;
    margin: 12px 7px 0;
    border-radius: 0;
    background: repeating-linear-gradient(90deg, var(--c) 0 6px, color-mix(in srgb, var(--c) 78%, #000) 6px 8px);
    transform-origin: bottom;
}

/* capitel e base */
.v3 .step::before,
.v3 .step::after {
    content: "";
    position: absolute;
    left: -7px;
    right: -7px;
    background: var(--c);
}

.v3 .step::before {
    top: -10px;
    height: 10px;
    border-radius: 3px 3px 0 0;
    box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--c) 70%, #000);
}

.v3 .step::after {
    bottom: 0;
    height: 7px;
    border-radius: 2px 2px 0 0;
}

.v3 .step.is-on {
    --c: var(--gold);
    filter: drop-shadow(0 0 10px var(--glow));
}

/* a próxima coluna: só o contorno, esperando */
.v3 .step.is-next {
    --c: transparent;
    background: none;
    box-shadow: inset 0 0 0 1.5px var(--gold-ink);
    animation: v3-glow 2.6s ease-in-out infinite;
}

.v3 .step.is-next::before,
.v3 .step.is-next::after {
    box-shadow: inset 0 0 0 1.5px var(--gold-ink);
}

.v3 .step.is-ghost {
    --c: transparent;
    background: none;
    box-shadow: inset 0 0 0 1px var(--line);
}

.v3 .step.is-ghost::before,
.v3 .step.is-ghost::after {
    box-shadow: inset 0 0 0 1px var(--line);
}

@keyframes v3-glow {
    0%, 100% { filter: drop-shadow(0 0 0 transparent); }
    50%      { filter: drop-shadow(0 0 8px var(--glow)); }
}

/* as colunas se erguem do chão ao entrar na tela */
.v3 .stairs.is-waving .step {
    animation: v3-raise .9s var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 90ms);
}

@keyframes v3-raise {
    from { clip-path: inset(100% -12px 0 -12px); }
    to   { clip-path: inset(-12px -12px 0 -12px); }
}

.v3 .step.just-on {
    animation: v3-lit .8s ease;
}

@keyframes v3-lit {
    0%   { filter: brightness(1.8) drop-shadow(0 0 16px var(--glow)); }
    100% { filter: brightness(1) drop-shadow(0 0 10px var(--glow)); }
}

.v3 .stairs.celebrate .step {
    animation: v3-lit 1s ease both;
    animation-delay: calc(var(--i, 0) * 80ms);
}

.v3 .stairs-caption {
    justify-content: center;
    text-align: center;
}

/* números rápidos: três colunas separadas por fio de ouro */
.v3 .quick-stats {
    border-color: var(--frame);
}

.v3 .quick-stats div {
    text-align: center;
}

.v3 .quick-stats div + div {
    padding-left: 0;
    border-left-color: var(--frame);
}

.v3 .quick-stats dt {
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.v3 .quick-stats dd {
    font-size: 2.1rem;
}

.v3 .feature-card {
    border-radius: var(--r-lg);
    box-shadow: inset 0 0 0 5px var(--feature-bg), inset 0 0 0 6px var(--feature-track);
}

/* frase: centralizada, com uma coroa de louros pequena em cima */
.v3 .quote {
    margin-top: 30px;
    padding: 38px 22px 20px;
    text-align: center;
}

.v3 .quote::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 50%;
    width: 30px;
    height: 30px;
    margin-left: -15px;
    background: var(--gold-ink);
    opacity: .8;
    -webkit-mask: var(--laurel-shape) center / contain no-repeat;
    mask: var(--laurel-shape) center / contain no-repeat;
}

.v3 .quote {
    position: relative;
}

.v3 .quote blockquote {
    margin: 0 auto;
}

.v3 .quote figcaption {
    justify-content: center;
}

/* hábitos do dia: degraus numerados I, II, III, como um registro */
.v3 .checklist {
    gap: 0;
    counter-reset: degrau;
    border-top: 1px solid var(--line);
}

.v3 .check-row {
    counter-increment: degrau;
}

.v3 .check {
    position: relative;
    overflow: hidden;
    padding: 16px 4px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
}

.v3 .check::before {
    content: counter(degrau, upper-roman);
    width: 30px;
    flex-shrink: 0;
    color: var(--faint);
    font-family: var(--font-display);
    font-size: .95rem;
    letter-spacing: .06em;
    text-align: center;
}

.v3 .check.is-done {
    border-color: var(--line);
}

.v3 .check.is-done::before {
    color: var(--gold-ink);
}

.v3 .check.is-done .check-name {
    color: var(--muted);
}

/* o "feito" é uma coroa de louros que se fecha */
.v3 .check-mark {
    position: relative;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 0;
    background: none;
}

.v3 .check-mark::before {
    content: "";
    position: absolute;
    inset: -3px;
    background: var(--line);
    -webkit-mask: var(--laurel-shape) center / contain no-repeat;
    mask: var(--laurel-shape) center / contain no-repeat;
    transition: background-color .3s ease;
}

.v3 .check-mark svg {
    position: relative;
    width: 13px;
    height: 13px;
}

.v3 .check.is-done .check-mark {
    background: none;
}

.v3 .check.is-done .check-mark::before {
    background: var(--laurel);
}

.v3 .check.is-done .check-mark svg {
    color: var(--laurel-ink);
}

.v3 .check.just-done .check-mark::before {
    animation: v3-wreath .8s var(--ease-spring);
}

@keyframes v3-wreath {
    from { transform: scale(.3) rotate(-120deg); opacity: 0; }
}

.v3 .check-progress {
    height: 3px;
}

.v3 .qty-minus {
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
}

.v3 .offday .check {
    border-style: dashed;
}

/* folhas que saem da coroa e chuva de folhas douradas no dia perfeito */
.v3 .leaf,
.v3 .confetti {
    position: fixed;
    z-index: 60;
    border-radius: 0 100% 0 100%;
    pointer-events: none;
}

.v3 .leaf {
    width: 9px;
    height: 16px;
    background: var(--laurel);
    animation: v3-leaf 1s var(--ease-out) forwards;
}

@keyframes v3-leaf {
    from { transform: translate(-50%, -50%) rotate(var(--r)) translate(0, 0) scale(.5); opacity: 1; }
    to   { transform: translate(-50%, -50%) rotate(var(--r)) translate(0, calc(var(--d) * -1)) scale(1); opacity: 0; }
}

.v3 .confetti {
    top: -18px;
    width: 10px;
    height: 18px;
    background: var(--c, var(--gold));
    animation: v3-fall var(--t, 2.6s) cubic-bezier(.3, .6, .5, 1) forwards;
}

@keyframes v3-fall {
    0%   { transform: translate(0, 0) rotate(0); }
    50%  { transform: translate(calc(var(--x, 0) * -1), 52vh) rotate(calc(var(--spin, 540deg) / 2)); }
    100% { transform: translate(var(--x, 0), 105vh) rotate(var(--spin, 540deg)); opacity: .2; }
}

/* Louros Cor de Prata no Templo: a coroa fica em volta do círculo, sem cobrir a foto */
.v3 .avatar-btn.has-laurel::before {
    inset: -13.5px -12.5px -11px;
}

/* =========================
   PANTEÃO: cada conquista é uma coluna com o número
   gravado, e a coroa de louros em volta (pedido dela)
========================= */

.v3 .medal-badge {
    width: 84px;
    height: 84px;
    transition: transform .35s var(--ease-out);
}

.v3 .medal:active .medal-badge {
    transform: scale(.94);
}

/* fuste com caneluras */
.v3 .medal-badge span {
    --c: var(--surface-2);
    position: relative;
    width: 30px;
    height: 38px;
    margin-top: 2px;
    padding: 0 1px;
    border-radius: 0;
    background: repeating-linear-gradient(90deg, var(--c) 0 5px, color-mix(in srgb, var(--c) 88%, #000) 5px 7px);
    color: var(--faint);
    font-size: .8rem;
    line-height: 1.05;
    text-align: center;
}

/* capitel e base */
.v3 .medal-badge span::before,
.v3 .medal-badge span::after {
    content: "";
    position: absolute;
    left: -5px;
    right: -5px;
    background: var(--c);
}

.v3 .medal-badge span::before {
    top: -6px;
    height: 6px;
    border-radius: 2px 2px 0 0;
    box-shadow: inset 0 -1.5px 0 color-mix(in srgb, var(--c) 75%, #000);
}

.v3 .medal-badge span::after {
    bottom: -5px;
    height: 5px;
    border-radius: 1px;
}

.v3 .medal.is-won .medal-badge span {
    --c: var(--medal);
    background: repeating-linear-gradient(90deg, var(--c) 0 5px, color-mix(in srgb, var(--c) 88%, #000) 5px 7px);
    color: var(--on-gold);
}

.v3 .medal.is-won .medal-badge {
    filter: drop-shadow(0 0 6px var(--glow));
}

/* =========================
   HÁBITOS
========================= */

.v3 .habit-list {
    border-top: 1px solid var(--line);
}

.v3 .habit-row-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px var(--frame);
}

/* =========================
   EVOLUÇÃO
========================= */

.v3 .rank {
    text-align: center;
}

.v3 .rank-name {
    letter-spacing: .04em;
}

.v3 .meter {
    height: 4px;
    border-radius: 0;
}

.v3 .meter-fill {
    border-radius: 0;
    box-shadow: 0 0 10px var(--glow);
    transition: width 1.2s var(--ease-out);
}

.v3 .stat-list div {
    text-align: center;
}

.v3 .stat-list dt {
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.v3 .bar {
    border-radius: 0;
}

.v3 .bars.is-waving .bar {
    animation: v3-raise .8s var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 20ms);
}

.v3 .hb-track,
.v3 .hb-fill,
.v3 .wd-track,
.v3 .wd-bar {
    border-radius: 0;
}

.v3 .hb-fill,
.v3 .wd-bar {
    transition: width 1s var(--ease-out), height 1s var(--ease-out);
}

/* =========================
   MENSAL
========================= */

.v3 .cal-day {
    border-radius: var(--r-sm);
    transition: transform .3s var(--ease-out);
}

.v3 .cal-day.is-today {
    box-shadow: inset 0 0 0 2px var(--text), inset 0 0 0 4px var(--bg);
}

.v3 .cal-grid.is-waving .cal-day {
    animation: v3-tile .6s var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 16ms);
}

@keyframes v3-tile {
    from { opacity: 0; transform: translateY(6px); filter: blur(3px); }
}

/* Anuário: nome do mês como inscrição, e os meses entram um depois do outro */
.v3 .year-month-name {
    font-family: var(--font-display);
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.v3 .year-grid.is-waving .year-month {
    animation: v3-tile .6s var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 45ms);
}

.v3 .month-summary div,
.v3 .month-summary div + div {
    text-align: center;
}

.v3 .month-summary dt {
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: .68rem;
}

/* =========================
   NOTAS E PERFIL
========================= */

.v3 .mood-opt[aria-checked="true"] {
    box-shadow: inset 0 0 0 3px var(--surface-2), inset 0 0 0 4px var(--gold-ink);
    border-color: var(--gold-ink);
}

.v3 .avatar-lg {
    box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--frame);
}

.v3 .profile-head {
    text-align: left;
}

.v3 .switch span {
    transition: transform .4s var(--ease-out);
}

/* =========================
   BARRA DE BAIXO: presa embaixo, como um friso
========================= */

.v3 .dock {
    left: 0;
    bottom: 0;
    width: 100%;
    transform: none;
    padding: 6px max(8px, calc((100% - 560px) / 2)) calc(6px + env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid var(--frame);
    border-radius: 0;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
}

.v3 .app {
    padding-bottom: calc(var(--dock-h) + 36px + env(safe-area-inset-bottom));
}

.v3 .dock a {
    position: relative;
    z-index: 1;
    border-radius: 0;
    letter-spacing: .04em;
}

.v3 .dock a.is-active {
    background: transparent;
}

.v3 .dock svg {
    transition: transform .4s var(--ease-out);
}

.v3 .dock a.is-active svg {
    transform: translateY(-2px);
}

/* a aba ativa ganha um fio de ouro em cima, que desliza */
.v3 .dock-pill {
    position: absolute;
    top: -1px;
    left: 0;
    height: 2px;
    z-index: 2;
    transition: transform .6s var(--ease-out), width .6s var(--ease-out), opacity .2s ease;
    pointer-events: none;
}

.v3 .dock-pill::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 30px;
    height: 2px;
    margin-left: -15px;
    background: var(--gold-ink);
    box-shadow: 0 0 10px var(--glow);
}

/* =========================
   AVISOS: plaquinha centralizada
========================= */

.v3 .toast {
    border-radius: var(--r-sm);
    text-align: center;
    letter-spacing: .02em;
    box-shadow: inset 0 0 0 3px var(--text), inset 0 0 0 4px color-mix(in srgb, var(--bg) 35%, transparent);
    animation: v3-plaque .5s var(--ease-out);
}

.v3 .toast.is-error {
    box-shadow: inset 0 0 0 3px var(--danger), inset 0 0 0 4px rgba(255, 255, 255, .4);
}

@keyframes v3-plaque {
    from { opacity: 0; transform: translateY(10px); filter: blur(4px); }
}

/* =========================
   ENTRADA DAS TELAS: revelar, sem pulos
========================= */

.v3 .page {
    animation: none;
}

.v3 .page.is-entering > * {
    animation: v3-reveal .8s var(--ease-out) both;
    animation-delay: calc(var(--e, 0) * 70ms);
}

@keyframes v3-reveal {
    from { opacity: 0; transform: translateY(10px); filter: blur(6px); }
}

/* =========================
   LOGIN
========================= */

.v3 .wordmark {
    letter-spacing: .2em;
    font-size: clamp(2.4rem, 12vw, 3.4rem);
}

.v3 .auth-inner {
    text-align: center;
}

.v3 .auth-form {
    text-align: left;
}

.v3 .auth-quote {
    padding-left: 0;
    border-left: 0;
}

.v3 .auth-switch,
.v3 .auth-tab {
    border-radius: var(--r-sm);
}

/* =========================
   MOVIMENTO REDUZIDO
========================= */

@media (prefers-reduced-motion: reduce) {
    .v3 *,
    .v3 *::before,
    .v3 *::after {
        animation: none !important;
        transition-duration: .01ms !important;
    }
}