/* ==========================================================================
   ANAYET — HIGH-POWER CNC INDUSTRIAL LASER LOADER (ORGANIC GLOW & FLUID FLIGHT)
   ========================================================================== */

/* 1. Root Loader Overlay */
#loader {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  background: #050506;
  display: block;
  animation: loaderSafety .4s 5s forwards;
  overflow: hidden;
  pointer-events: all;
  opacity: 1;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Fullscreen Canvas for Thermal Sparks, Molten Drops & Rising Smoke */
#loader-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

/* 2. Dark Brushed Steel Metal Plate Background */
.loader-bg {
  position: absolute;
  inset: 0;
  background-color: #050506;
  background-image:
    /* Ultra-fine Horizontal Brushing */
    repeating-linear-gradient(0deg,
      rgba(255, 255, 255, 0.022) 0px,
      rgba(255, 255, 255, 0.022) 1px,
      transparent 1px,
      transparent 2px),
    repeating-linear-gradient(0deg,
      rgba(0, 0, 0, 0.32) 0px,
      rgba(0, 0, 0, 0.32) 1px,
      transparent 1px,
      transparent 3px),
    /* Vignette Radial Lighting for Depth */
    radial-gradient(ellipse at 50% 50%, #17191D 0%, #0B0C0E 65%, #050506 100%);
  pointer-events: none;
  overflow: hidden;
  transform: scale(1);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Specular Diagonal Light Sheen across the Metal Plate */
.loader-bg::after {
  content: "";
  position: absolute;
  inset: -60%;
  width: 220%;
  height: 220%;
  background: linear-gradient(115deg,
      transparent 0%,
      transparent 42%,
      rgba(255, 255, 255, 0.015) 47%,
      rgba(255, 255, 255, 0.055) 50%,
      rgba(255, 255, 255, 0.015) 53%,
      transparent 58%,
      transparent 100%);
  transform: translate3d(-35%, -35%, 0) rotate(-10deg);
  animation: metalSheenSlide 6s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes metalSheenSlide {
  0% {
    transform: translate3d(-40%, -40%, 0) rotate(-10deg);
  }

  100% {
    transform: translate3d(25%, 25%, 0) rotate(-10deg);
  }
}

/* Fine SVG Grain Texture Layer */
.loader-grain-layer {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 2;
  opacity: 0.9;
  transform: scale(1);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 3. Independent Loader Logo Container (FLIP Ready & Hardware Accelerated) */
#loader-logo {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  transform-origin: center center;
  z-index: 2147483647;
  width: min(720px, 62vw);
  display: block;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

html.loader-skip #loader,
html.loader-skip #loader-logo {
  display: none !important;
}

/* Base Logo Images */
#loader-logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* A. Base Engraved Groove (Dark Etched Silhouette only behind E & T) */
.logo-groove {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: brightness(0.12);
  opacity: 0.5;
  clip-path: inset(0 0 0 71%);
}

/* B. Thermal Incandescent Metal Layer: Warm molten tint on E & T without clipped outer drop-shadows */
.logo-hot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  filter: sepia(1) saturate(6) hue-rotate(-15deg) brightness(1.6);
  clip-path: inset(0 29% 0 71%);
  /* Starts with 0 width at 71%, NO box glow on ANAY */
  animation: loaderCutHot 0.8s linear 0.08s forwards, loaderFadeHot 0.35s ease 0.92s forwards;
}

/* C. Final Cooled White Metal Layer: ANAY starts 100% normal/cold, ET reveals behind laser */
.logo-cold {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  clip-path: inset(0 29% 0 0);
  /* 0% to 71% (ANAY) fully visible in clean crisp cold white */
  animation: loaderCutCold 0.8s linear 0.18s forwards;
}

/* 4. High-Power Laser Assembly (Sweeps from 71% to 100% in 0.8s) */
.loader-laser-assembly {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 71%;
  /* Starts at the E */
  width: 0;
  pointer-events: none;
  z-index: 10;
  animation: loaderLaserSweep 0.8s linear 0.08s forwards;
}

/* Working Laser Head (Subtle organic CNC wander) */
.loader-laser-head {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  animation: laserCNCWobble 0.22s ease-in-out infinite alternate;
}

/* High-Intensity Vertical Beam from Top of Screen */
.loader-laser-beam {
  position: absolute;
  bottom: 0;
  left: -1px;
  width: 2px;
  height: 120vh;
  background: linear-gradient(to bottom,
      rgba(255, 250, 235, 0.04) 0%,
      rgba(255, 180, 90, 0.15) 50%,
      rgba(255, 220, 150, 0.35) 80%,
      rgba(255, 255, 255, 0.95) 100%);
  box-shadow:
    0 0 10px 2px rgba(255, 200, 120, 0.45),
    0 0 20px 4px rgba(255, 140, 50, 0.25);
  pointer-events: none;
}

/* Ambient Warm Plate Glow around Cutting Point (Smooth radial ellipse with NO hard edges) */
.impact-plate-glow {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  width: 190px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
      rgba(255, 175, 75, 0.35) 0%,
      rgba(255, 120, 45, 0.14) 45%,
      transparent 72%);
  pointer-events: none;
  filter: blur(12px);
}

/* Smooth Incandescent Molten Glow behind the impact point */
.impact-trail {
  position: absolute;
  top: 0;
  right: 0;
  transform: translateY(-50%);
  width: 85px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
      rgba(255, 245, 210, 0.85) 0%,
      rgba(255, 155, 60, 0.5) 45%,
      transparent 75%);
  filter: blur(6px);
  pointer-events: none;
}

