/*!
 * St. Joseph's School theme – modern-technology 3D banner scenes
 * (tablet, portal, launch, isomap, layers, aichat, rings, signal, carousel)
 * plus the kinder extras of the Nursery scene. Pure CSS 3D, no libraries.
 * Sizes follow --S (Scene Size), speed follows --T, colours follow the scene accent tokens.
 */
.sjbs-home .sjbs-sc {
	--N1: var(--sjbs-royal);
	--N2: var(--b3d-accent2, #3FD0FF);
	--N3: #7C5CFF;
	--GL: rgba(255, 255, 255, .42);
	--GB: rgba(255, 255, 255, .9);
}

.sjbs-home .sjbs-sc .sjbs-line-ic {
	display: block;
	width: 1em;
	height: 1em;
}

/* Glass chip used by several scenes */
.sjbs-home .sjbs-sc .sc-chip {
	top: 50%;
	left: 50%;
	width: calc(var(--S) * .34);
	height: calc(var(--S) * .34);
	margin: calc(var(--S) * -.17) 0 0 calc(var(--S) * -.17);
	animation: scx-orbit calc(10s * var(--T)) linear infinite;
	animation-delay: calc(var(--k, 0) * -2.5s * var(--T));
}

.sjbs-home .sjbs-sc .sc-chip__in {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	border: 1px solid var(--GB);
	border-radius: 30%;
	background: linear-gradient(140deg, rgba(255, 255, 255, .85), rgba(220, 232, 255, .45));
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: 0 12px 24px -12px rgba(23, 52, 140, .55), inset 0 0 0 1px rgba(255, 255, 255, .5);
	font-size: calc(var(--S) * .17);
	color: var(--N1);
}

/* Rising data bits */
.sjbs-home .sjbs-sc .sc-bits {
	inset: -40%;
	pointer-events: none;
}

.sjbs-home .sjbs-sc .sc-bits i {
	position: absolute;
	bottom: 10%;
	left: calc(8% + var(--n, 0) * 11%);
	width: 6px;
	height: 6px;
	border-radius: 2px;
	background: var(--N2);
	box-shadow: 0 0 10px 2px rgba(63, 208, 255, .7);
	opacity: 0;
	animation: scx-bit calc(4.5s * var(--T)) linear infinite;
	animation-delay: calc(var(--n, 0) * -.6s * var(--T));
}

.sjbs-home .sjbs-sc .sc-bits i:nth-child(1) { --n: 0; }
.sjbs-home .sjbs-sc .sc-bits i:nth-child(2) { --n: 1; background: #FFFFFF; }
.sjbs-home .sjbs-sc .sc-bits i:nth-child(3) { --n: 2; }
.sjbs-home .sjbs-sc .sc-bits i:nth-child(4) { --n: 3; background: var(--sjbs-gold); box-shadow: 0 0 10px 2px rgba(255, 194, 61, .7); }
.sjbs-home .sjbs-sc .sc-bits i:nth-child(5) { --n: 4; }
.sjbs-home .sjbs-sc .sc-bits i:nth-child(6) { --n: 5; background: #FFFFFF; }
.sjbs-home .sjbs-sc .sc-bits i:nth-child(7) { --n: 6; }
.sjbs-home .sjbs-sc .sc-bits i:nth-child(8) { --n: 7; background: var(--N3); }

@keyframes scx-bit {
	0%   { transform: translateY(0) scale(.6); opacity: 0; }
	15%  { opacity: 1; }
	100% { transform: translateY(calc(var(--S) * -2.2)) scale(1); opacity: 0; }
}

/* ========================================================== Tablet (Home) */
.sjbs-home .sc-tab {
	top: calc(50% + var(--S) * .55);
	left: 50%;
	width: calc(var(--S) * 2.3);
	height: calc(var(--S) * 1.5);
	margin: calc(var(--S) * -.75) 0 0 calc(var(--S) * -1.15);
	transform: rotateX(60deg) rotateZ(-34deg);
	transform-style: preserve-3d;
	animation: scx-tabfloat calc(7s * var(--T)) ease-in-out infinite;
}

@keyframes scx-tabfloat {
	0%, 100% { transform: rotateX(60deg) rotateZ(-34deg) translateZ(0); }
	50%      { transform: rotateX(58deg) rotateZ(-30deg) translateZ(14px); }
}

.sjbs-home .sc-tab__slab {
	inset: 0;
	border-radius: calc(var(--S) * .14);
	background: linear-gradient(135deg, #FFFFFF 0%, #DCE6FF 100%);
	box-shadow:
		0 2px 0 #C7D6FF, 0 4px 0 #B7CAFF, 0 6px 0 #A7BEFF, 0 8px 0 #97B2FF, 0 10px 0 #8AA8FF,
		0 40px 50px -10px rgba(23, 52, 140, .45);
}

.sjbs-home .sc-tab__screen {
	inset: 6%;
	overflow: hidden;
	border-radius: calc(var(--S) * .09);
	background:
		linear-gradient(rgba(63, 208, 255, .14) 1px, transparent 1px),
		linear-gradient(90deg, rgba(63, 208, 255, .14) 1px, transparent 1px),
		radial-gradient(120% 120% at 20% 10%, #23407F, #0B1630 70%);
	background-size: 16px 16px, 16px 16px, auto;
	box-shadow: inset 0 0 30px rgba(63, 208, 255, .35);
}

.sjbs-home .sc-tab__draw {
	position: absolute;
	inset: 8%;
	width: 84%;
	height: 84%;
	overflow: visible;
}

.sjbs-home .sc-tab__draw path {
	fill: none;
	stroke: var(--N2);
	stroke-width: 4;
	stroke-linecap: round;
	stroke-dasharray: 320;
	stroke-dashoffset: 320;
	filter: drop-shadow(0 0 4px rgba(63, 208, 255, .9));
	animation: scx-draw calc(5s * var(--T)) ease-in-out infinite;
}

.sjbs-home .sc-tab__draw .sc-tab__draw2 {
	stroke: var(--sjbs-gold);
	stroke-width: 3;
	animation-delay: calc(-2.5s * var(--T));
}

@keyframes scx-draw {
	0%        { stroke-dashoffset: 320; opacity: 1; }
	55%, 80%  { stroke-dashoffset: 0; opacity: 1; }
	100%      { stroke-dashoffset: 0; opacity: 0; }
}

.sjbs-home .sc-tab__dot {
	right: 8%;
	top: 8%;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #5CF2E3;
	box-shadow: 0 0 10px 2px #5CF2E3;
	animation: scx-pulse calc(1.4s * var(--T)) ease-in-out infinite;
}

.sjbs-home .sc-beam {
	top: calc(50% - var(--S) * .55);
	left: calc(50% - var(--S) * .55);
	width: calc(var(--S) * 1.1);
	height: calc(var(--S) * 1.15);
	background: linear-gradient(0deg, rgba(63, 208, 255, .55), rgba(63, 208, 255, 0));
	clip-path: polygon(0 0, 100% 0, 66% 100%, 34% 100%);
	filter: blur(2px);
	animation: scx-glow calc(3s * var(--T)) ease-in-out infinite;
}

.sjbs-home .sc-wcube {
	--c: calc(var(--S) * .62);
	top: calc(50% - var(--S) * .62);
	left: 50%;
	width: var(--c);
	height: var(--c);
	margin: calc(var(--c) / -2) 0 0 calc(var(--c) / -2);
	transform-style: preserve-3d;
	animation: scx-float calc(5s * var(--T)) ease-in-out infinite;
}

.sjbs-home .sc-wcube__spin {
	inset: 0;
	transform-style: preserve-3d;
	animation: scx-wspin calc(12s * var(--T)) linear infinite;
}

@keyframes scx-wspin {
	from { transform: rotateX(-24deg) rotateY(0); }
	to   { transform: rotateX(-24deg) rotateY(360deg); }
}

.sjbs-home .sjbs-sc .sc-wf {
	position: absolute;
	inset: 0;
	border: 2px solid var(--N2);
	border-radius: 6px;
	background: rgba(63, 208, 255, .1);
	box-shadow: 0 0 14px rgba(63, 208, 255, .55), inset 0 0 14px rgba(63, 208, 255, .35);
}

.sjbs-home .sc-wf--fr { transform: translateZ(calc(var(--c) / 2)); }
.sjbs-home .sc-wf--bk { transform: rotateY(180deg) translateZ(calc(var(--c) / 2)); }
.sjbs-home .sc-wf--lf { transform: rotateY(-90deg) translateZ(calc(var(--c) / 2)); }
.sjbs-home .sc-wf--rt { transform: rotateY(90deg) translateZ(calc(var(--c) / 2)); }
.sjbs-home .sc-wf--tp { transform: rotateX(90deg) translateZ(calc(var(--c) / 2)); border-color: var(--sjbs-gold); }
.sjbs-home .sc-wf--bt { transform: rotateX(-90deg) translateZ(calc(var(--c) / 2)); }

.sjbs-home .sc-wcube__core {
	position: absolute;
	inset: 30%;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #FFFFFF, var(--N2) 50%, var(--N1));
	box-shadow: 0 0 24px 8px rgba(63, 208, 255, .6);
	animation: scx-pulse calc(2s * var(--T)) ease-in-out infinite;
}

.sjbs-home .sc-stylus {
	z-index: 4;
	top: calc(50% - var(--S) * .75);
	left: calc(50% + var(--S) * .2);
	width: calc(var(--S) * .13);
	height: calc(var(--S) * 1.25);
	transform-origin: 50% calc(120% - 6px);
	animation: scx-stylus calc(5s * var(--T)) ease-in-out infinite;
}

/* Without JavaScript: the pen hovers over the screen. */
@keyframes scx-stylus {
	0%, 100% { transform: translate(0, 0) rotate(28deg); }
	25%      { transform: translate(calc(var(--S) * -.2), calc(var(--S) * .06)) rotate(24deg); }
	50%      { transform: translate(calc(var(--S) * -.38), calc(var(--S) * .14)) rotate(30deg); }
	75%      { transform: translate(calc(var(--S) * -.14), calc(var(--S) * .04)) rotate(25deg); }
}

/* With JavaScript: the pen tip follows the line exactly while it is drawn on the screen. */
.sjbs-home .sc-stylus.is-live {
	animation: none;
	transform: translate(var(--px, 0px), var(--py, 0px)) rotate(var(--rot, 26deg));
	will-change: transform;
}

.sjbs-home .sc-tab__draw path.is-live {
	animation: none;
}

.sjbs-home .sc-tab__nib {
	fill: #FFFFFF;
	opacity: 0;
	filter: drop-shadow(0 0 3px rgba(63, 208, 255, 1));
}

.sjbs-home .sc-stylus__body {
	inset: 0;
	border-radius: 999px 999px 40% 40%;
	background: linear-gradient(90deg, #14224A 0%, #3A5196 40%, #5C74B8 55%, #1B2A55 100%);
	box-shadow: 0 16px 20px -10px rgba(23, 52, 140, .5), 0 0 0 1px rgba(255, 255, 255, .4);
}

.sjbs-home .sc-stylus__body::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 22%;
	height: 7%;
	background: linear-gradient(90deg, #1F4FD1, var(--N1), #1F4FD1);
}

.sjbs-home .sc-stylus__body::after {
	content: "";
	position: absolute;
	left: 18%;
	right: 18%;
	bottom: -14%;
	height: 16%;
	background: linear-gradient(180deg, #9DB2E6, #33477F);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.sjbs-home .sc-stylus__body i {
	position: absolute;
	left: 50%;
	bottom: -20%;
	width: 12px;
	height: 12px;
	margin-left: -6px;
	border-radius: 50%;
	background: #FFFFFF;
	box-shadow: 0 0 14px 6px var(--N2), 0 0 30px 10px rgba(63, 208, 255, .5);
	animation: scx-pulse calc(.9s * var(--T)) ease-in-out infinite;
}

/* ========================================================== Portal (About Us) */
.sjbs-home .sc-ripple {
	top: calc(50% + var(--S) * .95);
	left: 50%;
	width: 0;
	height: 0;
}

.sjbs-home .sc-ripple i {
	position: absolute;
	left: calc(var(--S) * -1);
	top: calc(var(--S) * -.3);
	width: calc(var(--S) * 2);
	height: calc(var(--S) * .6);
	border: 2px solid rgba(63, 208, 255, .8);
	border-radius: 50%;
	opacity: 0;
	animation: scx-ripple calc(3s * var(--T)) ease-out infinite;
}

.sjbs-home .sc-ripple i:nth-child(2) { animation-delay: calc(-1s * var(--T)); }
.sjbs-home .sc-ripple i:nth-child(3) { animation-delay: calc(-2s * var(--T)); }

@keyframes scx-ripple {
	from { transform: scale(.3); opacity: .9; }
	to   { transform: scale(1.4); opacity: 0; }
}

.sjbs-home .sc-portal {
	top: 50%;
	left: 50%;
	width: calc(var(--S) * 1.25);
	height: calc(var(--S) * 1.75);
	margin: calc(var(--S) * -.78) 0 0 calc(var(--S) * -.62);
	transform: rotateY(-16deg);
	transform-style: preserve-3d;
	perspective: 700px;
	animation: scx-portal calc(8s * var(--T)) ease-in-out infinite;
}

@keyframes scx-portal {
	0%, 100% { transform: rotateY(-16deg) translateY(0); }
	50%      { transform: rotateY(-8deg) translateY(calc(var(--S) * -.05)); }
}

.sjbs-home .sc-portal__frame {
	inset: -6%;
	border: 8px solid rgba(255, 255, 255, .85);
	border-radius: calc(var(--S) * .7) calc(var(--S) * .7) 16px 16px;
	box-shadow: 0 0 0 2px rgba(63, 208, 255, .6), 0 0 26px rgba(63, 208, 255, .65), inset 0 0 26px rgba(63, 208, 255, .45), 0 30px 40px -20px rgba(23, 52, 140, .5);
	pointer-events: none;
}

.sjbs-home .sc-portal__light {
	inset: 0;
	overflow: hidden;
	border-radius: calc(var(--S) * .62) calc(var(--S) * .62) 10px 10px;
	background:
		radial-gradient(70% 60% at 50% 62%, #FFFFFF 0%, #CFF4FF 30%, rgba(63, 208, 255, .65) 60%, var(--N1) 100%);
	animation: scx-doorlight calc(7s * var(--T)) ease-in-out infinite;
}

.sjbs-home .sc-portal__holo {
	left: 50%;
	top: 46%;
	font-size: calc(var(--S) * .58);
	transform: translate(-50%, -50%);
	animation: scx-holo calc(7s * var(--T)) ease-in-out infinite;
}

.sjbs-home .sc-portal__holo img.sjbs-3d {
	filter: drop-shadow(0 0 16px rgba(63, 208, 255, .9)) hue-rotate(-10deg);
}

.sjbs-home .sc-portal__scan {
	position: absolute;
	left: -20%;
	right: -20%;
	top: 0;
	height: 6px;
	background: linear-gradient(90deg, transparent, var(--N2), transparent);
	box-shadow: 0 0 12px var(--N2);
	animation: scx-scan calc(2s * var(--T)) linear infinite;
}

@keyframes scx-scan {
	from { top: 0; }
	to   { top: 100%; }
}

@keyframes scx-holo {
	0%, 18%, 90%, 100% { opacity: 0; transform: translate(-50%, -20%) scale(.5); }
	34%, 74%           { opacity: 1; transform: translate(-50%, -60%) scale(1); }
}

.sjbs-home .sc-portal__door {
	top: 0;
	bottom: 0;
	width: 50%;
	border: 1px solid rgba(255, 255, 255, .95);
	background:
		linear-gradient(160deg, rgba(255, 255, 255, .8), rgba(205, 222, 255, .55)),
		repeating-linear-gradient(0deg, rgba(47, 107, 255, .12) 0 2px, transparent 2px 14px);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: inset 0 0 20px rgba(63, 208, 255, .3);
	animation: scx-door-l calc(7s * var(--T)) cubic-bezier(.65, 0, .35, 1) infinite;
}

.sjbs-home .sc-portal__door--l {
	left: 0;
	border-radius: calc(var(--S) * .62) 0 0 10px;
	transform-origin: 0 50%;
}

.sjbs-home .sc-portal__door--r {
	right: 0;
	border-radius: 0 calc(var(--S) * .62) 10px 0;
	transform-origin: 100% 50%;
	animation-name: scx-door-r;
}

.sjbs-home .sc-portal__door i {
	position: absolute;
	top: 50%;
	right: 10%;
	width: 5px;
	height: 26%;
	border-radius: 4px;
	background: var(--N1);
	box-shadow: 0 0 10px var(--N2);
}

.sjbs-home .sc-portal__door--r i {
	right: auto;
	left: 10%;
}

.sjbs-home .sc-fly--chip {
	width: calc(var(--S) * .32);
	height: calc(var(--S) * .32);
	font-size: inherit;
	top: 56%;
}

.sjbs-home .sjbs-sc--portal .sc-rays {
	background: repeating-conic-gradient(from 0deg, rgba(63, 208, 255, .35) 0deg 6deg, rgba(255, 255, 255, 0) 6deg 20deg);
}

/* ========================================================== Launch (Mission & Value) */
.sjbs-home .sc-traj {
	top: calc(50% - var(--S) * .85);
	left: calc(50% - var(--S) * 1.5);
	width: calc(var(--S) * 3);
	height: calc(var(--S) * 2);
	overflow: visible;
}

.sjbs-home .sc-traj path {
	fill: none;
	stroke: rgba(255, 255, 255, .9);
	stroke-width: 3;
	stroke-dasharray: 3 10;
	stroke-linecap: round;
	animation: scx-dash calc(1.6s * var(--T)) linear infinite;
}

.sjbs-home .sc-hoopring {
	width: calc(var(--S) * .7);
	height: calc(var(--S) * .7);
	transform-style: preserve-3d;
}

.sjbs-home .sc-hoopring i {
	position: absolute;
	inset: 0;
	border: 5px solid var(--N2);
	border-radius: 50%;
	box-shadow: 0 0 18px rgba(63, 208, 255, .8), inset 0 0 18px rgba(63, 208, 255, .5);
	transform: rotateY(64deg) rotateX(14deg);
	animation: scx-ringpass calc(5s * var(--T)) ease-in-out infinite;
}

.sjbs-home .sc-hoopring--1 { top: calc(50% + var(--S) * .38); left: calc(50% - var(--S) * .95); }
.sjbs-home .sc-hoopring--2 { top: calc(50% - var(--S) * .02); left: calc(50% - var(--S) * .35); }
.sjbs-home .sc-hoopring--2 i { animation-delay: calc(.6s * var(--T)); border-color: var(--sjbs-gold); box-shadow: 0 0 18px rgba(255, 194, 61, .8); }
.sjbs-home .sc-hoopring--3 { top: calc(50% - var(--S) * .45); left: calc(50% + var(--S) * .28); }
.sjbs-home .sc-hoopring--3 i { animation-delay: calc(1.2s * var(--T)); border-color: var(--N3); box-shadow: 0 0 18px rgba(124, 92, 255, .8); }

@keyframes scx-ringpass {
	0%, 100% { transform: rotateY(64deg) rotateX(14deg) scale(1); }
	20%      { transform: rotateY(64deg) rotateX(14deg) scale(1.18); }
	30%      { transform: rotateY(64deg) rotateX(14deg) scale(1); }
}

.sjbs-home .sc-goal {
	top: calc(50% - var(--S) * 1.15);
	left: calc(50% + var(--S) * .95);
	width: calc(var(--S) * .7);
	height: calc(var(--S) * .7);
}

.sjbs-home .sc-goal i {
	position: absolute;
	inset: calc(var(--n, 0) * 18%);
	border-radius: 50%;
	background: #FFFFFF;
	box-shadow: 0 0 0 4px rgba(255, 255, 255, .5);
}

.sjbs-home .sc-goal i:nth-child(1) { --n: 0; background: radial-gradient(circle, transparent 58%, var(--N1) 59%); box-shadow: 0 0 22px rgba(47, 107, 255, .7); animation: scx-pulse calc(2s * var(--T)) ease-in-out infinite; }
.sjbs-home .sjbs-sc .sc-goal i:nth-child(2) { --n: 1; background: radial-gradient(circle, transparent 55%, #FFFFFF 56%); }
.sjbs-home .sjbs-sc .sc-goal i:nth-child(3) { --n: 2; background: radial-gradient(circle, var(--sjbs-gold) 0 40%, #FF6B5B 41%); }

.sjbs-home .sc-rocket {
	z-index: 3;
	top: 50%;
	left: 50%;
	width: calc(var(--S) * .36);
	height: calc(var(--S) * .8);
	margin: calc(var(--S) * -.4) 0 0 calc(var(--S) * -.18);
	animation: scx-launch calc(5s * var(--T)) cubic-bezier(.45, 0, .55, 1) infinite;
}

@keyframes scx-launch {
	0%   { transform: translate(calc(var(--S) * -1.55), calc(var(--S) * .95)) scale(.6); opacity: 0; }
	8%   { opacity: 1; }
	30%  { transform: translate(calc(var(--S) * -.6), calc(var(--S) * .55)) scale(.8); }
	55%  { transform: translate(calc(var(--S) * 0), calc(var(--S) * .1)) scale(.95); }
	80%  { transform: translate(calc(var(--S) * .6), calc(var(--S) * -.35)) scale(1); opacity: 1; }
	100% { transform: translate(calc(var(--S) * 1.25), calc(var(--S) * -.95)) scale(.7); opacity: 0; }
}

.sjbs-home .sc-rocket__tilt {
	inset: 0;
	transform: rotate(52deg);
}

.sjbs-home .sc-rocket__body {
	left: 18%;
	right: 18%;
	top: 0;
	bottom: 18%;
	border-radius: 50% 50% 22% 22% / 62% 62% 14% 14%;
	background: linear-gradient(90deg, #C8D6F7 0%, #FFFFFF 45%, #DCE5FA 70%, #9DB2E6 100%);
	box-shadow: 0 10px 18px -8px rgba(23, 52, 140, .5);
}

.sjbs-home .sc-rocket__body::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 26%;
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
	background: linear-gradient(90deg, #E2503D, #FF7A66, #C93E2D);
}

.sjbs-home .sc-rocket__win {
	position: absolute;
	left: 30%;
	right: 30%;
	top: 34%;
	aspect-ratio: 1;
	border: 3px solid #9DB2E6;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #CFF4FF, var(--N1));
	box-shadow: 0 0 10px rgba(63, 208, 255, .8);
}

.sjbs-home .sc-rocket__fin {
	bottom: 12%;
	width: 26%;
	height: 30%;
	background: linear-gradient(180deg, #FF7A66, #C93E2D);
}

.sjbs-home .sc-rocket__fin--l { left: 0; border-radius: 80% 0 0 20%; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.sjbs-home .sc-rocket__fin--r { right: 0; border-radius: 0 80% 20% 0; clip-path: polygon(0 0, 100% 100%, 0 100%); }

.sjbs-home .sc-rocket__flame {
	left: 32%;
	right: 32%;
	top: 80%;
	height: 34%;
	border-radius: 0 0 50% 50%;
	background: linear-gradient(180deg, #FFFFFF, var(--sjbs-gold) 30%, #FF6B5B 70%, rgba(255, 107, 91, 0));
	filter: blur(1px);
	box-shadow: 0 6px 20px rgba(255, 194, 61, .8);
	transform-origin: 50% 0;
	animation: scx-jet calc(.18s * var(--T)) ease-in-out infinite alternate;
}

.sjbs-home .sc-stars2 {
	inset: -60%;
}

.sjbs-home .sc-stars2 i {
	position: absolute;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #FFFFFF;
	box-shadow: 0 0 8px 2px rgba(255, 255, 255, .9);
	animation: scx-twinkle calc(2.6s * var(--T)) ease-in-out infinite;
}

.sjbs-home .sc-stars2 i:nth-child(1) { left: 20%; top: 18%; }
.sjbs-home .sc-stars2 i:nth-child(2) { left: 70%; top: 12%; animation-delay: -.4s; }
.sjbs-home .sc-stars2 i:nth-child(3) { left: 84%; top: 46%; animation-delay: -.8s; }
.sjbs-home .sc-stars2 i:nth-child(4) { left: 12%; top: 60%; animation-delay: -1.2s; }
.sjbs-home .sc-stars2 i:nth-child(5) { left: 48%; top: 30%; animation-delay: -1.6s; }
.sjbs-home .sc-stars2 i:nth-child(6) { left: 60%; top: 82%; animation-delay: -2s; }
.sjbs-home .sc-stars2 i:nth-child(7) { left: 32%; top: 86%; animation-delay: -.6s; }
.sjbs-home .sc-stars2 i:nth-child(8) { left: 90%; top: 24%; animation-delay: -1.4s; }
.sjbs-home .sc-stars2 i:nth-child(9) { left: 4%; top: 34%; animation-delay: -1s; }
.sjbs-home .sc-stars2 i:nth-child(10) { left: 76%; top: 66%; animation-delay: -2.2s; }

/* ========================================================== Isometric hologram map (Campus Map) */
.sjbs-home .sc-iso {
	top: calc(50% + var(--S) * .2);
	left: 50%;
	width: calc(var(--S) * 2.1);
	height: calc(var(--S) * 2.1);
	margin: calc(var(--S) * -1.05) 0 0 calc(var(--S) * -1.05);
	transform: rotateX(58deg) rotateZ(-42deg);
	transform-style: preserve-3d;
	animation: scx-isospin calc(16s * var(--T)) ease-in-out infinite;
}

@keyframes scx-isospin {
	0%, 100% { transform: rotateX(58deg) rotateZ(-42deg); }
	50%      { transform: rotateX(56deg) rotateZ(-30deg); }
}

.sjbs-home .sc-iso__plane {
	inset: 0;
	border: 2px solid rgba(255, 255, 255, .95);
	border-radius: 18px;
	background:
		linear-gradient(rgba(47, 107, 255, .18) 1px, transparent 1px),
		linear-gradient(90deg, rgba(47, 107, 255, .18) 1px, transparent 1px),
		linear-gradient(135deg, rgba(255, 255, 255, .85), rgba(207, 222, 255, .6));
	background-size: 10% 10%, 10% 10%, auto;
	box-shadow: 0 0 0 2px rgba(63, 208, 255, .4), 0 0 40px rgba(63, 208, 255, .45), 0 3px 0 #C7D6FF, 0 6px 0 #A7BEFF, 0 9px 0 #8AA8FF;
	transform-style: preserve-3d;
}

.sjbs-home .sc-iso__road {
	position: absolute;
	background: rgba(11, 22, 48, .78);
}

.sjbs-home .sc-iso__road--h { left: 0; right: 0; top: 46%; height: 8%; }
.sjbs-home .sc-iso__road--v { top: 0; bottom: 0; left: 40%; width: 8%; }

.sjbs-home .sc-iso__road::after {
	content: "";
	position: absolute;
	inset: 46% 0 auto;
	height: 2px;
	background: repeating-linear-gradient(90deg, #FFE08A 0 10px, transparent 10px 20px);
	animation: scx-road calc(1.2s * var(--T)) linear infinite;
}

.sjbs-home .sc-iso__road--v::after {
	inset: 0 auto 0 46%;
	width: 2px;
	height: auto;
	background: repeating-linear-gradient(180deg, #FFE08A 0 10px, transparent 10px 20px);
}

.sjbs-home .sc-radar {
	left: 50%;
	top: 50%;
	width: 90%;
	height: 90%;
	margin: -45% 0 0 -45%;
	border-radius: 50%;
	background: conic-gradient(from 0deg, rgba(63, 208, 255, .5), rgba(63, 208, 255, 0) 25%, rgba(63, 208, 255, 0));
	animation: sjbs-spin calc(4s * var(--T)) linear infinite;
}

.sjbs-home .sc-iso__route {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: translateZ(2px);
	overflow: visible;
}

.sjbs-home .sc-iso__route path {
	fill: none;
	stroke: var(--sjbs-gold);
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 160;
	stroke-dashoffset: 160;
	filter: drop-shadow(0 0 3px rgba(255, 194, 61, .9));
	animation: scx-route calc(4.5s * var(--T)) ease-in-out infinite;
}

@keyframes scx-route {
	0%       { stroke-dashoffset: 160; }
	60%, 85% { stroke-dashoffset: 0; }
	100%     { stroke-dashoffset: -160; }
}

.sjbs-home .sc-iso__ping {
	left: 78%;
	top: 30%;
	width: 0;
	height: 0;
}

.sjbs-home .sc-iso__ping i {
	position: absolute;
	left: calc(var(--S) * -.22);
	top: calc(var(--S) * -.22);
	width: calc(var(--S) * .44);
	height: calc(var(--S) * .44);
	border: 3px solid #FF4D5E;
	border-radius: 50%;
	animation: scx-ripple calc(2s * var(--T)) ease-out infinite;
}

.sjbs-home .sc-iso__ping i + i {
	animation-delay: calc(-1s * var(--T));
}

.sjbs-home .sc-bld {
	left: var(--x);
	top: var(--y);
	width: var(--w);
	height: var(--d);
	--h: calc(var(--hh) * var(--S) / 100);
	transform-style: preserve-3d;
	animation: scx-bldrise calc(6s * var(--T)) cubic-bezier(.3, 1.3, .5, 1) infinite;
	animation-delay: calc(var(--k) * .15s * var(--T));
}

@keyframes scx-bldrise {
	0%, 90%, 100% { transform: scaleZ(1); }
	4%            { transform: scaleZ(.05); }
	14%           { transform: scaleZ(1); }
}

.sjbs-home .sjbs-sc .sc-bld i {
	position: absolute;
	border: 1px solid rgba(255, 255, 255, .95);
}

.sjbs-home .sjbs-sc .sc-bld__top {
	inset: 0;
	background: linear-gradient(135deg, #FFFFFF, #D7E4FF);
	transform: translateZ(var(--h));
	box-shadow: inset 0 0 12px rgba(63, 208, 255, .45);
}

.sjbs-home .sjbs-sc .sc-bld__front {
	left: 0;
	top: 100%;
	width: 100%;
	height: var(--h);
	transform-origin: 0 0;
	transform: rotateX(90deg);
	background:
		repeating-linear-gradient(90deg, transparent 0 6px, rgba(63, 208, 255, .55) 6px 9px),
		repeating-linear-gradient(0deg, transparent 0 7px, rgba(255, 255, 255, .5) 7px 9px),
		linear-gradient(180deg, rgba(126, 164, 255, .85), rgba(47, 107, 255, .85));
}

.sjbs-home .sjbs-sc .sc-bld__side {
	left: 0;
	top: 0;
	width: var(--h);
	height: 100%;
	transform-origin: 0 0;
	transform: rotateY(-90deg);
	background:
		repeating-linear-gradient(0deg, transparent 0 6px, rgba(63, 208, 255, .55) 6px 9px),
		linear-gradient(90deg, rgba(31, 79, 209, .9), rgba(70, 120, 240, .85));
}

.sjbs-home .sc-bigpin {
	z-index: 4;
	top: calc(50% - var(--S) * 1.05);
	left: calc(50% + var(--S) * .35);
	width: calc(var(--S) * .46);
	height: calc(var(--S) * .46);
	animation: scx-pin calc(1.6s * var(--T)) ease-in-out infinite;
}

.sjbs-home .sc-bigpin__in {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	border-radius: 50% 50% 50% 0;
	background: linear-gradient(135deg, #FF7A86, #FF4D5E);
	box-shadow: 0 12px 24px -8px rgba(255, 77, 94, .7), inset 0 0 0 4px rgba(255, 255, 255, .55);
	transform: rotate(-45deg);
	color: #FFFFFF;
	font-size: calc(var(--S) * .22);
}

.sjbs-home .sc-bigpin__in .sjbs-line-ic {
	transform: rotate(45deg);
}

/* ========================================================== Exploding layers (Facilities) */
.sjbs-home .sc-stack {
	top: calc(50% + var(--S) * .45);
	left: 50%;
	width: calc(var(--S) * 1.45);
	height: calc(var(--S) * 1.45);
	margin: calc(var(--S) * -.72) 0 0 calc(var(--S) * -.72);
	transform: rotateX(60deg) rotateZ(-45deg);
	transform-style: preserve-3d;
}

.sjbs-home .sc-layer {
	inset: 0;
	transform-style: preserve-3d;
	animation: scx-explode calc(6s * var(--T)) cubic-bezier(.65, 0, .35, 1) infinite;
	--c: var(--N1);
}

.sjbs-home .sc-layer:nth-child(2) { --c: #2EC4B6; }
.sjbs-home .sc-layer:nth-child(3) { --c: var(--N3); }
.sjbs-home .sc-layer:nth-child(4) { --c: #F2A818; }

@keyframes scx-explode {
	0%, 100% { transform: translateZ(calc(var(--k) * var(--S) * .14)); }
	40%, 70% { transform: translateZ(calc(var(--k) * var(--S) * .42)) rotateZ(calc(var(--k) * 6deg)); }
}

.sjbs-home .sc-layer__in {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	border: 2px solid rgba(255, 255, 255, .95);
	border-radius: 18px;
	background:
		linear-gradient(rgba(255, 255, 255, .22) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .22) 1px, transparent 1px),
		linear-gradient(135deg, color-mix(in srgb, var(--c) 55%, #FFFFFF), color-mix(in srgb, var(--c) 85%, #0B1630));
	background-size: 14% 14%, 14% 14%, auto;
	box-shadow: 0 0 24px color-mix(in srgb, var(--c) 60%, transparent), inset 0 0 20px rgba(255, 255, 255, .35);
	color: #FFFFFF;
	font-size: calc(var(--S) * .5);
	opacity: .92;
}

.sjbs-home .sc-ltag {
	z-index: 3;
	left: calc(50% + var(--S) * .95);
	top: calc(50% + var(--S) * (.62 - var(--k) * .36));
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px 6px 8px;
	border: 1px solid var(--GB);
	border-radius: 999px;
	background: rgba(255, 255, 255, .8);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: 0 10px 20px -12px rgba(23, 52, 140, .55);
	font-family: var(--sjbs-font-ui);
	font-size: calc(var(--S) * .075);
	font-weight: 800;
	white-space: nowrap;
	color: var(--sjbs-navy);
	animation: scx-tag calc(6s * var(--T)) ease-in-out infinite;
}

.sjbs-home .sjbs-sc .sc-ltag i {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--N1);
	box-shadow: 0 0 8px var(--N2);
}

.sjbs-home .sc-ltag:nth-of-type(2) i { background: #2EC4B6; }
.sjbs-home .sc-ltag:nth-of-type(3) i { background: var(--N3); }
.sjbs-home .sc-ltag:nth-of-type(4) i { background: #F2A818; }

@keyframes scx-tag {
	0%, 15%, 85%, 100% { opacity: 0; transform: translateX(-14px); }
	40%, 70%           { opacity: 1; transform: none; }
}

/* ========================================================== AI orb & chat (FAQ) */
.sjbs-home .sc-orb {
	top: calc(50% - var(--S) * .3);
	left: calc(50% + var(--S) * .7);
	width: calc(var(--S) * .95);
	height: calc(var(--S) * .95);
	margin: calc(var(--S) * -.47) 0 0 calc(var(--S) * -.47);
	transform-style: preserve-3d;
	animation: scx-float calc(5s * var(--T)) ease-in-out infinite;
}

.sjbs-home .sc-orb__glow {
	inset: -40%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(63, 208, 255, .55), rgba(124, 92, 255, .18) 60%, transparent);
	animation: scx-glow calc(2.4s * var(--T)) ease-in-out infinite;
}

.sjbs-home .sc-orb__core {
	inset: 18%;
	border-radius: 50%;
	background:
		radial-gradient(circle at 35% 30%, #FFFFFF 0 10%, transparent 30%),
		conic-gradient(from 0deg, var(--N1), var(--N2), var(--N3), var(--N1));
	box-shadow: 0 0 30px 8px rgba(63, 208, 255, .55), inset 0 0 20px rgba(255, 255, 255, .6);
	animation: sjbs-spin calc(6s * var(--T)) linear infinite;
}

.sjbs-home .sjbs-sc .sc-orb__ring {
	position: absolute;
	inset: 0;
	border: 2px solid rgba(63, 208, 255, .85);
	border-radius: 50%;
	box-shadow: 0 0 10px rgba(63, 208, 255, .6);
	animation: scx-orbring calc(5s * var(--T)) linear infinite;
}

.sjbs-home .sjbs-sc .sc-orb__ring:nth-child(3) { --rx: 60deg; animation-duration: calc(7s * var(--T)); border-color: rgba(124, 92, 255, .85); }
.sjbs-home .sjbs-sc .sc-orb__ring:nth-child(4) { --rx: 120deg; animation-duration: calc(9s * var(--T)); border-color: rgba(255, 194, 61, .9); }

@keyframes scx-orbring {
	from { transform: rotateZ(var(--rx, 0deg)) rotateX(70deg) rotateZ(0); }
	to   { transform: rotateZ(var(--rx, 0deg)) rotateX(70deg) rotateZ(360deg); }
}

.sjbs-home .sc-bub {
	z-index: 2;
	left: calc(50% - var(--S) * 1.25);
	display: flex;
	align-items: center;
	gap: 6px;
	padding: calc(var(--S) * .1) calc(var(--S) * .12);
	border: 1px solid var(--GB);
	background: rgba(255, 255, 255, .78);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: 0 14px 28px -14px rgba(23, 52, 140, .55);
	transform: rotateY(16deg);
	opacity: 0;
	animation: scx-bub calc(8s * var(--T)) ease-in-out infinite;
}

.sjbs-home .sc-bub--q {
	top: calc(50% - var(--S) * .95);
	width: calc(var(--S) * 1.3);
	border-radius: 18px 18px 18px 4px;
}

.sjbs-home .sc-bub--q b {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: calc(var(--S) * .2);
	height: calc(var(--S) * .2);
	border-radius: 50%;
	background: var(--sjbs-gold);
	font-family: var(--sjbs-font-head);
	font-size: calc(var(--S) * .15);
	color: var(--sjbs-navy);
}

.sjbs-home .sc-bub i {
	height: 6px;
	border-radius: 4px;
	background: rgba(47, 107, 255, .35);
}

.sjbs-home .sc-bub--q i { flex: 1 1 auto; }
.sjbs-home .sc-bub--q i + i { flex: .5 1 auto; }

.sjbs-home .sc-bub--t {
	top: calc(50% - var(--S) * .45);
	left: calc(50% - var(--S) * .7);
	border-radius: 18px 18px 4px 18px;
	background: rgba(47, 107, 255, .9);
	animation-name: scx-bub-t;
}

.sjbs-home .sc-bub--t i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #FFFFFF;
	animation: scx-typing calc(1s * var(--T)) ease-in-out infinite;
}

.sjbs-home .sc-bub--t i:nth-child(2) { animation-delay: .15s; }
.sjbs-home .sc-bub--t i:nth-child(3) { animation-delay: .3s; }

@keyframes scx-typing {
	0%, 100% { transform: translateY(0); opacity: .5; }
	50%      { transform: translateY(-4px); opacity: 1; }
}

.sjbs-home .sc-bub--a {
	top: calc(50% - var(--S) * .05);
	left: calc(50% - var(--S) * 1.05);
	flex-direction: column;
	align-items: stretch;
	width: calc(var(--S) * 1.25);
	border-radius: 18px 18px 4px 18px;
	background: linear-gradient(135deg, rgba(47, 107, 255, .95), rgba(124, 92, 255, .9));
	animation-name: scx-bub-a;
}

.sjbs-home .sc-bub--a i {
	background: rgba(255, 255, 255, .8);
}

.sjbs-home .sc-bub--a i:nth-child(2) { width: 80%; }
.sjbs-home .sc-bub--a i:nth-child(3) { width: 55%; }

@keyframes scx-bub {
	0%, 4%   { opacity: 0; transform: rotateY(16deg) translateY(16px) scale(.8); }
	10%, 88% { opacity: 1; transform: rotateY(16deg); }
	96%, 100% { opacity: 0; transform: rotateY(16deg) translateY(-10px); }
}

@keyframes scx-bub-t {
	0%, 18%  { opacity: 0; transform: rotateY(16deg) scale(.6); }
	24%, 44% { opacity: 1; transform: rotateY(16deg); }
	50%, 100% { opacity: 0; transform: rotateY(16deg) scale(.6); }
}

@keyframes scx-bub-a {
	0%, 48%  { opacity: 0; transform: rotateY(16deg) translateY(16px) scale(.8); }
	56%, 88% { opacity: 1; transform: rotateY(16deg); }
	96%, 100% { opacity: 0; transform: rotateY(16deg) translateY(-10px); }
}

.sjbs-home .sc-q3d {
	top: calc(50% + var(--S) * .35);
	left: calc(50% + var(--S) * .95);
	font-family: var(--sjbs-font-head);
	font-size: calc(var(--S) * .7);
	line-height: 1;
	perspective: 400px;
}

.sjbs-home .sc-q3d span {
	display: block;
	color: #FFFFFF;
	text-shadow: 1px 1px 0 #C7D6FF, 2px 2px 0 #B7CAFF, 3px 3px 0 #A7BEFF, 4px 4px 0 #97B2FF, 5px 5px 0 var(--N1), 0 0 24px rgba(63, 208, 255, .8);
	animation: scx-qspin calc(5s * var(--T)) ease-in-out infinite;
}

@keyframes scx-qspin {
	0%, 100% { transform: rotateY(-25deg) translateY(0); }
	50%      { transform: rotateY(25deg) translateY(-10px); }
}

/* ========================================================== Activity rings (Campus Life) */
.sjbs-home .sc-dial {
	top: 50%;
	left: 50%;
	width: calc(var(--S) * 1.5);
	height: calc(var(--S) * 1.5);
	margin: calc(var(--S) * -.75) 0 0 calc(var(--S) * -.75);
	border: 1px solid var(--GB);
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .9), rgba(214, 228, 255, .5) 60%, rgba(47, 107, 255, .25));
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 30px 50px -24px rgba(23, 52, 140, .6), inset 0 0 30px rgba(255, 255, 255, .7);
	transform: rotateY(-22deg) rotateX(8deg);
	animation: scx-dial calc(8s * var(--T)) ease-in-out infinite;
}

@keyframes scx-dial {
	0%, 100% { transform: rotateY(-22deg) rotateX(8deg); }
	50%      { transform: rotateY(-8deg) rotateX(14deg) translateY(-8px); }
}

.sjbs-home .sc-arings {
	position: absolute;
	inset: 6%;
	width: 88%;
	height: 88%;
	transform: rotate(-90deg);
}

.sjbs-home .sc-arings circle {
	fill: none;
	stroke-width: 9;
	stroke-linecap: round;
}

.sjbs-home .sc-arings__track {
	stroke: rgba(47, 107, 255, .14);
}

.sjbs-home .sc-arings__fill {
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
	animation: scx-ringfill calc(6s * var(--T)) cubic-bezier(.65, 0, .35, 1) infinite;
}

.sjbs-home .sc-arings__fill--a { stroke: #FF4D7A; filter: drop-shadow(0 0 4px rgba(255, 77, 122, .8)); --to: 16; }
.sjbs-home .sc-arings__fill--b { stroke: #7CFF6B; filter: drop-shadow(0 0 4px rgba(124, 255, 107, .8)); --to: 28; animation-delay: calc(.3s * var(--T)); }
.sjbs-home .sc-arings__fill--c { stroke: var(--N2); filter: drop-shadow(0 0 4px rgba(63, 208, 255, .9)); --to: 8; animation-delay: calc(.6s * var(--T)); }

@keyframes scx-ringfill {
	0%       { stroke-dashoffset: 100; }
	45%, 80% { stroke-dashoffset: var(--to); }
	100%     { stroke-dashoffset: 100; }
}

.sjbs-home .sc-dial__mid {
	left: 50%;
	top: 50%;
	display: grid;
	place-items: center;
	width: 30%;
	height: 30%;
	margin: -15% 0 0 -15%;
	border-radius: 50%;
	background: var(--sjbs-navy);
	color: var(--sjbs-gold);
	font-size: calc(var(--S) * .22);
	box-shadow: 0 0 20px rgba(255, 194, 61, .45);
	animation: scx-pulse calc(2s * var(--T)) ease-in-out infinite;
}

.sjbs-home .sc-chip--life {
	animation-duration: calc(12s * var(--T));
	animation-delay: calc(var(--k) * -4s * var(--T));
}

.sjbs-home .sc-eq {
	left: calc(50% - var(--S) * 1.65);
	top: calc(50% + var(--S) * .25);
	display: flex;
	align-items: flex-end;
	gap: 5px;
	height: calc(var(--S) * .6);
	padding: 10px 12px;
	border: 1px solid var(--GB);
	border-radius: 16px;
	background: rgba(255, 255, 255, .7);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: 0 14px 28px -14px rgba(23, 52, 140, .55);
}

.sjbs-home .sjbs-sc .sc-eq i {
	width: 7px;
	height: 100%;
	border-radius: 4px;
	background: linear-gradient(0deg, var(--N1), var(--N2));
	transform-origin: 50% 100%;
	animation: scx-eq calc(.9s * var(--T)) ease-in-out infinite alternate;
}

.sjbs-home .sjbs-sc .sc-eq i:nth-child(2) { animation-delay: -.3s; }
.sjbs-home .sjbs-sc .sc-eq i:nth-child(3) { animation-delay: -.6s; background: linear-gradient(0deg, var(--N3), #FF4D7A); }
.sjbs-home .sjbs-sc .sc-eq i:nth-child(4) { animation-delay: -.15s; }
.sjbs-home .sjbs-sc .sc-eq i:nth-child(5) { animation-delay: -.45s; background: linear-gradient(0deg, #F2A818, var(--sjbs-gold)); }
.sjbs-home .sjbs-sc .sc-eq i:nth-child(6) { animation-delay: -.75s; }
.sjbs-home .sjbs-sc .sc-eq i:nth-child(7) { animation-delay: -.25s; }

@keyframes scx-eq {
	from { transform: scaleY(.2); }
	to   { transform: scaleY(1); }
}

.sjbs-home .sc-wball {
	top: calc(50% - var(--S) * 1.1);
	left: calc(50% + var(--S) * .95);
	width: calc(var(--S) * .5);
	height: calc(var(--S) * .5);
	animation: scx-ballbounce calc(1.2s * var(--T)) cubic-bezier(.5, 0, .5, 1) infinite alternate;
}

.sjbs-home .sc-wball__spin {
	inset: 0;
	transform-style: preserve-3d;
	animation: scx-wballspin calc(4s * var(--T)) linear infinite;
}

@keyframes scx-wballspin {
	from { transform: rotateX(20deg) rotateY(0); }
	to   { transform: rotateX(20deg) rotateY(360deg); }
}

.sjbs-home .sjbs-sc .sc-wball__spin i {
	position: absolute;
	inset: 0;
	border: 2px solid #FF8A3D;
	border-radius: 50%;
	box-shadow: 0 0 10px rgba(255, 138, 61, .7);
}

.sjbs-home .sjbs-sc .sc-wball__spin i:nth-child(2) { transform: rotateY(60deg); }
.sjbs-home .sjbs-sc .sc-wball__spin i:nth-child(3) { transform: rotateY(120deg); }
.sjbs-home .sjbs-sc .sc-wball__spin i:nth-child(4) { transform: rotateX(90deg); }

/* ========================================================== Phone & signal (Contact) */
.sjbs-home .sc-waves {
	top: calc(50% - var(--S) * .4);
	left: calc(50% + var(--S) * .25);
	width: 0;
	height: 0;
}

.sjbs-home .sc-waves i {
	position: absolute;
	left: calc(var(--S) * -1);
	top: calc(var(--S) * -1);
	width: calc(var(--S) * 2);
	height: calc(var(--S) * 2);
	border: 3px solid transparent;
	border-top-color: rgba(63, 208, 255, .9);
	border-right-color: rgba(63, 208, 255, .5);
	border-radius: 50%;
	transform: rotate(-10deg) scale(.3);
	opacity: 0;
	animation: scx-wave calc(3.2s * var(--T)) ease-out infinite;
}

.sjbs-home .sc-waves i:nth-child(2) { animation-delay: calc(-.8s * var(--T)); }
.sjbs-home .sc-waves i:nth-child(3) { animation-delay: calc(-1.6s * var(--T)); }
.sjbs-home .sc-waves i:nth-child(4) { animation-delay: calc(-2.4s * var(--T)); }

@keyframes scx-wave {
	0%   { transform: rotate(-10deg) scale(.25); opacity: 0; }
	15%  { opacity: 1; }
	100% { transform: rotate(-10deg) scale(1.05); opacity: 0; }
}

.sjbs-home .sc-phone {
	z-index: 2;
	top: 50%;
	left: 50%;
	width: calc(var(--S) * .85);
	height: calc(var(--S) * 1.65);
	margin: calc(var(--S) * -.82) 0 0 calc(var(--S) * -.42);
	border-radius: calc(var(--S) * .14);
	background: linear-gradient(145deg, #3A4F8F, #0B1630);
	box-shadow: 4px 4px 0 #9DB2E6, 8px 8px 0 #7E99D8, 0 40px 50px -20px rgba(23, 52, 140, .6);
	transform: rotateY(-24deg) rotateX(6deg) rotateZ(4deg);
	animation: scx-phone calc(6s * var(--T)) ease-in-out infinite;
}

@keyframes scx-phone {
	0%, 100% { transform: rotateY(-24deg) rotateX(6deg) rotateZ(4deg) translateY(0); }
	50%      { transform: rotateY(-14deg) rotateX(8deg) rotateZ(2deg) translateY(calc(var(--S) * -.06)); }
}

.sjbs-home .sc-phone__screen {
	inset: 5% 6%;
	overflow: hidden;
	border-radius: calc(var(--S) * .1);
	background: linear-gradient(180deg, #E9F0FF, #BCD0FF);
}

.sjbs-home .sjbs-sc .sc-msg {
	position: absolute;
	left: 10%;
	height: 13%;
	border-radius: 10px 10px 10px 3px;
	background: #FFFFFF;
	box-shadow: 0 6px 10px -6px rgba(23, 52, 140, .5);
	opacity: 0;
	animation: scx-msg calc(6s * var(--T)) ease-out infinite;
}

.sjbs-home .sjbs-sc .sc-msg--1 { top: 16%; width: 66%; }
.sjbs-home .sjbs-sc .sc-msg--2 { top: 33%; left: auto; right: 10%; width: 56%; background: var(--N1); border-radius: 10px 10px 3px 10px; animation-delay: calc(.8s * var(--T)); }
.sjbs-home .sjbs-sc .sc-msg--3 { top: 50%; width: 46%; animation-delay: calc(1.6s * var(--T)); }

@keyframes scx-msg {
	0%, 5%    { opacity: 0; transform: translateY(10px) scale(.85); }
	12%, 85%  { opacity: 1; transform: none; }
	95%, 100% { opacity: 0; }
}

.sjbs-home .sc-phone__call {
	position: absolute;
	left: 50%;
	bottom: 8%;
	display: grid;
	place-items: center;
	width: 26%;
	aspect-ratio: 1;
	margin-left: -13%;
	border-radius: 50%;
	background: #2EAE6B;
	color: #FFFFFF;
	font-size: calc(var(--S) * .11);
	box-shadow: 0 0 0 0 rgba(46, 174, 107, .6);
	animation: scx-callpulse calc(1.6s * var(--T)) ease-out infinite;
}

@keyframes scx-callpulse {
	from { box-shadow: 0 0 0 0 rgba(46, 174, 107, .6); }
	to   { box-shadow: 0 0 0 16px rgba(46, 174, 107, 0); }
}

.sjbs-home .sc-phone__notch {
	left: 36%;
	right: 36%;
	top: 2%;
	height: 3%;
	border-radius: 999px;
	background: #0B1630;
}

.sjbs-home .sc-env {
	z-index: 3;
	top: 50%;
	left: 50%;
	width: calc(var(--S) * .42);
	height: calc(var(--S) * .32);
	margin: calc(var(--S) * -.16) 0 0 calc(var(--S) * -.21);
	animation: scx-env calc(6s * var(--T)) ease-in-out infinite;
}

.sjbs-home .sc-env__in {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	border: 1px solid var(--GB);
	border-radius: 10px;
	background: linear-gradient(140deg, #FFFFFF, #DCE6FF);
	box-shadow: 0 14px 24px -10px rgba(23, 52, 140, .55), 0 0 18px rgba(63, 208, 255, .5);
	color: var(--N1);
	font-size: calc(var(--S) * .2);
}

@keyframes scx-env {
	0%   { transform: translate(calc(var(--S) * -1.7), calc(var(--S) * -.7)) rotate(-18deg) scale(.7); opacity: 0; }
	12%  { opacity: 1; }
	45%  { transform: translate(calc(var(--S) * -.8), calc(var(--S) * -.95)) rotate(8deg) scale(1); }
	72%  { transform: translate(0, 0) rotate(0) scale(.6); opacity: 1; }
	80%, 100% { transform: translate(0, 0) scale(.2); opacity: 0; }
}

.sjbs-home .sc-chip--pin {
	top: calc(50% + var(--S) * .55);
	left: calc(50% + var(--S) * 1);
	animation: scx-float calc(4s * var(--T)) ease-in-out infinite;
}

/* ========================================================== 3D carousel (Gallery) */
.sjbs-home .sc-ring3d {
	top: 50%;
	left: 50%;
	width: calc(var(--S) * .78);
	height: calc(var(--S) * .95);
	margin: calc(var(--S) * -.47) 0 0 calc(var(--S) * -.39);
	transform: rotateX(-8deg);
	transform-style: preserve-3d;
}

.sjbs-home .sc-ring3d__spin {
	inset: 0;
	transform-style: preserve-3d;
	animation: scx-carousel calc(18s * var(--T)) linear infinite;
}

@keyframes scx-carousel {
	from { transform: rotateY(0); }
	to   { transform: rotateY(-360deg); }
}

.sjbs-home .sc-frame3d {
	inset: 0;
	transform: rotateY(calc(var(--k) * 60deg)) translateZ(calc(var(--S) * 1.15));
}

.sjbs-home .sc-frame3d__in {
	position: absolute;
	inset: 0;
	padding: 6%;
	border: 1px solid var(--GB);
	border-radius: 16px;
	background: rgba(255, 255, 255, .75);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: 0 18px 30px -16px rgba(23, 52, 140, .55), 0 0 20px rgba(63, 208, 255, .35);
	overflow: hidden;
}

.sjbs-home .sc-frame3d__in .sc-pic,
.sjbs-home .sc-frame3d__in img {
	position: absolute;
	inset: 6%;
	width: 88%;
	height: 88% !important;
	border-radius: 10px;
	object-fit: cover;
	overflow: hidden;
}

.sjbs-home .sc-lens2 {
	z-index: 0;
	top: 50%;
	left: 50%;
	width: calc(var(--S) * .7);
	height: calc(var(--S) * .7);
	margin: calc(var(--S) * -.35) 0 0 calc(var(--S) * -.35);
	border-radius: 50%;
	background: radial-gradient(circle, #0C1430 0 34%, #2F4B9A 35% 46%, #0B1630 47% 64%, #CFE0FF 65% 72%, rgba(63, 208, 255, .6) 73%);
	box-shadow: 0 0 40px 12px rgba(63, 208, 255, .45);
	transform: translateZ(-1px);
}

.sjbs-home .sjbs-sc .sc-lens2 i {
	position: absolute;
	inset: -18%;
	border: 2px dashed rgba(255, 255, 255, .7);
	border-radius: 50%;
	animation: sjbs-spin calc(10s * var(--T)) linear infinite;
}

.sjbs-home .sjbs-sc .sc-lens2 i + i {
	inset: -36%;
	border: 2px solid rgba(63, 208, 255, .5);
	border-left-color: transparent;
	border-right-color: transparent;
	animation-direction: reverse;
	animation-duration: calc(6s * var(--T));
}

.sjbs-home .sjbs-sc .sc-lens2 b {
	position: absolute;
	left: 28%;
	top: 24%;
	width: 18%;
	height: 18%;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
}

/* ========================================================== Nursery extras (kinder) */
.sjbs-home .sc-ksun {
	top: calc(50% - var(--S) * 1.15);
	left: calc(50% + var(--S) * .95);
	width: calc(var(--S) * .55);
	height: calc(var(--S) * .55);
	border-radius: 50%;
	background: radial-gradient(circle at 40% 40%, #FFF3C4, #FFC23D 65%, #F7A21B);
	box-shadow: 0 0 34px 8px rgba(255, 194, 61, .55);
	transform: translateZ(-80px);
}

.sjbs-home .sjbs-sc .sc-ksun i {
	position: absolute;
	inset: -40%;
	border-radius: 50%;
	background: repeating-conic-gradient(rgba(255, 194, 61, .6) 0 12deg, transparent 12deg 30deg);
	-webkit-mask-image: radial-gradient(closest-side, transparent 55%, #000 57%, transparent 100%);
	mask-image: radial-gradient(closest-side, transparent 55%, #000 57%, transparent 100%);
	animation: sjbs-spin calc(14s * var(--T)) linear infinite;
}

.sjbs-home .sjbs-sc .sc-ksun b {
	position: absolute;
	left: 26%;
	right: 26%;
	top: 30%;
	height: 40%;
	border-bottom: 4px solid #B5513E;
	border-radius: 0 0 50% 50%;
	background:
		radial-gradient(circle at 20% 30%, #3B2A1F 0 9%, transparent 10%),
		radial-gradient(circle at 80% 30%, #3B2A1F 0 9%, transparent 10%);
}

.sjbs-home .sc-kballoon {
	top: calc(50% - var(--S) * .7);
	left: calc(50% - var(--S) * 1.55);
	width: calc(var(--S) * .32);
	height: calc(var(--S) * .4);
	border-radius: 50% 50% 46% 46% / 55% 55% 45% 45%;
	background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .8) 0 10%, transparent 30%), #FF6B8A;
	box-shadow: inset -6px -8px 0 rgba(0, 0, 0, .1);
	animation: scx-kb calc(6s * var(--T)) ease-in-out infinite;
}

.sjbs-home .sc-kballoon--2 { left: calc(50% - var(--S) * 1.2); top: calc(50% - var(--S) * .95); background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .8) 0 10%, transparent 30%), #2F6BFF; animation-delay: calc(-2s * var(--T)); }
.sjbs-home .sc-kballoon--3 { left: calc(50% + var(--S) * 1.4); top: calc(50% - var(--S) * .2); background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .8) 0 10%, transparent 30%), #2EC4B6; animation-delay: calc(-4s * var(--T)); }

.sjbs-home .sjbs-sc .sc-kballoon i {
	position: absolute;
	left: 50%;
	top: 100%;
	width: 2px;
	height: calc(var(--S) * .45);
	background: rgba(11, 22, 48, .4);
}

@keyframes scx-kb {
	0%, 100% { transform: translate(0, 0) rotate(-6deg); }
	50%      { transform: translate(6px, calc(var(--S) * -.14)) rotate(6deg); }
}

.sjbs-home .sc-kite {
	top: calc(50% - var(--S) * 1.2);
	left: calc(50% - var(--S) * .1);
	width: calc(var(--S) * .36);
	height: calc(var(--S) * .46);
	transform-origin: 50% 100%;
	animation: scx-kite calc(3.4s * var(--T)) ease-in-out infinite;
}

.sjbs-home .sjbs-sc .sc-kite i {
	position: absolute;
	inset: 0;
	background: conic-gradient(from 45deg, #FFC23D 0 25%, #FF6B8A 0 50%, #2F6BFF 0 75%, #2EC4B6 0);
	clip-path: polygon(50% 0, 100% 40%, 50% 100%, 0 40%);
}

.sjbs-home .sjbs-sc .sc-kite b {
	position: absolute;
	left: 50%;
	top: 100%;
	width: 3px;
	height: calc(var(--S) * .5);
	background: repeating-linear-gradient(180deg, #FF6B8A 0 8px, #FFC23D 8px 16px);
	transform-origin: 50% 0;
	animation: scx-scarf calc(.8s * var(--T)) ease-in-out infinite alternate;
}

@keyframes scx-kite {
	0%, 100% { transform: rotate(-10deg) translate(0, 0); }
	50%      { transform: rotate(10deg) translate(10px, -8px); }
}

/* Mobile: tech scenes are wide – keep them compact */
@media (max-width: 767px) {
	.sjbs-home .sc-ltag,
	.sjbs-home .sc-eq {
		display: none;
	}
}

/* ========================================================== School van arrives (Home)
   A real CSS 3D scene: the school van drives in with children waving, the smart gate
   swings open, the van turns in through the gate and drives up into the school. */
.sjbs-home .sc-ar {
	inset: 0;
	perspective: calc(var(--S) * 9);
	perspective-origin: 50% 20%;
	transform-style: preserve-3d;
	pointer-events: none;
}

.sjbs-home .sc-ar__world {
	--G: calc(var(--S) * .62);
	left: 50%;
	top: 48%;
	width: 0;
	height: 0;
	transform-style: preserve-3d;
	transform: translateX(calc(var(--S) * var(--ar-x, -.05))) rotateX(-16deg) rotateY(-26deg) scale3d(var(--ar-k, 1), var(--ar-k, 1), var(--ar-k, 1));
}

/* Laptops and tablets: a little smaller so the scene stays clear of the banner text. */
@media (min-width: 768px) and (max-width: 1500px) {
	.sjbs-home .sc-ar__world {
		--ar-k: .86;
		--ar-x: .2;
	}
}

@media (min-width: 768px) and (max-width: 1100px) {
	.sjbs-home .sc-ar__world {
		--ar-k: .7;
		--ar-x: .45;
	}
}

.sjbs-home .sjbs-sc .sc-ar__world i,
.sjbs-home .sjbs-sc .sc-ar__world b {
	position: absolute;
}

/* Ground ---------------------------------------------------------------- */
.sjbs-home .sc-ar__ground {
	left: calc(var(--S) * -2.1);
	top: calc(var(--G) - var(--S) * 1.7);
	width: calc(var(--S) * 4.5);
	height: calc(var(--S) * 3.4);
	transform: rotateX(90deg);
	background:
		linear-gradient(rgba(63, 208, 255, .22) 1px, transparent 1px) 0 0 / calc(var(--S) * .2) calc(var(--S) * .2),
		linear-gradient(90deg, rgba(63, 208, 255, .22) 1px, transparent 1px) 0 0 / calc(var(--S) * .2) calc(var(--S) * .2),
		radial-gradient(closest-side, rgba(255, 255, 255, .75), rgba(214, 228, 255, .55) 60%, rgba(214, 228, 255, 0));
	-webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent);
	mask-image: radial-gradient(closest-side, #000 62%, transparent);
}

.sjbs-home .sc-ar__road,
.sjbs-home .sc-ar__drive {
	background:
		linear-gradient(90deg, transparent 0 46%, rgba(255, 210, 90, .95) 46% 54%, transparent 54%) 0 50% / calc(var(--S) * .32) 4px no-repeat,
		linear-gradient(180deg, #33437A, #1D2A57);
	box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .55);
}

.sjbs-home .sc-ar__road {
	left: 0;
	right: 0;
	top: calc(50% + var(--S) * .24);
	height: calc(var(--S) * .46);
	background:
		repeating-linear-gradient(90deg, rgba(255, 210, 90, .95) 0 calc(var(--S) * .14), transparent 0 calc(var(--S) * .28)) 0 50% / 100% 4px no-repeat,
		linear-gradient(180deg, #34457E, #1F2C5A);
}

.sjbs-home .sc-ar__drive {
	left: calc(50% + var(--S) * .17);
	width: calc(var(--S) * .51);
	top: calc(50% - var(--S) * 1.2);
	height: calc(var(--S) * 1.46);
	background:
		repeating-linear-gradient(180deg, rgba(255, 255, 255, .8) 0 calc(var(--S) * .08), transparent 0 calc(var(--S) * .16)) 50% 0 / 3px 100% no-repeat,
		linear-gradient(90deg, #2B3B70, #34457E 50%, #2B3B70);
}

/* School building ------------------------------------------------------- */
.sjbs-home .sc-ar__school {
	left: calc(var(--S) * -.45);
	top: calc(var(--G) - var(--S) * .95);
	width: calc(var(--S) * 1.75);
	height: calc(var(--S) * .95);
	transform: translateZ(calc(var(--S) * -1.15));
	transform-style: preserve-3d;
	border-radius: 6px 6px 0 0;
	background: linear-gradient(180deg, #FFFFFF, #E3EBFF);
	box-shadow: inset 0 -10px 0 rgba(47, 107, 255, .12);
}

.sjbs-home .sc-ar__band {
	left: 0;
	right: 0;
	top: 0;
	height: calc(var(--S) * .09);
	border-radius: 6px 6px 0 0;
	background: linear-gradient(90deg, var(--N1), #5B8CFF);
}

.sjbs-home .sc-ar__win {
	left: calc(var(--S) * var(--x));
	top: calc(var(--S) * var(--y));
	width: calc(var(--S) * .14);
	height: calc(var(--S) * .17);
	border-radius: 4px;
	background: linear-gradient(160deg, #BFE9FF, #5FA9FF);
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .8);
	animation: scx-ar-win calc(10s * var(--T)) ease-in-out infinite;
	animation-delay: calc(var(--w) * .08s * var(--T));
}

@keyframes scx-ar-win {
	0%, 58%, 100% { background: linear-gradient(160deg, #BFE9FF, #5FA9FF); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .8); }
	66%, 84%      { background: linear-gradient(160deg, #FFF6C9, #FFC23D); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .9), 0 0 14px rgba(255, 194, 61, .8); }
}

.sjbs-home .sc-ar__door {
	left: calc(50% - var(--S) * .22);
	bottom: 0;
	width: calc(var(--S) * .44);
	height: calc(var(--S) * .5);
	border-radius: calc(var(--S) * .22) calc(var(--S) * .22) 0 0;
	background: linear-gradient(180deg, #13214A, #0B1630);
	box-shadow: inset 0 0 0 3px #FFFFFF, inset 0 0 0 6px var(--N1);
	animation: scx-ar-door calc(10s * var(--T)) ease-in-out infinite;
}

@keyframes scx-ar-door {
	0%, 50%, 100% { box-shadow: inset 0 0 0 3px #FFFFFF, inset 0 0 0 6px var(--N1); }
	60%, 76%      { box-shadow: inset 0 0 0 3px #FFFFFF, inset 0 0 0 6px var(--N2), inset 0 -20px 30px rgba(63, 208, 255, .55), 0 0 22px rgba(63, 208, 255, .6); }
}

.sjbs-home .sc-ar__roof {
	left: calc(50% - var(--S) * .5);
	top: calc(var(--S) * -.3);
	width: calc(var(--S) * 1);
	height: calc(var(--S) * .31);
	background: linear-gradient(180deg, #5B8CFF, var(--N1));
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.sjbs-home .sc-ar__clock {
	left: calc(50% - var(--S) * .07);
	top: calc(var(--S) * .13);
	width: calc(var(--S) * .14);
	height: calc(var(--S) * .14);
	border-radius: 50%;
	background: #FFFFFF;
	box-shadow: inset 0 0 0 2px var(--sjbs-gold);
}

.sjbs-home .sc-ar__hand {
	left: calc(50% - 1px);
	bottom: 50%;
	width: 2px;
	height: 38%;
	background: var(--sjbs-navy, #0B1630);
	transform-origin: 50% 100%;
	animation: scx-ar-spin calc(10s * var(--T)) linear infinite;
}

.sjbs-home .sc-ar__hand--m {
	height: 28%;
	animation-duration: calc(60s * var(--T));
}

.sjbs-home .sc-ar__pole {
	left: calc(var(--S) * .12);
	top: calc(var(--S) * -.42);
	width: 3px;
	height: calc(var(--S) * .42);
	background: linear-gradient(90deg, #9AA8C8, #FFFFFF);
}

.sjbs-home .sc-ar__flag {
	left: 3px;
	top: 2px;
	width: calc(var(--S) * .2);
	height: calc(var(--S) * .12);
	border-radius: 0 3px 3px 0;
	background: linear-gradient(180deg, #FF9933 0 33%, #FFFFFF 33% 66%, #138808 66%);
	transform-origin: 0 50%;
	animation: scx-ar-flag calc(1.6s * var(--T)) ease-in-out infinite;
}

@keyframes scx-ar-flag {
	0%, 100% { transform: skewY(-6deg) scaleX(1); }
	50%      { transform: skewY(5deg) scaleX(.9); }
}

.sjbs-home .sc-ar__side {
	left: 100%;
	top: 0;
	width: calc(var(--S) * .7);
	height: 100%;
	transform-origin: 0 50%;
	transform: rotateY(90deg);
	background: linear-gradient(90deg, #C9D7FF, #AFC3FA);
}

.sjbs-home .sc-ar__top {
	left: 0;
	top: calc(var(--S) * -.7);
	width: 100%;
	height: calc(var(--S) * .7);
	transform-origin: 50% 100%;
	transform: rotateX(90deg);
	background: linear-gradient(0deg, #4C7DFF, #3266F2);
}

/* Trees ---------------------------------------------------------------- */
.sjbs-home .sc-ar__tree {
	top: calc(var(--G) - var(--S) * .5);
	width: calc(var(--S) * .32);
	height: calc(var(--S) * .5);
	transform: translateZ(var(--z)) rotateY(26deg);
	transform-origin: 50% 100%;
	animation: scx-ar-sway calc(4s * var(--T)) ease-in-out infinite;
}

.sjbs-home .sc-ar__tree::before {
	content: "";
	position: absolute;
	left: calc(50% - var(--S) * .025);
	bottom: 0;
	width: calc(var(--S) * .05);
	height: 40%;
	border-radius: 3px;
	background: #8A5A3C;
}

.sjbs-home .sc-ar__tree i {
	left: 0;
	top: 0;
	width: 100%;
	height: 75%;
	border-radius: 50% 50% 46% 46%;
	background: radial-gradient(circle at 35% 30%, #8BE38F, #2FAE5B 55%, #1C7A43);
	box-shadow: inset -6px -8px 0 rgba(0, 0, 0, .08);
}

.sjbs-home .sc-ar__tree--1 { --z: calc(var(--S) * -.5); left: calc(var(--S) * -.95); }
.sjbs-home .sc-ar__tree--2 { --z: calc(var(--S) * -.55); left: calc(var(--S) * 1.15); animation-delay: calc(-1.3s * var(--T)); }
.sjbs-home .sc-ar__tree--3 { --z: calc(var(--S) * -.8); left: calc(var(--S) * -.35); width: calc(var(--S) * .26); height: calc(var(--S) * .42); top: calc(var(--G) - var(--S) * .42); animation-delay: calc(-2.4s * var(--T)); }

@keyframes scx-ar-sway {
	0%, 100% { rotate: 0deg; }
	50%      { rotate: 2.5deg; }
}

/* Wall, pillars, sign, gate -------------------------------------------- */
.sjbs-home .sc-ar__wall {
	top: calc(var(--G) - var(--S) * .24);
	height: calc(var(--S) * .24);
	border-radius: 4px 4px 0 0;
	background:
		linear-gradient(180deg, var(--N1) 0 calc(var(--S) * .04), transparent 0),
		repeating-linear-gradient(90deg, rgba(47, 107, 255, .12) 0 2px, transparent 2px calc(var(--S) * .16)),
		linear-gradient(180deg, #FFFFFF, #DCE6FF);
	box-shadow: 0 -2px 10px rgba(63, 208, 255, .45);
}

.sjbs-home .sc-ar__wall--l { left: calc(var(--S) * -1.45); width: calc(var(--S) * 1.5); }
.sjbs-home .sc-ar__wall--r { left: calc(var(--S) * .8); width: calc(var(--S) * .75); }

.sjbs-home .sc-ar__pillar {
	top: calc(var(--G) - var(--S) * .5);
	width: calc(var(--S) * .1);
	height: calc(var(--S) * .5);
	transform-style: preserve-3d;
	background: linear-gradient(90deg, #FFFFFF, #D3DFFF);
	box-shadow: inset 0 calc(var(--S) * .05) 0 var(--N1);
}

.sjbs-home .sc-ar__pillar--l { left: calc(var(--S) * .05); }
.sjbs-home .sc-ar__pillar--r { left: calc(var(--S) * .7); }

.sjbs-home .sc-ar__pside {
	left: 100%;
	top: 0;
	width: calc(var(--S) * .1);
	height: 100%;
	transform-origin: 0 50%;
	transform: rotateY(90deg);
	background: #B9CBFA;
}

.sjbs-home .sc-ar__lamp {
	left: calc(50% - var(--S) * .035);
	top: calc(var(--S) * -.08);
	width: calc(var(--S) * .07);
	height: calc(var(--S) * .07);
	border-radius: 50%;
	background: radial-gradient(circle at 40% 35%, #FFFFFF, var(--N2));
	box-shadow: 0 0 12px 4px rgba(63, 208, 255, .65);
	animation: scx-pulse calc(2s * var(--T)) ease-in-out infinite;
}

.sjbs-home .sc-ar__sign {
	left: calc(var(--S) * .02);
	top: calc(var(--G) - var(--S) * .7);
	width: calc(var(--S) * .81);
	height: calc(var(--S) * .13);
	display: grid;
	place-items: center;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .9);
	border-radius: calc(var(--S) * .04);
	background: linear-gradient(135deg, rgba(15, 30, 80, .92), rgba(31, 79, 209, .92));
	box-shadow: 0 0 16px rgba(63, 208, 255, .55), inset 0 0 12px rgba(63, 208, 255, .45);
	transform: translateZ(1px);
}

.sjbs-home .sc-ar__sign em {
	font-family: var(--sjbs-f-head, inherit);
	font-size: calc(var(--S) * .085);
	font-style: normal;
	letter-spacing: .14em;
	line-height: 1;
	text-transform: uppercase;
	color: #E9F8FF;
	text-shadow: 0 0 8px rgba(63, 208, 255, .9);
}

.sjbs-home .sc-ar__sign::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -40%;
	width: 30%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
	animation: scx-ar-shine calc(3.2s * var(--T)) ease-in-out infinite;
}

@keyframes scx-ar-shine {
	0%, 40% { transform: translateX(0); }
	100%    { transform: translateX(calc(var(--S) * 1.4)); }
}

.sjbs-home .sc-ar__gate {
	top: calc(var(--G) - var(--S) * .27);
	width: calc(var(--S) * .275);
	height: calc(var(--S) * .25);
	background:
		linear-gradient(180deg, var(--sjbs-gold) 0 3px, transparent 3px calc(100% - 4px), var(--N1) calc(100% - 4px)),
		linear-gradient(180deg, transparent 0 45%, var(--N1) 45% calc(45% + 3px), transparent 0),
		repeating-linear-gradient(90deg, #1E3270 0 3px, transparent 3px calc(var(--S) * .045));
	filter: drop-shadow(0 0 3px rgba(63, 208, 255, .6));
	animation: scx-ar-gate-l calc(10s * var(--T)) ease-in-out infinite;
}

.sjbs-home .sc-ar__gate--l {
	left: calc(var(--S) * .15);
	transform-origin: 0 50%;
}

.sjbs-home .sc-ar__gate--r {
	left: calc(var(--S) * .425);
	transform-origin: 100% 50%;
	animation-name: scx-ar-gate-r;
}

@keyframes scx-ar-gate-l {
	0%, 18%, 86%, 100% { transform: rotateY(0deg); }
	30%, 70%           { transform: rotateY(100deg); }
}

@keyframes scx-ar-gate-r {
	0%, 18%, 86%, 100% { transform: rotateY(0deg); }
	30%, 70%           { transform: rotateY(-100deg); }
}

/* The van --------------------------------------------------------------- */
.sjbs-home .sc-ar__van {
	left: 0;
	top: var(--G);
	width: 0;
	height: 0;
	transform-style: preserve-3d;
	animation: scx-ar-drive calc(10s * var(--T)) linear infinite;
}

@keyframes scx-ar-drive {
	0%   { transform: translate3d(calc(var(--S) * -1.6), 0, calc(var(--S) * .47)) rotateY(0deg); animation-timing-function: cubic-bezier(.25, .6, .4, 1); }
	30%  { transform: translate3d(calc(var(--S) * .02), 0, calc(var(--S) * .47)) rotateY(0deg); }
	36%  { transform: translate3d(calc(var(--S) * .02), 0, calc(var(--S) * .47)) rotateY(0deg); animation-timing-function: ease-in; }
	42%  { transform: translate3d(calc(var(--S) * .3), 0, calc(var(--S) * .42)) rotateY(40deg); }
	48%  { transform: translate3d(calc(var(--S) * .425), 0, calc(var(--S) * .2)) rotateY(90deg); animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
	70%  { transform: translate3d(calc(var(--S) * .425), 0, calc(var(--S) * -1.7)) rotateY(90deg); }
	100% { transform: translate3d(calc(var(--S) * .425), 0, calc(var(--S) * -1.7)) rotateY(90deg); }
}

.sjbs-home .sc-ar__bob {
	inset: 0;
	transform-style: preserve-3d;
	animation: scx-ar-bob calc(.5s * var(--T)) ease-in-out infinite;
}

@keyframes scx-ar-bob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-1.5px); }
}

.sjbs-home .sjbs-sc .sc-ar__f {
	animation: scx-ar-fade calc(10s * var(--T)) linear infinite;
}

@keyframes scx-ar-fade {
	0%       { opacity: 0; }
	5%, 100% { opacity: 1; }
}

.sjbs-home .sc-ar__vs,
.sjbs-home .sc-ar__vf,
.sjbs-home .sc-ar__vb {
	top: calc(var(--S) * -.42);
	height: calc(var(--S) * .34);
	border-radius: calc(var(--S) * .05) calc(var(--S) * .05) calc(var(--S) * .02) calc(var(--S) * .02);
	background: linear-gradient(180deg, #FFD45E, #FFB61F 70%, #E99A0A);
	box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .12);
}

.sjbs-home .sc-ar__vs {
	left: calc(var(--S) * -.45);
	width: calc(var(--S) * .9);
	transform: translateZ(calc(var(--S) * .19));
}

.sjbs-home .sc-ar__vs--far {
	transform: rotateY(180deg) translateZ(calc(var(--S) * .19));
	background: linear-gradient(180deg, #F2C24E, #DB9A10);
}

.sjbs-home .sc-ar__vf,
.sjbs-home .sc-ar__vb {
	left: calc(var(--S) * -.19);
	width: calc(var(--S) * .38);
}

.sjbs-home .sc-ar__vf { transform: rotateY(90deg) translateZ(calc(var(--S) * .45)); }
.sjbs-home .sc-ar__vb { transform: rotateY(-90deg) translateZ(calc(var(--S) * .45)); background: linear-gradient(180deg, #F5C44A, #DE9C12); }

.sjbs-home .sc-ar__vt {
	left: calc(var(--S) * -.45);
	top: calc(var(--S) * -.61);
	width: calc(var(--S) * .9);
	height: calc(var(--S) * .38);
	border-radius: calc(var(--S) * .05);
	transform: rotateX(90deg);
	background: linear-gradient(90deg, #FFE08A, #FFCB45);
	box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .5);
}

.sjbs-home .sc-ar__beacon {
	left: calc(50% - var(--S) * .05);
	top: calc(50% - var(--S) * .03);
	width: calc(var(--S) * .1);
	height: calc(var(--S) * .06);
	border-radius: 4px;
	background: #FF8A3D;
	animation: scx-ar-blink calc(.8s * var(--T)) steps(1) infinite;
}

@keyframes scx-ar-blink {
	0%  { background: #FF8A3D; box-shadow: 0 0 10px 3px rgba(255, 138, 61, .9); }
	50% { background: #B4532A; box-shadow: none; }
}

/* side windows with the children */
.sjbs-home .sc-ar__glass {
	left: 5%;
	top: 10%;
	width: 64%;
	height: 46%;
	overflow: hidden;
	border-radius: calc(var(--S) * .03);
	background:
		linear-gradient(90deg, transparent 32%, #FFB61F 32% 34%, transparent 34% 65%, #FFB61F 65% 67%, transparent 67%),
		linear-gradient(160deg, #D9F2FF, #8CC8FF);
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85);
}

.sjbs-home .sc-ar__cab {
	left: 73%;
	top: 10%;
	width: 23%;
	height: 46%;
	overflow: hidden;
	border-radius: calc(var(--S) * .03) calc(var(--S) * .07) calc(var(--S) * .03) calc(var(--S) * .03);
	background: linear-gradient(160deg, #D9F2FF, #8CC8FF);
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85);
}

.sjbs-home .sc-ar__kid {
	--skin: #F2C29B;
	--hair: #2B1B12;
	--shirt: #2F6BFF;
	bottom: -14%;
	width: 26%;
	height: 92%;
}

.sjbs-home .sc-ar__kid::before {
	content: "";
	position: absolute;
	left: 18%;
	right: 18%;
	top: 6%;
	height: 50%;
	border-radius: 50%;
	background:
		radial-gradient(circle at 35% 55%, #1A1A2E 0 6%, transparent 7%),
		radial-gradient(circle at 65% 55%, #1A1A2E 0 6%, transparent 7%),
		radial-gradient(ellipse 22% 12% at 50% 75%, #C2410C 0 60%, transparent 70%),
		linear-gradient(180deg, var(--hair) 0 30%, var(--skin) 30%);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .06);
}

.sjbs-home .sc-ar__kid::after {
	content: "";
	position: absolute;
	left: 8%;
	right: 8%;
	top: 58%;
	bottom: 0;
	border-radius: 45% 45% 0 0;
	background: var(--shirt);
}

.sjbs-home .sc-ar__kid--1 { left: 3%; }
.sjbs-home .sc-ar__kid--2 { left: 37%; --skin: #C68B5E; --hair: #3A2416; --shirt: #FF6B8B; }
.sjbs-home .sc-ar__kid--3 { left: 70%; --skin: #8D5A3B; --hair: #111111; --shirt: #22B573; }
.sjbs-home .sc-ar__kid--d { left: 22%; width: 60%; --skin: #C68B5E; --shirt: #0B1630; }

.sjbs-home .sc-ar__arm {
	left: 72%;
	top: 30%;
	width: 18%;
	height: 40%;
	border-radius: 999px;
	background: var(--skin);
	transform-origin: 50% 100%;
	transform: rotate(0deg) translateY(60%);
	animation: scx-ar-wave calc(10s * var(--T)) ease-in-out infinite;
	z-index: 2;
}

.sjbs-home .sc-ar__kid--2 .sc-ar__arm { animation-delay: calc(-.15s * var(--T)); }
.sjbs-home .sc-ar__kid--3 .sc-ar__arm { animation-delay: calc(-.3s * var(--T)); }

@keyframes scx-ar-wave {
	0%, 22%, 44%, 100% { transform: rotate(0deg) translateY(70%); }
	25%, 31%, 37%      { transform: rotate(-22deg) translateY(-10%); }
	28%, 34%, 40%      { transform: rotate(18deg) translateY(-10%); }
}

.sjbs-home .sc-ar__stripe {
	left: 0;
	right: 0;
	top: 62%;
	height: 15%;
	display: grid;
	place-items: center;
	background: #0B1630;
}

.sjbs-home .sc-ar__stripe b {
	position: static !important;
	font-family: var(--sjbs-f-head, inherit);
	font-size: calc(var(--S) * .045);
	font-weight: 400;
	letter-spacing: .16em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--sjbs-gold);
}

.sjbs-home .sc-ar__puff {
	left: calc(var(--S) * -.06);
	bottom: 4%;
	width: calc(var(--S) * .06);
	height: calc(var(--S) * .06);
	border-radius: 50%;
	background: rgba(255, 255, 255, .85);
	animation: scx-ar-puff calc(1.1s * var(--T)) ease-out infinite;
}

.sjbs-home .sc-ar__puff--2 { animation-delay: calc(-.55s * var(--T)); }

@keyframes scx-ar-puff {
	0%   { transform: translate(0, 0) scale(.4); opacity: .9; }
	100% { transform: translate(calc(var(--S) * -.14), calc(var(--S) * -.06)) scale(1.4); opacity: 0; }
}

/* front, rear */
.sjbs-home .sc-ar__shield,
.sjbs-home .sc-ar__rear {
	left: 10%;
	right: 10%;
	top: 10%;
	height: 42%;
	border-radius: calc(var(--S) * .03);
	background: linear-gradient(160deg, #E6F7FF, #7FC0FF);
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85);
}

.sjbs-home .sc-ar__hl,
.sjbs-home .sc-ar__tl {
	left: 8%;
	bottom: 14%;
	width: 18%;
	height: 14%;
	border-radius: 50%;
	background: #FFFFFF;
	box-shadow: 0 0 12px 4px rgba(255, 246, 200, .9);
}

.sjbs-home .sc-ar__hl--r,
.sjbs-home .sc-ar__tl--r {
	left: auto;
	right: 8%;
}

.sjbs-home .sc-ar__tl {
	border-radius: 3px;
	background: #FF4D4D;
	box-shadow: 0 0 10px 3px rgba(255, 77, 77, .7);
}

/* wheels */
.sjbs-home .sc-ar__wh {
	top: calc(var(--S) * -.16);
	width: calc(var(--S) * .16);
	height: calc(var(--S) * .16);
	border-radius: 50%;
	background: radial-gradient(circle, #DDE6FF 0 22%, #2A3550 24% 60%, #141B2E 62%);
}

.sjbs-home .sc-ar__wh i {
	inset: 18%;
	border-radius: 50%;
	background: conic-gradient(from 0deg, #9FB2E0 0 10%, transparent 0 25%, #9FB2E0 0 35%, transparent 0 50%, #9FB2E0 0 60%, transparent 0 75%, #9FB2E0 0 85%, transparent 0);
	animation: scx-ar-spin calc(.6s * var(--T)) linear infinite;
}

.sjbs-home .sc-ar__wh--a,
.sjbs-home .sc-ar__wh--c { left: calc(var(--S) * -.36); }
.sjbs-home .sc-ar__wh--b,
.sjbs-home .sc-ar__wh--d { left: calc(var(--S) * .2); }
.sjbs-home .sc-ar__wh--a,
.sjbs-home .sc-ar__wh--b { transform: translateZ(calc(var(--S) * .195)); }
.sjbs-home .sc-ar__wh--c,
.sjbs-home .sc-ar__wh--d { transform: translateZ(calc(var(--S) * -.195)); }

@keyframes scx-ar-spin {
	to { transform: rotate(360deg); }
}

/* ========================================================== Learning staircase (Academics)
   Four 3D steps (Foundational → Secondary). A graduation cap hops up stage by stage,
   a star bursts when it reaches the top, subject chips orbit around. */
.sjbs-home .sc-st__glow {
	top: 50%;
	left: 50%;
	width: calc(var(--S) * 2.8);
	height: calc(var(--S) * 2.8);
	margin: calc(var(--S) * -1.4) 0 0 calc(var(--S) * -1.4);
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(255, 255, 255, .7), rgba(150, 190, 255, .25) 55%, transparent);
	animation: scx-glow calc(4s * var(--T)) ease-in-out infinite;
}

.sjbs-home .sc-st {
	--w: calc(var(--S) * .56);
	--h: calc(var(--S) * .32);
	--d: calc(var(--S) * .6);
	top: 50%;
	left: 50%;
	width: calc(var(--w) * 4);
	height: calc(var(--h) * 4);
	margin: calc(var(--h) * -1.6) 0 0 calc(var(--w) * -2);
	transform-style: preserve-3d;
	animation: scx-float calc(6s * var(--T)) ease-in-out infinite;
}

.sjbs-home .sc-st__world {
	inset: 0;
	transform-style: preserve-3d;
	transform: rotateX(-13deg) rotateY(-30deg);
}

.sjbs-home .sc-st__step {
	bottom: 0;
	left: calc(var(--i) * var(--w));
	width: var(--w);
	height: calc((var(--i) + 1) * var(--h));
	transform-style: preserve-3d;
	transform-origin: 50% 100%;
	animation: scx-st-rise calc(1s * var(--T)) cubic-bezier(.3, 1.4, .5, 1) backwards;
	animation-delay: calc(.3s + var(--i) * .18s);
}

.sjbs-home .sc-st__face {
	position: absolute;
	background: var(--c);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.sjbs-home .sc-st__face--fr {
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: calc(var(--S) * .03);
	padding-top: calc(var(--S) * .05);
	border-radius: 6px 6px 0 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 60%), var(--c);
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35);
	transform: translateZ(calc(var(--d) / 2));
}

.sjbs-home .sc-st__face--fr em {
	font-family: var(--sjbs-font-body);
	font-size: calc(var(--S) * .062);
	font-style: normal;
	font-weight: 800;
	line-height: 1.1;
	color: #FFFFFF;
	text-align: center;
	white-space: nowrap;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}

.sjbs-home .sjbs-sc .sc-st__ic {
	position: relative;
	display: grid;
	place-items: center;
	width: calc(var(--S) * .17);
	height: calc(var(--S) * .17);
	border-radius: 30%;
	background: rgba(255, 255, 255, .9);
	color: var(--c);
	font-size: calc(var(--S) * .1);
	box-shadow: 0 6px 12px -6px rgba(23, 52, 140, .5);
}

.sjbs-home .sc-st__face--tp {
	top: 0;
	left: 0;
	width: var(--w);
	height: var(--d);
	transform-origin: 50% 0;
	transform: translateZ(calc(var(--d) / -2)) rotateX(90deg);
	filter: brightness(1.18);
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .4);
}

.sjbs-home .sc-st__face--rt {
	top: 0;
	left: var(--w);
	width: var(--d);
	height: 100%;
	transform-origin: 0 50%;
	transform: translateZ(calc(var(--d) / 2)) rotateY(90deg);
	filter: brightness(.78);
}

@keyframes scx-st-rise {
	0%   { transform: scaleY(.02); }
	100% { transform: scaleY(1); }
}

/* Graduation cap hopping up the stages */
.sjbs-home .sc-st__cap {
	bottom: 0;
	left: 0;
	width: calc(var(--S) * .34);
	height: calc(var(--S) * .26);
	margin-left: calc(var(--S) * -.17);
	transform-style: preserve-3d;
	animation: scx-st-hop calc(9s * var(--T)) ease-in-out infinite;
	animation-delay: calc(1.4s * var(--T));
	opacity: 0;
}

.sjbs-home .sc-st__capin {
	inset: 0;
	animation: scx-st-tilt calc(9s * var(--T)) ease-in-out infinite;
	animation-delay: calc(1.4s * var(--T));
}

.sjbs-home .sc-st__crown {
	left: 22%;
	right: 22%;
	bottom: 4%;
	height: 42%;
	border-radius: 4px 4px 40% 40%;
	background: linear-gradient(180deg, #24346B, #0B1630);
}

.sjbs-home .sc-st__board {
	left: 0;
	right: 0;
	top: 6%;
	height: 34%;
	border-radius: 4px;
	background: linear-gradient(135deg, #3A4C8F, #0B1630 70%);
	transform: perspective(160px) rotateX(55deg);
	box-shadow: 0 4px 0 #050B1C;
}

.sjbs-home .sc-st__tassel {
	left: 50%;
	top: 18%;
	width: 3px;
	height: 58%;
	margin-left: calc(var(--S) * .09);
	border-radius: 2px;
	background: var(--sjbs-gold);
	transform-origin: 50% 0;
	animation: scx-st-tassel calc(1.2s * var(--T)) ease-in-out infinite;
}

.sjbs-home .sc-st__tassel::after {
	content: "";
	position: absolute;
	left: -4px;
	bottom: -6px;
	width: 11px;
	height: 12px;
	border-radius: 3px 3px 6px 6px;
	background: var(--sjbs-gold);
}

.sjbs-home .sc-st__shadow {
	left: 15%;
	right: 15%;
	bottom: -6%;
	height: 12%;
	border-radius: 50%;
	background: rgba(11, 22, 48, .25);
	filter: blur(3px);
}

@keyframes scx-st-tassel {
	0%, 100% { transform: rotate(8deg); }
	50%      { transform: rotate(-8deg); }
}

@keyframes scx-st-hop {
	0%   { transform: translate(calc(var(--w) * .5), calc(var(--h) * -1)) scale(.6); opacity: 0; }
	5%   { transform: translate(calc(var(--w) * .5), calc(var(--h) * -1)) scale(1); opacity: 1; }
	13%  { transform: translate(calc(var(--w) * .5), calc(var(--h) * -1)) scale(1); }
	19%  { transform: translate(calc(var(--w) * 1), calc(var(--h) * -2.9)) scale(1); }
	25%  { transform: translate(calc(var(--w) * 1.5), calc(var(--h) * -2)) scale(1); }
	33%  { transform: translate(calc(var(--w) * 1.5), calc(var(--h) * -2)) scale(1); }
	39%  { transform: translate(calc(var(--w) * 2), calc(var(--h) * -3.9)) scale(1); }
	45%  { transform: translate(calc(var(--w) * 2.5), calc(var(--h) * -3)) scale(1); }
	53%  { transform: translate(calc(var(--w) * 2.5), calc(var(--h) * -3)) scale(1); }
	59%  { transform: translate(calc(var(--w) * 3), calc(var(--h) * -4.9)) scale(1); }
	65%  { transform: translate(calc(var(--w) * 3.5), calc(var(--h) * -4)) scale(1.12); opacity: 1; }
	88%  { transform: translate(calc(var(--w) * 3.5), calc(var(--h) * -4)) scale(1.12); opacity: 1; }
	96%  { transform: translate(calc(var(--w) * 3.5), calc(var(--h) * -5.4)) scale(.7); opacity: 0; }
	100% { transform: translate(calc(var(--w) * .5), calc(var(--h) * -1)) scale(.6); opacity: 0; }
}

@keyframes scx-st-tilt {
	0%, 13%, 25%, 33%, 45%, 53%, 65%, 100% { transform: rotate(0) scaleY(1); }
	15%, 35%, 55% { transform: rotate(0) scaleY(.82); }
	19%, 39%, 59% { transform: rotate(-14deg) scaleY(1.05); }
	24%, 44%      { transform: rotate(4deg) scaleY(.88); }
	66%           { transform: rotate(0) scaleY(.85); }
	72%, 84%      { transform: rotate(-6deg) translateY(calc(var(--S) * -.04)); }
	78%           { transform: rotate(6deg) translateY(0); }
}

/* Star burst when the cap reaches the top step */
.sjbs-home .sc-st__burst {
	bottom: calc(var(--h) * 4 + var(--S) * .12);
	left: calc(var(--w) * 3.5);
	width: calc(var(--S) * .7);
	height: calc(var(--S) * .7);
	margin: 0 0 calc(var(--S) * -.35) calc(var(--S) * -.35);
	opacity: 0;
	animation: scx-st-burst calc(9s * var(--T)) ease-out infinite;
	animation-delay: calc(1.4s * var(--T));
}

.sjbs-home .sc-st__burst i {
	left: 50%;
	top: 50%;
	width: 4px;
	height: 26%;
	margin-left: -2px;
	border-radius: 2px;
	background: var(--sjbs-gold);
	transform-origin: 50% 0;
	transform: rotate(calc(var(--r, 0) * 45deg)) translateY(calc(var(--S) * .12));
}

.sjbs-home .sc-st__burst i:nth-child(1) { --r: 0; }
.sjbs-home .sc-st__burst i:nth-child(2) { --r: 1; background: #FFFFFF; }
.sjbs-home .sc-st__burst i:nth-child(3) { --r: 2; }
.sjbs-home .sc-st__burst i:nth-child(4) { --r: 3; background: #7FB1FF; }
.sjbs-home .sc-st__burst i:nth-child(5) { --r: 4; }
.sjbs-home .sc-st__burst i:nth-child(6) { --r: 5; background: #FFFFFF; }
.sjbs-home .sc-st__burst i:nth-child(7) { --r: 6; }
.sjbs-home .sc-st__burst i:nth-child(8) { --r: 7; background: #7FB1FF; }

.sjbs-home .sc-st__burst b {
	left: 50%;
	top: 50%;
	width: calc(var(--S) * .2);
	height: calc(var(--S) * .2);
	margin: calc(var(--S) * -.1) 0 0 calc(var(--S) * -.1);
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--sjbs-gold);
	color: #FFFFFF;
	font-size: calc(var(--S) * .12);
	box-shadow: 0 0 18px 4px rgba(255, 194, 61, .6);
}

@keyframes scx-st-burst {
	0%, 62% { transform: scale(.2); opacity: 0; }
	68%     { transform: scale(1.1); opacity: 1; }
	80%     { transform: scale(1); opacity: 1; }
	90%     { transform: scale(1.3); opacity: 0; }
	100%    { transform: scale(.2); opacity: 0; }
}

.sjbs-home .sjbs-sc--stairs .sc-chip--st {
	width: calc(var(--S) * .26);
	height: calc(var(--S) * .26);
	margin: calc(var(--S) * -.13) 0 0 calc(var(--S) * -.13);
	animation-duration: calc(14s * var(--T));
	animation-delay: calc(var(--k, 0) * -3.5s * var(--T));
}

.sjbs-home .sjbs-sc--stairs .sc-chip--st .sc-chip__in {
	font-size: calc(var(--S) * .13);
}

@media (prefers-reduced-motion: reduce) {
	.sjbs-home:not(.sjbs-force-motion) .sc-st__cap {
		opacity: 1;
		transform: translate(calc(var(--w) * 3.5), calc(var(--h) * -4));
	}
}