/* Theme: color tokens (dark/light), glass surfaces, buttons, Persian typography.
   Plain CSS, loaded on every page before Tailwind's utilities. */
/* ---------- Theme tokens ---------- */
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --c-ink: 11 14 31; --c-mist: 237 238 248; --c-dim: 167 172 210;
  --c-silver: 216 220 232; --c-iris: 124 134 232; --c-edge: 255 255 255;
  --page-bg:
    radial-gradient(1100px 560px at 85% -8%, rgba(124,134,232,.20), transparent 62%),
    radial-gradient(900px 520px at -8% 18%, rgba(216,220,232,.07), transparent 60%),
    #0B0E1F;
  --selection: rgba(216,220,232,.28);
  --glass-top: rgba(255,255,255,.075); --glass-bot: rgba(255,255,255,.035);
  --glass-border: rgba(255,255,255,.09); --glass-inset: rgba(255,255,255,.05);
  --glass-shadow: 0 24px 60px -30px rgba(0,0,0,.7);
  --lift-border: rgba(216,220,232,.28); --lift-shadow: 0 30px 70px -30px rgba(124,134,232,.35);
  --btn-bg: linear-gradient(180deg, #F7F8FC 0%, #D3D8E6 52%, #AEB5CA 100%);
  --btn-fg: #0B0E1F;
  --btn-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 10px 28px -10px rgba(204,211,230,.55);
  --btn-shadow-hover: 0 1px 0 rgba(255,255,255,.8) inset, 0 14px 34px -10px rgba(204,211,230,.7);
  --ghost-border: rgba(255,255,255,.16); --ghost-hover-border: rgba(216,220,232,.55); --ghost-hover-bg: rgba(255,255,255,.05);
  --st-a: #FFFFFF; --st-b: #B7BED3;
  --net-node: 216,220,232; --net-line: 124,134,232; --net-pointer: 216,220,232; --net-k: 1;
}
:root[data-theme="light"] {
  color-scheme: light;
  --c-ink: 245 246 251; --c-mist: 20 23 46; --c-dim: 86 92 134;
  --c-silver: 69 76 120; --c-iris: 98 108 214; --c-edge: 20 23 46;
  --page-bg:
    radial-gradient(1100px 560px at 85% -8%, rgba(124,134,232,.16), transparent 62%),
    radial-gradient(900px 520px at -8% 18%, rgba(150,160,205,.20), transparent 60%),
    #F5F6FB;
  --selection: rgba(98,108,214,.22);
  --glass-top: rgba(255,255,255,.88); --glass-bot: rgba(255,255,255,.58);
  --glass-border: rgba(20,23,46,.10); --glass-inset: rgba(255,255,255,.95);
  --glass-shadow: 0 24px 60px -32px rgba(40,50,110,.28);
  --lift-border: rgba(69,76,120,.35); --lift-shadow: 0 30px 70px -32px rgba(60,70,150,.30);
  --btn-bg: linear-gradient(180deg, #4D5584 0%, #2D3358 55%, #1B2040 100%);
  --btn-fg: #FFFFFF;
  --btn-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 12px 28px -12px rgba(43,50,90,.55);
  --btn-shadow-hover: 0 1px 0 rgba(255,255,255,.22) inset, 0 16px 34px -12px rgba(43,50,90,.65);
  --ghost-border: rgba(20,23,46,.20); --ghost-hover-border: rgba(69,76,120,.55); --ghost-hover-bg: rgba(20,23,46,.04);
  --st-a: #0F1330; --st-b: #4A5282;
  --net-node: 69,76,120; --net-line: 98,108,214; --net-pointer: 43,50,90; --net-k: 1.6;
}

/* The page background lives on <html> so the fixed network canvas can show above it
   and below the content. Do not give <body> its own background. */
html { background: var(--page-bg); background-attachment: fixed; }
body { background: none; }
::selection { background: var(--selection); }
:focus-visible { outline: 2px solid rgb(var(--c-silver)); outline-offset: 3px; }
.prose-tight { max-width: 60ch; }
body.lang-lock { overflow: hidden; }

/* Soft glass surface */
.glass {
  background: linear-gradient(180deg, var(--glass-top), var(--glass-bot));
  border: 1px solid var(--glass-border);
  box-shadow: 0 1px 0 var(--glass-inset) inset, var(--glass-shadow);
}
/* Blur only on the few things that float above everything (header, menu sheet) */
.glass-blur { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.lift { transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s, box-shadow .35s; }
.lift:hover { transform: translateY(-4px); border-color: var(--lift-border); box-shadow: 0 1px 0 var(--glass-inset) inset, var(--lift-shadow); }

/* Silver (dark) / steel (light) button and quiet ghost button */
.btn-silver {
  display: inline-block; border-radius: 9999px; font-weight: 500;
  color: var(--btn-fg); background: var(--btn-bg); box-shadow: var(--btn-shadow);
  transition: transform .25s, box-shadow .25s, filter .25s;
}
.btn-silver:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: var(--btn-shadow-hover); }
.btn-ghost {
  display: inline-block; border-radius: 9999px; color: rgb(var(--c-mist));
  border: 1px solid var(--ghost-border); transition: border-color .25s, background .25s;
}
.btn-ghost:hover { border-color: var(--ghost-hover-border); background: var(--ghost-hover-bg); }

.silver-text {
  background: linear-gradient(180deg, var(--st-a) 5%, var(--st-b) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .1em;
}

/* Theme toggle: sun in dark mode (go light), moon in light mode (go dark) */
html[data-theme="dark"] .icon-moon, html[data-theme="light"] .icon-sun { display: none; }
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition: background-color .35s ease, border-color .35s ease, color .35s ease, box-shadow .35s ease !important;
}


/* ---------- v2: smooth scroll (Lenis) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- v2: liquid buttons (cursor highlight + click pulse) ---------- */
.btn-silver, .btn-ghost { position: relative; overflow: hidden; isolation: isolate; cursor: pointer; transition: transform .25s, translate .35s cubic-bezier(.2,.7,.2,1), box-shadow .25s, filter .25s, border-color .25s, background .25s; }
.btn-silver::before, .btn-ghost::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: radial-gradient(110px circle at var(--bx, 50%) var(--by, 50%), rgba(255,255,255,.5), transparent 70%);
}
.btn-ghost::before { background: radial-gradient(110px circle at var(--bx, 50%) var(--by, 50%), rgb(var(--c-iris) / .28), transparent 70%); }
.btn-silver:hover::before, .btn-ghost:hover::before { opacity: 1; }
.ripple { position: absolute; z-index: -1; border-radius: 9999px; pointer-events: none; background: rgba(255,255,255,.6); transform: scale(0); animation: ripple .65s ease-out forwards; }
.btn-ghost .ripple { background: rgb(var(--c-iris) / .35); }
@keyframes ripple { to { transform: scale(4.5); opacity: 0; } }


