/**
 * mod_lottery_banner - Lottery banner
 *
 * The design is a fixed 1920px-wide canvas with absolutely positioned art.
 * Every coordinate below is a design pixel; lottery-banner.js scales the whole
 * canvas down (or up, to max_width) so it fits its container at any viewport.
 */

/* -- Rubik (variable, self-hosted) --------------------------------- */

@font-face {
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url('../fonts/rubik-hebrew.woff2') format('woff2');
	unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url('../fonts/rubik-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url('../fonts/rubik-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url('../fonts/rubik-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url('../fonts/rubik-cyrillic-ext.woff2') format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url('../fonts/rubik-arabic.woff2') format('woff2');
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* -- Shell and scaling --------------------------------------------- */

.lbm {
	width: 100%;
}

/* One module, two independent artboards. Which one shows is decided by a
   per-instance media query that the layout emits from the breakpoint
   parameter, and each artwork sits in a <picture> whose <source media>
   matches the same breakpoint. Both decisions are made while the HTML is
   parsed, so the browser fetches only the visible artboard's images - a phone
   pulls 537KB instead of 3.4MB - with no JavaScript in that path at all. The
   markup stays identical for every visitor, which keeps it safe behind
   Joomla's page cache and any CDN. */
.lbm-view {
	display: block;
}

/* The non-matching <source> leaves a 1x1 placeholder behind; the wrapper must
   not add a strut or a layout box around the absolutely positioned image. */
.lbm-canvas picture {
	display: block;
	line-height: 0;
}

.lbm-stage {
	position: relative;
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
}

.lbm-canvas {
	position: absolute;
	top: 0;
	left: 0;
	/* Physical top-left, unaffected by the RTL direction below. */
	transform-origin: 0 0;
	direction: rtl;
	background: #fff;
	font-family: 'Rubik', sans-serif;
	overflow: hidden;
}

/* Scoped reset: the canvas must not inherit template spacing, nor the common
   `img { max-width: 100% }` rule, which would collapse the 1920px artwork. */
.lbm-canvas,
.lbm-canvas * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.lbm-canvas img {
	display: block;
	max-width: none;
	min-width: 0;
	border: 0;
	vertical-align: top;
}

/* Empty block anchor: no strut, no layout box, but still hit-tests its
   absolutely positioned child image. */
.lbm-link {
	display: block;
	line-height: 0;
	text-decoration: none;
}

.lbm-sec {
	position: relative;
	width: 1920px;
	background: #fff;
	overflow: hidden;
}

/* -- Section A: hero ----------------------------------------------- */

.lbm-sec-hero {
	height: 1130px;
}

.lbm-hero-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 1920px;
	height: 972px;
	object-fit: cover;
	object-position: top center;
}

.lbm-hero-rect {
	position: absolute;
	top: -50px;
	left: 50%;
	width: 1700px;
	height: auto;
	transform: translateX(-50%);
}

.lbm-hero-prize {
	position: absolute;
	top: 80px;
	left: 50%;
	width: 560px;
	transform: translateX(-50%);
}

.lbm-hero-prize img {
	width: 100%;
	height: auto;
	filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .5));
}

.lbm-hero-car {
	position: absolute;
	top: 206px;
	left: 1291px;
	width: 519px;
	height: auto;
	filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .4));
	transform-origin: center;
	transition: transform .35s ease;
}

.lbm-hero-car:hover,
.lbm-link:hover .lbm-hero-car,
.lbm-link:focus-visible .lbm-hero-car {
	transform: scale(1.1);
}

