/* Reset & Base Layout */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html, body {
    height: 100%;
    background-color: #000;
  }
  
  /* Loader Section */
  .loader-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin-top: -110px;
  }
  
  .logo {
    width: 250px;
    max-width: 80vw;
    margin-bottom: 30px;
  }
  
  svg#Logo {
    width: 100%;
    height: auto;
    display: block;
  }
  
  /* Logo in Corner */
  .logo-wrapper {
    position: absolute;
    top: -30px;
    left: -30px;
    opacity: 0;
    transition: opacity 2s ease;
  }
  
  .logo-image {
    width: 150px;
    height: auto;
  }
  
  /* Background Video */
  #background-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(10px);
    transition: opacity 2s ease;
  }
  
  /* Profile Picture */
  .profile-pic-wrapper {
    position: fixed;
    top: 10px;
    right: 10px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.93);
    opacity: 0;
    transition: opacity 2s ease;
  }
  
  .profile-pic {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* Title & Subtitle */
  .title-wrapper {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    opacity: 0;
    transition: opacity 2s ease;
    width: 90%;
  }
  
  .title {
    font-size: 2em;
    color: #fff;
  }
  .cmns-highlight {
    color: #a5a5a5; /* Purple — adjust to your desired shade */
  }
  
  .subtitle {
    font-size: 1em;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 8px;
  }

  .language-switch {
    text-align: center;
    margin-top: -2px;
  }
  
  .language-switch button {
    font-family: inherit;
    font-size: 0.8em;
    color: #ffffff;
    background-color: rgb(0, 0, 0); /* semi-transparent purple background */
    border-radius: 20px; /* rounded button shape */
    cursor: pointer;
    margin: 8px 5px;
    padding: 6px 14px;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  
  .language-switch button:hover {
    background-color: rgba(79, 82, 140, 1); /* solid on hover */
    color: #ffffff;
  }
  
  /* Logo SVG animations */
  #J-Logo {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawJLogo 0.9s ease forwards, fillJLogo 0.5s ease 1.2s forwards;
  }
  
  #J-Dot {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: drawJDot 0.5s ease 0.5s forwards, fillJDot 0.5s ease 1s forwards;
  }
  
  @keyframes drawJLogo {
    to { stroke-dashoffset: 0; }
  }
  
  @keyframes drawJDot {
    to { stroke-dashoffset: 0; }
  }
  
  @keyframes fillJLogo {
    0% { fill: rgba(255, 100, 0, 0); }
    100% { fill: #fff; }
  }
  
  @keyframes fillJDot {
    0% { fill: rgba(255, 255, 0, 0); }
    100% { fill: #4f528c; }
  }
  
  /* SVG text fades */
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  #J-FontName,
  #CMNS-FontName,
  #J-JavoraCollection,
  #J-FontName path,
  #CMNS-FontName path,
  #collect path {
    opacity: 0;
    animation: fadeIn 0.5s ease forwards;
  }
  
  #J-FontName { animation-delay: 0.5s; }
  #CMNS-FontName { animation-delay: 0.7s; }
  #collect { animation-delay: 1s; }
  #J-FontName path { animation-delay: 1s; }
  #CMNS-FontName path { animation-delay: 1.2s; }
  #collect path { animation-delay: 2s; }
  
  /* Loading Bar */
  .loading-bar-wrapper {
    width: 25%;
    height: 2px;
    background-color: #fff;
    margin-top: -70px;
    position: relative;
    overflow: hidden;
  }
  
  .loading-bar {
    width: 0;
    height: 100%;
    background-color: #4f528c;
    animation: loadProgress 3s ease forwards;
  }
  
  @keyframes loadProgress {
    from { width: 0%; }
    to { width: 100%; }
  }
  
  /* Footer */
  footer {
    text-align: center;
    color: white;
    padding: 10px 10px;
    position: fixed;
    bottom: 5px;
    width: 100%;
    font-size: 8px;
    z-index: 10;
  }
  
  /* Bottom Container */
  .container {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background-color: #ffffff7b;
    border: 4px solid #ffffff;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    animation: expand-container 2s ease 3s forwards;
  }
  
  @keyframes expand-container {
    0% { height: 0; }
    100% { height: 42vh; }
  }
  
  /* Button Wrapper Fade-In */
  .button-wrapper {
    display: flex;
    flex-direction: column; /* Stack buttons vertically */
    align-items: center;
    gap: 20px; /* Custom spacing between buttons */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  
  
  .button-wrapper.show {
    opacity: 1;
    transform: translateY(0);
  }
  
  .button-wrapper.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
  }
  
  /* Custom Button Styling */
  .custom-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background-color: #000000;
    border: 3px solid rgb(255, 255, 255); /* ← Stroke added here */
    border-radius: 30px;
    color: rgb(255, 255, 255);
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
    height: 50px;
    width: 300px;
  }
  
  .custom-button {
    text-decoration: none; /* 👈 removes underline */
  }
  
  
  .custom-button:hover {
    background-color: #4f528c;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
  }
  
  .loader-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }
  
  .button-title {
    font-size: 16px;
  }