/* fotos-viagem: as 11 receitas da skill transitions-pro, na variante CSS/JS pura
   (o painel não usa React). Carregado depois de transicoes.css e antes de app.css:
   o layout de app.css vence onde se cruzam. JS em transicoes-pro.js.
   Ajustes feitos nas receitas, todos pela paleta fechada ou por conflito de nome:
   - cor literal vira token da paleta ou color-mix com token; máscara (só o alfa
     importa) usa var(--tinta);
   - pro-gradient-text e get-pro-button: as sete manchas da receita eram SVG em
     data-URI com cores fora da paleta e giravam o matiz com hue-rotate (que
     fabrica cores fora da paleta). Aqui viram radial-gradient com tokens e só
     passeiam pela borda; sem hue-rotate nem saturate;
   - card-stack-hover usa .t-cardstack (a 32 já tem .t-stack) e organic-shimmer
     usa .t-oshimmer (a 15 já tem .t-shimmer).
   Mapa de uso: DESIGN.md, seção "Transições: as 11 da transitions-pro". */

/* ── Card stack hover ─────────────────────────────────────────── */
.t-cardstack {
  position: relative;
  width: 120px;
  height: 120px;
  flex-shrink: 0;
}
.t-cardstack-card {
  appearance: none;
  border: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 78px;
  height: 78px;
  border-radius: var(--raio-m);
  background: var(--cartao);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--tinta) 6%, transparent),
    0 2px 6px color-mix(in srgb, var(--tinta) 5%, transparent),
    0 4px 42px color-mix(in srgb, var(--tinta) 6%, transparent);
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  translate: var(--cx) var(--cy);
  rotate: var(--rot);
  scale: 1;
  transition:
    translate var(--cardstack-close-dur) var(--cardstack-close-ease),
    rotate var(--cardstack-close-dur) var(--cardstack-close-ease),
    scale var(--cardstack-scale-dur) var(--cardstack-scale-ease);
  will-change: translate, rotate, scale;
}
.t-cardstack-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) {
  .t-cardstack:hover .t-cardstack-card {
    translate:
      calc(var(--cx) + var(--dx))
      calc(var(--cy) + var(--dy) * var(--cardstack-spread));
    rotate: calc(var(--rot) + var(--drot) * var(--cardstack-rotation));
    transition:
      translate var(--cardstack-open-dur) var(--cardstack-open-ease),
      rotate var(--cardstack-open-dur) var(--cardstack-open-ease),
      scale var(--cardstack-scale-dur) var(--cardstack-scale-ease);
  }
  .t-cardstack-card:hover {
    scale: var(--cardstack-scale);
    z-index: 30;
  }
}
@media (prefers-reduced-motion: reduce) {
  .t-cardstack-card { transition: none; }
}

/* ── Confetti burst ───────────────────────────────────────────── */
/* No painel o palco é uma camada fixa sobre a tela inteira (criada pelo JS),
   para os flocos sobreviverem à troca de foto da revisão. A receita de palco
   local (.t-confetti-stage relativo) também funciona com as mesmas classes. */
.t-confetti-stage {
  position: relative;
  overflow: hidden;
}
.t-confetti-stage.is-fixed {
  position: fixed;
  inset: 0;
  z-index: var(--z-toast);
  pointer-events: none;
  overflow: hidden;
}
.t-confetti-stage:not(.is-fixed) button {
  position: relative;
  z-index: 1;
}
.t-confetti-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .t-confetti-canvas { display: none; }
}

