/* ============================================================
   HIGH STANDARD MEDICAL — Custom Styles
   Futuristic Healthcare Homepage
   ============================================================ */

/* ----- CSS Reset & Base ----- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: auto;
}

html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

body {
  background-color: #020817;
  color: #ffffff;
  font-family: 'Manrope', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ----- Selection ----- */
::selection {
  background: rgba(22, 214, 216, 0.25);
  color: #ffffff;
}

::-moz-selection {
  background: rgba(22, 214, 216, 0.25);
  color: #ffffff;
}

/* ----- Scrollbar ----- */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #020817;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(22, 214, 216, 0.3);
}

/* ----- Aurora Background Animation ----- */
.aurora-bg {
  background: linear-gradient(
    135deg,
    #020817 0%,
    #03152D 25%,
    #041B3C 45%,
    #071E45 55%,
    #0A2F63 70%,
    #041B3C 85%,
    #020817 100%
  );
  background-size: 400% 400%;
  animation: aurora-shift 18s ease-in-out infinite;
}

@keyframes aurora-shift {
  0%, 100% { background-position: 0% 50%; }
  25% { background-position: 100% 0%; }
  50% { background-position: 100% 100%; }
  75% { background-position: 0% 100%; }
}

/* ----- Noise Texture Overlay ----- */
.noise-overlay {
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* ----- Digital Grid ----- */
.digital-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

/* ----- DNA Animated Lines ----- */
.dna-line-1, .dna-line-2, .dna-line-3 {
  animation: dna-drift-1 20s ease-in-out infinite;
}

.dna-line-2 {
  animation: dna-drift-2 25s ease-in-out infinite;
}

.dna-line-3 {
  animation: dna-drift-1 30s ease-in-out infinite;
  animation-direction: reverse;
}

@keyframes dna-drift-1 {
  0%, 100% { transform: translateY(0) translateX(0); opacity: 0.04; }
  25% { transform: translateY(-30px) translateX(15px); opacity: 0.06; }
  50% { transform: translateY(-10px) translateX(-10px); opacity: 0.03; }
  75% { transform: translateY(20px) translateX(-15px); opacity: 0.05; }
}

@keyframes dna-drift-2 {
  0%, 100% { transform: translateY(0) translateX(0); opacity: 0.04; }
  33% { transform: translateY(25px) translateX(-20px); opacity: 0.06; }
  66% { transform: translateY(-15px) translateX(20px); opacity: 0.02; }
}

/* ----- Glassmorphism Utilities ----- */
.glass-nav {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.glass-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.glass-card-heavy {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
}

.glass-btn {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.glass-overlay {
  background: rgba(2, 8, 23, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.glass-strip {
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.glass-footer {
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ----- Hero Elements ----- */
.hero-word-gradient {
  background: linear-gradient(180deg, #16D6D8 0%, #118BC9 40%, #FFFFFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.scroll-dot {
  animation: scroll-bounce 2s ease-in-out infinite;
}

@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(8px); opacity: 0.5; }
}

/* ----- Floating AI Card Animations ----- */
.ai-icon-float {
  animation: ai-float 3s ease-in-out infinite;
}

@keyframes ai-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.gradient-border-animated {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(22, 214, 216, 0.15) 90deg,
    transparent 180deg,
    rgba(17, 139, 201, 0.15) 270deg,
    transparent 360deg
  );
  animation: border-rotate 6s linear infinite;
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #fff calc(100% - 1px));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #fff calc(100% - 1px));
}

@keyframes border-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ----- Statistics Bar Glow ----- */
.stats-glow {
  background: radial-gradient(ellipse at center, rgba(22, 214, 216, 0.06) 0%, transparent 70%);
}

.glass-stats-bar {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.glass-stats-bar:hover {
  border-color: rgba(22, 214, 216, 0.25);
  box-shadow: 0 0 60px rgba(22, 214, 216, 0.06), inset 0 0 60px rgba(22, 214, 216, 0.02);
}

/* ----- Solution Cards ----- */
.solution-card {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.5s ease,
              box-shadow 0.5s ease;
}

.solution-card:hover {
  border-color: rgba(22, 214, 216, 0.3);
  box-shadow: 0 20px 60px rgba(22, 214, 216, 0.06);
}

.solution-card-border {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(22, 214, 216, 0.0) 180deg,
    transparent 360deg
  );
  transition: background 0.5s ease;
  mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #fff calc(100% - 0px));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #fff calc(100% - 0px));
}

.solution-card:hover .solution-card-border {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(22, 214, 216, 0.25) 90deg,
    transparent 180deg,
    rgba(17, 139, 201, 0.25) 270deg,
    transparent 360deg
  );
}

.solution-icon {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.solution-card:hover .solution-icon {
  transform: scale(1.1);
}

/* ----- Project CTA Button Overlay ----- */
.project-overlay {
  background: linear-gradient(
    to top,
    rgba(2, 8, 23, 0.92) 0%,
    rgba(2, 8, 23, 0.4) 50%,
    transparent 100%
  );
}

/* ----- Project Carousel Items ----- */
.project-thumb {
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-thumb.active {
  border-color: rgba(22, 214, 216, 0.4) !important;
  background: rgba(22, 214, 216, 0.06) !important;
  box-shadow: 0 0 30px rgba(22, 214, 216, 0.08);
}

/* ----- Partners Marquee ----- */
.partners-marquee {
  animation: marquee-scroll 40s linear infinite;
  width: max-content;
}

@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.partner-logo {
  opacity: 0.5;
  transition: opacity 0.4s ease;
}

.partner-logo:hover {
  opacity: 0.9;
}

/* ----- Innovation Illustration ----- */
.innovation-pulse {
  animation: innovation-pulse 3s ease-in-out infinite;
}

@keyframes innovation-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22, 214, 216, 0.3); }
  50% { box-shadow: 0 0 0 20px rgba(22, 214, 216, 0); }
}

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

@keyframes innovation-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-8px) rotate(1deg); }
  66% { transform: translateY(4px) rotate(-1deg); }
}

