:root {
  --accent: greenyellow; /* default EN */
}

/* JP mode override */
body.jp-active {
  --accent: #ff69b4; /* pink */
}

/* --------------------- BASE --------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Lucida Sans', 'Lucida Sans Regular',
    'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

a {
  color: white;
  text-decoration: none;
}

/* --------------------- NAVBAR --------------------- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 25px 9%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
  visibility: hidden;
  opacity: 0;
  animation: show-content 0.5s linear forwards;
  animation-delay: 0.1s;
}

.navbar.glowing-border {
  border-bottom: 3px solid #fff;
  animation: show-content 0.5s linear forwards, borderGlow 5s linear infinite;
}

@keyframes borderGlow {
  0%, 100% { border-color: #fff; }
  50%      { border-color: var(--accent); }
}

@keyframes show-content {
  100% {
    visibility: visible;
    opacity: 1;
  }
}

.navbar .logo {
  font-size: 30px;
  font-weight: 700;
}

.navbar > ul {
  display: flex;
}

.navbar > ul > li {
  list-style: none;
  margin-left: 35px;
}

.navbar ul li a {
  font-size: 20px;
  font-weight: 500;
  transition: 0.5s;
}

.navbar ul li:hover a,
.navbar ul li.active a {
  color: var(--accent);
}

/* Navbar Glow Border */
.glowing-border {
  border-bottom: 2px solid var(--nav-glow);
  box-shadow: 0 0 12px var(--nav-glow);
  transition: border-color 0.4s, box-shadow 0.4s;
}


/* --------------------- HOME --------------------- */
.home {
  display: flex;
  align-items: center;
  gap: 50px;
  height: 100vh;
  padding: 60px 9% 0;
  color: white;
  visibility: hidden;
  opacity: 0;
  animation: show-content 1.2s linear forwards;
  animation-delay: 0.5s;
}

.home-info h1 {
  font-size: 50px;
}

.home-info h2 {
  display: inline-block;
  font-size: 32px;
  margin-top: 10px;
}

.home-info h2 span {
  position: relative;
  display: inline-block;
  color: transparent;
  -webkit-text-stroke: 0.7px var(--accent);

}

@keyframes display-text {
  25%, 100% { display: none; }
}

.home-info h2 span::before {
  content: attr(data-text-en);
  position: absolute;
  width: 0;
  border-right: 2px solid var(--accent);
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  animation: fill-text 5s linear infinite;
}

@keyframes fill-text {
  0%   { width: 0 }
  50%  { width: 100% }
  80%  { width: 100% }
  100% { width: 0 }
}

.home-info p {
  font-size: 16px;
  margin: 10px 0 25px;
}

.home-info .btn-sci {
  display: flex;
  align-items: center;
}

.btn {
  display: inline-block;
  padding: 10px 30px;
  background: var(--accent);
  border: 2px solid var(--accent);
  border-radius: 10px;
  box-shadow: 0 0 10px var(--accent);
  font-size: 16px;
  color: #1f242d;
  transition: 0.3s;
}

.btn:hover {
  background: transparent;
  color: var(--accent);
  box-shadow: none;
}

.home-info .btn-sci .sci {
  margin-left: 30px;
}

.home-info .btn-sci .sci a {
  display: inline-flex;
  padding: 8px;
  border: 2px solid var(--accent);
  border-radius: 30%;
  font-size: 20px;
  margin: 0 7px;
  transition: 0.4s;
}

.home-info .btn-sci .sci a:hover {
  background: var(--accent);
  color: #1f242d;
  box-shadow: 0 0 10px var(--accent);
}

/* --------------------- HOME IMAGE CIRCLE AND SIZE  --------------------- */
.home-img .img-box {
  position: relative;
  width: 35vw;
  height: 35vw;
  border-radius: 50%;
  padding: 10 10 10 10px;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.home-img .img-box::before,
.home-img .img-box::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: conic-gradient(transparent, transparent, transparent, var(--accent));
  transform: rotate(0deg);
  animation: rotate-border 10s linear infinite;
}

.home-img .img-box::after {
  animation-delay: -5s;
}

@keyframes rotate-border {
  100% { transform: rotate(360deg); }
}


.home-img .img-box .img-item {
  margin-left: 2px;
  margin-top: 1px;
  margin: 4px;

  position: relative;
  width: 100%;
  height: 100%;
  background-color: #1f242d;
  border-radius: 50%;
   border: 10px solid #1f242d;
  display: flex;
  justify-content: center;
  z-index: 1;
  overflow: hidden;
}



.home-img .img-box .img-item img {
  position: absolute;
  top: 15px;
  display: block;
  width: 75%;
  object-fit: cover;
  mix-blend-mode: lighten;
}

/* --------------------- BARS ANIMATION --------------------- */
.bars-animation {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  z-index: -1;
}

