/* ================================================
   Geometric Decoration Styles
   幾何学的装飾スタイル（シンプル版）
   ================================================ */

/* Container for geometric decorations */
.geometric-decoration {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

/* Prevent horizontal overflow from circles */
body {
  overflow-x: hidden;
}

.gradient-background,
.philosophy--with-decoration {
  overflow: hidden;
}

/* Base circle style */
.geo-circle {
  position: absolute;
  width: 600px;
  height: 600px;
  opacity: 0.1;
  will-change: transform;
}

/* Top-left circle positioning */
.geo-circle--top-left {
  top: -200px;
  left: -200px;
}

/* Bottom-right circle positioning */
.geo-circle--bottom-right {
  bottom: -200px;
  right: -200px;
}

/* SVG styling */
.geo-circle svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Circle rings - thin lines (thicker than before) */
.geo-circle-ring {
  fill: none;
  stroke: #6b7280;
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  /* stroke-dasharray and stroke-dashoffset will be set by JavaScript */
}

/* Philosophy section decoration */
.philosophy--with-decoration {
  position: relative;
}

.geo-circle--philosophy {
  position: absolute;
  width: 500px;
  height: 500px;
  opacity: 0.1;
  will-change: transform;
  bottom: -150px;
  right: -150px;
  z-index: 1;
  pointer-events: none;
}

.geo-circle--philosophy svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Responsive: Medium screens */
@media (max-width: 1024px) {
  .geo-circle {
    width: 500px;
    height: 500px;
    opacity: 0.09;
  }

  .geo-circle--top-left {
    top: -150px;
    left: -150px;
  }

  .geo-circle--bottom-right {
    bottom: -150px;
    right: -150px;
  }
}

/* Responsive: Small screens (tablets) */
@media (max-width: 768px) {
  .geo-circle {
    width: 400px;
    height: 400px;
    opacity: 0.08;
  }

  .geo-circle--top-left {
    top: -120px;
    left: -120px;
  }

  .geo-circle--bottom-right {
    bottom: -120px;
    right: -120px;
  }
}

/* Responsive: Mobile screens */
@media (max-width: 480px) {
  .geo-circle {
    width: 300px;
    height: 300px;
    opacity: 0.07;
  }

  .geo-circle--top-left {
    top: -100px;
    left: -100px;
  }

  .geo-circle--bottom-right {
    bottom: -100px;
    right: -100px;
  }
}

/* Philosophy circle responsive */
@media (max-width: 1024px) {
  .geo-circle--philosophy {
    width: 400px;
    height: 400px;
    bottom: -120px;
    right: -120px;
  }
}

@media (max-width: 768px) {
  .geo-circle--philosophy {
    width: 350px;
    height: 350px;
    bottom: -100px;
    right: -100px;
    opacity: 0.08;
  }
}

@media (max-width: 480px) {
  .geo-circle--philosophy {
    width: 280px;
    height: 280px;
    bottom: -80px;
    right: -80px;
    opacity: 0.07;
  }
}

/* Ensure gradient-background has relative positioning */
.gradient-background {
  position: relative;
}