/* Breen logo animation (AI-generated)
   Loops between the two logo visualizations:
   the single B mark (centered) and the full BREEN wordmark (centered).

   How the reveal works:
   - The R-E-E-N letters live in a group that carries the exact same
     slide animation as the B, so the group's local space always matches
     the B's position.
   - The group is clipped by a static rect starting at x=121.5 (the B's
     right edge in local coordinates), so letters are only ever visible
     to the right of the B — they slide out of it, never overlap it.

   Offsets are in SVG user units (viewBox 0 0 638.02 174.58):
   - B alone centered = translateX(258px)
   - letter local offsets park each letter exactly behind the B */

.breen-logo-anim svg {
	height: auto;
	display: block;
}

/* Case study page (breen.html) */
.block3.breen-logo-anim {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fbfbfb;
	padding: 100px 0;
}

.block3.breen-logo-anim svg {
	width: 50%;
}

/* Index grid tile — 660×660 square, logo ~350px wide */
.breen-logo-preview {
	width: 100%;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fbfbfb;
}

.breen-logo-preview svg {
	width: 53.03%;
	max-width: 350px;
}

.breen-logo-anim .breen-anim-b,
.breen-logo-anim .breen-anim-letters,
.breen-logo-anim .breen-anim-r,
.breen-logo-anim .breen-anim-e1,
.breen-logo-anim .breen-anim-e2,
.breen-logo-anim .breen-anim-n {
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
	will-change: transform;
}

/* B and the letter group share one animation so the clip edge
   always sits exactly on the B's right edge */
.breen-logo-anim .breen-anim-b,
.breen-logo-anim .breen-anim-letters { animation-name: breen-slide; }
.breen-logo-anim .breen-anim-r { animation-name: breen-r; }
.breen-logo-anim .breen-anim-e1 { animation-name: breen-e1; }
.breen-logo-anim .breen-anim-e2 { animation-name: breen-e2; }
.breen-logo-anim .breen-anim-n { animation-name: breen-n; }

/* 4s loop: 1s B hold → 0.5s slide out → 1s BREEN hold → 0.5s slide in → 1s B hold */
@keyframes breen-slide {
	0%, 25% { transform: translateX(258px); }
	37.5%, 62.5% { transform: translateX(0); }
	75%, 100% { transform: translateX(258px); }
}

/* Letters: parked behind the B -> natural position -> back behind the B.
   Staggered starts (R first out, N last; mirrored on the way back). */
@keyframes breen-r {
	0%, 25% { transform: translateX(-147px); }
	37.5%, 62.5% { transform: translateX(0); }
	75%, 100% { transform: translateX(-147px); }
}

@keyframes breen-e1 {
	0%, 27% { transform: translateX(-280.4px); }
	37.5%, 62.5% { transform: translateX(0); }
	73%, 100% { transform: translateX(-280.4px); }
}

@keyframes breen-e2 {
	0%, 29% { transform: translateX(-398.6px); }
	37.5%, 62.5% { transform: translateX(0); }
	71%, 100% { transform: translateX(-398.6px); }
}

@keyframes breen-n {
	0%, 31% { transform: translateX(-518px); }
	37.5%, 62.5% { transform: translateX(0); }
	69%, 100% { transform: translateX(-518px); }
}

/* Static full wordmark for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
	.breen-logo-anim .breen-anim-b,
	.breen-logo-anim .breen-anim-letters,
	.breen-logo-anim .breen-anim-r,
	.breen-logo-anim .breen-anim-e1,
	.breen-logo-anim .breen-anim-e2,
	.breen-logo-anim .breen-anim-n {
		animation: none;
		transform: none;
	}
}