@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Marcellus&display=swap');
@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

:root {
  /* Default Appearance Tokens (Light) */
  --ka-bg: #FFFFFF;
  --ka-bg-soft: #F4F8FF;
  --ka-surface: #FFFFFF;
  --ka-surface-hover: #EEF5FF;
  --ka-text: #4b5563;
  --ka-text-strong: #172033;
  --ka-text-muted: #64748B;
  --ka-border: #DDE6F3;

  /* Default Accent Swatch (Royal Blue) */
  --ka-primary: #2B3192;
  --ka-primary-hover: #242A7C;
  --ka-secondary: #1FADEA;
  --ka-luxury: #D6A84F;
  --ka-scrollbar: #2B3192;
  --ka-gradient-start: #2B3192;
  --ka-gradient-end: #1FADEA;
  --ka-primary-dark: #080D2B;

  --ka-success: #16A34A;
  --ka-warning: #F59E0B;
  --ka-error: #DC2626;

  /* Map standard variables to theme tokens */
  --color-primary: var(--ka-primary);
  --color-primary-dark: var(--ka-primary-dark);
  --color-secondary: var(--ka-secondary);
  --color-accent-gold: var(--ka-luxury);

  --color-bg: var(--ka-bg);
  --color-bg-soft: var(--ka-bg-soft);
  --color-card: var(--ka-surface);

  --color-text: var(--ka-text);
  --color-text-strong: var(--ka-text-strong);
  --color-text-muted: var(--ka-text-muted);

  --color-border: var(--ka-border);

  --color-success: var(--ka-success);
  --color-warning: var(--ka-warning);
  --color-error: var(--ka-error);

  --radius-button: 50px;
  --radius-card: 0.1rem;
  --shadow-line: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;

  --font-heading: "Marcellus", Georgia, serif;
  --font-body: "Inter", Arial, sans-serif;

  --gradient-primary: linear-gradient(135deg, var(--ka-primary-dark) 0%, var(--ka-primary) 55%, var(--ka-secondary) 100%);
  --gradient-soft: linear-gradient(180deg, var(--ka-bg) 0%, var(--ka-bg-soft) 100%);
  --gradient-luxury: linear-gradient(135deg, #D6A84F 0%, #F5C05B 50%, #B8860B 100%);
}

/* Appearance Mode Override: Dark Mode */
html[data-theme-mode="dark"], html.dark {
  --ka-bg: #080D2B;
  --ka-bg-soft: #0E1643;
  --ka-surface: #0E1643;
  --ka-surface-hover: #172060;
  --ka-text: #D2D6DC;
  --ka-text-strong: #d1d5dc;
  --ka-text-muted: #94A3B8;
  --ka-border: rgba(255, 255, 255, 0.08);
}

/* Accent Theme Overrides */
html[data-ka-accent="royal"] {
  --ka-primary: #2B3192;
  --ka-primary-hover: #242A7C;
  --ka-secondary: #1FADEA;
  --ka-luxury: #D6A84F;
  --ka-scrollbar: #2B3192;
  --ka-primary-dark: #080D2B;
}

html[data-ka-accent="cyan"] {
  --ka-primary: #1FADEA;
  --ka-primary-hover: #1793C9;
  --ka-secondary: #2B3192;
  --ka-luxury: #D6A84F;
  --ka-scrollbar: #1FADEA;
  --ka-primary-dark: #0F5E80;
}

html[data-ka-accent="gold"] {
  --ka-primary: #D6A84F;
  --ka-primary-hover: #BF9440;
  --ka-secondary: #2B3192;
  --ka-luxury: #1FADEA;
  --ka-scrollbar: #D6A84F;
  --ka-primary-dark: #473511;
}

html[data-ka-accent="navy"] {
  --ka-primary: #080D2B;
  --ka-primary-hover: #040717;
  --ka-secondary: #1FADEA;
  --ka-luxury: #D6A84F;
  --ka-scrollbar: #080D2B;
  --ka-primary-dark: #02030C;
}

html[data-ka-accent="emerald"] {
  --ka-primary: #16A34A;
  --ka-primary-hover: #15803D;
  --ka-secondary: #2B3192;
  --ka-luxury: #D6A84F;
  --ka-scrollbar: #16A34A;
  --ka-primary-dark: #0A3D1C;
}

html[data-ka-accent="amber"] {
  --ka-primary: #F59E0B;
  --ka-primary-hover: #D97706;
  --ka-secondary: #2B3192;
  --ka-luxury: #D6A84F;
  --ka-scrollbar: #F59E0B;
  --ka-primary-dark: #5C3A00;
}

/* Semantic Theme Helpers */
.bg-theme {
  background-color: var(--ka-bg) !important;
}
.bg-theme-soft {
  background-color: var(--ka-bg-soft) !important;
}
.bg-surface {
  background-color: var(--ka-surface) !important;
}
.text-theme {
  color: var(--ka-text-strong) !important;
}
.text-muted {
  color: var(--ka-text-muted) !important;
}
.border-theme {
  border-color: var(--ka-border) !important;
}
.text-primary-theme {
  color: var(--ka-primary) !important;
}
.bg-primary-theme {
  background-color: var(--ka-primary) !important;
}

/* Base resets & typography */

body {
  font-family: var(--font-body);
  font-size: clamp(0.8125rem, 1vw, 0.875rem);
  color: var(--color-text) !important;
  background-color: var(--color-bg) !important;
  line-height: 1.6;
  transition: background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border-color 500ms cubic-bezier(0.4, 0, 0.2, 1);
}


h1 {
  font-family: var(--font-heading);
  font-size: clamp(1.45rem, 3vw, 1.8rem);
  color: var(--color-text-strong);
  font-weight: 400;
  line-height: 1.25;
}

h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  color: var(--color-text-strong);
  font-weight: 400;
  line-height: 1.3;
}

