/* =====================================================================
   INDEX.PHP - Premium UI/UX Enhancements
   ONLY affects the homepage (index.php)
   ===================================================================== */

/* =====================================================================
   1. HERO VISUAL - Subtle pulse animation with background accents
   ===================================================================== */

.hero-visual {
  position: relative;
  overflow: hidden;
}

/* Main icon subtle pulse */
.hero-visual > .icon {
  position: relative;
  z-index: 2;
  animation: heroIconPulse 8s ease-in-out infinite;
  filter: drop-shadow(0 0 30px rgba(99, 102, 241, 0.15));
}

/* Decorative background icons - very subtle */
.hero-visual::before,
.hero-visual::after {
  content: '';
  position: absolute;
  opacity: 0.04;
  pointer-events: none;
  z-index: 1;
}

/* Shield icon (security) - top right */
.hero-visual::before {
  top: 15%;
  right: 12%;
  width: 64px;
  height: 64px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  animation: floatSubtle 12s ease-in-out infinite;
}

/* Document icon - bottom left */
.hero-visual::after {
  bottom: 18%;
  left: 10%;
  width: 56px;
  height: 56px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b5cf6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  animation: floatSubtle 10s ease-in-out infinite reverse;
  animation-delay: -3s;
}

/* Keyframes for hero animations */
@keyframes heroIconPulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 30px rgba(99, 102, 241, 0.15));
  }
  50% {
    transform: scale(1.02);
    filter: drop-shadow(0 0 40px rgba(99, 102, 241, 0.25));
  }
}

@keyframes floatSubtle {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.04;
  }
  50% {
    transform: translateY(-8px) rotate(3deg);
    opacity: 0.06;
  }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .hero-visual > .icon {
    animation: none;
    filter: drop-shadow(0 0 30px rgba(99, 102, 241, 0.15));
  }
  
  .hero-visual::before,
  .hero-visual::after {
    animation: none;
    opacity: 0.04;
  }
}

/* =====================================================================
   2. PROBLEM CARDS - Enhanced hover interaction
   ===================================================================== */

.problem-card {
  transition: 
    transform 180ms ease-out,
    box-shadow 180ms ease-out,
    border-color 180ms ease-out;
}

.problem-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-border-hover);
}

.problem-icon {
  transition: color 180ms ease-out;
}

.problem-card:hover .problem-icon {
  color: var(--color-primary);
}

.problem-card:hover .problem-icon .icon {
  color: var(--color-primary);
}

/* Mobile: remove hover dependency, keep static styles */
@media (hover: none) and (pointer: coarse) {
  .problem-card:hover {
    transform: none;
    box-shadow: none;
  }
  
  .problem-card:hover .problem-icon,
  .problem-card:hover .problem-icon .icon {
    color: inherit;
  }
}

/* =====================================================================
   3. CTA SECTION - Primary button enhancement
   ===================================================================== */

/* Specific to CTA section primary button */
.cta-section .btn-primary {
  padding: var(--space-5) var(--space-10);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  box-shadow: 
    var(--shadow-md),
    0 0 0 0 rgba(99, 102, 241, 0);
  position: relative;
}

/* Subtle glow effect for primary CTA */
.cta-section .btn-primary::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  opacity: 0;
  z-index: -1;
  filter: blur(8px);
  transition: opacity 200ms ease-out;
  pointer-events: none;
}

.cta-section .btn-primary:hover::before {
  opacity: 0.4;
}

.cta-section .btn-primary:hover {
  background-color: var(--color-primary-hover);
  color: var(--color-text-inverse);
  transform: translateY(-2px);
  box-shadow: 
    var(--shadow-lg),
    0 4px 20px rgba(99, 102, 241, 0.35);
}

.cta-section .btn-primary:focus-visible {
  background-color: var(--color-primary-hover);
  color: var(--color-text-inverse);
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.cta-section .btn-primary:active {
  background-color: #4338ca;
  color: var(--color-text-inverse);
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* Secondary buttons stay subtle but visible */
.cta-section .btn-secondary {
  background-color: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}

.cta-section .btn-secondary:hover {
  background-color: var(--color-surface-hover);
  color: var(--color-text);
  border-color: var(--color-border-hover);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cta-section .btn-primary:hover {
    transform: none;
  }
  
  .cta-section .btn-primary::before {
    display: none;
  }
}

/* Dark mode adjustments */
[data-theme="dark"] .hero-visual::before,
[data-theme="dark"] .hero-visual::after {
  opacity: 0.06;
}

[data-theme="dark"] .hero-visual > .icon {
  filter: drop-shadow(0 0 35px rgba(99, 102, 241, 0.25));
}

[data-theme="dark"] .cta-section .btn-primary:hover::before {
  opacity: 0.3;
}