/* ── Drag and drop with physics ───────────────────────────────── */
.t-drop-wrap {
  position: relative;
  width: 213px;
  height: 192px;
}
.t-drop-chip {
  position: absolute;
  left: 141px;
  top: 0;
  width: 72px;
  height: 72px;
  border-radius: var(--raio-m);
  overflow: hidden;
  box-shadow: var(--drop-card-shadow);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  z-index: 5;
  translate: var(--dx, 0px) var(--dy, 0px);
  rotate: var(--tilt, 0deg);
  scale: var(--lift, 1);
  transition: scale var(--drop-lift-dur) var(--ease-smooth-out),
              rotate var(--duration-quick) var(--ease-out);
  will-change: translate, rotate, scale;
}
.t-drop-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.t-drop-chip.is-dragging { cursor: grabbing; z-index: 30; }
.t-drop-chip.is-returning {
  transition: translate var(--drop-return-dur) var(--drop-return-ease),
              rotate var(--drop-return-dur) var(--drop-return-ease),
              scale var(--drop-return-dur) var(--drop-return-ease);
}
.t-drop-chip.is-fading {
  opacity: 0;
  filter: blur(2px);
  transition: opacity var(--drop-dur) var(--drop-ease),
              filter var(--drop-dur) var(--drop-ease);
  pointer-events: none;
}
@keyframes t-drop-respawn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}
.t-drop-chip.is-respawning {
  animation-name: t-drop-respawn;
  animation-duration: var(--drop-respawn-dur);
  animation-timing-function: var(--ease-smooth-out);
}
.t-drop-zone {
  position: absolute;
  left: 0;
  top: 88px;
  width: 104px;
  height: 104px;
  border-radius: var(--raio-m);
  border: var(--drop-zone-border) dashed color-mix(in srgb, var(--tinta) 10%, transparent);
  background: color-mix(in srgb, var(--linha) 20%, transparent);
  transition: border-color var(--duration-quick) var(--ease-out), background-color var(--duration-quick) var(--ease-out),
              box-shadow var(--drop-fade-in) var(--drop-fade-ease);
}
.t-drop-zone.is-over {
  border-color: color-mix(in srgb, var(--tinta) 28%, transparent);
  background: color-mix(in srgb, var(--linha) 55%, transparent);
}
.t-drop-zone-label {
  position: absolute;
  left: 50%;
  top: 38px;
  transform: translateX(-50%);
  width: 76px;
  font-size: 11px;
  line-height: 15px;
  text-align: center;
  color: var(--tinta-suave);
  transition: opacity var(--duration-quick) var(--ease-out);
  pointer-events: none;
}
.t-drop-zone.is-over .t-drop-zone-label { opacity: 0.5; }
.t-drop-zone.is-filled {
  border-color: transparent;
  box-shadow: var(--drop-card-shadow);
}
.t-drop-zone.is-filled .t-drop-zone-label { opacity: 0; }
.t-drop-dropped {
  position: absolute;
  inset: calc(var(--drop-zone-border) * -1);
  width: calc(100% + var(--drop-zone-border) * 2);
  height: calc(100% + var(--drop-zone-border) * 2);
  object-fit: cover;
  border-radius: var(--raio-m);
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--drop-fade-in) var(--drop-fade-ease);
}
.t-drop-zone.is-filled .t-drop-dropped { opacity: 1; }
@keyframes t-drop-zone-down {
  from { transform: scale(1); }
  to   { transform: scale(var(--drop-morph-squash, 0.97)); }
}
@keyframes t-drop-zone-up {
  from { transform: scale(var(--drop-morph-squash, 0.97)); }
  to   { transform: scale(1); }
}
.t-drop-zone.is-landing {
  animation-name: t-drop-zone-down, t-drop-zone-up;
  animation-duration: var(--drop-down-dur), var(--drop-up-dur);
  animation-timing-function: var(--drop-down-ease), var(--drop-up-ease);
  animation-delay: 0ms, var(--drop-down-dur);
  animation-fill-mode: forwards, forwards;
  will-change: transform;
}
.t-drop-zone.is-emptying .t-drop-dropped {
  opacity: 0;
  filter: blur(4px);
  transition: opacity var(--drop-out-dur) var(--ease-smooth-out),
              filter var(--drop-out-dur) var(--ease-smooth-out);
}
.t-drop-zone.is-emptying {
  border-color: color-mix(in srgb, var(--tinta) 10%, transparent);
  box-shadow: var(--drop-card-shadow-off);
  transition: box-shadow var(--drop-out-dur) var(--ease-smooth-out),
              border-color var(--drop-out-dur) var(--ease-smooth-out);
}
.t-drop-puffs {
  position: absolute;
  inset: -50px;
  width: calc(100% + 100px);
  height: calc(100% + 100px);
  overflow: visible;
  pointer-events: none;
}
.t-drop-wave {
  fill: none;
  stroke: color-mix(in srgb, var(--tinta-suave) var(--drop-wave-opacity), transparent);
  opacity: 0;
  transform: translate(0, 0) scale(0.96);
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes t-drop-wave {
  0%   { opacity: 0;   transform: translate(0, 0) scale(0.96); }
  16%  { opacity: 0.9; }
  100% { opacity: 0;   transform: translate(0, var(--drop-wave-gravity, 10px)) scale(var(--wscale, 1.5)); }
}
.t-drop-zone.is-bursting .t-drop-wave {
  animation-name: t-drop-wave;
  animation-duration: var(--wdur, var(--drop-puff-dur));
  animation-timing-function: ease-out;
  animation-delay: var(--wdelay, 0ms);
  animation-fill-mode: forwards;
}
@media (prefers-reduced-motion: reduce) {
  .t-drop-chip { transition: none !important; }
  .t-drop-chip.is-respawning { animation: none !important; }
  .t-drop-zone.is-bursting .t-drop-wave,
  .t-drop-zone.is-landing { animation: none !important; }
  .t-drop-chip.is-fading,
  .t-drop-dropped { transition: none !important; }
}

/* ── Get pro button ───────────────────────────────────────────── */
.t-pro-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  height: 40px;
  padding: 0 18px;
  border: 0;
  cursor: pointer;
  background: var(--cartao);
  border-radius: var(--raio-pilula);
  overflow: hidden;
  font-weight: 500;
  font-size: var(--t-legenda);
  line-height: 1.4;
  color: var(--tinta);
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow:
    0 1px 3px 0 color-mix(in srgb, var(--tinta) 4%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--tinta) 6%, transparent),
    inset 0 -1px 0 0 color-mix(in srgb, var(--tinta) 10%, transparent);
}
/* As sete manchas: os tons da paleta no lugar do azul, magenta, laranja, verde e
   ciano da receita, cada uma 180% do botão e passeando pela borda. */
