* {
	box-sizing: border-box;
    cursor: none !important; 
  /* outline: 1px solid white; */
}

@font-face {
  font-family: Bebas;
  src: url('Bebas_Neue_Cyrillic.ttf');
}

@font-face {
  font-family: Fira;
  src: url('FiraCode-Light.ttf');
}



html, body {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Remove scrollbar on Firefox */
  -ms-overflow-style: none; /* Remove scrollbar on IE and Edge */
  cursor: none; /* Hide the actual cursor */
  max-width: 100%;
  overflow-x: hidden;
	--bgblack: #131313;
	--white: #f8f8f8;
	--black: #2E2E2E;
    --vidblack: #050505;
    --songsheight: 580vh;
	background-color: var(--bgblack);
	color: var(--white);
	font-family: Bebas;
	text-shadow: 0px 0px 4px rgba(248, 248, 248, 0.8),
  0px 0px 8px rgba(248, 248, 248, 0.7),
  0px 0px 16px rgba(248, 248, 248, 0.6),
  0px 0px 32px rgba(248, 248, 248, 0.5),
  0px 0px 64px rgba(248, 248, 248, 0.4);
}

 /*Remove scrollbar on Chrome, Safari and Opera */
html::-webkit-scrollbar { 
  display: none;
}

#custom-cursor {
  position: fixed;
  width: 24px;
  height: 30px;
  top: 0;
  left: 0;
  pointer-events: none; /* so it doesn't block clicks */
  background: url('../Images/cursor1.png') no-repeat center center;
  background-size: contain;
  z-index: 9; /* place it beneath overlay (set overlay's z-index higher) */
  transition: transform 0.02s linear; /* optional for tiny smoothing */
}



h1 {
	font-size: 100px;
}

h2 {
  font-size: 50px;
}

h3 {
  font-size: 35px;
}

p {
  font-family: Fira;
  font-size: 20px;
}

ul {
list-style-type: none;
}

ul li a {
  color: var(--white);
  font-size: 50px;
  text-decoration: none;
}

ul li a:hover {
  text-decoration: none;
}

sup.custom-sup {
  font-size: 0.3em; /* Adjust this as needed */
  vertical-align: 0em;
}

.unavailable {
  color: var(--black);
}

.unavailable:hover {
  text-decoration: none;
}

.link-text:hover {
  text-decoration: none;
  color: var(--white);
}

.unavailable:hover .link-text {
  text-decoration: underline;
}

section {
	position: relative;
	display: flex;
    flex-direction: column;
	width: 100%;
	height: 100vh;
    padding: 50px;
}



.hero {
	display: flex;
	gap: 20px;
	flex-direction: row;
	justify-content: start;
	align-items: start;
    background-color: var(--vidblack);
}

.hero-left {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 75%;
  margin-right: 0;
  padding-right: 0;
  margin-left: 0;
  overflow: hidden;
}

