/* =========================================================
   GM SHOCK Motion - Logo Slider [gms_slider] + Hero Image [gms_hero_image]
   ========================================================= */

/* ---------------- Logo / image slider (infinite marquee) ---------------- */
.gms-slider {
	--gs-h: var(--gs-h-d, 56px);       /* image height (desktop) */
	--gs-gap: var(--gs-gap-d, 70px);   /* space between images */
	--gs-dur: 30s;         /* time for one full loop */
	position: relative; width: 100%; overflow: hidden;
	padding: 18px 0;
}
.gms-slider--fade {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.gms-slider__track {
	display: flex; width: max-content;
	animation: gmsMarquee var(--gs-dur) linear infinite;
	will-change: transform;
}
.gms-slider--right .gms-slider__track { animation-direction: reverse; }
.gms-slider--pause:hover .gms-slider__track { animation-play-state: paused; }
.gms-slider__set { display: flex; align-items: center; gap: var(--gs-gap); padding-right: var(--gs-gap); flex-shrink: 0; }
.gms-slider__item { flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.gms-slider__item img {
	display: block; height: var(--gs-h) !important; width: auto !important; max-width: none !important;
	object-fit: contain; border-radius: 0 !important; box-shadow: none !important;
	transition: filter .35s, opacity .35s, transform .35s cubic-bezier(.22,1,.36,1);
}
.gms-slider--gray .gms-slider__item img { filter: grayscale(1); opacity: .6; }
.gms-slider--gray .gms-slider__item:hover img { filter: none; opacity: 1; }
.gms-slider--grow .gms-slider__item:hover img { transform: scale(1.12); }
.gms-slider--cards .gms-slider__item {
	background: #fff; border: 1.5px solid #ECE7F7; border-radius: 16px;
	padding: 14px 22px; box-shadow: 0 8px 22px -14px rgba(40,10,90,.35);
}
.gms-slider--cards.gms-slider--dark .gms-slider__item { background: #15101f; border-color: #2a2142; }
@keyframes gmsMarquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

@media (max-width: 767px) {
	.gms-slider { --gs-h: var(--gs-h-m, 40px); --gs-gap: var(--gs-gap-m, 40px); }
}
@media (prefers-reduced-motion: reduce) {
	.gms-slider__track { animation-duration: calc(var(--gs-dur) * 4); }
}

/* ---------------- Hero image ---------------- */
.gms-hero-img {
	--gh-bg-dim: .82;       /* how dark the background becomes (0 - 1) */
	--gh-bg-color: #0d0b24;
	--gh-dur: 1.1s;
	--gh-delay: 0s;
	position: relative; isolation: isolate; width: 100%;
	display: flex; align-items: center; justify-content: center;
}
.gms-hero-img--has-bg { overflow: hidden; border-radius: var(--gh-radius, 0); min-height: var(--gh-minh, 0); padding: var(--gh-pad, 0); }

/* Background layer */
.gms-hero-img__bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
.gms-hero-img__shade { position: absolute; inset: 0; z-index: -1; background: var(--gh-bg-color); opacity: var(--gh-bg-dim); }

/* Main image + layers */
.gms-hero-img__stage { position: relative; display: inline-block; width: 100%; max-width: var(--gh-maxw, 560px); perspective: 900px; }
.gms-hero-img__tilt { transition: transform .5s cubic-bezier(.22,1,.36,1); transform-style: preserve-3d; }
.gms-hero-img__float { position: relative; }
.gms-hero-img__main { display: block; width: 100% !important; height: auto !important; max-width: 100% !important; border-radius: 0 !important; box-shadow: none !important; position: relative; z-index: 1; }
.gms-hero-img__glow {
	position: absolute; left: 50%; top: 55%; width: 78%; aspect-ratio: 1; z-index: 0; pointer-events: none;
	transform: translate(-50%, -50%); border-radius: 50%;
	background: radial-gradient(closest-side, var(--gh-glow, rgba(123,44,245,.55)), transparent 72%);
	filter: blur(6px);
}

/* Loop effects (start after entrance) */
.gms-hero-img--float.is-done .gms-hero-img__float { animation: gmsHeroFloat 5.5s ease-in-out infinite; }
.gms-hero-img--glow.is-done .gms-hero-img__glow { animation: gmsHeroGlow 3.6s ease-in-out infinite; }
@keyframes gmsHeroFloat { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-14px) rotate(.6deg); } }
@keyframes gmsHeroGlow { 0%,100% { opacity: .55; transform: translate(-50%,-50%) scale(.92); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.05); } }

