/* daltv-motion-ux-v1 */
:root {
  --daltv-motion-fast: 140ms;
  --daltv-motion-base: 240ms;
  --daltv-motion-slow: 460ms;
  --daltv-motion-ease: cubic-bezier(.22, 1, .36, 1);
  --daltv-motion-spring: cubic-bezier(.2, .9, .25, 1.18);
  --daltv-motion-accent: var(--daltv-red, var(--red, var(--vermelho, #e30613)));
  --daltv-motion-focus: color-mix(in srgb, var(--daltv-motion-accent) 24%, transparent);
  --daltv-motion-glow: color-mix(in srgb, var(--daltv-motion-accent) 18%, transparent);
}

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: daltv-page-out 150ms ease-in both;
}

::view-transition-new(root) {
  animation: daltv-page-in 320ms var(--daltv-motion-ease) both;
}

html[data-daltv-motion="full"] {
  scroll-behavior: smooth;
  scroll-padding-top: max(84px, env(safe-area-inset-top));
}

html[data-daltv-motion="full"] body {
  text-rendering: optimizeLegibility;
}

[data-daltv-motion-control] {
  transition:
    translate var(--daltv-motion-fast) var(--daltv-motion-ease),
    scale var(--daltv-motion-fast) var(--daltv-motion-ease),
    box-shadow var(--daltv-motion-base) ease,
    filter var(--daltv-motion-base) ease,
    opacity var(--daltv-motion-base) ease,
    color var(--daltv-motion-base) ease,
    background-color var(--daltv-motion-base) ease,
    border-color var(--daltv-motion-base) ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

[data-daltv-motion-control]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--daltv-motion-accent) 56%, #fff);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--daltv-motion-focus);
}

[data-daltv-motion-control]:active:not(:disabled):not([aria-disabled="true"]) {
  translate: 0 1px;
  scale: .975;
}

[data-daltv-motion-control][aria-pressed="true"],
[data-daltv-motion-control][aria-selected="true"],
[data-daltv-motion-control][aria-current="page"],
[data-daltv-motion-control].is-active,
[data-daltv-motion-control].active {
  filter: saturate(1.06);
}

[data-daltv-motion-control]:disabled,
[data-daltv-motion-control][aria-disabled="true"] {
  translate: 0 0 !important;
  scale: 1 !important;
}

.daltv-motion-relative {
  position: relative !important;
}

.daltv-motion-ripple-host {
  overflow: hidden;
  isolation: isolate;
}

.daltv-motion-ripple {
  position: absolute;
  z-index: 0;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: currentColor;
  opacity: .2;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  animation: daltv-ripple 560ms ease-out forwards;
}

[data-daltv-motion-surface] {
  transition:
    translate var(--daltv-motion-base) var(--daltv-motion-ease),
    scale var(--daltv-motion-base) var(--daltv-motion-ease),
    box-shadow var(--daltv-motion-base) ease,
    border-color var(--daltv-motion-base) ease,
    background-color var(--daltv-motion-base) ease,
    filter var(--daltv-motion-base) ease;
}

:where(.field, .form-group, .input-group, .search-box, .country-picker, .composer-field) {
  transition: box-shadow var(--daltv-motion-base) ease, border-color var(--daltv-motion-base) ease;
}

:where(.field, .form-group, .input-group, .search-box, .country-picker, .composer-field):focus-within {
  border-color: color-mix(in srgb, var(--daltv-motion-accent) 58%, transparent);
  box-shadow: 0 0 0 4px var(--daltv-motion-focus);
}

:where(input, textarea, select)[aria-invalid="true"] {
  animation: daltv-field-attention 360ms var(--daltv-motion-ease) both;
}

:where(input[type="checkbox"], input[type="radio"]):checked {
  animation: daltv-control-check 260ms var(--daltv-motion-spring) both;
}

[aria-expanded="true"] :where(.chevron, [class*="chevron"], [data-chevron]) {
  rotate: 180deg;
}

:where(.chevron, [class*="chevron"], [data-chevron]) {
  transition: rotate var(--daltv-motion-base) var(--daltv-motion-ease);
}

details > summary {
  transition: color var(--daltv-motion-base) ease, background-color var(--daltv-motion-base) ease;
}

details[open] > :not(summary) {
  animation: daltv-details-open 280ms var(--daltv-motion-ease) both;
}

dialog[open],
[popover]:popover-open,
[role="dialog"].is-open,
[role="dialog"].open,
[role="dialog"][aria-hidden="false"] {
  animation: daltv-dialog-in 320ms var(--daltv-motion-ease) both;
}

dialog::backdrop {
  animation: daltv-backdrop-in 240ms ease-out both;
  backdrop-filter: blur(5px);
}

.daltv-motion-busy-surface {
  position: relative;
  isolation: isolate;
}

.daltv-motion-busy-surface::after {
  content: "";
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  width: 34%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--daltv-motion-accent), #ffd700, transparent);
  box-shadow: 0 2px 12px var(--daltv-motion-glow);
  animation: daltv-busy-track 1.15s ease-in-out infinite;
  pointer-events: none;
}

