@charset "UTF-8";
/* ============================================================================
   main.css — CSS دست‌نویس، بدون فریم‌ورک و بدون مرحله بیلد.
   قابلیت‌های مدرن: @layer، clamp()، color-mix()، :has()، container queries،
   و logical properties برای RTL.
   ========================================================================= */

@layer tokens, base, layout, components, game, motion, utils;

/* ---------------------------------------------------------------- tokens -- */
@layer tokens {
  :root{
    --bg:#0D100E; --band:#111614; --surface:#181E1B; --surface-2:#212824;
    --line:#2C3430; --line-strong:#6B7670;
    --text:#EDF0EE; --dim:#9AA49F;
    --green:#58C89A; --green-ink:#062318;
    --orange:#E9793D; --red:#E8726A; --amber:#E8B33D; --blue:#6BA9E8;
    --grid:rgb(255 255 255 / .035);
    --glow:rgb(88 200 154 / .12);
    --tf:cubic-bezier(.22,.68,.24,1);
    --r-sm:9px; --r-md:12px; --r-lg:16px;
    --shell:1120px;
    --t-xs:clamp(.75rem,.72rem + .12vw,.8rem);
    --t-sm:clamp(.86rem,.83rem + .15vw,.92rem);
    --t-md:clamp(.97rem,.94rem + .2vw,1.06rem);
    --t-lg:clamp(1.06rem,1rem + .35vw,1.22rem);
    --t-h3:clamp(1.15rem,1.05rem + .5vw,1.35rem);
    --t-h2:clamp(1.55rem,1.25rem + 1.5vw,2.1rem);
    --t-h1:clamp(2.2rem,1.6rem + 3vw,3.3rem);
    --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem;
    --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:4.5rem;
    color-scheme:dark;
  }
  [data-theme="light"]{
    --bg:#F6F5F2; --band:#F0EFE9; --surface:#FFFFFF; --surface-2:#F3F2ED;
    --line:#E1DFD8; --line-strong:#7F8781;
    --text:#171B18; --dim:#5B635D;
    --green:#127A55; --green-ink:#FFFFFF;
    --orange:#A8501E; --red:#B23A31; --amber:#8A5B08; --blue:#1F5FA8;
    --grid:rgb(0 0 0 / .04);
    --glow:rgb(18 122 85 / .08);
    color-scheme:light;
  }
}

/* ------------------------------------------------------------------ base -- */
@layer base {
  *,*::before,*::after{box-sizing:border-box}
  *{margin:0}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-block-start:5rem}
  body{background:var(--bg);color:var(--text);
    font-family:Vazirmatn,system-ui,sans-serif;
    font-size:clamp(1rem,.97rem + .18vw,1.06rem);
    line-height:1.85;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  img,svg,canvas{display:block;max-inline-size:100%}
  img{block-size:auto}
  button,input,select,textarea{font:inherit;color:inherit}
  button{background:none;border:0;cursor:pointer}
  a{color:inherit;text-decoration:none}
  h1,h2,h3,h4{line-height:1.3;letter-spacing:-.015em;text-wrap:balance}
  h1{font-size:var(--t-h1);font-weight:800}
  h2{font-size:var(--t-h2);font-weight:800}
  h3{font-size:var(--t-h3);font-weight:700}
  p{text-wrap:pretty}
  strong{color:var(--text);font-weight:700}
  hr{border:0;border-block-start:1px solid var(--line)}
  ul{list-style:none;padding:0}
  :where(a,button,input,select,textarea,[tabindex]):focus-visible{
    outline:2px solid var(--green);outline-offset:3px;border-radius:6px}
  ::selection{background:var(--green);color:var(--green-ink)}
  ::-webkit-scrollbar{inline-size:10px}
  ::-webkit-scrollbar-track{background:var(--bg)}
  ::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
}

