/* KICAP Hologram Keyboard Component */

/* =========================
   Overlay / shell
========================= */
body.sp-hologram-open::after{
  content:"";
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:99996;
  height:62vh;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 74%,rgba(15,23,42,.82),rgba(15,23,42,.52) 34%,rgba(15,23,42,.16) 66%,transparent 100%),
    linear-gradient(to top,rgba(15,23,42,.76),rgba(15,23,42,.30),transparent);
}

.sp-hologram-player{
  position:fixed;
  left:50%;
  bottom:28px;
  z-index:99998;
  transform:translateX(-50%);
  pointer-events:none;
  font-family:inherit;
  box-sizing:border-box;
}

.sp-hologram-player *,
.sp-hologram-player *::before,
.sp-hologram-player *::after{box-sizing:border-box;}
.sp-hologram-player[hidden]{display:none!important;}
.sp-hologram-player.is-visible{display:block;}

.sp-hologram-player::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:44px;
  width:min(880px,96vw);
  height:360px;
  transform:translateX(-50%);
  border-radius:48px;
  background:radial-gradient(ellipse at 50% 50%,rgba(2,6,23,.72),rgba(15,23,42,.48) 42%,transparent 76%);
  filter:blur(18px);
  opacity:.94;
  pointer-events:none;
}

.sp-hologram-close{
  position:absolute;
  left:50%;
  top:-45px;
  z-index:5;
  width:38px;
  height:38px;
  transform:translateX(-50%);
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  background:rgba(15,23,42,.36);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  color:#fff;
  cursor:pointer;
  font-size:22px;
  pointer-events:auto;
}

/* =========================
   Info / status / like
========================= */
.sp-hologram-info,
.sp-hologram-status{
  position:relative;
  z-index:4;
  width:max-content;
  max-width:min(620px,calc(100vw - 70px));
  margin-inline:auto;
  border-radius:20px;
  background:rgba(2,6,23,.48);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 0 36px rgba(139,92,246,.18),inset 0 1px 0 rgba(255,255,255,.10);
  color:#fff;
  text-align:center;
  pointer-events:none;
}

.sp-hologram-info{margin-bottom:8px;padding:10px 18px;}
.sp-hologram-status{margin-top:-18px;padding:8px 16px;color:rgba(226,232,240,.86);}

.sp-hologram-info span,
.sp-hologram-status b{
  color:#c4b5fd;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
}

.sp-hologram-info span{display:block;}
.sp-hologram-status b{margin-right:8px;font-size:11px;}
.sp-hologram-info h3{margin:3px 0 2px;color:#fff;font-size:20px;line-height:1.1;}
.sp-hologram-info p,
.sp-hologram-status span{margin:0;color:rgba(226,232,240,.82);font-size:12px;}
.sp-hologram-info__head{display:flex;align-items:center;justify-content:center;gap:12px;}

.sp-hologram-like-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:34px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:#fff;
  cursor:pointer;
  pointer-events:auto;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;
  transform:translateY(4px) scale(.96);
  transition:opacity .22s ease,transform .22s ease,background .18s ease,border-color .18s ease,color .18s ease;
}

.sp-hologram-like-btn:not([hidden]){opacity:1;transform:translateY(0) scale(1);}
.sp-hologram-like-btn:hover{background:rgba(255,255,255,.14);}
.sp-hologram-like-btn.is-liked{
  color:#fda4af;
  border-color:rgba(251,113,133,.5);
  background:rgba(251,113,133,.16);
  box-shadow:0 0 20px rgba(251,113,133,.28);
}

/* =========================
   Stage / projector / keyboard
========================= */
.sp-hologram-stage{
  position:relative;
  display:block;
  height:360px;
  padding-top:38px;
  overflow:visible;
  perspective:2200px;
  pointer-events:none;
}

.sp-hologram-projector{
  position:absolute;
  left:50%;
  bottom:-50px;
  z-index:1;
  width:min(900px,96vw);
  height:220px;
  transform:translateX(-50%);
  clip-path:polygon(48.8% 100%,51.2% 100%,82% 10%,18% 10%);
  background:linear-gradient(to top,rgba(196,181,253,.34),rgba(139,92,246,.24),rgba(96,165,250,.14),rgba(255,255,255,.05),transparent);
  filter:blur(14px);
  mix-blend-mode:screen;
  opacity:.78;
  pointer-events:none;
}