/* Fiery High-Energy Plasma Flame Halo (Circular radial gradient) */
.impact-halo {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
      rgba(255, 255, 250, 1) 0%,
      rgba(255, 195, 105, 0.85) 28%,
      rgba(255, 120, 45, 0.5) 58%,
      transparent 78%);
  box-shadow:
    0 0 18px 5px rgba(255, 180, 90, 0.85),
    0 0 38px 12px rgba(255, 120, 40, 0.6),
    0 0 70px 22px rgba(235, 65, 20, 0.35);
  animation: flameFlicker 0.06s ease-in-out infinite alternate;
}

/* Ultra-Bright Pure White Impact Core */
.impact-core {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow:
    0 0 10px 4px #FFFFFF,
    0 0 20px 7px #FFF1C9;
}

/* 5. Keyframes */

@keyframes laserCNCWobble {
  0% {
    transform: translate(-50%, -50%) translateY(-7px) translateX(-1px);
  }

  30% {
    transform: translate(-50%, -50%) translateY(8px) translateX(1px);
  }

  65% {
    transform: translate(-50%, -50%) translateY(-5px) translateX(0px);
  }

  85% {
    transform: translate(-50%, -50%) translateY(7px) translateX(1px);
  }

  100% {
    transform: translate(-50%, -50%) translateY(-6px) translateX(-1px);
  }
}

@keyframes flameFlicker {
  0% {
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0.94;
  }

  100% {
    transform: translate(-50%, -50%) scale(1.12);
    opacity: 1;
  }
}

@keyframes loaderLaserSweep {
  0% {
    left: 71%;
    opacity: 1;
  }

  96% {
    opacity: 1;
  }

  100% {
    left: 100%;
    opacity: 0;
  }
}

@keyframes loaderCutHot {
  0% {
    clip-path: inset(0 29% 0 71%);
  }

  100% {
    clip-path: inset(0 0% 0 71%);
  }
}

@keyframes loaderFadeHot {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes loaderCutCold {
  0% {
    clip-path: inset(0 29% 0 0);
  }

  100% {
    clip-path: inset(0 0% 0 0);
  }
}

@keyframes loaderSafety {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* 6. Dissolve Exit (Smooth Fade + Subtle Scale 1.03) */
#loader.is-leaving {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

#loader.is-leaving .loader-bg,
#loader.is-leaving .loader-grain-layer {
  transform: scale(1.03);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reduced Motion Accessibility */
@media (prefers-reduced-motion: reduce) {
  #loader.is-leaving {
    transition: opacity 0.3s ease;
  }

  #loader.is-leaving .loader-bg,
  #loader.is-leaving .loader-grain-layer {
    transform: none !important;
    transition: none !important;
  }

  .logo-hot,
  .logo-groove,
  .loader-laser-assembly,
  #loader-canvas {
    display: none !important;
  }

  .logo-cold {
    clip-path: none;
    animation: none;
  }
}