/**
 * @name mys.client v1 For Vencord
 * @author mys
 * @version 7.0.1
 * @description #1 Theme For Vencord
 * @source https://github.com/notmys/mys-client-v1
 * @website https://github.com/notmys/mys-client-v1
 * @invite djMQRCNAAZ
 *
 * Fork of ClearVision v7
 * Original ClearVision repo: https://github.com/ClearVision/ClearVision-v7
 * Original website: https://clearvision.github.io/
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at:
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * DONT FORGET THIS IS A FORK OF CLEAR VISION ALL CREDITS TO THEM!
 * Clear Vision v7 links below!
 * https://github.com/ClearVision/ClearVision-v7
 * https://clearvision.github.io/
 */

/* 
 * Modified by mys.client (mys)
 * Changes: Couple of performance changes
 */

@import url("https://raw.githubusercontent.com/notmys/vencord-theme/refs/heads/main/main.css");
@import url("https://raw.githubusercontent.com/notmys/mys-client/refs/heads/main/vencord.css");

/* SETTINGS */
:root {
  --main-color: #ffffff9c;
  --hover-color: #e9e9e98e;
  --success-color: #43b581;
  --danger-color: #982929;
  --online-color: #43b581;
  --idle-color: #faa61a;
  --dnd-color: #982929;
  --streaming-color: #593695;
  --offline-color: #808080;
  --background-shading-percent: 0%;
  --background-image: url(https://raw.githubusercontent.com/notmys/notmys.github.io/refs/heads/main/faded-memories-2962925704.gif);
  --background-position: center;
  --background-size: contain;
  --background-attachment: fixed;
  --background-filter: saturate(calc(var(--saturation-factor, 1) * 1));
  --user-popout-image: var(--background-image);
  --user-popout-position: var(--background-position);
  --user-popout-size: var(--background-size);
  --user-popout-attachment: var(--background-attachment);
  --user-popout-filter: var(--background-filter);
  --user-modal-image: var(--background-image);
  --user-modal-position: var(--background-position);
  --user-modal-size: var(--background-size);
  --user-modal-attachment: var(--background-attachment);
  --user-modal-filter: var(--background-filter);
  --home-icon: url(https://raw.githubusercontent.com/notmys/notmys.github.io/a5d6744437654d9fabf6239f8cb6f11f6df25691/discord.svg);
  --home-size: cover;
  --main-font: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --code-font: Consolas, "gg mono", "Liberation Mono", Menlo, Courier, monospace;
  --channel-normal: var(--interactive-normal);
  --channel-muted: var(--interactive-muted);
  --channel-hover: var(--interactive-hover);
  --channel-selected: var(--interactive-active);
  --channel-selected-bg: var(--main-color);
  --channel-unread: var(--main-color);
  --channel-unread-hover: var(--hover-color);
  --focus-color: var(--main-color);
}

/* LIGHT THEME */
:is(.theme-light, .theme-dark .theme-light) {
  --background-shading: rgba(252, 252, 252, 0.3);
  --card-shading: rgba(252, 252, 252, 0.3);
  --popout-shading: rgba(252, 252, 252, 0.7);
  --modal-shading: rgba(252, 252, 252, 0.5);
  --input-shading: rgba(0, 0, 0, 0.3);
  --normal-text: #36363c;
  --muted-text: #75757e;
}

/* ASH THEME */
:is(.theme-dark, .theme-light .theme-dark) {
  --background-shading: rgba(0, 0, 0, 0.4);
  --card-shading: rgba(0, 0, 0, 0.2);
  --popout-shading: rgba(0, 0, 0, 0.6);
  --modal-shading: rgba(0, 0, 0, 0.4);
  --input-shading: rgba(255, 255, 255, 0.05);
  --normal-text: #d8d8db;
  --muted-text: #aeaeb4;
}

/* DARK THEME */
:is(.theme-darker, .theme-light .theme-darker) {
  --background-shading: rgba(0, 0, 0, 0.6);
  --card-shading: rgba(0, 0, 0, 0.3);
  --popout-shading: rgba(0, 0, 0, 0.7);
  --modal-shading: rgba(0, 0, 0, 0.5);
  --input-shading: rgba(255, 255, 255, 0.05);
  --normal-text: #fbfbfb;
  --muted-text: #94949c;
}

/* ONYX THEME */
:is(.theme-midnight, .theme-light .theme-midnight) {
  --background-shading: rgba(0, 0, 0, 0.8);
  --card-shading: rgba(0, 0, 0, 0.4);
  --popout-shading: rgba(0, 0, 0, 0.8);
  --modal-shading: rgba(0, 0, 0, 0.6);
  --input-shading: rgba(255, 255, 255, 0.05);
  --normal-text: #dcdcde;
  --muted-text: #86868e;
}

/* =============================== */
/* ===== ADDITIONAL CUSTOM CSS === */
/* =============================== */

.scroller_c1e9c4.thin_d125d2.scrollerBase_d125d2 {
  scroll-behavior: smooth !important;
}

/* Label Enhancement for .label_c1e9c4 */
.label_c1e9c4::before,
.label_c1e9c4::after {
  display: block;
  font-weight: bold;
  color: var(--main-color);
  margin: 0.2em 0;
  content: "──────────";
}

/* Glowing effect specifically for the bottom line (IP ADDRESS or separator) */
.label_c1e9c4::after {
  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.8),
    0 0 12px rgba(255, 255, 255, 0.6),
    0 0 24px rgba(255, 255, 255, 0.4),
    0 0 40px rgba(255, 255, 255, 0.3);
  animation: smoothGlowPulse 3.5s ease-in-out infinite;
}

/* Reused smooth glow animation */
@keyframes smoothGlowPulse {
  0%, 100% {
    text-shadow:
      0 0 5px rgba(255, 255, 255, 0.6),
      0 0 10px rgba(255, 255, 255, 0.5),
      0 0 20px rgba(255, 255, 255, 0.3),
      0 0 35px rgba(255, 255, 255, 0.2);
  }
  50% {
    text-shadow:
      0 0 8px rgba(255, 255, 255, 1),
      0 0 16px rgba(255, 255, 255, 0.8),
      0 0 28px rgba(255, 255, 255, 0.6),
      0 0 50px rgba(255, 255, 255, 0.4);
  }
}

.defaultColor__4bd52.lineClamp1__4bd52.text-sm\/medium_cf4812 {
  color: transparent !important;
  position: relative;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: unset !important;
  max-width: none !important;
  height: auto !important;
  display: block !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  -webkit-box-orient: unset !important;
}

.defaultColor__4bd52.lineClamp1__4bd52.text-sm\/medium_cf4812::after {
  content: "mys.client ";
  color: #fff;
  font-weight: bold;
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  text-shadow:
    0 0 2px #ffffffe7,
    0 0 4px #fffffff8;
  animation: glowPulse 5s infinite ease-in-out;
}

@keyframes glowPulse {
  0%, 100% {
    text-shadow: 0 0 2px #ffffff, 0 0 4px #ffffffe3;
  }
  50% {
    text-shadow: 0 0 1px #ffffffe8, 0 0 3px #c4c1c1e1;
  }
}

/* =============================== */
/* ===== PURE CSS LOADING SCREEN === */
/* =============================== */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.94);
  z-index: 99999;
  animation: mysLoadingFadeOut 5s forwards 3.5s;
  pointer-events: none;
}