.sp-hologram-projector::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:-10px;
  width:170px;
  height:22px;
  transform:translateX(-50%);
  border-radius:999px;
  background:radial-gradient(ellipse,rgba(255,255,255,.96) 0%,rgba(196,181,253,.92) 22%,rgba(139,92,246,.70) 48%,rgba(96,165,250,.34) 70%,transparent 100%);
  filter:blur(8px);
}

.sp-hologram-projector::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle,rgba(255,255,255,.95) 1px,transparent 1px);
  background-size:22px 22px;
  opacity:.22;
  animation:spBeamDust 12s linear infinite;
}

.sp-hologram-keyboard{
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:22px;
  border:1px solid rgba(196,181,253,.56);
  border-radius:24px;
  background:radial-gradient(circle at 50% 0%,rgba(196,181,253,.26),transparent 44%),rgba(99,102,241,.12);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 0 28px rgba(196,181,253,.42),0 0 82px rgba(139,92,246,.58),0 0 160px rgba(96,165,250,.28),0 58px 110px rgba(2,6,23,.42),inset 0 0 24px rgba(196,181,253,.18);
  transform:rotateX(48deg) translateY(-42px) scale(1.08);
  transform-style:preserve-3d;
  animation:spHologramFloat 4.2s ease-in-out infinite;
}

.sp-hologram-keyboard::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:-42px;
  width:130%;
  height:120px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(139,92,246,.45),rgba(96,165,250,.18),transparent 70%);
  filter:blur(25px);
  opacity:.65;
  pointer-events:none;
}

.sp-hologram-row{display:flex;justify-content:center;gap:8px;}
.sp-hologram-key{
  --w:1;
  width:calc(42px * var(--w));
  height:42px;
  border:1px solid rgba(196,181,253,.64);
  border-radius:11px;
  background:linear-gradient(180deg,rgba(196,181,253,.24),rgba(99,102,241,.14));
  color:rgba(237,233,254,.98);
  text-shadow:0 0 10px rgba(196,181,253,.65),0 1px 8px rgba(2,6,23,.55);
  box-shadow:0 0 18px rgba(139,92,246,.24),0 12px 24px rgba(2,6,23,.34),inset 0 1px 0 rgba(255,255,255,.30),inset 0 -8px 15px rgba(15,23,42,.26);
  font-size:12px;
  font-weight:850;
  transform:translateZ(18px);
  transition:transform .12s ease,background .12s ease,box-shadow .12s ease,color .12s ease;
}

.sp-hologram-key.is-active{
  color:#fff;
  background:linear-gradient(180deg,rgba(255,255,255,.58),rgba(139,92,246,.72));
  box-shadow:0 0 0 12px rgba(139,92,246,.18),0 0 46px rgba(196,181,253,.86),0 0 90px rgba(96,165,250,.42),inset 0 1px 0 rgba(255,255,255,.50);
  transform:translateZ(4px) translateY(18px) scaleY(.84);
}
.sp-hologram-key.is-release{transform:translateZ(26px) translateY(-5px);}

/* =========================
   Bubble comments
   - single bubble, continuous float-up loop
   - keeps existing purple/blue hologram lighting
========================= */
.sp-hologram-stars{
  position:absolute;
  left:50%;
  top:auto;
  bottom:-10px;
  z-index:2;
  width:min(840px,92vw);
  height:320px;
  transform:translateX(-50%);
  pointer-events:none;
  overflow:visible;
}

.sp-hologram-stars::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:-45px;
  width:240px;
  height:300px;
  transform:translateX(-50%);
  clip-path:polygon(49.2% 100%,50.8% 100%,93% 0,7% 0);
  background:linear-gradient(to top,rgba(255,255,255,.32),rgba(196,181,253,.24) 24%,rgba(96,165,250,.13) 56%,transparent 100%);
  filter:blur(7px);
  mix-blend-mode:screen;
  opacity:.76;
  animation:spBubbleBeamPulse 5.8s ease-in-out infinite;
}

.sp-hologram-stars::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-55px;
  width:128px;
  height:22px;
  transform:translateX(-50%);
  border-radius:999px;
  background:radial-gradient(ellipse,rgba(255,255,255,.98),rgba(196,181,253,.84) 32%,rgba(139,92,246,.45) 62%,transparent 78%);
  filter:blur(5px);
  opacity:.95;
}

