/* network:start */
/* dotrec network additions to the landing (not part of the dotrec-studio site, see src/lib/landing/load.ts):
   the login choice under «ورود», the freelancer line in the home hero and the phone-only freelancer block.
   Values are the site's own tokens: .sheet / .sheet-link for the menu, .pipe-label for the hero line, the phone
   .map panel and .f-t / .f-s type for the block. */

/* nav: «ورود» becomes the button of the login choice (network.js swaps the dead #login link for it) */
.nav-login.net-toggle{border:0;background:none;font-family:inherit;cursor:pointer}
.nav-login.net-toggle[aria-expanded="true"]{color:#fff}

/* the login choice; without JS the original «ورود» link (#login) opens it as the :target */
.net-menu{position:absolute;top:calc(100% + 14px);left:0;z-index:25;width:240px;border-radius:24px;padding:10px;display:none;flex-direction:column;gap:2px;box-shadow:0 24px 50px -20px rgba(0,0,0,.95)}
.net-menu:target,.net-menu.is-open{display:flex}
/* once network.js has taken over, its `hidden` decides, also when the page was opened at #login */
.net-menu[hidden]{display:none}
.net-menu .lg-tint{background:rgba(24,8,9,.8)}
.net-cap{margin:8px 16px 2px;font-size:13px;font-weight:500;color:rgba(245,240,237,.64)}

/* nav: «فریلنسرها» is the second .nav-link, between «خانه» and «پلن‌ها». Measured: a fourth 104px link fits the nav
   from 834px; narrower it steps aside and the «ورود» menu carries it, wider the menu drops its copy. Where it shows,
   /plans and /contact start their lens one link (104px, the site's link width) further than the pages' inline offset;
   network.js then moves the lens with `important` inline values, which win over these. */
@media (max-width:833px){.nav-link.net-link{display:none}}
@media (min-width:834px){
.net-menu a[href="/people"]{display:none}
.nav-links:has(a[href="/plans"][aria-current="page"]) .nav-lens{transform:translateX(-208px)!important}
.nav-links:has(a[href="/contact"][aria-current="page"]) .nav-lens{transform:translateX(-312px)!important}
}

/* phone sheet: the network items replace the site's dead «ورود به پنل» (#login) link */
.sheet a[href="#login"]{display:none}

/* home hero: one secondary line for freelancers (desktop home is one fixed screen, so no extra section there) */
.net-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;font-size:13px;font-weight:500;color:rgba(245,240,237,.64)}
.net-line .rec{width:6px;height:6px}
.net-line a{font-weight:700;text-decoration:none}
/* Measured: below 1024px wide the narrow hero column wraps the line (up to three rows), and below 720px tall the fixed
   screen then clips the hero's bottom. There the line steps aside; the «ورود» menu still has «پیوستن به شبکه» and
   «فریلنسرها». */
@media (min-width:761px) and (max-width:1023px) and (max-height:719px){.net-line{display:none}}

