/* ==========================================================================
   SCRIBBLE EFFECTS — GLOBAL INTERACTIVE ATMOSPHERE (SECTION 2)
   Features: Designer Cursor + Wand Magic Dust | Lenis Scroll | Preloader
   Tuned for: Clean White Website Background (#FFFFFF) & Theme Colors
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. MANDATORY LENIS SMOOTH SCROLL CSS (CRITICAL: PREVENTS SCROLL STICKING)
   -------------------------------------------------------------------------- */
html.lenis, html.lenis body {
  height: auto !important;
}

html.lenis {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   1. DESIGNER MOUSE CURSOR (HARDWARE ACCELERATED VIA TRANSFORM3D)
   -------------------------------------------------------------------------- */
@media (pointer: fine) {
  body.has-se-cursor,
  body.has-se-cursor a,
  body.has-se-cursor button,
  body.has-se-cursor [role="button"],
  body.has-se-cursor input[type="submit"] {
    cursor: none !important;
  }
}

/* Inner Core Dot (6px Neon Lime with Crisp Dark Halo) */
#se-cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  background-color: #C9F31D;
  border: 1px solid rgba(0, 0, 0, 0.45);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999999;
  transform: translate3d(-50%, -50%, 0);
  box-shadow: 0 0 6px rgba(201, 243, 29, 0.9), 0 0 1px rgba(0, 0, 0, 0.8);
  transition: width 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.2s ease;
  will-change: transform;
}

/* Outer Follower Ring */
#se-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 34px;
  height: 34px;
  border: 1.5px solid rgba(0, 0, 0, 0.75);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999998;
  transform: translate3d(-50%, -50%, 0);
  transition: width 0.24s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.24s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.2s ease,
              background-color 0.2s ease;
  will-change: transform;
}

/* Hover State over interactive elements */
body.se-cursor-hover #se-cursor-ring {
  width: 52px;
  height: 52px;
  border-color: #000000;
  background-color: rgba(201, 243, 29, 0.22);
}

body.se-cursor-hover #se-cursor-dot {
  width: 4px;
  height: 4px;
  background-color: #000000;
}

/* Click/Active State */
body.se-cursor-down #se-cursor-ring {
  width: 26px;
  height: 26px;
  border-color: #C9F31D;
  background-color: rgba(201, 243, 29, 0.4);
}

/* --------------------------------------------------------------------------
   2. WAND MAGIC DUST PARTICLES (LIGHTWEIGHT, ZERO REFLOW)
   -------------------------------------------------------------------------- */
.se-wand-dust {
  position: fixed;
  pointer-events: none;
  z-index: 9999995;
  border-radius: 50%;
  transform: translate3d(-50%, -50%, 0);
  animation: seDustDisperse 0.65s cubic-bezier(0.1, 0.8, 0.25, 1) forwards;
  will-change: transform, opacity;
}

@keyframes seDustDisperse {
  0% {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(0.1) translateY(16px) rotate(45deg);
  }
}

/* --------------------------------------------------------------------------
   3. INTERACTIVE PRELOADER (THEATER CURTAIN REVEAL)
   -------------------------------------------------------------------------- */
#se-preloader-curtain {
  position: fixed;
  inset: 0;
  background-color: #080808;
  z-index: 99999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1),
              opacity 0.8s ease;
  user-select: none;
}

#se-preloader-curtain.se-dismissed {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

.se-preloader-svg {
  width: 100px;
  height: 100px;
  margin-bottom: 18px;
}

.se-preloader-scribble {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: seDrawScribble 2.2s ease-in-out infinite alternate;
}

@keyframes seDrawScribble {
  0%   { stroke-dashoffset: 220; }
  100% { stroke-dashoffset: 0; }
}

.se-preloader-title {
  font-family: 'Syne', sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 4px;
  color: #FFFFFF;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.se-preloader-title span {
  color: #C9F31D;
}

.se-preloader-status {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: #888888;
  height: 18px;
}

.se-preloader-progress-track {
  width: 180px;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 99px;
  margin-top: 18px;
  overflow: hidden;
  position: relative;
}

.se-preloader-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #9EE000, #C9F31D);
  box-shadow: 0 0 8px #C9F31D;
  transition: width 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.se-preloader-skip {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  color: #555555;
  margin-top: 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.se-preloader-skip:hover {
  color: #C9F31D;
}