/* Mohsenvision shared design system and redesign layer v2.0 */
:root {
  --brand-black: #1b1b19;
  --brand-charcoal: #1b1b19;
  --brand-surface: #252522;
  --brand-surface-2: #30302b;
  --brand-white: #f4f1e8;
  --brand-yellow: #b08a55;
  --brand-yellow-bright: #c7a878;
  --brand-gold-deep: #8f6d43;
  --brand-stone: #d0c6b4;
  --brand-muted: #aaa398;
  --brand-olive: #646158;
  --brand-border: rgba(244,241,232,.16);
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --content-max: 1440px;
  --content-gutter: clamp(1.25rem, 5vw, 5rem);
  --radius-control: 0;
  --ease-editorial: cubic-bezier(.22,.61,.36,1);
  --duration-fast: 180ms;
  --duration-standard: 420ms;
  --duration-slow: 720ms;
  --font-display: "Comfortaa", "Vazirmatn", system-ui, sans-serif;
  --font-body: "Comfortaa", "Vazirmatn", system-ui, sans-serif;
  --font-utility: "Comfortaa", "Vazirmatn", system-ui, sans-serif;
}

html { background: var(--brand-black); scroll-behavior: smooth; }
body {
  background: var(--brand-black);
  color: var(--brand-white);
  font-family: var(--font-body);
  text-rendering: optimizeLegibility;
}
body::before { opacity: .018; }

