/* Black Friday decoration (inc/black-friday.php). Loaded only while it is on. */

/* Tapes: Fatma's "I ♥ BF" tape, repeating; --tw is one repeat at that height
   (the tile is 771 x 80, so width = height x 9.6375). Slow on purpose. */
@keyframes cbBfL { to { background-position-x: calc(-1 * var(--tw)); } }
@keyframes cbBfR { to { background-position-x: var(--tw); } }
.cb-bf-tape {
	--tw: 269.85px;
	height: 28px;
	background-repeat: repeat-x;
	background-size: auto 28px;
	animation: cbBfL 14s linear infinite;
}
.cb-bf-tape--black { background-image: var(--cb-bf-tape-black); background-color: #000; }
.cb-bf-tape--red { background-image: var(--cb-bf-tape-red); background-color: #D72A3E; }
.cb-bf-tape--rev { animation-name: cbBfR; }
.cb-bf-top { position: relative; z-index: 5; }

/* The wide banner (homepage). */
.cb-bf-hero {
	position: relative;
	overflow: hidden;
	background: #0b0b0b;
	height: 330px;
	margin: 0 0 28px;
}
.cb-bf-hero .cb-bf-tape {
	--tw: 308.4px;
	position: absolute;
	left: -15%;
	width: 130%;
	height: 32px;
	background-size: auto 32px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .45);
}
.cb-bf-hero__t1 { top: 22px; transform: rotate(-3deg); }
.cb-bf-hero__t2 { bottom: 22px; transform: rotate(2.5deg); }
.cb-bf-hero__copy {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #fff;
}
body.colors-theme .cb-bf-hero__title {
	margin: 0;
	color: #fff;
	font: 400 118px/.9 Brunson, Impact, sans-serif;
	letter-spacing: .01em;
	text-transform: uppercase;
}
.cb-bf-hero__line {
	margin: 12px 0 18px;
	font: 700 17px var(--cb-font);
	letter-spacing: .22em;
	text-transform: uppercase;
}
body.colors-theme .cb-bf-hero__btn {
	background: #D72A3E;
	color: #fff;
	font: 700 15px var(--cb-font);
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 13px 32px;
	text-decoration: none;
}
body.colors-theme .cb-bf-hero__btn:hover { background: #b81f31; color: #fff; }
.cb-bf-hero__sticker {
	position: absolute;
	right: 7%;
	top: 120px;
	z-index: 3;
	width: 150px;
	height: auto;
	animation: cbBfBob 3.2s ease-in-out infinite;
	filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .5));
}
@keyframes cbBfBob { 0%, 100% { transform: rotate(8deg) translateY(0); } 50% { transform: rotate(5deg) translateY(-6px); } }

/* Fatma's banners, her 4:5 shape. The three top cards take the same shape,
   and each shows her banner and its usual picture in turn: 5 s each, with a
   soft fade (the three start a moment apart). */