/* ---------------------------------------------------------------- layout -- */
@layer layout {
  .shell{max-inline-size:var(--shell);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2rem)}
  .section{padding-block:clamp(3.5rem,7vw,6rem)}
  .band{background:var(--band)}
  .rule{border-block:1px solid var(--line)}
  .grid{display:grid;gap:var(--s5)}
  @media (min-width:64rem){
    .g-7-5{grid-template-columns:7fr 5fr}
    .g-5-7{grid-template-columns:5fr 7fr}
    .g-4-8{grid-template-columns:4fr 8fr}
    .g-3{grid-template-columns:repeat(3,1fr)}
  }
  @media (min-width:48rem) and (max-width:63.99rem){ .g-3{grid-template-columns:repeat(2,1fr)} }
  .stack > * + *{margin-block-start:var(--s4)}
  .row{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
  .mt-2{margin-block-start:var(--s2)} .mt-3{margin-block-start:var(--s3)}
  .mt-4{margin-block-start:var(--s4)} .mt-5{margin-block-start:var(--s5)}
  .mt-6{margin-block-start:var(--s6)} .mt-7{margin-block-start:var(--s7)}
}

/* ------------------------------------------------------------ components -- */
@layer components {
  .eyebrow{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.7rem;
    letter-spacing:.15em;text-transform:uppercase;color:var(--dim);
    direction:ltr;display:inline-flex;gap:.5rem;align-items:center}
  .eyebrow::before{content:"";inline-size:16px;block-size:1px;background:var(--orange);opacity:.75}
  .mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-feature-settings:"tnum";
    direction:ltr;display:inline-block}
  .dim{color:var(--dim)} .accent{color:var(--orange)} .ok{color:var(--green)}
  .t-sm{font-size:var(--t-sm)} .t-xs{font-size:var(--t-xs)}

  .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
    padding:clamp(1.1rem,3vw,1.75rem);
    transition:transform .35s var(--tf),border-color .35s var(--tf),box-shadow .35s var(--tf)}
  .card--hover:hover{transform:translateY(-3px);border-color:var(--line-strong);
    box-shadow:0 18px 40px -26px rgb(0 0 0 / .6)}
  .card--live{border-color:var(--green)}

  .chip{display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--line);
    border-radius:var(--r-sm);padding:.28rem .6rem;font-size:var(--t-xs);
    color:var(--dim);background:var(--surface-2)}
  .chip--live{border-color:var(--green);color:var(--green)}

  .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
    font-weight:600;border-radius:var(--r-md);padding:.75rem 1.35rem;min-block-size:48px;
    font-size:var(--t-sm);
    transition:transform .18s var(--tf),background .2s,border-color .2s,color .2s,filter .2s}
  .btn:active{transform:translateY(1px)}
  .btn--primary{background:var(--green);color:var(--green-ink)}
  .btn--primary:hover{filter:brightness(1.08)}
  .btn--ghost{border:1px solid var(--line-strong)}
  .btn--ghost:hover{border-color:var(--green);color:var(--green)}
  .btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}
  .btn svg{inline-size:1rem;block-size:1rem;flex:none}
  .btn--wide{inline-size:100%}

  .social{display:inline-flex;align-items:center;gap:.5rem;min-block-size:48px;
    padding:.7rem 1rem;border-radius:var(--r-md);border:1px solid var(--line-strong);
    font-weight:600;font-size:var(--t-sm);
    transition:border-color .25s,color .25s,transform .25s var(--tf)}
  .social:hover{border-color:var(--green);color:var(--green);transform:translateY(-2px)}
  .social svg{inline-size:18px;block-size:18px;flex:none}

  .field{inline-size:100%;border-radius:var(--r-md);padding:.75rem 1rem;
    font-size:var(--t-sm);min-block-size:48px;background:var(--surface-2);
    border:1px solid var(--line-strong);transition:border-color .2s}
  .field:focus{border-color:var(--green);outline:none}
  .field::placeholder{color:var(--dim);opacity:.85}
  textarea.field{min-block-size:auto;resize:vertical;line-height:1.8}
  .lbl{display:block;font-size:var(--t-sm);font-weight:600;margin-block-end:.5rem}
  .err{margin-block-start:.5rem;font-size:var(--t-xs);color:var(--red)}
  .fieldset:has(.field[aria-invalid="true"]) .lbl{color:var(--red)}
  .field[aria-invalid="true"]{border-color:var(--red)}
  .form-grid{display:grid;gap:var(--s5)}
  @media (min-width:40rem){.form-grid{grid-template-columns:1fr 1fr}.col-2{grid-column:span 2}}

  .hdr{position:fixed;inset-block-start:0;inset-inline:0;z-index:40;
    border-block-end:1px solid var(--line);backdrop-filter:blur(12px);
    background:color-mix(in srgb, var(--bg) 84%, transparent)}
  .hdr__in{block-size:64px;display:flex;align-items:center;gap:var(--s4)}
  .hdr__mark{inline-size:36px;block-size:36px;border-radius:var(--r-md);
    border:1px solid var(--line);background:var(--surface-2);
    display:grid;place-items:center;font-weight:700}
  .nav{display:none;margin-inline:auto;gap:.25rem;font-size:var(--t-sm)}
  .nav a{padding:.5rem .75rem;border-radius:var(--r-sm);color:var(--dim);transition:color .2s}
  .nav a:hover,.nav a[aria-current="true"]{color:var(--text)}
  .hdr__end{display:flex;align-items:center;gap:.5rem;margin-inline-start:auto}
  @media (min-width:64rem){.nav{display:flex}.hdr__burger{display:none}.hdr__end{margin-inline-start:0}}
  .icon-btn{inline-size:40px;block-size:40px;border-radius:var(--r-md);
    border:1px solid var(--line);display:grid;place-items:center;color:var(--dim);transition:color .2s}
  .icon-btn:hover{color:var(--text)}
  .menu{display:none;border-block-start:1px solid var(--line);background:var(--band)}
  .menu[data-open="true"]{display:block}
  .menu nav{display:grid;grid-template-columns:1fr 1fr;gap:.25rem;padding-block:.75rem}
  .menu a{padding:.75rem;border-radius:var(--r-sm)}
  .menu a:hover{background:var(--surface-2)}

  #progress{position:fixed;inset-block-start:0;inset-inline:0;block-size:2px;z-index:50;
    transform:scaleX(0);transform-origin:right;
    background:linear-gradient(90deg,var(--orange),var(--green))}

  .skip{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}
  .skip:focus{position:fixed;inset-block-start:.75rem;inset-inline-end:.75rem;z-index:60;
    inline-size:auto;block-size:auto;clip-path:none;background:var(--green);
    color:var(--green-ink);padding:.5rem 1rem;border-radius:var(--r-sm)}

  .prose{max-inline-size:34rem}
  .prose p{margin-block-start:1.35em;line-height:2.05;font-size:var(--t-lg)}
  .prose p:first-child{margin-block-start:0}
  .prose .lead{font-size:clamp(1.1rem,1rem + .5vw,1.3rem);line-height:1.9}

  .tl{position:relative}
  .tl::before{content:"";position:absolute;inset-inline-start:9px;inset-block:10px;
    inline-size:2px;background:var(--line)}
  .tl__fill{position:absolute;inset-inline-start:9px;inset-block-start:10px;inline-size:2px;
    block-size:0;border-radius:2px;background:linear-gradient(180deg,var(--orange),var(--green));
    transition:block-size .3s linear}
  .tl__item{position:relative;padding-inline-start:2.5rem;padding-block:.85rem}
  .tl__dot{position:absolute;inset-inline-start:2px;inset-block-start:1.5rem;
    inline-size:16px;block-size:16px;border-radius:50%;background:var(--bg);
    border:2px solid var(--line);
    transition:border-color .35s,box-shadow .35s,transform .35s var(--tf)}
  .tl__item[data-lit="true"] .tl__dot{border-color:var(--green);
    box-shadow:0 0 0 5px var(--glow);transform:scale(1.1)}

  .acc{border-block-start:1px solid var(--line)}
  .acc > div{border-block-end:1px solid var(--line)}
  .acc__head{inline-size:100%;text-align:start;display:flex;gap:.9rem;align-items:center;
    padding-block:1rem;font-weight:700;font-size:var(--t-md);transition:color .25s}
  .acc__head:hover{color:var(--green)}
  .acc__head svg{inline-size:1.25rem;block-size:1.25rem;color:var(--dim);
    transition:transform .3s var(--tf)}
  .acc__head[aria-expanded="true"] svg{transform:rotate(180deg)}
  .acc__body{overflow:hidden;transition:block-size .3s var(--tf)}
  .acc__body > *{padding-block-end:1.25rem;color:var(--dim);font-size:var(--t-sm)}
}

