/* File: public/css/layouts/user-layout.css */

/* ========================================
   ユーザーレイアウト - 利用者専用スタイル
   ======================================== */

/* ユーザーテーマベース設定 */
body.app-layout[data-theme="user"] {
  background: var(--gray-50);
  position: relative;
  overflow-x: hidden;
}

/* ========================================
   ユーザー専用背景グラデーション
   ======================================== */

/* 美しい静的グラデーション背景 */
body.app-layout[data-theme="user"]::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -3;
  background: 
    radial-gradient(circle 800px at 10% 20%, rgba(102, 126, 234, 0.3) 0%, transparent 50%),
    radial-gradient(circle 1000px at 90% 10%, rgba(139, 92, 246, 0.25) 0%, transparent 45%),
    radial-gradient(circle 600px at 70% 60%, rgba(118, 75, 162, 0.2) 0%, transparent 50%),
    radial-gradient(circle 700px at 20% 80%, rgba(236, 72, 153, 0.15) 0%, transparent 50%),
    linear-gradient(110deg, 
      rgba(102, 126, 234, 0.1) 0%, 
      rgba(139, 92, 246, 0.08) 30%,
      rgba(236, 72, 153, 0.06) 60%,
      rgba(251, 207, 232, 0.04) 100%
    ),
    #f7f8fc;
  pointer-events: none;
}


/* ========================================
   ユーザー専用エフェクト
   ======================================== */

/* 光が横切るエフェクト */
.light-sweep {
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.15) 45%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0.15) 55%,
    transparent 60%
  );
  animation: lightSweep 15s ease-in-out infinite;
}

/* ========================================
   プリファードモーション設定
   ======================================== */

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