/* =========================================================================
   Layout — macro structure of the page. Component look-and-feel (buttons,
   cards, chips, forms) lives in components.css; this file only positions
   things.
   ========================================================================= */

/* ---------- Nav ---------- */
header.nav{
  position:fixed; top:0; left:0; right:0; z-index:200; height:var(--nav-h);
  padding-top:var(--sat);
  padding-left:var(--sal);
  padding-right:var(--sar);
  display:flex; align-items:center;
  background:var(--bg); /* fallback for browsers without color-mix() */
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  max-width:100vw;
  overflow-x:clip;
}
.nav-scroll-progress{
  position:absolute; bottom:-1px; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--accent), var(--accent-strong));
  transform-origin:0 50%; transform:scaleX(0);
  box-shadow:0 0 10px var(--accent-glow);
  pointer-events:none; z-index:205;
}
.nav-inner{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-inline:clamp(14px, 3.5vw, 36px);
}
.nav-links{ display:none; list-style:none; margin:0; padding:0; gap:clamp(6px, 1.05vw, 16px); align-items:center; justify-content:center; }
.nav-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.nav-actions .lang-toggle,
header.nav .lang-toggle{ display:none !important; }
.nav-actions .nav-cta,
header.nav .nav-cta{ display:none !important; }
.nav-toggle{
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  width:38px;
  height:38px;
  padding:0;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--surface);
  cursor:pointer;
  flex-shrink:0;
  gap:5px;
  transition:border-color .2s var(--ease), background .2s var(--ease), transform .15s var(--ease);
}
.nav-toggle:hover{
  border-color:var(--text-faint);
  background:var(--surface-2);
}
.nav-toggle:active{
  transform:scale(0.95);
}

.mobile-menu-backdrop{
  position:fixed; inset:0; top:var(--nav-h);
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; visibility:hidden;
  transition:opacity .25s var(--ease), visibility .25s;
  z-index:180;
}
.mobile-menu-backdrop.open{
  opacity:1; pointer-events:auto; visibility:visible;
}

.mobile-menu{
  position:fixed; top:var(--nav-h); left:0; right:0;
  background:var(--bg-elev);
  background:color-mix(in srgb, var(--bg-elev) 92%, transparent);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  box-shadow:0 20px 40px rgba(0,0,0,0.45);
  display:flex; flex-direction:column;
  padding:14px clamp(16px, 4vw, 32px);
  padding-bottom:calc(20px + var(--sab));
  padding-left:max(clamp(16px, 4vw, 32px), var(--sal));
  padding-right:max(clamp(16px, 4vw, 32px), var(--sar));
  gap:6px;
  max-height:calc(100svh - var(--nav-h));
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  transform:translateY(-14px); opacity:0; pointer-events:none; visibility:hidden;
  transition:transform .25s var(--ease), opacity .25s var(--ease), visibility .25s;
  z-index:190;
}
.mobile-menu.open{
  transform:translateY(0); opacity:1; pointer-events:auto; visibility:visible;
}
body.nav-open{
  overflow:hidden;
}

@media(min-width:900px){
  header.nav .nav-inner{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    height:100%;
    max-width:min(1600px, 96vw);
    margin-inline:auto;
    gap:16px;
  }
  header.nav .brand{
    justify-self:start;
    display:inline-flex;
    align-items:center;
  }
  header.nav .nav-links{
    display:flex;
    align-items:center;
    justify-content:center;
    justify-self:center;
    margin:0 auto;
    gap:clamp(6px, 1.05vw, 16px);
  }
  header.nav .nav-actions{
    justify-self:end;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
  }
  .nav-actions .lang-toggle,
  header.nav .lang-toggle{ display:inline-flex !important; }
  .nav-actions .nav-cta,
  header.nav .nav-cta{ display:inline-flex !important; }
  .nav-toggle{ display:none; }
  .mobile-menu{ display:none; }
  .mobile-menu-backdrop{ display:none; }
}

@media(min-width:900px) and (max-width:1180px){
  header.nav .nav-links{ gap:clamp(4px, 0.75vw, 8px); }
  header.nav .nav-links a{ font-size:.76rem; gap:3px; padding:4px 2px; }
  header.nav .nav-links a .nav-icon{ width:12px; height:12px; }
  header.nav .nav-actions{ gap:6px; }
  header.nav .nav-cta{ padding:5px 10px; font-size:.78rem; }
}

@media(max-width:599px){
  .nav-inner{ gap:10px; padding-inline:16px; }
  .nav-actions{ gap:8px; }
  .brand{ font-size:1.08rem; }
  .theme-toggle{ width:38px; height:38px; }
  .nav-toggle{ width:38px; height:38px; }
}

