/* 
 * © 2025 DESiGNiA Web. All rights reserved.
 * Exclusive layout, design and UI concept crafted by DESiGNiA Web.
 * Do not copy, distribute, or modify without written permission.
 */

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

html {
  min-height: 550px;
}

/* Main layout */
body {
  height: 100vh;
  min-height: 550px; /* Minimum viewport height for proper layout */
  background-color: #111;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  color: #fff;
  font-family: 'Poppins', sans-serif;
}

/* Language container */
#language-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 550px; /* Minimum height constraint */
  opacity: 0; /* hide entire container until GSAP is ready */
  visibility: hidden;
}

/* Mandala section wrapper */
#mandala-section {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Spheres section wrapper */
#spheres-section {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Rotating mandala background */
#mandala-rotating {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 65vh;
  max-height: calc(100vh - 40px);
  width: auto;
  transform: translate(-50%, -50%);
  z-index: 10;
  pointer-events: none;
  opacity: 0.4;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  animation: rotateMandala 120s linear infinite;
}

/* Black overlay - covers left half with same dimensions as text */
#mandala-black-overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 75vh; /* Same as text height */
  max-height: calc(100vh - 40px);
  width: 75vh; /* Same as text width - square covering full area */
  max-width: calc(100vh - 40px);
  min-height: 100px;
  min-width: 100px;
  transform: translate(-50%, -50%);
  z-index: 20; /* Above rotating mandala (10), below text (30) */
  pointer-events: none;
  opacity: 1 !important; /* Force fully opaque */
  background: linear-gradient(to right, #111 0%, #111 50%, transparent 50%, transparent 100%);
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Fixed text overlay */
#mandala-text {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 75vh;
  max-height: calc(100vh - 40px);
  width: auto;
  transform: translate(-50%, -50%);
  z-index: 30;
  pointer-events: none;
  opacity: 1;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Mandala rotation animation - counterclockwise (reverse) - unified for all modes */
@keyframes rotateMandala {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

/* Language spheres base */
.lang-sphere {
  position: absolute;
  width: 100px;
  height: 100px;
  border: none; /* Remove border - will use SVG background */
  border-radius: 50%;
  display: none; /* completely hidden until JS makes them visible */
  justify-content: center;
  align-items: center;
  font-size: 1.4rem;
  font-weight: 600;
  opacity: 0;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
  transform-origin: center center;
  z-index: 3;
  background: #1e1e1e; /* opaque black background */
  color: rgba(255, 255, 255, 0.6);
  will-change: transform, opacity; /* hint to browser for optimization */
  backface-visibility: hidden; /* prevent flickering during animation */
  -webkit-font-smoothing: antialiased;
  user-select: none; /* Prevent text selection without affecting click functionality */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE/Edge */
}

/* Zigzag rotating border - using pseudo-element with user's SVG */
.lang-sphere::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml;utf8,<svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><path d="M116.35,55.2c1.81-5.36.46-11.27-3.5-15.32-2.3-2.35-3.76-5.39-4.17-8.66-.7-5.61-4.48-10.35-9.8-12.28-3.09-1.12-5.73-3.23-7.51-5.99h0c-3.06-4.75-8.53-7.38-14.15-6.82-3.27.33-6.56-.42-9.37-2.14h0c-4.82-2.95-10.89-2.95-15.71,0h0c-2.8,1.72-6.1,2.47-9.37,2.14-5.62-.57-11.09,2.06-14.15,6.82h0c-1.78,2.76-4.42,4.87-7.51,5.99-5.31,1.93-9.1,6.67-9.8,12.28-.41,3.26-1.87,6.3-4.17,8.66-3.95,4.04-5.3,9.96-3.5,15.32,1.05,3.12,1.05,6.49,0,9.61h0c-1.81,5.36-.46,11.27,3.5,15.32h0c2.3,2.35,3.76,5.39,4.17,8.66h0c.7,5.61,4.48,10.35,9.8,12.28,3.09,1.12,5.73,3.23,7.51,5.99,3.06,4.75,8.53,7.38,14.15,6.82,3.27-.33,6.56.42,9.37,2.14,4.82,2.95,10.89,2.95,15.71,0,2.8-1.72,6.1-2.47,9.37-2.14,5.62.57,11.09-2.06,14.15-6.82,1.78-2.76,4.42-4.87,7.51-5.99,5.31-1.93,9.1-6.67,9.8-12.28h0c.41-3.26,1.87-6.3,4.17-8.66h0c3.95-4.04,5.3-9.96,3.5-15.32h0c-1.05-3.12-1.05-6.49,0-9.61h0Z" fill="none" stroke="rgba(255,255,255,0.6)" stroke-miterlimit="10" stroke-width="3"/></svg>');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  animation: rotateBorder 8s linear infinite;
  z-index: -1;
  pointer-events: none;
}

/* hover style - colors only, scale handled by GSAP in JS */
.lang-sphere:hover {
  color: rgba(255, 255, 255, 0.9);
}

.lang-sphere:hover::before {
  background-image: url('data:image/svg+xml;utf8,<svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><path d="M116.35,55.2c1.81-5.36.46-11.27-3.5-15.32-2.3-2.35-3.76-5.39-4.17-8.66-.7-5.61-4.48-10.35-9.8-12.28-3.09-1.12-5.73-3.23-7.51-5.99h0c-3.06-4.75-8.53-7.38-14.15-6.82-3.27.33-6.56-.42-9.37-2.14h0c-4.82-2.95-10.89-2.95-15.71,0h0c-2.8,1.72-6.1,2.47-9.37,2.14-5.62-.57-11.09,2.06-14.15,6.82h0c-1.78,2.76-4.42,4.87-7.51,5.99-5.31,1.93-9.1,6.67-9.8,12.28-.41,3.26-1.87,6.3-4.17,8.66-3.95,4.04-5.3,9.96-3.5,15.32,1.05,3.12,1.05,6.49,0,9.61h0c-1.81,5.36-.46,11.27,3.5,15.32h0c2.3,2.35,3.76,5.39,4.17,8.66h0c.7,5.61,4.48,10.35,9.8,12.28,3.09,1.12,5.73,3.23,7.51,5.99,3.06,4.75,8.53,7.38,14.15,6.82,3.27-.33,6.56.42,9.37,2.14,4.82,2.95,10.89,2.95,15.71,0,2.8-1.72,6.1-2.47,9.37-2.14,5.62.57,11.09-2.06,14.15-6.82,1.78-2.76,4.42-4.87,7.51-5.99,5.31-1.93,9.1-6.67,9.8-12.28h0c.41-3.26,1.87-6.3,4.17-8.66h0c3.95-4.04,5.3-9.96,3.5-15.32h0c-1.05-3.12-1.05-6.49,0-9.61h0Z" fill="none" stroke="rgba(255,255,255,0.9)" stroke-miterlimit="10" stroke-width="3"/></svg>');
}

/* ZIGZAG ROTATION ANIMATION */
@keyframes rotateBorder {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Preloader */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #111;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

#preloader.show {
  opacity: 1;
  visibility: visible;
}

.loader {
  width: 40px;
  height: 40px;
  border: 2px solid #f9f9f9;
  border-top: 2px solid transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Language text area (desktop / default layout) */
#language-text {
  position: absolute;
  left: calc(33.3333% + ((100vw - 33.3333vw) / 2));
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  pointer-events: none;
  text-align: center;
  width: 32vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* All texts share same line and get crossfaded via JS/GSAP */
#language-text .lang-txt {
  position: absolute;
  font-family: 'Poppins', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: #ffffff;
  text-transform: uppercase;
  opacity: 0;
  line-height: 1;
  will-change: opacity;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Timeline line element style (created by JS for responsive) */
.timeline-line {
  position: absolute;
  left: 0; /* will be translated by JS to correct X */
  width: 1px;
  background-color: rgba(255,255,255,0.6);
  z-index: 2;
}

/* Timeline horizontal lines BASE styles - must be outside media query */
.timeline-line-horizontal {
  position: absolute;
  height: 1px;
  background-color: rgba(255,255,255,0.6);
  z-index: 2;
  display: none; /* Hidden by default, shown in specific range */
}

/* ============================================
   RESPONSIVE MOBILE LAYOUT (≤ 767px)
   Vertical layout: Spheres (horizontal) → Mandala → Text
   ============================================ */
@media (max-width: 767px) {
  /* Mobile layout active - divider already hidden above */

  /* Mandala elements - centered horizontally, size and position controlled by JS dynamically */
  #mandala-rotating,
  #mandala-black-overlay,
  #mandala-text {
    left: 50% !important;
    transform-origin: center center;
    object-fit: contain;
    /* JS will set: top, width, height dynamically based on viewport */
  }
  
  #mandala-rotating {
    animation: rotateMandala 120s linear infinite;
    opacity: 0.4;
  }
  
  #mandala-black-overlay {
    opacity: 1 !important; /* Overlay must be fully opaque */
  }
  
  #mandala-text {
    animation: none;
    opacity: 1;
  }

  /* Language text positioned below mandala */
  #language-text {
    position: absolute;
    left: 50%;
    bottom: 50px; /* Safety margin bottom */
    transform: translateX(-50%);
    width: calc(100vw - 40px);
    max-width: 500px;
    text-align: center;
  }

  #language-text .lang-txt {
    font-size: 1.1rem;
  }

  /* Spheres will be positioned horizontally by JS */
  /* Base sphere size for mobile */
  .lang-sphere {
    width: 80px;
    height: 80px;
    font-size: 1.2rem;
  }

  /* Horizontal timeline lines visible by default in mobile (425px-767px range) */
  .timeline-line-horizontal {
    display: block !important;
  }
}