/* Kitchen photo inside the pink "new kitchen" circle.
 *
 * The circle lives inside rect.png; its interior is fully opaque (alpha 255,
 * measured) and its caption is baked in, so the photo cannot sit behind it. It
 * has to paint on top of the interior and stop before the caption.
 *
 * mit.png is a 671x747 canvas in which the arch occupies only 508x214 at offset
 * (116, 166) - 16% of the file, the rest transparent. Sizing the file naively
 * therefore scales and offsets the padding, not the arch, which is what left it
 * small and pushed down. So the background is scaled and shifted to place the
 * ARCH, not the canvas: 344/508 = 0.677165, giving a 454.38x505.84 background
 * offset by -78.55/-112.41 so the arch's top-left lands on the disc's.
 *
 * Geometry, measured from rect.png at its design position: the inner disc is
 * centred at (429.5, 664) with radius 172, and the pink caption starts at
 * y 618. The arch's own curvature matches a radius of 174.6 once scaled, i.e.
 * it was cut for this circle. At full disc width it stands 145px tall against a
 * 126px band, so the box clips 21px (14%) off the bottom - the arch's bottom
 * edge is straight anyway, and clipping guarantees it can never reach the
 * caption.
 *
 * Longhand, and explicit pixel sizes rather than percentages: the
 * `position / size` shorthand is a well-known casualty of CSS
 * minifiers/combiners.
 *
 * A pseudo-element, so no layout template has to change. It paints after the
 * section's images, which is exactly the layer required, and it only exists in
 * the desktop artboard - so a phone never requests the file.
 */
.lbm-sec-hero::after {
	content: '';
	position: absolute;
	top: 492px;
	left: 258px;
	width: 344px;
	height: 124px;
	background-image: url('../images/mit.png');
	background-repeat: no-repeat;
	background-position: -78.55px -112.41px;
	background-size: 454.38px 505.84px;
	pointer-events: none;
}

/* -- Scrolling tape strips ----------------------------------------- */

.lbm-tape {
	position: absolute;
	left: -6%;
	width: 112%;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
	direction: ltr;
}

.lbm-tape-top {
	bottom: 118px;
	height: 66px;
	background: #ef4726;
	transform: rotate(-2.4deg);
}

.lbm-tape-bottom {
	bottom: 50px;
	height: 64px;
	background: #fbdc1b;
	transform: rotate(1.6deg);
}

.lbm-tape-track,
.lbm-m-tape-track {
	display: flex;
	align-items: center;
	width: max-content;
	height: 100%;
}

.lbm-tape-group {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	gap: 40px;
	height: 100%;
	padding-right: 40px;
}

.lbm-tape-item {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	gap: 40px;
	color: #111;
	font-weight: 800;
	white-space: nowrap;
	direction: rtl;
}

.lbm-tape-top .lbm-tape-item {
	font-size: 24px;
}

.lbm-tape-top .lbm-tape-sep {
	color: rgba(0, 0, 0, .45);
	font-size: 20px;
}

.lbm-tape-bottom .lbm-tape-item {
	font-size: 22px;
}

.lbm-tape-bottom .lbm-tape-sep {
	color: #ef4726;
	font-size: 18px;
}

/* -- Section B: items row and certificate zone --------------------- */

.lbm-sec-items {
	height: 1400px;
}

.lbm-items-bg {
	position: absolute;
	top: 300px;
	left: 0;
	width: 1920px;
	height: 713px;
	object-fit: cover;
	object-position: top center;
}

.lbm-el4 {
	position: absolute;
	top: 174px;
	left: 262px;
	width: 700px;
	height: auto;
}

.lbm-el1 {
	position: absolute;
	top: 318px;
	left: 324px;
	width: 190px;
	height: auto;
	filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .25));
}

.lbm-e9 {
	position: absolute;
	top: 129px;
	left: 537px;
	width: 158px;
	height: 313px;
	filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .3));
	transition: transform .3s ease;
}

.lbm-e9:hover,
.lbm-link:hover .lbm-e9,
.lbm-link:focus-visible .lbm-e9 {
	transform: scale(1.12);
}

.lbm-el2 {
	position: absolute;
	top: 219px;
	left: 636px;
	width: 201px;
	height: 106px;
	filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .3));
	transition: transform .3s ease;
}

.lbm-el2:hover,
.lbm-link:hover .lbm-el2,
.lbm-link:focus-visible .lbm-el2 {
	transform: translate(10px, 6px) rotate(-2deg);
}

.lbm-logo {
	position: absolute;
	top: 10px;
	right: 60px;
	width: 680px;
}

