/* Heavily optimized loader CSS */

:root {
  --l_primary: #8338ec;
  --l_secondary: #fff;
  --l_main-font: 'Poppins', sans-serif;
  --l_stroke-duration: 3s;
  --l_fill-duration: 1.5s;
  --l_bar-length: 20%;
  --vh: 1vh;
}

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

body {
  font: var(--l_main-font);
  background: #000;
  color: var(--l_secondary);
  overflow-x: hidden; /* Changed from 'overflow: hidden' to only hide horizontal scroll */
}

body.loading-active {
  overflow: hidden; /* This blocks all scrolling during loading */
}

/* Layout */
.l_fullpage-wrapper, 
.l_line-drawing-demo {
  height: 100vh;
  height: calc(var(--vh) * 100);
}

.l_fullpage-wrapper { 
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
}

.l_line-drawing-demo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.l_line-drawing-demo.l_processing {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--l_primary);
  min-height: -webkit-fill-available;
  flex-direction: column;
}

.l_line-drawing-demo.l_completed { position: absolute; inset: 0; z-index: 999; }
.l_line-drawing-demo.l_completed-full { display: none !important; }

/* SVG container */
.l_svg-wrapper {
  width: 500px;
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
}

svg { width: 100%; }

/* SVG text styles */
svg text {
  stroke: var(--l_secondary);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  fill: transparent;
  paint-order: stroke;
  will-change: stroke-dashoffset;
  animation: l_drawStroke var(--l_stroke-duration) cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

.l_fill-text {
  stroke: transparent;
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  will-change: clip-path;
  animation: l_fillText var(--l_fill-duration) ease-in-out var(--l_stroke-duration) forwards;
}

svg text.l_secondary-stroke,
svg text.l_secondary-fill {
  font: 24px var(--l_main-font);
  text-anchor: middle;
}

svg text.l_secondary-fill {
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  animation: l_fillText var(--l_fill-duration) ease-in-out var(--l_stroke-duration) forwards;
}

/* Animations */
@keyframes l_fillText {
  from { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); fill: transparent; }
  to { clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%); fill: var(--l_secondary); }
}

@keyframes l_drawStroke { to { stroke-dashoffset: 0; } }
@keyframes l_panUp { to { transform: translateY(-100vh); } }
@keyframes l_showSecondary { to { opacity: 1; fill: var(--l_secondary); } }

@keyframes l_loading-horizontal {
  from { transform: translateX(-100%); }
  to { transform: translateX(calc(100vw)); }
}

@keyframes l_loading-vertical {
  from { transform: translateY(-100%); }
  to { transform: translateY(calc(100vh)); }
}

/* Background elements */
.l_splash-background {
  position: absolute;
  inset: 0;
  background: var(--l_primary);
  z-index: -1;
  height: calc(var(--vh) * 100);
}

.l_splash-background.l_completed {
  animation: l_panUp 1.1s cubic-bezier(.075,.82,.165,1) forwards;
  will-change: transform;
}

.l_logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Main content */
#l_main-content {
  opacity: 0;
  position: relative;
  width: 100%;
  min-height: 100vh;
  z-index: 1;
  background: transparent;
  transition: opacity 0.5s ease-in;
  overflow-y: auto; /* Ensure content is scrollable */
}

#l_main-content.l_show { 
  opacity: 1; 
  z-index: 1000;
  overflow-y: auto; /* Explicitly allow vertical scrolling */
}

/* Loading bars */
#l_loading-bar-top, #l_loading-bar-bottom, 
#l_loading-bar-left, #l_loading-bar-right {
  position: fixed;
  background: var(--l_secondary);
  z-index: 10000;
  opacity: 0;
  will-change: transform, opacity;
}

#l_loading-bar-top, #l_loading-bar-bottom {
  left: 0;
  width: var(--l_bar-length);
  height: 3px;
}

#l_loading-bar-left, #l_loading-bar-right {
  top: 0;
  width: 3px;
  height: var(--l_bar-length);
}

#l_loading-bar-top { top: 0; }
#l_loading-bar-bottom { bottom: 0; }
#l_loading-bar-left { left: 0; }
#l_loading-bar-right { right: 0; }

/* Animation classes */
.l_animate { opacity: 1 !important; }

#l_loading-bar-top.l_animate { animation: l_loading-horizontal 1s ease-in-out forwards; }
#l_loading-bar-right.l_animate { animation: l_loading-vertical 1s ease-in-out forwards; }
#l_loading-bar-bottom.l_animate { animation: l_loading-horizontal 1s ease-in-out forwards reverse; }
#l_loading-bar-left.l_animate { animation: l_loading-vertical 1s ease-in-out forwards reverse; }

.l_secondary-text {
  fill: transparent;
  opacity: 0;
  letter-spacing: 2px;
  font: 24px var(--l_main-font);
  animation: l_showSecondary 0.6s ease-in-out forwards;
  animation-delay: calc(var(--l_stroke-duration) + var(--l_fill-duration));
}

/* Media queries - condensed */
@media screen and (max-width: 600px) {
  .l_svg-wrapper {
    width: 95%;
    max-width: 420px;
    margin: 0 auto;
    max-height: calc(var(--vh) * 80);
  }
  
  .l_line-drawing-demo.l_processing {
    width: 100vw;
    padding: 5%;
  }
  
  svg {
    overflow: visible;
    transform: translateY(-15px);
    max-height: calc(var(--vh) * 70);
  }
  
  svg text { font-size: 180px !important; }
  
  svg text.l_secondary-stroke,
  svg text.l_secondary-fill {
    font-size: 36px !important;
    transform: translateY(8px);
  }
  
  .l_splash-background { width: 100vw; }
}

@media screen and (max-width: 580px) {
  .l_logo-container {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }
  
  svg text { font-size: 165px !important; }
  svg text.l_secondary-stroke,
  svg text.l_secondary-fill { font-size: 33px !important; }
}

@media screen and (max-width: 460px) {
  .l_line-drawing-demo.l_processing { padding: 4%; }
  svg text { font-size: 150px !important; }
  svg text.l_secondary-stroke,
  svg text.l_secondary-fill { font-size: 30px !important; }
}

@media screen and (max-width: 360px) {
  svg text { font-size: 135px !important; }
  svg text.l_secondary-stroke,
  svg text.l_secondary-fill { font-size: 27px !important; }
}

/* Landscape mode */
@media screen and (max-height: 480px) and (orientation: landscape) {
  .l_line-drawing-demo.l_processing { padding: 2% 10%; }
  .l_svg-wrapper { width: 90%; max-width: 380px; }
  svg text { font-size: 127px !important; }
  svg text.l_secondary-stroke,
  svg text.l_secondary-fill { font-size: 27px !important; }
}

/* iOS Safari fixes */
@supports (-webkit-touch-callout: none) {
  .l_line-drawing-demo,
  .l_line-drawing-demo.l_processing,
  .l_splash-background { height: -webkit-fill-available; }
}

/* Small height devices */
@media screen and (max-width: 480px) and (max-height: 900px) {
  .l_line-drawing-demo.l_processing { height: -webkit-fill-available; }
  .l_svg-wrapper { max-height: calc(var(--vh) * 50); }
}

/* Adjust SVG viewBox for larger text */
@media screen and (max-width: 600px) {
  svg {
    viewBox: "0 0 500 200"; /* Increased height to accommodate larger text */
  }
  
  /* Adjust vertical position of secondary text */
  svg text.l_secondary-stroke,
  svg text.l_secondary-fill {
    y: 145px; /* Move down secondary text to prevent overlap */
  }
}