/* ==========================================================================
   x-design.css
   Decorative CSS-only X shapes for DXデザインシステム
   The "X" is a key visual element of the brand identity.
   Color palette: #9b59b6, #7b3fa0, #2d1b6e, #c89de0
   ========================================================================== */

/* --------------------------------------------------------------------------
   Animation Keyframes
   -------------------------------------------------------------------------- */

@keyframes xRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes xPulse {
  0%, 100% {
    opacity: 0.06;
    filter: drop-shadow(0 0 0px rgba(155, 89, 182, 0));
  }
  50% {
    opacity: 0.14;
    filter: drop-shadow(0 0 12px rgba(155, 89, 182, 0.3));
  }
}

@keyframes xFloat {
  0%, 100% {
    transform: translateY(0) rotate(var(--x-base-rotation, 45deg));
  }
  50% {
    transform: translateY(-18px) rotate(var(--x-base-rotation, 45deg));
  }
}

/* --------------------------------------------------------------------------
   1. .x-bg-pattern — Repeating background of subtle X shapes via gradients
   -------------------------------------------------------------------------- */

.x-bg-pattern {
  background-image:
    /* Forward diagonal strokes */
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 18px,
      rgba(155, 89, 182, 0.04) 18px,
      rgba(155, 89, 182, 0.04) 20px,
      transparent 20px,
      transparent 38px
    ),
    /* Backward diagonal strokes — overlapping forms X shapes */
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 18px,
      rgba(155, 89, 182, 0.04) 18px,
      rgba(155, 89, 182, 0.04) 20px,
      transparent 20px,
      transparent 38px
    );
  background-size: 40px 40px;
}

/* --------------------------------------------------------------------------
   2. .x-float — Single floating animated X via pseudo-elements
      Uses CSS custom properties for flexible positioning:
        --x-top    (default: 10%)
        --x-left   (default: 5%)
        --x-size   (default: 60px)
        --x-delay  (default: 0s)
   -------------------------------------------------------------------------- */

.x-float {
  position: relative;
}

.x-float::before,
.x-float::after {
  content: "";
  position: absolute;
  top: var(--x-top, 10%);
  left: var(--x-left, 5%);
  width: var(--x-size, 60px);
  height: calc(var(--x-size, 60px) * 0.18);
  background: rgba(155, 89, 182, 0.10);
  border-radius: 2px;
  pointer-events: none;
  --x-base-rotation: 45deg;
  animation:
    xFloat 6s ease-in-out infinite,
    xRotate 30s linear infinite;
  animation-delay: var(--x-delay, 0s);
  transform-origin: center center;
  opacity: 0.5;
}

.x-float::before {
  transform: rotate(45deg);
}

.x-float::after {
  --x-base-rotation: -45deg;
  transform: rotate(-45deg);
  animation:
    xFloat 6s ease-in-out infinite,
    xRotate 30s linear infinite reverse;
  animation-delay: var(--x-delay, 0s);
}

/* --------------------------------------------------------------------------
   3. .x-hero-deco — Large decorative X for hero section backgrounds
   -------------------------------------------------------------------------- */

.x-hero-deco {
  position: relative;
  overflow: hidden;
}

.x-hero-deco::before,
.x-hero-deco::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 50px;
  margin-top: -25px;
  margin-left: -150px;
  background: linear-gradient(
    90deg,
    rgba(45, 27, 110, 0.06),
    rgba(155, 89, 182, 0.06),
    rgba(45, 27, 110, 0.06)
  );
  border-radius: 6px;
  pointer-events: none;
  opacity: 0.06;
  animation: xRotate 50s linear infinite;
}

.x-hero-deco::before {
  transform: rotate(45deg);
}

.x-hero-deco::after {
  transform: rotate(-45deg);
  animation-direction: reverse;
}

/* --------------------------------------------------------------------------
   4. .x-divider — Section divider with an X shape in the center
   -------------------------------------------------------------------------- */

.x-divider {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  padding: 1.5rem 0;
}

/* Horizontal lines on each side */
.x-divider::before,
.x-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(155, 89, 182, 0.18)
  );
}

.x-divider::after {
  background: linear-gradient(
    90deg,
    rgba(155, 89, 182, 0.18),
    transparent
  );
}

/* The center X mark — added via a nested span or standalone element */
.x-divider-x {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin: 0 1rem;
}

.x-divider-x::before,
.x-divider-x::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  margin-left: -10px;
  margin-top: -1px;
  background: rgba(155, 89, 182, 0.35);
  border-radius: 1px;
}

.x-divider-x::before {
  transform: rotate(45deg);
}

.x-divider-x::after {
  transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   5. .x-grid-bg — Grid of tiny X marks as a section background
   -------------------------------------------------------------------------- */

.x-grid-bg {
  background-image:
    /* Tiny forward slashes */
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 4px,
      rgba(123, 63, 160, 0.035) 4px,
      rgba(123, 63, 160, 0.035) 5px,
      transparent 5px,
      transparent 24px
    ),
    /* Tiny backward slashes */
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 4px,
      rgba(123, 63, 160, 0.035) 4px,
      rgba(123, 63, 160, 0.035) 5px,
      transparent 5px,
      transparent 24px
    );
  background-size: 24px 24px;
}

/* --------------------------------------------------------------------------
   6. .x-pulse — Pulsing / breathing X with glow effect
   -------------------------------------------------------------------------- */

.x-pulse {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 48px;
}

