/**
 * Builder Rotating Logo — Frontend-Styles (v1.1)
 *
 * Zwei Operationsmodi:
 *
 *   A. scope=column (klassisch, v1.0)
 *      .brl-wrap selbst trägt die Anker-Klassen, .brl-logo positioniert
 *      sich darin absolut.
 *
 *   B. scope=row | section (v1.1)
 *      JS hängt das <img> in die nächstgelegene Themify-Row/-Section,
 *      versieht sie mit .brl-host + Anker- + Clip-Klassen und kopiert
 *      die CSS-Variablen. Der Original-Wrap wird per .brl-wrap-migrated
 *      ausgeblendet.
 *
 * Versatz-Logik (gleich für A und B):
 *      transform: translate(--brl-offset-x, --brl-offset-y)        ← User-Versatz
 *                 translate(--brl-anchor-tx, --brl-anchor-ty)      ← Anker-Selbstzentrierung
 *                 rotate(--brl-rotation);                          ← JS-getrieben
 */

/* ── Modus A: Wrap als Bezugsfläche ──────────────────────────────────── */

.brl-wrap {
	--brl-size: 20vw;
	--brl-offset-x: 0%;
	--brl-offset-y: 0%;
	--brl-blend: difference;

	position: relative;
	width: 100%;
	min-height: var(--brl-size);
	pointer-events: none;
}

.brl-wrap.brl-clip {
	overflow: hidden;
}

.brl-wrap.brl-no-clip {
	overflow: visible;
}

/* Wenn der Wrap migriert ist (scope=row|section), kollabiert er auf 0 */
.brl-wrap-migrated {
	display: none !important;
}

/* ── Modus B: Themify-Row/Section als Host ───────────────────────────── */

.brl-host {
	--brl-size: 20vw;
	--brl-offset-x: 0%;
	--brl-offset-y: 0%;
	--brl-blend: difference;

	position: relative;
}

.brl-host.brl-clip {
	overflow: hidden;
}

/* z-index: Host-Inhalt über dem Logo (Logo als Deko-Hintergrund) */
.brl-host.brl-below > .brl-logo {
	z-index: 0;
}

.brl-host.brl-below > *:not(.brl-logo) {
	position: relative;
	z-index: 1;
}

.brl-wrap.brl-below .brl-logo {
	z-index: 0;
}

/* ── Logo selbst (gleich für beide Modi) ─────────────────────────────── */

.brl-logo {
	position: absolute;
	width: var(--brl-size);
	height: auto;
	display: block;
	will-change: transform;
	mix-blend-mode: var(--brl-blend);
	pointer-events: none;

	top: 50%;
	right: 0;

	transform: translate(var(--brl-offset-x), var(--brl-offset-y))
	           translate(var(--brl-anchor-tx, 0), var(--brl-anchor-ty, -50%))
	           rotate(var(--brl-rotation, 0deg));
	transform-origin: center center;
	transition: transform 0.05s linear;
}

.brl-tinted {
	filter: drop-shadow(0 0 0 var(--brl-tint, currentColor));
}

/* ── 9-Punkt-Anchor-Raster ────────────────────────────────────────────
 * Wirkt sowohl auf .brl-wrap (Modus A) als auch auf .brl-host (Modus B).
 */

.brl-anchor-top-left      > .brl-logo,
.brl-anchor-top-left.brl-wrap      .brl-logo { top: 0;    left: 0;    right: auto; bottom: auto; --brl-anchor-tx: 0;     --brl-anchor-ty: 0;     }
.brl-anchor-top-center    > .brl-logo,
.brl-anchor-top-center.brl-wrap    .brl-logo { top: 0;    left: 50%;  right: auto; bottom: auto; --brl-anchor-tx: -50%;  --brl-anchor-ty: 0;     }
.brl-anchor-top-right     > .brl-logo,
.brl-anchor-top-right.brl-wrap     .brl-logo { top: 0;    right: 0;   left: auto;  bottom: auto; --brl-anchor-tx: 0;     --brl-anchor-ty: 0;     }

.brl-anchor-middle-left   > .brl-logo,
.brl-anchor-middle-left.brl-wrap   .brl-logo { top: 50%;  left: 0;    right: auto; bottom: auto; --brl-anchor-tx: 0;     --brl-anchor-ty: -50%;  }
.brl-anchor-middle-center > .brl-logo,
.brl-anchor-middle-center.brl-wrap .brl-logo { top: 50%;  left: 50%;  right: auto; bottom: auto; --brl-anchor-tx: -50%;  --brl-anchor-ty: -50%;  }
.brl-anchor-middle-right  > .brl-logo,
.brl-anchor-middle-right.brl-wrap  .brl-logo { top: 50%;  right: 0;   left: auto;  bottom: auto; --brl-anchor-tx: 0;     --brl-anchor-ty: -50%;  }

.brl-anchor-bottom-left   > .brl-logo,
.brl-anchor-bottom-left.brl-wrap   .brl-logo { bottom: 0; left: 0;    right: auto; top: auto;    --brl-anchor-tx: 0;     --brl-anchor-ty: 0;     }
.brl-anchor-bottom-center > .brl-logo,
.brl-anchor-bottom-center.brl-wrap .brl-logo { bottom: 0; left: 50%;  right: auto; top: auto;    --brl-anchor-tx: -50%;  --brl-anchor-ty: 0;     }
.brl-anchor-bottom-right  > .brl-logo,
.brl-anchor-bottom-right.brl-wrap  .brl-logo { bottom: 0; right: 0;   left: auto;  top: auto;    --brl-anchor-tx: 0;     --brl-anchor-ty: 0;     }

/* Empty-State */
.brl-empty {
	display: block;
	padding: 1em;
	color: #888;
	font-style: italic;
	text-align: center;
}

/* Reduced Motion: Rotation deaktivieren */
@media (prefers-reduced-motion: reduce) {
	.brl-logo {
		transition: none;
		--brl-rotation: 0deg !important;
	}
}