.t-pro-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 35% 90% at 50% 50%, color-mix(in srgb, var(--petroleo) 88%, transparent), transparent),
    radial-gradient(ellipse 60% 70% at 50% 50%, color-mix(in srgb, var(--petroleo) 50%, transparent), transparent),
    radial-gradient(ellipse 45% 80% at 50% 50%, color-mix(in srgb, var(--perigo) 40%, transparent), transparent 72%),
    radial-gradient(ellipse 50% 100% at 50% 50%, color-mix(in srgb, var(--perigo) 70%, transparent), transparent),
    radial-gradient(ellipse 60% 60% at 50% 50%, color-mix(in srgb, var(--alerta) 80%, transparent), transparent),
    radial-gradient(ellipse 50% 90% at 50% 50%, color-mix(in srgb, var(--sucesso) 85%, transparent), transparent),
    radial-gradient(ellipse 70% 60% at 50% 50%, color-mix(in srgb, var(--petroleo-forte) 80%, transparent), transparent);
  background-size: 180% 180%, 180% 180%, 180% 180%, 180% 180%,
                   180% 180%, 180% 180%, 180% 180%;
  background-repeat: no-repeat;
  -webkit-mask-image: radial-gradient(
    ellipse 46% 46% at 50% 50%,
    transparent var(--probtn-core),
    var(--tinta) calc(var(--probtn-core) + var(--probtn-core-blur))
  );
  mask-image: radial-gradient(
    ellipse 46% 46% at 50% 50%,
    transparent var(--probtn-core),
    var(--tinta) calc(var(--probtn-core) + var(--probtn-core-blur))
  );
  opacity: var(--probtn-strength);
  filter: blur(var(--probtn-blur));
  animation: t-pro-btn-drift var(--probtn-drift-dur) ease-in-out infinite;
}
.t-pro-btn-label { position: relative; z-index: 1; }
@keyframes t-pro-btn-drift {
  0%, 100% {
    background-position:
      100% 0%, 0% 50%, 100% 50%, 0% 100%,
      0% 0%, 50% 0%, 50% 100%;
  }
  25% {
    background-position:
      100% 100%, 50% 0%, 50% 100%, 0% 0%,
      100% 0%, 100% 50%, 0% 50%;
  }
  50% {
    background-position:
      0% 100%, 100% 0%, 0% 100%, 100% 0%,
      100% 100%, 100% 100%, 0% 0%;
  }
  75% {
    background-position:
      0% 0%, 100% 100%, 0% 0%, 100% 100%,
      50% 100%, 0% 100%, 100% 50%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .t-pro-btn::before { animation: none; }
}

/* ── Gooey plus menu ──────────────────────────────────────────── */
/* O filtro SVG fica no HTML (ver DESIGN.md); flood-color do sombreado sai do
   token --tinta, posto pelo JS (ligarMenuGosmento). */
.t-goo-anchor {
  position: relative;
  width: 200px;
  height: 140px;
}
.t-goo-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  will-change: filter, transform;
}
.t-goo-blob {
  fill: var(--goo-surface);
  transform: translate(0, 0);
  transform-box: fill-box;
  transition: transform var(--goo-close-dur) var(--goo-close-ease);
  will-change: transform;
}
.t-goo-anchor[data-open="true"] .t-goo-blob {
  transform: translate(calc(var(--fx, 0px) * var(--goo-spread)),
                       calc(var(--fy, 0px) * var(--goo-spread)));
  transition: transform var(--goo-open-dur) var(--goo-open-ease);
  transition-delay: calc(var(--i, 0) * var(--goo-stagger));
}
.t-goo-item,
.t-goo-main {
  position: absolute;
  left: 80px;
  top: 80px;
  width: 40px;
  height: 40px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--goo-icon-color);
  -webkit-tap-highlight-color: transparent;
  transform: translate(0, 0);
  transition: transform var(--goo-close-dur) var(--goo-close-ease),
              background-color 120ms ease;
  will-change: transform;
}
.t-goo-item { pointer-events: none; }
.t-goo-anchor[data-open="true"] .t-goo-item {
  pointer-events: auto;
  transform: translate(calc(var(--fx, 0px) * var(--goo-spread)),
                       calc(var(--fy, 0px) * var(--goo-spread)));
  transition: transform var(--goo-open-dur) var(--goo-open-ease),
              background-color 120ms ease;
  transition-delay: calc(var(--i, 0) * var(--goo-stagger)), 0ms;
}
.t-goo-anchor[data-open="true"] .t-goo-item:hover { background: color-mix(in srgb, var(--tinta) 4%, transparent); }
.t-goo-main:focus-visible,
.t-goo-item:focus-visible {
  outline: 2px solid var(--petroleo);
  outline-offset: 2px;
}
.t-goo-item svg {
  display: block;
  opacity: 0;
  filter: blur(2px);
  transition: opacity 120ms ease, filter 120ms ease;
}
.t-goo-anchor[data-open="true"] .t-goo-item svg {
  opacity: 1;
  filter: blur(0);
  transition: opacity 180ms ease, filter 180ms ease;
  transition-delay: calc(var(--i, 0) * var(--goo-stagger) + 120ms),
                    calc(var(--i, 0) * var(--goo-stagger) + 120ms);
}
@keyframes t-goo-anticipate {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(var(--goo-anticip)); }
  100% { transform: translateY(0); }
}
.t-goo-anchor.is-anticipating .t-goo-layer,
.t-goo-anchor.is-anticipating .t-goo-main {
  animation-name: t-goo-anticipate;
  animation-duration: var(--goo-anticip-dur);
  animation-timing-function: var(--goo-anticip-ease);
  animation-fill-mode: both;
}
.t-goo-swap {
  position: relative;
  display: inline-grid;
  place-items: center;
  transform: rotate(0deg);
  transition: transform var(--goo-icon-dur) var(--goo-icon-ease);
}
.t-goo-anchor[data-open="true"] .t-goo-swap { transform: rotate(var(--goo-icon-rotate)); }
.t-goo-icon { grid-area: 1 / 1; display: inline-flex; }
.t-goo-icon svg { display: block; }
@media (prefers-reduced-motion: reduce) {
  .t-goo-blob,
  .t-goo-item,
  .t-goo-item svg,
  .t-goo-swap,
  .t-goo-icon { transition: none !important; }
  .t-goo-anchor.is-anticipating .t-goo-layer,
  .t-goo-anchor.is-anticipating .t-goo-main { animation: none !important; }
}

