/* Core colours and easing from the Parseh campaign. Both portals use these
   values, with surface-specific rules kept next to their own markup. */
@font-face {
  font-family: "Yekan Bakh";
  src: url("/assets/typography/YekanBakh-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Yekan Bakh";
  src: url("/assets/typography/YekanBakh-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Yekan Bakh";
  src: url("/assets/typography/YekanBakh-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --page-bg: #080a0f;
  --page-text: #f6f0e6;
  --page-muted: #b8b1a6;
  --ink: #080a0f;
  --ink-soft: #11151d;
  --paper: #f3ede2;
  --paper-bright: #fffaf0;
  --paper-deep: #ded4c4;
  --cobalt: #143dbb;
  --cobalt-bright: #2456ef;
  --cobalt-deep: #092a91;
  --ice: #dff5ff;
  --red: #9e1430;
  --red-bright: #e23051;
  --header-bg: rgb(8 10 15 / 76%);
  --header-line: rgb(255 255 255 / 13%);
  --shadow-deep: 0 44px 110px rgb(0 0 0 / 42%);
  --focus: #aaccff;
  --surface: #141922;
  --soft: #0f131c;
  --line: rgb(230 238 255 / 18%);
  --accent: #8fb5ff;
  --warn: #ffb6b5;
  --bg: var(--page-bg);
  --fg: var(--page-text);
  --muted: var(--page-muted);
  --ease-cinema: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.22, .61, .36, 1);
  --radius-xl: 36px;
  --radius-lg: 26px;
  --radius-md: 18px;
}
html { font-family: "Yekan Bakh", Tahoma, sans-serif; font-synthesis: none; }
button, input, textarea, select { font: inherit; }
:root[data-theme="light"] {
  color-scheme: light;
  --page-bg: #efe8dc;
  --page-text: #11131a;
  --page-muted: #5f5c55;
  --ink: #0a0c12;
  --ink-soft: #151923;
  --paper: #f5efe4;
  --paper-bright: #fffaf1;
  --paper-deep: #dfd4c4;
  --cobalt: #1745c7;
  --cobalt-bright: #2a5eff;
  --cobalt-deep: #0d2f98;
  --header-bg: rgb(246 239 228 / 84%);
  --header-line: rgb(8 10 15 / 14%);
  --focus: #123daf;
  --surface: #fffaf1;
  --soft: #e8e0d3;
  --line: rgb(8 10 15 / 18%);
  --accent: #1745c7;
  --warn: #9e1430;
}
::selection { color: white; background: var(--cobalt); }
.external-arrow {
  display: inline-block;
  position: relative;
  width: .66em;
  height: .66em;
  margin-inline: .15em;
  vertical-align: .1em;
  border-top: 1.4px solid currentColor;
  border-right: 1.4px solid currentColor;
}
.external-arrow::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 126%;
  height: 1.4px;
  background: currentColor;
  transform-origin: right center;
  transform: rotate(-45deg);
}
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
[hidden] { display: none !important; }

[data-parseh-glass] { position: relative; isolation: isolate; overflow: hidden; }
.parseh-refraction {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  mix-blend-mode: screen;
}
.parseh-refraction i { position: absolute; display: block; opacity: 0; }
.parseh-refraction i:nth-child(1) {
  inset: 0 auto auto 0;
  width: 36%; height: 4px;
  background: linear-gradient(118deg, transparent 12%, #a8d6ff 44%, #f4fbff 56%, transparent 89%);
}
.parseh-refraction i:nth-child(2) {
  inset: 32% 10% auto; height: 42%;
  background: radial-gradient(ellipse, rgb(148 204 255 / 54%), rgb(126 176 242 / 13%) 44%, transparent 72%);
  filter: blur(8px);
}
.parseh-refraction i:nth-child(3) {
  inset: auto 0 0 auto; width: 28%; height: 15%;
  background: radial-gradient(ellipse at 84% 94%, #e0f4ff, rgb(162 210 255 / 24%) 39%, transparent 70%);
}
@keyframes parseh-edge {
  from { opacity: 0; transform: translateX(-60%) skewX(-24deg); }
  45%  { opacity: .8; }
  to   { opacity: 0; transform: translateX(260%) skewX(-24deg); }
}
@keyframes parseh-refraction {
  from { opacity: 0; transform: translateY(-35%); }
  45%  { opacity: .42; }
  to   { opacity: 0; transform: translateY(78%); }
}
@keyframes parseh-corner {
  from { opacity: 0; transform: translate(-8%, -10%); }
  55%  { opacity: .68; }
  to   { opacity: 0; transform: translate(7%, 6%); }
}
@keyframes parseh-rise {
  from { opacity: .3; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes parseh-beam {
  0%, 100% { opacity: .38; transform: translate3d(-2%, 0, 0); }
  50%      { opacity: .7; transform: translate3d(2%, -1%, 0); }
}
@media (prefers-reduced-motion: no-preference) {
  html[data-motion="on"] [data-parseh-hero][data-in-view] [data-parseh-prism] {
    animation: parseh-beam 11s ease-in-out infinite;
  }
  html[data-motion="on"] .parseh-entered[data-parseh-reveal] {
    animation: parseh-rise .72s var(--ease-cinema) backwards;
  }
  html[data-motion="on"] .parseh-entered > .parseh-refraction i:nth-child(1) {
    animation: parseh-edge .6s ease-in-out both;
  }
  html[data-motion="on"] .parseh-entered > .parseh-refraction i:nth-child(2) {
    animation: parseh-refraction 1s .6s ease-in-out both;
  }
  html[data-motion="on"] .parseh-entered > .parseh-refraction i:nth-child(3) {
    animation: parseh-corner .4s 1.6s ease-in-out both;
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html[data-motion="on"] [data-parseh-parallax] {
    translate: var(--drift-x, 0px) var(--drift-y, 0px);
    transition: translate 1.25s var(--ease-cinema);
  }
  [data-pointer-x="left"] { --drift-x: -5px; }
  [data-pointer-x="right"] { --drift-x: 5px; }
  [data-pointer-y="up"] { --drift-y: -3px; }
  [data-pointer-y="down"] { --drift-y: 3px; }
}
html[data-motion="off"] { scroll-behavior: auto; }
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after {
  animation-duration: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0s !important;
  scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
}
