/* fotos-viagem: tokens do painel.
   Cores: lista FECHADA de DESIGN.md (paleta escolhida por Breno em 2026-10-30).
   Nenhuma cor fora daqui entra no painel. Cor nova só com o sim do Breno,
   entrando primeiro em DESIGN.md e depois aqui.
   Movimento: tokens da skill transitions-dev (_root.css), só os de tempo,
   distância, escala, desfoque e curva. Os tokens de cor das receitas apontam
   para a paleta acima. */
:root {
  /* ── Paleta (DESIGN.md) ─────────────────────────────────────── */
  --papel: #FAF7F2;
  --papel-recuado: #F2EDE4;
  --cartao: #FFFFFF;
  --linha: #E3DCD0;
  --tinta: #1F2A30;
  --tinta-suave: #55636B;
  --petroleo: #0F5C6B;
  --petroleo-forte: #0A4652;
  --petroleo-nevoa: #DCEBEE;
  --sucesso: #2F7D4F;
  --alerta: #975A10;
  --perigo: #B4372F;
  --sombra: rgba(31, 42, 48, 0.08);

  /* ── Tipografia ─────────────────────────────────────────────── */
  --fonte-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-titulo: "Newsreader", Georgia, "Times New Roman", serif;
  --t-micro: 0.75rem;       /* 12: só o rótulo da barra de baixo em celular estreito */
  --t-legenda: 0.8125rem;   /* 13 */
  --t-pequeno: 0.875rem;    /* 14 */
  --t-corpo: 1rem;          /* 16 */
  --t-sub: 1.1875rem;       /* 19 */
  --t-titulo-3: 1.4375rem;  /* 23 */
  --t-titulo-2: 1.75rem;    /* 28 */
  --t-titulo-1: 2.125rem;   /* 34 */

  /* ── Espaço (escala de 4) ───────────────────────────────────── */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;
  --e-8: 64px;
  --e-9: 96px;

  --raio-p: 8px;
  --raio-m: 12px;
  --raio-g: 16px;
  --raio-pilula: 999px;

  --alvo: 44px;              /* alvo de toque mínimo */
  --nav-altura: 64px;        /* barra inferior no celular */
  --lateral-largura: 248px;  /* barra lateral no computador */
  /* tela Fotos no computador: no máximo 4 colunas de 250px; cabeçalho, filtros e grade dividem essa largura */
  --fotos-largura-max: calc(4 * 250px + 3 * var(--e-4));

  /* ── Camadas (escala semântica) ─────────────────────────────── */
  --z-base: 0;
  --z-acima: 1;
  --z-fixo: 10;
  --z-nav: 20;
  --z-fundo-modal: 30;
  --z-modal: 40;
  --z-toast: 50;
  --z-dica: 60;

  /* ── Movimento: escala comum (transitions-dev) ──────────────── */
  --duration-stagger: 40ms;
  --duration-micro: 80ms;
  --duration-quick: 150ms;
  --duration-fast: 250ms;
  --duration-medium: 350ms;
  --duration-slow: 400ms;
  --duration-very-slow: 500ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: ease-in-out;
  --ease-out: ease-out;
  --ease-linear: linear;
  --ease-bounce: cubic-bezier(0.34, 1.36, 0.64, 1);
  --distance-micro: 4px;
  --distance-small: 6px;
  --distance-base: 8px;
  --distance-medium: 12px;
  --distance-large: 30px;
  --scale-large: 0.96;
  --scale-medium: 0.97;
  --scale-small: 0.98;
  --scale-tiny: 0.99;
  --blur-small: 2px;
  --blur-medium: 3px;
  --blur-large: 8px;

  /* 02 Number pop-in */
  --digit-dur: var(--duration-very-slow);
  --digit-distance: var(--distance-base);
  --digit-stagger: 70ms;
  --digit-blur: var(--blur-small);
  --digit-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
  --digit-dir-x: 0;
  --digit-dir-y: 1;
  /* 04 Text states swap */
  --text-swap-dur: var(--duration-quick);
  --text-swap-translate-y: var(--distance-micro);
  --text-swap-blur: var(--blur-small);
  --text-swap-ease: var(--ease-in-out);
  /* 06 Modal */
  --modal-open-dur: var(--duration-fast);
  --modal-close-dur: var(--duration-quick);
  --modal-scale: var(--scale-large);
  --modal-scale-close: var(--scale-large);
  --modal-ease: var(--ease-smooth-out);
  /* 07 Panel reveal (distância menor que a da demo: o painel abre dentro da página) */
  --panel-open-dur: var(--duration-slow);
  --panel-close-dur: var(--duration-medium);
  --panel-translate-y: 24px;
  --panel-blur: var(--blur-small);
  --panel-ease: var(--ease-smooth-out);
  /* 08 Page side-by-side */
  --page-slide-dur: var(--duration-fast);
  --page-fade-dur: var(--duration-fast);
  --page-slide-distance: var(--distance-base);
  --page-blur: var(--blur-medium);
  --page-stagger: 0ms;
  --page-exit-enabled: 1;
  --page-slide-ease: var(--ease-smooth-out);
  --page-fade-ease: var(--ease-smooth-out);
  /* 10 Success check */
  --check-opacity-dur: var(--duration-very-slow);
  --check-rotate-dur: var(--duration-very-slow);
  --check-rotate-from: 80deg;
  --check-bob-dur: var(--duration-very-slow);
  --check-y-amount: 40px;
  --check-blur-dur: var(--duration-very-slow);
  --check-blur-from: 10px;
  --check-path-dur: var(--duration-very-slow);
  --check-path-delay: var(--duration-micro);
  --check-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-opacity: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-rotate: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-bob: cubic-bezier(0.34, 1.35, 0.64, 1);
  --check-ease-path: cubic-bezier(0.22, 1, 0.36, 1);
  /* 12 Error state shake */
  --shake-distance: var(--distance-small);
  --shake-overshoot: 4px;
  --shake-dur-a: var(--duration-micro);
  --shake-dur-b: 60ms;
  --shake-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --revert-hold: 3000ms;
  --revert-dur: 280ms;
  /* 14 Skeleton loader and reveal */
  --pulse-dur: 1000ms;
  --pulse-count: infinite;
  --pulse-min: 0.5;
  --reveal-dur: var(--duration-slow);
  --reveal-blur: var(--blur-small);
  --reveal-ease: var(--ease-in-out);
  /* 16 Tabs sliding (cores da paleta) */
  --tabs-dur: var(--duration-fast);
  --tabs-ease: var(--ease-smooth-out);
  --tabs-text-muted: var(--tinta-suave);
  --tabs-text-active: var(--tinta);
  --tabs-bar-bg: var(--papel-recuado);
  --tabs-pill-bg: var(--cartao);
  /* 21 Accordion */
  --acc-expand: var(--duration-fast);
  --acc-collapse: var(--duration-fast);
  --acc-chevron: var(--duration-fast);
  --acc-ease: var(--ease-smooth-out);
  /* 22 Toast */
  --toast-open: var(--duration-medium);
  --toast-close: 250ms;
  --toast-distance: 16px;
  --toast-blur: var(--blur-small);
  --toast-scale: var(--scale-medium);
  --toast-ease: var(--ease-smooth-out);
  /* 27 Toggle (percurso do botão de 44x26: 44 - 20 - 3 - 3) */
  --toggle-dur: 350ms;
  --toggle-travel: 18px;
  --toggle-ov1: 1px;
  --toggle-ov2: 0px;
  --toggle-track: 0ms;
  --toggle-ease: cubic-bezier(0.34, 1.35, 0.64, 1);
  /* 33 Text morph */
  --text-morph-dur: 180ms;
  --text-morph-resize-dur: 240ms;
  --text-morph-blur: var(--blur-small);
  --text-morph-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* ── Restante do _root.css da transitions-dev (instalado em 2026-10-30) ──
     Cores das receitas sempre apontam para a paleta acima. */
  --ease-bounce-strong: cubic-bezier(0.34, 3.85, 0.64, 1);
  /* 01 Card resize */
  --resize-dur: 300ms;
  --resize-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* 03 Notification badge */
  --badge-slide-dur: 260ms;
  --badge-pop-dur: var(--duration-very-slow);
  --badge-pop-close-dur: 180ms;
  --badge-fade-dur: var(--duration-slow);
  --badge-fade-close-dur: 180ms;
  --badge-blur: var(--blur-small);
  --badge-offset-x: -8.2px;
  --badge-offset-y: 12.4px;
  --badge-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --badge-pop-ease: var(--ease-bounce);
  --badge-close-ease: cubic-bezier(0.4, 0, 0.2, 1);
  /* 05 Menu dropdown */
  --dropdown-open-dur: var(--duration-fast);
  --dropdown-close-dur: var(--duration-quick);
  --dropdown-pre-scale: var(--scale-medium);
  --dropdown-closing-scale: var(--scale-tiny);
  --dropdown-ease: var(--ease-smooth-out);
  /* 09 Icon swap */
  --icon-swap-dur: var(--duration-fast);
  --icon-swap-blur: var(--blur-small);
  --icon-swap-start-scale: 0.25;
  --icon-swap-ease: var(--ease-in-out);
  /* 11 Avatar group hover */
  --avatar-lift: -4px;
  --avatar-dur: 320ms;
  --avatar-in-dur: var(--duration-fast);
  --avatar-scale: 1.05;
  --avatar-falloff: 0.45;
  --avatar-ease-in: cubic-bezier(0.22, 1, 0.36, 1);
  --avatar-ease-out: var(--ease-bounce-strong);
  /* 13 Input clear with dissolve (o rastro usa a cor da tinta) */
  --clear-dur: 1000ms;
  --clear-out-dur: var(--duration-slow);
  --clear-in-dur: var(--duration-slow);
  --clear-out-fly: 12px;
  --clear-in-fly: 12px;
  --clear-out-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --clear-in-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --clear-blur: var(--blur-small);
  --glow-delay: 50ms;
  --glow-peak-at: 0.15;
  --glow-opacity: 0.42;
  --glow-spread: 1.5;
  --clear-glow-cor: var(--tinta);
  /* 15 Shimmer text */
  --shimmer-dur: 2000ms;
  --shimmer-base: var(--tinta-suave);
  --shimmer-highlight: var(--tinta);
  --shimmer-band: 400%;
  --shimmer-ease: var(--ease-linear);
  /* 17 Tooltip */
  --tt-in-dur: var(--duration-quick);
  --tt-out-dur: 50ms;
  --tt-scale: var(--scale-small);
  --tt-delay: var(--duration-micro);
  --tt-in-ease: var(--ease-out);
  --tt-out-ease: var(--ease-out);
  --tt-move-dur: 160ms;
  --tt-move-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tt-bg: var(--cartao);
  --tt-fg: var(--tinta);
  /* 18 Texts reveal */
  --stagger-dur: var(--duration-very-slow);
  --stagger-distance: var(--distance-medium);
  --stagger-stagger: var(--duration-stagger);
  --stagger-blur: var(--blur-medium);
  --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* 19 Card hover tilt (brilho na cor do cartão) */
  --tilt-perspective: 1000px;
  --tilt-return: 1000ms;
  --tilt-return-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tilt-follow: 400ms;
  --tilt-follow-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tilt-glare-opacity: 0.32;
  --tilt-glare-fade: 300ms;
  --tilt-glare-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* 20 Plus to menu morph */
  --morph-open-dur: 350ms;
  --morph-close-dur: 250ms;
  --morph-ease: cubic-bezier(0.34, 1.25, 0.64, 1);
  --morph-close-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --morph-r-closed: 40px;
  --morph-r-open: 20px;
  --morph-fade-dur: 200ms;
  --morph-slide: 40px;
  --morph-rotate: 45deg;
  --morph-scale: 0.97;
  --morph-blur: 2px;
  /* 23 Like button (vermelho da paleta) */
  --like-color: var(--perigo);
  --like-fill: 150ms;
  --like-pop: 350ms;
  --like-pop-ease: cubic-bezier(0.34, 1.96, 0.64, 1);
  --like-particle-dur: 600ms;
  --like-particle-dist: 20px;
  --like-particle-size: 2.5px;
  --like-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* 24 Learn more hover */
  --learn-shift: 2px;
  --learn-spread: 8deg;
  --learn-in: 350ms;
  --learn-out: 350ms;
  --learn-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* 25 Checkbox check */
  --check-box: 150ms;
  --check-draw: 350ms;
  --check-delay: 0ms;
  --check-uncheck: 150ms;
  --check-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* 26 Spinning counter */
  --reel-dur: 1400ms;
  --reel-cell: 30px;
  --reel-spin-blur: 3px;
  --reel-stagger: 90ms;
  --reel-ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* 28 Thinking states */
  --think-hold: 2000ms;
  --think-swap: 150ms;
  --think-gap: 50ms;
  --think-distance: 8px;
  --think-blur: var(--blur-small);
  --think-shimmer: 2000ms;
  --think-base: var(--tinta-suave);
  --think-highlight: var(--tinta);
  --think-ease: ease-in-out;
  /* 29 Reasoning stream */
  --reason-hold: 840ms;
  --reason-step: 500ms;
  --reason-lines: 2;
  --reason-fade: 28px;
  --reason-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* 30 Streaming text */
  --stream-gap: 60ms;
  --stream-fade: 350ms;
  --stream-blur: 1px;
  --stream-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* 31 Matrix dot loader */
  --matrix-cycle: 1200ms;
  --matrix-base: var(--linha);
  --matrix-active: var(--tinta-suave);
  --matrix-ease: ease-in-out;
  /* 32 Banner stacking */
  --stack-open: 350ms;
  --stack-close: 250ms;
  --stack-rise: 60px;
  --stack-blur: var(--blur-small);
  --stack-scale: 0.97;
  --stack-peek: 12px;
  --stack-spread-gap: 8px;
  --stack-depth-scale: 0.06;
  --stack-depth-fade: 0.4;
  --stack-depth1-blur: 1px;
  --stack-depth2-blur: 2px;
  --stack-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* 34 Text swap soft */
  --text-soft-dur: 200ms;
  --text-soft-blur: var(--blur-small);
  --text-soft-ease: ease-in-out;
  --text-soft-resize-dur: 240ms;
  --text-soft-resize-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* 35 Donut chart */
  --chart-morph-dur: 400ms;
  --chart-morph-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --chart-gap: 3px;
  --chart-corner: 2px;

  /* ── Movimento: as 11 receitas da transitions-pro ───────────── */
  /* Os valores são os da receita, salvo onde a nota diz o motivo.
     Cor: sempre token da paleta. Onde a receita trazia nome em uso
     (.t-stack da 32, .t-shimmer da 15), o prefixo mudou: --cardstack-*,
     --oshimmer-*. */
  /* Pro: card stack hover */
  --cardstack-open-dur: 410ms;
  --cardstack-open-ease: cubic-bezier(0.31, 2.34, 0.64, 1);
  --cardstack-close-dur: 360ms;
  --cardstack-close-ease: cubic-bezier(0.34, 1.9, 0.64, 1);
  --cardstack-scale-dur: 610ms;
  --cardstack-scale-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --cardstack-scale: 1.04;
  --cardstack-spread: 1.42;
  --cardstack-rotation: 1;
  /* Pro: confetti burst (painel: menos flocos e pilha mais curta, porque a
     revisão passa para a próxima foto logo depois de aprovar) */
  --confetti-count: 70;
  --confetti-gravity: 1300;
  --confetti-size: 8px;
  --confetti-sway: 16;
  --confetti-bounce: 0.3;
  --confetti-hold: 900ms;
  --confetti-fade: 500ms;
  /* Pro: drag and drop with physics */
  --drop-zone-border: 2px;
  --drop-card-shadow:
    0 1px 2px 0 color-mix(in srgb, var(--tinta) 15%, transparent),
    0 2px 6px 0 color-mix(in srgb, var(--tinta) 10%, transparent),
    0 4px 20px 0 color-mix(in srgb, var(--tinta) 15%, transparent);
  --drop-card-shadow-off:
    0 1px 2px 0 transparent,
    0 2px 6px 0 transparent,
    0 4px 20px 0 transparent;
  --drop-lift-scale: 1.05;
  --drop-lift-dur: 200ms;
  --drop-tilt-max: 10;
  --drop-dur: 450ms;
  --drop-ease: cubic-bezier(0.34, 1.35, 0.64, 1);
  --drop-return-dur: 500ms;
  --drop-return-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
  --drop-morph-squash: 0.97;
  --drop-down-dur: 250ms;
  --drop-down-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --drop-up-dur: 450ms;
  --drop-up-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --drop-fade-in: 400ms;
  --drop-fade-ease: ease-in-out;
  --drop-puff-dur: 1500ms;
  --drop-puff-dist: 30;
  --drop-wave-count: 1;
  --drop-wave-width: 50;
  --drop-wave-falloff: 20;
  --drop-wave-opacity: 42%;
  --drop-wave-delay: 0ms;
  --drop-wave-stagger: 150ms;
  --drop-wave-grow: 0.28;
  --drop-wave-gravity: 10px;
  --drop-smoke-freq-x: 0.046;
  --drop-smoke-freq-y: 0.046;
  --drop-smoke-warp: 30;
  --drop-smoke-blur: 5;
  --drop-hold: 1800ms;
  --drop-out-dur: 400ms;
  --drop-respawn-dur: 250ms;
  /* Pro: get pro button */
  --probtn-strength: 0.7;
  --probtn-core: 50%;
  --probtn-core-blur: 150%;
  --probtn-blur: 6px;
  --probtn-drift-dur: 5000ms;
  /* Pro: gooey plus menu */
  --goo-open-dur: 350ms;
  --goo-open-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
  --goo-close-dur: 250ms;
  --goo-close-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --goo-stagger: 40ms;
  --goo-spread: 1;
  --goo-blur: 6;
  --goo-contrast: 18;
  --goo-icon-dur: 250ms;
  --goo-icon-rotate: 45deg;
  --goo-icon-ease: ease-in-out;
  --goo-anticip: 5px;
  --goo-anticip-dur: 700ms;
  --goo-anticip-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --goo-surface: var(--cartao);
  --goo-icon-color: var(--tinta);
  /* Pro: image generation placeholder (painel: pontos maiores e mais
     espaçados, na cor do cartão sobre a foto escurecida) */
  --imgen-dot: 2px;
  --imgen-pitch: 12px;
  --imgen-dot-color: var(--cartao);
  --imgen-cycle: 1400ms;
  --imgen-spread: 0.1;
  --imgen-phase: 6000ms;
  --imgen-scale-min: 0;
  --imgen-peak: 0.9;
  --imgen-ease: ease-in-out;
  --imgen-reveal-dur: 650ms;
  --imgen-reveal-blur: 3px;
  --imgen-reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Pro: image open tilt (painel: a foto da revisão abre de 60%, não de 30%,
     porque já está dentro da janela que se abre) */
  --opentilt-open-dur: 620ms;
  --opentilt-close-dur: 420ms;
  --opentilt-open-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --opentilt-close-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --opentilt-closed-scale: 0.6;
  --opentilt-tilt-x: 22deg;
  --opentilt-tilt-y: -14deg;
  --opentilt-lift: 70px;
  --opentilt-perspective: 900px;
  --opentilt-open-w: 320px;
  --opentilt-open-h: 240px;
  --opentilt-r-closed: 32px;
  --opentilt-r-open: var(--raio-g);
  --opentilt-bend: 28;
  --opentilt-bend-dur: 300ms;
  --opentilt-bend-ease: ease-out;
  /* Pro: organic shimmer (painel: os seis tons da paleta no lugar do arco-íris) */
  --oshimmer-dur: 3000ms;
  --oshimmer-ease: ease-out;
  --oshimmer-band-span: 26%;
  --oshimmer-opacity: 1;
  --oshimmer-glow-blur: 20px;
  --oshimmer-glow-strength: 0.7;
  --oshimmer-ring-strength: 1;
  --oshimmer-scale: 1;
  /* Pro: pro gradient text */
  --gradient-text-drift-dur: 5000ms;
  /* Pro: delete with smoky dissolve */
  --smoky-size: 120px;
  --smoky-dur: 550ms;
  --smoky-gravity: 150;
  --smoky-warp: 30;
  --smoky-warp-dur: 2000ms;
  --smoky-warp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --smoky-blur: 12px;
  --smoky-blur-ease: ease-in;
  --smoky-gravity-ease: ease-in;
  --smoky-dissolve-ease: ease-out;
  --smoky-sway: 0px;
  --smoky-spin: 3deg;
  --smoky-churn: 30;
  --smoky-spread: 0;
  --smoky-respawn: 800ms;
  /* Pro: spinner to check morph */
  --check-spin-dur: 900ms;
  --check-pop-dur: 350ms;
  --check-pop-ease: cubic-bezier(0.34, 1.96, 0.94, 1);
  --check-fill-dur: 350ms;
  --check-fill-ease: cubic-bezier(0.34, 1.35, 0.64, 1);
  --check-draw-dur: 600ms;
  --check-draw-delay: 80ms;
  --check-draw-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --check-hold: 2000ms;
  --check-revert-dur: 250ms;
  --check-revert-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --check-hop: 3px;
  --check-up-dur: 250ms;
  --check-up-ease: cubic-bezier(0.34, 1.35, 0.64, 1);
  --check-down-dur: 300ms;
  --check-down-ease: cubic-bezier(0.14, 2.56, 0.94, 1);
  --check-pop-scale: 1.09;
  --check-blur: 0.5px;
  --check-ring-w: 2.5px;
  --check-mark-w: 2;
  --check-green: var(--sucesso);
}