/* Seamless procedural background for 結月硝子.
   Fine 梨地 relief with clearer blue/lavender colour, while the foreground
   glass stays genuinely translucent rather than turning into a white panel. */

.bg-base {
  background-color: #e5edf7;
  background-image:
    radial-gradient(ellipse 82% 60% at 8% 10%, rgba(171, 211, 246, .86) 0%, rgba(171, 211, 246, .32) 44%, transparent 73%),
    radial-gradient(ellipse 76% 64% at 90% 18%, rgba(216, 194, 241, .82) 0%, rgba(216, 194, 241, .30) 46%, transparent 75%),
    radial-gradient(ellipse 72% 58% at 25% 88%, rgba(171, 218, 240, .74) 0%, rgba(171, 218, 240, .24) 49%, transparent 77%),
    radial-gradient(ellipse 78% 66% at 84% 84%, rgba(198, 192, 235, .72) 0%, rgba(198, 192, 235, .23) 49%, transparent 79%),
    radial-gradient(ellipse 54% 44% at 49% 48%, rgba(249, 250, 253, .64) 0%, rgba(249, 250, 253, .20) 48%, transparent 78%),
    linear-gradient(145deg, #dceaf7 0%, #eee7f4 47%, #dde5f2 100%);
  background-size: cover;
  background-repeat: no-repeat;
}

/* Keep the microscopic relief pale enough for text, but restore colour to the
   surface instead of washing everything toward neutral grey. */
.bg-svg {
  background-image:
    radial-gradient(ellipse 58% 40% at 15% 25%, rgba(121, 187, 228, .18) 0%, transparent 72%),
    radial-gradient(ellipse 52% 44% at 84% 38%, rgba(179, 153, 220, .17) 0%, transparent 74%),
    radial-gradient(ellipse 64% 46% at 43% 79%, rgba(244, 248, 252, .22) 0%, transparent 76%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'%3E%3Cdefs%3E%3Cfilter id='relief' x='-18%25' y='-18%25' width='136%25' height='136%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.352' numOctaves='4' seed='23' stitchTiles='stitch' result='n'/%3E%3CfeDiffuseLighting in='n' surfaceScale='7.5' diffuseConstant='.72' lighting-color='%23f7faff' result='lit'%3E%3CfeDistantLight azimuth='225' elevation='46'/%3E%3C/feDiffuseLighting%3E%3CfeSpecularLighting in='n' surfaceScale='5.5' specularConstant='.26' specularExponent='16' lighting-color='%23ffffff' result='spec'%3E%3CfeDistantLight azimuth='225' elevation='52'/%3E%3C/feSpecularLighting%3E%3CfeBlend in='n' in2='lit' mode='soft-light' result='base'/%3E%3CfeBlend in='base' in2='spec' mode='screen'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='%23c8d8e9' filter='url(%23relief)' opacity='.68'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='112' viewBox='0 0 112 112'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' seed='41' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='.24 0 0 0 .50  0 .27 0 0 .55  0 0 .36 0 .66  0 0 0 .36 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='.34'/%3E%3C/svg%3E");
  background-size: auto, auto, auto, 280px 280px, 112px 112px;
  background-position: center, center, center, 0 0, 31px 17px;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
  opacity: .58;
  mix-blend-mode: soft-light;
  animation: none;
  will-change: auto;
}

.bg-light-glow {
  background:
    radial-gradient(ellipse 72% 52% at 82% 18%, rgba(250, 252, 255, .25) 0%, rgba(250, 252, 255, .07) 48%, transparent 76%),
    radial-gradient(ellipse 66% 58% at 18% 82%, rgba(245, 250, 254, .17) 0%, transparent 72%),
    radial-gradient(ellipse 48% 38% at 48% 52%, rgba(221, 207, 242, .15) 0%, transparent 76%);
}

/* Restore the earlier transparent-glass treatment. No white background fill. */
.glass-layer {
  backdrop-filter: blur(7px) grayscale(12%) saturate(1.18) brightness(1.035) contrast(1.015);
  -webkit-backdrop-filter: blur(7px) grayscale(12%) saturate(1.18) brightness(1.035) contrast(1.015);
  background: transparent;
}

/* Remove the milk-white content veil added in the previous readability pass. */
.content {
  background: transparent;
}

@media (max-width: 768px) {
  .bg-base {
    background-image:
      radial-gradient(ellipse 98% 54% at 4% 11%, rgba(171, 211, 246, .84) 0%, rgba(171, 211, 246, .29) 48%, transparent 77%),
      radial-gradient(ellipse 94% 58% at 97% 27%, rgba(216, 194, 241, .79) 0%, rgba(216, 194, 241, .27) 49%, transparent 78%),
      radial-gradient(ellipse 92% 55% at 18% 83%, rgba(171, 218, 240, .70) 0%, rgba(171, 218, 240, .21) 51%, transparent 79%),
      radial-gradient(ellipse 96% 60% at 91% 89%, rgba(198, 192, 235, .68) 0%, rgba(198, 192, 235, .20) 51%, transparent 81%),
      radial-gradient(ellipse 76% 42% at 50% 50%, rgba(249, 250, 253, .58) 0%, rgba(249, 250, 253, .17) 49%, transparent 81%),
      linear-gradient(155deg, #dceaf7 0%, #eee7f4 47%, #dde5f2 100%);
  }

  .bg-svg {
    background-size: auto, auto, auto, 238px 238px, 96px 96px;
    opacity: .56;
  }

  .glass-layer {
    backdrop-filter: blur(7px) grayscale(10%) saturate(1.20) brightness(1.04) contrast(1.01);
    -webkit-backdrop-filter: blur(7px) grayscale(10%) saturate(1.20) brightness(1.04) contrast(1.01);
    background: transparent;
  }

  .content {
    background: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bg-svg {
    animation: none;
  }
}