/* 
 * HURE HR Premium Corporate Website Stylesheet
 * Custom CSS for transitions, glassmorphism, background animations, and custom scrollbars.
 */

:root {
  /* Color System Constants */
  --primary: #543feb;
  --primary-hover: #543feb;
  --primary-light: rgba(84, 63, 235, 0.1);
  --secondary: #10b981;
  /* Success */
  --accent: #f59e0b;
  /* Warning */
  --error: #ef4444;

  --font-sans: 'Inter', sans-serif;
  --font-heading: 'Manrope', sans-serif;
}

html {
  scroll-behavior: smooth;
  font-family: var(--font-sans);
  overflow-x: hidden;
  max-width: 100%;
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
  min-height: 100%;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb {
  background: #334155;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Glassmorphism Styles */
.glass-effect {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.dark .glass-effect {
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Ambient Radial Background Blobs */
.blob-animate {
  animation: float-blob 20s infinite alternate ease-in-out;
}

.blob-animate-delayed {
  animation: float-blob 25s infinite alternate-reverse ease-in-out;
}

@keyframes float-blob {
  0% {
    transform: translate(0px, 0px) scale(1);
  }

  33% {
    transform: translate(30px, -50px) scale(1.1);
  }

  66% {
    transform: translate(-20px, 20px) scale(0.95);
  }

  100% {
    transform: translate(0px, 0px) scale(1);
  }
}

/* Subtle Interactive Component States */
.card-hover-lift {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.dark .card-hover-lift:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

/* Text Gradients */
.gradient-text-purple {
  background: linear-gradient(135deg, #543feb 0%, #a259ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text-royal {
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Focus States for Keyboard Navigation Accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Custom Accordion Caret Rotation for FAQ */
details summary::-webkit-details-marker {
  display: none;
}

details[open] summary svg {
  transform: rotate(180deg);
}

details summary svg {
  transition: transform 0.2s ease-in-out;
}

/* Collapsible FAQ Section style */
.collapsed-faqs .faq-item:nth-child(n+5) {
  display: none !important;
}

/* Content Visibility Optimization for Below-The-Fold Sections */
section:not(#hero),
footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

/* ============================================================
   GLOBAL RESPONSIVE RULES
   Applies across all pages: index, features, plans,
   support, login, signup
   ============================================================ */

/* --- Base container & section spacing for mobile --- */
@media (max-width: 639px) {
  /* Tighter horizontal padding on small phones */
  .max-w-7xl,
  .max-w-6xl,
  .max-w-5xl,
  .max-w-4xl,
  .max-w-3xl {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Reduce section vertical padding */
  section {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  /* Prevent any media element from causing horizontal scroll */
  img,
  video,
  iframe,
  svg {
    max-width: 100%;
  }
}

/* --- Shared heading size scale for mobile --- */
@media (max-width: 767px) {
  .text-5xl {
    font-size: 1.75rem !important;
    line-height: 2.25rem !important;
  }

  .text-6xl {
    font-size: 2rem !important;
    line-height: 2.5rem !important;
  }

  .text-7xl {
    font-size: 2.25rem !important;
    line-height: 2.75rem !important;
  }

  .text-8xl {
    font-size: 2.5rem !important;
    line-height: 3rem !important;
  }

  /* section h2 */
  h2.text-4xl {
    font-size: 1.625rem !important;
    line-height: 2.125rem !important;
  }
}

/* Prevent horizontal overflow globally */
* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
}

body {
  overflow: visible;
  max-width: 100%;
  width: 100%;
}

/* ============================================================
   GLOBAL LAYOUT OPTIMIZATION — REDUCE SIDE WHITE SPACE
   Widen standard container max-widths and reduce horizontal padding
   on desktop screens across the entire website.
   ============================================================ */
@media (min-width: 1280px) {
  .max-w-7xl {
    max-width: 1520px !important;
  }

  .max-w-6xl {
    max-width: 1380px !important;
  }

  .max-w-5xl {
    max-width: 1240px !important;
  }

  .max-w-4xl {
    max-width: 1120px !important;
  }

  /* Optimize horizontal padding so sections utilize screen width better */
  .px-12,
  .md\:px-12,
  .lg\:px-12 {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  .px-10,
  .md\:px-10,
  .lg\:px-10 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

@media (min-width: 1536px) {
  .max-w-7xl {
    max-width: 1660px !important;
  }

  .max-w-6xl {
    max-width: 1500px !important;
  }
}

#spend-success-msg {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 400ms ease, transform 400ms ease;
}

/* Claim Desk Card Specific */
.claim-row {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 350ms cubic-bezier(0.16, 1, 0.3, 1), transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes gentlePulse5s {

  0%,
  94%,
  100% {
    transform: scale(1);
  }

  97% {
    transform: scale(1.08);
  }
}

#claim-notif-icon {
  animation: gentlePulse5s 5s infinite ease-in-out;
}

/* Performance & Responsive overrides */
@media (prefers-reduced-motion: reduce) {

  .saas-feature-card,
  .saas-card-initial,
  .invoice-row,
  .claim-row,
  .spend-legend-dot,
  #payroll-growth-badge,
  #spend-success-msg {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ==========================================================================
   PREMIUM CINEMATIC PAGE REVEAL & INTRO ANIMATIONS (APPLE / STRIPE / LINEAR)
   ========================================================================== */

/* 1. Cinematic Page Intro Reveal (Hardware Accelerated Compositor Only) */
@keyframes cinematicPageReveal {
  0% {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.cinematic-page-reveal {
  animation: cinematicPageReveal 800ms cubic-bezier(0.16, 1, 0.3, 1) 0ms both;
}

/* 2. Navbar Fades in + Slides down 12px over 500ms (100ms delay) */
@keyframes cinematicNav {
  0% {
    opacity: 0;
    transform: translate3d(0, -12px, 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.entrance-nav {
  animation: cinematicNav 500ms cubic-bezier(0.16, 1, 0.3, 1) 100ms both;
}

/* 3. Smooth Fade Up for Staggered Content */
@keyframes cinematicFadeUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 15px, 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.entrance-badge {
  animation: cinematicFadeUp 600ms cubic-bezier(0.16, 1, 0.3, 1) 150ms both;
}

.entrance-heading {
  animation: cinematicFadeUp 700ms cubic-bezier(0.16, 1, 0.3, 1) 200ms both;
}

.entrance-desc {
  animation: cinematicFadeUp 700ms cubic-bezier(0.16, 1, 0.3, 1) 250ms both;
}

/* 4. Buttons Fade in & Subtle Scale (0.96 -> 1) */
@keyframes cinematicBtn {
  0% {
    opacity: 0;
    transform: scale(0.96);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.entrance-btn-primary {
  animation: cinematicBtn 600ms cubic-bezier(0.16, 1, 0.3, 1) 300ms both;
}

.entrance-btn-secondary {
  animation: cinematicBtn 600ms cubic-bezier(0.16, 1, 0.3, 1) 350ms both;
}

/* 5. Hero Dashboard Window (Compositor-only hardware accelerated) */
@keyframes cinematicDashboard {
  0% {
    opacity: 0;
    transform: translate3d(0, 15px, 0) scale(0.98);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.entrance-dashboard {
  animation: cinematicDashboard 800ms cubic-bezier(0.16, 1, 0.3, 1) 450ms both;
}

/* 6. Scroll Sections (opacity: 0 -> 1, translateY: 24px -> 0, duration: 600ms) */
.scroll-reveal-init {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-reveal-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Feature Cards Staggered delays (80ms steps) */
.card-stagger-0 {
  transition-delay: 0ms !important;
}

.card-stagger-1 {
  transition-delay: 80ms !important;
}

.card-stagger-2 {
  transition-delay: 160ms !important;
}

.card-stagger-3 {
  transition-delay: 240ms !important;
}

/* 7. Subtle Luxurious Hover Effects (250ms duration) */
.saas-feature-card,
.hover-card-cinematic {
  transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 250ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.saas-feature-card:hover,
.hover-card-cinematic:hover {
  transform: translate3d(0, -4px, 0) !important;
  box-shadow: 0 20px 40px -10px rgba(84, 63, 235, 0.15), 0 10px 20px -5px rgba(0, 0, 0, 0.05) !important;
}

.hover-btn-cinematic {
  transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 250ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.hover-btn-cinematic:hover {
  transform: translate3d(0, -2px, 0) !important;
  box-shadow: 0 12px 30px -5px rgba(84, 63, 235, 0.35) !important;
}

.saas-feature-card:hover .saas-card-icon,
.hover-card-cinematic:hover svg {
  transform: scale(1.05) !important;
  transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 8. Performance & Accessibility Override */
@media (prefers-reduced-motion: reduce) {

  .cinematic-page-reveal,
  .entrance-nav,
  .entrance-badge,
  .entrance-heading,
  .entrance-desc,
  .entrance-btn-primary,
  .entrance-btn-secondary,
  .entrance-dashboard,
  .scroll-reveal-init {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    will-change: auto !important;
  }
}

/* ================= PREMIUM SAAS REDESIGN ================= */

/* Premium Glassmorphism Navbar */
.glass-nav {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.6);
}

.dark .glass-nav {
  background: rgba(15, 23, 42, 0.75);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Floating Animations */
@keyframes float-slow {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-12px);
  }

  100% {
    transform: translateY(0px);
  }
}

@keyframes float-medium {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-8px);
  }

  100% {
    transform: translateY(0px);
  }
}

@keyframes float-fast {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-5px);
  }

  100% {
    transform: translateY(0px);
  }
}

.animate-float-slow {
  animation: float-slow 6s ease-in-out infinite;
}

.animate-float-medium {
  animation: float-medium 4s ease-in-out infinite;
}

.animate-float-fast {
  animation: float-fast 3s ease-in-out infinite;
}

/* Dashboard Card Effects */
.premium-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 10px 30px -10px rgba(0, 0, 0, 0.05),
    0 1px 3px rgba(0, 0, 0, 0.02);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.premium-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow:
    0 20px 40px -10px rgba(0, 0, 0, 0.08),
    0 4px 6px rgba(0, 0, 0, 0.04);
}

.dark .premium-card {
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.4);
}

/* Subtle Glow Effects */
.glow-accent {
  box-shadow: 0 0 20px rgba(84, 63, 235, 0.4);
}

.bg-gradient-premium {
  background: linear-gradient(135deg, #f8f9fa 0%, #f1f5f9 100%);
}

.dark .bg-gradient-premium {
  background: linear-gradient(135deg, #0f172a 0%, #020617 100%);
}

/* Mobile Navigation Drawer Fullscreen Overlay */
#mobile-drawer {
  z-index: 9999 !important;
}