/* =========================================================
   UTECH SWITCH LOADER V2
   Concept: dark room -> physical switch turns on -> UTECH appears
   Minimal, premium, no spinner
   ========================================================= */

:root{
  --loader-bg:#080a0b;
  --loader-white:#f8f8f5;
  --loader-soft:#dfe3e5;
  --loader-line:rgba(255,255,255,.13);
  --loader-cyan:#2f9dc3;
}

html.utech-loader-lock,
html.utech-loader-lock body{
  overflow:hidden;
}

.utech-switch-loader{
  position:fixed;
  inset:0;
  z-index:999999;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:var(--loader-bg);
  color:#fff;
  opacity:1;
  visibility:visible;
  transition:
    opacity .52s cubic-bezier(.22,.61,.36,1),
    visibility .52s step-end;
}

.utech-switch-loader.is-leaving{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.utech-switch-loader__stage{
  position:relative;
  display:flex;
  width:min(88vw,520px);
  min-height:330px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transform:translateY(-8px);
}

/* subtle room vignette */
.utech-switch-loader::before{
  content:"";
  position:absolute;
  inset:-15%;
  background:
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.018),transparent 24%),
    radial-gradient(circle at 50% 50%,transparent 35%,rgba(0,0,0,.5) 80%);
  pointer-events:none;
}

/* White glow that exists only after "switch on" */
.utech-switch-loader__light{
  position:absolute;
  left:50%;
  top:50%;
  width:170px;
  height:170px;
  border-radius:50%;
  background:rgba(255,255,255,.17);
  filter:blur(30px);
  opacity:0;
  transform:translate(-50%,-50%) scale(.3);
  animation:utechRoomLight 1.25s .72s cubic-bezier(.2,.75,.2,1) forwards;
}

/* Minimal switch plate */
.utech-switch-loader__device{
  position:relative;
  z-index:3;
  opacity:0;
  transform:translateY(8px) scale(.97);
  animation:utechDeviceEnter .48s .1s ease forwards;
}

.utech-switch-loader__plate{
  position:relative;
  width:86px;
  height:86px;
  padding:10px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:9px;
  background:#141719;
  box-shadow:
    0 18px 46px rgba(0,0,0,.5),
    inset 0 0 0 1px rgba(255,255,255,.025);
}

.utech-switch-loader__rocker{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:6px;
  background:linear-gradient(180deg,#dadbda 0%,#f7f7f4 100%);
  box-shadow:
    0 5px 11px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.9);
  transform:perspective(130px) rotateX(-7deg);
  transform-origin:center bottom;
  animation:utechSwitchClick .28s .72s cubic-bezier(.25,.75,.25,1) forwards;
}

.utech-switch-loader__rocker::before{
  content:"";
  position:absolute;
  right:10px;
  left:10px;
  top:50%;
  height:1px;
  background:rgba(0,0,0,.035);
}

.utech-switch-loader__rocker::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.25),transparent 46%);
  pointer-events:none;
}

.utech-switch-loader__indicator{
  position:absolute;
  left:50%;
  bottom:10px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#7a7f82;
  transform:translateX(-50%);
  box-shadow:none;
  animation:utechIndicatorOn .18s .83s ease forwards;
}

/* Brand starts invisible; appears when switch turns on */
.utech-switch-loader__logo{
  position:absolute;
  z-index:2;
  left:50%;
  top:42px;
  width:178px;
  opacity:0;
  filter:blur(7px);
  transform:translateX(-50%) translateY(9px) scale(.985);
  animation:utechLogoOn .72s .88s cubic-bezier(.2,.75,.2,1) forwards;
}

.utech-switch-loader__logo img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}

.utech-switch-loader__caption{
  position:absolute;
  z-index:2;
  left:50%;
  bottom:42px;
  color:rgba(255,255,255,.44);
  font:500 8px/1.4 Arial,sans-serif;
  letter-spacing:.18em;
  white-space:nowrap;
  opacity:0;
  transform:translateX(-50%) translateY(3px);
  animation:utechCaptionOn .4s 1.12s ease forwards;
}

/* Tiny vertical energy line links the switch to the logo */
.utech-switch-loader__stage::after{
  content:"";
  position:absolute;
  z-index:1;
  left:50%;
  top:126px;
  width:1px;
  height:43px;
  background:linear-gradient(
    to bottom,
    rgba(47,157,195,0),
    rgba(47,157,195,.85),
    rgba(255,255,255,.42),
    rgba(255,255,255,0)
  );
  opacity:0;
  transform:translateX(-50%) scaleY(.2);
  transform-origin:bottom;
  animation:utechEnergyLine .44s .82s ease forwards;
}

