/**
 * Footer (Elementor footer template 60).
 *
 * Loaded on every front-end request, including the Elementor preview, so the
 * footer looks the same while editing it.
 */

/* Wordmark ([tgbp_footer_wordmark]): "THE GREEK BEER PROJECT" with the crow
   and the bottle. The text is 1482px wide at a 300px font size, so 291.5px
   keeps it at most 1440px wide. Below ~1400px it scales with the footer and
   stays slightly wider than it (like the 1440 design), so a little is cut off
   on both sides. Positions are in em, so everything scales together.
   (Sized in vw, not container units: Elementor wraps containers on mobile,
   and a wrapping column measures its items at zero width first.) */
.tgbp-wordmark {
	display: flex;
	justify-content: center;
	overflow-x: clip;
	user-select: none; /* Clicking around the bottle and the crow shouldn't select the letters. */
	-webkit-tap-highlight-color: transparent; /* No grey flash when tapping them on phones. */
	padding-top: var(--tgbp-room, 0px);
	font-size: var(--tgbp-wm, min(291.5px, 20.8333vw));
}

.tgbp-footer {
	--tgbp-wm: min(291.5px, 20.8333vw); /* Wordmark font size. */
	--tgbp-room: 0px; /* Space above the wordmark, see below. */
}

/* Clicking the bottle or the crow fills the footer with beer (custom.js).
   Two layers: the beer, behind the footer's content, and the same beer
   again, see-through, in front of the wordmark and behind the rest of the
   footer (custom.js puts it right after the wordmark): below the surface,
   the letters and the bottle look submerged. Each is the liquid (custom.js
   sets its top, where the beer stops, and slides it up from below the
   footer) with a strip of waves on top that slides sideways. Drawn once and
   only moved, so the GPU animates it. Sizes in em of the wordmark. */
.tgbp-footer.e-con {
	position: relative;
	isolation: isolate;
}

.tgbp-beer {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
	font-size: var(--tgbp-wm);
}

.tgbp-beer--front {
	z-index: auto;
	opacity: 0.4;
}

/* Not drawn at all while there's no beer. */
.tgbp-footer:not(.tgbp-beer-on) .tgbp-beer {
	visibility: hidden;
}

.tgbp-beer__liquid {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(#ffda6b, #f3b33d);
}

/* The waves' strip: 0.012em up and down around the surface (the top of the
   liquid) and filled down past it. Higher while pouring: custom.js scales it
   around the surface. */
.tgbp-beer__chop {
	position: absolute;
	top: -0.012em;
	left: 0;
	height: 0.054em;
	transform-origin: 0 0.012em;
}

/* custom.js draws enough 2.7em periods of waves to cover the footer while
   they slide one period along. Only while there's beer and it's on screen. */
.tgbp-beer__waves {
	display: block;
	height: 100%;
	overflow: visible;
	animation: tgbp-beer-waves 12s linear infinite paused;
}

.tgbp-footer.tgbp-beer-on:not(.is-off-screen) .tgbp-beer__waves {
	animation-play-state: running;
}

@keyframes tgbp-beer-waves {
	from {
		transform: translateX(-2.7em);
	}

	to {
		transform: none;
	}
}

/* Desktop: room above for the crow when it sits on the bottle cap
   (custom.js). It then reaches 0.4em above the wordmark, partly covered by
   the footer's 48px top margin (set in Elementor). The crow and the bottle
   toggle the beer when clicked (tapped on phones, no cursor there). */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.tgbp-footer {
		--tgbp-room: max(0px, 0.4 * var(--tgbp-wm) - 48px);
	}

	.tgbp-wordmark .tgbp-crow,
	.tgbp-wordmark__bottle-img {
		cursor: pointer;
	}
}

/* Bottom row (©, privacy, credits): darker than its grey in Elementor while
   there's beer behind it. */
.tgbp-footer.e-con .elementor-element.elementor-element-92b0d12 .elementor-heading-title,
.tgbp-footer.e-con .elementor-element.elementor-element-ebf8cf4 .elementor-heading-title,
.tgbp-footer.e-con .elementor-element.elementor-element-cbd8d9d .elementor-heading-title {
	transition: color 1s;
}

.tgbp-footer.e-con.tgbp-beer-on .elementor-element.elementor-element-92b0d12 .elementor-heading-title,
.tgbp-footer.e-con.tgbp-beer-on .elementor-element.elementor-element-ebf8cf4 .elementor-heading-title,
.tgbp-footer.e-con.tgbp-beer-on .elementor-element.elementor-element-cbd8d9d .elementor-heading-title {
	color: rgba(0, 0, 0, 0.7);
}

.tgbp-wordmark__inner {
	position: relative;
	flex: none;
	isolation: isolate;
	padding-top: 0.4845em;
	font-family: 'Sofia Sans Extra Condensed', sans-serif;
	font-weight: 700;
	line-height: 0.8;
	color: #000;
	text-transform: uppercase;
}

/* Two classes, so the kit's ".elementor-kit-6 p" margin doesn't apply. */
.tgbp-wordmark .tgbp-wordmark__text {
	margin: 0;
	text-align: center;
	white-space: nowrap;
}

/* "BEER PROJECT" sits in front of the bottle, "THE GREEK" behind it. */
.tgbp-wordmark__front {
	position: relative;
	z-index: 2;
}