/* ── Image generation placeholder ─────────────────────────────── */
.t-imgen {
  position: relative;
  width: 142px;
  height: 142px;
  border-radius: var(--raio-m);
  background: var(--linha);
  overflow: hidden;
  isolation: isolate;
}
.t-imgen-field {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  transition:
    opacity var(--imgen-reveal-dur) var(--imgen-reveal-ease),
    filter var(--imgen-reveal-dur) var(--imgen-reveal-ease);
}
.t-imgen-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  opacity: 0;
  filter: blur(var(--imgen-reveal-blur));
  transition:
    opacity var(--imgen-reveal-dur) var(--imgen-reveal-ease),
    filter var(--imgen-reveal-dur) var(--imgen-reveal-ease);
}
.t-imgen.is-revealed .t-imgen-field {
  opacity: 0;
  filter: blur(var(--imgen-reveal-blur));
}
.t-imgen.is-revealed .t-imgen-img {
  opacity: 1;
  filter: blur(0);
}
.t-imgen-field i {
  position: absolute;
  width: var(--imgen-dot);
  height: var(--imgen-dot);
  border-radius: 50%;
  background: var(--imgen-dot-color);
  opacity: calc(var(--imgen-peak) * var(--v, 1));
  transform: scale(
    calc(var(--imgen-scale-min) + (1 - var(--imgen-scale-min)) * var(--v, 1))
  );
}
.t-imgen.is-loading .t-imgen-field i {
  animation: t-imgen-twinkle calc(var(--imgen-cycle) * var(--k, 1))
    var(--imgen-ease) var(--delay, 0ms) infinite;
}
@keyframes t-imgen-twinkle {
  0%, 100% {
    opacity: 0;
    transform: scale(var(--imgen-scale-min));
  }
  50% {
    opacity: var(--imgen-peak);
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .t-imgen.is-loading .t-imgen-field i { animation: none !important; }
  .t-imgen-field,
  .t-imgen-img {
    filter: none !important;
    transition: none !important;
  }
}

/* ── Image open tilt ──────────────────────────────────────────── */
.t-opentilt-stage { perspective: var(--opentilt-perspective); }
.t-opentilt-card {
  appearance: none;
  border: 0;
  padding: 0;
  position: relative;
  width: var(--opentilt-open-w);
  height: var(--opentilt-open-h);
  border-radius: var(--opentilt-r-closed);
  overflow: visible;
  cursor: pointer;
  background: var(--papel-recuado);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--tinta) 6%, transparent),
    0 2px 6px color-mix(in srgb, var(--tinta) 5%, transparent),
    0 4px 42px color-mix(in srgb, var(--tinta) 6%, transparent);
  -webkit-tap-highlight-color: transparent;
  transform-origin: center;
  scale: var(--opentilt-closed-scale);
  transform: rotateX(0deg) rotateY(0deg) translateZ(0);
  will-change: scale, transform;
  transition:
    scale var(--opentilt-close-dur) var(--opentilt-close-ease),
    border-radius var(--opentilt-close-dur) var(--opentilt-close-ease);
}
.t-opentilt-canvas {
  position: absolute;
  display: none;
  pointer-events: none;
  z-index: 3;
}
.t-opentilt-card.is-bending { background: transparent; }
.t-opentilt-card.is-bending .t-opentilt-img { visibility: hidden; }
.t-opentilt-card.is-bending .t-opentilt-canvas { display: block; }
.t-opentilt-card.is-open {
  border-radius: var(--opentilt-r-open);
  scale: 1;
  transition:
    scale var(--opentilt-open-dur) var(--opentilt-open-ease),
    border-radius var(--opentilt-open-dur) var(--opentilt-open-ease);
  animation: t-opentilt-open var(--opentilt-open-dur) both;
}
.t-opentilt-card.is-closing {
  animation: t-opentilt-close var(--opentilt-close-dur) both;
}
@keyframes t-opentilt-open {
  0% {
    transform: rotateX(0deg) rotateY(0deg) translateZ(0);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.4, 1);
  }
  40% {
    transform:
      rotateX(var(--opentilt-tilt-x))
      rotateY(var(--opentilt-tilt-y))
      translateZ(var(--opentilt-lift));
    animation-timing-function: cubic-bezier(0.45, 0, 0.3, 1);
  }
  100% { transform: rotateX(0deg) rotateY(0deg) translateZ(0); }
}
@keyframes t-opentilt-close {
  0% {
    transform: rotateX(0deg) rotateY(0deg) translateZ(0);
    animation-timing-function: cubic-bezier(0.4, 0.4, 0.5, 1);
  }
  45% {
    transform:
      rotateX(calc(var(--opentilt-tilt-x) * -0.45))
      rotateY(calc(var(--opentilt-tilt-y) * -0.45))
      translateZ(calc(var(--opentilt-lift) * 0.4));
    animation-timing-function: cubic-bezier(0.45, 0, 0.3, 1);
  }
  100% { transform: rotateX(0deg) rotateY(0deg) translateZ(0); }
}
.t-opentilt-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none;
  border-radius: inherit;
}
@media (prefers-reduced-motion: reduce) {
  .t-opentilt-card,
  .t-opentilt-card.is-open,
  .t-opentilt-card.is-closing { animation: none; transition: none; }
}

/* ── Organic shimmer ──────────────────────────────────────────── */
/* Os seis tons da receita (azul, rosa, verde, roxo, laranja, ciano) viram os
   tons da paleta: petróleo, perigo, sucesso, petróleo forte, alerta, tinta suave. */