/* home, phone only (the page scrolls there): the freelancer block with live sample profiles */
.net-pitch{display:none}
@media (max-width:760px){
.net-menu{display:none!important}
.net-pitch{display:block;padding:0 16px 40px}
.net-box{display:flex;flex-direction:column;gap:16px;max-width:560px;margin:0 auto;padding:20px 16px;border-radius:28px;background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 18px 40px -24px rgba(0,0,0,.9)}
.net-title{margin:0;font-size:22px;font-weight:900;line-height:1.5;color:#F5F0ED}
.net-text{margin:0;font-size:15px;line-height:1.9;color:rgba(245,240,237,.76)}
.net-points{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;font-size:14px;line-height:1.5;color:rgba(245,240,237,.66)}
.net-points li{display:flex;align-items:center;gap:10px}
.net-points .rec{width:6px;height:6px;animation:none}
.net-sample{display:flex;flex-direction:column;gap:10px}
.net-sample .net-cap{margin:0}
.net-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.net-card{display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;padding:14px 10px;border-radius:20px;text-align:center;text-decoration:none;color:#F5F0ED;background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
a.net-card:hover{color:#fff;background:rgba(255,255,255,.08)}
.net-av{display:block;width:56px;height:56px;margin-bottom:4px;border-radius:50%;object-fit:cover;background:rgba(255,255,255,.08);box-shadow:inset 1px 1px 0 rgba(255,255,255,.3)}
.net-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px;font-weight:700}
.net-meta{font-size:14px;line-height:1.5;color:rgba(245,240,237,.66)}
}

/* site pricing (console «قیمت‌گذاری سایت»): the green free-trial badge (home hero above the CTAs, plans beside the
   billing switch) and a price that is not set («تماس بگیرید»). The green is
   the network app's --ok (61,214,140): it reads on the dark red site without competing with the red CTA. */
.net-trial{display:inline-flex;align-items:center;align-self:flex-start;gap:8px;margin:0 0 4px;height:32px;padding:0 14px;border-radius:16px;font-size:13px;font-weight:500;white-space:nowrap;color:#BFF5DA;background:rgba(61,214,140,.12);box-shadow:inset 0 0 0 1px rgba(61,214,140,.4),0 0 22px -8px rgba(61,214,140,.55)}
.net-trial b{font-weight:800;color:#7CF0B5}
.net-trial-sub{color:rgba(191,245,218,.72)}
.net-trial-sub::before{content:"·";margin-inline-end:8px;color:rgba(124,240,181,.6)}
.net-trial-dot{flex:none;width:7px;height:7px;border-radius:50%;background:#3DD68C;box-shadow:0 0 0 3px rgba(61,214,140,.2);animation:rec-blink 1.6s steps(1) infinite}
.bill-wrap .net-trial{align-self:center;height:28px;margin:0;padding:0 12px;font-size:12.5px}
.p-price strong.net-ask{font-size:20px;font-weight:800;color:rgba(245,240,237,.9)}
@media (prefers-reduced-motion:reduce){.net-trial-dot{animation:none}}
/* the home hero is one fixed screen on desktop: on a short one the badge steps aside, as the freelancer line does */
@media (min-width:761px) and (max-height:679px){.hero .net-trial{display:none}}

/* fonts, self-hosted: load.ts drops the fork's Google Fonts stylesheet (often filtered or slow in Iran, and it holds
   the first paint), so «Dotrec Studio» in Bodoni comes from here. The pages only set it in italic, at 400 (contact)
   and 500 (home), 9–19px: two static Latin cuts of the variable font (wght pinned, opsz 12), about 11 KB each,
   OFL (BodoniModa-OFL.txt). Kalameh's 800 is served by the 900 file, one download fewer; the later rule wins. */
@font-face{font-family:"Bodoni Moda";font-style:italic;font-weight:400;font-display:swap;src:url("../assets/fonts/BodoniModa-Italic-400.latin.woff2") format("woff2");unicode-range:U+0020-007E,U+00A0,U+2018-201D,U+2026}
@font-face{font-family:"Bodoni Moda";font-style:italic;font-weight:500;font-display:swap;src:url("../assets/fonts/BodoniModa-Italic-500.latin.woff2") format("woff2");unicode-range:U+0020-007E,U+00A0,U+2018-201D,U+2026}
@font-face{font-family:"Kalameh";src:url("../assets/fonts/Kalameh-900.woff2") format("woff2");font-weight:800;font-display:swap}

/* home pipeline, the same 10 s loop as home.css drawn with transform and opacity, which the compositor runs without
   repainting. home.css animates the stages' background and glow (a repaint of each pill every frame) and the line's
   width and the dot's `right` (a layout every frame); the later rules here win and the timings are home.css's.
   A stage's lit look is its ::before, faded in and out; only the text colour still animates, as small as it gets. */
.stage.st1,.stage.st2,.stage.st3,.stage.st4,.stage.st5{isolation:isolate}
.stage::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;background:rgba(92,14,22,.96);box-shadow:inset 0 0 0 1px rgba(255,95,110,.75),0 0 18px rgba(238,34,59,.45);animation:10s linear infinite}
.stage.st1{animation-name:net-st1-c}.stage.st1::before{animation-name:net-st1}
.stage.st2{animation-name:net-st2-c}.stage.st2::before{animation-name:net-st2}
.stage.st3{animation-name:net-st3-c}.stage.st3::before{animation-name:net-st3}
.stage.st4{animation-name:net-st4-c}.stage.st4::before{animation-name:net-st4}
.stage.st5{animation-name:net-st5-c}.stage.st5::before{animation-name:net-st5}
@keyframes net-st1{0%,94%{opacity:1}97%,100%{opacity:0}}
@keyframes net-st2{0%,21%{opacity:0}23%,94%{opacity:1}97%,100%{opacity:0}}
@keyframes net-st3{0%,41%{opacity:0}43%,94%{opacity:1}97%,100%{opacity:0}}
@keyframes net-st4{0%,61%{opacity:0}63%,94%{opacity:1}97%,100%{opacity:0}}
@keyframes net-st5{0%,81%{opacity:0}83%,94%{opacity:1}97%,100%{opacity:0}}
@keyframes net-st1-c{0%,94%{color:#fff}97%,100%{color:rgba(245,240,237,.66)}}
@keyframes net-st2-c{0%,21%{color:rgba(245,240,237,.66)}23%,94%{color:#fff}97%,100%{color:rgba(245,240,237,.66)}}
@keyframes net-st3-c{0%,41%{color:rgba(245,240,237,.66)}43%,94%{color:#fff}97%,100%{color:rgba(245,240,237,.66)}}
@keyframes net-st4-c{0%,61%{color:rgba(245,240,237,.66)}63%,94%{color:#fff}97%,100%{color:rgba(245,240,237,.66)}}
@keyframes net-st5-c{0%,81%{color:rgba(245,240,237,.66)}83%,94%{color:#fff}97%,100%{color:rgba(245,240,237,.66)}}
/* the line: full length (80% of the track, the last stage) scaled from the right edge, a quarter per stage */
.pipe-fill{width:80%;transform-origin:100% 50%;transform:scaleX(0);animation-name:net-pipe-fill}
@keyframes net-pipe-fill{0%{transform:scaleX(0);opacity:1}12%{transform:scaleX(0)}22%,32%{transform:scaleX(.25)}42%,52%{transform:scaleX(.5)}62%,72%{transform:scaleX(.75)}82%,94%{transform:scaleX(1);opacity:1}97%{transform:scaleX(1);opacity:0}98%,100%{transform:scaleX(0);opacity:0}}
/* the dot: moved in track widths (cqw, the track is its container); a browser without them keeps home.css's `right` */
@supports (width:1cqw){
.pipe-track{container-type:inline-size}
.pipe-dot{animation-name:net-pipe-dot}
@keyframes net-pipe-dot{0%{transform:translateX(0);opacity:1}12%{transform:translateX(0)}22%,32%{transform:translateX(-20cqw)}42%,52%{transform:translateX(-40cqw)}62%,72%{transform:translateX(-60cqw)}82%,92%{transform:translateX(-80cqw);opacity:1}95%{transform:translateX(-80cqw);opacity:0}97%{transform:translateX(0);opacity:0}100%{transform:translateX(0);opacity:1}}
}

/* off screen (the phone page scrolls past the hero and the feature map) network.js marks the block and its loops
   pause; a hidden tab is paused by the browser itself */
.net-still,.net-still *,.net-still *::before{animation-play-state:paused!important}

/* phones: a lighter blur behind the glass, the other filters as they are. home.css (6px, the hub 14px, the fixed nav
   18px) only on the home page, base.css (8px) on the others; the glass reads the same at that size. */
@media (max-width:760px){
.lg-fx{-webkit-backdrop-filter:blur(5px) saturate(1.6) brightness(1.05);backdrop-filter:blur(5px) saturate(1.6) brightness(1.05)}
body:has(.home) .lg-fx{-webkit-backdrop-filter:blur(4px) saturate(1.7) brightness(1.06);backdrop-filter:blur(4px) saturate(1.7) brightness(1.06)}
body:has(.home) .hub .lg-fx{-webkit-backdrop-filter:blur(8px) saturate(1.15) brightness(.5);backdrop-filter:blur(8px) saturate(1.15) brightness(.5)}
body:has(.home) .nav .lg-fx{-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3)}
}
/* contact page (network.js initContact): the error line above the form's buttons, and the honeypot people never see */
.net-contact-error{margin:0 0 12px;padding:10px 14px;border-radius:14px;font-size:13.5px;line-height:1.8;color:#FFB4BC;background:rgba(238,34,59,.12);box-shadow:inset 0 0 0 1px rgba(238,34,59,.35)}
.net-hp{position:absolute!important;inset-inline-start:-10000px;width:1px;height:1px;overflow:hidden;opacity:0}
/* network:end */