.x-pulse::before,
.x-pulse::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 8px;
  margin-left: -24px;
  margin-top: -4px;
  background: linear-gradient(
    90deg,
    #7b3fa0,
    #9b59b6,
    #c89de0
  );
  border-radius: 4px;
  animation: xPulse 3s ease-in-out infinite;
}

.x-pulse::before {
  transform: rotate(45deg);
}

.x-pulse::after {
  transform: rotate(-45deg);
  animation-delay: 0.15s;
}

/* --------------------------------------------------------------------------
   7. .x-corner — X marks at card corners
      Adds small X decorations to the corners of cards/frames.
      Use on parent element; X appears at top-left and bottom-right.
   -------------------------------------------------------------------------- */

.x-corner {
  position: relative;
}

/* Top-left X — subtle, only one corner */
.x-corner::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 14px;
  height: 14px;
  z-index: 1;
  pointer-events: none;
  opacity: 0.18;
  background:
    linear-gradient(45deg, transparent 38%, rgba(155, 89, 182, 0.5) 38%, rgba(155, 89, 182, 0.5) 46%, transparent 46%),
    linear-gradient(-45deg, transparent 38%, rgba(155, 89, 182, 0.5) 38%, rgba(155, 89, 182, 0.5) 46%, transparent 46%);
}

/* Bottom-right X — hidden by default, shows on hover */
.x-corner::after {
  content: "";
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 14px;
  height: 14px;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(45deg, transparent 38%, rgba(155, 89, 182, 0.5) 38%, rgba(155, 89, 182, 0.5) 46%, transparent 46%),
    linear-gradient(-45deg, transparent 38%, rgba(155, 89, 182, 0.5) 38%, rgba(155, 89, 182, 0.5) 46%, transparent 46%);
  transition: opacity 0.3s;
}
.x-corner:hover::after {
  opacity: 0.18;
}

/* --------------------------------------------------------------------------
   8. .x-frame — Full X-themed card frame
      Combines X corners with a subtle diagonal line accent on left border.
      Good for proposal cards, feature boxes, etc.
   -------------------------------------------------------------------------- */

.x-frame {
  position: relative;
  border: 1px solid var(--rule, #d4cfc7);
  background: #fff;
  overflow: visible;
}

/* Left accent: thin solid line with gradient */
.x-frame::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, rgba(155, 89, 182, 0.25), rgba(45, 27, 110, 0.1), transparent);
  pointer-events: none;
}

/* Top-right X mark — very subtle */
.x-frame::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 10px;
  height: 10px;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(45deg, transparent 36%, rgba(155, 89, 182, 0.5) 36%, rgba(155, 89, 182, 0.5) 46%, transparent 46%),
    linear-gradient(-45deg, transparent 36%, rgba(155, 89, 182, 0.5) 36%, rgba(155, 89, 182, 0.5) 46%, transparent 46%);
  transition: opacity 0.3s;
}

.x-frame:hover::after {
  opacity: 0.35;
}

/* --------------------------------------------------------------------------
   9. .x-section-accent — Section background with large faded X watermark
      Use on section wrappers to add a subtle brand watermark.
   -------------------------------------------------------------------------- */

.x-section-accent {
  position: relative;
  overflow: hidden;
}

.x-section-accent::before {
  content: "";
  position: absolute;
  right: -80px;
  top: 50%;
  width: 240px;
  height: 240px;
  margin-top: -120px;
  pointer-events: none;
  opacity: 0.025;
  background:
    linear-gradient(45deg, transparent 38%, #9b59b6 38%, #9b59b6 42%, transparent 42%),
    linear-gradient(-45deg, transparent 38%, #9b59b6 38%, #9b59b6 42%, transparent 42%);
}

/* --------------------------------------------------------------------------
   Responsive — mobile-friendly X decorations
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  /* Keep X-float visible on mobile but static and subtle */
  .x-float::before,
  .x-float::after {
    animation: none;
    opacity: 0.25;
    transform: rotate(45deg);
  }

  .x-float::after {
    transform: rotate(-45deg);
  }

  /* Smaller hero deco on mobile */
  .x-hero-deco::before,
  .x-hero-deco::after {
    animation: none;
    width: 160px;
    height: 28px;
    margin-top: -14px;
    margin-left: -80px;
  }

  /* Keep pulse animation on mobile */
  .x-pulse::before,
  .x-pulse::after {
    animation: xPulse 4s ease-in-out infinite;
  }

  /* X-corners: slightly smaller on mobile */
  .x-corner::before,
  .x-corner::after {
    width: 14px;
    height: 14px;
  }

  /* X-frame marks stay visible */
  .x-frame::after {
    width: 12px;
    height: 12px;
    top: 6px;
    right: 6px;
  }

  /* Section accent: smaller */
  .x-section-accent::before {
    width: 120px;
    height: 120px;
    margin-top: -60px;
    right: -30px;
  }
}

/* --------------------------------------------------------------------------
   Accessibility — respect prefers-reduced-motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .x-float::before,
  .x-float::after,
  .x-hero-deco::before,
  .x-hero-deco::after,
  .x-pulse::before,
  .x-pulse::after {
    animation: none;
  }

  .x-float::before,
  .x-hero-deco::before {
    transform: rotate(45deg);
  }

  .x-float::after,
  .x-hero-deco::after {
    transform: rotate(-45deg);
  }

  .x-pulse::before {
    transform: rotate(45deg);
    opacity: 0.10;
    filter: none;
  }

  .x-pulse::after {
    transform: rotate(-45deg);
    opacity: 0.10;
    filter: none;
  }
}