.t-oshimmer-tile {
  position: relative;
  width: 142px;
  height: 142px;
  border-radius: var(--raio-m);
  background: var(--linha);
  overflow: hidden;
  isolation: isolate;
  flex-shrink: 0;
}
.t-oshimmer-tile[data-playing="false"] .t-oshimmer-band,
.t-oshimmer-tile[data-playing="false"] .t-oshimmer-edge {
  animation-play-state: paused;
}
.t-oshimmer {
  position: absolute;
  inset: calc(-20px * var(--oshimmer-scale));
  filter: url(#t-oshimmer-warp) blur(calc(5px * var(--oshimmer-scale)));
  opacity: var(--oshimmer-opacity);
  pointer-events: none;
}
.t-oshimmer-band {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 49.45% 38.46% at 20% 15%, color-mix(in srgb, var(--petroleo) 14%, transparent), transparent),
    radial-gradient(ellipse 43.96% 32.97% at 65% 25%, color-mix(in srgb, var(--perigo) 13%, transparent), transparent),
    radial-gradient(ellipse 38.46% 43.96% at 30% 55%, color-mix(in srgb, var(--sucesso) 12%, transparent), transparent),
    radial-gradient(ellipse 49.45% 38.46% at 75% 65%, color-mix(in srgb, var(--petroleo-forte) 13%, transparent), transparent),
    radial-gradient(ellipse 38.46% 32.97% at 45% 85%, color-mix(in srgb, var(--alerta) 12%, transparent), transparent),
    radial-gradient(ellipse 32.97% 32.97% at 10% 85%, color-mix(in srgb, var(--tinta-suave) 11%, transparent), transparent),
    linear-gradient(color-mix(in srgb, var(--tinta-suave) 5%, transparent), color-mix(in srgb, var(--tinta-suave) 5%, transparent));
  -webkit-mask-image: linear-gradient(
    135deg,
    transparent 0%,
    transparent calc(50% - var(--oshimmer-band-span) * 0.8),
    color-mix(in srgb, var(--tinta) 25%, transparent) calc(50% - var(--oshimmer-band-span) * 0.45),
    color-mix(in srgb, var(--tinta) 70%, transparent) calc(50% - var(--oshimmer-band-span) * 0.18),
    var(--tinta) 50%,
    color-mix(in srgb, var(--tinta) 70%, transparent) calc(50% + var(--oshimmer-band-span) * 0.18),
    color-mix(in srgb, var(--tinta) 25%, transparent) calc(50% + var(--oshimmer-band-span) * 0.45),
    transparent calc(50% + var(--oshimmer-band-span) * 0.8),
    transparent 100%
  );
  -webkit-mask-size: 280% 280%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 100% 100%;
  mask-image: linear-gradient(
    135deg,
    transparent 0%,
    transparent calc(50% - var(--oshimmer-band-span) * 0.8),
    color-mix(in srgb, var(--tinta) 25%, transparent) calc(50% - var(--oshimmer-band-span) * 0.45),
    color-mix(in srgb, var(--tinta) 70%, transparent) calc(50% - var(--oshimmer-band-span) * 0.18),
    var(--tinta) 50%,
    color-mix(in srgb, var(--tinta) 70%, transparent) calc(50% + var(--oshimmer-band-span) * 0.18),
    color-mix(in srgb, var(--tinta) 25%, transparent) calc(50% + var(--oshimmer-band-span) * 0.45),
    transparent calc(50% + var(--oshimmer-band-span) * 0.8),
    transparent 100%
  );
  mask-size: 280% 280%;
  mask-repeat: no-repeat;
  mask-position: 100% 100%;
  animation: t-oshimmer-sweep var(--oshimmer-dur) var(--oshimmer-ease) infinite;
  pointer-events: none;
}
.t-oshimmer-edge {
  position: absolute;
  inset: calc(-20px * var(--oshimmer-scale));
  z-index: 1;
  opacity: var(--oshimmer-glow-strength);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(
    135deg,
    transparent 0%,
    transparent calc(50% - var(--oshimmer-band-span) * 1.4),
    color-mix(in srgb, var(--tinta) 6%, transparent) calc(50% - var(--oshimmer-band-span) * 1),
    color-mix(in srgb, var(--tinta) 18%, transparent) calc(50% - var(--oshimmer-band-span) * 0.6),
    color-mix(in srgb, var(--tinta) 45%, transparent) calc(50% - var(--oshimmer-band-span) * 0.25),
    var(--tinta) 50%,
    color-mix(in srgb, var(--tinta) 50%, transparent) calc(50% + var(--oshimmer-band-span) * 0.18),
    transparent calc(50% + var(--oshimmer-band-span) * 0.35),
    transparent 100%
  );
  -webkit-mask-size: 280% 280%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 100% 100%;
  mask-image: linear-gradient(
    135deg,
    transparent 0%,
    transparent calc(50% - var(--oshimmer-band-span) * 1.4),
    color-mix(in srgb, var(--tinta) 6%, transparent) calc(50% - var(--oshimmer-band-span) * 1),
    color-mix(in srgb, var(--tinta) 18%, transparent) calc(50% - var(--oshimmer-band-span) * 0.6),
    color-mix(in srgb, var(--tinta) 45%, transparent) calc(50% - var(--oshimmer-band-span) * 0.25),
    var(--tinta) 50%,
    color-mix(in srgb, var(--tinta) 50%, transparent) calc(50% + var(--oshimmer-band-span) * 0.18),
    transparent calc(50% + var(--oshimmer-band-span) * 0.35),
    transparent 100%
  );
  mask-size: 280% 280%;
  mask-repeat: no-repeat;
  mask-position: 100% 100%;
  animation: t-oshimmer-sweep var(--oshimmer-dur) var(--oshimmer-ease) infinite;
}
@keyframes t-oshimmer-sweep {
  0%   { -webkit-mask-position: 100% 100%; mask-position: 100% 100%; }
  100% { -webkit-mask-position: 0% 0%;     mask-position: 0% 0%; }
}
.t-oshimmer-edge-ring,
.t-oshimmer-edge-glow,
.t-oshimmer-edge-bloom {
  position: absolute;
  inset: calc(20px * var(--oshimmer-scale));
  border-radius: var(--raio-m);
  pointer-events: none;
}
.t-oshimmer-edge-ring {
  padding: calc(1px * var(--oshimmer-scale));
  opacity: var(--oshimmer-ring-strength);
  background:
    radial-gradient(ellipse 29.58% 16.90% at 33% -7.4%, color-mix(in srgb, var(--perigo) 62%, transparent), transparent),
    radial-gradient(ellipse 25.35% 14.79% at 12% -5%, color-mix(in srgb, var(--petroleo) 48%, transparent), transparent),
    radial-gradient(ellipse 16.90% 29.58% at 2.1% 68.3%, color-mix(in srgb, var(--sucesso) 55%, transparent), transparent),
    radial-gradient(ellipse 8.45% 14.79% at 2.1% 68.3%, color-mix(in srgb, var(--tinta-suave) 44%, transparent), transparent),
    radial-gradient(ellipse 76.06% 13.38% at 74.4% 100%, color-mix(in srgb, var(--petroleo-forte) 58%, transparent), transparent),
    radial-gradient(ellipse 35.92% 11.27% at 55% 100%, color-mix(in srgb, var(--petroleo) 51%, transparent), transparent),
    radial-gradient(ellipse 30.99% 13.38% at 93.9% 0%, color-mix(in srgb, var(--alerta) 65%, transparent), transparent),
    radial-gradient(ellipse 11.27% 17.61% at 100% 27.1%, color-mix(in srgb, var(--perigo) 50%, transparent), transparent),
    radial-gradient(ellipse 21.83% 20.42% at 100% 27.1%, color-mix(in srgb, var(--petroleo-forte) 56%, transparent), transparent),
    linear-gradient(color-mix(in srgb, var(--tinta-suave) 22%, transparent), color-mix(in srgb, var(--tinta-suave) 22%, transparent));
  -webkit-mask: linear-gradient(var(--tinta) 0 0) content-box, linear-gradient(var(--tinta) 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(var(--tinta) 0 0) content-box, linear-gradient(var(--tinta) 0 0);
  mask-composite: exclude;
}
.t-oshimmer-edge-glow {
  background:
    radial-gradient(ellipse 27.46% 14.79% at 33% -7.4%, color-mix(in srgb, var(--perigo) 34%, transparent), transparent),
    radial-gradient(ellipse 23.24% 12.68% at 12% -5%, color-mix(in srgb, var(--petroleo) 28%, transparent), transparent),
    radial-gradient(ellipse 14.79% 27.46% at 2.1% 68.3%, color-mix(in srgb, var(--sucesso) 30%, transparent), transparent),
    radial-gradient(ellipse 6.34% 12.68% at 2.1% 68.3%, color-mix(in srgb, var(--tinta-suave) 25%, transparent), transparent),
    radial-gradient(ellipse 73.24% 11.97% at 74.4% 100%, color-mix(in srgb, var(--petroleo-forte) 32%, transparent), transparent),
    radial-gradient(ellipse 33.80% 9.15% at 55% 100%, color-mix(in srgb, var(--petroleo) 28%, transparent), transparent),
    radial-gradient(ellipse 28.87% 11.97% at 93.9% 0%, color-mix(in srgb, var(--alerta) 35%, transparent), transparent),
    radial-gradient(ellipse 9.15% 16.20% at 100% 27.1%, color-mix(in srgb, var(--perigo) 28%, transparent), transparent),
    radial-gradient(ellipse 19.72% 18.31% at 100% 27.1%, color-mix(in srgb, var(--petroleo-forte) 30%, transparent), transparent),
    radial-gradient(ellipse 25.35% 25.35% at 0% 0%, color-mix(in srgb, var(--tinta-suave) 14%, transparent), transparent 70%),
    radial-gradient(ellipse 25.35% 25.35% at 100% 0%, color-mix(in srgb, var(--tinta-suave) 14%, transparent), transparent 70%),
    radial-gradient(ellipse 25.35% 25.35% at 0% 100%, color-mix(in srgb, var(--tinta-suave) 14%, transparent), transparent 70%),
    radial-gradient(ellipse 25.35% 25.35% at 100% 100%, color-mix(in srgb, var(--tinta-suave) 14%, transparent), transparent 70%);
  box-shadow: inset 0 0 calc(14px * var(--oshimmer-scale)) calc(1px * var(--oshimmer-scale)) color-mix(in srgb, var(--tinta-suave) 12%, transparent);
  filter: blur(calc(2px * var(--oshimmer-scale)));
  -webkit-mask-image:
    linear-gradient(var(--tinta), transparent calc(44px * var(--oshimmer-scale)), transparent calc(100% - 44px * var(--oshimmer-scale)), var(--tinta)),
    linear-gradient(to right, var(--tinta), transparent calc(44px * var(--oshimmer-scale)), transparent calc(100% - 44px * var(--oshimmer-scale)), var(--tinta));
  -webkit-mask-composite: source-over;
  mask-image:
    linear-gradient(var(--tinta), transparent calc(44px * var(--oshimmer-scale)), transparent calc(100% - 44px * var(--oshimmer-scale)), var(--tinta)),
    linear-gradient(to right, var(--tinta), transparent calc(44px * var(--oshimmer-scale)), transparent calc(100% - 44px * var(--oshimmer-scale)), var(--tinta));
  mask-composite: add;
}
.t-oshimmer-edge-bloom {
  background:
    radial-gradient(ellipse 38.73% 21.83% at 33% -7.4%, color-mix(in srgb, var(--perigo) 40%, transparent), transparent),
    radial-gradient(ellipse 33.10% 19.01% at 12% -5%, color-mix(in srgb, var(--petroleo) 34%, transparent), transparent),
    radial-gradient(ellipse 21.83% 38.73% at 2.1% 68.3%, color-mix(in srgb, var(--sucesso) 38%, transparent), transparent),
    radial-gradient(ellipse 98.59% 17.61% at 74.4% 100%, color-mix(in srgb, var(--petroleo-forte) 40%, transparent), transparent),
    radial-gradient(ellipse 46.48% 14.08% at 55% 100%, color-mix(in srgb, var(--petroleo) 35%, transparent), transparent),
    radial-gradient(ellipse 40.85% 17.61% at 93.9% 0%, color-mix(in srgb, var(--alerta) 44%, transparent), transparent),
    radial-gradient(ellipse 28.17% 26.76% at 100% 27.1%, color-mix(in srgb, var(--petroleo-forte) 38%, transparent), transparent);
  box-shadow:
    inset 0 0 calc(var(--oshimmer-glow-blur) * 3 * var(--oshimmer-scale)) calc(var(--oshimmer-glow-blur) / 2 * var(--oshimmer-scale))
      color-mix(in srgb, var(--tinta-suave) 10%, transparent);
  filter: blur(calc(var(--oshimmer-glow-blur) * var(--oshimmer-scale)));
  -webkit-mask-image:
    linear-gradient(var(--tinta), transparent calc(26px * var(--oshimmer-scale)), transparent calc(100% - 26px * var(--oshimmer-scale)), var(--tinta)),
    linear-gradient(to right, var(--tinta), transparent calc(26px * var(--oshimmer-scale)), transparent calc(100% - 26px * var(--oshimmer-scale)), var(--tinta));
  -webkit-mask-composite: source-over;
  mask-image:
    linear-gradient(var(--tinta), transparent calc(26px * var(--oshimmer-scale)), transparent calc(100% - 26px * var(--oshimmer-scale)), var(--tinta)),
    linear-gradient(to right, var(--tinta), transparent calc(26px * var(--oshimmer-scale)), transparent calc(100% - 26px * var(--oshimmer-scale)), var(--tinta));
  mask-composite: add;
}
@media (prefers-reduced-motion: reduce) {
  .t-oshimmer-band,
  .t-oshimmer-edge { animation: none; }
}

/* ── Pro gradient text ────────────────────────────────────────── */
/* Base: rampa da tinta (no lugar do cinza 108 a 216 da receita, que some no papel). */
.t-gradient-text {
  background-image:
    radial-gradient(ellipse 35% 90% at 50% 50%, color-mix(in srgb, var(--petroleo) 88%, transparent), transparent),
    radial-gradient(ellipse 60% 70% at 50% 50%, color-mix(in srgb, var(--petroleo) 50%, transparent), transparent),
    radial-gradient(ellipse 45% 80% at 50% 50%, color-mix(in srgb, var(--perigo) 40%, transparent), transparent 72%),
    radial-gradient(ellipse 50% 100% at 50% 50%, var(--perigo), transparent),
    radial-gradient(ellipse 60% 60% at 50% 50%, var(--alerta), transparent),
    radial-gradient(ellipse 50% 90% at 50% 50%, var(--sucesso), transparent),
    radial-gradient(ellipse 70% 60% at 50% 50%, var(--petroleo-forte), transparent),
    linear-gradient(var(--tinta) 0%, var(--tinta-suave) 100%);
  background-size: 180% 180%, 180% 180%, 180% 180%, 180% 180%,
                   180% 180%, 180% 180%, 180% 180%, 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: t-gradient-drift var(--gradient-text-drift-dur) ease-in-out infinite;
}
@keyframes t-gradient-drift {
  0%, 100% {
    background-position:
      100% 0%, 0% 50%, 100% 50%, 0% 100%,
      0% 0%, 50% 0%, 50% 100%, 0 0;
  }
  25% {
    background-position:
      100% 100%, 50% 0%, 50% 100%, 0% 0%,
      100% 0%, 100% 50%, 0% 50%, 0 0;
  }
  50% {
    background-position:
      0% 100%, 100% 50%, 0% 50%, 100% 0%,
      100% 100%, 50% 100%, 50% 0%, 0 0;
  }
  75% {
    background-position:
      0% 0%, 50% 100%, 50% 0%, 100% 100%,
      0% 100%, 0% 50%, 100% 50%, 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .t-gradient-text { animation: none; }
}

/* ── Delete with smoky dissolve ───────────────────────────────── */
.t-smoky-stage {
  position: relative;
  overflow: hidden;
  border-radius: var(--raio-g);
}
.t-smoky-card {
  position: relative;
  width: var(--smoky-size);
  height: var(--smoky-size);
  border-radius: var(--raio-g);
  overflow: hidden;
  background: var(--papel-recuado);
  box-shadow: 0 1px 3px var(--sombra);
  will-change: transform, opacity;
}
.t-smoky-canvas {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  will-change: transform, opacity;
}
.t-smoky-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.t-smoky-card.is-respawning {
  animation: t-smoky-respawn var(--duration-fast) var(--ease-smooth-out);
}
@keyframes t-smoky-respawn {
  from { opacity: 0; transform: scale(var(--scale-large)); }
  to   { opacity: 1; transform: scale(1); }
}
.t-smoky-delete {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cartao) 92%, transparent);
  color: var(--tinta);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--tinta) 25%, transparent);
  -webkit-tap-highlight-color: transparent;
  transition: background-color 120ms ease;
}
.t-smoky-delete:hover { background: var(--cartao); }
.t-smoky-delete:focus-visible { outline: 2px solid var(--petroleo); outline-offset: 2px; }
.t-smoky-delete svg { display: block; }
@media (prefers-reduced-motion: reduce) {
  .t-smoky-card.is-respawning { animation: none; }
  .t-smoky-canvas { display: none; }
}

