@import "plyr.css";
@import "animate.min.css";

:root {
  --surface2: #200f12;
  --line: #2a1510;
  --accent: #ff6400;
}

/* 1. Плавный переход цвета при переключении */
html {
    transition: filter 0.3s ease;
}

/* 2. Инверсия цветов при активном классе light-mode на html */
html.light-mode {
    filter: invert(1) hue-rotate(180deg);
}

/* 3. Восстановление исходных цветов (двойная инверсия) */
html.light-mode img,
html.light-mode video,
html.light-mode iframe,
html.light-mode picture,
html.light-mode svg:not(.theme-toggle-btn svg),
html.light-mode [style*="background-image"],
html.light-mode .uk-logo img,
html.light-mode .no-invert,
/* --- Исключения для Cookie-баннеров --- */
html.light-mode .tm-cookie-banner,       /* Встроенный YOOtheme Pro */
html.light-mode .cc-window,               /* CookieConsent от Insites / Osano */
html.light-mode #cookiehint,              /* CookieHint Joomla Plugin */
html.light-mode #cookie-bar,              /* Cookie Bar */
html.light-mode .uk-notification {         /* Если баннер выводится уведомлением UIkit */
    filter: invert(1) hue-rotate(180deg) !important;
}

/* --- Стили для встроенной кнопки --- */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: transparent;
    color: #f59e0b;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
    overflow: hidden;
}

.theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.3);
}

html.light-mode .theme-toggle-btn {
    color: #0284c7; 
}

/* --- Вращение иконок --- */
.theme-toggle-btn .sun-icon,
.theme-toggle-btn .moon-icon {
    position: absolute;
    width: 20px;
    height: 20px;
    fill: currentColor;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
}

.theme-toggle-btn .sun-icon {
    opacity: 1;
    transform: rotate(0deg);
}
.theme-toggle-btn .moon-icon {
    opacity: 0;
    transform: rotate(-90deg);
}

html.light-mode .theme-toggle-btn .sun-icon {
    opacity: 0;
    transform: rotate(90deg);
}
html.light-mode .theme-toggle-btn .moon-icon {
    opacity: 1;
    transform: rotate(0deg);
}

body::before,
body::after {
	content: '';
	position: fixed;
	pointer-events: none;
	z-index: 1;
	will-change: transform, filter, background;
	opacity: 0.75;
}

body::before {
	width: 600px;
	height: 600px;
	top: 0;
	right: 0;
	*transform: translate(-50%, -50%) scaleX(-1);
	transform: rotateY(0);
	animation: chaosFlare 24s ease-in-out infinite,
			   erraticPulse 18s ease-in-out infinite;
}

body::after {
	width: 600px;
	height: 600px;
	bottom: 0;
	left: 0;
	*transform: translate(-50%, -50%)scaleY(-1);
	transform: rotateY(-180deg);
	animation: chaosFlare 24s ease-in-out infinite,
			   erraticPulse 18s ease-in-out infinite;
}


@keyframes chaosFlare {
    0% {
        background: 
            radial-gradient(circle at 25% 35%, rgba(255, 0, 100, 0.25) 0%, transparent 20%),
            radial-gradient(circle at 75% 65%, rgba(100, 0, 255, 0.2) 0%, transparent 25%);
    }
    20% {
        background: 
            radial-gradient(circle at 80% 20%, rgba(255, 150, 0, 0.3) 0%, transparent 15%),
            radial-gradient(circle at 30% 80%, rgba(0, 200, 255, 0.18) 0%, transparent 20%);
    }
    40% {
        background: 
            radial-gradient(circle at 50% 50%, rgba(255, 0, 200, 0.25) 0%, transparent 20%),
            radial-gradient(circle at 10% 40%, rgba(200, 255, 0, 0.15) 0%, transparent 25%);
    }
    60% {
        background: 
            radial-gradient(circle at 60% 75%, rgba(0, 100, 255, 0.25) 0%, transparent 18%),
            radial-gradient(circle at 40% 25%, rgba(255, 50, 0, 0.23) 0%, transparent 22%);
    }
    80% {
        background: 
            radial-gradient(circle at 15% 60%, rgba(150, 0, 255, 0.25) 0%, transparent 20%),
            radial-gradient(circle at 85% 45%, rgba(255, 100, 0, 0.2) 0%, transparent 28%);
    }
    100% {
        background: 
            radial-gradient(circle at 25% 35%, rgba(255, 0, 100, 0.25) 0%, transparent 20%),
            radial-gradient(circle at 75% 65%, rgba(100, 0, 255, 0.2) 0%, transparent 25%);
    }
}

