/* Task Completion Effects — bärande stilar.
   Animationerna körs via Web Animations API i JS. Här sätts bara utgångs­-
   läget: transparent lager över radens position, och partiklar/ringar/blixt
   färgade av de CSS-variabler biblioteket sätter per körning. */

.tcfx-layer{
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:100;
  overflow:visible;
  contain:layout style;
  will-change:opacity;

  /* Sätts av biblioteket, fallback här */
  --tcfx-gold:      #FFC72C;
  --tcfx-orange:    #FF9818;
  --tcfx-pale-gold: #FFE6A0;
  --tcfx-green:     #31C46B;
  --tcfx-light:     #FFF7DC;
  --tcfx-dark:      #0B0A09;
}

.tcfx-clone{
  position:absolute; inset:0;
  pointer-events:none;
  will-change:transform, opacity, filter;
}

/* Partiklar — små runda ljuspunkter. Färg och storlek sätts inline av
   biblioteket, formen bestäms här. */
.tcfx-particle{
  position:absolute;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--tcfx-gold);
  box-shadow:0 0 12px currentColor;
  will-change:transform, opacity;
  transform:translate(-50%, -50%);
}

/* Expanderande ring — chockvågen som sveper utåt från kvitteringen. */
.tcfx-ring{
  position:absolute;
  border-radius:50%;
  border:2px solid var(--tcfx-gold);
  transform:translate(-50%, -50%);
  pointer-events:none;
  will-change:transform, opacity;
}

/* Snabb ljusblixt i mitten av effekten. */
.tcfx-flash{
  position:absolute;
  width:220px; height:220px;
  border-radius:50%;
  background:radial-gradient(circle,
    var(--tcfx-light) 0%,
    var(--tcfx-pale-gold) 30%,
    transparent 70%);
  transform:translate(-50%, -50%);
  pointer-events:none;
  will-change:transform, opacity;
  mix-blend-mode:screen;
}

/* Kärnan i supernovan — den heta punkten i mitten. */
.tcfx-core{
  position:absolute;
  width:40px; height:40px;
  border-radius:50%;
  background:radial-gradient(circle,
    var(--tcfx-light) 0%,
    var(--tcfx-gold) 40%,
    var(--tcfx-orange) 80%);
  transform:translate(-50%, -50%);
  pointer-events:none;
  box-shadow:0 0 40px var(--tcfx-gold);
  will-change:transform, opacity;
}

/* Portal — det svarta hålets slukvirvel. */
.tcfx-portal{
  position:absolute;
  border-radius:50%;
  background:radial-gradient(circle,
    var(--tcfx-dark) 30%,
    var(--tcfx-orange) 70%,
    transparent 100%);
  transform:translate(-50%, -50%);
  pointer-events:none;
  will-change:transform, opacity;
}

/* Solstrålar från hypernovan — långa, smala ljusstrimmor. */
.tcfx-ray{
  position:absolute;
  width:3px;
  background:linear-gradient(to bottom,
    var(--tcfx-light) 0%,
    var(--tcfx-gold) 50%,
    transparent 100%);
  transform-origin:center top;
  transform:translate(-50%, 0);
  pointer-events:none;
  will-change:transform, opacity;
  box-shadow:0 0 8px var(--tcfx-gold);
}

/* Systemets prefers-reduced-motion respekteras av JS-biblioteket självt:
   effekten hoppar då över hela sekvensen och kör onComplete direkt. Vi
   behöver därför inte gömma lagret här — och att göra det skulle bryta
   admins förhandsgranskning, där effekten alltid ska visas. */