.innovation-ring {
  animation: ring-rotate 20s linear infinite;
}

@keyframes ring-rotate {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ----- Timeline ----- */
.timeline-line {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 10%,
    rgba(22, 214, 216, 0.2) 30%,
    rgba(22, 214, 216, 0.1) 50%,
    rgba(22, 214, 216, 0.2) 70%,
    rgba(255, 255, 255, 0.05) 90%,
    transparent 100%
  );
}

.timeline-node {
  box-shadow: 0 0 15px rgba(22, 214, 216, 0.4);
  background: rgba(22, 214, 216, 0.7);
}

.timeline-node-active {
  box-shadow: 0 0 25px rgba(22, 214, 216, 0.6), 0 0 50px rgba(22, 214, 216, 0.2);
  background: #16D6D8;
  animation: node-glow 2s ease-in-out infinite;
}

@keyframes node-glow {
  0%, 100% { box-shadow: 0 0 25px rgba(22, 214, 216, 0.6), 0 0 50px rgba(22, 214, 216, 0.2); }
  50% { box-shadow: 0 0 40px rgba(22, 214, 216, 0.8), 0 0 80px rgba(22, 214, 216, 0.3); }
}

/* ----- Cursor Glow ----- */
.cursor-glow {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(22, 214, 216, 0.04) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: opacity 0.3s ease;
  opacity: 0;
}

/* ----- Magnetic Button ----- */
.btn-magnetic {
  display: inline-flex;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ----- GSAP Scroll-Reveal Initial Hidden States ----- */
.solution-card,
.project-main,
.project-thumb,
.timeline-item,
.ai-reveal-card {
  opacity: 0;
  transform: translateY(60px);
}

.glass-stats-bar {
  opacity: 0;
  transform: translateY(50px);
}

.innovation-illustration {
  opacity: 0;
  transform: scale(0.9);
}

#innovation .glass-card {
  opacity: 0;
  transform: translateX(50px);
}

.project-thumb {
  opacity: 0;
  transform: translateX(50px);
}

