/*
 * Section: Hero — Klasik. Base .sembo-hero* layout rules live in main.css (shared
 * with legacy markup); this file only adds the section's decorative background
 * accent, replacing the old hard-coded ring shape with three cleaner, subtler
 * options selectable per instance.
 */

.sembo-hero {
  position: relative;
  overflow: hidden;
}

.sembo-hero-classic__decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Soft blobs: two large, gently blurred gradient circles — quiet, modern, works
 * with any brand palette because it's built from the live color tokens. */
.sembo-hero-classic__decor--soft-blobs::before,
.sembo-hero-classic__decor--soft-blobs::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
}

.sembo-hero-classic__decor--soft-blobs::before {
  top: -220px;
  left: -180px;
  width: 520px;
  height: 520px;
  background: var(--sembo-pl-40);
  opacity: 0.55;
}

.sembo-hero-classic__decor--soft-blobs::after {
  right: -160px;
  bottom: -240px;
  width: 460px;
  height: 460px;
  background: var(--sembo-pd-20);
  opacity: 0.6;
}

/* Geometric ring: one thin, quiet circle outline — minimal, corporate. */
.sembo-hero-classic__decor--geometric-ring::before {
  content: '';
  position: absolute;
  top: -140px;
  right: -140px;
  width: 460px;
  height: 460px;
  border: 1.5px solid var(--sembo-pd-28);
  border-radius: 50%;
}

.sembo-hero-classic__decor--geometric-ring::after {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 300px;
  height: 300px;
  border: 1.5px solid var(--sembo-pl-40);
  border-radius: 50%;
}

/* Dot grid: a small, quiet dot-pattern accent tucked in one corner. */
.sembo-hero-classic__decor--dot-grid::before {
  content: '';
  position: absolute;
  left: -20px;
  bottom: -20px;
  width: 220px;
  height: 220px;
  background-image: radial-gradient(var(--sembo-pd-28) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  opacity: 0.7;
  -webkit-mask-image: radial-gradient(circle at bottom left, #000 55%, transparent 80%);
  mask-image: radial-gradient(circle at bottom left, #000 55%, transparent 80%);
}

@media (max-width: 680px) {
  .sembo-hero-classic__decor--soft-blobs::before,
  .sembo-hero-classic__decor--soft-blobs::after {
    width: 320px;
    height: 320px;
  }

  .sembo-hero-classic__decor--geometric-ring::before,
  .sembo-hero-classic__decor--geometric-ring::after {
    display: none;
  }
}