/* Dreamovik landing page — custom styles layered on top of Tailwind (CDN, preflight disabled) */

:root {
  --bg: #051424;
  --bg-soft: #0a1d30;
  --header-bg: rgba(6, 27, 43, 0.85);
  --panel: rgba(255, 255, 255, 0.06);
  --panel-strong: rgba(255, 255, 255, 0.09);
  --border: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.22);
  --heading: #e7eef8;
  --body: #aebfd1;
  --muted: #7d8fa3;
  --footer-bg: #04101c;

  --cyan-strong: #00f0ff;
  --cyan-tint-bg: rgba(0, 240, 255, 0.1);
  --cyan-tint-border: rgba(0, 240, 255, 0.3);

  --purple: #c7aeff;
  --purple-tint-bg: rgba(112, 0, 255, 0.12);
  --purple-tint-border: rgba(112, 0, 255, 0.35);

  --accent3: #9fd8ff;
  --accent3-tint-bg: rgba(159, 216, 255, 0.1);
  --accent3-tint-border: rgba(159, 216, 255, 0.3);

  --on-accent: #002022;
}

html[data-theme="light"] {
  --bg: #f3f9fb;
  --bg-soft: #e9f4f6;
  --header-bg: rgba(255, 255, 255, 0.85);
  --panel: rgba(9, 40, 52, 0.04);
  --panel-strong: #ffffff;
  --border: rgba(8, 47, 61, 0.1);
  --border-strong: rgba(8, 47, 61, 0.16);
  --heading: #0b2530;
  --body: #4b636c;
  --muted: #78919a;
  --footer-bg: #ffffff;

  --cyan-strong: #0e7490;
  --cyan-tint-bg: rgba(14, 116, 144, 0.08);
  --cyan-tint-border: rgba(14, 116, 144, 0.22);

  --purple: #7c3aed;
  --purple-tint-bg: rgba(124, 58, 237, 0.08);
  --purple-tint-border: rgba(124, 58, 237, 0.22);

  --accent3: #0369a1;
  --accent3-tint-bg: rgba(3, 105, 161, 0.08);
  --accent3-tint-border: rgba(3, 105, 161, 0.22);

  --on-accent: #ffffff;
}

* {
  border-color: var(--border);
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg);
  color: var(--body);
  font-family: "Hanken Grotesk", "Cairo", ui-sans-serif, system-ui, sans-serif;
  transition:
    background-color 0.35s ease,
    color 0.35s ease;
}

html[dir="rtl"] body {
  font-family: "Cairo", "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
}

.font-display {
  font-family: "Space Grotesk", "Cairo", ui-sans-serif, system-ui, sans-serif;
}

html[dir="rtl"] .font-display {
  font-family: "Cairo", "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
}

.bg-app {
  background-color: var(--bg);
}
.bg-app-soft {
  background-color: var(--bg-soft);
}
.bg-header {
  background-color: var(--header-bg);
}
.bg-panel {
  background-color: var(--panel);
}
.bg-panel-strong {
  background-color: var(--panel-strong);
}
.bg-footer {
  background-color: var(--footer-bg);
}
.border-app {
  border-color: var(--border);
}
.border-app-strong {
  border-color: var(--border-strong);
}
.text-heading {
  color: var(--heading);
}
.text-body {
  color: var(--body);
}
.text-muted {
  color: var(--muted);
}
.text-cyan {
  color: var(--cyan-strong);
}
.text-purple {
  color: var(--purple);
}
.text-accent3 {
  color: var(--accent3);
}
.text-on-accent {
  color: var(--on-accent);
}
.accent-cyan {
  background-color: var(--cyan-strong);
}

.icon-badge-cyan {
  background-color: var(--cyan-tint-bg);
  border-color: var(--cyan-tint-border);
  color: var(--cyan-strong);
}
.icon-badge-purple {
  background-color: var(--purple-tint-bg);
  border-color: var(--purple-tint-border);
  color: var(--purple);
}
.icon-badge-accent3 {
  background-color: var(--accent3-tint-bg);
  border-color: var(--accent3-tint-border);
  color: var(--accent3);
}

.grad-text {
  background-image: linear-gradient(90deg, var(--cyan-strong), var(--purple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.glow-cyan {
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.18);
}
html[data-theme="light"] .glow-cyan {
  box-shadow: 0 4px 24px rgba(8, 47, 61, 0.08);
}

.backdrop-blur-panel {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Starfield canvas behind hero */
#starfield {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.6;
}
html[data-theme="light"] #starfield {
  opacity: 0.18;
}

/* Blobs */
.blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(70px);
  pointer-events: none;
}

/* Reveal-on-scroll */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal="fade"] {
  transform: none;
}

/* Theme toggle switch */
.theme-switch {
  position: relative;
  width: 3.25rem;
  height: 1.75rem;
  border-radius: 9999px;
  background: var(--panel-strong);
  border: 1px solid var(--border-strong);
  cursor: pointer;
  transition: background 0.3s ease;
  flex-shrink: 0;
}
.theme-switch .knob {
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, var(--cyan-strong), var(--purple));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: inset-inline-start 0.3s ease;
}
html[data-theme="light"] .theme-switch .knob {
  inset-inline-start: calc(100% - 1.25rem - 2px);
}
.theme-switch .knob svg {
  width: 0.7rem;
  height: 0.7rem;
  color: #051424;
}

/* Mobile nav */
#mobile-nav {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
#mobile-nav.open {
  max-height: 30rem;
}

/* Marquee tags */
.tag-pill {
  border: 1px solid var(--border-strong);
  background: var(--panel);
}

::selection {
  background: rgba(0, 240, 255, 0.3);
  color: var(--heading);
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}

.animate-pulse-slow {
  animation: pulse-slow 4s ease-in-out infinite;
}
@keyframes pulse-slow {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.06);
  }
}

/* DB-driven bilingual text: show only the active language. */
html[lang="ar"] [data-lang="en"],
html:not([lang="ar"]) [data-lang="ar"] {
  display: none;
}