/* ==========================================
   GENZCLASS DYNAMIC LIGHT/DARK PENCIL LOADER
   ========================================== */
#loader {
    position: fixed;
    inset: 0;
    background: #ffffff !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 999999;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

#loader.hide,
#loader.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    display: none !important;
}

.pencil-loader-wrapper {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 200px !important;
    height: 200px !important;
    margin: 0 auto !important;
}

.loader-center-gz {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 28px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    z-index: 5 !important;
    pointer-events: none !important;
}

/* ==========================================
   1. LIGHT MODE (DEFAULT CLEAN WHITE LOOK)
   ========================================== */
#loader,
html.light #loader,
html.light-mode #loader,
body.light #loader,
body.light-mode #loader {
    background: #ffffff !important;
}

#loader .pencil,
html.light #loader .pencil,
html.light-mode #loader .pencil,
body.light #loader .pencil,
body.light-mode #loader .pencil {
    filter: drop-shadow(0 4px 14px rgba(79, 70, 229, 0.12)) !important;
}

#loader .pencil__stroke,
html.light #loader .pencil__stroke,
html.light-mode #loader .pencil__stroke,
body.light #loader .pencil__stroke,
body.light-mode #loader .pencil__stroke {
    stroke: #4f46e5 !important;
    filter: none !important;
}

#loader .loader-center-gz,
html.light #loader .loader-center-gz,
html.light-mode #loader .loader-center-gz,
body.light #loader .loader-center-gz,
body.light-mode #loader .loader-center-gz {
    background: linear-gradient(135deg, #4f46e5, #2563eb) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 2px 6px rgba(79, 70, 229, 0.2)) !important;
    animation: gzPulseLight 2s ease-in-out infinite !important;
}

#loader h2,
html.light #loader h2,
html.light-mode #loader h2,
body.light #loader h2,
body.light-mode #loader h2 {
    color: #0f172a !important;
    text-shadow: none !important;
}

#loader p,
html.light #loader p,
html.light-mode #loader p,
body.light #loader p,
body.light-mode #loader p {
    color: #475569 !important;
}

@keyframes gzPulseLight {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.06); }
}

/* ==========================================
   2. DARK MODE (OBSIDIAN & NEON GLOWING PENCIL)
   ========================================== */
html.dark #loader,
html.dark-mode #loader,
body.dark #loader,
body.dark-mode #loader {
    background: #0b0f19 !important;
}

html.dark #loader .pencil,
html.dark-mode #loader .pencil,
body.dark #loader .pencil,
body.dark-mode #loader .pencil {
    filter: drop-shadow(0 0 16px rgba(99, 102, 241, 0.9)) drop-shadow(0 0 32px rgba(129, 140, 248, 0.65)) !important;
}

html.dark #loader .pencil__stroke,
html.dark-mode #loader .pencil__stroke,
body.dark #loader .pencil__stroke,
body.dark-mode #loader .pencil__stroke {
    stroke: #818cf8 !important;
    filter: drop-shadow(0 0 8px #6366f1) drop-shadow(0 0 18px #818cf8) !important;
}

html.dark #loader .loader-center-gz,
html.dark-mode #loader .loader-center-gz,
body.dark #loader .loader-center-gz,
body.dark-mode #loader .loader-center-gz {
    background: linear-gradient(135deg, #818cf8, #38bdf8, #c084fc) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 0 14px rgba(129, 140, 248, 0.95)) drop-shadow(0 0 28px rgba(56, 189, 248, 0.7)) !important;
    animation: gzPulseDark 2s ease-in-out infinite !important;
}

html.dark #loader h2,
html.dark-mode #loader h2,
body.dark #loader h2,
body.dark-mode #loader h2 {
    color: #f8fafc !important;
    text-shadow: 0 0 14px rgba(129, 140, 248, 0.75), 0 0 28px rgba(99, 102, 241, 0.55) !important;
}

