:root {
  --ivan-neon-cyan: #57f7ff;
  --ivan-neon-magenta: #d64cff;
  --ivan-neon-purple: #8a65ff;
  --ivan-neon-orange: #ff9d22;
  --ivan-neon-bg: #050611;
  --ivan-neon-text: #f4f7ff;
  --ivan-neon-muted: #b1b9cf;
}

/*
  Add this class to the overlay/container you want to skin:
  ivan-neon-scroll-overlay

  The plugin also tries to style common scroll-video overlay class names.
*/

.ivan-neon-scroll-overlay,
.creative-scroll-hero .overlay,
.creative-scroll-hero__overlay,
.creative-scroll-overlay,
.scroll-video-overlay,
.csh-overlay,
.csv-overlay,
[data-scroll-video-overlay],
[data-creative-scroll-overlay] {
  position: relative;
  overflow: hidden;
  color: var(--ivan-neon-text);
  border: 1px solid rgba(87, 247, 255, .28);
  border-radius: clamp(22px, 3vw, 38px);
  background:
    radial-gradient(circle at 0% 0%, rgba(87, 247, 255, .18), transparent 30%),
    radial-gradient(circle at 100% 20%, rgba(214, 76, 255, .20), transparent 34%),
    linear-gradient(135deg, rgba(5, 8, 20, .74), rgba(18, 7, 35, .68));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .035),
    inset 0 0 42px rgba(214, 76, 255, .06),
    0 0 42px rgba(87, 247, 255, .10),
    0 30px 120px rgba(0, 0, 0, .38);
  backdrop-filter: blur(18px) saturate(1.18);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
}

.ivan-neon-scroll-overlay::before,
.creative-scroll-hero .overlay::before,
.creative-scroll-hero__overlay::before,
.creative-scroll-overlay::before,
.scroll-video-overlay::before,
.csh-overlay::before,
.csv-overlay::before,
[data-scroll-video-overlay]::before,
[data-creative-scroll-overlay]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(87,247,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214,76,255,.045) 1px, transparent 1px);
  background-size: 54px 54px;
  opacity: .35;
  mask-image: radial-gradient(circle at 58% 30%, #000, transparent 72%);
}

.ivan-neon-scroll-overlay::after,
.creative-scroll-hero .overlay::after,
.creative-scroll-hero__overlay::after,
.creative-scroll-overlay::after,
.scroll-video-overlay::after,
.csh-overlay::after,
.csv-overlay::after,
[data-scroll-video-overlay]::after,
[data-creative-scroll-overlay]::after {
  content: "";
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 24px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ivan-neon-cyan), var(--ivan-neon-magenta));
  box-shadow: 0 0 22px rgba(87,247,255,.55), 0 0 28px rgba(214,76,255,.35);
  opacity: .72;
  pointer-events: none;
}

.ivan-neon-overlay__scanline {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    180deg,
    rgba(255,255,255,.035) 0px,
    rgba(255,255,255,.035) 1px,
    transparent 1px,
    transparent 7px
  );
  opacity: .08;
  mix-blend-mode: screen;
}

.ivan-neon-overlay__orb {
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 999px;
  filter: blur(40px);
  opacity: .22;
  pointer-events: none;
}

.ivan-neon-overlay__orb--cyan {
  left: -70px;
  top: -70px;
  background: var(--ivan-neon-cyan);
}

.ivan-neon-overlay__orb--magenta {
  right: -70px;
  bottom: -70px;
  background: var(--ivan-neon-magenta);
}

.ivan-neon-overlay__content,
.ivan-neon-scroll-overlay > *:not(.ivan-neon-overlay__scanline):not(.ivan-neon-overlay__orb) {
  position: relative;
  z-index: 2;
}

.ivan-neon-scroll-overlay {
  min-height: clamp(360px, 62vh, 720px);
  display: flex;
  align-items: center;
  padding: clamp(28px, 6vw, 82px);
}

.ivan-neon-scroll-overlay--left {
  justify-content: flex-start;
  text-align: left;
}

.ivan-neon-scroll-overlay--center {
  justify-content: center;
  text-align: center;
}

.ivan-neon-scroll-overlay--right {
  justify-content: flex-end;
  text-align: right;
}

.ivan-neon-overlay__content {
  width: min(720px, 100%);
}

.ivan-neon-overlay__eyebrow,
.ivan-neon-scroll-overlay .eyebrow,
.ivan-neon-scroll-overlay .kicker,
.ivan-neon-scroll-overlay .subtitle-small {
  color: var(--ivan-neon-cyan);
  font-size: clamp(.72rem, 1.2vw, .9rem);
  line-height: 1.2;
  font-weight: 850;
  letter-spacing: .32em;
  text-transform: uppercase;
  margin-bottom: clamp(16px, 2.4vw, 26px);
  text-shadow: 0 0 20px rgba(87,247,255,.38);
}

