@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap');
html, body {
    cursor: url('./piclist/cursor.png'), auto !important;
    background-color: #070707;
    margin: 0 !important;
    overflow-x: hidden;
}
p {
    position: absolute; 
    width: 100%; 
    text-align: left; 
    font-weight:bold;
    letter-spacing: 1.1px; 
    line-height: 1.2;
    z-index: 6; 
    color: #c9c9c9; 
    font-family: 'UnifrakturMaguntia', serif; 
    font-size: 1.7vw;
}
.container {
    position: relative;
    height: auto;
    display:block;
}
.container2 {
    cursor: url('./piclist/cursor.png'), auto !important;
    position: relative;
    height: auto;
    display:block;
    background-color: #101010;
}
img {
    display: block;
    height: auto;
    width: 100%;
    position: relative;
}

/* title*/
.of {
  position:absolute;
  transform:scale(0.15);
  top: -7.1%;
  left: -30%;
}
.of:hover {
  filter:brightness(1.2);
  transform: scale(0.15) translateY(-30px);
}
.root {
  position:absolute;
  transform:scale(0.21);
  top: -1%;
  left: -11.3%;
}
.root:hover {
  filter:brightness(1.2);
  transform: scale(0.21) translateY(-30px);
}
.and {
  position:absolute;
  transform:scale(0.09);
  top: -5.9%;
  left: -21%;
}
.and:hover {
  filter:brightness(1.4);
  transform: scale(0.09) translateY(-30px);
}
.ruin {
  position:absolute;
  transform:scale(0.25);
  top: 3%;
  left: -4.6%;
}
.ruin:hover {
  filter:brightness(1.2);
  transform: scale(0.25) translateY(-30px);
}
.dust-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  min-height: 10vh;
  pointer-events: none;
  z-index: 8; 
  overflow: visible;
}

.dust-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: white;
  opacity: 0.6;
  border-radius: 50%;
  filter: blur(1px);
  animation: float-dust linear infinite;
}

@keyframes float-dust {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0.3;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(-150px) translateX(50px) scale(1.3);
    opacity: 0;
  }
}