/* The bottle. It stands still, and floats only in beer (custom.js). Wrapper:
   parallax (translate), and rocking when the crow lands on it or jumps off it
   (transform). Inner span: a gentle sway (rotate) and bob (translate). Both
   turn around a point a bit below the bottle's middle. The perch is the top
   of the cap: the crow is moved in there when it lands on the bottle, so it
   rides every movement. */
.tgbp-wordmark__bottle {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 2.8467em;
	width: 0.8167em;
	transform-origin: 50% 60%;
	pointer-events: none;
}

.tgbp-wordmark__bottle-float {
	position: relative;
	display: block;
	transform-origin: 50% 60%;
}

/* Click area: the bottle's outline, 6px out (the image box around the tilted
   bottle is mostly transparent). */
.tgbp-wordmark__bottle-img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	pointer-events: auto;
	clip-path: polygon(44.6% 7.7%, 48.7% 6.8%, 56.9% 5.9%, 59.3% 6.7%, 87.4% 49.7%, 92.3% 62.2%, 100% 86.6%, 97.7% 90.9%, 92.6% 93.1%, 71.4% 96%, 65.6% 95.5%, 60.9% 93.5%, 58.6% 90.9%, 46.7% 57%, 44.3% 45.4%, 43.5% 9.5%);
}

.tgbp-wordmark__perch {
	position: absolute;
	top: 8.3%;
	left: 51.4%;
}

/* Crow (tgbp_crow()): the drawing without eyes, with the eyes (inline SVG,
   same viewBox) on top. On the G as in the design; custom.js moves it between
   letters (left) and turns the pupils (translate) on desktop. The home page
   search has the same crow (placed in header.css), which doesn't hop. */
.tgbp-wordmark .tgbp-crow {
	position: absolute;
	z-index: 3;
	top: 0.1211em;
	left: 1.34em;
	width: 0.2372em;
	aspect-ratio: 71.17 / 132.59;
	transform-origin: 50% 100%;
	pointer-events: auto; /* Also on the bottle cap, inside the bottle (which ignores the mouse). */
}

.tgbp-crow__body,
.tgbp-crow__thought,
.tgbp-crow__eyes {
	position: absolute;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
}

/* The "?" and the line to it (same drawing size as the crow): hidden, it pops
   out of the crow's head now and then (custom.js adds .is-wondering). Grows
   from where the line meets the head. */
.tgbp-crow__thought {
	pointer-events: none;
	opacity: 0;
	transform: scale(0);
	transform-origin: 42.2% 26.8%;
	transition: transform 0.25s ease-in, opacity 0.2s ease-in 0.05s;
}

.tgbp-crow.is-wondering .tgbp-crow__thought {
	opacity: 1;
	transform: scale(1);
	transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.15s;
}

@media (prefers-reduced-motion: reduce) {
	.tgbp-crow__thought,
	.tgbp-crow.is-wondering .tgbp-crow__thought {
		transition: none;
	}
}

.tgbp-crow__eyes {
	overflow: visible;
	pointer-events: none;
}

/* Blink at 1.5s, double blink at 4s (5s loop): the whites flatten to a thin
   line around the eye centre, the pupils disappear. Each blink takes ~0.2s. */
.tgbp-crow__white,
.tgbp-crow__pupil {
	animation: tgbp-crow-blink 5s infinite;
}

.tgbp-crow__pupil {
	animation-name: tgbp-crow-blink-pupil;
}

/* The pupil's wrapper, turned towards the mouse (custom.js). */
.tgbp-crow__look {
	transition: translate 0.2s ease-out;
}

.tgbp-crow__eye-front {
	transform-origin: 53.69px 41.74px;
}

.tgbp-crow__eye-back {
	transform-origin: 38.9px 44.46px;
}

@keyframes tgbp-crow-blink {
	0%, 30%, 33.6%, 80%, 83.2%, 85.2%, 88.8%, 100% { transform: scaleY(1); }
	31.6%, 81.6%, 86.8% { transform: scaleY(0.1); }
}

@keyframes tgbp-crow-blink-pupil {
	0%, 30%, 33.6%, 80%, 83.2%, 85.2%, 88.8%, 100% { transform: scaleY(1); }
	31.6%, 81.6%, 86.8% { transform: scaleY(0); }
}

/* Paused while the crow is off screen (custom.js): the footer's wordmark or
   the home page's crow itself. */
.tgbp-wordmark.is-off-screen .tgbp-crow__white,
.tgbp-wordmark.is-off-screen .tgbp-crow__pupil,
.tgbp-crow.is-off-screen .tgbp-crow__white,
.tgbp-crow.is-off-screen .tgbp-crow__pupil {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.tgbp-crow__white,
	.tgbp-crow__pupil {
		animation: none;
	}
}

/* Button icons (Elementor sizes them at 1em of the button text). */
.tgbp-footer .elementor-button-icon svg {
	width: 20px;
	height: 20px;
}

.tgbp-footer .tgbp-back-to-top .elementor-button-icon svg {
	width: 24px;
	height: 24px;
}

/* Text links. */
.tgbp-footer a:hover .elementor-icon-list-text,
.tgbp-footer .elementor-heading-title a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}