.bars-animation .bar {
  width: 100%;
  height: 100%;
  background: #1f242d;
  transform: translateY(-100%);
  animation: show-bars 0.5s ease-in-out forwards;
  animation-delay: calc(0.1s * var(--i));
}

@keyframes show-bars {
  100% { transform: translateY(0%); }
}

/* --------------------- LANG SWITCH --------------------- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  border: 2px solid var(--accent);
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
  user-select: none;
  transition: border 0.3s;
     /* control vertical + horizontal padding */
  font-size: 20px;       /* lock font size */
  line-height: 1;   
}

.lang-switch span {
  padding: 8px 8px;
  font-weight: 700;
  transition: all 0.3s ease;
  color: white;
  background-color: transparent;
}

.lang-switch span.active {
  display: inline-block;
  background-color: var(--accent);
  color: #1f242d;
}

.lang-switch span:not(.active) {
  background-color: transparent;
  color: white;
}

/* Profile Image  in Home Page */ 

.myimg {
  position: absolute;
  top: 50%;
  left: 50%;
 /* or auto if using width */
  object-fit: cover; /* keeps aspect ratio, fills container */

}

/* English image smaller */
body:not(.jp-active) .myimg {
  transform: translate(-50%, 0%) scale(0.82);

  height: auto;
}

/* Japanese image normal */
body.jp-active .myimg {
  transform: translate(-50%, -7.1%) scale(0.8);
    height: auto;
}






/* Sakura Leaves style */
.sakura {
  position: fixed;
  top: -50px;
  pointer-events: none;
  background: url(./images/leaf.png) no-repeat center/contain;
  animation: fall 10s linear infinite;
  opacity: 0.9;
  z-index: 9999;
}

/* Drift left */
@keyframes fall-left {
0%   { transform: translateX(0) translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateX(100px) translateY(800px) rotate(360deg); opacity: 0; }
}

/* Drift right */
@keyframes fall-right {
0%   { transform: translateX(0) translateY(0) rotate(0deg); opacity: 1; }
 100% { transform: translateX(100px) translateY(800px) rotate(360deg); opacity: 0; }
}


@media (max-width: 600px) {
    html, body {
  height: 120%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  background: #1f242d; /* or your gradient/image */
}

  /* Home layout vertical */
  .home {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 20px;
    height: auto;
  }

  /* Move all content below navbar */
  .home-info {
    width: 100%;
    text-align: center;
    padding: 10px;
    margin-top: 120px; /* pushes content below navbar */
  }

  .home-info h1 {
    font-size: clamp(1.5rem, 8vw, 2.5rem);
    margin-bottom: 10px;
  }

  .home-info h2 {
    font-size: clamp(1rem, 6vw, 1.5rem);
    margin-top: 15px;
    margin-bottom: 10px;
  }

  .home-info p {
    font-size: clamp(0.9rem, 4vw, 1.2rem);
    margin-bottom: 20px; 
  }

  /* Buttons and social icons mobile alignment */
.btn-sci {
  display: flex;
  flex-direction: column;      /* stack button and icons vertically */
  justify-content: center;     /* center vertically if needed */
  align-items: center;         /* center horizontally */
  gap: 20px;  
               /* spacing between button and icons */
}

.btn-sci .btn {
  margin: 0;                   /* remove extra margin */
}

.btn-sci .sci {
  display: flex;               /* keep icons horizontal */
  justify-content: center;     /* center horizontally below button */
  gap: 8px;                    /* spacing between icons */
  margin-right: 25px;      
                    /* remove extra margin */
}


.home-img {
  width: 60vw;             /* smaller circle */
  height: 60vw;
  margin: -20px auto 0;     /* top margin, auto horizontal centers it */
  display: flex;
  justify-content: center;
  align-items: center;
}

.home-img .img-box {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
}

.home-img .img-box .img-item img {
  width: 80%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
  /* Navbar: row direction, hamburger left, lang-switch right */
  .navbar {
    flex-direction: row;           /* horizontal row */
    justify-content: space-between; /* hamburger left, lang-switch right */
    align-items: center;
    padding: 10px 5%;
    border: none; /* remove glowing border */
    box-shadow: none;
  }

.menu-toggle {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2000;
  display: block;        /* make sure it's visible */
  font-size: 2rem;       /* adjust size */
  cursor: pointer;
  color: white;
}

  .lang-switch {
    
    order: 1;
    display: flex;
    justify-content: flex-end; /* right edge */
    align-items: center;
    font-size: 18px;
    
  }

  /* Nav links below navbar */
  .navbar ul {
    width: 100%;
    flex-direction: column;
    margin-top: 10px;
    display: none; /* hidden until hamburger clicked */
  }

  .navbar ul.show {
    display: flex;
  }
}