.sp-hologram-comment{
  --sway-a:18px;
  --sway-b:-18px;
  --sway-c:0px;
  --rise-y:-205px;
  --bubble-size:92px;
  --bubble-duration:6.4s;
  --pop-scale:1.2;
  position:absolute;
  left:50%;
  top:auto;
  bottom:12px;
  z-index:3;
  width:var(--bubble-size);
  height:var(--bubble-size);
  display:flex;
  align-items:center;
  justify-content:center;
  max-width:none;
  padding:13px;
  border:1px solid rgba(255,255,255,.46);
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 22%,rgba(255,255,255,.72),rgba(255,255,255,.22) 12%,transparent 23%),
    radial-gradient(circle at 72% 76%,rgba(96,165,250,.20),transparent 36%),
    linear-gradient(145deg,rgba(255,255,255,.16),rgba(139,92,246,.16) 44%,rgba(15,23,42,.14));
  box-shadow:inset 7px 10px 18px rgba(255,255,255,.22),inset -11px -14px 26px rgba(79,70,229,.16),0 0 18px rgba(221,214,254,.46),0 0 38px rgba(139,92,246,.32);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  color:#fff;
  text-align:center;
  font-size:12.4px;
  font-weight:900;
  line-height:1.13;
  white-space:normal;
  text-shadow:0 0 10px rgba(221,214,254,.88),0 2px 8px rgba(2,6,23,.58);
  opacity:0;
  transform:translate(-50%,22px) scale(.34);
  filter:none;
  will-change:transform,opacity;
  animation:spBubbleFloatUp var(--bubble-duration) linear forwards;
}

.sp-hologram-comment::before{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:50%;
  border-top:1px solid rgba(255,255,255,.62);
  border-left:1px solid rgba(255,255,255,.28);
  opacity:.82;
  pointer-events:none;
}

.sp-hologram-comment::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:120%;
  height:120%;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.45);
  border:1.5px solid rgba(221,214,254,.82);
  background:transparent;
  box-shadow:0 0 24px rgba(196,181,253,.82),0 0 52px rgba(96,165,250,.34);
  opacity:0;
  pointer-events:none;
  animation:spBubbleRingPop .55s ease-out calc(var(--bubble-duration) * .94) forwards;
}

.sp-hologram-comment span{
  position:relative;
  z-index:2;
  display:block;
  max-width:88%;
}

.sp-hologram-comment.is-exiting{opacity:0;transition:opacity .5s ease;}
.sp-hologram-comment.is-popping{opacity:0;}
.sp-hologram-comment.is-popping::after{animation:spBubbleRingPop .85s ease-out forwards;}
.sp-hologram-comment.is-popping .sp-hologram-bubble-pop{animation:spBubbleShard .85s ease-out forwards;}

.sp-hologram-bubble-pop{
  position:absolute;
  left:50%;
  top:50%;
  width:3px;
  height:3px;
  border-radius:50%;
  background:#ede9fe;
  box-shadow:0 0 9px rgba(237,233,254,.95),0 0 20px rgba(139,92,246,.7);
  opacity:0;
  transform:translate(-50%,-50%) rotate(var(--a)) translateY(0);
  animation:spBubbleShard .62s ease-out calc(var(--bubble-duration) * .94) forwards;
}

/* =========================
   Animations
========================= */
@keyframes spHologramFloat{0%,100%{translate:0 0;}50%{translate:0 -8px;}}
@keyframes spBeamDust{from{transform:translateY(0);}to{transform:translateY(-220px);}}
@keyframes spBubbleBeamPulse{0%,100%{opacity:.58;filter:blur(8px);}45%{opacity:.90;filter:blur(5px);}}

@keyframes spBubbleFloatUp{
  0%{opacity:.78;transform:translate(-50%,22px) translateX(0) scale(.34);}
  8%{opacity:.95;transform:translate(-50%,calc(var(--rise-y)*.08)) translateX(calc(var(--sway-a)*.18)) scale(.46);}
  50%{opacity:1;transform:translate(-50%,calc(var(--rise-y)*.52)) translateX(var(--sway-a)) scale(.86);}
  95%{opacity:.98;transform:translate(-50%,calc(var(--rise-y)*.96)) translateX(var(--sway-b)) scale(var(--pop-scale));}
  100%{opacity:0;transform:translate(-50%,var(--rise-y)) translateX(var(--sway-c)) scale(1.58);}
}

