/* =========================================================
   DigitalShri – Showcase Hero (Elementor widget "DS Showcase Hero")
   1. heading / text / buttons  2. video that grows on scroll  3. logo marquee
   Brand colours only. Colours/sizes are CSS variables for the Style tab.
   ========================================================= */

.elementor-widget-ds-showcase { width: 100%; }

.ds-sc {
  --sc-gap: 64px;
  --sc-frame-1: #851CF2;
  --sc-frame-2: #1E51F1;
  --sc-frame-pad: 14px;
  --sc-radius: 40px;
  --sc-line: rgba(23, 24, 28, 0.15);
  --sc-logo-h: 40px;
  --sc-logo-gap: 64px;
  position: relative;
  padding: 150px 24px 70px; /* top clears the fixed site header */
  overflow: hidden;
  background: #FFFFFF;
  font-family: "Montserrat", sans-serif;
  color: #17181C;
  box-sizing: border-box;
}
.ds-sc *, .ds-sc *::before, .ds-sc *::after { box-sizing: border-box; }

/* faint vertical light bars at the top (brand violet tint) */
.ds-sc .sc-bars {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(1000px, 100%);
  height: 520px;
  transform: translateX(-50%);
  pointer-events: none;
  background: repeating-linear-gradient(90deg,
    transparent 0 9%,
    rgba(133, 28, 242, 0.06) 9% 14%,
    transparent 14% 20%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
}

.ds-sc .sc-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sc-gap);
  max-width: 1320px;
  margin: 0 auto;
}