/* ---------- Section rhythm ---------- */
.section{ 
  padding-block:clamp(64px,10vw,120px); 
  position:relative; 
  z-index:1; 
  scroll-margin-top:var(--nav-h);
  border-top: 1px solid var(--border);
  border-image: linear-gradient(90deg, transparent, var(--border) 15%, var(--border) 85%, transparent) 1;
}
#home{ border-top:none; }
.section-head{ max-width:640px; margin-bottom:clamp(36px,6vw,56px); display:flex; flex-direction:column; gap:16px; }
.section-head.center{ margin-inline:auto; text-align:center; align-items:center; }

/* ---------- Hero ---------- */
.hero-wrap{ height:320vh; height:320svh; position:relative; }
.hero-sticky{
  position:sticky; top:0; height:100vh; height:100svh;
  display:flex; flex-direction:column; justify-content:space-between;
  padding-top:var(--nav-h); padding-bottom:0;
  overflow:hidden;
}
.hero-grid{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(6px, 1.8svh, 14px);
  text-align:center; flex:1; min-height:0; justify-content:space-evenly;
  width:100%; position:relative; z-index:1;
  padding-top:4px;
}
.hero-visual{
  position:relative;
  width:100vw;
  max-width:100vw;
  margin-inline:calc(50% - 50vw);
  height:clamp(190px, 32svh, 280px);
  display:flex; align-items:flex-end; justify-content:center; flex-shrink:0;
  margin-top:0; margin-bottom:0;
}
.hero-bottom-bar{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  width:100%; position:relative; z-index:3;
  padding-bottom:max(12px, var(--sab));
  flex-shrink:0;
}
.hero-cta{
  display:flex; gap:10px; justify-content:center;
  width:100%; max-width:330px; margin:0 auto;
}
.scrub-track{ position:absolute; right:18px; top:50%; transform:translateY(-50%); width:2px; height:120px; background:var(--border); border-radius:2px; display:none; }

@media(min-width:960px){
  .hero-sticky .container{ max-width:min(1860px, 96vw); padding-inline:clamp(20px, 3vw, 56px); }
  .hero-grid{
    display:grid;
    grid-template-columns:minmax(280px, 1.15fr) min(760px, 44vw) minmax(280px, 1fr);
    align-items:center;
    text-align:left;
    column-gap:clamp(18px, 2.2vw, 36px);
    width:100%;
    height:calc(100vh - var(--nav-h));
    height:calc(100svh - var(--nav-h));
    padding-top:0;
  }
  .hero-text-left{ min-width:0; width:100%; text-align:left; position:relative; z-index:10; }
  .hero-text-right{ min-width:0; width:100%; text-align:left; margin-left:auto; position:relative; z-index:10; }
  .hero-visual{
    width:100%;
    max-width:min(760px, 44vw);
    height:min(80vh, 750px);
    height:min(80svh, 750px);
    margin:0 auto;
    margin-inline:auto;
    flex-shrink:0;
    align-self:flex-end;
    margin-bottom:0;
    position:relative;
    z-index:1;
    transform:none !important;
  }
  .hero-bottom-bar{
    position:absolute;
    bottom:28px;
    left:0;
    right:0;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    pointer-events:none;
    z-index:3;
    padding-bottom:0;
  }
  .hero-bottom-bar *{ pointer-events:auto; }
  .hero-hint{ text-align:left; }
  .hero-cta{
    margin:0;
    margin-left:auto;
    max-width:none;
    width:auto;
    display:flex;
    gap:14px;
    justify-content:flex-end;
    align-items:center;
  }
  .hero-cta .btn{
    flex:0 0 auto;
    width:auto;
    padding:12px 26px;
    font-size:.9rem;
    min-height:auto;
  }
  .scrub-track{ display:block; }
}

/* ---------- About ---------- */
.about-grid{ display:grid; gap:48px; align-items:center; }
.about-visual{ display:flex; justify-content:center; }
@media(min-width:860px){ .about-grid{ grid-template-columns:min(290px, 32vw) 1fr; gap:clamp(36px, 5vw, 64px); } }

/* ---------- Projects ---------- */
.projects-viewport{ position:relative; display:flex; align-items:center; }
.projects-track{
  display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:24px calc(50% - (min(360px, 82vw) / 2)); scrollbar-width:none; width:100%;
}
.projects-track::-webkit-scrollbar{ display:none; }

