/* ============================================================
   Dvirexo — Coming Soon
   Ocean / dark · brand-first · heartbeat as signature
   ============================================================ */

:root {
  color-scheme: dark;
  --bg: #080b10;
  --bg-soft: #0e131a;
  --surface: rgba(255, 255, 255, 0.03);
  --surface-strong: rgba(255, 255, 255, 0.055);
  --border: rgba(255, 255, 255, 0.1);
  --text: #eef2f7;
  --text-dim: #93a0b0;
  --text-faint: #667487;
  --accent-a: #3b82f6;
  --accent-b: #1d6fe5;
  --accent-c: #22d3ee;
  --accent-d: #60a5fa;
  --grad: linear-gradient(120deg, var(--accent-a), #2563eb 45%, var(--accent-c));
  --nav-bg: rgba(8, 11, 16, 0.7);
  --font: "Source Sans 3", "Cairo", -apple-system, sans-serif;
  --font-heading: "Bricolage Grotesque", "Cairo", sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --radius-sm: 8px;
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f4f7;
  --bg-soft: #ffffff;
  --surface: rgba(12, 22, 36, 0.03);
  --surface-strong: rgba(12, 22, 36, 0.055);
  --border: rgba(12, 22, 36, 0.12);
  --text: #10151c;
  --text-dim: #4d5968;
  --text-faint: #7a8796;
  --nav-bg: rgba(242, 244, 247, 0.82);
}

/* ---------- Color palettes ---------- */

[data-palette="aurora"] {
  --accent-a: #6d7cff;
  --accent-b: #8b5cf6;
  --accent-c: #4dd6ff;
  --accent-d: #8b5cf6;
  --grad: linear-gradient(120deg, var(--accent-a), var(--accent-b) 50%, var(--accent-c));
}

[data-palette="ink-ember"] {
  --accent-a: #2bb89b;
  --accent-b: #0f8a73;
  --accent-c: #e5a83b;
  --accent-d: #da6b48;
  --grad: linear-gradient(115deg, var(--accent-a), #57c7ac 45%, var(--accent-c));
}

[data-palette="ink-ember"][data-theme="light"] {
  --accent-a: #0f8a73;
  --accent-b: #0c6e5c;
  --accent-c: #a9761d;
  --accent-d: #bf5636;
  --grad: linear-gradient(115deg, #0f8a73, #159a80 45%, #b8801f);
}

[data-palette="ocean"] {
  --accent-a: #3b82f6;
  --accent-b: #1d6fe5;
  --accent-c: #22d3ee;
  --accent-d: #60a5fa;
  --grad: linear-gradient(120deg, var(--accent-a), #2563eb 45%, var(--accent-c));
}

[data-palette="ocean"][data-theme="light"] {
  --accent-a: #1d4ed8;
  --accent-b: #1e40af;
  --accent-c: #0891b2;
  --accent-d: #3b82f6;
  --grad: linear-gradient(120deg, #1d4ed8, #1e40af 45%, #0891b2);
}

[data-palette="noir-rose"] {
  --accent-a: #e879a9;
  --accent-b: #c02674;
  --accent-c: #f0abfc;
  --accent-d: #fb7185;
  --grad: linear-gradient(120deg, var(--accent-a), var(--accent-b) 50%, var(--accent-c));
}

[data-palette="noir-rose"][data-theme="light"] {
  --accent-a: #be185d;
  --accent-b: #9d174d;
  --accent-c: #a21caf;
  --accent-d: #e11d48;
  --grad: linear-gradient(120deg, #be185d, #9d174d 50%, #a21caf);
}

[data-palette="forest"] {
  --accent-a: #34d399;
  --accent-b: #059669;
  --accent-c: #a3e635;
  --accent-d: #4ade80;
  --grad: linear-gradient(120deg, var(--accent-a), var(--accent-b) 45%, var(--accent-c));
}

[data-palette="forest"][data-theme="light"] {
  --accent-a: #047857;
  --accent-b: #065f46;
  --accent-c: #65a30d;
  --accent-d: #16a34a;
  --grad: linear-gradient(120deg, #047857, #065f46 45%, #65a30d);
}

[data-palette="sandstone"] {
  --accent-a: #d4925a;
  --accent-b: #b86b3c;
  --accent-c: #e8c49a;
  --accent-d: #c97b4a;
  --grad: linear-gradient(120deg, var(--accent-a), var(--accent-b) 50%, var(--accent-c));
}

[data-palette="sandstone"][data-theme="light"] {
  --accent-a: #a65f35;
  --accent-b: #8b4a28;
  --accent-c: #c97b4a;
  --accent-d: #b45309;
  --grad: linear-gradient(120deg, #a65f35, #8b4a28 50%, #c97b4a);
}

/* Arabic — Cairo only on Arabic-tagged copy */
html[lang="ar"] body,
html[lang="ar"] .btn,
html[lang="ar"] input {
  font-family: "Cairo", var(--font);
}

html[lang="ar"] .status[lang="ar"],
html[lang="ar"] .status [lang="ar"],
html[lang="ar"] .slogan[lang="ar"],
html[lang="ar"] .hero-sub[lang="ar"] {
  font-family: "Cairo", var(--font);
  letter-spacing: 0;
}

html[lang="ar"] .brand-name,
html[lang="ar"] .brand-name[lang="en"],
html[lang="ar"] .topbar-brand[lang="en"] {
  font-family: var(--font-heading);
  letter-spacing: -0.045em;
}

html[lang="ar"] [lang="en"] {
  font-family: var(--font);
  letter-spacing: normal;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background 0.4s ease, color 0.4s ease;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.container {
  width: min(720px, 90%);
  margin-inline: auto;
}

::selection {
  background: color-mix(in srgb, var(--accent-a) 32%, transparent);
}

/* ---------- Ambient (quiet, full-bleed) ---------- */

.ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.plane {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, color-mix(in srgb, var(--accent-a) 14%, transparent), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
}

.horizon {
  position: absolute;
  left: 50%;
  bottom: 18%;
  transform: translateX(-50%);
  width: min(640px, 78%);
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--accent-a) 40%, transparent),
    transparent);
  animation: horizon-breathe 6s var(--ease) infinite alternate;
}

@keyframes horizon-breathe {
  from { opacity: 0.35; width: min(520px, 70%); }
  to   { opacity: 0.8; width: min(720px, 86%); }
}

.noise {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

[data-theme="light"] .noise { opacity: 0.06; }

/* ---------- Top bar ---------- */

.topbar {
  position: relative;
  z-index: 100;
  padding: 1.1rem 0;
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(960px, 90%);
}

.topbar-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.topbar-logo {
  display: block;
  border-radius: 6px;
}

.controls {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 0.6rem;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-dim);
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.icon-btn:hover,
.icon-btn:focus-visible {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent-a) 40%, transparent);
  outline: none;
}

.icon-btn svg { width: 18px; height: 18px; }

.icon-moon { display: none; }
[data-theme="light"] .icon-sun { display: none; }
[data-theme="light"] .icon-moon { display: block; }

/* ---------- Palette picker ---------- */

.palette-picker { position: relative; }

.palette-menu {
  position: fixed;
  z-index: 10000;
  min-width: 13.5rem;
  max-width: min(18rem, calc(100vw - 1.5rem));
  max-height: min(70vh, calc(100dvh - 4.5rem));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.35rem;
  border-radius: 10px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  flex-direction: column;
  gap: 2px;
  -webkit-overflow-scrolling: touch;
}

.palette-menu:not([hidden]) { display: flex; }
.palette-menu[hidden] { display: none !important; }

[data-theme="light"] .palette-menu {
  box-shadow: 0 12px 28px rgba(16, 22, 36, 0.1);
}

.palette-option {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font-family: var(--font);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  text-align: start;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.palette-option:hover,
.palette-option:focus-visible {
  background: var(--surface-strong);
  outline: none;
}

.palette-option.is-active,
.palette-option[aria-selected="true"] {
  border-color: color-mix(in srgb, var(--accent-a) 45%, transparent);
  background: var(--surface);
}

.palette-swatch {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.palette-swatch i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: block;
}

.palette-divider {
  height: 1px;
  margin: 0.35rem 0.4rem;
  background: var(--border);
  border: 0;
}

.palette-custom {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.45rem 0.55rem 0.55rem;
}

.palette-custom-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.palette-custom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.palette-custom-row label {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text);
}

.palette-custom-row input[type="color"] {
  width: 2.1rem;
  height: 1.55rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.palette-custom-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.palette-custom-row input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 4px;
}

.palette-custom-apply {
  margin-top: 0.15rem;
  width: 100%;
  padding: 0.5rem 0.65rem;
  border-radius: 7px;
  border: 1px solid color-mix(in srgb, var(--accent-a) 40%, transparent);
  background: var(--surface-strong);
  color: var(--text);
  font-family: var(--font);
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.palette-custom-apply:hover,
.palette-custom-apply:focus-visible {
  background: color-mix(in srgb, var(--accent-a) 14%, var(--surface-strong));
  border-color: var(--accent-a);
  outline: none;
}

/* ---------- Hero ---------- */

.hero {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 2.5rem 0 4rem;
  min-height: 0;
}

.hero-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 1.35rem;
}

html[lang="ar"] .status {
  letter-spacing: 0.04em;
  text-transform: none;
}

.status-mark {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-a);
  animation: status-pulse 2.8s ease infinite;
}

@keyframes status-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.brand-name {
  font-family: var(--font-heading);
  font-size: clamp(3.4rem, 11vw, 6.5rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.92;
  color: var(--text);
  margin: 0;
}

.slogan {
  margin-top: 1rem;
  font-size: clamp(0.92rem, 1.5vw, 1.05rem);
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  max-width: 28rem;
}

html[lang="ar"] .slogan {
  letter-spacing: 0;
}

.hero-sub {
  margin-top: 1.1rem;
  max-width: 28rem;
  color: var(--text-dim);
  font-size: clamp(1.02rem, 1.6vw, 1.15rem);
  line-height: 1.55;
}

/* Signature motion — heartbeat */
.heartbeat {
  margin-top: 2.25rem;
  width: min(100%, 300px);
}

.heartbeat-svg {
  display: block;
  width: 100%;
  height: 44px;
  overflow: visible;
}

.heartbeat-track {
  fill: none;
  stroke: color-mix(in srgb, var(--accent-a) 16%, transparent);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.heartbeat-path {
  fill: none;
  stroke: var(--accent-a);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 72 340;
  animation: heartbeat-draw 2.4s linear infinite;
}

@keyframes heartbeat-draw {
  from { stroke-dashoffset: 412; }
  to   { stroke-dashoffset: 0; }
}

/* ---------- Reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: fadeUp 0.75s var(--ease) forwards;
  animation-delay: var(--d, 0s);
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Footer ---------- */

.footer {
  padding: 1.35rem 0 1.75rem;
  border-top: 1px solid var(--border);
}

.footer-inner {
  width: min(960px, 90%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.86rem;
  color: var(--text-faint);
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.footer-links a {
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.25s ease;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--text);
  outline: none;
}

.social {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
}

.social svg { width: 17px; height: 17px; }

/* ---------- Responsive ---------- */

@media (max-width: 560px) {
  .footer-inner {
    flex-direction: column;
    text-align: center;
  }

  .hero { padding: 1.5rem 0 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .horizon,
  .status-mark,
  .reveal,
  .heartbeat-path {
    animation: none !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .heartbeat-path {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    opacity: 0.9;
  }

  .horizon { opacity: 0.55; }
}