.daltv-motion-control-busy {
  cursor: progress !important;
  filter: saturate(.78);
}

.daltv-motion-control-busy::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 7px;
  right: 7px;
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  opacity: .75;
  animation: daltv-spin 700ms linear infinite;
  pointer-events: none;
}

.daltv-motion-live-update {
  animation: daltv-live-update 440ms var(--daltv-motion-ease) both;
}

.daltv-motion-target {
  animation: daltv-target-focus 900ms var(--daltv-motion-ease) both;
}

.theme-toggle[data-daltv-motion-spin="true"] :where(svg, .theme-toggle__icon),
[data-theme-toggle][data-daltv-motion-spin="true"] :where(svg, [aria-hidden="true"]) {
  animation: daltv-theme-spin 420ms var(--daltv-motion-spring) both;
}

.daltv-motion-scroll-progress {
  position: fixed;
  z-index: 2147483000;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #b91c1c, var(--daltv-motion-accent) 58%, #ffd700);
  box-shadow: 0 2px 12px var(--daltv-motion-glow);
  transform: scaleX(0);
  transform-origin: left center;
  animation: daltv-scroll-progress linear both;
  animation-timeline: scroll(root block);
  animation-range: 0% 100%;
  pointer-events: none;
}

.daltv-motion-scroll-progress[data-complete="true"] {
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  [data-daltv-motion-control]:hover:not(:disabled):not([aria-disabled="true"]) {
    translate: 0 -2px;
    filter: brightness(1.035) saturate(1.035);
  }

  [data-daltv-motion-surface]:hover:not([aria-busy="true"]):not(.is-loading):not(.loading):not([data-daltv-motion-static]) {
    translate: 0 -3px;
    box-shadow: 0 18px 42px color-mix(in srgb, #0f172a 14%, transparent);
  }
}

@media (max-width: 760px) {
  [data-daltv-motion-surface] {
    transition-duration: var(--daltv-motion-fast);
  }

  .daltv-motion-scroll-progress {
    height: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }

  html[data-daltv-motion] {
    scroll-behavior: auto !important;
  }

  [data-daltv-motion-control],
  [data-daltv-motion-surface],
  :where(.field, .form-group, .input-group, .search-box, .country-picker, .composer-field),
  :where(.chevron, [class*="chevron"], [data-chevron]) {
    transition: none !important;
  }

  .daltv-motion-ripple,
  .daltv-motion-live-update,
  .daltv-motion-target,
  details[open] > :not(summary),
  dialog[open],
  [popover]:popover-open,
  [role="dialog"].is-open,
  [role="dialog"].open,
  [role="dialog"][aria-hidden="false"],
  .theme-toggle[data-daltv-motion-spin="true"] :where(svg, .theme-toggle__icon),
  [data-theme-toggle][data-daltv-motion-spin="true"] :where(svg, [aria-hidden="true"]) {
    animation: none !important;
  }

  dialog::backdrop {
    animation: none !important;
    backdrop-filter: none;
  }

  .daltv-motion-scroll-progress {
    display: none;
  }
}

@keyframes daltv-page-out {
  to { opacity: .82; filter: saturate(.9); }
}

@keyframes daltv-page-in {
  from { opacity: .7; transform: translateY(6px); }
}

@keyframes daltv-ripple {
  60% { opacity: .15; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(var(--daltv-ripple-scale, 18)); }
}

@keyframes daltv-scroll-progress {
  0% { opacity: 1; transform: scaleX(0); }
  98% { opacity: 1; transform: scaleX(.98); }
  100% { opacity: 0; transform: scaleX(1); }
}

@keyframes daltv-field-attention {
  35% { translate: -3px 0; }
  68% { translate: 3px 0; }
}

@keyframes daltv-control-check {
  45% { scale: 1.16; }
}

@keyframes daltv-details-open {
  from { opacity: 0; transform: translateY(-7px); }
}

@keyframes daltv-dialog-in {
  from { opacity: 0; transform: translateY(14px) scale(.975); }
}

@keyframes daltv-backdrop-in {
  from { opacity: 0; backdrop-filter: blur(0); }
}

@keyframes daltv-busy-track {
  from { translate: -110% 0; }
  to { translate: 390% 0; }
}

@keyframes daltv-spin {
  to { rotate: 1turn; }
}

@keyframes daltv-live-update {
  0% { opacity: .64; translate: 0 5px; }
  48% { filter: brightness(1.09); }
}

@keyframes daltv-target-focus {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  36% { box-shadow: 0 0 0 7px var(--daltv-motion-focus); }
}

@keyframes daltv-theme-spin {
  45% { rotate: 155deg; scale: .84; }
  100% { rotate: 360deg; scale: 1; }
}