body::after {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border: 5px solid rgba(255, 255, 255, 0.2);
  border-top-color: #fff;
  border-radius: 50%;
  z-index: 100000;
  animation: mysSpinner 1s linear infinite, mysLoadingFadeOut 5s forwards 3.5s;
  pointer-events: none;
}

@keyframes mysSpinner {
  to {
    transform: rotate(360deg);
  }
}

/* Fade in/out keyframes */
@keyframes mysFadeInOut {
  0% { opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; }
}

/* Fade out of entire loading screen */
@keyframes mysLoadingFadeOut {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

.indicators__2f4f7,
.experimentTitleIcon__2f4f7,
.text-md\/normal_cf4812.experimentOverlayTitle__2f4f7,
.experimentTitleIcon__2f4f7,
.scroller_c1e9c4.thin_d125d2.scrollerBase_d125d2,
.scroller_c1e9c4.thin_d125d2.scrollerBase_d125d2 * {
  color: #fff !important;
  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.8),
    0 0 12px rgba(255, 255, 255, 0.6),
    0 0 24px rgba(255, 255, 255, 0.4),
    0 0 40px rgba(255, 255, 255, 0.3);
  animation: smoothGlowPulse 3.5s ease-in-out infinite;
}

@keyframes smoothGlowPulse {
  0%, 100% {
    text-shadow:
      0 0 5px rgba(255, 255, 255, 0.6),
      0 0 10px rgba(255, 255, 255, 0.5),
      0 0 20px rgba(255, 255, 255, 0.3),
      0 0 35px rgba(255, 255, 255, 0.2);
  }
  50% {
    text-shadow:
      0 0 8px rgba(255, 255, 255, 1),
      0 0 16px rgba(255, 255, 255, 0.8),
      0 0 28px rgba(255, 255, 255, 0.6),
      0 0 50px rgba(255, 255, 255, 0.4);
  }
}