/*
 * SICH homepage hero — replaces Revolution Slider (same layout, no JS).
 *
 * Coordinates are in Slider Revolution grid units: the grid is --gw units wide
 * and scales with the viewport, so 1 unit = 100cqw / --gw. Breakpoints and
 * values match the original slider levels: >1024 (2470x800), <=1024 (1024x600),
 * <=778 (778x500), <=480 (480x400).
 */
.sh-hero {
	position: relative;
	overflow: hidden;
	background: #111;
}

.sh-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.sh-hero__grid {
	--gw: 2470;
	position: relative;
	max-width: 2470px;
	margin: 0 auto;
	aspect-ratio: 2470 / 800;
	container-type: inline-size;
}

.sh-hero .sh-l {
	--u: calc(100cqw / var(--gw));
	position: absolute;
	left: calc(var(--x) * var(--u));
	top: calc(var(--y) * var(--u));
	margin: 0;
	padding: 0;
}

.sh-hero .sh-l--r {
	left: auto;
	right: calc(var(--x) * var(--u));
}

.sh-hero .sh-i,
.sh-hero .sh-bar {
	width: calc(var(--w) * var(--u));
	height: calc(var(--h) * var(--u));
	max-width: none;
}

.sh-hero .sh-bar {
	background: #990002 url("../wp-content/uploads/2017/10/red.jpg") 0 0 / 100% 100% no-repeat;
}

.sh-hero .sh-t {
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-size: calc(var(--fs) * var(--u));
	line-height: calc(22 * var(--u));
	white-space: nowrap;
	text-transform: none;
	letter-spacing: normal;
}

/* ---------- level 0: > 1024px, grid 2470 x 800 ---------- */
.sh-bar      { --x: 0;   --y: 0;   --w: 643; --h: 42; }
.sh-badge    { --x: 222; --y: 11;  --fs: 29; }
.sh-brand    { --x: 227; --y: 53;  --fs: 29; }
.sh-i--hand  { --x: 440; --y: 493; --w: 90; --h: 90; }
.sh-t--hand  { --x: 538; --y: 510; --fs: 22; }
.sh-i--box   { --x: 438; --y: 591; --w: 90; --h: 94; }
.sh-t--box   { --x: 540; --y: 615; --fs: 22; }
.sh-i--press { --x: 440; --y: 491; --w: 90; --h: 90; }
.sh-t--press { --x: 540; --y: 512; --fs: 22; }
.sh-i--war   { --x: 441; --y: 592; --w: 90; --h: 90; }
.sh-t--war   { --x: 544; --y: 628; --fs: 22; }
.sh-i--rain  { --x: 441; --y: 492; --w: 90; --h: 90; }
.sh-t--rain  { --x: 542; --y: 500; --fs: 22; }
.sh-i--light { --x: 439; --y: 593; --w: 90; --h: 90; }
.sh-t--light { --x: 543; --y: 626; --fs: 22; }

/* ---------- level 1: <= 1024px, grid 1024 x 600 ---------- */
@media (max-width: 1024px) {
	.sh-hero__grid { --gw: 1024; max-width: none; aspect-ratio: 1024 / 600; }
	.sh-bar      { --x: 4;   --y: 0;   --w: 442; --h: 27; }
	.sh-badge    { --x: 8;   --y: 3; }
	.sh-brand    { --x: 6;   --y: 53; }
	.sh-i--hand  { --x: 150; --y: 374; --w: 61; --h: 61; }
	.sh-t--hand  { --x: 226; --y: 381; --fs: 18; }
	.sh-i--box   { --x: 148; --y: 466; --w: 68; --h: 71; }
	.sh-t--box   { --x: 230; --y: 481; --fs: 18; }
	.sh-i--press { --x: 149; --y: 375; --w: 68; --h: 68; }
	.sh-t--press { --x: 225; --y: 385; --fs: 18; }
	.sh-i--war   { --x: 151; --y: 468; --w: 68; --h: 68; }
	.sh-t--war   { --x: 230; --y: 491; }
	.sh-i--rain  { --x: 150; --y: 372; --w: 68; --h: 68; }
	.sh-t--rain  { --x: 226; --y: 372; --fs: 18; }
	.sh-i--light { --x: 150; --y: 469; --w: 68; --h: 68; }
	.sh-t--light { --x: 230; --y: 487; --fs: 18; }
}

