/* ==========================================================================
   TEAP — Movimento
   Tudo que se move no app está aqui. Regra: rápido, com intenção e
   silencioso quando o sistema pede menos movimento.
   ========================================================================== */

/* --- Keyframes ----------------------------------------------------------- */

@keyframes fadeIn {
    from { opacity: 0 }
    to   { opacity: 1 }
}

@keyframes fadeOut {
    from { opacity: 1 }
    to   { opacity: 0 }
}

@keyframes riseIn {
    from { opacity: 0; transform: translate3d(0, 18px, 0) }
    to   { opacity: 1; transform: none }
}

@keyframes riseInSmall {
    from { opacity: 0; transform: translate3d(0, 8px, 0) }
    to   { opacity: 1; transform: none }
}

@keyframes slideFromRight {
    from { opacity: 0; transform: translate3d(28px, 0, 0) }
    to   { opacity: 1; transform: none }
}

@keyframes slideToLeft {
    from { opacity: 1; transform: none }
    to   { opacity: 0; transform: translate3d(-24px, 0, 0) }
}

@keyframes popIn {
    0%   { opacity: 0; transform: scale(.82) }
    60%  { opacity: 1; transform: scale(1.04) }
    100% { opacity: 1; transform: scale(1) }
}

@keyframes popOut {
    from { opacity: 1; transform: scale(1) }
    to   { opacity: 0; transform: scale(.94) }
}

@keyframes sheetUp {
    from { transform: translate3d(0, 100%, 0) }
    to   { transform: translate3d(0, 0, 0) }
}

@keyframes sheetDown {
    from { transform: translate3d(0, 0, 0) }
    to   { transform: translate3d(0, 100%, 0) }
}

@keyframes shake {
    0%, 100% { transform: translate3d(0, 0, 0) }
    15%      { transform: translate3d(-9px, 0, 0) }
    30%      { transform: translate3d(8px, 0, 0) }
    45%      { transform: translate3d(-6px, 0, 0) }
    60%      { transform: translate3d(4px, 0, 0) }
    80%      { transform: translate3d(-2px, 0, 0) }
}

@keyframes nudge {
    0%, 100% { transform: translate3d(0, 0, 0) }
    50%      { transform: translate3d(4px, 0, 0) }
}

@keyframes pulseRing {
    0%   { transform: scale(.9); opacity: .55 }
    70%  { transform: scale(1.5); opacity: 0 }
    100% { transform: scale(1.5); opacity: 0 }
}

@keyframes breathe {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1) }
    50%      { transform: translate3d(0, -4px, 0) scale(1.012) }
}

@keyframes bob {
    0%, 100% { transform: translate3d(0, 0, 0) }
    50%      { transform: translate3d(0, -6px, 0) }
}

@keyframes shimmer {
    from { background-position: -160% 0 }
    to   { background-position: 260% 0 }
}

@keyframes spin {
    to { transform: rotate(360deg) }
}

@keyframes drawStroke {
    from { stroke-dashoffset: var(--dash, 200) }
    to   { stroke-dashoffset: 0 }
}

@keyframes checkPop {
    0%   { transform: scale(0) rotate(-24deg); opacity: 0 }
    55%  { transform: scale(1.18) rotate(4deg); opacity: 1 }
    100% { transform: scale(1) rotate(0); opacity: 1 }
}

@keyframes countUp {
    from { opacity: 0; transform: translate3d(0, 10px, 0) }
    to   { opacity: 1; transform: none }
}

@keyframes flashSweep {
    from { transform: translate3d(-100%, 0, 0) }
    to   { transform: translate3d(100%, 0, 0) }
}

@keyframes floatAway {
    0%   { opacity: 0; transform: translate3d(0, 8px, 0) scale(.8) }
    25%  { opacity: 1; transform: translate3d(0, -6px, 0) scale(1.05) }
    100% { opacity: 0; transform: translate3d(0, -48px, 0) scale(1) }
}

@keyframes wiggle {
    0%, 100% { transform: rotate(0deg) }
    25%      { transform: rotate(-6deg) }
    75%      { transform: rotate(6deg) }
}

@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(22, 104, 227, .35) }
    50%      { box-shadow: 0 0 0 14px rgba(22, 104, 227, 0) }
}

@keyframes barFill {
    from { width: 0 }
}

