/* ==========================================================================
   LAHIZA — BENTO DESIGN SYSTEM · 02. BASE
   Fonts, reset, document, typography, the page shell and motion primitives.
   ========================================================================== */

@font-face { font-family: "Vazirmatn"; src: url("../fonts/Vazirmatn-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("../fonts/Vazirmatn-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("../fonts/Vazirmatn-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("../fonts/Vazirmatn-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("../fonts/Vazirmatn-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("../fonts/Vazirmatn-ExtraBold.woff2") format("woff2"); font-weight: 800 900; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dm-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dm-sans-500.woff2") format("woff2"); font-weight: 500 600; font-display: swap; }

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
  scroll-padding-top: calc(var(--header-h) + var(--s-7));
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  min-height: 100svh;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  direction: rtl;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
body.lz-locked { overflow: hidden; }
img, svg, video, picture { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-block-start: 1px solid var(--line); }
::selection { background: var(--primary); color: var(--on-primary); }
:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--r-xs); }
:focus:not(:focus-visible) { outline: none; }

/* ---------------------------------------------------------------- type
   Persian is a joined script: never letter-space it. Weight and size carry
   the hierarchy instead. */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-strong);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-tight);
  text-wrap: balance;
}
h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
p { text-wrap: pretty; }
.lz-light { font-weight: var(--fw-light); }

/* ---------------------------------------------------------------- shell
   Every section is a tile or a bento grid; the 12px gutter is the rhythm. */
.lz-shell { width: 100%; max-width: calc(var(--shell) + var(--edge) * 2); margin-inline: auto; padding-inline: var(--edge); }
.lz-stack > * + * { margin-block-start: var(--gap); }
.lz-main { display: block; padding-block-end: var(--gap); }

/* ---------------------------------------------------------------- utilities */
.lz-sr, .screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.lz-skip {
  position: fixed; inset-block-start: -6rem; inset-inline-start: var(--s-4); z-index: var(--z-toast);
  padding: var(--s-3) var(--s-5); background: var(--primary); color: var(--on-primary); border-radius: var(--r-pill);
  transition: inset-block-start var(--t-fast) var(--ease);
}
.lz-skip:focus { inset-block-start: var(--s-4); }
.lz-latin { font-family: var(--font-latin); direction: ltr; unicode-bidi: isolate; }
.lz-ico { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lz-art { display: block; pointer-events: none; background: url("../art/tea.webp") center / contain no-repeat; }
.lz-art-rice { background-image: url("../art/rice.webp"); }
.lz-logo { width: auto; color: inherit; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- motion */
/* Travel is kept under the tile gap (10–12px): a tile never crosses into its neighbour mid-animation. */
@keyframes lz-rise { from { opacity: 0; transform: translateY(.5rem) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes lz-spin { to { transform: rotate(360deg); } }
@keyframes lz-shimmer { to { background-position: -200% 0; } }
@keyframes lz-pop { 50% { transform: scale(1.2); } }
@keyframes lz-fade { from { opacity: 0; } to { opacity: 1; } }

.lz-js [data-reveal] {
  opacity: 0;
  transform: translateY(.5rem) scale(.99);
  transition: opacity var(--t-slower) var(--ease) var(--d, 0s), transform var(--t-slower) var(--ease) var(--d, 0s);
}
.lz-js [data-reveal].is-in { opacity: 1; transform: none; }
.lz-js .lz-rise { opacity: 0; animation: lz-rise var(--t-slower) var(--ease) var(--d, 0s) forwards; }

@media (prefers-reduced-motion: reduce) {
  .lz-js [data-reveal], .lz-js .lz-rise { opacity: 1; transform: none; transition: none; animation: none; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}