/* =========================================
   SSB SYSTEM LOGO - FINAL
   Smartphone above circle / smooth / premium
========================================= */

.logo-orbit-wrap{
  position:relative;
  width:520px;
  height:520px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1;
  overflow:visible;
  transform:translateY(-24px);
}

/* วงกลมอยู่ด้านหลัง */
.logo-orbit-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:1;
}

.logo-orbit-ring{
  fill:none;
  stroke:rgba(120,210,255,.18);
  stroke-width:1.2;
}

.logo-orbit-ring.second{
  stroke:rgba(255,255,255,.08);
}

.logo-orbit-runner{
  fill:#e6fbff;
  transform-origin:160px 160px;
  animation:logoOrbitSpin 12s linear infinite;
}

@keyframes logoOrbitSpin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

/* Radar ด้านหลัง */
.logo-radar-layer{
  position:absolute;
  inset:34px;
  border-radius:50%;
  z-index:2;
  pointer-events:none;
}

.logo-radar-layer::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid rgba(132,212,255,.16);
}

.logo-radar-layer::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 300deg,
    rgba(120,250,255,.10) 330deg,
    rgba(255,255,255,.58) 345deg,
    transparent 360deg
  );
  animation:radarSweep 7s linear infinite;
}

@keyframes radarSweep{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

/* Grid หลังมือถือ */
.logo-radar-grid{
  position:absolute;
  inset:70px;
  border-radius:50%;
  border:1px solid rgba(120,210,255,.06);
  z-index:2;
  pointer-events:none;
}

.logo-radar-grid::before,
.logo-radar-grid::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:1px solid rgba(120,210,255,.055);
}

.logo-radar-grid::before{
  width:68%;
  height:68%;
}

.logo-radar-grid::after{
  width:36%;
  height:36%;
}

.logo-radar-cross{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
}

.logo-radar-cross::before,
.logo-radar-cross::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  background:rgba(120,210,255,.055);
  transform:translate(-50%,-50%);
}

.logo-radar-cross::before{
  width:1px;
  height:70%;
}

.logo-radar-cross::after{
  width:70%;
  height:1px;
}

/* จุด scan */
.logo-scan-dot{
  position:absolute;
  width:10px;
  height:10px;
  margin:-5px 0 0 -5px;
  border-radius:50%;
  background:#fff;
  box-shadow:
    0 0 8px rgba(255,255,255,.85),
    0 0 14px rgba(120,210,255,.42);
  opacity:.18;
  transform:scale(.7);
  transition:.22s ease;
  z-index:6;
}

.logo-scan-dot.is-hit{
  opacity:1;
  transform:scale(1.25);
  box-shadow:
    0 0 12px rgba(255,255,255,.95),
    0 0 24px rgba(120,210,255,.65);
}

/* วงแสงกลาง อยู่หลังมือถือ */
.logo-core{
  position:relative;
  z-index:5;
  width:300px;
  height:300px;
  border-radius:50%;
  border:1px solid rgba(132,212,255,.20);

  background:
    radial-gradient(circle at 50% 45%,
      rgba(100,220,255,.18),
      rgba(12,28,68,.42) 48%,
      rgba(5,12,30,.10) 72%,
      transparent 100%);

  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  overflow:visible;

  box-shadow:
    0 0 24px rgba(90,180,255,.12),
    inset 0 0 18px rgba(90,180,255,.05);

  transition:transform .22s ease, box-shadow .22s ease;
}

/* แสงหลังมือถือ */
.logo-core::before{
  content:"";
  position:absolute;
  inset:28px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(104,244,255,.20), transparent 68%);
  z-index:1;
  pointer-events:none;
}

.logo-core::after{
  content:"";
  position:absolute;
  inset:-20px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(104,244,255,.10), transparent 72%);
  z-index:0;
  pointer-events:none;
}

/* SMARTPHONE อยู่บนวงกลม */
.logo-core img{
  position:relative;
  z-index:10;
  width:142%;
  max-width:none;
  height:auto;
  object-fit:contain;
  transform:translateY(0px);
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.20));
}

/* Hover เบา ไม่หน่วง */
.logo-core:hover{
  transform:scale(1.025);
  box-shadow:
    0 0 32px rgba(90,180,255,.18),
    inset 0 0 20px rgba(90,180,255,.07);
}

.logo-core.is-burst{
  transform:scale(1.04);
  box-shadow:
    0 0 38px rgba(90,180,255,.22),
    0 0 20px rgba(255,184,94,.12),
    inset 0 0 22px rgba(90,180,255,.08);
}

/* LIGHT MODE */
html.light-mode .logo-orbit-ring{
  stroke:rgba(20,110,255,.14);
}

html.light-mode .logo-orbit-ring.second{
  stroke:rgba(255,255,255,.24);
}

html.light-mode .logo-orbit-runner{
  fill:#1e6bff;
}

html.light-mode .logo-radar-layer::before{
  border-color:rgba(20,110,255,.13);
}

html.light-mode .logo-radar-layer::after{
  background:conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 300deg,
    rgba(0,70,180,.10) 330deg,
    rgba(0,90,220,.62) 345deg,
    transparent 360deg
  );
}

html.light-mode .logo-radar-grid,
html.light-mode .logo-radar-grid::before,
html.light-mode .logo-radar-grid::after{
  border-color:rgba(20,110,255,.07);
}

html.light-mode .logo-radar-cross::before,
html.light-mode .logo-radar-cross::after{
  background:rgba(20,110,255,.07);
}

html.light-mode .logo-scan-dot{
  background:#2f7dff;
  box-shadow:
    0 0 6px rgba(30,107,255,.50),
    0 0 12px rgba(0,60,180,.20);
}

html.light-mode .logo-core{
  border:1px solid rgba(20,110,255,.14);
  background:
    radial-gradient(circle at 50% 45%,
      rgba(80,160,255,.16),
      rgba(86,148,255,.25) 48%,
      rgba(255,255,255,.08) 72%,
      transparent 100%);
  box-shadow:
    0 0 18px rgba(15,103,255,.10),
    inset 0 0 12px rgba(255,255,255,.03);
}

html.light-mode .logo-core::before{
  background:radial-gradient(circle, rgba(20,110,255,.14), transparent 68%);
}

html.light-mode .logo-core::after{
  background:radial-gradient(circle, rgba(20,110,255,.08), transparent 72%);
}

html.light-mode .logo-core img{
  filter:drop-shadow(0 18px 22px rgba(20,70,150,.18));
}

/* MOBILE */
@media (max-width:1023px){
  .logo-orbit-wrap{
    width:420px;
    height:420px;
  }

  .logo-core{
    width:260px;
    height:260px;
  }

  .logo-core img{
    width:178%;
    transform:translateY(-38px);
  }

  .logo-radar-layer{
    inset:28px;
  }

  .logo-radar-grid{
    inset:58px;
  }
}

@media (max-width:560px){
  .logo-orbit-wrap{
    width:350px;
    height:350px;
  }

  .logo-core{
    width:230px;
    height:230px;
  }

  .logo-core img{
    width:178%;
    transform:translateY(-32px);
  }

  .logo-radar-layer{
    inset:24px;
  }

  .logo-radar-grid{
    inset:50px;
  }
}