/* ==========================================================================
   Oivan.ai — AIVAN marketing site
   Complements Tailwind (CDN). Holds design tokens, typography, RTL handling,
   interactive component states and the CSS-drawn artwork.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  --ink: #232323;
  --ink-900: #1a1a1a;
  --ember: #f4511e;
  --ember-600: #d9441a;
  --ember-50: #fcefe7;
  --paper: #f5f4f0;
  --line: #dcd8d0;
  --muted: #5d5a55;

  --font-display: "Outfit", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-body: "Inter", "IBM Plex Sans Arabic", system-ui, sans-serif;

  color-scheme: light;
}

/* Arabic uses a dedicated typeface for both display and body text. */
:root:lang(ar) {
  --font-display: "IBM Plex Sans Arabic", "Outfit", system-ui, sans-serif;
  --font-body: "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif;
}

/* ---------- Base ---------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 4.5rem; /* clears the sticky header */
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
.font-display {
  font-family: var(--font-display);
}

h1,
h2 {
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Letter spacing breaks Arabic letter joining — always reset it. */
:lang(ar) *,
:lang(ar) *::before,
:lang(ar) *::after {
  letter-spacing: 0 !important;
}

/* Arabic script needs a little more vertical room. */
:lang(ar) h1 { line-height: 1.25; }
:lang(ar) h2,
:lang(ar) h3 { line-height: 1.4; }
:lang(ar) p,
:lang(ar) li { line-height: 1.85; }

/* Brand names and Latin tokens keep their natural direction inside RTL text. */
.ltr-isolate {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Directional icons (arrows) mirror in RTL. */
[dir="rtl"] .rtl-flip {
  transform: scaleX(-1);
}

/* ---------- Utilities ---------- */
.eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ember);
}

.icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.skip-link {
  position: absolute;
  inset-inline-start: 1rem;
  top: -100px;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--ember);
  color: #fff;
  font-weight: 600;
}

.skip-link:focus {
  top: 1rem;
}

:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
}

/* Vertical rules between columns, drawn on the inline-start edge so they
   follow reading direction automatically. */
@media (min-width: 1024px) {
  .col-rules > * + * {
    border-inline-start: 1px solid var(--rule-color, var(--line));
    padding-inline-start: 1.5rem;
  }
}

.on-dark {
  --rule-color: rgba(255, 255, 255, 0.16);
}

/* ---------- Header ---------- */
.nav-link {
  position: relative;
  padding-block: 0.25rem;
  transition: color 0.15s ease;
}

.nav-link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -2px;
  height: 2px;
  background: var(--ember);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

.nav-link:hover::after,
.nav-link:focus-visible::after {
  transform: scaleX(1);
}

/* ---------- Tabs ---------- */
.role-tab {
  position: relative;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.role-tab:hover {
  background: #fbfaf8;
}

.role-tab[aria-selected="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.role-tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 4px;
  background: var(--ember);
}

.role-panel:focus-visible {
  outline-offset: 8px;
}

.role-panel:not([hidden]) {
  animation: panel-in 0.3s ease both;
}

@keyframes panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Artwork (CSS / SVG drawn, no image files) ---------- */
.hero-art svg,
.infra-art svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Fade the artwork into the dark background on the text side. */
@media (min-width: 1024px) {
  .hero-art,
  .infra-art {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18%);
    mask-image: linear-gradient(to right, transparent 0, #000 18%);
  }

  [dir="rtl"] .hero-art,
  [dir="rtl"] .infra-art {
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 18%);
    mask-image: linear-gradient(to left, transparent 0, #000 18%);
  }
}

/* Mirror the composition so it always sits on the far side from the text. */
[dir="rtl"] .hero-art svg,
[dir="rtl"] .infra-art svg {
  transform: scaleX(-1);
}

/* Case study card headers */
.card-art {
  height: 9rem;
  position: relative;
  overflow: hidden;
}

.card-art--pillars {
  background:
    linear-gradient(90deg, transparent 0 18%, rgba(0, 0, 0, 0.18) 18% 19%, transparent 19% 100%),
    linear-gradient(90deg, #ff9466 0 18%, #f4511e 19% 38%, #c7381a 38% 40%, #ff7a45 40% 62%, #e2481c 62% 64%, #ffb08a 64% 100%);
}

.card-art--pillars::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0.25));
}

.card-art--gold {
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.35) 0 3px, transparent 3px 26px),
    repeating-linear-gradient(115deg, #f7b733 0 13px, #e89a1a 13px 26px);
}

.card-art--gold::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 20%, rgba(255, 255, 255, 0.45), transparent 55%),
    linear-gradient(180deg, transparent 40%, rgba(120, 60, 0, 0.35));
}

.card-art--teal {
  background:
    repeating-conic-gradient(from 200deg at 85% 110%, #0e5a6b 0 1.2deg, #1b8a9e 1.2deg 2.4deg),
    #0e5a6b;
}

.card-art--teal::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(255, 255, 255, 0.15), rgba(0, 20, 30, 0.45));
}

/* ---------- Contact form dialog ---------- */
.contact-dialog {
  /* Full screen on phones; a centered panel from tablet width up. */
  width: 100%;
  max-width: 100%;
  height: 100%;
  height: 100dvh;
  max-height: 100%;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overscroll-behavior: contain;
}

.contact-dialog::backdrop {
  background: rgba(26, 26, 26, 0.72);
}

.contact-dialog[open] {
  animation: dialog-in 0.2s ease both;
}

@keyframes dialog-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.contact-dialog__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  padding-bottom: env(safe-area-inset-bottom);
}

/* Floats over the form as a subtle overlay; firms up on hover/focus. */
.contact-dialog__close {
  position: absolute;
  top: 0.75rem;
  inset-inline-end: 0.75rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: rgba(35, 35, 35, 0.35);
  color: #fff;
  opacity: 0.6;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

.contact-dialog__close:hover,
.contact-dialog__close:focus-visible {
  opacity: 1;
  background: rgba(35, 35, 35, 0.7);
}

/* The dialog itself takes initial focus; it needs no visible ring. */
.contact-dialog:focus,
.contact-dialog:focus-visible {
  outline: none;
}

.contact-dialog__frame {
  flex: 1;
  width: 100%;
  min-height: 0;
  border: 0;
  display: block;
}

@media (min-width: 640px) {
  .contact-dialog {
    width: calc(100% - 3rem);
    max-width: 48rem;
    height: calc(100vh - 4rem);
    height: calc(100dvh - 4rem);
    max-height: 56rem;
    margin: auto;
  }

  .contact-dialog__panel {
    border-top: 4px solid var(--ember);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
  }
}

/* Lock page scroll behind the open dialog. */
html.dialog-open {
  overflow: hidden;
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}