/* Very small mobile screens (≤ 424px) - No timeline lines, smaller spheres */
@media (max-width: 424px) {
  .timeline-line-horizontal {
    display: none !important;
  }

  .lang-sphere {
    width: 70px;
    height: 70px;
    font-size: 1.1rem;
  }

  /* Mandala size controlled by JS calculateMandalaSize() */

  #language-text .lang-txt {
    font-size: 1rem;
  }
}

/* Desktop mode (≥768px) - Flexbox layout: mandala left, spheres right */
@media (min-width: 768px) {
  #language-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    max-width: 1024px;
    margin: 0 auto; /* Center horizontally on screens wider than 1024px */
  }

  #mandala-section {
    position: relative;
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #mandala-rotating,
  #mandala-black-overlay,
  #mandala-text {
    position: absolute;
    left: 50%;
    top: 50%;
  }
  
  #mandala-rotating {
    height: 65vh;
    max-height: calc(100vh - 40px); /* Ensure it fits within viewport with margin */
    width: auto;
    transform: translate(-50%, -50%) rotate(0deg);
    animation: rotateMandala 120s linear infinite;
    z-index: 10;
    opacity: 0.4;
  }
  
  #mandala-black-overlay {
    height: 75vh; /* Same as text */
    max-height: calc(100vh - 40px); /* Ensure it fits within viewport with margin */
    width: 75vh; /* Same as text - square covering full area */
    max-width: calc(100vh - 40px); /* Keep square proportions */
    transform: translate(-50%, -50%);
    z-index: 20;
    opacity: 1 !important;
  }
  
  #mandala-text {
    height: 75vh;
    max-height: calc(100vh - 40px); /* Ensure it fits within viewport with margin */
    width: auto;
    transform: translate(-50%, -50%);
    animation: none;
    z-index: 30;
    opacity: 1;
  }

  #spheres-section {
    position: relative;
    width: 50%;
    height: 100%;
    pointer-events: auto;
  }

  #language-text {
    /* Positioned in center of spheres section */
    left: 50%;
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 400px;
  }
  
  /* Hide horizontal timeline lines in desktop mode - must come AFTER mobile query */
  .timeline-line-horizontal {
    display: none !important;
  }
}

/* Desktop tablet adjustments (768px - 992px) */
@media (min-width: 768px) and (max-width: 992px) {
  .lang-sphere {
    width: 90px;
    height: 90px;
    font-size: 1.2rem;
  }
}

/* ============================================
   ARTISTIC PARTICLES BACKGROUND
   Only visible on large screens (> 992px)
   Only in the right empty space, not invading spheres area
   ============================================ */
#particles-art {
  position: fixed;
  top: 0;
  left: 60%; /* Start after spheres area */
  width: 35%; /* Only the empty right space */
  height: 100%;
  z-index: 1; /* Behind everything except background */
  pointer-events: none; /* Don't interfere with clicks */
  opacity: 0; /* Hidden by default */
  transition: opacity 0.6s ease;
  
  /* Gradient mask to fade particles at left edge */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.3) 5%, black 15%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.3) 5%, black 15%);
}

/* Show particles only on large screens */
@media (min-width: 993px) {
  #particles-art {
    opacity: 1;
  }
}