h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 2vw, 1.45rem);
  color: var(--color-text-strong);
  font-weight: 400;
}

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

::-webkit-scrollbar-track {
  background: var(--color-bg-soft);
}

::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-secondary);
}

/* Modern luxury buttons (pill) */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.75rem;
  border-radius: var(--radius-button);
  font-weight: 600;
  font-size: 0.8125rem;
  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  transform: translate3d(0, 0, 0);
  cursor: pointer;
  outline: none;
}

.btn-pill:active {
  transform: scale(0.96) translate3d(0, 0, 0);
}

.btn-primary {
  background-color: var(--color-primary);
  color: #d1d5dc;
}

.btn-primary:hover {
  background-color: var(--color-secondary);
  box-shadow: 0 4px 14px rgba(31, 173, 234, 0.35);
}

.btn-outline-gold {
  border: 1.5px solid var(--color-accent-gold);
  color: var(--color-text-strong);
}

.btn-outline-gold:hover {
  background-color: var(--color-accent-gold);
  color: #d1d5dc;
  box-shadow: 0 4px 14px rgba(214, 168, 79, 0.35);
}

.btn-luxury {
  background: var(--gradient-luxury);
  color: #d1d5dc;
}

.btn-luxury:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 14px rgba(214, 168, 79, 0.35);
}

