/* DANCECAFE - ECHT BEWEGENDE NEONLIJNEN */

@property --dc-border-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes dc-border-rotate {
  from {
    --dc-border-angle: 0deg;
  }
  to {
    --dc-border-angle: 360deg;
  }
}

:root {
  --dc-blue: #00bfff;
  --dc-line: #ff8500;
}

/*
  De rand bestaat uit een eigen laag.
  De kleuren draaien langs de volledige omtrek.
*/
body :is(
  .chat,
  .chat-head,
  .messages,
  .sidebar,
  .users,
  .rooms,
  .room-list,
  .room-create,
  .panel,
  .card,
  .modal-content,
  .private-window,
  .private-message,
  .menu,
  .toolbar,
  .chat-input,
  .input-area,
  .message-input
) {
  border: 2px solid transparent !important;

  background:
    linear-gradient(
      #10101c,
      #10101c
    ) padding-box,

    conic-gradient(
      from var(--dc-border-angle),
      #ff3500,
      #ff8500,
      #ffd22e,
      #ffffff,
      #8deaff,
      #00bfff,
      #006dff,
      #833cff,
      #ff42c8,
      #ff3500
    ) border-box !important;

  animation:
    dc-border-rotate 3s linear infinite !important;
}

/* Knoppen en invoervelden */
body :is(
  button,
  input,
  textarea,
  select
) {
  border: 2px solid transparent !important;

  background:
    linear-gradient(
      #151525,
      #151525
    ) padding-box,

    conic-gradient(
      from var(--dc-border-angle),
      #ff3500,
      #ff8500,
      #ffd22e,
      #ffffff,
      #8deaff,
      #00bfff,
      #006dff,
      #833cff,
      #ff42c8,
      #ff3500
    ) border-box !important;

  animation:
    dc-border-rotate 3s linear infinite !important;
}

/* Horizontale lijnen */
body hr {
  border: 0 !important;
  height: 2px !important;

  background: linear-gradient(
    90deg,
    #ff3500,
    #ff8500,
    #ffd22e,
    #ffffff,
    #8deaff,
    #00bfff,
    #006dff,
    #833cff,
    #ff42c8,
    #ff3500
  ) !important;

  background-size: 300% 100% !important;

  animation:
    dc-line-move 3s linear infinite !important;
}

@keyframes dc-line-move {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 100% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body :is(
    .chat,
    .chat-head,
    .messages,
    .sidebar,
    .users,
    .rooms,
    .room-list,
    .room-create,
    .panel,
    .card,
    .modal-content,
    .private-window,
    .private-message,
    .menu,
    .toolbar,
    .chat-input,
    .input-area,
    .message-input,
    button,
    input,
    textarea,
    select
  ),
  body hr {
    animation: none !important;
  }
}