@keyframes spBubbleRingPop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.45);}
  38%{opacity:.92;transform:translate(-50%,-50%) scale(.92);}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.52);}
}

@keyframes spBubbleShard{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--a)) translateY(0) scale(.8);}
  22%{opacity:1;}
  100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--a)) translateY(var(--d)) scale(.16);}
}

/* =========================
   Responsive
========================= */
@media(max-width:760px){
  .sp-hologram-player{bottom:8px;}
  .sp-hologram-info{max-width:calc(100vw - 56px);padding:8px 14px;}
  .sp-hologram-info h3{font-size:17px;}
  .sp-hologram-stage{height:230px;padding-top:24px;}
  .sp-hologram-projector{width:96vw;height:170px;bottom:-34px;}
  .sp-hologram-keyboard{gap:5px;padding:14px;transform:rotateX(48deg) translateY(-34px) scale(.78);}
  .sp-hologram-row{gap:5px;}
  .sp-hologram-key{width:calc(30px * var(--w));height:30px;border-radius:8px;font-size:9px;}
  .sp-hologram-status{max-width:calc(100vw - 30px);margin-top:-22px;white-space:normal;}

  .sp-hologram-stars{bottom:-6px;height:225px;width:90vw;}
  .sp-hologram-stars::before{height:205px;width:176px;}
  .sp-hologram-comment{--bubble-size:68px;padding:9px;font-size:9.4px;line-height:1.08;backdrop-filter:blur(3.5px);-webkit-backdrop-filter:blur(3.5px);}
  .sp-hologram-bubble-pop{width:2.5px;height:2.5px;}
}

@media(max-width:430px){
  .sp-hologram-stage{height:205px;}
  .sp-hologram-keyboard{transform:rotateX(48deg) translateY(-100px) scale(.66);}
  .sp-hologram-status span{display:block;margin-top:3px;}
  .sp-hologram-key{width:calc(28px * var(--w));height:28px;border-radius:6px;font-size:8px;}

  .sp-hologram-stars{bottom:-2px;height:202px;width:84vw;}
  .sp-hologram-stars::before{height:180px;width:142px;}
  .sp-hologram-comment{--bubble-size:56px;padding:7px;font-size:7.8px;line-height:1.05;}
  .sp-hologram-bubble-pop{width:2px;height:2px;}
}
.sp-hologram-stars .sp-hologram-microbubble{
  --sway-a:8px;
  --sway-b:-8px;
  --sway-c:0px;
  --my:-80px;
  --ms:4px;
  --micro-duration:3.9s;
  position:absolute;
  left:50%;
  bottom:10px;
  z-index:2;
  width:var(--ms);
  height:var(--ms);
  border-radius:50%;
  border:1px solid rgba(255,255,255,.54);
  background:radial-gradient(circle at 32% 25%,rgba(255,255,255,.9),rgba(196,181,253,.36) 34%,rgba(96,165,250,.16) 70%,transparent);
  box-shadow:0 0 10px rgba(196,181,253,.62),0 0 22px rgba(96,165,250,.26);
  opacity:0;
  transform:translate(-50%,0) scale(.32);
  animation:spMicroBubbleFloatUp var(--micro-duration) linear forwards;
}

@keyframes spMicroBubbleFloatUp{
  0%{
    opacity:0;
    transform:translate(-50%,10px) translateX(0) scale(.28);
  }
  10%{
    opacity:.88;
    transform:translate(-50%,calc(var(--my)*.10)) translateX(calc(var(--sway-a)*.35)) scale(.46);
  }
  32%{
    opacity:.95;
    transform:translate(-50%,calc(var(--my)*.34)) translateX(var(--sway-b)) scale(.78);
  }
  62%{
    opacity:.9;
    transform:translate(-50%,calc(var(--my)*.66)) translateX(var(--sway-a)) scale(1.02);
  }
  88%{
    opacity:.78;
    transform:translate(-50%,calc(var(--my)*.92)) translateX(var(--sway-c)) scale(1.22);
  }
  100%{
    opacity:0;
    transform:translate(-50%,var(--my)) translateX(calc(var(--sway-b)*.45)) scale(1.38);
  }
}