/* Card components */
.card-luxury {
  background-color: var(--color-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-line);
  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.card-luxury:hover {
  background-color: var(--color-bg-soft);
  box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
}

/* Custom background sections */
.section-white {
  background-color: #FFFFFF;
}

.section-soft-blue {
  background-color: var(--color-bg-soft);
}

.section-navy {
  background-color: var(--color-primary-dark);
  color: #d1d5dc;
}

.section-navy h1, .section-navy h2, .section-navy h3, .section-navy h4 {
  color: #d1d5dc !important;
}

.section-navy .btn-outline-gold {
  color: #d1d5dc;
}

.section-navy .btn-outline-gold:hover {
  color: #d1d5dc;
}

.section-navy .btn-primary {
  background-color: var(--color-accent-gold);
  color: var(--color-primary-dark);
}

.section-navy .btn-primary:hover {
  background-color: #FFFFFF;
  color: var(--color-primary-dark);
  box-shadow: 0 4px 14px rgba(255, 255, 255, 0.35);
}

.section-gradient-cta {
  background: var(--gradient-primary);
  color: #d1d5dc;
}

.section-gradient-cta h1, .section-gradient-cta h2, .section-gradient-cta h3 {
  color: #d1d5dc !important;
}

.section-gradient-cta .btn-outline-gold {
  color: #d1d5dc;
}

.section-gradient-cta .btn-outline-gold:hover {
  color: #d1d5dc;
}

/* Glassmorphism nav blur */
.nav-glass {
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}

.dark .nav-glass {
  background-color: rgba(8, 13, 43, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Premium Custom Animations & Glassmorphism Utility Extensions */

@keyframes radar-pulse {
  0% {
    transform: scale(0.95);
    opacity: 0.05;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.25;
  }
  100% {
    transform: scale(0.95);
    opacity: 0.05;
  }
}

.animate-radar-pulse {
  animation: radar-pulse 6s ease-in-out infinite;
}

/* Scroll Animation Reveal Classes */
.scroll-animate {
  will-change: transform, opacity;
}

/* Glassmorphism panel styling */
.glass-panel {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.dark .glass-panel {
  background: rgba(8, 13, 43, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-panel-dark {
  background: rgba(8, 13, 43, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Neon glow tags */
.glow-gold {
  box-shadow: 0 0 15px rgba(214, 168, 79, 0.25);
}

.glow-blue {
  box-shadow: 0 0 15px rgba(31, 173, 234, 0.25);
}

/* Premium theme switching slow transitions */
.theme-transition {
  transition: all 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Micro-Animations & 3D Interactive Classes */
@keyframes wifi-ripple {
  0% { opacity: 0.3; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0.3; transform: scale(0.9); }
}
.animate-wifi-pulse {
  animation: wifi-ripple 2s ease-in-out infinite;
}

@keyframes power-flash {
  0%, 100% { opacity: 0.6; filter: drop-shadow(0 0 2px rgba(214, 168, 79, 0.4)); }
  50% { opacity: 1; filter: drop-shadow(0 0 8px rgba(214, 168, 79, 0.9)); }
}
.animate-power-flash {
  animation: power-flash 1.5s ease-in-out infinite;
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.animate-wheel-spin:hover {
  animation: spin-slow 4s linear infinite;
}

/* Day/Night cross-fade transition support */
.ambience-fade {
  transition: opacity 800ms cubic-bezier(0.4, 0, 0.2, 1), transform 800ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* 3D isometric perspectives and card setups */
.perspective-1000 {
  perspective: 1000px;
}
.preserve-3d {
  transform-style: preserve-3d;
}
.backface-hidden {
  backface-visibility: hidden;
}

/* Reduced Motion Override */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
  .animate-wifi-pulse, .animate-power-flash, .animate-wheel-spin, .animate-hero-bg {
    animation: none !important;
  }
}

/* Background image Ken Burns zoom animation */
@keyframes ken-burns {
  0% { transform: scale(1.02); }
  50% { transform: scale(1.12); }
  100% { transform: scale(1.02); }
}

.animate-hero-bg {
  animation: ken-burns 30s ease-in-out infinite;
}

/* Global plain white text override */
.text-white,
.hover\:text-white:hover,
.group-hover\:text-white:hover,
.focus\:text-white:focus {
  color: #d1d5dc !important;
}

/* Global Heading Size Reductions */
body h1, body .h1-lux {
  font-size: clamp(1.25rem, 2.6vw, 1.5rem) !important;
}

body h2, body .h2-lux {
  font-size: clamp(1.1rem, 2vw, 1.3rem) !important;
}

body h3, body h4, body h5, body h6, body .h3-lux {
  font-size: clamp(0.925rem, 1.6vw, 1.1rem) !important;
}

/* Maintain distinct proportional sizes for Hero main header */
body .hero-title {
  font-size: clamp(1.5rem, 3.5vw, 2.2rem) !important;
}