@keyframes erraticPulse {
    0%, 100% {
        filter: blur(120px) brightness(1);
        *transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
    25% {
        filter: blur(100px) brightness(1.4);
        *transform: translate(-50%, -50%) scale(1.1) rotate(90deg);
    }
    50% {
        filter: blur(120px) brightness(0.9);
        *transform: translate(-50%, -50%) scale(0.95) rotate(-90deg);
    }
    75% {
        filter: blur(115px) brightness(1.2);
        *transform: translate(-50%, -50%) scale(1.05) rotate(180deg);
    }
}

.uk-offcanvas-bar {
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.uk-offcanvas-bar .uk-nav-default {
	font-size: 16px;
}

/*
.uk-container {
	position: relative;
	z-index: 10
}*/
.es-glitch-wrapper {
	position: relative;
	top: -300px;
}

#es-glitch-hero {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background: url(/templates/yootheme_entropysoul/images/bg-hero-2.webp);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.es-glitch-box {
	position: absolute;
	background: url(/templates/yootheme_entropysoul/images/bg-hero-4.webp);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

.es-hero  {
	position: relative;
}

.es-hero h1 .es-glitch {
	position: relative;
	display: inline-block;
	background: linear-gradient(135deg, #ff6400, #ff9500);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	animation: gradientShift 5s ease infinite;
}

.es-hero h1 .es-glitch::before,
.es-hero h1 .es-glitch::after {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #ff6400, #ff9500);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.es-hero h1 .es-glitch::before {
	animation: glitchTop 3s infinite;
	clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
}

.es-hero h1 .es-glitch::after {
	animation: glitchBottom 2.5s infinite;
	clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
}

@keyframes glitchTop {
	0%, 90%, 100% { transform: translate(0); }
	91% { transform: translate(-2px, -2px); }
	93% { transform: translate(2px, 2px); }
	95% { transform: translate(0); }
}

@keyframes glitchBottom {
	0%, 92%, 100% { transform: translate(0); }
	93% { transform: translate(2px, 2px); }
	95% { transform: translate(-2px, -2px); }
	97% { transform: translate(0); }
}

h1.es-h1 > span {
	display: inline-block;
	width: 100%;
}

.uk-sticky-fixed .uk-navbar-container {
	background: #100300;
}

.es-node-hover {
	*background: var(--surface);
	border: 1px solid var(--line);
	*border-radius: 12px;
	*padding: 40px 32px;
	*height: 100%;
	transition: border-color 0.3s ease, transform 0.3s ease, background 0.3s ease;
	position: relative;
	overflow: hidden;
}
.es-node-hover::before {
	content: '';
	position: absolute;
	inset: 0;
	opacity: 0;
	background: radial-gradient(circle at 30% 0%, rgba(255,100,0,0.1), transparent 60%);
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.es-node-hover:hover { 
	border-color: var(--accent);
	ransform: translateY(-4px);
	background: var(--surface2);
}
.es-node-hover:hover::before {
	transform: translate(-50%, -50%) scale(1.2);
	opacity: 1;
}

/* Glitch Start */
.glitch-txt {
  animation: glitch 1s linear infinite;
}

@keyframes glitch{
  2%, 64% {
    transform: translate(2px,0) skew(0deg);
  }
  4%, 60% {
    transform: translate(-2px,0) skew(0deg);
  }
  62% {
    transform: translate(0,0) skew(5deg); 
  }
}

.glitch-txt:before,
.glitch-txt:after {
	content: attr(title);
	position: absolute;
	left: 0;
}

.glitch-txt:before {
	animation: glitchTop 1s linear infinite;
	clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}

@keyframes glitchTop {
	2%, 64%{
		transform: translate(2px,-2px);
	}
	4%, 60% {
		transform: translate(-2px,2px);
	}
	62%{
		transform: translate(13px,-1px) skew(-13deg); 
	}
}

.glitch-txt:after {
	animation: glitchBotom 1.5s linear infinite;
	clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
	-webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
}

@keyframes glitchBotom {
	2%, 64% {
		transform: translate(-2px,0);
	}
	4%, 60% {
		transform: translate(-2px,0);
	}
	62% {
		transform: translate(-22px,5px) skew(21deg); 
	}
}
/* Glitch End */

.es-grid-lab {
	
}

.es-grid-lab > .uk-grid > div:nth-child(1) > .el-item span.uk-icon {
	/* color: #00eaff; */
	color: #00b7f4;
}

.es-grid-lab > .uk-grid > div:nth-child(2) > .el-item span.uk-icon {
	/* color: #8b00ff; */
	color: #6958a4;
}

.es-grid-lab > .uk-grid > div:nth-child(3) > .el-item span.uk-icon {
	/* color: #ff3c00; */
	color: #f655a0;
}

.es-grid-lab > .uk-grid > div:nth-child(4) > .el-item span.uk-icon {
	/* color: #ffe600; */
	color: #f24841;
}

.es-grid-lab > .uk-grid > div:nth-child(5) > .el-item span.uk-icon {
	/* color: #ff009d; */
	color: #fff324;
}

.es-grid-lab > .uk-grid > div:nth-child(6) > .el-item span.uk-icon {
	/* color: #39ff14; */
	color: #83c550;
}

.es-portfolio-gallery .uk-tile-muted {
	background-color: rgba(16, 3, 0, .75);
}

/* Custom style Plyr JS */
.plyr--audio .plyr__controls {
	*background: #190505;
	background: #1c0517;
}

.plyr__control svg {
	fill: #6e6266;
}

.plyr--audio .plyr__control:focus-visible,
.plyr--audio .plyr__control:hover,
.plyr--audio .plyr__control[aria-expanded=true] {
	background: #ff6400;
}

.plyr--audio .plyr__control:hover svg {
	fill: #f3f3f3;
}

.plyr--full-ui input[type="range"] {
	color: #ff6400;
}

#cntme_txt {
	min-width: 100%;
	min-height: 160px;
}

.es-form-checkbox-icon {
	width: 24px;
}

.es-form-checkbox-icon:nth-child(1) {
	
}

/* //Custom style Plyr JS */

.es-section-popover .uk-inline > img {
	border-radius: 6px;
}

.es-section-popover .uk-marker {
	background: #ff6400;
	color: #fff;
}

/* Modal Windows */
.uk-modal {
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

#modal-collab .uk-modal-dialog {
	overflow: hidden;
}

#modal-collab .uk-modal-dialog .es-border-animation {
	position: absolute;
}

#modal-collab .uk-modal-dialog .es-border-animation:nth-child(1) {
	top: 0;
	right: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(to right, #200f12, #ff6400);
	animation: border-animate-right 2s linear infinite;
}

@keyframes border-animate-right {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(100%);
	}
}

#modal-collab .uk-modal-dialog .es-border-animation:nth-child(2) {
	top: 0;
	right: 0;
	width: 2px;
	height: 100%;
	background: linear-gradient(to bottom, #200f12, #ff6400);
	animation: border-animate-bottom 2s linear infinite;
	animation-delay: 1s;
}

@keyframes border-animate-bottom {
	0% {
		transform: translateY(-100%);
	}
	100% {
		transform: translateY(100%);
	}
}

#modal-collab .uk-modal-dialog .es-border-animation:nth-child(3) {
	bottom: 0;
	right: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(to left, #200f12, #ff6400);
	animation: border-animate-left 2s linear infinite;
}

@keyframes border-animate-left {
	0% {
		transform: translateX(100%);
	}
	100% {
		transform: translateX(-100%);
	}
}

#modal-collab .uk-modal-dialog .es-border-animation:nth-child(4) {
	top: 0;
	left: 0;
	width: 2px;
	height: 100%;
	background: linear-gradient(to top, #200f12, #ff6400);
	animation: border-animate-top 2s linear infinite;
	animation-delay: 1s;
}

@keyframes border-animate-top {
	0% {
		transform: translateY(100%);
	}
	100% {
		transform: translateY(-100%);
	}
}

#modal-collab .uk-iconnav li:nth-child(1):hover span {
	color: #00b7f4
}

#modal-collab .uk-iconnav li:nth-child(2):hover span {
	color: #6958a4
}

#modal-collab .uk-iconnav li:nth-child(3):hover span {
	color: #f655a0
}

#modal-collab .uk-iconnav li:nth-child(4):hover span {
	color: #f24841
}

#modal-collab .uk-iconnav li:nth-child(5):hover span {
	color: #fff324
}

#modal-collab .uk-iconnav li:nth-child(6):hover span {
	color: #83c550
}

.pg-blog {
	
}

.pg-blog .uk-card-default {
	background: #fff;
}



.es-footer-txt-logo {
	color: #fff;
	line-height: normal;
}

.es-footer-txt-logo .es-logo-txt-s {
	font-size: 3rem;
}


.es-footer-txt-logo .es-logo-txt-d {
	font-size: 1.3rem;
}

@media (min-width:1200px) {
	#modal-collab .uk-modal-dialog {
		width: 600px !important;
	}
}

@media (max-width:768px) {
	audio {
		width: 100%;
	}
}