/* ── Spinner to check morph ───────────────────────────────────── */
.t-check-blur-wrap {
  display: inline-flex;
  filter: blur(0);
  transition: filter var(--check-revert-dur) var(--check-revert-ease);
  will-change: filter;
}
.t-check-blur-wrap.is-crossing {
  filter: blur(var(--check-blur));
  transition: filter calc(var(--check-fill-dur) * 0.45) var(--check-fill-ease);
}
.t-check-badge {
  position: relative;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  scale: 1;
  transition: scale var(--check-revert-dur) var(--check-revert-ease);
  will-change: scale, transform;
}
.t-check-badge[data-state="done"] {
  scale: var(--check-pop-scale);
  transition: scale var(--check-pop-dur) var(--check-pop-ease);
  animation-name: t-check-pop-up, t-check-pop-down;
  animation-duration: var(--check-up-dur), var(--check-down-dur);
  animation-timing-function: var(--check-up-ease), var(--check-down-ease);
  animation-delay: 0ms, var(--check-up-dur);
  animation-fill-mode: forwards, forwards;
}
@keyframes t-check-pop-up {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(var(--check-hop, 3px) * -1)); }
}
@keyframes t-check-pop-down {
  from { transform: translateY(calc(var(--check-hop, 3px) * -1)); }
  to   { transform: translateY(0); }
}
.t-check-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: var(--check-ring-w) solid color-mix(in srgb, var(--tinta) 10%, transparent);
  transition: opacity var(--check-revert-dur) ease,
              filter var(--check-revert-dur) ease;
}
.t-check-badge[data-state="done"] .t-check-ring {
  opacity: 0;
  transition: opacity calc(var(--check-fill-dur) * 0.7) ease;
}
.t-check-fill {
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: var(--check-green);
  box-shadow:
    0 0 0 0.504px color-mix(in srgb, var(--tinta) 5%, transparent) inset,
    0 0.504px 0.504px 0 color-mix(in srgb, var(--tinta) 10%, transparent),
    0 0.504px 2.016px 0 color-mix(in srgb, var(--tinta) 8%, transparent),
    0 -0.504px 0.504px 0 color-mix(in srgb, var(--tinta) 9%, transparent) inset;
  opacity: 0;
  transition: opacity var(--check-revert-dur) var(--check-revert-ease);
  will-change: opacity;
}
.t-check-badge[data-state="done"] .t-check-fill {
  opacity: 1;
  transition: opacity var(--check-fill-dur) var(--check-fill-ease);
}
.t-check-arc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: var(--check-ring-w) solid transparent;
  border-top-color: var(--tinta-suave);
  animation-name: t-check-spin;
  animation-duration: var(--check-spin-dur);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  transition: opacity var(--check-revert-dur) var(--check-revert-ease);
  will-change: transform;
}
@keyframes t-check-spin {
  to { transform: rotate(360deg); }
}
.t-check-badge[data-state="done"] .t-check-arc {
  opacity: 0;
  animation-play-state: paused;
  transition: opacity calc(var(--check-fill-dur) * 0.5) ease;
}
.t-check-disc {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.t-check-disc svg { display: block; width: 100%; height: 100%; }
.t-check-mark {
  fill: none;
  stroke: var(--cartao);
  stroke-width: var(--check-mark-w);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--check-mark-len, 20);
  stroke-dashoffset: var(--check-mark-len, 20);
  transition: stroke-dashoffset var(--check-revert-dur) var(--check-revert-ease);
}
.t-check-badge[data-state="done"] .t-check-mark {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--check-draw-dur) var(--check-draw-ease)
    calc(var(--check-fill-dur) + var(--check-draw-delay) - 200ms);
}
.t-check-row { display: flex; align-items: center; gap: var(--e-4); }
.t-check-texts { display: flex; flex-direction: column; gap: 3px; }
.t-check-title { font-size: var(--t-legenda); font-weight: 500; line-height: 13px; }
.t-check-sub { font-size: var(--t-legenda); font-weight: 400; line-height: 13px; opacity: 0.5; }
@media (prefers-reduced-motion: reduce) {
  .t-check-arc { animation: none !important; }
  .t-check-blur-wrap,
  .t-check-blur-wrap.is-crossing {
    filter: none !important;
    transition: none !important;
  }
  .t-check-ring, .t-check-arc, .t-check-fill { transition: none !important; }
  .t-check-badge, .t-check-mark {
    transition: none !important;
    animation: none !important;
  }
  .t-check-badge[data-state="done"] .t-check-mark { stroke-dashoffset: 0; }
}