.ivan-neon-overlay__title,
.ivan-neon-scroll-overlay h1,
.ivan-neon-scroll-overlay h2,
.creative-scroll-hero .overlay h1,
.creative-scroll-hero .overlay h2,
.creative-scroll-hero__overlay h1,
.creative-scroll-hero__overlay h2,
.scroll-video-overlay h1,
.scroll-video-overlay h2,
.csh-overlay h1,
.csh-overlay h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(3rem, 9vw, 8rem);
  line-height: .88;
  letter-spacing: -.065em;
  font-weight: 900;
  text-shadow:
    0 0 28px rgba(87,247,255,.10),
    0 0 54px rgba(214,76,255,.08);
}

.ivan-neon-overlay__subtitle,
.ivan-neon-scroll-overlay p,
.creative-scroll-hero .overlay p,
.creative-scroll-hero__overlay p,
.scroll-video-overlay p,
.csh-overlay p {
  max-width: 680px;
  margin: clamp(18px, 2.5vw, 30px) 0 0;
  color: var(--ivan-neon-muted);
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  line-height: 1.55;
}

.ivan-neon-scroll-overlay--center .ivan-neon-overlay__subtitle {
  margin-left: auto;
  margin-right: auto;
}

.ivan-neon-scroll-overlay--right .ivan-neon-overlay__subtitle {
  margin-left: auto;
}

.ivan-neon-overlay__button,
.ivan-neon-scroll-overlay a.button,
.ivan-neon-scroll-overlay .button,
.ivan-neon-scroll-overlay .elementor-button,
.creative-scroll-hero .overlay .elementor-button,
.scroll-video-overlay .elementor-button,
.csh-overlay .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  margin-top: clamp(24px, 3.6vw, 44px);
  padding: 16px 24px;
  border-radius: 999px;
  border: 1px solid rgba(87, 247, 255, .62);
  background:
    linear-gradient(90deg, rgba(87,247,255,.12), rgba(214,76,255,.10)),
    rgba(0,0,0,.20);
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 850;
  letter-spacing: .02em;
  box-shadow:
    0 0 24px rgba(87,247,255,.16),
    inset 0 0 22px rgba(214,76,255,.10);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.ivan-neon-overlay__button:hover,
.ivan-neon-scroll-overlay a.button:hover,
.ivan-neon-scroll-overlay .button:hover,
.ivan-neon-scroll-overlay .elementor-button:hover {
  transform: translateY(-2px);
  border-color: var(--ivan-neon-magenta);
  box-shadow:
    0 0 38px rgba(87,247,255,.24),
    0 0 26px rgba(214,76,255,.22),
    inset 0 0 24px rgba(214,76,255,.16);
}

.ivan-neon-overlay__button-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--ivan-neon-cyan), var(--ivan-neon-magenta));
  color: #050611;
  font-weight: 900;
}

/* Optional floating label/card inside overlays */
.ivan-neon-scroll-overlay .neon-card,
.creative-scroll-hero .overlay .neon-card,
.scroll-video-overlay .neon-card,
.csh-overlay .neon-card {
  border: 1px solid rgba(87,247,255,.28);
  border-radius: 24px;
  background: rgba(8, 12, 26, .68);
  box-shadow: 0 0 40px rgba(87,247,255,.10);
  padding: clamp(18px, 2.4vw, 30px);
}

/* Make video/canvas backgrounds feel integrated */
.ivan-neon-scroll-video video,
.ivan-neon-scroll-video canvas,
.creative-scroll-hero video,
.creative-scroll-hero canvas,
.scroll-video-section video,
.scroll-video-section canvas {
  filter: saturate(1.08) contrast(1.05);
}

.ivan-neon-scroll-video,
.creative-scroll-hero,
.scroll-video-section {
  background: #050611;
}

@media (max-width: 767px) {
  .ivan-neon-scroll-overlay {
    min-height: 480px;
    padding: 28px 22px 54px;
    border-radius: 24px;
  }

  .ivan-neon-scroll-overlay::after,
  .creative-scroll-hero .overlay::after,
  .creative-scroll-hero__overlay::after,
  .creative-scroll-overlay::after,
  .scroll-video-overlay::after,
  .csh-overlay::after,
  .csv-overlay::after,
  [data-scroll-video-overlay]::after,
  [data-creative-scroll-overlay]::after {
    left: 22px;
    right: 22px;
    bottom: 18px;
  }

  .ivan-neon-overlay__title,
  .ivan-neon-scroll-overlay h1,
  .ivan-neon-scroll-overlay h2 {
    font-size: clamp(2.6rem, 14vw, 4.2rem);
  }
}