/*
 * Decoración de las superficies de marca (js/components/brand-decor.js): una cinta curva abajo.
 * SVG inline, detrás del contenido, sin eventos. Variantes: login y detalle de un test (opacidad
 * completa), home y participante (más tenue).
 * La cinta ocupa la franja --decor-ribbon-zone al pie de la superficie; cada vista reserva esa
 * misma franja al final de su contenido, así la cinta nunca lo tapa.
 */
.brand-decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: clip;
  pointer-events: none;
}

.brand-decor svg {
  position: absolute;
  max-width: none;
  overflow: visible;
}

.brand-decor__ribbon {
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--decor-ribbon-zone);
  opacity: var(--decor-ribbon-opacity);
}

.brand-decor path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brand-decor__line--ribbon { stroke-width: 18; }
.brand-decor__glow--ribbon { stroke-width: 32; opacity: 0.3; }
.brand-decor__glow--ribbon-wide { stroke-width: 64; opacity: 0.1; }

.brand-decor__line--thin { stroke-width: 4; }
.brand-decor__glow--thin { stroke-width: 12; opacity: 0.22; }

/* Paradas de degradado de marca: valen para cualquier SVG de la superficie (decoración y aros). */
.brand-surface .stop--magenta,
.brand-tokens .stop--magenta { stop-color: var(--brand-magenta); }
.brand-surface .stop--violet,
.brand-tokens .stop--violet { stop-color: var(--brand-violet); }
.brand-surface .stop--blue,
.brand-tokens .stop--blue { stop-color: var(--brand-blue); }
.brand-surface .stop--sky,
.brand-tokens .stop--sky { stop-color: var(--brand-sky); }
.brand-surface .stop--fade,
.brand-tokens .stop--fade { stop-opacity: 0; }

/* Inicio del facilitador y pantallas del participante: cinta más tenue, para no competir con el
 * contenido. La opacidad (tokens por tema) va en el contenedor, que no se anima. */
.brand-decor--home .brand-decor__ribbon,
.brand-decor--participant .brand-decor__ribbon {
  opacity: var(--decor-ribbon-opacity-home);
}