.lbm-logo img {
	width: 100%;
	height: auto;
}

.lbm-el5 {
	position: absolute;
	top: 555px;
	right: 80px;
	width: 480px;
	height: auto;
}

.lbm-el8 {
	position: absolute;
	top: 730px;
	left: 254px;
	width: 1420px;
	height: auto;
	filter: drop-shadow(0 20px 26px rgba(0, 0, 0, .28));
}

.lbm-el11 {
	position: absolute;
	top: 1101px;
	left: 512px;
	width: 200px;
	height: auto;
	filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .3));
	transform-origin: center;
	transition: transform .35s ease;
}

.lbm-el11:hover,
.lbm-link:hover .lbm-el11,
.lbm-link:focus-visible .lbm-el11 {
	transform: scale(1.1) rotate(-4deg);
}

.lbm-el7 {
	position: absolute;
	top: 801px;
	left: 1153px;
	width: 379px;
	height: auto;
	filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .3));
	transform-origin: center;
	transition: transform .35s ease;
}

.lbm-el7:hover,
.lbm-link:hover .lbm-el7,
.lbm-link:focus-visible .lbm-el7 {
	transform: scale(1.14);
}

/* Only linked artwork should advertise itself as clickable. */
.lbm-link .lbm-hit {
	cursor: pointer;
}

/* -- Animations (opt-in via .lbm-anim on the module root) ---------- */

@keyframes lbm-tape-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@keyframes lbm-sway-x {
	0%, 100% { transform: translateX(-14px) rotate(-1.5deg); }
	50%      { transform: translateX(14px) rotate(1.5deg); }
}

@keyframes lbm-logo-float {
	0%, 100% { transform: translateY(0) scale(1); }
	50%      { transform: translateY(-16px) scale(1.03); }
}

@keyframes lbm-logo-glow {
	0%, 100% { filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35)) drop-shadow(0 0 10px rgba(255, 220, 60, .15)); }
	50%      { filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35)) drop-shadow(0 0 34px rgba(255, 220, 60, .55)); }
}

/* Duration comes from an inline style so the module parameters can drive it. */
.lbm-anim .lbm-tape-track,
.lbm-anim .lbm-m-tape-track {
	animation: lbm-tape-scroll 34s linear infinite;
}

.lbm-anim .lbm-hero-prize img {
	animation: lbm-sway-x 4.2s ease-in-out infinite;
}

.lbm-anim .lbm-el1 {
	animation: lbm-sway-x 3.4s ease-in-out infinite;
}

.lbm-anim .lbm-logo {
	animation: lbm-logo-float 4.5s ease-in-out infinite;
}

.lbm-anim .lbm-logo img {
	animation: lbm-logo-glow 3s ease-in-out infinite;
}

/* Opt-in only (.lbm-rm, set by the "respect reduced motion" parameter).
   Windows reports reduced motion whenever "animation effects" is switched off
   in Accessibility > Visual effects - a setting many people flip purely for
   perceived speed - so honouring it unconditionally silently strips the
   banner's motion on a large share of machines. The source design applies no
   such guard, so the default matches it. */
@media (prefers-reduced-motion: reduce) {
	.lbm-anim.lbm-rm .lbm-tape-track,
	.lbm-anim.lbm-rm .lbm-m-tape-track,
	.lbm-anim.lbm-rm .lbm-hero-prize img,
	.lbm-anim.lbm-rm .lbm-el1,
	.lbm-anim.lbm-rm .lbm-logo,
	.lbm-anim.lbm-rm .lbm-logo img,
	.lbm-anim.lbm-rm .lbm-m-hero,
	.lbm-anim.lbm-rm .lbm-m-logo,
	.lbm-anim.lbm-rm .lbm-m-logo img,
	.lbm-anim.lbm-rm .lbm-m-seal {
		animation: none;
	}

	.lbm-rm .lbm-canvas img {
		transition: none;
	}
}