/* -------------------------------------------------------------------- game -- */
@layer game {
  .stage{position:relative;overflow:hidden;border-radius:var(--r-lg);
    border:1px solid var(--line);background:var(--surface)}
  .stage::before{content:"";position:absolute;inset:0;pointer-events:none;
    background-image:linear-gradient(var(--grid) 1px,transparent 1px),
                     linear-gradient(90deg,var(--grid) 1px,transparent 1px);
    background-size:28px 28px;opacity:.9}
  .stage__in{position:relative;padding:clamp(1.1rem,3.5vw,2rem)}

  .hud{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);
    padding-block-end:var(--s4);border-block-end:1px solid var(--line)}
  .hud__round{font-family:"JetBrains Mono",monospace;font-size:var(--t-xs);color:var(--dim);direction:ltr}

  .meters{display:grid;gap:var(--s3);flex:1 1 22rem;min-inline-size:0}
  @media (min-width:40rem){.meters{grid-template-columns:repeat(3,1fr)}}
  .meter{display:grid;gap:.35rem}
  .meter__top{display:flex;justify-content:space-between;align-items:baseline;
    font-size:var(--t-xs);color:var(--dim)}
  .meter__val{font-family:"JetBrains Mono",monospace;font-weight:600;color:var(--text)}
  .meter__bar{block-size:8px;border-radius:99px;background:var(--surface-2);
    border:1px solid var(--line);overflow:hidden}
  .meter__fill{block-size:100%;inline-size:50%;border-radius:99px;
    background:var(--green);transition:inline-size .7s var(--tf),background .4s}
  .meter[data-state="warn"] .meter__fill{background:var(--amber)}
  .meter[data-state="bad"]  .meter__fill{background:var(--red)}
  .meter[data-bump="up"]   .meter__val{animation:bumpUp .6s var(--tf)}
  .meter[data-bump="down"] .meter__val{animation:bumpDown .6s var(--tf)}
  @keyframes bumpUp{0%{transform:translateY(0)}35%{transform:translateY(-6px);color:var(--green)}100%{transform:translateY(0)}}
  @keyframes bumpDown{0%{transform:translateY(0)}35%{transform:translateY(6px);color:var(--red)}100%{transform:translateY(0)}}

  .scene{margin-block-start:var(--s5);min-block-size:15rem}
  .scene__q{font-size:clamp(1.1rem,1rem + .7vw,1.45rem);font-weight:700;line-height:1.65;
    text-wrap:balance;max-inline-size:44rem}
  .scene__hint{margin-block-start:.6rem;font-size:var(--t-sm);color:var(--dim)}

  .choices{display:grid;gap:.7rem;margin-block-start:var(--s5)}
  .choice{display:flex;gap:.85rem;align-items:flex-start;text-align:start;
    padding:.9rem 1rem;border-radius:var(--r-md);border:1px solid var(--line);
    background:var(--surface-2);font-size:var(--t-sm);line-height:1.7;
    transition:border-color .25s,transform .25s var(--tf),background .25s}
  .choice:hover{border-color:var(--green);transform:translateX(-3px)}
  .choice__k{font-family:"JetBrains Mono",monospace;font-size:.7rem;color:var(--dim);
    padding-block-start:.25rem;flex:none}
  .choice[data-picked="true"]{border-color:var(--green);background:color-mix(in srgb,var(--green) 12%,var(--surface))}
  .choice[disabled]{opacity:.45;cursor:default;transform:none}

  .verdict{margin-block-start:var(--s4);padding:.9rem 1rem;border-radius:var(--r-md);
    border-inline-start:3px solid var(--orange);background:var(--surface-2);
    font-size:var(--t-sm);line-height:1.85;color:var(--dim)}

  .result{text-align:center;padding-block:var(--s5)}
  .result__badge{inline-size:74px;block-size:74px;border-radius:50%;margin-inline:auto;
    display:grid;place-items:center;font-size:2rem;
    background:color-mix(in srgb,var(--green) 18%,var(--surface));
    border:1px solid var(--green);animation:pop .55s var(--tf) both}
  .result[data-tone="bad"] .result__badge{background:color-mix(in srgb,var(--red) 16%,var(--surface));border-color:var(--red)}
  @keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
  .result__title{margin-block-start:var(--s4);font-size:var(--t-h3);font-weight:800}
  .result__text{margin-block-start:var(--s3);color:var(--dim);max-inline-size:34rem;
    margin-inline:auto;font-size:var(--t-sm)}
  .result__row{margin-block-start:var(--s5);display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}

  .start{text-align:center;padding-block:var(--s6)}
  .start__kbd{display:inline-flex;gap:.4rem;align-items:center;font-size:var(--t-xs);
    color:var(--dim);margin-block-start:var(--s4)}
  kbd{font-family:"JetBrains Mono",monospace;font-size:.7rem;border:1px solid var(--line-strong);
    border-radius:6px;padding:.1rem .4rem;background:var(--surface-2)}
}

