/**
 * Confianza Digital - Custom Styles
 * Animated backgrounds, cyber-grid, transitions, and responsive refinements
 */

/* ========================================
   BASE
   ======================================== */
html { scroll-behavior: smooth; }

::selection {
  background-color: rgba(59, 130, 246, 0.3);
  color: white;
}

/* Ensure content sits above fixed backgrounds */
#site-header, main, #site-footer {
  position: relative;
  z-index: 10;
}

/* ========================================
   SCROLLBAR
   ======================================== */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0B1120; }
::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #334155; }

/* ========================================
   ANIMATED BACKGROUND EFFECTS
   ======================================== */

/* Container for gradient orbs */
.bg-effects {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Gradient orbs */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  will-change: transform;
}

.orb-1 {
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
  top: -250px;
  left: -150px;
  animation: orb-drift-1 28s ease-in-out infinite;
}

.orb-2 {
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.07) 0%, transparent 70%);
  bottom: -150px;
  right: -100px;
  animation: orb-drift-2 34s ease-in-out infinite;
}

.orb-3 {
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.06) 0%, transparent 70%);
  top: 35%;
  right: 5%;
  animation: orb-drift-3 40s ease-in-out infinite;
}

@keyframes orb-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%      { transform: translate(100px, 140px) scale(1.1); }
  50%      { transform: translate(200px, 60px) scale(0.95); }
  75%      { transform: translate(50px, 200px) scale(1.05); }
}

@keyframes orb-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%      { transform: translate(-120px, -100px) scale(1.08); }
  50%      { transform: translate(-50px, -200px) scale(0.92); }
  75%      { transform: translate(-140px, -50px) scale(1.1); }
}

@keyframes orb-drift-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(-80px, 100px) scale(1.12); }
  66%      { transform: translate(60px, -80px) scale(0.93); }
}

/* Cyber grid overlay on body */
.cyber-grid-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
}

/* Reduce background effects on mobile for performance */
@media (max-width: 768px) {
  .orb { filter: blur(80px); }
  .orb-2, .orb-3 { display: none; }
  .orb-1 { width: 400px; height: 400px; }
}

/* ========================================
   PERU IDENTITY STRIP
   ======================================== */
.peru-strip {
  background: linear-gradient(90deg, #C8102E 0%, #e8132f 40%, #C8102E 70%, #a80e26 100%);
}

/* ========================================
   SECTION DIVIDER
   ======================================== */
.section-divider {
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.15), transparent);
  height: 1px;
  position: relative;
  z-index: 10;
}

/* ========================================
   SCROLL ANIMATIONS
   ======================================== */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.slide-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.slide-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.slide-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.slide-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger delays */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.25s; }
.stagger-4 { transition-delay: 0.3s; }
.stagger-5 { transition-delay: 0.35s; }
.stagger-6 { transition-delay: 0.4s; }
.stagger-7 { transition-delay: 0.45s; }

/* ========================================
   CARD EFFECTS
   ======================================== */
.service-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  border-color: rgba(59, 130, 246, 0.3);
}

.solution-card {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.solution-card:hover {
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 0 40px rgba(59, 130, 246, 0.06);
}

/* ========================================
   STAT NUMBERS
   ======================================== */
.stat-number {
  text-shadow: 0 0 30px rgba(59, 130, 246, 0.2);
}

/* ========================================
   HERO GRADIENT (home page)
   ======================================== */
.hero-gradient {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(59, 130, 246, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(16, 185, 129, 0.04) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 100%, rgba(59, 130, 246, 0.03) 0%, transparent 40%);
}

/* ========================================
   FORM INPUTS
   ======================================== */
.form-input {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* ========================================
   BREADCRUMB
   ======================================== */
.breadcrumb a:hover {
  color: #94a3b8;
}

/* ========================================
   REGULATION TABLE
   ======================================== */
.reg-table th {
  background: rgba(30, 41, 59, 0.5);
  border-bottom: 2px solid rgba(59, 130, 246, 0.2);
}
.reg-table td {
  border-bottom: 1px solid rgba(51, 65, 85, 0.3);
}
.reg-table tr:hover td {
  background: rgba(30, 41, 59, 0.3);
}

/* ========================================
   METHODOLOGY TIMELINE
   ======================================== */
.timeline-step {
  position: relative;
}
.timeline-step::before {
  content: '';
  position: absolute;
  left: 23px;
  top: 48px;
  bottom: -16px;
  width: 2px;
  background: linear-gradient(to bottom, rgba(59, 130, 246, 0.3), transparent);
}
.timeline-step:last-child::before {
  display: none;
}

/* ========================================
   LANGUAGE SWITCHER
   ======================================== */
.lang-switch {
  transition: all 0.2s ease;
}
.lang-switch:hover {
  background: rgba(59, 130, 246, 0.1);
}
.lang-active {
  color: #3b82f6;
  font-weight: 600;
}

/* ========================================
   ACCESSIBILITY
   ======================================== */
*:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* ========================================
   PRINT
   ======================================== */
@media print {
  .no-print, .bg-effects, .cyber-grid-overlay { display: none !important; }
  body { background: white !important; color: black !important; }
  a { color: #1e40af !important; }
}

/* ========================================
   MOBILE RESPONSIVE HERO
   ======================================== */
@media (max-width: 640px) {
  .hero-title { font-size: 2rem; line-height: 1.2; }
}