/* Shared layout and editorial hierarchy */
.section-inner { width: min(100%, var(--content-max)); margin-inline: auto; padding-inline: var(--content-gutter); }
section { position: relative; isolation: isolate; }
body { overflow-x: clip; }
#about, #education, #work, #photography, #services, #contact { content-visibility: auto; contain-intrinsic-size: 800px; }
.section-label { color: var(--brand-yellow); font-family: var(--font-utility); font-size: 0.61rem; letter-spacing: .14em; }
.section-title {
  max-inline-size: 11ch;
  color: var(--brand-white);
  font-family: var(--font-display);
  font-size: clamp(2.12rem, 4.32vw, 4.5rem);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.02;
  text-wrap: balance;
}
.section-title em, .hero-title em { color: var(--brand-yellow); font-style: normal; }
.about-text, .edu-desc, .service-desc, .contact-intro { color: #c9c4b9; }

/* Hero: photographic, typographic, and brand-led */
#hero { min-height: max(720px, 100svh); display: grid; place-items: center; padding: 0 var(--content-gutter); }
.hero-bg {
  background: linear-gradient(90deg, rgba(27,27,25,.98) 0%, rgba(27,27,25,.76) 43%, rgba(27,27,25,.18) 100%), linear-gradient(180deg, rgba(27,27,25,.12), rgba(27,27,25,.74)), url('/images/mohsen-portrait.jpg') 78% 28% / cover no-repeat;
  filter: saturate(.72) contrast(1.08);
  transform: scale(1.02);
}
.hero-bg video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center; filter: saturate(.72) contrast(1.08); }
.hero-bg::after { background: linear-gradient(90deg, rgba(27,27,25,.62), rgba(27,27,25,.12) 58%, rgba(27,27,25,.28)); }
.hero-bg::before { background: linear-gradient(120deg, rgba(176,138,85,.08), transparent 45%); animation: none; }
.hero-line { top: auto; bottom: 23%; background: linear-gradient(90deg, var(--brand-yellow), rgba(176,138,85,.15), transparent); opacity: .65; }
.hero-content { max-width: 780px; width: min(100%, 52rem); margin-inline: auto; text-align: center; }
.hero-eyebrow { animation: heroReveal .9s var(--ease-editorial) .1s both; }
.hero-title { animation: heroReveal 1s var(--ease-editorial) .35s both; }
.hero-subtitle { animation: heroReveal .8s var(--ease-editorial) .85s both; }
.hero-cta { animation: heroReveal .8s var(--ease-editorial) 1.2s both; }
.hero-eyebrow { color: var(--brand-yellow); letter-spacing: .24em; margin-bottom: 1.5rem; }
.hero-title { font-family: var(--font-display); font-size: clamp(2.39rem, 5.22vw, 5.22rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.02; }
.hero-title em { display: block; }
.hero-subtitle { max-width: 30rem; margin: 1.25rem auto 0; color: var(--brand-white); font-size: clamp(0.77rem, 1.22vw, 0.95rem); font-weight: 300; letter-spacing: .01em; }
.hero-cta { justify-content: center; margin-top: 1.5rem; gap: .75rem; }
.hero-cta a { min-inline-size: 8rem; padding: .7rem 1rem; font-size: 0.7rem; }
.hero-scroll { color: var(--brand-yellow); font-family: var(--font-utility); letter-spacing: .18em; }
.hero-counter { color: rgba(247,245,239,.7); }
@keyframes heroReveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* Navigation and language controls */
nav { padding: 1.5rem var(--content-gutter); background: linear-gradient(180deg, rgba(27,27,25,.9), transparent); }
nav.scrolled { padding: 1rem var(--content-gutter); background: rgba(27,27,25,.94); border-bottom-color: var(--brand-border); backdrop-filter: blur(14px); }
.nav-logo { color: var(--brand-white); font-family: var(--font-display); font-size: 1.13rem; letter-spacing: .08em; }
.nav-logo::first-letter { color: var(--brand-yellow); }
.nav-links { gap: clamp(1.25rem, 3vw, 3rem); }
.nav-links a { color: rgba(247,245,239,.72); letter-spacing: .16em; }
.nav-links a:hover, .footer-links a:hover { color: var(--brand-yellow); }
.lang-toggle, .lang-toggle-mobile { border-color: var(--brand-border); }
.lang-toggle a.active, .lang-toggle-mobile a.active { background: var(--brand-yellow); color: var(--brand-black); }
.nav-hamburger { min-block-size: 2.75rem; min-inline-size: 2.75rem; align-items: center; justify-content: center; }

/* Sections */
#about, #work, #services { background: var(--brand-black); }
#education, #photography, #contact { background: var(--brand-charcoal); }
#about, #work, #photography, #services { padding-block: clamp(6rem, 12vw, 11rem); }
#education { padding-block: clamp(5rem, 9vw, 8rem); }
#contact { padding-block: clamp(6rem, 11vw, 10rem) clamp(4rem, 8vw, 7rem); }
.section-label { margin-bottom: 1.25rem; }
.section-title { margin-bottom: clamp(3rem, 6vw, 5rem); }

/* About and education */
.about-portrait { border: 1px solid var(--brand-border); box-shadow: 18px 18px 0 rgba(176,138,85,.08); }
.about-portrait img { filter: saturate(.78) contrast(1.05); }
.about-text { font-size: clamp(0.83rem, 1.08vw, 0.92rem); line-height: 1.8; }
.about-text strong { color: var(--brand-white); font-weight: 500; }
.stat-num { color: var(--brand-yellow); font-family: var(--font-display); font-size: clamp(2.25rem, 4.5vw, 4.05rem); line-height: .9; }
.stat-label, .memberships-title { color: var(--brand-muted); font-family: var(--font-utility); }
.membership-item { border-bottom-color: var(--brand-border); color: #d5d0c6; }
.edu-item { border-bottom-color: var(--brand-border); }
.edu-year { color: var(--brand-yellow); }
.edu-degree { color: var(--brand-white); font-family: var(--font-display); font-size: clamp(1.08rem, 1.71vw, 1.62rem); letter-spacing: .01em; line-height: 1.1; }
.edu-institution { color: var(--brand-stone); }
.edu-desc { line-height: 1.75; }
.edu-item::before { background: var(--brand-yellow); }

/* Work, tabs, and portfolio rows */
.work-tabs { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--brand-yellow) transparent; }
.work-tab { color: var(--brand-muted); border-bottom-color: transparent; white-space: nowrap; }
.work-tab.active, .work-tab:hover { color: var(--brand-white); border-bottom-color: var(--brand-yellow); }
.film-item { border-bottom-color: var(--brand-border); transition: background-color var(--duration-fast) ease, padding-inline var(--duration-fast) ease; }
.film-item:hover { background: rgba(176,138,85,.045); }
.film-year { color: var(--brand-yellow); }
.film-title { color: var(--brand-white); font-family: var(--font-display); font-size: clamp(0.95rem, 1.4vw, 1.26rem); line-height: 1.2; }
.film-title span + span { color: var(--brand-muted); }
.film-role { border-color: var(--brand-border); color: var(--brand-stone); }
.film-role.dir { border-color: rgba(176,138,85,.45); color: var(--brand-yellow); }

/* Gallery and image treatment */
.photo-grid { gap: 4px; }
.photo-card { background: var(--brand-surface); }
.photo-card img { filter: saturate(.82) contrast(1.05); }
.photo-card:hover img, .photo-card:focus-within img { filter: saturate(1) contrast(1.08); }
.photo-overlay { background: linear-gradient(0deg, rgba(27,27,25,.9), transparent 62%); padding: 1.5rem; }
.photo-overlay-text { color: var(--brand-yellow); }

/* Services and contact */
.services-grid { border-color: var(--brand-border); background: var(--brand-border); }
.service-card { background: var(--brand-charcoal); padding: clamp(2rem, 4vw, 3.5rem); }
.service-card:hover { background: var(--brand-surface); }
.service-icon { color: var(--brand-yellow); }
.service-num { color: var(--brand-yellow); }
.service-name { color: var(--brand-white); font-family: var(--font-display); font-size: clamp(1.31rem, 1.98vw, 1.8rem); line-height: 1.05; }
.service-desc { font-size: 0.83rem; line-height: 1.7; }
.contact-link { border-color: var(--brand-border); }
.contact-link:hover { border-color: var(--brand-yellow); background: rgba(176,138,85,.06); }
.contact-link-icon { color: var(--brand-yellow); }
.contact-link-value { color: var(--brand-white); }
.form-input, .form-textarea { background: var(--brand-surface); border-color: var(--brand-border); color: var(--brand-white); }
.form-submit { background: var(--brand-yellow); color: var(--brand-black); }
.form-success { border-color: var(--brand-yellow); color: var(--brand-yellow); background: rgba(176,138,85,.08); }

/* Footer */
footer { border-top-color: var(--brand-border); padding-inline: var(--content-gutter); }
.footer-name { color: var(--brand-yellow); font-family: var(--font-display); font-size: 1.26rem; letter-spacing: .08em; }
.footer-copy { color: var(--brand-muted); }

/* Shared controls, media, and accessibility */
:where(a, button, input, textarea, select):focus-visible { outline: 2px solid var(--brand-yellow-bright); outline-offset: 4px; }
.nav-hamburger:focus-visible { outline: 2px solid var(--brand-yellow-bright); outline-offset: 3px; }
.video-frame, .video-embed { background: var(--brand-surface); overflow: hidden; position: relative; aspect-ratio: 16 / 9; }
.video-frame img, .video-frame video, .video-embed iframe { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; border: 0; }

/* RTL is an authored layout, not a simple text flip. */
html[dir="rtl"] body { font-family: "B Zar", "B Zarh", Tahoma, "Vazirmatn", sans-serif; }
html[dir="rtl"] .nav-logo, html[dir="rtl"] .film-year, html[dir="rtl"] .service-num, html[dir="rtl"] .footer-copy { direction: ltr; }
html[dir="rtl"] .hero-content { margin-inline: 0 0; text-align: start; }
html[dir="rtl"] .hero-content { margin-inline: auto; text-align: center; }
html[dir="rtl"] .hero-bg { background: linear-gradient(270deg, rgba(27,27,25,.98) 0%, rgba(27,27,25,.76) 43%, rgba(27,27,25,.18) 100%), linear-gradient(180deg, rgba(27,27,25,.12), rgba(27,27,25,.74)), url('/images/mohsen-portrait.jpg') 22% 28% / cover no-repeat; }
html[dir="rtl"] .hero-line { background: linear-gradient(270deg, var(--brand-yellow), rgba(176,138,85,.15), transparent); }
html[dir="rtl"] .hero-title, html[dir="rtl"] .section-title { font-family: "B Zar", "B Zarh", Tahoma, "Vazirmatn", sans-serif; font-weight: 600; letter-spacing: 0; }
html[dir="rtl"] .hero-title em, html[dir="rtl"] .section-title em { font-style: normal; }
html[dir="rtl"] .hero-title em { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] .hero-scroll { inset-inline: auto 28px; }
html[dir="rtl"] .form-input,
html[dir="rtl"] .form-textarea { direction: rtl; text-align: start; }
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"] { direction: ltr; text-align: start; }
html[dir="rtl"] .film-item { grid-template-columns: auto 1fr 80px; }
html[dir="rtl"] .film-year { grid-column: 3; }
html[dir="rtl"] .film-title { grid-column: 2; }
html[dir="rtl"] .film-role { grid-column: 1; }
html[dir="rtl"] .edu-item { grid-template-columns: 1fr 140px; }
html[dir="rtl"] .edu-year { grid-column: 2; }
html[dir="rtl"] .edu-body { grid-column: 1; grid-row: 1; }
html[dir="rtl"] .edu-item::before { inset-inline: auto 155px; }

@media (hover: none), (pointer: coarse) {
  body { cursor: auto; }
  .cursor, .cursor-ring { display: none; }
  .photo-overlay { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .cursor, .cursor-ring { display: none; }
  .hero-bg video { display: none; }
  .hero-eyebrow, .hero-title, .hero-subtitle, .hero-cta { animation: none; opacity: 1; transform: none; }
  body { cursor: auto; }
}
@media (max-width: 900px) {
  :root { --content-gutter: 1.75rem; }
  #hero { min-height: 760px; }
  .hero-title { font-size: clamp(2.7rem, 8.1vw, 4.5rem); }
  html[dir="rtl"] .edu-item { grid-template-columns: 1fr 90px; }
  html[dir="rtl"] .edu-item::before { inset-inline-end: 85px; }
}
@media (max-width: 600px) {
  :root { --content-gutter: 1.25rem; }
  #hero { min-height: max(620px, 100svh); padding-bottom: 0; }
  .hero-bg { background-position: 68% 22%; }
  .hero-eyebrow { font-size: 0.52rem; letter-spacing: .15em; }
  .hero-title { font-size: clamp(2.16rem, 9.9vw, 3.78rem); }
  .hero-cta { align-items: stretch; gap: .6rem; }
  .hero-cta a { text-align: center; }
  .section-title { max-inline-size: 13ch; }
  .work-tab { padding-inline: 1rem; }
  html[dir="rtl"] .hero-bg { background-position: 32% 22%; }
  html[dir="rtl"] .film-item { grid-template-columns: 1fr 60px; }
  html[dir="rtl"] .film-year { grid-column: 2; }
  html[dir="rtl"] .film-title { grid-column: 1; }
  html[dir="rtl"] .film-role { display: none; }
  .section-inner { padding-inline: var(--content-gutter); }
  .hero-subtitle { max-inline-size: 24rem; }
  .form-actions, .hero-cta { flex-wrap: wrap; }
  .hero-cta a { min-inline-size: 7.5rem; }
}
body.menu-open { overflow: hidden; }