/* =========================================================
   CENTUAL PREMIUM - 05 FRAME CONNECTORS
   Curved corner transitions between sections
   ========================================================= */

/* ========================================
   ROUNDED SECTION TRANSITIONS
   Creates smooth curved corners where sections meet
   ======================================== */

/* Section that curves into the one below (rounded bottom) */
.section-rounded-bottom {
  border-radius: 0 0 40px 40px;
  position: relative;
  z-index: 2;
}

/* Section that appears to emerge from above (rounded top) */
.section-rounded-top {
  border-radius: 40px 40px 0 0;
  margin-top: -40px;
  position: relative;
  z-index: 1;
}

/* Both corners rounded */
.section-rounded {
  border-radius: 40px;
  margin: var(--space-lg) 0;
  position: relative;
}

/* ========================================
   CORNER SIZES
   ======================================== */
.section-rounded-sm,
.section-rounded-top-sm,
.section-rounded-bottom-sm {
  border-radius: 24px;
}

.section-rounded-top-sm {
  border-radius: 24px 24px 0 0;
  margin-top: -24px;
}

.section-rounded-bottom-sm {
  border-radius: 0 0 24px 24px;
}

.section-rounded-lg,
.section-rounded-top-lg,
.section-rounded-bottom-lg {
  border-radius: 60px;
}

.section-rounded-top-lg {
  border-radius: 60px 60px 0 0;
  margin-top: -60px;
}

.section-rounded-bottom-lg {
  border-radius: 0 0 60px 60px;
}

/* ========================================
   CONNECTED FRAMES
   Seamless transitions between colored sections
   ======================================== */

/* Container for connected frame groups */
.frame-group {
  position: relative;
}

/* Frame that connects from above */
.frame-connect {
  position: relative;
}

.frame-connect::before {
  content: '';
  position: absolute;
  top: -40px;
  left: 0;
  right: 0;
  height: 40px;
  background: inherit;
  border-radius: 40px 40px 0 0;
}

/* Frame that connects to below */
.frame-connect-bottom::after {
  content: '';
  position: absolute;
  bottom: -40px;
  left: 0;
  right: 0;
  height: 40px;
  background: inherit;
  border-radius: 0 0 40px 40px;
  z-index: 1;
}

/* ========================================
   INSET CORNERS
   Creates the appearance of one section nestled into another
   ======================================== */
.section-inset {
  position: relative;
}

.section-inset::before,
.section-inset::after {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  background: transparent;
}

/* Top inset corners (section appears to cut into the one above) */
.section-inset-top::before {
  top: 0;
  left: 0;
  background: var(--centual-bg);
  border-radius: 0 0 40px 0;
}

.section-inset-top::after {
  top: 0;
  right: 0;
  background: var(--centual-bg);
  border-radius: 0 0 0 40px;
}

/* ========================================
   SUBTLE DIVIDER LINES
   Thin elegant separators between sections
   ======================================== */
.divider-subtle {
  position: relative;
}

.divider-subtle::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(80%, 800px);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(27, 20, 100, 0.1) 20%,
    rgba(27, 20, 100, 0.1) 80%,
    transparent 100%
  );
}

.divider-subtle-light::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 20%,
    rgba(255, 255, 255, 0.2) 80%,
    transparent 100%
  );
}

/* ========================================
   CORNER ACCENT DECORATIONS
   Subtle visual accents at section corners
   ======================================== */
.corner-accent {
  position: relative;
}

.corner-accent::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 80px;
  border-left: 2px solid rgba(27, 20, 100, 0.1);
  border-top: 2px solid rgba(27, 20, 100, 0.1);
  border-radius: 16px 0 0 0;
  pointer-events: none;
}

.corner-accent::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  border-right: 2px solid rgba(27, 20, 100, 0.1);
  border-top: 2px solid rgba(27, 20, 100, 0.1);
  border-radius: 0 16px 0 0;
  pointer-events: none;
}

.corner-accent-light::before,
.corner-accent-light::after {
  border-color: rgba(255, 255, 255, 0.15);
}

/* ========================================
   FLOATING SECTION CARDS
   Sections that appear to float above the background
   ======================================== */
.section-float {
  margin: var(--space-2xl) auto;
  max-width: calc(100% - var(--space-xl) * 2);
  border-radius: 24px;
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.02),
    0 12px 24px rgba(0, 0, 0, 0.04),
    0 24px 48px rgba(0, 0, 0, 0.04);
}

@media (min-width: 768px) {
  .section-float {
    max-width: calc(100% - var(--space-2xl) * 2);
    border-radius: 32px;
  }
}

@media (min-width: 1200px) {
  .section-float {
    max-width: 1400px;
    border-radius: 40px;
  }
}

/* ========================================
   SECTION OVERLAP TRANSITIONS
   Smooth overlapping between sections
   ======================================== */
.section-overlap {
  position: relative;
  z-index: 1;
}

.section-overlap + .section-overlap {
  margin-top: -60px;
  padding-top: calc(60px + var(--space-2xl));
}

/* ========================================
   CURVED EDGE MASKS
   SVG-based curved edges for more complex shapes
   ======================================== */
.curved-edge-top {
  position: relative;
  margin-top: -1px;
}

.curved-edge-top::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: inherit;
  clip-path: ellipse(60% 100% at 50% 100%);
  transform: translateY(-100%);
}

.curved-edge-bottom {
  position: relative;
}

.curved-edge-bottom::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: inherit;
  clip-path: ellipse(60% 100% at 50% 0%);
  transform: translateY(100%);
}

/* ========================================
   NOTCH CONNECTORS
   Creates a notch/tab effect between sections
   ======================================== */
.notch-connector {
  position: relative;
}

.notch-connector::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 40px;
  background: inherit;
  border-radius: 0 0 60px 60px;
  z-index: 2;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */
@media (max-width: 768px) {
  .section-rounded-bottom,
  .section-rounded-top {
    border-radius: 24px;
  }

  .section-rounded-top {
    margin-top: -24px;
  }

  .frame-connect::before,
  .frame-connect-bottom::after {
    height: 24px;
    border-radius: 24px 24px 0 0;
  }

  .frame-connect-bottom::after {
    bottom: -24px;
    border-radius: 0 0 24px 24px;
  }

  .section-overlap + .section-overlap {
    margin-top: -40px;
    padding-top: calc(40px + var(--space-xl));
  }

  .corner-accent::before,
  .corner-accent::after {
    width: 50px;
    height: 50px;
  }

  .notch-connector::after {
    width: 80px;
    height: 30px;
    bottom: -15px;
    border-radius: 0 0 40px 40px;
  }
}

/* ========================================
   REDUCED MOTION
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  .section-rounded-top,
  .section-rounded-bottom,
  .frame-connect::before,
  .frame-connect-bottom::after {
    transition: none;
  }
}