/*music button*/
.music-wrapper {
    position: absolute;
    top: 12%;
    left: 86%;
    transform: scale(0.85);
    z-index: 10;
    text-align: center;
    pointer-events: auto;
    cursor: url('./piclist/cursor.png'), auto !important;
}
.music {
    position:relative;
    top: 0;
    left: 0;
    opacity: 100%;
    animation: spin 5s linear infinite;
    opacity: 1;
    pointer-events: none; 
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.music-wrapper:hover .music {
    animation-play-state: paused;
}
.text-circle-svg {
  position: absolute;
  top: -3%;
  left: -3%;
  font-size: 2vh;
  fill: #c9c9c9;
  text-shadow: 0 0 5px black;
  pointer-events: none; 
  transform: scale(1.5);
}

.text-circle-svg textPath {
  font-family: 'UnifrakturMaguntia', serif;
  letter-spacing: 1px;
}

/*Sticky bg*/
.sticky-bg {
  position: sticky;
  top: 0;
  z-index: 0;
  width: 100%;
  display: block;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
    mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}
.shade1 {
    position: absolute;
    top: 0;
    width: 100%;
    height: auto;
    z-index: 0;
    opacity: 100%;
     -webkit-mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
    mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/*SEC2*/
.wrapper {
    position: relative;
    height: auto;
    display:block;
    width: 100%;
    aspect-ratio: 16/9;
    cursor: url('./piclist/cursor.png'), auto !important;
}
.wrapper2 {
    position: relative;
    height: auto;
    display:block;
    width: 100%;
    aspect-ratio: 16/9;
    background-color: #101010;
    cursor: url('./piclist/cursor.png'), auto !important;
}
.frame {
    position: absolute;
    width: 100%;
    height: auto;
    z-index: 1;
}
.girlfox {
    position: absolute;
    width: 100%;
    height: auto;
    z-index: 2;
}
.fox {
    position: absolute;
    top: 13%;
    left: 30%;
    width: 100%;
    height: auto;
    z-index: 5;
    transform:scale(0.123);
}
.moon {
    position: absolute;
    top: 70%;
    left: 23%;
    width: 100%;
    height: auto;
    z-index: 3;
    transform:scale(0.25);
}
.bunny {
    position: absolute;
    top: 13%;
    left: 18.5%;
    width: 100%;
    height: auto;
    z-index: 4;
    transform:scale(0.075);
}
.fox, .moon, .bunny {
  transition: transform 0.4s ease;
  transform-origin: top center;
}

.fox:hover {
  transform: scale(0.123) rotate(-20deg);
  filter: drop-shadow(0 0 20px rgba(255, 0, 0, 0.6));
}

.moon:hover {
  transform: scale(0.25) translateX(-40vh);
  filter: drop-shadow(0 0 15px rgba(255, 0, 0, 0.6));
}

.bunny:hover {
  transform: scale(0.075) rotate(20deg);
  filter: drop-shadow(0 0 20px rgba(255, 0, 0, 0.6));
}


/*SEC3*/
.bg1 {
    position: absolute;
    top: -100%;
    left: 15%;
    width: 100%;
    height: auto;
    z-index: 0;
    transform:scale(0.55);
}
.crowleft {
    position: absolute;
    top: 70px;
    left: 0;
    z-index: 2;
    height: auto;
}
.leftcry {
    position: absolute;
    top: 70px;
    left: 0;
    z-index: 2;
    height: auto;
    filter: brightness(1.5);
}
.rightcry {
    position: absolute;
    top: 70px;
    left: 0;
    z-index: 2;
    height: auto;
    filter: brightness(1.5);
}
.lefteye {
    position: absolute;
    top: 70px;
    left: 0;
    z-index: 2;
    height: auto;
    filter: brightness(1.5);
}
.righteye {
    position: absolute;
    top: 61px;
    left: 0;
    z-index: 2;
    height: auto;
    filter: brightness(1.5);
}
.crowright {
    position: absolute;
    top: 60px;
    right: 0;
    z-index: 2;
    height: auto;
}
.treebranch {
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 1;
}
.wind {
    position: absolute;
    opacity: 0;
}

/*SEC4*/
.wind2 {
    position: absolute;
    top: 50px;
    z-index:6;
    animation: windScale 4s ease-in-out infinite;
    transform-origin: center center;
}
@keyframes windScale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
.gradient {
  height: 150px;
  width: 100%;
  background: linear-gradient(#080808, #070707); 
  display: flex;
}

/*SEC5*/
.handleft {
    position: absolute;
    top: 15%;
    left: -2.5%;
    animation: handleft-rotate 2s infinite alternate ease-in-out;
    transform-origin: left center;
    z-index: 10;
}
@keyframes handleft-rotate {
  0%   { transform: rotate(-2deg); }
  100% { transform: rotate(4deg); }
}
.handright {
    position: absolute;
    top: 28%;
    right: -2%;
    animation: handright-rotate 2s infinite alternate ease-in-out;
    transform-origin: right center;
    z-index: 3;
}
@keyframes handright-rotate {
  0%   { transform: rotate(-2deg); }
  100% { transform: rotate(2deg); }
}
.red-circle {
  width: 60vw;
  height: 60vw;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(60, 4, 4, 0.4) 0%,
    rgba(255, 0, 0, 0) 60%,
    rgba(255, 0, 0, 0) 100%
  );
  position: absolute; 
  top: 50%;
  left: 10%;
  z-index: 20;
  transition: box-shadow 0.3s, filter 0.3s;
}
.red-circle:hover {
    filter: brightness(2.3);
}
.handblood {
    position: absolute;
    top: 20%;
    width: 100vw;
    z-index: 30;
    transition: opacity 0.5s;
    display: none;
    animation: flower-glitch-fade 1.2s forward;
    transform-origin: left center;
}
.handblood.vhs-glitch {
    display: block;
    opacity: 1;
    animation: vhs-glitch 0.7s linear;
}

@keyframes vhs-glitch {
  0% {
    opacity: 1;
    filter: contrast(1.4) brightness(1.2) saturate(1.3);
    transform: translate(0,0);
    clip-path: inset(0 0 0 0);
  }
  10% {
    filter: contrast(2) brightness(1.5) saturate(2) hue-rotate(10deg);
    transform: translate(-6px,2px);
    clip-path: inset(10% 0 0 0);
  }
  20% {
    filter: contrast(1.2) brightness(1.1) saturate(1.1) hue-rotate(-10deg);
    transform: translate(6px,-2px);
    clip-path: inset(0 0 15% 0);
  }
  30% {
    filter: contrast(1.8) brightness(1.3) saturate(1.5) hue-rotate(5deg);
    transform: translate(-3px,1px);
    clip-path: inset(5% 0 0 0);
  }
  40% {
    filter: contrast(2.2) brightness(1.6) saturate(2.2) hue-rotate(-5deg);
    transform: translate(3px,-1px);
    clip-path: inset(0 0 10% 0);
  }
  50% {
    filter: contrast(1.4) brightness(1.2) saturate(1.3);
    transform: translate(0,0);
    clip-path: inset(0 0 0 0);
  }
  100% {
    opacity: 1;
    filter: contrast(1.4) brightness(1.2) saturate(1.3);
    transform: translate(0,0);
    clip-path: inset(0 0 0 0);
  }
}
@keyframes flower-glitch-fade {
  0%   { opacity: 0; filter: blur(4px) brightness(0.7); }
  10%  { opacity: 0.3; filter: blur(2px) brightness(1.2) hue-rotate(10deg); }
  20%  { opacity: 0.6; filter: blur(1px) brightness(1.5) hue-rotate(-10deg); }
  30%  { opacity: 0.8; filter: blur(2px) brightness(1.1) hue-rotate(5deg); }
  40%  { opacity: 0.5; filter: blur(3px) brightness(1.3) hue-rotate(-5deg); }
  60%  { opacity: 0.9; filter: blur(1px) brightness(1.2); }
  80%  { opacity: 1; filter: blur(0.5px) brightness(1.1); }
  100% { opacity: 1; filter: none; }
}

/*SEC6*/
.it1 {
    position: absolute;
    top: 110%;
    z-index: 1;
    left: 0;
    transform: scale(1);
}
.it2 {
    position: absolute;
    top: 110%;
    z-index: 1;
    left: 0;
    z-index: 30;
    transition: opacity 0.5s;
    display:none;
    transform: scale(1);
}
.it3 {
    position: absolute;
    top: 110%;
    z-index: 1;
    left: 0;
    display: none;
    transform: scale(1);
}

.it1, .it2, .it3,
.it-man, .it-beast, .it-god {
    transition: opacity 0.5s;
    opacity: 1;
}
.it1:hover,
.it2:hover,
.it3:hover {
    filter: brightness(1.05) drop-shadow(0 0 15px rgba(98, 5, 5, 0.5));
}
.hide {
    opacity: 0;
    pointer-events: none;
}
.show {
    opacity: 1;
    display: block;
}

.it2.vhs-glitch {
    display: block !important;
    opacity: 1;
    animation: vhs-glitch 0.7s linear;
}
@keyframes vhs-glitch {
  0%   { 
    filter: contrast(1.4) brightness(1.2) saturate(1.3); transform: translate(0,0); 
    clip-path: inset(0 0 0 0);}
  10%  { 
    filter: contrast(2) brightness(1.5) saturate(2) hue-rotate(10deg); 
    transform: translate(-6px,2px); 
    clip-path: inset(10% 0 0 0);}
  20%  { 
    filter: contrast(1.2) brightness(1.1) saturate(1.1) hue-rotate(-10deg); 
    transform: translate(6px,-2px); 
    clip-path: inset(0 0 15% 0);}
  30%  { 
    filter: contrast(1.8) brightness(1.3) saturate(1.5) hue-rotate(5deg); 
    transform: translate(-3px,1px); 
    clip-path: inset(5% 0 0 0);}
  40%  { 
    filter: contrast(2.2) brightness(1.6) saturate(2.2) hue-rotate(-5deg); 
    transform: translate(3px,-1px); 
    clip-path: inset(0 0 10% 0);}
  50%  { 
    filter: contrast(1.4) brightness(1.2) saturate(1.3); 
    transform: translate(0,0); 
    clip-path: inset(0 0 0 0);}
  100% { 
    filter: contrast(1.4) brightness(1.2) saturate(1.3); 
    transform: translate(0,0); 
    clip-path: inset(0 0 0 0);}
}
.gradient2 {
    height: 200px;
    top: 300%;
    width: 100%;
    background: linear-gradient(#070707, #070707, #C7C7C7);
    display: flex;
    z-index: 0;
}
.gradient3 {
    height: 200px;
    top: 100%;
    width: 100%;
    background: linear-gradient(#070707, #101010);
    display: flex;
    z-index: 1;
}

/* SEC7 SNOW*/
.snow {
    position: absolute;
    top: 140%;
    width: 100%;
    height: auto;
    z-index: 1;
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to bottom, transparent, black 20%, black 90%, transparent);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/*SNOW*/
/* Start hidden for snow2 */
.snow2 {
    position: absolute;
    top: 140%;
    width: 100%;
    height: auto;
    z-index: 1;
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to bottom, transparent, black 20%, black 90%, transparent);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

/* Fade-in class for snow2 */
.snow2.fade-in {
    opacity: 1;
}

/* Fade-out class for snow */
.snow.fade-out {
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}
#snow-overlay {
  pointer-events: none;
  position: absolute;
  top: 140%; left: 0%;
  width: 200vh; height: 100vh;
  z-index: 20;
  overflow: hidden;
}
.snowflake-dot {
  position: absolute;
  top: -10vw;
  border-radius: 50%;
  pointer-events: none;
  z-index: 20;
  background: white;
  animation: fall-js linear infinite;
  will-change: transform, opacity;
}
@keyframes fall-js {
  0% {
    transform: translateY(-10vh) translateX(0);
    opacity: 0.2;
  }
  10% { opacity: 0.5; }
  100% {
    transform: translateY(200vh) translateX(20px);
    opacity: 0.1;
  }
}
.hover-forgot {
  color: rgb(120, 4, 4);
  transition: all 0.3s ease;
  cursor: url('./piclist/cursor.png'), auto !important;
}

.hover-forgot:hover {
  text-shadow: 0 0 10px rgba(212, 0, 0, 0.4),
               0 0 20px rgba(255, 0, 0, 0.2);
  color: rgb(148, 18, 18);
}

/*SEC8*/
.frame2 {
    position: absolute;
    top: 145%;
    width: 100%;
    height: auto;
    z-index: 1;
}
.moth {
    position: absolute;
    top: 163%;
    left: 65%;
    width: 100%;
    height: auto;
    z-index: 2;
    opacity: 88%;
    transform:scale(0.7)
}
.flower {
    position: absolute;
    top: 140%;
    right: 3%;
    width: 100%;
    height: auto;
    z-index: 2;
    opacity: 85%;
}

#cursor-circle {
    position: fixed;
    width: 15vw;
    height: 15vw;
    border-radius: 50%;
    background: white;
    opacity: 0.8;
    mix-blend-mode:difference;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 9999;
    display: none; /* hidden by default */
    filter: blur(2vw) contrast(0.8);
}

.final {
    top: 150%;
    width: 100%;
    height: auto;
    z-index: 3;
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
    mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 80%;
    mask-size: 100% 100%;
}
.footer {
    position: relative;
    top: 160%;
    width: 100%;
    height: 90px;
    background-color: #070707;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aeaeae;
    font-family: 'UnifrakturMaguntia', cursive;
    font-size: 1.5vw;
    letter-spacing: 2px;
}