/* ========== Components - Unikode Design System ========== */
/* Buttons, Cards, Layout, and shared UI components */
/* Source of truth: index.html */

/* ========== Button System ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-label-lg);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--duration-short-4) var(--easing-standard);
  position: relative;
  overflow: hidden;
  border: none;
  outline: none;
}

.btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.btn:active {
  transform: scale(0.98);
}

/* Filled Button (Primary) */
.btn-filled {
  background: var(--color-text);
  color: var(--color-bg);
}

.btn-filled:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 255, 255, 0.1);
}

/* Outline Button (Secondary) */
.btn-outline {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--color-text);
}

/* Glass Button */
.btn-glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  color: var(--color-text);
  border: 1px solid var(--glass-border-top);
}

.btn-glass:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Button Ripple Effect */
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: scale(0);
  animation: ripple 0.6s linear;
  pointer-events: none;
  will-change: transform, opacity; /* GPU compositing hint */
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Light Theme Button Overrides */
[data-theme="light"] .btn-filled {
  background: var(--color-text);
  color: #ffffff;
}

[data-theme="light"] .btn-filled:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .btn-outline {
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

[data-theme="light"] .btn-outline:hover {
  background: rgba(0, 0, 0, 0.03);
  border-color: var(--color-text);
}

[data-theme="light"] .btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2);
}

/* ========== Card System ========== */
.card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  border: 1px solid var(--glass-border-top);
  border-radius: var(--radius-window);
  padding: var(--space-6);
  transition: all var(--duration-medium-1) var(--easing-standard);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-elevated);
}

.card-glass {
  background: rgba(255, 255, 255, 0.03);
}

[data-theme="light"] .card {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .card:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

/* ========== Layout System ========== */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.section {
  padding: var(--section-padding) 0;
}

.section-sm {
  padding: var(--space-16) 0;
}

/* ========== Scroll Indicator ========== */
.scroll-indicator {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  opacity: 0.25;
  transition: opacity var(--duration-short-4) var(--easing-standard);
}

.scroll-indicator:hover {
  opacity: 1;
}

.scroll-dot {
  width: 6px;
  height: 6px;
  background: var(--color-text-tertiary);
  border-radius: 50%;
  animation: scrollBounce 2s ease-in-out infinite;
  will-change: transform; /* GPU compositing hint */
}

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

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

/* ========== Material Symbols Base ========== */
/* Using Material Symbols Outlined from Google Fonts */
.material-symbol,
.solution-icon,
.governance-icon,
.volume-icon,
.hierarchy-arrow,
.flow-arrow {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'liga';
}

/* Icon size variants */
.solution-icon {
  font-size: 32px;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

.governance-icon {
  font-size: 28px;
  color: var(--color-text-secondary);
}

.volume-icon {
  font-size: 28px;
  color: var(--color-text-tertiary);
}

.hierarchy-arrow,
.flow-arrow {
  font-size: 18px;
  color: var(--color-text-tertiary);
  vertical-align: middle;
}

/* ========== Glow Effects ========== */
.glow {
  position: relative;
}

.glow::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: radial-gradient(ellipse at center,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.02)
  );
  border-radius: inherit;
  filter: blur(12px);
  opacity: 0;
  transition: opacity var(--duration-medium-2) var(--easing-standard);
  z-index: -1;
}

.glow:hover::before {
  opacity: 0.25;
}

.glow-text {
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.05);
}

/* ========== Glass Effects ========== */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  border: 1px solid var(--glass-border-top);
}

.glass-prominent {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(40px) saturate(1.1);
  -webkit-backdrop-filter: blur(40px) saturate(1.1);
}

.glass-ultrathin {
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(40px) saturate(1.05);
  -webkit-backdrop-filter: blur(40px) saturate(1.05);
}

/* ========== Scroll Animation Classes ========== */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--duration-long-2) var(--easing-decelerate),
              transform var(--duration-long-2) var(--easing-decelerate);
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.slide-in-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity var(--duration-long-2) var(--easing-decelerate),
              transform var(--duration-long-2) var(--easing-decelerate);
}

.slide-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.slide-in-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity var(--duration-long-2) var(--easing-decelerate),
              transform var(--duration-long-2) var(--easing-decelerate);
}

.slide-in-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.scale-in {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity var(--duration-long-2) var(--easing-decelerate),
              transform var(--duration-long-2) var(--easing-decelerate);
}

.scale-in.visible {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .fade-in,
  .slide-in-left,
  .slide-in-right,
  .scale-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}