html.dark #loader p,
html.dark-mode #loader p,
body.dark #loader p,
body.dark-mode #loader p {
    color: #94a3b8 !important;
}

@keyframes gzPulseDark {
    0%, 100% { transform: translate(-50%, -50%) scale(1); filter: drop-shadow(0 0 14px rgba(129, 140, 248, 0.85)); }
    50% { transform: translate(-50%, -50%) scale(1.1); filter: drop-shadow(0 0 24px rgba(192, 132, 252, 0.95)); }
}

/* From Uiverse.io by gustavofusco */ 
.pencil {
  display: block;
  width: 10em;
  height: 10em;
}

.pencil__body1,
.pencil__body2,
.pencil__body3,
.pencil__eraser,
.pencil__eraser-skew,
.pencil__point,
.pencil__rotate,
.pencil__stroke {
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.pencil__body1,
.pencil__body2,
.pencil__body3 {
  transform: rotate(-90deg);
}

.pencil__body1 {
  animation-name: pencilBody1;
}

.pencil__body2 {
  animation-name: pencilBody2;
}

.pencil__body3 {
  animation-name: pencilBody3;
}

.pencil__eraser {
  animation-name: pencilEraser;
  transform: rotate(-90deg) translate(49px,0);
}

.pencil__eraser-skew {
  animation-name: pencilEraserSkew;
  animation-timing-function: ease-in-out;
}

.pencil__point {
  animation-name: pencilPoint;
  transform: rotate(-90deg) translate(49px,-30px);
}

.pencil__rotate {
  animation-name: pencilRotate;
}

.pencil__stroke {
  animation-name: pencilStroke;
  transform: translate(100px,100px) rotate(-113deg);
}

/* Animations */
@keyframes pencilBody1 {
  from,
	to {
    stroke-dashoffset: 351.86;
    transform: rotate(-90deg);
  }

  50% {
    stroke-dashoffset: 150.8;
    transform: rotate(-225deg);
  }
}

@keyframes pencilBody2 {
  from,
	to {
    stroke-dashoffset: 406.84;
    transform: rotate(-90deg);
  }

  50% {
    stroke-dashoffset: 174.36;
    transform: rotate(-225deg);
  }
}

@keyframes pencilBody3 {
  from,
	to {
    stroke-dashoffset: 296.88;
    transform: rotate(-90deg);
  }

  50% {
    stroke-dashoffset: 127.23;
    transform: rotate(-225deg);
  }
}

@keyframes pencilEraser {
  from,
	to {
    transform: rotate(-45deg) translate(49px,0);
  }

  50% {
    transform: rotate(0deg) translate(49px,0);
  }
}

@keyframes pencilEraserSkew {
  from,
	32.5%,
	67.5%,
	to {
    transform: skewX(0);
  }

  35%,
	65% {
    transform: skewX(-4deg);
  }

  37.5%, 
	62.5% {
    transform: skewX(8deg);
  }

  40%,
	45%,
	50%,
	55%,
	60% {
    transform: skewX(-15deg);
  }

  42.5%,
	47.5%,
	52.5%,
	57.5% {
    transform: skewX(15deg);
  }
}

@keyframes pencilPoint {
  from,
	to {
    transform: rotate(-90deg) translate(49px,-30px);
  }

  50% {
    transform: rotate(-225deg) translate(49px,-30px);
  }
}

@keyframes pencilRotate {
  from {
    transform: translate(100px,100px) rotate(0);
  }

  to {
    transform: translate(100px,100px) rotate(720deg);
  }
}

@keyframes pencilStroke {
  from {
    stroke-dashoffset: 439.82;
    transform: translate(100px,100px) rotate(-113deg);
  }

  50% {
    stroke-dashoffset: 164.93;
    transform: translate(100px,100px) rotate(-113deg);
  }

  75%,
	to {
    stroke-dashoffset: 439.82;
    transform: translate(100px,100px) rotate(112deg);
  }
}