/* Landing page custom styles — S3-07 Phase B (B-24).
   Moved from inline <style> block in templates/pages/landing.html.
   These complement tailwind-landing.css (compiled Tailwind utilities). */

* { -webkit-font-smoothing: antialiased; }
html { scroll-behavior: smooth; }
body { background: #FAFAF9; color: #0F0F10; font-family: 'Inter', sans-serif; }

/* Section reveal animation */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.65s cubic-bezier(.22,.68,0,1.2), transform 0.65s cubic-bezier(.22,.68,0,1.2); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* Float animation */
@keyframes float { 0%,100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }
@keyframes float-alt { 0%,100% { transform: translateY(0px); } 50% { transform: translateY(-14px); } }
@keyframes pulse-dot { 0%,100% { transform: scale(1); opacity:1; } 50% { transform: scale(1.4); opacity:0.7; } }
@keyframes connector-flow { 0% { stroke-dashoffset: 100; } 100% { stroke-dashoffset: 0; } }
@keyframes shimmer-move { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

.float-1 { animation: float 6s ease-in-out infinite; }
.float-2 { animation: float-alt 8s ease-in-out 1s infinite; }
.float-3 { animation: float 7s ease-in-out 2.5s infinite; }

/* Premium gradient backgrounds */
.bg-hero-gradient {
  background: radial-gradient(ellipse 80% 60% at 60% 0%, rgba(139,92,246,0.07) 0%, transparent 70%),
              radial-gradient(ellipse 60% 50% at 10% 80%, rgba(59,130,246,0.05) 0%, transparent 60%),
              #FAFAF9;
}
.bg-section-alt { background: linear-gradient(180deg, #F8F7FF 0%, #FAFAF9 100%); }
.bg-ecosystem {
  background: radial-gradient(ellipse 90% 80% at 50% 50%, rgba(139,92,246,0.06) 0%, transparent 65%),
              linear-gradient(180deg, #FAFAF9 0%, #F3F1FF 50%, #FAFAF9 100%);
}
.bg-trust {
  background: radial-gradient(ellipse 70% 60% at 30% 50%, rgba(0,132,61,0.04) 0%, transparent 60%),
              linear-gradient(135deg, #F0F9F4 0%, #F8F7FF 50%, #EFF6FF 100%);
}

/* Glass card */
.glass-card {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.9);
}

/* Connector lines SVG path animation */
.connector-path {
  stroke-dasharray: 8 4;
  animation: connector-flow 3s linear infinite;
}

/* Feature card hover */
.feature-card {
  transition: transform 0.3s cubic-bezier(.22,.68,0,1.2), box-shadow 0.3s ease;
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px -12px rgba(99,102,241,0.22), 0 4px 12px -4px rgba(0,0,0,0.08);
}

/* Premium button */
.btn-primary {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  box-shadow: 0 4px 16px -4px rgba(124,58,237,0.5), 0 1px 3px rgba(0,0,0,0.12);
  transition: all 0.25s ease;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  box-shadow: 0 8px 24px -4px rgba(124,58,237,0.55), 0 2px 6px rgba(0,0,0,0.12);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  transition: all 0.2s ease;
  border: 1.5px solid rgba(124,58,237,0.3);
  color: #7c3aed;
}
.btn-secondary:hover {
  background: rgba(124,58,237,0.06);
  border-color: rgba(124,58,237,0.5);
}

/* Nav */
.nav-blur {
  background: rgba(250,250,249,0.85);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* UAE PASS green badge */
.uaepass-badge {
  background: linear-gradient(135deg, #00843D 0%, #006B32 100%);
  box-shadow: 0 4px 12px -4px rgba(0,132,61,0.4);
}

/* Ecosystem hub */
.eco-hub {
  background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
  box-shadow: 0 20px 50px -10px rgba(124,58,237,0.4), 0 0 0 1px rgba(255,255,255,0.1);
}

/* Dot pulse */
.dot-pulse { animation: pulse-dot 2s ease-in-out infinite; }

/* Step connector */
.step-line {
  background: linear-gradient(90deg, transparent 0%, rgba(139,92,246,0.3) 50%, transparent 100%);
}

/* Mini mockup elements */
.mini-doc {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  box-shadow: 0 4px 16px -4px rgba(0,0,0,0.1);
}

/* Shimmer skeleton */
.shimmer-bg {
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer-move 1.5s ease-in-out infinite;
  border-radius: 4px;
}

/* Large feature card */
.large-card {
  transition: transform 0.3s cubic-bezier(.22,.68,0,1.2), box-shadow 0.3s ease;
}
.large-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 32px 70px -20px rgba(0,0,0,0.18), 0 4px 16px -4px rgba(0,0,0,0.08);
}

/* Scrollbar hide */
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* Text gradient */
.text-gradient {
  background: linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-green {
  background: linear-gradient(135deg, #00843D 0%, #059669 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Section badge */
.section-badge {
  background: linear-gradient(135deg, rgba(139,92,246,0.1) 0%, rgba(59,130,246,0.1) 100%);
  border: 1px solid rgba(139,92,246,0.2);
  color: #7c3aed;
}

/* Responsive: better stacking */
@media (max-width: 640px) {
  .hero-visual { display: none; }
  .hero-visual-mobile { display: block; }
}
@media (min-width: 641px) {
  .hero-visual-mobile { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   CSP S3-07 fix — replaced inline style="" attributes with
   named CSS classes so style-src 'self' is satisfied.
   ═══════════════════════════════════════════════════════════ */

/* Heading letter-spacing variants (replaced style="letter-spacing:-Xpx") */
.ls-hero    { letter-spacing: -1.5px; }
.ls-heading { letter-spacing: -0.8px; }
.ls-heading-lg { letter-spacing: -1px; }

/* Hero background glow blob */
.hero-glow-purple {
  background: radial-gradient(circle, rgba(139,92,246,0.6) 0%, transparent 70%);
}

/* Ecosystem SVG connector map — minimum height so the SVG doesn't collapse */
.eco-map-min-h { min-height: 340px; }

/* Orbit ring spin animation (Tailwind `spin` keyframe is `rotate 1s linear infinite`;
   we override the duration to 12 s here) */
@keyframes landing-spin { to { transform: rotate(360deg); } }
.orbit-spin { animation: landing-spin 12s linear infinite; }

/* Feature-card corner glow decorators (absolute positioned, pointer-events-none) */
.card-glow-green   { background: radial-gradient(circle, rgba(0,132,61,0.3)    0%, transparent 70%); }
.card-glow-blue    { background: radial-gradient(circle, rgba(0,120,212,0.4)   0%, transparent 70%); }
.card-glow-purple  { background: radial-gradient(circle, rgba(139,92,246,0.4)  0%, transparent 70%); }
.card-glow-emerald { background: radial-gradient(circle, rgba(16,185,129,0.3)  0%, transparent 70%); }
.card-glow-amber   { background: radial-gradient(circle, rgba(245,158,11,0.3)  0%, transparent 70%); }
.card-glow-rose    { background: radial-gradient(circle, rgba(236,72,153,0.2)  0%, transparent 70%); }
.card-glow-indigo  { background: radial-gradient(circle, rgba(99,102,241,0.3)  0%, transparent 70%); }

/* Step-indicator circle fill (#d1fae5 ≈ Tailwind emerald-100) */
.bg-emerald-100-solid { background: #d1fae5; }

/* Three large feature-card gradient backgrounds */
.large-card-green  { background: linear-gradient(160deg, #f0fdf4 0%, #ecfdf5 40%, #f8f7ff 100%); }
.large-card-blue   { background: linear-gradient(160deg, #eff6ff 0%, #f0f4ff 40%, #f8f7ff 100%); }
.large-card-purple { background: linear-gradient(160deg, #f5f3ff 0%, #faf5ff 40%, #fdf4ff 100%); }

/* Shimmer overlay bar used on the progress indicator in the collaboration mockup */
.shimmer-bar {
  animation: shimmer-move 1.5s ease-in-out infinite;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%);
  background-size: 200% 100%;
}

/* AI model icon gradient background (small square badge) */
.ai-icon-grad { background: linear-gradient(135deg, #7c3aed, #5b21b6); }

/* Final CTA section — full-bleed purple gradient with large shadow */
.cta-section {
  background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 60%, #4c1d95 100%);
  box-shadow: 0 40px 80px -20px rgba(124,58,237,0.4);
}

/* Logo SVGs: both nav and footer logos should scale by height, not width */
.svg-logo-auto-w { width: auto; }