:root {
  --dk-hover-border: rgba(248, 113, 113, 0.5);
  --dk-hover-border-soft: rgba(255, 255, 255, 0.2);
  --dk-hover-glow: rgba(201, 13, 18, 0.28);
  --dk-hover-glow-soft: rgba(255, 255, 255, 0.08);
}

#root a,
#root button,
#root article,
#root form,
#root input,
#root textarea,
#root select,
#root [class*='rounded-lg'][class*='border'] {
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease,
    filter 180ms ease,
    opacity 180ms ease,
    transform 180ms ease;
}

#root img,
#root video {
  transition:
    filter 220ms ease,
    opacity 220ms ease,
    transform 260ms ease;
}

@media (hover: hover) and (pointer: fine) {
  #root a[href]:hover,
  #root button:not(:disabled):hover {
    filter: saturate(1.12) brightness(1.08);
    transform: translateY(-1px);
  }

  #root a[href]:active,
  #root button:not(:disabled):active {
    transform: translateY(0) scale(0.985);
  }

  #root header a[href]:hover,
  #root footer a[href]:hover {
    text-shadow: 0 0 18px rgba(248, 113, 113, 0.42);
  }

  #root article:hover,
  #root form:hover,
  #root [class*='rounded-lg'][class*='border']:where(:not(input):not(textarea):not(select)):hover {
    border-color: var(--dk-hover-border) !important;
    box-shadow:
      0 0 0 1px rgba(248, 113, 113, 0.08),
      0 0 28px var(--dk-hover-glow),
      inset 0 0 32px var(--dk-hover-glow-soft);
  }

  #root article:hover,
  #root main [class*='rounded-lg'][class*='border']:where(:not(button):not(input):not(textarea):not(select)):hover {
    transform: translateY(-2px);
  }

  #root article:hover img,
  #root [class*='rounded-lg'][class*='border']:hover img {
    filter: saturate(1.12) contrast(1.06) brightness(1.06);
  }

  #root input:hover,
  #root textarea:hover,
  #root select:hover {
    border-color: var(--dk-hover-border) !important;
    box-shadow:
      0 0 0 1px rgba(248, 113, 113, 0.08),
      0 0 20px rgba(201, 13, 18, 0.16);
  }

  #root input:focus,
  #root textarea:focus,
  #root select:focus {
    border-color: rgba(248, 113, 113, 0.78) !important;
    box-shadow:
      0 0 0 1px rgba(248, 113, 113, 0.2),
      0 0 26px rgba(201, 13, 18, 0.24);
  }

  #root label:hover {
    color: rgba(255, 255, 255, 0.86);
  }
}

@media (prefers-reduced-motion: reduce) {
  #root a,
  #root button,
  #root article,
  #root form,
  #root input,
  #root textarea,
  #root select,
  #root img,
  #root video,
  #root [class*='rounded-lg'][class*='border'] {
    transition: none !important;
  }

  #root a[href]:hover,
  #root button:not(:disabled):hover,
  #root article:hover,
  #root main [class*='rounded-lg'][class*='border']:where(:not(button):not(input):not(textarea):not(select)):hover {
    transform: none !important;
  }
}