/* ---------- SIDE LAYOUT ---------- */
html,body{margin:0;height:100%}
body{
  display:flex;align-items:center;justify-content:center;
  background:#f9d9e5;
  transition:background .4s ease;
  font-family:"Rubik",system-ui,sans-serif;
  overflow:hidden;                     
}

/* ---------- BAGGRUNDSIKONER ---------- */
#bgIcons{position:fixed;inset:0;pointer-events:none;z-index:0}
.bgIcon{
  position:absolute;width:120px;
  opacity:0;
  transition:opacity .75s ease, transform .75s ease;
}

/* ---------- CYKLUS + LOTTIE ---------- */
#cycle-wrapper{position:relative;width:650px;height:650px}
#lottie{
  position:absolute;width:300px;height:300px;
  top:50%;left:50%;transform:translate(-50%,-50%);
  pointer-events:none;z-index:1;
}

/* ---------- RING / KVADRANTER ---------- */
.phase{stroke:transparent;stroke-width:40;fill:none;stroke-linecap:butt}
.phaseImg{opacity:.45;transition:opacity .25s,filter .25s}
.phaseImg.active{opacity:1;filter:brightness(.8)}

/* ---------- CIRKEL HÅNDTAG ---------- */
#handleCircle{fill:#7f1524;cursor:pointer;touch-action:none;transition:transform .2s ease}
#handleText{fill:#a36a73;font-weight:100;font-size:11px;user-select:none;pointer-events:none;display:none; font-family: 'Super Funky', cursive;}