/* ------------------------------------------------------------------ motion -- */
@layer motion {
  .hero{position:relative;overflow:hidden;
    padding-block:clamp(6.5rem,12vw,9rem) clamp(3rem,6vw,5rem)}
  .hero__grid{position:absolute;inset:0;pointer-events:none;
    background-image:linear-gradient(var(--grid) 1px,transparent 1px),
                     linear-gradient(90deg,var(--grid) 1px,transparent 1px);
    background-size:36px 36px;
    mask-image:radial-gradient(100% 80% at 78% 0%,#000 12%,transparent 66%);
    -webkit-mask-image:radial-gradient(100% 80% at 78% 0%,#000 12%,transparent 66%)}
  .hero__glow{position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),var(--glow),transparent 60%)}

  .mask{display:block;overflow:hidden}
  .mask > span{display:block;transform:translateY(105%);opacity:0;
    transition:transform .85s var(--tf),opacity .55s var(--tf)}
  .mask[data-in="true"] > span{transform:none;opacity:1}

  .reveal{opacity:0;transform:translateY(16px);
    transition:opacity .6s var(--tf),transform .6s var(--tf)}
  .reveal[data-in="true"]{opacity:1;transform:none}
  .stagger > *{opacity:0;transform:translateY(14px);
    transition:opacity .55s var(--tf),transform .55s var(--tf)}
  .stagger[data-in="true"] > *{opacity:1;transform:none}
  .stagger[data-in="true"] > *:nth-child(1){transition-delay:.03s}
  .stagger[data-in="true"] > *:nth-child(2){transition-delay:.1s}
  .stagger[data-in="true"] > *:nth-child(3){transition-delay:.17s}
  .stagger[data-in="true"] > *:nth-child(4){transition-delay:.24s}

  .tilt{transition:transform .5s var(--tf);transform-style:preserve-3d}
  .float{animation:float 6.5s ease-in-out infinite}
  .float:nth-child(2){animation-delay:-2.2s}
  .float:nth-child(3){animation-delay:-4.4s}
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

  .pulse-dot{inline-size:8px;block-size:8px;border-radius:50%;background:var(--green);
    box-shadow:0 0 0 0 var(--glow);animation:pulse 2.4s infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 var(--glow)}70%{box-shadow:0 0 0 12px transparent}100%{box-shadow:0 0 0 0 transparent}}

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    .reveal,.stagger > *{opacity:1;transform:none;transition:none}
    .mask > span{transform:none;opacity:1;transition:none}
    .float,.pulse-dot,.result__badge{animation:none}
    .hero__glow{display:none}
    .card--hover:hover,.social:hover,.choice:hover{transform:none}
    *{animation-duration:.001ms !important;animation-iteration-count:1 !important;
      transition-duration:.01ms !important}
  }
}

/* ------------------------------------------------------------------- utils -- */
@layer utils {
  .sr{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}
  .hidden{display:none !important}
  .center{text-align:center}
  .ratio-45{aspect-ratio:4/5;object-fit:cover}
  .ratio-916{aspect-ratio:9/16;object-fit:cover}
  .ratio-85{aspect-ratio:8/5;object-fit:cover}
  .rounded{border-radius:var(--r-lg);border:1px solid var(--line)}
  .rounded-sm{border-radius:var(--r-md);border:1px solid var(--line)}
  .divide > * + *{border-block-start:1px solid var(--line)}
  .maxw-46{max-inline-size:46ch} .maxw-38{max-inline-size:38ch}
}