/* ---------- level 2: <= 778px, grid 778 x 500 ---------- */
@media (max-width: 778px) {
	.sh-hero__grid { --gw: 778; aspect-ratio: 778 / 500; }
	.sh-bar      { --x: -117; --y: 1; --w: 553; --h: 36; }
	.sh-badge    { --x: 5;   --y: 6; }
	.sh-brand    { --x: 6;   --y: 44; }
	.sh-i--hand  { --x: 52;  --y: 302; --w: 61; --h: 61; }
	.sh-t--hand  { --x: 139; --y: 307; }
	.sh-i--box   { --x: 52;  --y: 382; }
	.sh-t--box   { --x: 139; --y: 393; }
	.sh-i--press { --x: 54;  --y: 300; }
	.sh-t--press { --x: 137; --y: 311; }
	.sh-i--war   { --x: 54;  --y: 385; }
	.sh-t--war   { --x: 142; --y: 402; }
	.sh-i--rain  { --x: 55;  --y: 299; }
	.sh-t--rain  { --x: 134; --y: 298; }
	.sh-i--light { --x: 54;  --y: 384; }
	.sh-t--light { --x: 137; --y: 404; }
}

/* ---------- level 3: <= 480px, grid 480 x 400 ---------- */
@media (max-width: 480px) {
	.sh-hero__grid { --gw: 480; aspect-ratio: 480 / 400; }
	.sh-bar      { --x: -5;  --y: 1;   --w: 488; --h: 31; }
	.sh-badge    { --x: 6;   --y: 3; }
	.sh-brand    { --x: 5;   --y: 40; }
	.sh-i--hand  { --x: 21;  --y: 256; }
	.sh-t--hand  { --x: 108; --y: 264; }
	.sh-i--box   { --x: 22;  --y: 325; }
	.sh-t--box   { --x: 112; --y: 347; }
	.sh-i--press { --x: 25;  --y: 253; }
	.sh-t--press { --x: 112; --y: 264; }
	.sh-i--war   { --x: 26;  --y: 325; }
	.sh-t--war   { --x: 116; --y: 348; }
	.sh-i--rain  { --x: 24;  --y: 251; }
	.sh-t--rain  { --x: 110; --y: 251; }
	.sh-i--light { --x: 25;  --y: 328; }
	.sh-t--light { --x: 116; --y: 354; }
}

/* French and Spanish badge texts are longer and must stay inside the red bar on every level */
html[lang^="fr"] .sh-badge { --fs: 25; }
html[lang^="es"] .sh-badge { --fs: 23; }

/* ---------- animation: header wipes in once, feature pairs rotate every ~5.5s ---------- */
.sh-hero .sh-bar {
	animation: sh-reveal 2s cubic-bezier(.77, 0, .175, 1) both;
}

.sh-hero .sh-t--head {
	animation: sh-reveal 1.75s cubic-bezier(.77, 0, .175, 1) .55s both;
}

.sh-hero .sh-phase .sh-l {
	opacity: 0;
	animation: sh-phase 17s ease-out infinite both;
}

.sh-hero .sh-phase--a .sh-l { animation-delay: .63s; }
.sh-hero .sh-phase--b .sh-l { animation-delay: 6.65s; }
.sh-hero .sh-phase--c .sh-l { animation-delay: 11.6s; }

@keyframes sh-reveal {
	from { clip-path: inset(0 0 0 100%); }
	to   { clip-path: inset(0); }
}

/* 17s cycle: 1.5s zoom-in, visible until 5s, 1s fade-out */
@keyframes sh-phase {
	0%     { opacity: 0; transform: scale(1.1); }
	8.82%  { opacity: 1; transform: none; }
	29.41% { opacity: 1; }
	35.29% { opacity: 0; }
	100%   { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.sh-hero .sh-bar,
	.sh-hero .sh-t--head,
	.sh-hero .sh-phase .sh-l {
		animation: none;
	}

	.sh-hero .sh-phase--a .sh-l {
		opacity: 1;
	}
}