/*
 * iostream.ir — foundation layer
 *
 * This file holds only what sits *below* the design system:
 * web fonts, the small reset premium.css does not cover, motion/z-index
 * tokens, and the page-level machinery driven by app.js (skip link,
 * navigation progress, reveal-on-scroll, view transitions).
 *
 * All component styling lives in premium.css, which loads after this file.
 * Do not re-declare component rules here: this file used to carry a second,
 * older design system, and every property premium.css happened not to
 * override leaked through and produced two visual languages on one page.
 */

@font-face {
  font-family: "Farhang2";
  src: url("/assets/fonts/Farhang2-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Farhang2";
  src: url("/assets/fonts/Farhang2-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Farhang2";
  src: url("/assets/fonts/Farhang2-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Farhang2";
  src: url("/assets/fonts/Farhang2-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Farhang2";
  src: url("/assets/fonts/Farhang2-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Farhang2";
  src: url("/assets/fonts/Farhang2-DemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Farhang2";
  src: url("/assets/fonts/Farhang2-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Farhang2";
  src: url("/assets/fonts/Farhang2-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Farhang2";
  src: url("/assets/fonts/Farhang2-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IRANSansX";
  src: url("/assets/fonts/IRANSansXVF.woff2") format("woff2"),
       url("/assets/fonts/IRANSansXVF.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("/assets/fonts/Vazirmatn-VF.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-ui: "IRANSansX", Tahoma, system-ui, sans-serif;
  --font: var(--font-ui);
  --mono: "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, monospace;

  --z-progress: 40;
  --z-header: 50;
  --z-overlay: 100;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --motion-fast: 160ms;
  --motion-base: 240ms;
  --motion-slow: 380ms;
}

html[data-font="farhang"] { --font-ui: "Farhang2", Tahoma, system-ui, sans-serif; }
html[data-font="vazirmatn"] { --font-ui: "Vazirmatn", Tahoma, system-ui, sans-serif; }

/* Reset bits premium.css does not set. */
button,
input,
textarea,
select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
code,
pre,
kbd,
samp { font-family: var(--mono); }
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }

.site-shell { min-height: 100vh; }
body.menu-open,
body.command-open { overflow: hidden; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: calc(var(--z-overlay) + 1);
  top: 10px;
  right: 10px;
  padding: 10px 16px;
  color: var(--on-action);
  background: var(--action);
  border-radius: 8px;
  font-weight: 700;
  transform: translateY(-150%);
  transition: transform var(--motion-fast) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

/* Route-change affordances driven by app.js. */
.navigation-progress {
  position: fixed;
  z-index: var(--z-progress);
  top: 0;
  right: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--motion-fast);
}
.navigation-progress i {
  display: block;
  width: 38%;
  height: 100%;
  transform: translateX(130%);
}
.navigation-progress.active { opacity: 1; }
.navigation-progress.active i { animation: navigation-progress 900ms var(--ease-out) infinite; }
@keyframes navigation-progress {
  from { transform: translateX(160%); }
  to { transform: translateX(-340%); }
}

.navigation-status {
  position: fixed;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.js #site-main {
  view-transition-name: page-content;
  transition:
    opacity var(--motion-fast) ease,
    transform var(--motion-fast) var(--ease-out);
}
.js:not(.is-ready) #site-main { opacity: 0; transform: translateY(6px); }
.js.is-ready #site-main { opacity: 1; transform: none; }
.js #site-main.page-leaving { opacity: .25; transform: translateY(7px); }
.js #site-main.page-entering { opacity: 0; transform: translateY(10px); }

.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--motion-slow) var(--ease-out) var(--reveal-delay, 0ms),
    transform var(--motion-slow) var(--ease-out) var(--reveal-delay, 0ms);
}
.js [data-reveal].is-visible { opacity: 1; transform: translateY(0); }

::view-transition-old(root),
::view-transition-new(root) { animation: none; }
::view-transition-old(page-content) { animation: page-out 150ms ease-in both; }
::view-transition-new(page-content) { animation: page-in 260ms var(--ease-out) both; }
@keyframes page-out {
  to { opacity: 0; transform: translateY(-6px); }
}
@keyframes page-in {
  from { opacity: 0; transform: translateY(10px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js #site-main,
  .js #site-main.page-leaving,
  .js #site-main.page-entering { opacity: 1; transform: none; }
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(page-content),
  ::view-transition-new(page-content) { animation: none; }
  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}