/* Right-to-left copy for Arabic, generated from hero.css by mirroring left and right. Do not edit by hand; regenerate. */
/* Home banner slides. The text stays put; the pictures cross-fade behind it. */
.cover__slides { position: absolute; inset: 0; }
.cover__slide { opacity: 0; visibility: hidden; transition: opacity 1.1s var(--ease), visibility 0s linear 1.1s; }
.cover__slide.is-on { opacity: 1; visibility: visible; transition: opacity 1.1s var(--ease), visibility 0s; }
.cover__slide:not(.is-on) img { animation: none; }
.cover__slide.is-on img { animation: cover-in 1.6s var(--ease) both; }

/* Slide 2: the picture runs edge to edge on a matching dark stage, darkened on the text side.
   The photo sits slightly inset with soft edges, so the whole instrument shows with room around it. */
.cover__media--cinema { right: 0; container-type: size; background: radial-gradient(55% 80% at 6% 16%, rgba(26, 70, 126, .5), transparent 70%), radial-gradient(40% 30% at 58% 100%, rgba(52, 85, 120, .3), transparent 70%), #01050f; }
.cover__cinema { position: absolute; left: 0; top: 50%; width: min(94%, 100cqh * 1.95); aspect-ratio: 1672 / 941; direction: ltr; transform: translateY(-50%); transform-origin: 58% 55%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%), linear-gradient(180deg, transparent 0, #000 9%, #000 86%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 18%), linear-gradient(180deg, transparent 0, #000 9%, #000 86%, transparent 100%); mask-composite: intersect; }
.cover__cinema picture, .cover__cinema img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cover__media--cinema .cover__cinema img { object-fit: cover; object-position: 50% 50%; }
.cover__slide.is-on .cover__cinema img { animation: none; }
.cover__slide.is-on .cover__cinema { animation: heroZoom 6.8s cubic-bezier(.25, .1, .25, 1) both; }
@keyframes heroZoom { from { scale: 1.06; } to { scale: 1; } }
/* The LED glows softly where it sits in the photo. */
.cover__led { position: absolute; inset-inline-start: 54.5%; top: 54.9%; width: 11%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(215, 236, 255, .85) 0%, rgba(150, 205, 255, .32) 26%, rgba(120, 180, 255, 0) 64%); mix-blend-mode: screen; transform: translate3d(-50%, -50%, 0); animation: ledPulse 3s ease-in-out infinite; pointer-events: none; }
@keyframes ledPulse { 0%, 100% { opacity: .45; scale: .9; } 50% { opacity: 1; scale: 1.08; } }
.cover__media--cinema::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 31, 58, .94) 0%, rgba(11, 31, 58, .72) 30%, rgba(11, 31, 58, .12) 58%, transparent 75%), linear-gradient(0deg, rgba(11, 31, 58, .55), transparent 30%); pointer-events: none; }
.cover__media--cinema .hud, .cover__media--cinema .hero-tag { z-index: 1; }

/* Dots and arrows */
.cover__nav { position: absolute; z-index: 2; right: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))); bottom: 20px; display: flex; align-items: center; gap: 6px; padding: 6px; border: 1px solid var(--ll-navy-line); border-radius: 999px; background: rgba(11, 31, 58, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cover__arrow { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: #fff; cursor: pointer; transition: background-color .2s; }
.cover__arrow:hover { background: rgba(255, 255, 255, .12); }
.js-hero-prev .icon { transform: scaleX(-1); }
.cover__dot { position: relative; width: 34px; height: 32px; border: 0; background: none; cursor: pointer; }
.cover__dot i { position: absolute; right: 4px; left: 4px; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.cover__dot.is-on i { background: rgba(255, 255, 255, .55); }
.cover__dot i::after { content: ""; position: absolute; inset: 0; background: var(--ll-green-signal); transform: scaleX(0); transform-origin: right center; }
.cover__dot.is-on i::after { animation: heroBar var(--hero-ms, 7000ms) linear forwards; }
.js-hero.is-paused .cover__dot.is-on i::after { animation-play-state: paused; }
@keyframes heroBar { to { transform: scaleX(1); } }

@media (max-width: 960px) {
	.cover__slides { position: relative; aspect-ratio: 16 / 10; }
	.cover__slides .cover__media { position: absolute; inset: 0; aspect-ratio: auto; }
	.cover__cinema { width: 100%; }
	.cover__media--cinema::after { background: linear-gradient(0deg, rgba(11, 31, 58, .65), transparent 40%); }
	.cover__nav { top: calc(min(100vw, 960px) * .625 - 64px); bottom: auto; }
}
@media (prefers-reduced-motion: reduce) {
	.cover__slide, .cover__slide.is-on { transition: none; }
	.cover__slide.is-on .cover__cinema, .cover__led { animation: none; }
	.cover__dot.is-on i::after { animation: none; transform: scaleX(1); }
}

/* Arabic: the text sits on the right, so the picture is mirrored and darkened from the right. */
[dir="rtl"] .cover__cinema { transform: translateY(-50%) scaleX(-1); transform-origin: 50% 55%; }
[dir="rtl"] .cover__media--cinema::after { background: linear-gradient(270deg, rgba(11, 31, 58, .94) 0%, rgba(11, 31, 58, .72) 30%, rgba(11, 31, 58, .12) 58%, transparent 75%), linear-gradient(0deg, rgba(11, 31, 58, .55), transparent 30%); }
@media (max-width: 960px) {
	[dir="rtl"] .cover__media--cinema::after { background: linear-gradient(0deg, rgba(11, 31, 58, .65), transparent 40%); }
}