/* SaeedSheikhAmiri.ir: forest & heartwood. Shared by every page and by the Studio preview. */

/* ---------- self-hosted fonts (no Google dependency) ---------- */
@font-face { font-family: "Vazirmatn"; src: url("fonts/vazirmatn-arabic.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Vazirmatn"; src: url("fonts/vazirmatn-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF; }
@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/bricolage-latin.woff2") format("woff2"); font-weight: 200 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF; }
@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/bricolage-latin-ext.woff2") format("woff2"); font-weight: 200 800; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("fonts/plex-arabic-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("fonts/plex-arabic-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("fonts/plex-arabic-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("fonts/plex-arabic-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* more self-hosted families, chosen in Studio (a font only downloads when a page actually uses it) */
@font-face { font-family: "Estedad"; src: url("fonts/estedad-arabic.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Estedad"; src: url("fonts/estedad-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "Shabnam"; src: url("fonts/shabnam-400.woff2") format("woff2"); font-weight: 100 500; font-display: swap; }
@font-face { font-family: "Shabnam"; src: url("fonts/shabnam-700.woff2") format("woff2"); font-weight: 600 900; font-display: swap; }
@font-face { font-family: "Sahel"; src: url("fonts/sahel-400.woff2") format("woff2"); font-weight: 100 500; font-display: swap; }
@font-face { font-family: "Sahel"; src: url("fonts/sahel-700.woff2") format("woff2"); font-weight: 600 900; font-display: swap; }
@font-face { font-family: "Samim"; src: url("fonts/samim-400.woff2") format("woff2"); font-weight: 100 500; font-display: swap; }
@font-face { font-family: "Samim"; src: url("fonts/samim-700.woff2") format("woff2"); font-weight: 600 900; font-display: swap; }
@font-face { font-family: "Noto Naskh Arabic"; src: url("fonts/naskh-arabic.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/manrope-latin.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "DM Serif Display"; src: url("fonts/dmserif-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }

/* ---------- palette ---------- */
:root {
  --night: #051008; --canopy: #123323; --moss: #32553D; --heartwood: #4C2613;
  --bark: #63351B; --oak: #A1744D; --mist: #D9D9D9; --sapwood: #FFE4CD;
  --paper: #FFF6EE;
  --font: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --measure: 64ch;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1180px;
  /* typographic rhythm (Latin defaults) */
  --lh-body: 1.6; --lh-head: 1.12; --lh-title: 1.04; --track-head: -0.025em; --track-title: -0.035em;
}
:root:lang(fa) { --font: "Vazirmatn", Tahoma, sans-serif; --lh-body: 1.85; --lh-head: 1.5; --lh-title: 1.4; --track-head: 0; --track-title: 0; }
:root:lang(ar) { --font: "IBM Plex Sans Arabic", "Vazirmatn", Tahoma, sans-serif; --lh-body: 1.85; --lh-head: 1.5; --lh-title: 1.4; --track-head: 0; --track-title: 0; }

body.theme-forest {
  --bg: var(--night); --fg: var(--sapwood); --head: var(--sapwood); --sub: var(--sapwood);
  --soft: rgba(255, 228, 205, .74); --faint: rgba(255, 228, 205, .52);
  --line: rgba(161, 116, 77, .3); --card: rgba(5, 16, 8, .38); --card-line: rgba(255, 228, 205, .12);
  --accent: var(--oak); --chip: rgba(5, 16, 8, .45);
  color-scheme: dark;
}
body.theme-paper {
  --bg: var(--paper); --fg: var(--canopy); --head: var(--canopy); --sub: var(--heartwood);
  --soft: #32553D; --faint: rgba(18, 51, 35, .6);
  --line: rgba(99, 53, 27, .22); --card: #fff; --card-line: rgba(99, 53, 27, .18);
  --accent: var(--oak); --chip: rgba(161, 116, 77, .12);
  color-scheme: light;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font); font-size: clamp(16px, .9vw + 12.5px, 18px);
  line-height: var(--lh-body); overflow-x: hidden;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
:lang(fa) body, :lang(ar) body { font-size: clamp(16.5px, .9vw + 13px, 18.5px); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .25em; }
p { margin: 0; }
p + p { margin-top: .85em; }
strong, b { font-weight: 650; }
::selection { background: var(--oak); color: var(--night); }
:focus-visible { outline: 2px solid var(--oak); outline-offset: 3px; border-radius: 4px; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.narrow .wrap, .wrap.narrow { max-width: 820px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; inset-inline-start: 8px; transform: translateY(-200%); top: 8px; background: var(--sapwood); color: var(--night); padding: 8px 12px; border-radius: 6px; z-index: 50; }
.skip:focus { transform: none; }

/* headings */
.sec h2 { font-size: clamp(1.75rem, 3.2vw, 2.6rem); line-height: var(--lh-head); letter-spacing: var(--track-head); font-weight: 680; margin: 0 0 .45em; max-width: 24ch; color: var(--head); }
.sec h3 { font-size: 1.15em; line-height: 1.35; letter-spacing: calc(var(--track-head) / 2); font-weight: 640; margin: 0 0 .35em; color: var(--sub); }
:lang(fa) .sec h3, :lang(ar) .sec h3 { line-height: 1.6; }
.intro { color: var(--soft); max-width: var(--measure); margin: 0 0 clamp(28px, 4vw, 44px); }
.body { max-width: var(--measure); }
.body p { color: var(--soft); }
.body p.lead-p { color: var(--fg); }

/* section shells */
.sec { padding-block: clamp(56px, 8vw, 112px); position: relative; }
.sec.tight { padding-block: clamp(36px, 5vw, 64px); }
.bg-canopy { background: linear-gradient(180deg, var(--bg), var(--canopy) 22%, var(--canopy) 78%, var(--bg)); }
body.theme-paper .bg-canopy { background: var(--canopy); --fg: var(--sapwood); --head: var(--sapwood); --sub: var(--sapwood); --soft: rgba(255,228,205,.8); --line: rgba(161,116,77,.35); --card: rgba(5,16,8,.3); --card-line: rgba(255,228,205,.14); --chip: rgba(5,16,8,.4); color: var(--fg); }
.bg-wood {
  background: repeating-linear-gradient(92deg, rgba(255,228,205,.025) 0 2px, transparent 2px 9px),
              radial-gradient(120% 140% at 85% 0%, var(--bark), var(--heartwood) 60%, #3a1d0e);
  --fg: var(--sapwood); --head: var(--sapwood); --sub: var(--sapwood); --soft: rgba(255,228,205,.84); --line: rgba(255,228,205,.3); color: var(--fg);
}
.bg-night { background: var(--night); --fg: var(--sapwood); --head: var(--sapwood); --sub: var(--sapwood); --soft: rgba(255,228,205,.74); color: var(--fg); }
.bg-paper { background: var(--paper); --fg: var(--canopy); --head: var(--canopy); --sub: var(--heartwood); --soft: #32553D; --line: rgba(99,53,27,.22); --card: #fff; --card-line: rgba(99,53,27,.18); color: var(--fg); }
.divided + .divided { border-top: 1px solid var(--line); }

/* paper pages read like a document: narrower column, calmer rhythm */
body.theme-paper .wrap { max-width: 860px; }
body.theme-paper .sec { padding-block: clamp(40px, 6vw, 76px); }
body.theme-paper .sec + .sec:not(.bg-canopy):not(.bg-wood):not(.bg-night) { border-top: 1px solid var(--line); }
body.theme-paper .sec h2 { font-size: clamp(1.45rem, 2.6vw, 1.9rem); }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 20; background: linear-gradient(var(--bg) 60%, transparent); }
.top .wrap { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.mark { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 620; }
.mark svg { width: 28px; height: 28px; flex: none; }
.nav { display: flex; gap: 22px; margin-inline-start: auto; }
.nav a { text-decoration: none; color: var(--soft); font-size: .92em; transition: color .2s; }
.nav a:hover { color: var(--fg); }
.lang { position: relative; }
.nav + .lang { margin-inline-start: 0; }
.top .lang:only-of-type { margin-inline-start: auto; }
.lang select { appearance: none; -webkit-appearance: none; background: transparent; color: var(--fg); border: 1px solid var(--line); border-radius: 999px; padding: 6px 30px 6px 14px; font: inherit; font-size: .88em; cursor: pointer; }
:dir(rtl) .lang select { padding: 6px 14px 6px 30px; }
.lang::after { content: ""; position: absolute; inset-inline-end: 12px; top: 50%; width: 6px; height: 6px; border-right: 1.5px solid var(--oak); border-bottom: 1.5px solid var(--oak); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.lang select option { background: var(--canopy); color: var(--sapwood); }

/* ---------- buttons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 999px; text-decoration: none; font-weight: 620; line-height: 1.4; border: 1px solid var(--oak); color: var(--fg); transition: background .25s, color .25s, border-color .25s, transform .2s; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn.primary { background: var(--sapwood); color: var(--night); border-color: var(--sapwood); }
.btn.primary:hover { background: var(--oak); border-color: var(--oak); }
.btn.ghost:hover { background: rgba(161, 116, 77, .16); }
.btn:active { transform: scale(.98); }
.bg-wood .btn { border-color: rgba(255,228,205,.5); }
.bg-wood .btn.primary { color: var(--heartwood); }
.bg-wood .btn.primary:hover { background: var(--night); color: var(--sapwood); border-color: var(--night); }
body.theme-paper .sec:not(.bg-canopy):not(.bg-wood):not(.bg-night) .btn.primary { background: var(--canopy); color: var(--sapwood); border-color: var(--canopy); }

/* ---------- hero: split ---------- */
.hero { padding-block: clamp(36px, 7vh, 88px) clamp(64px, 11vh, 128px); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.hero.no-visual .wrap { grid-template-columns: minmax(0, 1fr); }
.eyebrow { color: var(--accent); font-weight: 500; margin: 0 0 18px; max-width: 48ch; }
.hero h1, .cover h1 { font-size: clamp(2.35rem, 5.4vw, 4.5rem); line-height: var(--lh-title); letter-spacing: var(--track-title); font-weight: 720; margin: 0 0 24px; max-width: 15ch; color: var(--head); }
:lang(fa) .hero h1, :lang(ar) .hero h1 { font-size: clamp(2rem, 4.4vw, 3.6rem); max-width: 17ch; }
.lead { color: var(--soft); max-width: 46ch; margin: 0 0 32px; font-size: 1.08em; }
.visual { position: relative; width: 100%; max-width: 520px; justify-self: end; margin: 0; }
.visual.rings svg { display: block; aspect-ratio: 1; height: auto; }
.visual svg { width: 100%; height: 100%; overflow: visible; }
.visual img { width: 100%; border-radius: 22px; object-fit: cover; }
.visual figcaption { margin-top: 10px; font-size: .82em; line-height: 1.6; color: var(--faint); }
.visual.rings figcaption { text-align: center; margin: clamp(16px, 2.4vw, 28px) auto 0; max-width: 36ch; text-wrap: balance; }

/* ---------- hero: cover ---------- */
.cover { background: radial-gradient(130% 120% at 0% 0%, var(--moss), var(--canopy) 55%, var(--night)); color: var(--sapwood); position: relative; overflow: hidden; --head: var(--sapwood); }
.cover .wrap { padding-block: clamp(48px, 9vw, 104px) clamp(40px, 7vw, 80px); position: relative; z-index: 1; }
.cover .deco { position: absolute; inset-inline-start: -140px; top: -120px; width: 520px; height: 520px; opacity: .5; pointer-events: none; }
.cover .eyebrow { color: rgba(255, 228, 205, .82); }
.cover h1 { font-size: clamp(1.9rem, 4.6vw, 3.2rem); max-width: 19ch; }
.cover .lead { color: rgba(255, 228, 205, .88); max-width: 54ch; margin-bottom: 0; }
.cover .meta { display: flex; flex-wrap: wrap; gap: 6px 28px; margin-top: 30px; font-size: .9em; color: rgba(255, 228, 205, .72); }

/* ---------- features ---------- */
.feat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px); }
.feat .f { padding-block: 26px; border-top: 1px solid var(--line); }
.feat .f p { color: var(--soft); max-width: 50ch; }
.feat .ico { width: 22px; height: 22px; margin-bottom: 14px; color: var(--accent); }
.feat.layout-list { grid-template-columns: minmax(0, 1fr); gap: 22px; }
.feat.layout-list .f { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 0; border: 0; align-items: start; }
.feat.layout-list .f p, .feat.layout-bullets .f p { max-width: var(--measure); }
.feat.layout-list .ico { width: 44px; height: 44px; padding: 11px; margin: 0; border-radius: 12px; background: var(--canopy); color: var(--sapwood); }
.feat.layout-bullets { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.feat.layout-bullets .f { padding: 0 0 0; padding-inline-start: 28px; border: 0; position: relative; }
.feat.layout-bullets .f::before { content: ""; position: absolute; inset-inline-start: 0; top: .7em; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--accent); }
.feat.layout-bullets h3 { display: inline; font-size: 1em; }
.feat.layout-bullets h3::after { content: " "; }
.feat.layout-bullets p { display: inline; }

/* ---------- projects ---------- */
.project { padding-block: 44px; border-top: 1px solid var(--card-line); }
.p-main { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 4vw, 64px); }
.project:last-of-type { border-bottom: 1px solid var(--card-line); }
.project h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.2; letter-spacing: -.02em; font-weight: 660; }
:lang(fa) .project h3, :lang(ar) .project h3 { letter-spacing: 0; line-height: 1.55; }
.project.size-feature h3 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
.project.size-small { padding-block: 30px; }
.project .ctx { color: var(--accent); margin: 0 0 16px; font-size: .95em; }
.project .shot { margin-top: 20px; border-radius: 14px; border: 1px solid var(--card-line); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; list-style: none; }
.tags li { font-size: .78em; line-height: 1.5; padding: 3px 10px; border-radius: 999px; background: var(--chip); color: var(--soft); border: 1px solid var(--card-line); }
.tags li.live { color: var(--night); background: var(--oak); border-color: var(--oak); }
.project dl { margin: 0; display: grid; gap: 18px; }
.project dt { font-size: .82em; color: var(--accent); font-weight: 620; margin-bottom: 2px; }
.project dd { margin: 0; color: var(--soft); max-width: var(--measure); }
.project .catch { padding: 14px 18px; border-inline-start: 3px solid var(--oak); background: var(--card); border-start-end-radius: 10px; border-end-end-radius: 10px; color: var(--fg); }
.project .more { display: inline-block; margin-top: 18px; color: var(--fg); font-weight: 620; }
.stack { margin-top: 52px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; color: var(--soft); }
.stack strong { color: var(--fg); margin-inline-end: 6px; }
.stack span { white-space: nowrap; }
@media (min-width: 901px) { .p-main > .p-head { position: sticky; top: 96px; align-self: start; } }

/* ---------- note ---------- */
.note { padding: 20px 24px; border-radius: 14px; border: 1px dashed var(--line); color: var(--soft); max-width: 72ch; }
.note strong { color: var(--fg); }
body.theme-paper .note { border: 0; border-inline-start: 3px solid var(--oak); background: rgba(161, 116, 77, .1); border-radius: 0; border-start-end-radius: 10px; border-end-end-radius: 10px; font-size: .94em; }
.after-note { margin-top: 24px; }

/* ---------- timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; inset-inline-start: 7px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(var(--oak), var(--moss)); opacity: .55; }
.timeline li { position: relative; padding-inline-start: 44px; padding-bottom: 30px; display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 4px 20px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; inset-inline-start: 0; top: .45em; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--oak); background: var(--bg); }
.timeline li.now::before { background: var(--oak); box-shadow: 0 0 0 6px rgba(161, 116, 77, .18); }
.timeline .lbl { color: var(--accent); font-weight: 620; font-variant-numeric: tabular-nums; }
.timeline li p { color: var(--soft); max-width: 58ch; }

/* ---------- steps ---------- */
.steps { list-style: none; padding: 0; margin: 0; counter-reset: s; position: relative; max-width: 72ch; }
.steps::before { content: ""; position: absolute; inset-inline-start: 17px; top: 12px; bottom: 12px; width: 2px; background: linear-gradient(var(--oak), var(--moss)); opacity: .5; }
.steps li { counter-increment: s; position: relative; padding-inline-start: 56px; padding-bottom: 24px; }
.steps li:last-child { padding-bottom: 0; }
.steps li::before { content: counter(s); position: absolute; inset-inline-start: 0; top: .1em; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 2px solid var(--oak); color: var(--sub); font-weight: 700; font-size: .95em; line-height: 1; }
:lang(fa) .steps li::before { content: counter(s, persian); }
:lang(ar) .steps li::before { content: counter(s, arabic-indic); }
.steps li:last-child::before { background: var(--canopy); border-color: var(--canopy); color: var(--sapwood); }
.steps li p { color: var(--soft); }

/* ---------- cards ---------- */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.card { background: var(--card); border: 1px solid var(--card-line); border-radius: 16px; padding: 20px 22px; }
.card p { color: var(--soft); font-size: .95em; }
.card.wide { grid-column: 1 / -1; background: var(--canopy); border-color: var(--canopy); --fg: var(--sapwood); --sub: var(--sapwood); --soft: rgba(255,228,205,.84); color: var(--fg); }
.card .hl { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--card-line); color: var(--fg); }
.card.wide .hl { border-color: rgba(255,228,205,.28); }

/* ---------- duo (two complementary sides) ---------- */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: stretch; margin: 26px 0; max-width: 820px; }
.duo .side { background: var(--card); border: 1px solid var(--card-line); border-radius: 16px; padding: 18px 20px; }
.duo .side p { color: var(--soft); font-size: .95em; }
.duo .join { display: grid; place-items: center; color: var(--oak); font-size: 1.6em; }

/* ---------- image ---------- */
.figure { margin: 0; }
.figure img { width: 100%; border-radius: 18px; border: 1px solid var(--card-line); }
.figure.w-normal { max-width: 820px; }
.figure figcaption { margin-top: 10px; color: var(--faint); font-size: .88em; }

/* ---------- contact ---------- */
.contact h2 { max-width: 20ch; }
.channels { display: flex; flex-wrap: wrap; gap: 12px; }
.sign { margin-top: 36px; font-size: .94em; color: var(--soft); white-space: pre-line; }

/* ---------- footer ---------- */
.foot {
  position: relative; padding-block: 30px; color: rgba(255, 228, 205, .72); font-size: .86em; line-height: 1.7;
  /* modern wood slats: thin vertical boards with soft shading and a warm light sweeping across */
  background:
    linear-gradient(90deg, rgba(255,228,205,.07), rgba(255,228,205,0) 30%, rgba(255,228,205,0) 70%, rgba(255,228,205,.05)),
    repeating-linear-gradient(90deg, rgba(0,0,0,.28) 0 1px, rgba(255,228,205,.05) 1px 2px, rgba(0,0,0,0) 2px 15px, rgba(0,0,0,.08) 15px 22px),
    linear-gradient(180deg, #4C2613, #3a1d0e 60%, #2f170b);
  border-top: 1px solid rgba(255,228,205,.08);
}
.foot .wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }

/* ---------- motion: one orchestrated entrance ---------- */
.rise { opacity: 0; transform: translateY(14px); }
.ready .rise { animation: rise .9s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(var(--i, 0) * 120ms + 250ms); }
@keyframes rise { to { opacity: 1; transform: none; } }
.no-motion .rise, .preview .rise { opacity: 1; transform: none; animation: none !important; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .rise { opacity: 1; transform: none; } .ready .rise { animation: none; } }


/* ---------- growth motion (reduced-motion and Studio preview turn it off) ---------- */
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes breathe { from { transform: scale(1) rotate(0deg); } to { transform: scale(1.014) rotate(.6deg); } }
@keyframes drift { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 15% { opacity: var(--o, .5); } 85% { opacity: var(--o, .5); } 100% { transform: translate3d(var(--x, 12px), -260px, 0); opacity: 0; } }
@keyframes sprout { from { transform: scale(0); } to { transform: scale(1); } }

/* rings breathe slowly once drawn */
.js-rings.breathe { transform-origin: 53% 48%; animation: breathe 7s ease-in-out infinite alternate; }

/* drifting seeds / pollen in the hero */
.hero { overflow: hidden; }
.hero > .wrap { position: relative; z-index: 1; }
.seeds { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.seeds i { position: absolute; bottom: -10px; width: var(--s, 4px); height: var(--s, 4px); border-radius: 50%; background: var(--sapwood); box-shadow: 0 0 8px rgba(255, 228, 205, .45); animation: drift var(--t, 18s) linear var(--d, 0s) infinite; opacity: 0; }
.seeds i:nth-child(3n) { background: var(--oak); box-shadow: 0 0 8px rgba(161, 116, 77, .5); }

/* stems grow down the timeline and the steps */
.js-motion .timeline::before, .js-motion .steps::before { transform: scaleY(0); transform-origin: top; transition: transform 1.6s cubic-bezier(.3, .6, .2, 1); }
.js-motion .timeline.in::before, .js-motion .steps.in::before { transform: scaleY(1); }
.js-motion .timeline li::before, .js-motion .steps li::before { transform: scale(0); transition: transform .5s cubic-bezier(.3, 1.5, .5, 1) calc(var(--n, 0) * 180ms + 250ms); }
.js-motion .timeline.in li::before, .js-motion .steps.in li::before { transform: scale(1); }

/* a small sprout opens beside "now" */
.sprout { display: inline-block; width: 26px; height: 26px; vertical-align: -6px; margin-inline-start: 6px; overflow: visible; }
.sprout path { fill: none; stroke: var(--moss); stroke-width: 2; stroke-linecap: round; }
.sprout .leaf { fill: rgba(50, 85, 61, .55); stroke: #5d8a68; transform-box: fill-box; }
.sprout .l1 { transform-origin: 0% 100%; } .sprout .l2 { transform-origin: 100% 100%; }
:dir(rtl) .sprout { transform: scaleX(-1); }
.js-motion .sprout .stem { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js-motion .sprout .leaf { transform: scale(0); }
.js-motion .timeline.in .sprout .stem { animation: draw .8s ease-out 1.7s forwards; }
.js-motion .timeline.in .sprout .l1 { animation: sprout .7s cubic-bezier(.3, 1.6, .5, 1) 2.3s forwards; }
.js-motion .timeline.in .sprout .l2 { animation: sprout .7s cubic-bezier(.3, 1.6, .5, 1) 2.55s forwards; }

/* principle icons are drawn line by line */
.js-motion .feat .ico.drawable * { transition: stroke-dashoffset 1.1s cubic-bezier(.3, .6, .2, 1) var(--dl, 0s); }
.js-motion .feat .f.in .ico.drawable * { stroke-dashoffset: 0 !important; }

/* proposal cover rings draw in */
.cover .deco circle { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.6s cubic-bezier(.3, .6, .2, 1) calc(var(--k, 0) * 140ms + 100ms) forwards; }

.preview .seeds, .preview .sprout .leaf, .no-motion .seeds { display: none; }
.preview .cover .deco circle { animation: none; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .seeds { display: none; }
  .js-rings.breathe { animation: none; }
  .js-motion .timeline::before, .js-motion .steps::before, .js-motion .timeline li::before, .js-motion .steps li::before { transform: none; transition: none; }
  .js-motion .sprout .stem { stroke-dashoffset: 0; } .js-motion .sprout .leaf { transform: none; }
  .cover .deco circle { animation: none; stroke-dashoffset: 0; }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .visual { order: -1; max-width: 300px; justify-self: center; }
  .feat { grid-template-columns: minmax(0, 1fr); }
  .p-main { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 680px) {
  .nav { display: none; }
  .top .wrap { justify-content: space-between; }
  .top .lang { margin-inline-start: auto; }
  .timeline li { grid-template-columns: minmax(0, 1fr); padding-inline-start: 36px; }
  .visual { max-width: 220px; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .duo { grid-template-columns: minmax(0, 1fr); }
  .duo .join { transform: rotate(90deg); }
}
@media print {
  .top, .lang { display: none; }
  .cover, .bg-wood, .bg-canopy, .card.wide { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sec { break-inside: avoid; }
  .rise { opacity: 1; transform: none; animation: none; }
}

/* cursor light + dust (sizes, colors and motion are set from Studio via site.js) */
.glow {
  position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; border-radius: 50%;
  opacity: 0; transition: opacity 1.2s ease; will-change: transform;
}
.glow.on { opacity: 1; }
.glow-blob { animation: blob 14s ease-in-out infinite alternate; }
@keyframes blob {
  0% { border-radius: 52% 48% 46% 54% / 50% 56% 44% 50%; }
  50% { border-radius: 40% 60% 58% 42% / 56% 42% 58% 44%; }
  100% { border-radius: 58% 42% 44% 56% / 44% 58% 42% 56%; }
}
.dust { position: fixed; inset: 0; z-index: 59; pointer-events: none; }
@media (hover: none), (prefers-reduced-motion: reduce) { .glow, .dust { display: none; } }
@media print { .glow, .dust { display: none; } }

/* ---------- videos: thumbnails ---------- */
.vids { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 18px 16px; margin-top: 22px; }
.vthumb, .th-item { all: unset; cursor: pointer; display: block; position: relative; -webkit-tap-highlight-color: transparent; }
.vcover { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: rgba(5,16,8,.55);
  box-shadow: 0 1px 0 rgba(255,228,205,.06) inset, 0 10px 28px -16px rgba(0,0,0,.6); transition: transform .6s cubic-bezier(.22,.8,.2,1), box-shadow .6s; }
.vcover img, .vcover video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.22,.8,.2,1), filter .6s; }
.vph { position: absolute; inset: 0; background: radial-gradient(120% 120% at 20% 0%, var(--moss), var(--canopy) 60%, var(--night)); }
.vplay { position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: var(--night);
  background: rgba(255,228,205,.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 8px 24px -8px rgba(0,0,0,.6);
  transition: transform .5s cubic-bezier(.22,.8,.2,1), background .4s; }
.vplay svg { width: 22px; height: 22px; margin-inline-start: 3px; }
[dir="rtl"] .vplay svg { margin-inline-start: 0; margin-inline-end: -3px; }
.vtitle { display: block; margin-top: 10px; font-size: .9em; line-height: 1.6; color: var(--fg, inherit);
  opacity: 0; transform: translateY(-6px); filter: blur(3px); transition: opacity .55s ease, transform .55s cubic-bezier(.22,.8,.2,1), filter .55s; }
.vthumb:hover .vcover, .vthumb:focus-visible .vcover { transform: translateY(-3px); box-shadow: 0 18px 40px -18px rgba(0,0,0,.75); }
.vthumb:hover .vcover img, .vthumb:hover .vcover video { transform: scale(1.04); }
.vthumb:hover .vplay, .vthumb:focus-visible .vplay { transform: scale(1.08); background: var(--sapwood); }
.vthumb:hover .vtitle, .vthumb:focus-visible .vtitle, .th-item:hover .vtitle, .th-item:focus-visible .vtitle, .th-item.on .vtitle { opacity: 1; transform: none; filter: none; }
.vthumb:focus-visible .vcover, .th-item:focus-visible .vcover { outline: 2px solid var(--oak); outline-offset: 3px; }
@media (hover: none) { .vtitle { opacity: 1; transform: none; filter: none; } }
.project .vids { margin-top: clamp(26px, 3vw, 40px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.vcover { background: radial-gradient(120% 120% at 20% 0%, var(--moss), var(--canopy) 60%, var(--night)); }
.vcover img.broken { visibility: hidden; }
.timeline .vids { grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); }

/* ---------- videos: theater ---------- */
.theater { position: fixed; inset: 0; z-index: 100; visibility: hidden; pointer-events: none; }
.theater.open { visibility: visible; pointer-events: auto; }
.theater-lock, .theater-lock body { overflow: hidden; }
.th-veil { position: absolute; inset: 0; background: rgba(5,16,8,.42); backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15);
  opacity: 0; transition: opacity .6s ease; }
.theater.open .th-veil { opacity: 1; }
.theater.closing .th-veil { opacity: 0; transition-duration: .45s; }
.th-stage { position: absolute; transform-origin: 0 0; border-radius: 18px; overflow: hidden; background: #000;
  box-shadow: 0 0 0 1px rgba(255,228,205,.08), 0 40px 120px -30px rgba(0,0,0,.85); }
.th-screen { aspect-ratio: 16 / 9; background: #000; }
.th-screen video, .th-screen iframe { width: 100%; height: 100%; display: block; border: 0; background: #000; }
.th-stage:fullscreen { border-radius: 0; display: flex; flex-direction: column; justify-content: center; }
.th-stage:fullscreen .th-screen { aspect-ratio: auto; flex: 1; }
.th-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; color: var(--sapwood);
  background: linear-gradient(180deg, rgba(18,51,35,.96), rgba(5,16,8,.98)); font-size: .92em; }
.th-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .92; }
.th-tools { display: flex; align-items: center; gap: 6px; flex: none; }
.th-tools button { all: unset; cursor: pointer; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--sapwood); transition: background .3s; }
.th-tools button:hover, .th-tools button:focus-visible { background: rgba(255,228,205,.12); }
.th-tools svg { width: 20px; height: 20px; }
.th-open { color: var(--oak); font-size: .88em; margin-inline-end: 6px; }
.th-more { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 5vw 22px; opacity: 0; transform: translateY(14px);
  transition: opacity .6s ease .18s, transform .7s cubic-bezier(.22,.8,.2,1) .18s; }
.theater.open .th-more { opacity: 1; transform: none; }
.theater.closing .th-more { opacity: 0; transform: translateY(14px); transition-delay: 0s; transition-duration: .3s; }
.th-more p { margin: 0 0 10px; color: rgba(255,228,205,.75); font-size: .82em; letter-spacing: .02em; }
.th-strip { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.th-item { flex: 0 0 auto; width: clamp(130px, 16vw, 190px); scroll-snap-align: center; }
.th-item .vcover { border-radius: 10px; opacity: .62; transition: opacity .4s, transform .5s cubic-bezier(.22,.8,.2,1); }
.th-item .vplay { width: 34px; height: 34px; } .th-item .vplay svg { width: 15px; height: 15px; }
.th-item:hover .vcover, .th-item.on .vcover { opacity: 1; transform: translateY(-2px); }
.th-item.on .vcover { box-shadow: 0 0 0 2px var(--oak); }
.th-item .vtitle { color: var(--sapwood); font-size: .78em; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) { .th-stage { border-radius: 12px; } .th-more { padding-inline: 16px; } }
@media (prefers-reduced-motion: reduce) { .th-veil, .th-more, .vcover, .vtitle, .vplay { transition: none !important; } }
@media print { .theater { display: none; } }

/* ---------- Studio layout overrides ---------- */
.sec.pad-x { padding-top: var(--pad-top, clamp(56px, 8vw, 112px)); padding-bottom: var(--pad-bottom, clamp(56px, 8vw, 112px)); }
.sec.w-x > .wrap { max-width: var(--wrap-max); }
.sec.al-center .wrap { text-align: center; }
.sec.al-center .wrap h2, .sec.al-center .intro, .sec.al-center .body, .sec.al-center .lead, .sec.al-center .eyebrow, .sec.al-center .note { margin-inline: auto; }
.sec.al-center .actions, .sec.al-center .channels { justify-content: center; }
.sec.al-end .wrap { text-align: end; }
.sec.al-end .wrap h2, .sec.al-end .intro, .sec.al-end .body { margin-inline-start: auto; }
[data-el] { position: relative; }
@media (min-width: 901px) {
  [data-mv] { translate: var(--tx, 0) var(--ty, 0); rotate: var(--rot, 0deg); scale: var(--sc, 1); z-index: 2; }
}

/* ---------- rich text ---------- */
.rt-h { font-size: 1.25em; margin: 1.1em 0 .4em; color: var(--head); }
.rt-h4 { font-size: 1.05em; margin: 1em 0 .3em; color: var(--accent); font-weight: 640; }
.rt-q { margin: 1em 0; padding: 4px 18px; border-inline-start: 3px solid var(--oak); color: var(--fg); font-style: italic; }
:lang(fa) .rt-q, :lang(ar) .rt-q { font-style: normal; }
mark.hl { background: linear-gradient(transparent 55%, rgba(161,116,77,.45) 55%); color: inherit; padding: 0 .1em; }
.t-lg { font-size: 1.22em; font-weight: 620; color: var(--fg); }
.t-sm { font-size: .84em; opacity: .85; }
em { font-style: italic; }
:lang(fa) em, :lang(ar) em { font-style: normal; font-weight: 560; color: var(--fg); }

/* ---------- bullets: shape, colour and motion are chosen per section in Studio ---------- */
.bl { list-style: none; margin: .6em 0 1em; padding: 0; display: grid; gap: .55em; color: var(--soft); max-width: var(--measure); }
.bl li { position: relative; padding-inline-start: 1.9em; }
.bl li::before { content: ""; position: absolute; inset-inline-start: .15em; top: .55em; width: .9em; height: .9em; background: var(--bl-c, var(--oak));
  -webkit-mask: var(--bl-shape) center / contain no-repeat; mask: var(--bl-shape) center / contain no-repeat; transform-origin: center; }
ol.bl { counter-reset: n; }
ol.bl li { counter-increment: n; }
ol.bl li::before { content: counter(n); -webkit-mask: none; mask: none; background: none; color: var(--bl-c, var(--oak)); font-weight: 680; width: auto; height: auto; top: 0; font-size: .95em; }
.bl-dot { --bl-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='3.2'/%3E%3C/svg%3E"); }
.bl-ring { --bl-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='3.4' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E"); }
.bl-leaf { --bl-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20c0-9 6-15 16-16-1 10-7 16-16 16Z'/%3E%3C/svg%3E"); }
.bl-sprout { --bl-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 22V12h2v10z M12 12c0-5 4-8 9-8 0 6-4 8-9 8Z M12 15c0-4-3-6-8-6 0 5 3 6 8 6Z'/%3E%3C/svg%3E"); }
.bl-check { --bl-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5 9.5 18 20 6' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.bl-arrow { --bl-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
[dir="rtl"] .bl-arrow .bl li::before { scale: -1 1; }
.bl-dash { --bl-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='10.5' width='18' height='3' rx='1.5'/%3E%3C/svg%3E"); }
.bl-diamond { --bl-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l8 9-8 9-8-9z'/%3E%3C/svg%3E"); }
.bl-seed { --bl-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='12' rx='5' ry='8' transform='rotate(35 12 12)'/%3E%3C/svg%3E"); }
.sec:not([class*="bl-"]) { --bl-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20c0-9 6-15 16-16-1 10-7 16-16 16Z'/%3E%3C/svg%3E"); }
/* motion, only once the list scrolls into view */
.js-motion .bla-grow .bl li::before { transform: scale(0); transition: transform .7s cubic-bezier(.3,1.5,.4,1) calc(var(--i) * 90ms + 150ms); }
.js-motion .bla-grow .bl.in li::before { transform: scale(1); }
.js-motion .bla-fade .bl li { opacity: 0; transition: opacity .8s ease calc(var(--i) * 110ms); }
.js-motion .bla-fade .bl.in li { opacity: 1; }
.js-motion .bla-slide .bl li { opacity: 0; transform: translateX(calc(var(--dirx, 1) * -14px)); transition: opacity .7s ease calc(var(--i) * 100ms), transform .8s cubic-bezier(.22,.8,.2,1) calc(var(--i) * 100ms); }
[dir="rtl"] .js-motion .bla-slide .bl li, .js-motion[dir="rtl"] .bla-slide .bl li { --dirx: -1; }
.js-motion .bla-slide .bl.in li { opacity: 1; transform: none; }
.bla-pulse .bl li::before { animation: bl-pulse 3.2s ease-in-out calc(var(--i) * 300ms) infinite; }
.bla-sway .bl li::before { animation: bl-sway 4s ease-in-out calc(var(--i) * 250ms) infinite; transform-origin: 50% 90%; }
@keyframes bl-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: .7; } }
@keyframes bl-sway { 0%, 100% { rotate: -8deg; } 50% { rotate: 8deg; } }
@media (prefers-reduced-motion: reduce) { .bl li, .bl li::before { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } }
.preview .bl li, .preview .bl li::before { opacity: 1; }

/* layout overrides that the editor chose to keep on phones too */
@media (max-width: 900px) {
  /* offsets shrink with the screen, so a desktop arrangement keeps its proportions on a phone */
  [data-mv][data-mv-all] { translate: calc(var(--tx, 0px) * var(--vk, 1)) calc(var(--ty, 0px) * var(--vk, 1)); rotate: var(--rot, 0deg); scale: var(--sc, 1); }
}
.rt-h1 { font-size: 1.5em; margin: 1.1em 0 .45em; color: var(--head); line-height: var(--lh-head); }

/* entrance animation per element (chosen in Studio) */
.js-motion [data-anim] { transition: opacity .9s ease, transform 1s cubic-bezier(.22,.8,.2,1), filter .9s ease; }
.js-motion [data-anim]:not(.in) { opacity: 0; }
.js-motion [data-anim="fade-up"]:not(.in) { transform: translateY(28px); }
.js-motion [data-anim="zoom"]:not(.in) { transform: scale(.92); }
.js-motion [data-anim="grow"]:not(.in) { transform: scale(.6); transform-origin: 50% 100%; }
.js-motion [data-anim="blur"]:not(.in) { filter: blur(10px); }
.js-motion [data-anim="slide-start"]:not(.in) { transform: translateX(calc(var(--dirx, 1) * -40px)); }
.js-motion [data-anim="slide-end"]:not(.in) { transform: translateX(calc(var(--dirx, 1) * 40px)); }
[dir="rtl"] [data-anim^="slide"] { --dirx: -1; }
@media (prefers-reduced-motion: reduce) { .js-motion [data-anim] { opacity: 1 !important; transform: none !important; filter: none !important; } }

/* heading font can differ from body font (set in Studio) */
h1, h2, h3, h4, .rt-h1, .rt-h, .rt-h4 { font-family: var(--font-head, var(--font)); }

/* ---------- password page ---------- */
.lock-body { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(120% 120% at 20% 0%, var(--moss), var(--canopy) 50%, var(--night)); }
.lock-wrap { width: 100%; padding: 24px; display: grid; place-items: center; }
.lock-card { width: min(400px, 100%); display: grid; gap: 10px; padding: 34px 30px; border-radius: 22px; background: rgba(5,16,8,.55); color: var(--sapwood);
  border: 1px solid rgba(255,228,205,.12); box-shadow: 0 30px 80px rgba(0,0,0,.45); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.lock-card h1 { font-size: 1.5rem; margin: 6px 0 0; color: var(--sapwood); }
.lock-card p { margin: 0 0 8px; color: rgba(255,228,205,.75); }
.lock-card label { font-size: .88em; color: rgba(255,228,205,.75); }
.lock-card input[type=password] { font: inherit; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,228,205,.25); background: rgba(255,228,205,.06); color: var(--sapwood); }
.lock-card input:focus { outline: 2px solid var(--oak); outline-offset: 2px; }
.lock-card .btn { justify-content: center; margin-top: 6px; }
.lock-mark { width: 44px; height: 44px; }
.lock-err { color: #f2b8a0 !important; font-size: .9em; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }


/* ---------- ideas: a seed that grows into branches of ideas ---------- */
.ideas { display: grid; justify-items: center; text-align: center; }
.idea-seed { all: unset; cursor: pointer; display: grid; justify-items: center; gap: 10px; padding: 18px 28px; border-radius: 28px; -webkit-tap-highlight-color: transparent; transition: transform .6s cubic-bezier(.22,.8,.2,1); }
.idea-seed:focus-visible { outline: 2px solid var(--oak); outline-offset: 6px; }
.seed-orb { width: 108px; height: 108px; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: radial-gradient(circle at 50% 60%, rgba(120,190,140,.35), rgba(18,51,35,.0) 62%), radial-gradient(circle, var(--canopy), var(--night));
  box-shadow: 0 0 0 1px rgba(161,116,77,.45), 0 18px 50px -12px rgba(18,51,35,.65), inset 0 0 30px rgba(120,190,140,.25);
  animation: seed-breathe 3.6s ease-in-out infinite; }
.seed-orb svg { width: 72%; height: 72%; overflow: visible; fill: none; stroke-linecap: round; }
.seed-orb .ring { stroke: #A1744D; stroke-width: 1; opacity: 0; transform-origin: 32px 32px; }
.seed-orb .core { fill: #FFE4CD; filter: drop-shadow(0 0 6px rgba(255,228,205,.9)); }
.seed-orb .sprout-s { stroke: #78be8c; stroke-width: 2.2; stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .7s ease .1s; }
.seed-orb .leaf-a, .seed-orb .leaf-b { fill: #78be8c; transform-box: fill-box; transform: scale(0); transition: transform .7s cubic-bezier(.3,1.6,.4,1); }
.seed-orb .leaf-a { transform-origin: 0% 100%; transition-delay: .55s; } .seed-orb .leaf-b { transform-origin: 100% 100%; transition-delay: .7s; fill: #4f7a57; }
.idea-seed:hover .seed-orb .sprout-s, .ideas.open .seed-orb .sprout-s { stroke-dashoffset: 0; }
.idea-seed:hover .seed-orb .leaf-a, .idea-seed:hover .seed-orb .leaf-b, .ideas.open .seed-orb .leaf-a, .ideas.open .seed-orb .leaf-b { transform: scale(1); }
.ideas.burst .seed-orb .ring.r1 { animation: seed-ring 1.1s ease-out; } .ideas.burst .seed-orb .ring.r2 { animation: seed-ring 1.1s ease-out .25s; }
.seed-label { font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 700; color: var(--head); }
.seed-hint { font-size: .85em; color: var(--soft); transition: opacity .5s; }
.ideas.open .seed-hint { opacity: 0; }
.ideas.open .idea-seed { transform: scale(.82); }
@keyframes seed-breathe { 0%, 100% { box-shadow: 0 0 0 1px rgba(161,116,77,.45), 0 18px 50px -12px rgba(18,51,35,.65), inset 0 0 30px rgba(120,190,140,.25); }
  50% { box-shadow: 0 0 0 1px rgba(161,116,77,.7), 0 18px 60px -8px rgba(120,190,140,.45), inset 0 0 40px rgba(120,190,140,.45); } }
@keyframes seed-ring { from { opacity: .9; transform: scale(.4); stroke-width: 3; } to { opacity: 0; transform: scale(2.6); stroke-width: .3; } }

.idea-tree { display: grid; grid-template-rows: 0fr; width: 100%; transition: grid-template-rows 1.1s cubic-bezier(.22,.8,.2,1); }
.ideas.open .idea-tree { grid-template-rows: 1fr; }
.idea-inner { overflow: hidden; min-height: 0; }
.ideas .idea-inner > h2, .ideas .idea-inner > .intro { margin-inline: auto; opacity: 0; transform: translateY(14px); transition: opacity .8s ease .35s, transform .9s cubic-bezier(.22,.8,.2,1) .35s; }
.ideas.open .idea-inner > h2, .ideas.open .idea-inner > .intro { opacity: 1; transform: none; }
.idea-list { list-style: none; margin: 34px auto 10px; padding: 8px 0 20px; position: relative; display: grid; gap: 22px; max-width: 900px; text-align: start; }
/* trunk */
.idea-list::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: 50%; width: 2px; margin-inline-start: -1px; border-radius: 2px;
  background: linear-gradient(var(--oak), var(--moss) 70%, transparent); transform: scaleY(0); transform-origin: top; transition: transform 1.4s cubic-bezier(.4,.2,.2,1) .3s; }
.ideas.open .idea-list::before { transform: scaleY(1); }
.idea { position: relative; display: grid; grid-template-columns: 1fr 1fr; }
.idea .idea-card { grid-column: 1; margin-inline-end: 34px; }
.idea:nth-child(even) .idea-card { grid-column: 2; margin-inline: 34px 0; }
/* branch from trunk to card */
.idea::before { content: ""; position: absolute; top: 34px; height: 2px; width: 34px; background: var(--oak); inset-inline-end: 50%; transform: scaleX(0); transform-origin: right;
  transition: transform .5s ease calc(.6s + var(--i) * .22s); }
[dir="rtl"] .idea::before { transform-origin: left; }
.idea:nth-child(even)::before { inset-inline-end: auto; inset-inline-start: 50%; transform-origin: left; }
[dir="rtl"] .idea:nth-child(even)::before { transform-origin: right; }
.ideas.open .idea::before { transform: scaleX(1); }
.idea-dot { position: absolute; top: 28px; inset-inline-start: 50%; width: 14px; height: 14px; margin-inline-start: -7px; border-radius: 50% 0 50% 0; background: #78be8c;
  box-shadow: 0 0 12px rgba(120,190,140,.8); transform: scale(0) rotate(-45deg); transition: transform .6s cubic-bezier(.3,1.7,.4,1) calc(.55s + var(--i) * .22s); }
.ideas.open .idea-dot { transform: scale(1) rotate(-45deg); }
.idea-card { position: relative; padding: 22px 22px 20px; border-radius: 18px; background: var(--card); border: 1px solid var(--card-line);
  box-shadow: 0 18px 40px -26px rgba(5,16,8,.6); opacity: 0; transform: translateY(18px) scale(.94); filter: blur(6px);
  transition: opacity .8s ease calc(.8s + var(--i) * .22s), transform .9s cubic-bezier(.22,.8,.2,1) calc(.8s + var(--i) * .22s), filter .8s ease calc(.8s + var(--i) * .22s), box-shadow .4s, translate .4s; }
.ideas.open .idea-card { opacity: 1; transform: none; filter: none; }
.idea-card:hover { translate: 0 -3px; box-shadow: 0 26px 50px -24px rgba(5,16,8,.7); }
.idea-ico { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; margin-bottom: 12px;
  background: linear-gradient(135deg, rgba(120,190,140,.28), rgba(161,116,77,.22)); color: var(--accent); }
.idea-ico .ico { width: 22px; height: 22px; margin: 0; }
.idea-card h3 { margin: 0 0 6px; }
.idea-text p { color: var(--soft); margin: 0; }
.idea-tag { display: inline-block; margin-top: 12px; font-size: .78em; padding: 3px 10px; border-radius: 999px; background: var(--chip); color: var(--accent); border: 1px solid var(--card-line); }
.idea-close { margin-top: 18px; opacity: 0; transition: opacity .6s ease 1.6s; }
.ideas.open .idea-close { opacity: 1; }
@media (max-width: 720px) {
  .idea-list::before { inset-inline-start: 10px; }
  .idea { grid-template-columns: 1fr; }
  .idea .idea-card, .idea:nth-child(even) .idea-card { grid-column: 1; margin-inline: 34px 0; }
  .idea::before, .idea:nth-child(even)::before { inset-inline-start: 10px; inset-inline-end: auto; width: 24px; transform-origin: left; }
  [dir="rtl"] .idea::before, [dir="rtl"] .idea:nth-child(even)::before { transform-origin: right; }
  .idea-dot { inset-inline-start: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .seed-orb { animation: none; } .idea-tree, .idea-card, .idea::before, .idea-dot, .idea-list::before, .idea-close, .ideas .idea-inner > * { transition: none !important; }
}
.preview .ideas.open .idea-card, .preview .ideas.open .idea-inner > * { transition-duration: .3s; transition-delay: 0s; }

/* ---------- proposal (paper) polish: soft accents and gentle reveals ---------- */
body.theme-paper .sec > .wrap > h2::before { content: ""; display: block; width: 42px; height: 3px; border-radius: 3px; margin-bottom: 16px;
  background: linear-gradient(90deg, var(--oak), #78be8c); transform-origin: var(--from, left); transition: transform .9s cubic-bezier(.22,.8,.2,1) .1s; }
[dir="rtl"] body.theme-paper, body.theme-paper[dir="rtl"] { --from: right; }
:root[dir="rtl"] body.theme-paper .sec > .wrap > h2::before { transform-origin: right; }
.js-motion.theme-paper .sec:not(.seen) > .wrap > h2::before { transform: scaleX(0); }
body.theme-paper .ideas h2::before { margin-inline: auto; }
body.theme-paper .cards .card { transition: transform .45s cubic-bezier(.22,.8,.2,1), box-shadow .45s; }
body.theme-paper .cards .card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -28px rgba(18,51,35,.55); }
.js-motion.theme-paper .cards .card, .js-motion.theme-paper .duo .side { opacity: 0; transform: translateY(18px); transition: opacity .8s ease calc(var(--i, 0) * 90ms), transform .9s cubic-bezier(.22,.8,.2,1) calc(var(--i, 0) * 90ms), box-shadow .45s; }
.js-motion.theme-paper .seen .cards .card, .js-motion.theme-paper .seen .duo .side { opacity: 1; transform: none; }
body.theme-paper .duo .side { background: linear-gradient(160deg, #fff, rgba(161,116,77,.07)); border-radius: 18px; }
body.theme-paper .cover { background: radial-gradient(120% 140% at 0% 0%, var(--moss), var(--canopy) 52%, var(--night)); }
body.theme-paper .cover::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,228,205,.08) 45%, transparent 60%); background-size: 250% 100%; animation: sheen 9s ease-in-out infinite; }
@keyframes sheen { 0%, 100% { background-position: 120% 0; } 50% { background-position: -20% 0; } }
@media (prefers-reduced-motion: reduce) { body.theme-paper .cover::after { animation: none; } .js-motion.theme-paper .cards .card, .js-motion.theme-paper .duo .side { opacity: 1; transform: none; } }

/* ---------- private section placeholder (frosted glass) ---------- */
.sec-locked .wrap { display: grid; place-items: center; }
.glass-lock { position: relative; width: min(560px, 100%); display: grid; justify-items: center; gap: 8px; text-align: center; padding: 34px 28px; border-radius: 24px; overflow: hidden;
  background: linear-gradient(150deg, rgba(255,228,205,.10), rgba(120,190,140,.06)); border: 1px solid rgba(255,228,205,.16);
  backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 30px 70px -40px rgba(0,0,0,.7); }
.glass-lock::before { content: ""; position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent, rgba(120,190,140,.18), transparent 30%, rgba(161,116,77,.16), transparent 60%);
  animation: gl-spin 14s linear infinite; z-index: -1; }
body.theme-paper .glass-lock { background: linear-gradient(150deg, rgba(255,255,255,.75), rgba(161,116,77,.08)); border-color: rgba(99,53,27,.16); }
.glass-lock h2 { margin: 6px 0 0; font-size: clamp(1.25rem, 2.4vw, 1.6rem); max-width: none; }
.glass-lock h2::before { display: none !important; }
.glass-lock p { margin: 0; color: var(--soft); }
.gl-rings svg { width: 56px; height: 56px; fill: none; stroke: var(--oak); stroke-width: 1.4; }
.gl-rings .c { fill: #78be8c; stroke: none; animation: gl-pulse 2.4s ease-in-out infinite; transform-origin: 34px 30px; }
.gl-row { display: flex; gap: 8px; width: 100%; max-width: 380px; margin-top: 10px; }
.gl-row input { flex: 1; min-width: 0; font: inherit; padding: 11px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--fg); }
.gl-row input:focus { outline: 2px solid var(--oak); outline-offset: 2px; }
.gl-err { color: #e39a7d !important; font-size: .9em; }
@keyframes gl-spin { to { transform: rotate(1turn); } }
@keyframes gl-pulse { 50% { transform: scale(1.5); opacity: .6; } }
/* a section that was just unlocked unfolds softly */
.sec.just-opened { animation: unfold 1.2s cubic-bezier(.22,.8,.2,1) both; }
@keyframes unfold { from { opacity: 0; clip-path: inset(0 0 100% 0 round 24px); filter: blur(8px); } to { opacity: 1; clip-path: inset(0 0 0 0 round 0); filter: none; } }
.prev-chip { position: absolute; top: 10px; inset-inline-end: 12px; z-index: 5; font-size: 12px; padding: 3px 10px; border-radius: 999px; background: #A1744D; color: #051008; font-weight: 600; }

/* ---------- personal welcome: pollen of light gathers, rings grow, a sprout, then the name ---------- */
.welcome { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; text-align: center;
  background: radial-gradient(120% 120% at 50% 40%, rgba(18,51,35,.985), rgba(5,16,8,.995) 70%); color: var(--sapwood); transition: opacity 1s ease, visibility 1s;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.welcome.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.welcome.gone .w-card { transform: scale(1.04); filter: blur(6px); }
.w-dust { position: absolute; inset: 0; width: 100%; height: 100%; }
.w-card { position: relative; display: grid; justify-items: center; gap: 6px; padding: 24px; transition: transform 1s ease, filter 1s ease; }
.w-rings { width: min(220px, 52vw); height: auto; overflow: visible; fill: none; }
.w-rings circle:not(.w-core) { stroke: #A1744D; stroke-width: .9; opacity: .75; stroke-dasharray: 1; stroke-dashoffset: 1; animation: w-draw 1.6s cubic-bezier(.3,.6,.2,1) calc(.3s + var(--k) * .14s) forwards; }
.w-rings circle:nth-child(-n+2) { stroke: #78be8c; }
.w-stem { stroke: #78be8c; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: w-draw .8s ease 1.3s forwards; }
.w-leaf { fill: #78be8c; transform-box: fill-box; transform: scale(0); animation: w-pop .8s cubic-bezier(.3,1.6,.4,1) forwards; }
.w-leaf.a { transform-origin: 0 100%; animation-delay: 1.75s; } .w-leaf.b { transform-origin: 100% 100%; animation-delay: 1.95s; fill: #4f7a57; }
.w-core { fill: #FFE4CD; filter: drop-shadow(0 0 8px #FFE4CD); animation: w-glow 2.6s ease-in-out infinite; }
.w-hi, .w-name, .w-note, .w-go { opacity: 0; transform: translateY(12px); filter: blur(8px); animation: w-in 1.1s cubic-bezier(.22,.8,.2,1) forwards; }
.w-hi { margin: 10px 0 0; color: rgba(255,228,205,.75); letter-spacing: .02em; animation-delay: 1.9s; }
.w-name { margin: 0; font-size: clamp(1.9rem, 5vw, 3rem); color: var(--sapwood); max-width: 20ch; animation-delay: 2.15s;
  background: linear-gradient(90deg, #FFE4CD, #e8c9a3, #FFE4CD); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.w-note { margin: 2px 0 0; max-width: 46ch; color: rgba(255,228,205,.82); animation-delay: 2.5s; }
.w-go { margin-top: 18px; animation-delay: 2.9s; }
@keyframes w-draw { to { stroke-dashoffset: 0; } }
@keyframes w-pop { to { transform: scale(1); } }
@keyframes w-in { to { opacity: 1; transform: none; filter: none; } }
@keyframes w-glow { 50% { filter: drop-shadow(0 0 16px #FFE4CD); } }
@media (prefers-reduced-motion: reduce) { .welcome *, .welcome { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; filter: none !important; stroke-dashoffset: 0 !important; } }
.preview .welcome { display: none; }


/* ---------- personal journey: a glowing vine of steps, dreamy but quiet ---------- */
.journey { position: fixed; z-index: 90; inset-inline: 0; bottom: 18px; margin-inline: auto; width: max-content; max-width: calc(100vw - 24px);
  display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 999px; isolation: isolate;
  background: linear-gradient(120deg, rgba(5,16,8,.78), rgba(18,51,35,.78)); color: var(--sapwood); border: 1px solid rgba(255,228,205,.14);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 18px 50px -20px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,228,205,.08);
  font-size: .86em; transition: transform .7s cubic-bezier(.22,.8,.2,1), opacity .7s, filter .7s; animation: j-in 1.2s cubic-bezier(.22,.8,.2,1) .5s both; }
[dir="rtl"] .journey { padding: 8px 16px 8px 8px; }
/* soft aurora breathing behind the bar */
.journey::before { content: ""; position: absolute; inset: -14px -24px; z-index: -1; border-radius: 999px; filter: blur(22px); opacity: .55;
  background: radial-gradient(40% 80% at 25% 50%, rgba(120,190,140,.45), transparent 70%), radial-gradient(40% 80% at 75% 50%, rgba(161,116,77,.4), transparent 70%);
  animation: j-aura 7s ease-in-out infinite alternate; }
.journey.tuck { transform: translateY(calc(100% + 30px)); opacity: 0; filter: blur(6px); }
.j-title { opacity: .6; white-space: nowrap; font-size: .92em; }
.journey ol { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.journey li { display: flex; align-items: center; opacity: 0; animation: j-step .8s cubic-bezier(.22,.8,.2,1) calc(.9s + var(--i) * .18s) forwards; }
/* the vine between steps; a light travels along what is already walked */
.journey li + li::before { content: ""; width: 26px; height: 2px; border-radius: 2px; margin-inline: 2px; background: rgba(255,228,205,.18); }
.journey li.done + li::before, .journey li.now::before, .journey li.done::before {
  background: linear-gradient(90deg, #4f7a57, #78be8c 40%, #FFE4CD 50%, #78be8c 60%, #4f7a57) 0 0 / 300% 100%; animation: j-flow 2.8s linear infinite; box-shadow: 0 0 8px rgba(120,190,140,.6); }
[dir="rtl"] .journey li::before { animation-direction: reverse; }
.journey a { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 7px; padding: 4px 6px; border-radius: 999px; transition: background .3s; }
.journey a:hover { background: rgba(255,228,205,.08); }
.j-dot { position: relative; width: 22px; height: 22px; display: grid; place-items: center; font-size: .78em; flex: none; }
/* future step: a seed */
.j-dot::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 1.5px dashed rgba(255,228,205,.4); }
.j-num { position: relative; opacity: .8; }
/* walked step: a leaf */
.journey li.done .j-dot::before { inset: 2px; border: 0; border-radius: 0 60% 0 60%; background: linear-gradient(135deg, #78be8c, #4f7a57); transform: rotate(45deg); }
.journey li.done .j-num { color: #051008; font-weight: 700; }
/* here: a glowing bud with a slow ripple */
.journey li.now .j-dot::before { inset: 0; border: 0; background: radial-gradient(circle at 40% 35%, #fff6ec, #FFE4CD 45%, #e2b98f); box-shadow: 0 0 14px rgba(255,228,205,.7); }
.journey li.now .j-dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid rgba(255,228,205,.55); animation: j-ripple 2.6s ease-out infinite; }
.journey li.now .j-num { color: #051008; font-weight: 700; }
.j-lbl { white-space: nowrap; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; transition: opacity .3s; }
.journey li:not(.now) .j-lbl { opacity: .62; }
.journey li:not(.now) a:hover .j-lbl { opacity: 1; }
.j-next { position: relative; overflow: hidden; background: var(--sapwood); color: #051008 !important; font-weight: 650; padding: 7px 16px !important; white-space: nowrap; }
.j-next::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.75) 50%, transparent 65%); transform: translateX(-120%); animation: j-shine 4.5s ease-in-out 2.5s infinite; }
.j-next:hover { background: #fff3e6 !important; }
@keyframes j-in { from { transform: translateY(40px) scale(.96); opacity: 0; filter: blur(10px); } }
@keyframes j-step { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes j-flow { to { background-position: -300% 0; } }
@keyframes j-ripple { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
@keyframes j-aura { from { transform: translateX(-6%) scale(1); opacity: .45; } to { transform: translateX(6%) scale(1.08); opacity: .7; } }
@keyframes j-shine { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@media (max-width: 640px) { .j-title, .journey li:not(.now) .j-lbl { display: none; } .journey { gap: 8px; } .journey li + li::before { width: 16px; } }
body.has-viewer .foot { padding-bottom: 90px; }

/* the "next step" card at the end of a page */
.journey-end .je-card { position: relative; overflow: hidden; isolation: isolate; text-align: center; display: grid; justify-items: center; gap: 10px;
  padding: clamp(34px, 6vw, 60px) clamp(22px, 5vw, 48px); border-radius: 28px; background: rgba(5,16,8,.35); border: 1px solid var(--card-line);
  box-shadow: 0 30px 80px -50px rgba(0,0,0,.8); }
body.theme-paper .journey-end .je-card { background: rgba(255,255,255,.6); }
.je-aura { position: absolute; inset: -30%; z-index: -1; filter: blur(40px); opacity: .55;
  background: conic-gradient(from 0deg at 50% 50%, rgba(120,190,140,.5), rgba(161,116,77,.35), rgba(255,228,205,.3), rgba(79,122,87,.45), rgba(120,190,140,.5));
  animation: je-turn 18s linear infinite; }
.je-pollen { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.je-pollen i { position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 50%; background: #FFE4CD; box-shadow: 0 0 8px rgba(255,228,205,.9); opacity: 0;
  animation: je-float 7s ease-in infinite; }
.je-pollen i:nth-child(3n) { background: #78be8c; box-shadow: 0 0 8px rgba(120,190,140,.9); }
.je-pollen i:nth-child(4n) { width: 3px; height: 3px; }
.je-pollen i:nth-child(1) { left: 0%; animation-delay: 0.0s; animation-duration: 6s; }
.je-pollen i:nth-child(2) { left: 37%; animation-delay: 0.53s; animation-duration: 7s; }
.je-pollen i:nth-child(3) { left: 74%; animation-delay: 1.06s; animation-duration: 8s; }
.je-pollen i:nth-child(4) { left: 11%; animation-delay: 1.59s; animation-duration: 9s; }
.je-pollen i:nth-child(5) { left: 48%; animation-delay: 2.12s; animation-duration: 10s; }
.je-pollen i:nth-child(6) { left: 85%; animation-delay: 2.65s; animation-duration: 6s; }
.je-pollen i:nth-child(7) { left: 22%; animation-delay: 3.18s; animation-duration: 7s; }
.je-pollen i:nth-child(8) { left: 59%; animation-delay: 3.71s; animation-duration: 8s; }
.je-pollen i:nth-child(9) { left: 96%; animation-delay: 4.24s; animation-duration: 9s; }
.je-pollen i:nth-child(10) { left: 33%; animation-delay: 4.77s; animation-duration: 10s; }
.je-pollen i:nth-child(11) { left: 70%; animation-delay: 5.3s; animation-duration: 6s; }
.je-pollen i:nth-child(12) { left: 7%; animation-delay: 5.83s; animation-duration: 7s; }
.je-pollen i:nth-child(13) { left: 44%; animation-delay: 6.36s; animation-duration: 8s; }
.je-pollen i:nth-child(14) { left: 81%; animation-delay: 6.89s; animation-duration: 9s; }
.je-path { width: min(260px, 70%); height: auto; overflow: visible; fill: none; }
.je-path path { stroke: #78be8c; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .8; }
.je-path .a { fill: #78be8c; } .je-path .b { fill: #FFE4CD; filter: drop-shadow(0 0 8px #FFE4CD); animation: gl-pulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.je-path .spark { fill: #fff6ec; filter: drop-shadow(0 0 6px #FFE4CD); }
.seen .je-path path, .preview .je-path path { animation: w-draw 1.8s cubic-bezier(.3,.6,.2,1) .2s forwards; }
.je-step { font-size: .82em; color: var(--accent); letter-spacing: .04em; }
.journey-end h2 { margin: 0; max-width: none; } .journey-end h2::before { display: none !important; }
.journey-end p { margin: 0; color: var(--soft); max-width: 50ch; }
.journey-end .btn { position: relative; overflow: hidden; margin-top: 8px; }
.journey-end .btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.6) 50%, transparent 65%); transform: translateX(-120%); animation: j-shine 5s ease-in-out 1.5s infinite; }
.js-motion .journey-end .je-card > :not(.je-aura):not(.je-pollen) { opacity: 0; transform: translateY(14px); filter: blur(6px); transition: opacity .9s ease, transform 1s cubic-bezier(.22,.8,.2,1), filter .9s; }
.js-motion .journey-end.seen .je-card > :not(.je-aura):not(.je-pollen) { opacity: 1; transform: none; filter: none; }
.js-motion .journey-end.seen .je-card > :nth-child(4) { transition-delay: .15s; } .js-motion .journey-end.seen .je-card > :nth-child(5) { transition-delay: .3s; }
.js-motion .journey-end.seen .je-card > :nth-child(6) { transition-delay: .45s; } .js-motion .journey-end.seen .je-card > :nth-child(7) { transition-delay: .6s; }
@keyframes je-turn { to { transform: rotate(1turn); } }
@keyframes je-float { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-260px) translateX(20px); opacity: 0; } }

/* moving between pages fades softly (browsers that support view transitions) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .45s ease both; }
::view-transition-new(root) { animation: vt-in .6s cubic-bezier(.22,.8,.2,1) both; }
@keyframes vt-out { to { opacity: 0; filter: blur(6px); } }
@keyframes vt-in { from { opacity: 0; filter: blur(8px); transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  .journey, .journey::before, .journey li, .journey li::before, .j-dot::after, .j-next::after, .je-aura, .je-pollen i, .journey-end .btn::after { animation: none !important; opacity: 1; }
  .je-path path { stroke-dashoffset: 0; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
[dir="rtl"] .je-path { transform: scaleX(-1); }