/* ══════════════════════════════════════════
BOTÓN FLOTANTE KC — CONTROL DE MÚSICA
Khal Calloway Studio · Estilos v2
Copiar al final de tu archivo CSS
Requiere variables: --ft, --terra, --terra-l,
--olivo, --olivo-l, --crema, --ease-bounce
Requiere keyframe rotate-ring (incluido abajo)
MODOS DE ANILLO:
─ Boda / Lujo: añadir clase kc-ring--boda al .kc-ring
─ Infantil / Fun: añadir clase kc-ring--infantil al .kc-ring
Color del dot orbital — personaliza por temática:
--kc-ring-dot: rgba(151,168,108,.9) ← Boho Silvestre (verde olivo)
--kc-ring-dot: rgba(212,175,55,.9) ← Noir / Black or White (dorado)
--kc-ring-dot: rgba(255,183,77,.9) ← Rococó Glam (champagne)
--kc-ring-dot: rgba(255,105,180,.9) ← Kpop (rosa)
(Definir en :root de tu plantilla o inline en el HTML)
══════════════════════════════════════════ */
/* Keyframe base — añádelo a tu plantilla si no lo tienes */
@keyframes rotate-ring { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
/* ── CONTENEDOR FLOTANTE ── */
.kc-float {
position:fixed; bottom:clamp(18px,3vh,30px); right:clamp(18px,3vw,28px);
z-index:9000; width:44px; height:44px;
display:flex; align-items:center; justify-content:center;
cursor:pointer; border:none; background:none; padding:0;
outline:none; -webkit-tap-highlight-color:transparent;
opacity:0; transform:translateY(20px);
transition: opacity .6s ease, transform .6s var(--ease-bounce, cubic-bezier(.34,1.56,.64,1));
}
.kc-float.visible { opacity:1; transform:translateY(0); }
/* El anillo orbita: su caja rotada (diagonal 84.8px) desborda el viewport en
pantallas angostas. Recorte con margen: contiene la caja, conserva anillo y dot. */
@supports (overflow-clip-margin: 1px) {
.kc-float { overflow:clip; overflow-clip-margin:12px; }
}
/* ── FONDO DE CRISTAL ── */
.kc-float-bg {
position:absolute; inset:0; border-radius:50%;
background:rgba(13,2,5,.92);
border:1px solid rgba(212,175,55,.25);
backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
transition: border-color .4s ease, box-shadow .4s ease, background .4s ease, transform .15s ease;
}
.kc-float:hover .kc-float-bg {
border-color:rgba(232,204,112,.55);
box-shadow:0 4px 20px rgba(0,0,0,.4), 0 0 20px rgba(168,18,40,.16);
background:rgba(13,2,5,.96);
}
/* ── GLOW — VIVO CUANDO SUENA MÚSICA ── */
.kc-float-glow {
position:absolute; inset:-10px; border-radius:50%; pointer-events:none;
background:radial-gradient(circle,rgba(194,113,79,.15) 0%, transparent 70%);
transition: opacity .8s ease;
animation: kcBreath 3s ease-in-out infinite alternate;
}
.kc-float.paused .kc-float-glow { opacity:.15; animation-play-state:paused; }
@keyframes kcBreath {
0% { opacity:.4; transform:scale(.9); }
100% { opacity:.8; transform:scale(1.15); }
}
/* ════════════════════════════════════════
ANILLO ROTATORIO — DOS MODOS
════════════════════════════════════════
Uso en HTML:
Boda:
Infantil:
*/
.kc-ring {
position:absolute; border-radius:50%;
transition: border-color .4s ease, box-shadow .4s ease;
}
/* ── MODO BODA / LUJO — anillo orbital con dot brillante ── */
.kc-ring--boda {
inset:-8px;
border:1.5px dashed rgba(212,175,55,.48);
animation: rotate-ring 20s linear infinite;
box-shadow:0 0 8px rgba(212,175,55,.12);
}
/* Dot orbital — color controlado por --kc-ring-dot */
.kc-ring--boda::before {
content:'';
position:absolute; top:-3px; left:50%; transform:translateX(-50%);
width:5px; height:5px; border-radius:50%;
background:var(--kc-ring-dot, #c8102e);
box-shadow:
0 0 8px 3px var(--kc-ring-dot, #c8102e),
0 0 0 1px rgba(232,204,112,.45),
0 0 14px 4px rgba(232,204,112,.36);
}
.kc-float.paused .kc-ring--boda {
animation-play-state:paused;
border-color:rgba(212,175,55,.16);
box-shadow:none;
}
.kc-float.paused .kc-ring--boda::before {
box-shadow: none;
opacity:.2;
}
.kc-float:hover .kc-ring--boda {
border-color:rgba(232,204,112,.8);
box-shadow:0 0 14px rgba(212,175,55,.22);
}
/* ── MODO INFANTIL / FUN — versión simple, sin dot ── */
.kc-ring--infantil {
inset:-6px;
border:1px dashed rgba(212,175,55,.25);
animation: rotate-ring 25s linear infinite;
}
.kc-float.paused .kc-ring--infantil {
animation-play-state:paused;
border-color:rgba(212,175,55,.08);
}
.kc-float:hover .kc-ring--infantil {
border-color:rgba(212,175,55,.45);
}
/* ── LETRAS KC ── */
.kc-letter {
position:relative; z-index:2;
font-family:var(--ft); font-size:.85em; font-style:italic;
color:var(--terra); letter-spacing:1px;
transition: color .3s ease, text-shadow .3s ease, transform .3s var(--ease-bounce, cubic-bezier(.34,1.56,.64,1));
text-shadow: 0 0 10px rgba(194,113,79,.2);
line-height:1;
}
.kc-float:hover .kc-letter {
color:var(--crema);
text-shadow: 0 0 15px rgba(194,113,79,.4);
transform:scale(1.08);
}
.kc-float.paused .kc-letter { color:rgba(194,113,79,.4); text-shadow:none; }
/* ── BARRAS DE MÚSICA (ecualizador mini) — v2 más visibles ── */
.kc-bars {
position:absolute; bottom:5px; left:50%; transform:translateX(-50%);
display:flex; gap:1.5px; z-index:3;
}
.kc-bar {
width:3px; border-radius:2px;
background:linear-gradient(to top, var(--terra, #a81228), var(--olivo-l, #d4af37));
animation:kcBar var(--d,.4s) ease-in-out infinite alternate;
transition:opacity .3s ease;
box-shadow:0 0 4px rgba(194,113,79,.4);
}
.kc-bar:nth-child(1) { height:6px; --d:.35s; }
.kc-bar:nth-child(2) { height:9px; --d:.25s; animation-delay:.1s; }
.kc-bar:nth-child(3) { height:5px; --d:.4s; animation-delay:.2s; }
@keyframes kcBar {
0% { height:3px; opacity:.55; }
100% { opacity:1; box-shadow:0 0 7px rgba(194,113,79,.7); }
}
.kc-float.paused .kc-bar { animation-play-state:paused; opacity:.2; height:3px !important; }
/* ── FEEDBACK DE PRESIÓN ── */
.kc-float:active .kc-float-bg { transform:scale(.92); }
.kc-float:active .kc-letter { transform:scale(.9); }