/*
Theme Name: MHM Corporate Theme
Description: 合同会社MHMの独自テーマ - AI技術でビジネスの未来を創造する
Version: 1.0
Author: MHM
Text Domain: mhm-theme
*/

/* Tailwind CSS CDN */
@import url('https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css');

/* カスタムCSS */
:root {
  --background: 220 20% 97%;
  --foreground: 222 47% 11%;
  --primary: 340 40% 40%;
  --primary-foreground: 210 40% 98%;
  --brand-gold: #d4af37;
  --brand-dark: #1c1c28;
  --brand-star: #ffd700;
  --brand-navy: #0f172a;
}

.dark {
  --background: 230 25% 13%;
  --foreground: 210 40% 98%;
  --primary: 340 40% 50%;
  --primary-foreground: 210 40% 98%;
}

/* 3Dヒーローセクション */
.cosmic-gradient-text {
  background-image: linear-gradient(to right, #d4af37, #8b6d9c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.glow-text {
  text-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
}

/* 星のきらめきアニメーション */
@keyframes twinkle-custom {
  0%, 100% { 
    opacity: 0.3; 
    transform: scale(1);
  }
  50% { 
    opacity: 1; 
    transform: scale(1.2);
  }
}

/* 流れ星アニメーション */
@keyframes shooting-star-custom {
  0% {
    opacity: 0;
    transform: translateX(-100px) rotate(var(--angle));
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(calc(100vw + 100px)) rotate(var(--angle));
  }
}

/* タイピングアニメーション */
.ai-typing {
  border-right: 2px solid var(--brand-gold);
  animation: blink 0.75s step-end infinite;
}

@keyframes blink {
  from, to { border-color: transparent }
  50% { border-color: var(--brand-gold) }
}

/* アニメーション */
@keyframes pulse-glow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

.animate-pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* パフォーマンス最適化 */
* {
  box-sizing: border-box;
}

/* 画像最適化 */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 遅延読み込み */
.lazy-load {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.lazy-load.loaded {
  opacity: 1;
}

/* アクセシビリティ改善 */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* フォーカス表示 */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--brand-gold);
  outline-offset: 2px;
}

/* スキップリンク */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--brand-dark);
  color: white;
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 4px;
  z-index: 1000;
  transition: top 0.3s ease;
}

.skip-link:focus {
  top: 6px;
}

/* ナビゲーション改善 */
.nav-item {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 1000;
  min-width: 200px;
}

.nav-item:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* モバイル最適化 */
@media (max-width: 768px) {
  .dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    background: transparent;
    padding-left: 1rem;
  }
}

/* パフォーマンス改善 */
.will-change-transform {
  will-change: transform;
}

.will-change-opacity {
  will-change: opacity;
}

/* プリロード最適化 */
.preload-critical {
  display: none;
}

/* 3Dシーン最適化 */
#space-scene {
  contain: layout style paint;
}

/* フォント最適化 */
.font-display {
  font-display: swap;
}

/* カスタムプロパティ */
@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes rotation {
  0% { --gradient-angle: 0deg; }
  100% { --gradient-angle: 360deg; }
}

.animated-gradient {
  background: linear-gradient(var(--gradient-angle), var(--brand-gold), var(--brand-star));
  animation: rotation 2s linear infinite;
}

/* レスポンシブ画像 */
.responsive-image {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* アスペクト比 */
.aspect-ratio-16-9 {
  aspect-ratio: 16 / 9;
}

.aspect-ratio-4-3 {
  aspect-ratio: 4 / 3;
}

.aspect-ratio-1-1 {
  aspect-ratio: 1 / 1;
}

/* 印刷スタイル */
@media print {
  .no-print {
    display: none !important;
  }
  
  body {
    background: white !important;
    color: black !important;
  }
  
  a {
    color: black !important;
    text-decoration: underline !important;
  }
}

/* 高コントラストモード */
@media (prefers-contrast: high) {
  :root {
    --brand-gold: #000000;
    --brand-dark: #000000;
    --brand-star: #000000;
  }
}

/* モーション削減 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .animate-pulse-glow {
    animation: none !important;
  }
  
  .ai-typing {
    animation: none !important;
  }
}