body.colors-theme.cb-bf-on .cb-hero .cb-promo { position: relative; overflow: hidden; aspect-ratio: 4 / 5; }
.cb-bf-over {
	position: absolute;
	inset: 0;
	z-index: 6;
	display: block;
	background: #000;
	animation: cbBfSwap 12s ease-in-out infinite;
}
/* With a weekly focus banner: three pictures in turn, 5 s each (15 s). */
.cb-bf-over--3a { animation-name: cbBf3a; animation-duration: 15s; }
.cb-bf-over--3b { animation-name: cbBf3b; animation-duration: 15s; }
@keyframes cbBf3a {
	0%, 28% { opacity: 1; visibility: visible; }
	33%, 95% { opacity: 0; visibility: hidden; }
	100% { opacity: 1; visibility: visible; }
}
@keyframes cbBf3b {
	0%, 28% { opacity: 0; visibility: hidden; }
	33%, 61% { opacity: 1; visibility: visible; }
	66%, 100% { opacity: 0; visibility: hidden; }
}
@keyframes cbBfSwap {
	0%, 42% { opacity: 1; visibility: visible; }
	50%, 92% { opacity: 0; visibility: hidden; }
	100% { opacity: 1; visibility: visible; }
}
.cb-bf-card__img,
.cb-bf-card__bottles {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.cb-bf-card__bottles { z-index: 2; pointer-events: none; } /* above the strip: it runs behind the bottles */
.cb-bf-strip {
	position: absolute;
	left: -10%;
	width: 120%;
	min-height: 18px;
	z-index: 1;
	display: flex;
	align-items: center;
	overflow: hidden;
	translate: 0 -50%;
	transform: rotate(var(--a));
	box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
	container-type: size;
}
.cb-bf-strip__track {
	display: flex;
	white-space: nowrap;
	animation: cbBfStrip 25s linear infinite;
	will-change: transform;
}
.cb-bf-strip__track--rev { animation-direction: reverse; }
.cb-bf-strip__track span {
	font: 400 90cqh/1 Brunson, Impact, sans-serif;
	letter-spacing: .02em;
	padding: 0 .4em;
	text-transform: uppercase;
}
@keyframes cbBfStrip { to { transform: translateX(-50%); } }

/* The sticker on products on sale. */
.cb-card__media { position: relative; }
body.colors-theme .cb-card__media img.cb-bf-sticker {
	position: absolute;
	inset: auto -6px 10px auto;
	z-index: 3;
	width: 58px;
	height: auto;
	max-width: none;
	object-fit: contain;
	transform: rotate(-9deg);
	pointer-events: none;
	filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .25));
}

/* Tilted tapes between homepage sections. */
.cb-bf-on .cb-home > section[aria-labelledby="cb-offers"]::before,
.cb-bf-on .cb-home > section[aria-labelledby="cb-brands"]::before {
	content: "";
	display: block;
	--tw: 269.85px;
	height: 28px;
	margin: 0 -4% 26px;
	background: var(--cb-bf-tape-red) repeat-x #D72A3E;
	background-size: auto 28px;
	transform: rotate(-1.2deg);
	box-shadow: 0 3px 8px rgba(0, 0, 0, .16);
	animation: cbBfR 14s linear infinite;
}
.cb-bf-on .cb-home > section[aria-labelledby="cb-brands"]::before {
	background-image: var(--cb-bf-tape-black);
	background-color: #000;
	animation-name: cbBfL;
}

@media (max-width: 760px) {
	.cb-bf-tape { --tw: 212.03px; height: 22px; background-size: auto 22px; }
	.cb-bf-hero { height: 280px; }
	.cb-bf-hero .cb-bf-tape { --tw: 231.3px; height: 24px; background-size: auto 24px; }
	body.colors-theme .cb-bf-hero__title { font-size: 64px; }
	.cb-bf-hero__line { font-size: 12px; letter-spacing: .1em; padding: 0 16px; }
	.cb-bf-hero__sticker { width: 84px; right: 5%; top: auto; bottom: 40px; }
	body.colors-theme .cb-card__media img.cb-bf-sticker { width: 44px; }
	.cb-bf-on .cb-home > section[aria-labelledby="cb-offers"]::before,
	.cb-bf-on .cb-home > section[aria-labelledby="cb-brands"]::before { --tw: 212.03px; height: 22px; background-size: auto 22px; }
}

/* Visitors who ask for less motion: everything stands still. */
@media (prefers-reduced-motion: reduce) {
	.cb-bf-tape, .cb-bf-strip__track, .cb-bf-hero__sticker, .cb-bf-over,
	.cb-bf-on .cb-home > section::before { animation: none; }
}

/* The Offers tab in the phone menu: only the "I ♥ BF" sticker, bigger and
   flashing, on every page while Black Friday is on (owner, 4 Nov 2026). */
body.colors-theme .cb-tabbar img.cb-tab__bf {
	display: block;
	width: auto;
	height: 32px;
	max-width: 100%;
	object-fit: contain;
	animation: cbBfFlash 1.6s ease-in-out infinite;
}
@keyframes cbBfFlash {
	0%, 100% { transform: scale(1) rotate(-4deg); filter: brightness(1); }
	50% { transform: scale(1.12) rotate(-4deg); filter: brightness(1.35) drop-shadow(0 0 6px rgba(215, 42, 62, .8)); }
}
@media (prefers-reduced-motion: reduce) {
	body.colors-theme .cb-tabbar img.cb-tab__bf { animation: none; }
}