/* ---- Entrance: hidden only while JS is waiting (html.gms-fx-ready) ---- */
html.gms-fx-ready .gms-hero-img:not(.is-in) .gms-hero-img__main,
html.gms-fx-ready .gms-hero-img:not(.is-in) .gms-hero-img__glow { opacity: 0; }
/* Safety net: if the script never runs, show the image after 4s */
html.gms-fx-ready .gms-hero-img:not(.is-in) .gms-hero-img__main { animation: gmsFxSafety .4s ease 4s forwards; }
@keyframes gmsFxSafety { to { opacity: 1; } }
html.gms-fx-ready .gms-hero-img:not(.is-in).gms-hero-img--bg-reveal .gms-hero-img__shade { opacity: 0; }
html.gms-fx-ready .gms-hero-img:not(.is-in).gms-hero-img--bg-zoom .gms-hero-img__bg { transform: scale(1.18); }

/* Image entrance */
.gms-hero-img.is-in .gms-hero-img__main { animation: var(--gh-in, gmsInDrop) var(--gh-dur) cubic-bezier(.22,1,.36,1) var(--gh-delay) both; }
.gms-hero-img.is-in .gms-hero-img__glow { animation: gmsInFade calc(var(--gh-dur) * 1.2) ease var(--gh-delay) both; }
.gms-hero-img--in-drop  { --gh-in: gmsInDrop; }
.gms-hero-img--in-zoom  { --gh-in: gmsInZoom; }
.gms-hero-img--in-up    { --gh-in: gmsInUp; }
.gms-hero-img--in-left  { --gh-in: gmsInLeft; }
.gms-hero-img--in-right { --gh-in: gmsInRight; }
.gms-hero-img--in-blur  { --gh-in: gmsInBlur; }
.gms-hero-img--in-flash { --gh-in: gmsInFlash; }
@keyframes gmsInDrop  { 0% { opacity: 0; transform: translate(4%, -32%) scale(.9) rotate(-4deg); } 60% { opacity: 1; transform: translate(0, 3%) scale(1.01) rotate(.5deg); } 80% { transform: translate(0,-1.5%); } 100% { opacity: 1; transform: none; } }
@keyframes gmsInZoom  { 0% { opacity: 0; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.04); } 100% { opacity: 1; transform: none; } }
@keyframes gmsInUp    { 0% { opacity: 0; transform: translateY(18%); } 100% { opacity: 1; transform: none; } }
@keyframes gmsInLeft  { 0% { opacity: 0; transform: translateX(-22%) rotate(-3deg); } 100% { opacity: 1; transform: none; } }
@keyframes gmsInRight { 0% { opacity: 0; transform: translateX(22%) rotate(3deg); } 100% { opacity: 1; transform: none; } }
@keyframes gmsInBlur  { 0% { opacity: 0; filter: blur(18px); transform: scale(1.08); } 100% { opacity: 1; filter: none; transform: none; } }
@keyframes gmsInFlash { 0% { opacity: 0; filter: brightness(3) blur(6px); transform: scale(.94); } 25% { opacity: 1; filter: brightness(2.4); } 40% { filter: brightness(1); } 52% { filter: brightness(1.8); } 100% { opacity: 1; filter: none; transform: none; } }
@keyframes gmsInFade  { from { opacity: 0; } to { opacity: 1; } }

/* Background entrance */
.gms-hero-img--bg-reveal.is-in .gms-hero-img__shade { animation: gmsShadeIn calc(var(--gh-dur) * 1.6) ease .15s both; }
@keyframes gmsShadeIn { from { opacity: 0; } to { opacity: var(--gh-bg-dim); } }
.gms-hero-img--bg-zoom .gms-hero-img__bg { transition: transform 2.4s cubic-bezier(.22,1,.36,1); }
.gms-hero-img--bg-drift.is-in .gms-hero-img__bg { animation: gmsBgDrift 24s ease-in-out infinite alternate; }
@keyframes gmsBgDrift { from { transform: scale(1.06) translate(-1.5%, -1%); } to { transform: scale(1.14) translate(1.5%, 1%); } }

@media (prefers-reduced-motion: reduce) {
	.gms-hero-img.is-in .gms-hero-img__main, .gms-hero-img.is-in .gms-hero-img__glow,
	.gms-hero-img--float.is-done .gms-hero-img__float, .gms-hero-img--glow.is-done .gms-hero-img__glow,
	.gms-hero-img--bg-reveal.is-in .gms-hero-img__shade, .gms-hero-img--bg-drift.is-in .gms-hero-img__bg { animation: none !important; }
	html.gms-fx-ready .gms-hero-img .gms-hero-img__main { opacity: 1; }
}