/* ---------- Roadmap / Certifications grids ---------- */
.roadmap-grid{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.cert-grid{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }

/* ---------- FAQ (GEO-friendly Q&A block) ---------- */
.faq-list{ display:flex; flex-direction:column; gap:12px; max-width:760px; margin-inline:auto; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; gap:36px; }
.contact-info{ display:flex; flex-direction:column; gap:20px; }
.contact-links{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; margin-top:16px;
}
.contact-links a:nth-child(odd):last-child{
  grid-column:span 2;
}
.form-row{ display:grid; gap:14px; grid-template-columns:1fr; }

@media(min-width:600px){
  .form-row{ grid-template-columns:1fr 1fr; }
}

@media(min-width:900px){
  .contact-grid{ grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
  .contact-links{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
  .contact-links a:last-child{ grid-column:auto; }
}

@media(max-width:899px){
  .contact-section{ padding-block:clamp(44px, 8vw, 72px); }
  .contact-grid{ display:flex; flex-direction:column; gap:24px; }
  .contact-info{ display:contents; }
  .contact-header{ order:1; }
  .contact-links{ order:2; margin-top:14px; margin-bottom:4px; }
  .contact-form{ order:3; }
  .payload-preview{ order:4; margin-top:10px; }
}

/* ---------- Footer ---------- */
footer.footer{ border-top:1px solid var(--border); padding-top:clamp(48px,8vw,80px); position:relative; z-index:1; overflow:hidden; }
.footer-top{ display:grid; gap:28px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); padding-bottom:40px; }
.footer-bottom{
  display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; justify-content:space-between;
  padding-top:28px; padding-bottom:calc(28px + var(--sab));
  border-top:1px solid var(--border); margin-top:24px; font-size:.82rem; color:var(--text-faint);
}

/* ---------- Website Entrance Choreography (Cross-Dissolve) ---------- */
/*
 * While body.lock is active, site elements are invisible behind the loader.
 * No transitions — they must NOT animate while hidden behind the opaque loader.
 */
body.lock header.nav{
  opacity:0;
  transform:translateY(-30px);
}
body.lock .hero-visual{
  opacity:0;
  transform:translateY(40px) scale(0.96);
  filter:blur(8px);
}
body.lock .hero-text-left{
  opacity:0;
  transform:translateY(50px);
}
body.lock .hero-text-right{
  opacity:0;
  transform:translateY(50px);
}
body.lock .hero-bottom-bar{
  opacity:0;
  transform:translateY(30px);
}

/*
 * Cross-Dissolve: body has BOTH .lock AND .site-reveal at the same time.
 * These compound selectors have HIGHER specificity than body.lock alone,
 * so they override the hidden state and add smooth transitions.
 * The loader is fading out on top (opacity 1→0) while these fade in underneath.
 */
body.lock.site-reveal header.nav,
body.site-reveal header.nav{
  opacity:1;
  transform:translateY(0);
  transition:opacity .8s ease,
             transform .8s cubic-bezier(0.16, 1, 0.3, 1);
}
body.lock.site-reveal .hero-visual,
body.site-reveal .hero-visual{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:blur(0);
  z-index:1;
  transition:opacity .9s ease .12s,
             transform 1s cubic-bezier(0.16, 1, 0.3, 1) .12s,
             filter .9s ease .12s;
}
body.lock.site-reveal .hero-text-left,
body.site-reveal .hero-text-left{
  opacity:1;
  transform:translateY(0);
  z-index:10;
  transition:opacity .8s ease .24s,
             transform .9s cubic-bezier(0.16, 1, 0.3, 1) .24s;
}
body.lock.site-reveal .hero-text-right,
body.site-reveal .hero-text-right{
  opacity:1;
  transform:translateY(0);
  z-index:10;
  transition:opacity .8s ease .38s,
             transform .9s cubic-bezier(0.16, 1, 0.3, 1) .38s;
}
body.lock.site-reveal .hero-bottom-bar,
body.site-reveal .hero-bottom-bar{
  opacity:1;
  transform:translateY(0);
  z-index:15;
  transition:opacity .8s ease .5s,
             transform .9s cubic-bezier(0.16, 1, 0.3, 1) .5s;
}

/* After all animations finish, strip transitions so scroll/resize isn't affected */
body.site-ready header.nav{
  opacity:1;
  transform:none;
  filter:none;
  transition:none;
}
body.site-ready .hero-visual{
  opacity:1;
  transform:none;
  filter:none;
  transition:none;
  z-index:1;
}
body.site-ready .hero-text-left,
body.site-ready .hero-text-right{
  opacity:1;
  transform:none;
  filter:none;
  transition:none;
  z-index:10;
}
body.site-ready .hero-bottom-bar{
  opacity:1;
  transform:none;
  filter:none;
  transition:none;
  z-index:15;
}

/* =========================================================================
   Bidirectional & RTL Layout Adaptations ([dir="rtl"])
   ========================================================================= */
html[dir="rtl"]{
  direction:rtl;
  text-align:right;
}

html[dir="rtl"] body{
  font-family:var(--font-persian);
}

/* Nav & Header */
html[dir="rtl"] .nav-cta svg{
  margin-right:0 !important;
  margin-left:6px !important;
}
html[dir="rtl"] .nav-ext-arrow,
html[dir="rtl"] .forge-launch-arrow{
  transform:scaleX(-1);
}
html[dir="rtl"] .forge-meta{
  text-align:right;
}
html[dir="rtl"] .hero-forge-banner:hover .forge-launch-arrow{
  transform:translate(-3px, -3px) scaleX(-1);
}

/* Hero Section */
@media(min-width:960px){
  html[dir="rtl"] .hero-grid{
    text-align:right;
  }
  html[dir="rtl"] .hero-text-left{
    text-align:right;
  }
  html[dir="rtl"] .hero-text-right{
    text-align:right;
    margin-left:0;
    margin-right:auto;
  }
  html[dir="rtl"] .hero-hint{
    text-align:right;
  }
  html[dir="rtl"] .hero-cta{
    margin-left:0;
    margin-right:auto;
    justify-content:flex-start;
  }
  html[dir="rtl"] .scrub-track{
    right:auto;
    left:18px;
  }
}

/* Real code / payloads stay strictly LTR */
html[dir="rtl"] .payload-preview,
html[dir="rtl"] pre,
html[dir="rtl"] code,
html[dir="rtl"] .roadmap-index,
html[dir="rtl"] .lang-code{
  direction:ltr;
  unicode-bidi:isolate;
}
html[dir="rtl"] .payload-preview{
  text-align:left;
}

/* Persian text elements with .mono class keep proper RTL reading flow */
html[dir="rtl"] .loader-role,
html[dir="rtl"] .hero-hi,
html[dir="rtl"] .hero-tag,
html[dir="rtl"] .hero-hint,
html[dir="rtl"] .forge-banner-sub,
html[dir="rtl"] .cert-meta{
  direction:rtl;
  unicode-bidi:isolate;
}

/* Persian typography reset: prevent letter-spacing from breaking cursive joins */
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .hero-hi,
html[dir="rtl"] .hero-tag,
html[dir="rtl"] .hero-hint,
html[dir="rtl"] .chip,
html[dir="rtl"] .stat-label,
html[dir="rtl"] .nav-link,
html[dir="rtl"] .loader-row,
html[dir="rtl"] .loader-role,
html[dir="rtl"] .loader-bottom,
html[dir="rtl"] .cert-meta,
html[dir="rtl"] .forge-banner-sub,
html[dir="rtl"] .field label,
html[dir="rtl"] .btn{
  letter-spacing:0;
  text-transform:none;
}

/* Cards & Content Alignment */
html[dir="rtl"] .about-content{ text-align:right; }
html[dir="rtl"] .section-head.center{ text-align:center; }
html[dir="rtl"] .roadmap-card{ text-align:right; }
html[dir="rtl"] .cert-card{ text-align:right; }
html[dir="rtl"] .project-card{ text-align:right; }
html[dir="rtl"] .metric-box{ text-align:right; }
html[dir="rtl"] .metric-label,
html[dir="rtl"] .metric-desc{ letter-spacing:0; }
html[dir="rtl"] .faq-item summary{ text-align:right; }
html[dir="rtl"] .contact-info{ text-align:right; }
html[dir="rtl"] .contact-form{ text-align:right; }
html[dir="rtl"] .checkbox{ text-align:right; }
html[dir="rtl"] .form-note{ text-align:right; }
html[dir="rtl"] .field input,
html[dir="rtl"] .field textarea{
  text-align:right;
  font-family:var(--font-persian);
}
html[dir="rtl"] .field input[type="email"]{
  direction:ltr;
  text-align:right;
}
html[dir="rtl"] .field input[type="email"]:focus,
html[dir="rtl"] .field input[type="email"]:not(:placeholder-shown){
  text-align:left;
}
html[dir="rtl"] .footer-top{ text-align:right; }
html[dir="rtl"] .footer-bottom{ text-align:right; }