.hero-right {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  height: 100%;
  max-width: 100%;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.releases {
  justify-content: start;
  align-items: start;
  flex-wrap: nowrap;
  height: 20vh;
  background-color: var(--vidblack);
}

.release-text {
  width: 100%;
  height: 100%;
}

.songs {
  height: var(--songsheight);
  overflow: hidden;
  padding: 0px;
  position: relative;
}

.song {
  width: 100%;
  height: 120vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

#dvopovnia {
  height: 100vh;
}

.background-image {
  position: absolute;
  width: 100vw;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
  z-index: 0;
}


.platforms {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 15px;
  background-color: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
  border-radius: 180px;
  will-change: backdrop-filter;
  width: 200px;
  height: 80px;
}


/* All songs layouts */
.dvopovnia,
.wave, 
.cutw,
.howtodiss,
.howl {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: start;
  align-content: stretch;
  padding: 50px;
  gap: 20px;
}

/* Двоповня */
.dvopovnia-first {
  flex-basis: 100%;
  align-self: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 100vh;
}

.dvopovnia-title {
  margin-bottom: 0;
  margin-top: 3%;
}

.dvopovnia-platforms {
  align-self: flex-start;
  margin-top: 30%;
  padding-top: 0.5%;
}


/* Хвиля */
.wave-first {
  flex-basis: 70%;
  align-self: center;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.wave-title {
  padding-top: 25%;
  padding-bottom: 20%;
}

.wave-platforms {
  align-self: flex-start;
  padding-top: 0;
}

/* Climbing up the walls */
.cutw-second {
  flex-basis: 0;
  align-self: center;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 100vh;
  align-items: flex-end;
}

.cutw-title {
 margin-top: 5%;
 padding-bottom: 45%;
}

.cutw-platforms {
  padding-top: 1%;
}

/* How to disappear */
.howtodiss-first {
  flex-basis: 70%;
  align-self: center;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.howtodiss-title {
  margin-bottom: 0;
  margin-top: 5%;
}

.howtodiss-platforms {
  margin-top: 40%;
  padding-top: 1%;
}

/* Вий */
.howl {
  justify-content: space-between;
}

.howl-platforms {
  align-self: flex-end;
  padding-top: 0.6%;
}

.howl-title {
  margin-top: 20px;
}

video {
  position: absolute;
  width: 100vw;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
  z-index: 0;
}

footer {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: start;
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: var(--vidblack);
}

.footer-left {
  position: relative;
  width: 70%;
  height: 100%;
  overflow: hidden;
}

.footer-video {
  width: 100%;
  height: 100%;
}

.footer-right {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 50%;
  margin-right: 0;
  padding-right: 10%;
  margin-left: 0;
  
}


/* Songs page styles */
.songs-hero {
  background-color: var(--vidblack);
}

.songs-hero-left {
  background-color: var(--vidblack);
}

section.song-page {
  height: 600vh;
}

/* About us page styles */
.about-us-hero {
  background-color: var(--vidblack);
}

.about-us-hero-left {
  background-color: var(--vidblack);
}

.about-us-video {
  transform: scale(1.5);
}

section.members {
  height: 400vh;
  padding: 0px;
  background-color: var(--vidblack);
}

div.nick {
  background-color: var(--vidblack);
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: space-around;
  left: 0;
  right: 0;
  padding: 50px;
  padding-top: 20%;
  height: 130vh;
}

.member-photo {
  padding-top: 10%;
  justify-self: start;
  width: 30%;
}

.member-image {
  width: 100%;
}

.name {
  display: flex;
  justify-self: center;
  width: 30%;
  justify-content: center;
}

.instruments {
  padding-top: 30%;
  width: 30%;
  display: flex;
  justify-content: center;
}

div.myky {
  background-color: var(--vidblack);
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: space-around;
  left: 0;
  right: 0;
  padding: 50px;
  padding-top: 20%;
  height: 130vh;
}

.myky-name {
  display: flex;
  justify-self: start;
  justify-content: start;
}

div.serhii {
  background-color: var(--vidblack);
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: space-around;
  left: 0;
  right: 0;
  padding: 50px;
  padding-top: 20%;
  height: 130vh;
  padding-bottom: 20%;
}

.serhii-name {
  display: flex;
  justify-content: flex-end;
}

/* Equipment page styles */
.equipment-hero {
  background-color: var(--vidblack);
}

.equipment-left {
  background-color: var(--vidblack);
}





/* Loader styles */
.loader-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #131313;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2;
}

.loader-text {
	font-family: Bebas;
	font-size: 50px;
	color: #F8F8F8;
	text-shadow: 0px 0px 4px rgba(248, 248, 248, 1),
	0px 0px 8px rgba(248, 248, 248, 0.9),
	0px 0px 16px rgba(248, 248, 248, 0.7),
	0px 0px 32px rgba(248, 248, 248, 0.5),
	0px 0px 64px rgba(248, 248, 248, 0.3);
}

.dot-1, .dot-2, .dot-3 {
	font-family: Bebas;
	opacity: 0;
	animation: dot-animation 1.5s infinite;
}

.dot-2 {
	animation-delay: 0.5s;
}

.dot-3 {
	animation-delay: 1s;
}

@keyframes dot-animation {
	0% { opacity: 0; }
	50% { opacity: 1; }
	100% { opacity: 0; }
}

/* Hide loader when content is loaded */
.loader-hidden {
	opacity: 0;
	visibility: hidden;
	transition: visibility 0s 0.5s, opacity 0.5s linear;
}





/* Base screen effect */
.screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(
  rgba(18, 16, 16, 0) 50%,
  rgba(0, 0, 0, 0.25) 50%
  ),
  linear-gradient(
  90deg,
  rgba(255, 0, 0, 0.06),
  rgba(0, 255, 0, 0.02),
  rgba(0, 0, 255, 0.06)
  );
  background-size: 100% 2px, 100% 100%;
  animation: flicker 0.15s infinite;
  z-index: 10;
  pointer-events: none;
}

/* Overlay for additional texture */
.overlay {
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  /* Create scan lines with more visible spacing */
  background: 
    repeating-linear-gradient(
      to bottom,
      rgba(18, 16, 16, 0) 0px,
      rgba(18, 16, 16, 0) 2px,
      rgba(0, 0, 0, 0.20) 2px,
      rgba(0, 0, 0, 0.20) 4px
    ),
    linear-gradient(
      90deg,
      rgba(255, 0, 0, 0.04),
      rgba(0, 255, 0, 0.02),
      rgba(0, 0, 255, 0.04)
    );
  /* Make the pattern size larger for more visible movement */
  background-size: 100% 8px, 100% 100%;
  /* Ensure the animation is applied correctly */
  animation: endless-scan 0.2s linear infinite;
  z-index: 10;
}


/* Flicker animation */
@keyframes flicker {
  0% { opacity: 0.97; }
  2% { opacity: 0.95; }
  4% { opacity: 0.94; }
  6% { opacity: 0.98; }
  8% { opacity: 0.93; }
  10% { opacity: 0.97; }
  12% { opacity: 0.95; }
  14% { opacity: 0.98; }
  16% { opacity: 0.94; }
  18% { opacity: 0.96; }
  20% { opacity: 0.98; }
  22% { opacity: 0.97; }
  24% { opacity: 0.95; }
  26% { opacity: 0.98; }
  28% { opacity: 0.96; }
  30% { opacity: 0.95; }
  32% { opacity: 0.97; }
  34% { opacity: 0.96; }
  36% { opacity: 0.98; }
  38% { opacity: 0.95; }
  40% { opacity: 0.97; }
  42% { opacity: 0.96; }
  44% { opacity: 0.98; }
  46% { opacity: 0.94; }
  48% { opacity: 0.97; }
  50% { opacity: 0.95; }
}

/* Subtle scan animation */
@keyframes scan {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

/* Endless scan animation */
@keyframes endless-scan {
  from { background-position-y: 0px; }
  to { background-position-y: 8px; } /* Move exactly one pattern repeat */
}

/* Occasional glitch effect */
.glitch {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 11;
  animation: glitch-effect 4s infinite;
}

@keyframes glitch-effect {
  0% { opacity: 0; }
  90% { opacity: 0; }
  90.1% { opacity: 0.3; transform: translate3d(5px, 0, 0); }
  90.2% { opacity: 0; transform: translate3d(0, 0, 0); }
  99.9% { opacity: 0.3; transform: translate3d(-5px, 0, 0); }
  100% { opacity: 0; transform: translate3d(0, 0, 0); }
}

/* Vignette effect */
.vignette {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  box-shadow: 0 0 200px rgba(0,0,0,0.9) inset;
  pointer-events: none;
  z-index: 12;
}




/* Parallax effect additions - only adds 3D transforms without changing layout */

@media (max-width: 768px) {
  
  .hero, footer {
    text-shadow: 0px 0px 4px rgba(248, 248, 248, 1),
    0px 0px 8px rgba(248, 248, 248, 0.9),
    0px 0px 16px rgba(248, 248, 248, 0.7),
    0px 0px 32px rgba(248, 248, 248, 0.5),
    0px 0px 64px rgba(248, 248, 248, 0.3);
  }
  
  .songs {
    perspective: none;
  }
  
  .background-image,
  .video,
  .wave-title, 
  .cutw-title, 
  .howtodiss-title, 
  .howl-title,
  .wave-first, 
  .cutw-second, 
  .howtodiss-first, 
  .howl-platforms,
  .wave p, 
  .cutw p, 
  .howtodiss p, 
  .howl p {
    transform: none;
  }
}

/* New parallax styles */
.songs {
  position: relative;
  height: var(--songsheight);
  overflow: hidden;
}

.song {
  position: relative;
  height: 120vh;
  overflow: hidden;
}

/* Make sure backgrounds cover the whole song section */
.background-image,
.video {
  position: absolute;
  width: 100%;
  height: 120%;  /* Extra height for parallax movement */
  object-fit: cover;
  top: -10%;      /* Position to allow movement */
  left: 0;
  z-index: 0;
  will-change: transform;  /* Optimize for animation */
  transition: transform 0.1s ease-out;  /* Smoother transitions */
}

/* Prepare song content for parallax movement */
.wave-title, 
.cutw-title, 
.howtodiss-title, 
.howl-title,
.wave-platforms,
.cutw-platforms, 
.howtodiss-platforms, 
.howl-platforms {
  position: relative;
  will-change: transform;
  transition: transform 0.1s ease-out;
}

/* Song content wrappers need to maintain their position */
.wave, 
.cutw,
.howtodiss,
.howl {
  position: relative;
  z-index: 1;
}

/* Ensure the lyrics (p tags) are positioned properly */
.wave p, 
.cutw p, 
.howtodiss p, 
.howl p {
  position: relative;
  z-index: 2;
}

/* Maintain proper z-index stacking */
.screen, .overlay, .glitch, .vignette {
  position: fixed;
  z-index: 10;
  pointer-events: none;
}

@media (max-width: 715px) {
  
  .loader-text {
    font-size: 35px;
  }
  
  #custom-cursor {
    display: none;
  }
  
  h1 {
    font-size: 60px;
  }
  
  h2 {
    font-size: 40px;
  }
  
  h3 {
    font-size: 35;
  }
  
  .hero {
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
  }
  
  .hero-left {
    justify-content: center;
    width: 100%;
  }
  
  .hero-right {
    display: none;
  }
  
  .wave, 
  .cutw,
  .howtodiss,
  .howl {
    flex-direction: column;
    height: 50vh;
  }
  
  .cutw-title {
    margin-bottom: 0;
  }
  
  #howl {
    display: none;
  }
  
  
  
  p {
    display: none;
  }
  
  footer {
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
  }
  
  .footer-left {
    height: 25%;
    z-index: 1;
  }
  
  .footer-right {
    justify-content: center;
    width: 100%;
    padding: 0;
    padding-top: 45%;
    z-index: 0;
  }
  
  div.nick, div.myky, div.serhii {
    flex-direction: column;
    justify-content: normal;
  }
  .member-photo {
    width: 100%;
  }
  .instruments {
    width: 100%;
  }
  .name {
    width: 100%;
  }

/* Extra large screens */
@media (width >= 1920px) {
/* CSS styles go here */
}  

/* Desktops */
@media (1200px <= width <= 1919px) {
/* CSS styles go here */
}

/* Laptops/Large tablets */ 
@media (992px <= width <= 1199px) {
/* CSS styles go here */
}

/* Small tablets */  
@media (768px <= width <= 991px) {
* CSS styles go here */
}

/* Extra small devices */ 
@media (481px <= width <= 767px) {
/* CSS styles go here */
}

/* Mobile devices */
@media (width <= 480px) {
/* CSS styles go here*/
  html, body {
    /*text-shadow: 0px 0px 16px rgba(248, 248, 248, 0.7),
    0px 0px 32px rgba(248, 248, 248, 0.5),
    0px 0px 64px rgba(248, 248, 248, 0.3);*/
    text-shadow: 0px 0px 1px rgba(248, 248, 248, 0.6),
    0px 0px 2px rgba(248, 248, 248, 0.6),
    0px 0px 4px rgba(248, 248, 248, 0.4),
    0px 0px 8px rgba(248, 248, 248, 0.3),
    0px 0px 16px rgba(248, 248, 248, 0.2);
  }
    
  ul {
    padding-left: 0;
  }
  .song h1 {
    align-self: center;
    text-align: center;
  }
  .songs {
    height: 220vh;
    
  }
  .platforms {
    align-self: center;
  }
  .howtodiss-first h2 {
    display: none;
  }
  .dvopovnia-platforms {
    margin-top: 50%;
  }
  .wave-title {
    margin-top: 3%;
  }
  .wave-platforms {
    margin-top: 30%;
  }
  section.song-page {
    height: 300vh;
  }
}