@keyframes tabIndicator {
    from { transform: scaleX(.2); opacity: 0 }
    to   { transform: scaleX(1); opacity: 1 }
}

/* --- Utilitários de entrada ---------------------------------------------- */

.anim-rise      { animation: riseIn var(--dur-slow) var(--ease-out) both }
.anim-rise-sm   { animation: riseInSmall var(--dur-base) var(--ease-out) both }
.anim-pop       { animation: popIn var(--dur-base) var(--ease-spring) both }
.anim-fade      { animation: fadeIn var(--dur-base) var(--ease-out) both }
.anim-slide     { animation: slideFromRight var(--dur-base) var(--ease-out) both }
.anim-bob       { animation: bob 3.4s var(--ease-in-out) infinite }
.anim-breathe   { animation: breathe 4.5s var(--ease-in-out) infinite }
.anim-wiggle    { animation: wiggle 1.4s var(--ease-in-out) infinite }
.anim-spin      { animation: spin 1s linear infinite }

/* Atraso em cascata: cada item recebe --i via style inline ou nth-child. */
.stagger > *            { animation: riseIn var(--dur-slow) var(--ease-out) both }
.stagger > *:nth-child(1)  { animation-delay: 30ms }
.stagger > *:nth-child(2)  { animation-delay: 75ms }
.stagger > *:nth-child(3)  { animation-delay: 120ms }
.stagger > *:nth-child(4)  { animation-delay: 165ms }
.stagger > *:nth-child(5)  { animation-delay: 210ms }
.stagger > *:nth-child(6)  { animation-delay: 255ms }
.stagger > *:nth-child(7)  { animation-delay: 300ms }
.stagger > *:nth-child(8)  { animation-delay: 345ms }
.stagger > *:nth-child(9)  { animation-delay: 390ms }
.stagger > *:nth-child(10) { animation-delay: 435ms }
.stagger > *:nth-child(n+11) { animation-delay: 470ms }

[style*="--i"] { animation-delay: calc(var(--i) * 55ms) }

/* --- Transição entre páginas --------------------------------------------- */

.page-enter {
    animation: riseIn var(--dur-slow) var(--ease-out) both;
}

body.is-leaving .page-shell {
    animation: popOut var(--dur-fast) var(--ease-in-out) forwards;
}

/* Barra fina de progresso durante a navegação. */
.route-progress {
    position: fixed;
    inset: 0 auto auto 0;
    height: 3px;
    width: 0;
    z-index: 999;
    background: linear-gradient(90deg, var(--brand-400), var(--brand-600));
    box-shadow: 0 0 12px rgba(22, 104, 227, .6);
    transition: width var(--dur-slow) var(--ease-out), opacity var(--dur-base) linear;
    pointer-events: none;
    opacity: 0;
}
.route-progress.is-active { opacity: 1 }

@view-transition { navigation: auto }

::view-transition-old(root) {
    animation: fadeOut var(--dur-fast) var(--ease-in-out) both;
}
::view-transition-new(root) {
    animation: riseIn var(--dur-base) var(--ease-out) both;
}

/* --- Revelação no scroll -------------------------------------------------- */

/*
   A revelação é um aprimoramento: sem JS — ou se o IntersectionObserver
   falhar — o conteúdo simplesmente aparece. Nada de página em branco.
*/
html.js-reveal .reveal {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}
html.js-reveal .reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* --- Feedback tátil de toque ---------------------------------------------- */

.pressable {
    transition: transform var(--dur-instant) var(--ease-snap), box-shadow var(--dur-fast) var(--ease-out);
    will-change: transform;
}
.pressable:active { transform: translateY(1px) scale(.978) }

.ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background: currentColor;
    opacity: .16;
    pointer-events: none;
    animation: rippleOut 620ms var(--ease-out) forwards;
}
@keyframes rippleOut {
    to { transform: scale(2.6); opacity: 0 }
}

/* --- Confete ------------------------------------------------------------- */

.confetti-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 900;
    overflow: hidden;
}
.confetti-piece {
    position: absolute;
    width: 10px;
    height: 16px;
    border-radius: 2px;
    will-change: transform, opacity;
}

/* --- Respeito ao sistema -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    html.js-reveal .reveal { opacity: 1; transform: none }
    .confetti-layer { display: none }
}

html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
}
html[data-motion="off"] .reveal { opacity: 1; transform: none }
html[data-motion="off"] .confetti-layer { display: none }