/* ---------- v2: glowing neon borders that follow the pointer (bento + cards) ---------- */
.glow-card { position: relative; }
.glow-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgb(var(--c-iris) / .95), rgb(var(--c-silver) / .35) 45%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.glow-card:hover::before { opacity: 1; }

/* Shorter, gentler scroll reveal than AOS's default 100px */
[data-aos="fade-up"] { transform: translate3d(0, 22px, 0); }

/* Persian: Vazirmatn, normal letter spacing, roomier line height */
html[lang="fa"] body,
html[lang="fa"] .font-display,
html[lang="fa"] .font-sans { font-family: "Vazirmatn", system-ui, sans-serif; }
html[lang="fa"] * { letter-spacing: normal !important; }
html[lang="fa"] h1 { line-height: 1.45 !important; }
html[lang="fa"] h2, html[lang="fa"] h3 { line-height: 1.5; }
html[lang="fa"] p { line-height: 1.9; }


/* ================= Page transitions (Chrome, Edge, Safari 18.2+) ================= */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
#site-header { view-transition-name: site-header; }
#main { view-transition-name: page; }
::view-transition-group(site-header) { animation-duration: 0s; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
::view-transition-old(page) { animation: vt-out .18s ease both; }
::view-transition-new(page) { animation: vt-in .34s cubic-bezier(.2,.7,.2,1) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }
/* Browsers without cross-page transitions: a soft fade-in instead */
html.no-xvt #main { animation: page-in .45s ease both; }
@keyframes page-in { from { opacity: 0; transform: translateY(10px); } }

/* ================= Performance levels (set by perf.js: 0 full, 1 medium, 2 light) ================= */
html[data-perf="2"] .glass-blur { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(var(--c-ink) / .92); }
html[data-perf="2"].theme-anim, html[data-perf="2"].theme-anim * { transition: none !important; }
html[data-perf="2"] .glow-card::before { display: none; }
html[data-perf="1"] .glass-blur { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* ================= Touch devices ================= */
html { -webkit-tap-highlight-color: transparent; }
@media (hover: none) {
  .btn-silver:active, .btn-ghost:active { transform: scale(.97); }
  .glow-card { transition: transform .25s ease; }
  .glow-card:active { transform: scale(.985); }
  /* No hover on phones: cards near the middle of the screen light their border instead */
  .glow-card { --mx: 25%; --my: 0%; }
  .glow-card.is-lit::before { opacity: .85; }
}

/* ================= Mobile menu sheet ================= */
.site-header { transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.site-header.hide { transform: translateY(-140%); }
.menu-icon { position: relative; width: 18px; height: 12px; display: block; }
.menu-icon i { position: absolute; inset-inline: 0; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform .35s cubic-bezier(.2,.7,.2,1), top .35s, opacity .2s; }
.menu-icon i:nth-child(1) { top: 0; } .menu-icon i:nth-child(2) { top: 5px; } .menu-icon i:nth-child(3) { top: 10px; }
.is-open .menu-icon i:nth-child(1) { top: 5px; transform: rotate(45deg); }
.is-open .menu-icon i:nth-child(2) { opacity: 0; }
.is-open .menu-icon i:nth-child(3) { top: 5px; transform: rotate(-45deg); }

.mobile-sheet {
  position: fixed; inset: 0; z-index: 35; visibility: hidden; opacity: 0; pointer-events: none;
  background: rgb(var(--c-ink) / .94);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.mobile-sheet.open { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity .35s ease; }
.mobile-sheet-inner { display: flex; min-height: 100%; flex-direction: column; justify-content: center; padding: 6.5rem 2rem 2.5rem; }
.mobile-sheet .sheet-item { opacity: 0; transform: translateY(18px); transition: opacity .45s ease, transform .55s cubic-bezier(.2,.7,.2,1); }
.mobile-sheet.open .sheet-item { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 70ms + 120ms); }
.sheet-link { display: block; padding: .55rem 0; font-size: 2.1rem; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; color: rgb(var(--c-mist)); }
.sheet-link[aria-current="page"] { color: rgb(var(--c-silver)); }
html.sheet-open { overflow: hidden; }

/* Floating call-to-action on phones */
.fab-cta {
  position: fixed; z-index: 30; bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  inset-inline: 0; margin-inline: auto; width: max-content;
  translate: 0 160%; transition: translate .5s cubic-bezier(.2,.7,.2,1), transform .25s, box-shadow .25s, filter .25s;
}
.fab-cta.show { translate: 0 0; }

/* Hero sphere: a soft glowing backdrop behind the text on phones, a column beside it from tablet up */
.hero-3d { position: absolute; inset-inline: -20%; top: 50%; height: min(110vw, 560px); translate: 0 -50%; opacity: .55; z-index: 0; }
@media (min-width: 768px) {
  .hero-3d { position: relative; inset-inline: auto; top: auto; translate: none; opacity: 1; width: 100%; height: 420px; z-index: auto; }
}
@media (min-width: 1024px) { .hero-3d { height: 560px; } }

/* ================= Forms: errors and alerts ================= */
:root, :root[data-theme="dark"] { --c-error: 255 138 150; }
:root[data-theme="light"] { --c-error: 190 36 62; }
.is-invalid { border-color: rgb(var(--c-error) / .85) !important; box-shadow: 0 0 0 4px rgb(var(--c-error) / .14) !important; animation: shake .4s ease; }
.field-error-msg { display: flex; align-items: flex-start; gap: .5rem; margin-top: .6rem; font-size: .875rem; line-height: 1.5; color: rgb(var(--c-error)); animation: err-in .28s ease; }
.field-error-msg svg { flex: none; width: 1rem; height: 1rem; margin-top: .2rem; }
@keyframes err-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes shake { 20% { translate: -5px 0; } 40% { translate: 5px 0; } 60% { translate: -3px 0; } 80% { translate: 2px 0; } }
.alert svg { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .15rem; }
.alert-success { border-color: rgb(var(--c-iris) / .55); }
.alert-success svg { color: rgb(var(--c-iris)); }
.alert-error { border-color: rgb(var(--c-error) / .6); }
.alert-error svg { color: rgb(var(--c-error)); }
.btn-silver.is-loading { opacity: .75; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .is-invalid, .field-error-msg { animation: none; } }