/* Animations */
@keyframes utechDeviceEnter{
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@keyframes utechSwitchClick{
  0%{
    transform:perspective(130px) rotateX(-7deg);
    box-shadow:0 5px 11px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.9);
  }
  45%{
    transform:perspective(130px) rotateX(7deg) translateY(1px);
    box-shadow:0 2px 5px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.85);
  }
  100%{
    transform:perspective(130px) rotateX(4deg);
    background:linear-gradient(180deg,#ffffff 0%,#f2f4f4 100%);
    box-shadow:
      0 0 0 1px rgba(255,255,255,.12),
      0 10px 34px rgba(255,255,255,.13),
      inset 0 1px 0 rgba(255,255,255,1);
  }
}

@keyframes utechIndicatorOn{
  to{
    background:var(--loader-cyan);
    box-shadow:0 0 10px rgba(47,157,195,.9);
  }
}

@keyframes utechRoomLight{
  0%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.3);
  }
  55%{
    opacity:.82;
    transform:translate(-50%,-50%) scale(1.45);
  }
  100%{
    opacity:.22;
    transform:translate(-50%,-50%) scale(1.05);
  }
}

@keyframes utechEnergyLine{
  to{
    opacity:1;
    transform:translateX(-50%) scaleY(1);
  }
}

@keyframes utechLogoOn{
  0%{
    opacity:0;
    filter:blur(7px);
    transform:translateX(-50%) translateY(9px) scale(.985);
  }
  100%{
    opacity:1;
    filter:blur(0);
    transform:translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes utechCaptionOn{
  to{
    opacity:1;
    transform:translateX(-50%) translateY(0);
  }
}

/* Demo only */
.loader-demo{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:40px;
  background:#f5f6f6;
  color:#171a1c;
  font-family:Arial,sans-serif;
  text-align:center;
}
.loader-demo small{color:#2f9dc3;font-weight:700;letter-spacing:1px}
.loader-demo h1{margin:8px 0;font-size:28px}
.loader-demo p{margin:0 0 20px;color:#6d757a}
.loader-demo button{
  min-height:42px;
  padding:8px 16px;
  border:1px solid #d7dbdd;
  border-radius:10px;
  background:#fff;
  color:#171a1c;
  cursor:pointer;
}

/* Mobile */
@media(max-width:520px){
  .utech-switch-loader__stage{
    min-height:290px;
  }

  .utech-switch-loader__logo{
    top:34px;
    width:154px;
  }

  .utech-switch-loader__plate{
    width:80px;
    height:80px;
  }

  .utech-switch-loader__caption{
    bottom:33px;
    font-size:7px;
  }

  .utech-switch-loader__stage::after{
    top:112px;
    height:42px;
  }
}

/* Accessibility */
@media(prefers-reduced-motion:reduce){
  .utech-switch-loader__device,
  .utech-switch-loader__rocker,
  .utech-switch-loader__indicator,
  .utech-switch-loader__light,
  .utech-switch-loader__logo,
  .utech-switch-loader__caption,
  .utech-switch-loader__stage::after{
    animation:none!important;
  }

  .utech-switch-loader__device,
  .utech-switch-loader__logo,
  .utech-switch-loader__caption,
  .utech-switch-loader__stage::after{
    opacity:1;
    filter:none;
    transform:none;
  }

  .utech-switch-loader__logo{
    transform:translateX(-50%);
  }

  .utech-switch-loader__caption{
    transform:translateX(-50%);
  }

  .utech-switch-loader__rocker{
    transform:none;
  }

  .utech-switch-loader__indicator{
    background:var(--loader-cyan);
  }
}


/* =========================================================
   V3 refinements
   - switch sits lower
   - after click only the UTECH logo appears above it
   - no caption / no connector line / no extra text
   ========================================================= */

.utech-switch-loader__stage{
  min-height:360px;
  justify-content:flex-start;
  padding-top:112px;
  transform:none;
}

/* Move the physical switch lower */
.utech-switch-loader__device{
  margin-top:92px;
}

/* Logo appears alone above the switch */
.utech-switch-loader__logo{
  top:58px;
  width:176px;
}

/* Slightly tighter light halo centered between logo and switch */
.utech-switch-loader__light{
  top:58%;
  width:155px;
  height:155px;
}

/* Hide/remove legacy extras from V2 */
.utech-switch-loader__caption{
  display:none!important;
}

.utech-switch-loader__stage::after{
  display:none!important;
}

/* Keep the composition cleaner after the switch click */
@keyframes utechLogoOn{
  0%{
    opacity:0;
    filter:blur(6px);
    transform:translateX(-50%) translateY(7px) scale(.99);
  }
  100%{
    opacity:1;
    filter:blur(0);
    transform:translateX(-50%) translateY(0) scale(1);
  }
}

@media(max-width:520px){
  .utech-switch-loader__stage{
    min-height:320px;
    padding-top:92px;
  }

  .utech-switch-loader__device{
    margin-top:82px;
  }

  .utech-switch-loader__logo{
    top:48px;
    width:152px;
  }
}