/* IMPORT WIND BREAKER STYLE FONTS */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@400;600&display=swap');

/* RESET */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#000;
    color:white;
    font-family: 'Oswald', sans-serif;
    overflow-x:hidden;
}

/* ================= HEADER ================= */

header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    padding:20px 60px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    /* background: rgba(0, 0, 0, 0.176);
    backdrop-filter: blur(10px); */
    z-index:1000;
    mix-blend-mode: difference;
}

header h2{
    font-size:28px;
    letter-spacing:2px;
    font-weight:600;
}

nav{
    display:flex;
    gap:40px;
}

nav a{
    text-decoration:none;
    color: #fff;
    font-size:18px;
    position:relative;
    transition:0.3s;
}

/* hover underline effect */
nav a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-5px;
    width:0%;
    height:2px;
    background: #000;
    transition:0.3s;
}

nav a:hover::after{
    width:100%;
}


/* ================= PAGE 1 ================= */

.page1{
    height:100vh;
    width:100%;

    display:flex;
    justify-content:center;
    align-items:center;

    position:relative;

    /* BLACK + WHITE GRADIENT LIKE SAKURA HAIR */
    background: linear-gradient(
        45deg,
        #000000 0%,
        #000000 50%,
        #ffffff 50%,
        #ffffff 100%
    );

    overflow:hidden;
}


/* BIG TEXT BEHIND IMAGE */
.page1 h1{
    position:absolute;
    font-family:'Bebas Neue', sans-serif;
    font-size:22vw;
    letter-spacing:20px;
    /* border: solid 2px #ffffff; */

    background: url("image/Wind_Breaker.gif") center/cover no-repeat;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke:  0.5px white;  /* thickness + color */

    z-index:1;
}


/* CENTER IMAGE */

.page1 img{
    position:relative;
    top: 10%;
    height:80vh;
    z-index:2;
    transition:0.5s;
    /* filter: grayscale(50); */

    /* ANIME STYLE SHADOW */
    filter: drop-shadow(-20px 0px 40px rgba(0, 0, 0, 0.429))
            drop-shadow(20px 0px 40px rgba(255, 255, 255, 0.194))
            grayscale(100);
}


/* OPTIONAL HOVER EFFECT */

.page1 img:hover{
    transform:scale(1.05);
    filter: grayscale(0);
}

/* .page2
{
    width: 100%;
    height: 100vh;
} */
 
.page2{
    height:100vh;
    width:100%;
    background: radial-gradient(circle at center, #1a0000, #000000 70%);
    display:flex;
    justify-content:center;
    align-items:center;
    padding:0 10%;
    overflow:hidden;
}

.page2-content{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:50px;
}

.img-wrapper{
    position:relative;
    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
}

/* 🔥 GLOW LIGHT */
.glow{
    position:absolute;
    width:400px;
    height:400px;
    /* background: radial-gradient(circle, rgba(255,0,0,0.7), transparent 70%); */
    background: radial-gradient(circle, rgba(0,170,255,0.8), transparent 70%);
    filter: blur(60px);
    animation: pulse 2s infinite alternate;
    z-index:1;
}

/* Sakura Image */
.page2-img{
    position:relative;
    max-height:80vh;
    object-fit:contain;
    z-index:2;
    transition:0.5s ease;
}

.page2-img:hover{
    transform:scale(1.05);
}

/* 🔥 Glow Animation */
@keyframes pulse{
    from{
        transform:scale(1);
        opacity:0.7;
    }
    to{
        transform:scale(1.2);
        opacity:1;
    }
}

@keyframes shake{
    0%{ transform:translate(0px,0px); }
    25%{ transform:translate(2px,-2px); }
    50%{ transform:translate(-2px,2px); }
    75%{ transform:translate(2px,2px); }
    100%{ transform:translate(0px,0px); }
}

.page2-img:active{
    animation:shake 0.2s;
}

/* page 3 */
.page3{
  height:100vh;
  background:#000;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  color:white;
}

/* Dynamic background glow */
.bg-glow{
  position:absolute;
  width:600px;
  height:600px;
  background:radial-gradient(circle, rgba(0,150,255,0.6), transparent 70%);
  filter:blur(120px);
  transition:0.8s ease;
}

/* Fade & slide effect */
.character-wrapper{
  display:flex;
  gap:25rem;
  align-items:center;
  transition:0.6s ease;
}

.character-image img{
  height:70vh;
  transition:0.6s ease;
}

.character-image img.fade{
  opacity:0;
  transform:translateX(-40px);
}

/* Circular progress */

.character-stats
{
    gap: 10%;
}
.circle{
  position:relative;
  width:120px;
  height:120px;
  margin:20px;
}

.circle svg{
  width:120px;
  height:120px;
  transform:rotate(-90deg);
}

.circle circle{
  fill:none;
  stroke:#333;
  stroke-width:10;
}

.circle p{
    position: relative;
    top: -52px;
    left: 32%;
}

.circle .progress{
  stroke:#00aaff;
  stroke-dasharray:314;
  stroke-dashoffset:314;
  transition:1s ease;
}

.number{
  position:absolute;
  top:40px;
  left:0;
  width:100%;
  text-align:center;
  font-size:20px;
}

/* ================= MOBILE RESPONSIVE ================= */

@media (max-width: 768px){

  /* HEADER */
  header{
    padding:15px 20px;
  }

  nav{
    gap:15px;
  }

  nav a{
    font-size:14px;
  }

  /* PAGE 1 */
  .page1 h1{
    font-size:28vw;
    letter-spacing:8px;
        -webkit-text-stroke:  0px white;  /* thickness + color */
  }

  .page1 img{
    height:60vh;
    top:5%;
  }

  /* PAGE 2 */
  .page2{
    padding:0 20px;
  }

  .page2-content{
    flex-direction:column;
    text-align:center;
    gap:40px;
  }

  .img-wrapper{
    order:1;
  }

  .glow{
    width:250px;
    height:250px;
    filter:blur(40px);
  }

  .page2-img{
    max-height:55vh;
  }

  .page2 .text h2{
    font-size:2rem;
  }

  .page2 .text p{
    font-size:1rem;
  }

  /* PAGE 3 */
  .character-wrapper{
    flex-direction:column;
    gap:40px;
    text-align:center;
  }

  .character-image img{
    height:45vh;
  }

  .bg-glow{
    width:350px;
    height:350px;
    filter:blur(80px);
  }

  .character-stats{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:40px;
  }
.circle{
  position:relative;
  width:120px;
  height:120px;

  display:flex;
  justify-content:center;
  align-items:center;

  margin:0 auto;
}

 .circle svg{
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  transform:rotate(-90deg);
}

 .number{
  position:relative;
  top: -2%;
  font-size:26px;
  font-weight:600;
  z-index:2;
  text-align:center;
}
  .circle p{
  position:absolute;
  bottom:25px;
  left: 2px;
  width:100%;
  text-align:center;
  font-size:14px;
}

}