/* ========================================
   MCSTONE.LT — BACKGROUND
   Smulkūs violetiniai taškeliai
   Be kvadratinio tinklelio
======================================== */

:root {
  --background-base: #060409;
  --background-purple: #b951ef;
}

/* Bendras fonas */

body {
  background: var(--background-base);
}

/* Hero fonui papildomų raštų nededame */

.hero {
  background-image: url("hero-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-grid,
.visual-grid {
  display: none !important;
  background-image: none !important;
}

/* ========================================
   SMULKIŲ TAŠKELIŲ SEKCIJA
======================================== */

.why-section {
  position: relative;
  isolation: isolate;
}

/* Taškeliai per visą sekciją */

.why-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;

  background-image: radial-gradient(
    circle,
    rgba(185, 81, 239, 0.38) 0.75px,
    transparent 1.1px
  );

  background-size: 18px 18px;
  background-position: center top;

  opacity: 0.42;

  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    #000 12%,
    #000 85%,
    transparent 100%
  );

  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    #000 12%,
    #000 85%,
    transparent 100%
  );
}

/* Švelnus violetinis švytėjimas */

.why-section::after {
  content: "";
  position: absolute;
  z-index: -2;
  top: 0;
  left: 50%;
  width: 100%;
  height: 700px;
  transform: translateX(-50%);
  pointer-events: none;

  background: radial-gradient(
    ellipse at center top,
    rgba(100, 28, 143, 0.10),
    transparent 65%
  );
}

/* ========================================
   KORTELIŲ FONAI
======================================== */

.experience-card {
  background-color: #110a17;
}

/* Tik nuotraukos, jokių tinklelių */

.experience-image {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* ========================================
   REŽIMŲ SEKCIJA
======================================== */

.modes {
  position: relative;
}

/* ========================================
   CTA FONAS
======================================== */

.cta {
  background-image:
    radial-gradient(
      ellipse at 12% 90%,
      rgba(143, 41, 194, 0.15),
      transparent 55%
    ),
    linear-gradient(
      120deg,
      #1a0b25,
      #09060e
    );
}

/* ========================================
   TELEFONAI
======================================== */

@media (max-width: 760px) {
  .why-section::before {
    background-size: 21px 21px;
    opacity: 0.3;
  }

  .why-section::after {
    height: 450px;
  }
}

/* ========================================
   PRIEINAMUMAS
======================================== */

@media (prefers-reduced-motion: reduce) {
  .experience-image {
    transition: none;
  }
}