#contact .glass-card-heavy {
  opacity: 0;
  transform: translateY(50px);
}

/* ----- Wave Canvas Background ----- */
#waveCanvas {
  opacity: 0.5;
}

/* ----- Lucide Icon Base Styles ----- */
.lucide {
  stroke-width: 2;
}

/* ----- Responsive Adjustments ----- */
@media (max-width: 1023px) {
  .hero-word-gradient {
    font-size: inherit;
  }

  #hero-canvas-container {
    height: 400px;
  }

  .timeline-line {
    left: 20px;
  }
}

@media (max-width: 767px) {
  #hero-canvas-container {
    height: 350px;
  }

  .glass-nav {
    background: rgba(255, 255, 255, 0.06);
  }

  .glass-stats-bar {
    border-radius: 24px;
  }

  .partners-marquee {
    animation-duration: 25s;
  }

  .cursor-glow {
    display: none;
  }
}

@media (min-width: 1600px) {
  .max-w-content {
    max-width: 1450px;
  }
}

/* ----- RTL: Arabic Language Support ----- */
[dir="rtl"] .text-left,
[dir="rtl"] .lg\:text-left {
  text-align: right;
}

[dir="rtl"] .text-right,
[dir="rtl"] .lg\:text-right {
  text-align: left;
}

[dir="rtl"] .lg\:grid-cols-\[45\%_55\%\] {
  direction: ltr;
}

[dir="rtl"] .hero-content {
  direction: rtl;
}

[dir="rtl"] .hero-buttons .group-hover\:translate-x-1 {
  --tw-translate-x: -0.25rem;
}

[dir="rtl"] #mobileDrawer {
  transform: translateX(-100%);
}

[dir="rtl"] #mobileDrawer.translate-x-full {
  transform: translateX(0) !important;
}

[dir="rtl"] .scroll-indicator .left-1\/2 {
  left: auto;
  right: 50%;
  transform: translate(50%, 0);
}

[dir="rtl"] .timeline-line {
  left: auto;
  right: 50%;
}

[dir="rtl"] .md\:text-right {
  text-align: left;
}

[dir="rtl"] .md\:text-left {
  text-align: right;
}

[dir="rtl"] .md\:pl-6 {
  padding-left: 0;
  padding-right: 1.5rem;
}

[dir="rtl"] .md\:pr-6 {
  padding-right: 0;
  padding-left: 1.5rem;
}

[dir="rtl"] .md\:justify-start {
  justify-content: flex-end;
}

[dir="rtl"] .md\:justify-end {
  justify-content: flex-start;
}

[dir="rtl"] .lg\:grid-cols-2 {
  direction: rtl;
}

[dir="rtl"] .project-carousel {
  direction: rtl;
}

[dir="rtl"] .group-hover\:translate-x-1 {
  --tw-translate-x: -0.25rem !important;
}

[dir="rtl"] .flex.gap-4,
[dir="rtl"] .flex.gap-2 {
  direction: rtl;
}

[dir="rtl"] .btn-magnetic {
  direction: rtl;
}

[dir="rtl"] .ml-6 {
  margin-left: 0;
  margin-right: 1.5rem;
}

[dir="rtl"] .pl-11 {
  padding-left: 0;
  padding-right: 2.75rem;
}

[dir="rtl"] .mr-1 {
  margin-right: 0;
  margin-left: 0.25rem;
}

[dir="rtl"] .partners-marquee {
  animation-direction: reverse;
  direction: ltr;
}

[dir="rtl"] #mobileClose {
  right: auto;
  left: 1.5rem;
}

/* Arabic font adjustments */
html[lang="ar"],
html[lang="ar"] body,
html[lang="ar"] * {
  font-family: 'Cairo', 'Manrope', system-ui, sans-serif !important;
  letter-spacing: 0;
}

html[lang="ar"] .hero-headline {
  line-height: 1.3;
}

html[lang="ar"] .text-sm,
html[lang="ar"] .text-xs {
  line-height: 1.8;
}