/* =================== 1. Header =================== */
.ds-sc .sc-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 820px;
  text-align: center;
}
.ds-sc .sc-eyebrow {
  display: inline-block;
  margin: 0 0 18px;
  padding: 7px 16px;
  border-radius: 8px;
  background-color: #17181C;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.ds-sc .sc-eyebrow strong { color: #F38218; font-weight: 800; }
.ds-sc .sc-title {
  margin: 0 0 16px;
  padding: 0;
  color: #17181C;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(34px, 5vw, 64px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -1px;
}
.ds-sc .sc-title span { color: #851CF2; }
.ds-sc .sc-text {
  max-width: 560px;
  margin: 0 0 26px;
  color: rgba(23, 24, 28, 0.72);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
}
.ds-sc .sc-platforms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 22px;
}
.ds-sc .sc-platforms-label { color: rgba(23, 24, 28, 0.75); font-size: 14px; font-weight: 500; }
.ds-sc .sc-platforms-list { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* round brand-colour badges with a white symbol */
.ds-sc .sc-pbadge {
  --c: var(--sc-pb-violet, #851CF2);
  display: grid;
  place-items: center;
  width: var(--sc-pbadge, 30px);
  height: var(--sc-pbadge, 30px);
  border-radius: 50%;
  background-color: var(--c);
  color: #FFFFFF;
  box-shadow: 0 0 0 2px #FFFFFF, 0 6px 14px rgba(23, 24, 28, 0.15);
  transition: transform 0.25s ease;
}
.ds-sc .sc-pbadge[data-c="blue"]   { --c: var(--sc-pb-blue, #1E51F1); }
.ds-sc .sc-pbadge[data-c="orange"] { --c: var(--sc-pb-orange, #F38218); }
.ds-sc .sc-pbadge[data-c="dark"]   { --c: var(--sc-pb-dark, #17181C); }
.ds-sc .sc-pbadge:hover { transform: translateY(-3px); }
.ds-sc .sc-pbadge svg { display: block; width: 58%; height: 58%; }
.ds-sc .sc-platform {
  display: block;
  width: 70%;
  height: 70%;
  border-radius: 50%;
  object-fit: contain;
}

.ds-sc .sc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 26px;
}
.ds-sc .sc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border: 0 solid transparent; /* width / colour can be set in the Style tab */
  border-radius: 50px;
  background: linear-gradient(135deg, #851CF2, #6A12C9);
  color: #FFFFFF;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 0 0 5px rgba(133, 28, 242, 0.15), 0 14px 30px rgba(133, 28, 242, 0.3);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.ds-sc .sc-btn i { font-size: 16px; }
.ds-sc .sc-btn svg { width: 16px; height: 16px; fill: currentColor; }
.ds-sc .sc-btn:hover,
.ds-sc .sc-btn:focus-visible {
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 0 0 6px rgba(133, 28, 242, 0.2), 0 18px 36px rgba(133, 28, 242, 0.4);
  outline: none;
}
.ds-sc .sc-btn-2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #1E51F1;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.25s ease;
}
.ds-sc .sc-btn-2 svg { width: 18px; height: 18px; transition: transform 0.25s ease; }
.ds-sc .sc-btn-2:hover,
.ds-sc .sc-btn-2:focus-visible { color: #851CF2; outline: none; }
.ds-sc .sc-btn-2:hover svg,
.ds-sc .sc-btn-2:focus-visible svg { transform: translateX(4px); }

/* =================== 2. Video (grows on scroll) =================== */
.ds-sc .sc-video-wrap {
  --sc-p: 1;               /* 0 = start size, 1 = full size (set by JS while scrolling) */
  width: 100%;
  max-width: 1240px;
}
.ds-sc .sc-video-frame {
  padding: var(--sc-frame-pad);
  border-radius: var(--sc-radius);
  background: linear-gradient(135deg, var(--sc-frame-1), var(--sc-frame-2));
  box-shadow: 0 30px 70px rgba(133, 28, 242, 0.25);
  transform-origin: center top;
  will-change: transform;
}
.ds-sc .sc-video-wrap.is-grow .sc-video-frame {
  transform: scale(calc(var(--sc-start, 0.78) + (1 - var(--sc-start, 0.78)) * var(--sc-p)));
}
.ds-sc .sc-video-inner {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--sc-radius) - var(--sc-frame-pad) / 2);
  aspect-ratio: 16 / 9;
  background: #17181C;
}
.ds-sc .sc-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
.ds-sc .sc-video-img.is-placeholder { background: rgba(255, 255, 255, 0.08); }

/* =================== 3. Logo marquee =================== */
.ds-sc .sc-logos { width: 100%; }
.ds-sc .sc-logos-title {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 30px;
  color: #17181C;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}
.ds-sc .sc-logos-title::before,
.ds-sc .sc-logos-title::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sc-line));
}
.ds-sc .sc-logos-title::after { background: linear-gradient(90deg, var(--sc-line), transparent); }
.ds-sc .sc-logos-title span { flex: 0 1 auto; }

.ds-sc .sc-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.ds-sc .sc-track {
  display: flex;
  width: max-content;
  animation: dsScMarquee var(--sc-dur, 20s) linear infinite;
}
.ds-sc .sc-marquee:hover .sc-track,
.ds-sc .sc-marquee:focus-within .sc-track { animation-play-state: paused; }
@keyframes dsScMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* exactly one copy of the list */
}
.ds-sc .sc-logo-list {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: var(--sc-logo-gap);
  margin: 0;
  padding: 0 calc(var(--sc-logo-gap) / 2);
  list-style: none;
}
.ds-sc .sc-logo-item { flex-shrink: 0; margin: 0; }
.ds-sc .sc-logo-item a { display: block; }
.ds-sc .sc-logo {
  display: block;
  width: auto;
  max-width: 180px;
  height: var(--sc-logo-h);
  object-fit: contain;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.ds-sc .sc-logos.is-gray .sc-logo { filter: grayscale(1); opacity: 0.6; }
.ds-sc .sc-logos.is-gray .sc-logo-item:hover .sc-logo { filter: none; opacity: 1; }

/* =================== 3D Scroll Effect (switch in the widget) ===================
   JS only updates three variables, once per frame, while the section is on screen:
   --s3d (section scrolled, 0–1), --sc-p (video frame, 0–1), --l3d (logo row, 0–1).
   Everything here is transform / opacity, so the browser can animate it smoothly. */
.ds-sc.is-3d { --s3d: 0; --l3d: 1; background: linear-gradient(180deg, rgba(133, 28, 242, 0.05) 0%, #FFFFFF 55%); }
.ds-sc.is-3d .sc-inner { perspective: 1300px; perspective-origin: 50% 20%; }

/* heading block zooms out while scrolling; moving down against the scroll keeps it on screen
   long enough to see it, and it ends up behind the video frame */
.ds-sc.is-3d .sc-head {
  transform: translate3d(0, calc(var(--h3d, 0) * 230px), 0) scale(calc(1 - var(--h3d, 0) * 0.5));
  transform-origin: 50% 50%;
  opacity: calc(1 - var(--h3d, 0) * 0.85);
  will-change: transform, opacity;
}
.ds-sc.is-3d .sc-title { text-shadow: 0 1px 0 rgba(133, 28, 242, 0.22), 0 2px 0 rgba(133, 28, 242, 0.16), 0 3px 0 rgba(30, 81, 241, 0.12), 0 10px 22px rgba(23, 24, 28, 0.14); }

/* video frame: tilted back on load, comes forward and flattens */
.ds-sc.is-3d .sc-video-wrap { position: relative; perspective: 1500px; perspective-origin: 50% 0%; }
.ds-sc.is-3d .sc-video-frame {
  position: relative;
  transform: rotateX(calc((1 - var(--sc-p)) * 32deg));
  transform-origin: 50% 40%;
  transform-style: preserve-3d;
}
.ds-sc.is-3d .sc-video-wrap.is-grow .sc-video-frame {
  transform: rotateX(calc((1 - var(--sc-p)) * 32deg)) scale(calc(var(--sc-start, 0.78) + (1 - var(--sc-start, 0.78)) * var(--sc-p)));
}
/* glowing slabs behind the frame: spread apart while tilted, merge when flat */
.ds-sc.is-3d .sc-video-frame::before,
.ds-sc.is-3d .sc-video-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--sc-radius);
  background: linear-gradient(135deg, var(--sc-frame-1), var(--sc-frame-2));
  pointer-events: none;
}
.ds-sc.is-3d .sc-video-frame::before { opacity: calc((1 - var(--sc-p)) * 0.4); transform: translateZ(calc((1 - var(--sc-p)) * -70px)); }
.ds-sc.is-3d .sc-video-frame::after { background: linear-gradient(135deg, #F38218, var(--sc-frame-1)); opacity: calc((1 - var(--sc-p)) * 0.22); transform: translateZ(calc((1 - var(--sc-p)) * -140px)); }
.ds-sc.is-3d .sc-video-inner { transform: translateZ(1px); }
/* soft shadow on the "floor", fades as the frame lands */
.ds-sc.is-3d .sc-video-wrap::after {
  content: "";
  position: absolute;
  right: 6%;
  bottom: -46px;
  left: 6%;
  z-index: -1;
  height: 90px;
  background: radial-gradient(ellipse at center, rgba(133, 28, 242, 0.32), transparent 70%);
  opacity: calc(1 - var(--sc-p) * 0.7);
  pointer-events: none;
}

/* logo row swings up into place */
.ds-sc.is-3d .sc-logos {
  transform: rotateX(calc((1 - var(--l3d)) * -55deg)) translateY(calc((1 - var(--l3d)) * 50px));
  transform-origin: 50% 100%;
  opacity: calc(0.15 + var(--l3d) * 0.85);
}

/* decorative scene behind the content */
.ds-sc .sc-3d-scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; perspective: 900px; perspective-origin: 50% 25%; pointer-events: none; }
.ds-sc .sc-3d-floor {
  position: absolute;
  top: 300px;
  left: -60%;
  width: 220%;
  height: 900px;
  background-image:
    linear-gradient(rgba(133, 28, 242, 0.2) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(30, 81, 241, 0.16) 1.5px, transparent 1.5px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 10%, transparent 65%);
          mask-image: radial-gradient(ellipse at 50% 30%, #000 10%, transparent 65%);
  transform: rotateX(74deg) translate3d(0, calc(var(--s3d) * 256px), 0);
  transform-origin: 50% 0;
}
.ds-sc .sc-3d-obj {
  position: absolute;
  display: block;
  transform-style: preserve-3d;
  will-change: transform;
}
.ds-sc .sc-3d-a { top: 170px; left: 8%; transform: translate3d(0, calc(var(--s3d) * -260px), 0); }
.ds-sc .sc-3d-b { top: 240px; right: 9%; transform: translate3d(0, calc(var(--s3d) * -420px), 0); }
.ds-sc .sc-3d-c { top: 440px; left: 13%; transform: translate3d(0, calc(var(--s3d) * -160px), 0); }
.ds-sc .sc-3d-d { top: 430px; right: 14%; transform: translate3d(0, calc(var(--s3d) * -320px), 0); }
.ds-sc .sc-3d-e { top: 130px; right: 24%; transform: translate3d(0, calc(var(--s3d) * -180px), 0); }

/* real 3D cubes, turned by scrolling (+ a slow float) */
.ds-sc .sc-cube {
  --cube: 74px;
  --c1: #851CF2;
  --c2: #6A12C9;
  --c3: #4C0C94;
  position: relative;
  display: block;
  width: var(--cube);
  height: var(--cube);
  transform-style: preserve-3d;
  transform: rotateX(calc(-24deg + var(--s3d) * 280deg)) rotateY(calc(36deg + var(--s3d) * 340deg));
}
.ds-sc .sc-cube.is-orange { --cube: 54px; --c1: #F38218; --c2: #D96E0D; --c3: #B45A08; }
.ds-sc .sc-cube.is-blue { --cube: 44px; --c1: #1E51F1; --c2: #1740C4; --c3: #113095; }
.ds-sc .sc-cube i { position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 8px; background: var(--c1); backface-visibility: hidden; }
.ds-sc .sc-cube i:nth-child(1) { transform: translateZ(calc(var(--cube) / 2)); }
.ds-sc .sc-cube i:nth-child(2) { background: var(--c3); transform: rotateY(180deg) translateZ(calc(var(--cube) / 2)); }
.ds-sc .sc-cube i:nth-child(3) { background: var(--c2); transform: rotateY(90deg) translateZ(calc(var(--cube) / 2)); }
.ds-sc .sc-cube i:nth-child(4) { background: var(--c2); transform: rotateY(-90deg) translateZ(calc(var(--cube) / 2)); }
.ds-sc .sc-cube i:nth-child(5) { background: linear-gradient(135deg, #FFFFFF -60%, var(--c1) 70%); transform: rotateX(90deg) translateZ(calc(var(--cube) / 2)); }
.ds-sc .sc-cube i:nth-child(6) { background: var(--c3); transform: rotateX(-90deg) translateZ(calc(var(--cube) / 2)); }

.ds-sc .sc-ring {
  display: block;
  width: 96px;
  height: 96px;
  border: 12px solid #851CF2;
  border-right-color: #1E51F1;
  border-bottom-color: #F38218;
  border-radius: 50%;
  box-shadow: 0 16px 28px rgba(133, 28, 242, 0.22);
  transform: rotateX(calc(62deg - var(--s3d) * 200deg)) rotateZ(calc(var(--s3d) * 300deg));
}
.ds-sc .sc-orb {
  display: block;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #FFFFFF 0%, #F38218 38%, #B45A08 100%);
  box-shadow: 0 12px 22px rgba(243, 130, 24, 0.3);
}
/* slow float, on the inner shape so it never fights the scroll movement */
.ds-sc .sc-3d-obj > * { animation: dsSc3dFloat 7s ease-in-out infinite; }
.ds-sc .sc-3d-b > * { animation-delay: -2s; }
.ds-sc .sc-3d-c > * { animation-delay: -4s; }
.ds-sc .sc-3d-d > * { animation-delay: -1s; }
.ds-sc .sc-3d-e > * { animation-delay: -3s; }
@keyframes dsSc3dFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }

@media (max-width: 1200px) {
  .ds-sc .sc-3d-a { left: 3%; }
  .ds-sc .sc-3d-b { right: 3%; }
  .ds-sc .sc-3d-c { left: 4%; }
  .ds-sc .sc-3d-d { right: 4%; }
  .ds-sc .sc-3d-e { right: 14%; }
}
@media (max-width: 1024px) {
  .ds-sc .sc-cube { --cube: 50px; }
  .ds-sc .sc-cube.is-orange { --cube: 38px; }
  .ds-sc .sc-3d-a { top: 120px; left: 3%; }
  .ds-sc .sc-3d-b { top: 130px; right: 3%; }
  .ds-sc .sc-3d-c, .ds-sc .sc-3d-d, .ds-sc .sc-3d-e { display: none; }
  .ds-sc .sc-3d-floor { top: 420px; }
  .ds-sc.is-3d .sc-video-frame { transform: rotateX(calc((1 - var(--sc-p)) * 24deg)); }
  .ds-sc.is-3d .sc-video-wrap.is-grow .sc-video-frame { transform: rotateX(calc((1 - var(--sc-p)) * 24deg)) scale(calc(var(--sc-start, 0.78) + (1 - var(--sc-start, 0.78)) * var(--sc-p))); }
}
@media (max-width: 767px) {
  /* small cubes in the corners only, clear of the text */
  .ds-sc .sc-cube { --cube: 26px; }
  .ds-sc .sc-cube i { border-radius: 4px; }
  .ds-sc .sc-cube.is-orange { --cube: 22px; }
  .ds-sc .sc-3d-a { top: 96px; left: 10px; }
  .ds-sc .sc-3d-b { top: 100px; right: 12px; }
  .ds-sc .sc-3d-floor { top: 520px; background-size: 48px 48px; }
  .ds-sc.is-3d .sc-head { transform: translate3d(0, calc(var(--h3d, 0) * 150px), 0) scale(calc(1 - var(--h3d, 0) * 0.4)); }
  .ds-sc.is-3d .sc-video-wrap { perspective: 800px; }
  .ds-sc.is-3d .sc-video-frame::before { transform: translateZ(calc((1 - var(--sc-p)) * -40px)); }
  .ds-sc.is-3d .sc-video-frame::after { transform: translateZ(calc((1 - var(--sc-p)) * -80px)); }
}
@media (prefers-reduced-motion: reduce) {
  .ds-sc.is-3d .sc-head, .ds-sc.is-3d .sc-logos, .ds-sc.is-3d .sc-video-frame, .ds-sc.is-3d .sc-video-wrap.is-grow .sc-video-frame { transform: none; opacity: 1; }
  .ds-sc.is-3d .sc-video-frame::before, .ds-sc.is-3d .sc-video-frame::after, .ds-sc .sc-3d-obj > * { display: none; animation: none; }
  .ds-sc .sc-3d-floor { transform: rotateX(74deg); }
}

/* =================== Responsive =================== */
@media (max-width: 1024px) {
  .ds-sc { padding: 130px 24px 60px; --sc-gap: 52px; --sc-radius: 30px; }
}
@media (max-width: 767px) {
  .ds-sc { padding: 115px 16px 50px; --sc-gap: 40px; --sc-radius: 22px; --sc-frame-pad: 8px; --sc-logo-h: 32px; --sc-logo-gap: 40px; }
  .ds-sc .sc-text { font-size: 15px; }
  .ds-sc .sc-actions { flex-direction: column; }
  .ds-sc .sc-logos-title { font-size: 15px; gap: 12px; }
  .ds-sc .sc-bars { height: 360px; }
}

@media (prefers-reduced-motion: reduce) {
  .ds-sc .sc-video-wrap.is-grow .sc-video-frame { transform: none; }
  .ds-sc .sc-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .ds-sc .sc-logo-list[aria-hidden="true"] { display: none; }
  .ds-sc .sc-logo-list { flex-wrap: wrap; justify-content: center; row-gap: 24px; }
  .ds-sc .sc-marquee { -webkit-mask-image: none; mask-image: none; }
}