/* == MOBILE ARTBOARD =================================================
   A separate 400x2245 design, not a reflow of the desktop one: three
   sections, its own artwork, its own motion. Coordinates are mobile-canvas
   pixels and are scaled by the same fitter. */

.lbm-m-sec {
	position: relative;
	width: 400px;
	background: #fff;
	overflow: hidden;
}

/* -- Mobile section 1: hero + tapes -------------------------------- */

.lbm-m-sec-hero {
	height: 1035px;
	background: #050510;
}

.lbm-m-hero {
	position: absolute;
	top: 0;
	left: 0;
	width: 400px;
	height: 991px;
}

.lbm-m-tape {
	position: absolute;
	left: -8%;
	width: 116%;
	overflow: hidden;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .4);
	direction: ltr;
}

.lbm-m-tape-top {
	bottom: 52px;
	height: 36px;
	background: #ef4726;
	transform: rotate(-3.2deg);
}

.lbm-m-tape-bottom {
	bottom: 14px;
	height: 34px;
	background: #fbdc1b;
	transform: rotate(2.2deg);
}

.lbm-m-tape-group {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	gap: 22px;
	height: 100%;
	padding-right: 22px;
}

.lbm-m-tape-item {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	gap: 22px;
	color: #111;
	font-weight: 800;
	white-space: nowrap;
	direction: rtl;
}

.lbm-m-tape-top .lbm-m-tape-item {
	font-size: 13px;
}

.lbm-m-tape-top .lbm-tape-sep {
	color: rgba(0, 0, 0, .45);
	font-size: 11px;
}

.lbm-m-tape-bottom .lbm-m-tape-item {
	font-size: 12px;
}

.lbm-m-tape-bottom .lbm-tape-sep {
	color: #ef4726;
	font-size: 10px;
}

/* -- Mobile section 2: band + logo --------------------------------- */

.lbm-m-sec-mid {
	height: 590px;
}

.lbm-m-band {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 400px;
	height: 360px;
}

.lbm-m-logo {
	position: absolute;
	top: 14px;
	left: 0;
	width: 400px;
}

.lbm-m-logo img {
	width: 400px;
	height: 550px;
}

/* -- Mobile section 3: certificate + seal -------------------------- */

.lbm-m-sec-cert {
	height: 620px;
}

.lbm-m-cert {
	position: absolute;
	top: 0;
	left: 0;
	width: 400px;
	height: 550px;
	transform-origin: center 40%;
	transition: transform .35s ease;
}

.lbm-m-cert:hover,
.lbm-link:hover .lbm-m-cert,
.lbm-link:focus-visible .lbm-m-cert {
	transform: scale(1.03);
}

.lbm-m-seal {
	position: absolute;
	top: 110px;
	left: 296px;
	width: 96px;
	height: auto;
	transform-origin: center;
	transition: transform .35s ease;
}

.lbm-m-seal:hover,
.lbm-link:hover .lbm-m-seal,
.lbm-link:focus-visible .lbm-m-seal {
	transform: scale(1.14) rotate(-5deg);
}

/* -- Mobile motion ------------------------------------------------- */

@keyframes lbm-m-float-y {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-10px); }
}

@keyframes lbm-m-logo-glow {
	0%, 100% { filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .3)); }
	50%      { filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .3)) drop-shadow(0 0 22px rgba(255, 220, 60, .45)); }
}

@keyframes lbm-m-seal-glow {
	0%, 100% { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); }
	50%      { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)) drop-shadow(0 0 18px rgba(255, 205, 60, .65)); }
}

.lbm-anim .lbm-m-hero {
	animation: lbm-m-float-y 5.5s ease-in-out infinite;
}

.lbm-anim .lbm-m-logo {
	animation: lbm-m-float-y 6s ease-in-out infinite;
}

.lbm-anim .lbm-m-logo img {
	animation: lbm-m-logo-glow 3.4s ease-in-out infinite;
}

.lbm-anim .lbm-m-seal {
	animation: lbm-m-seal-glow 3s ease-in-out infinite;
}

/* -- Optional small-screen suppression (hide_below parameter) ------ */

.lbm-hidden {
	display: none;
}