/*
Theme Name: Babak Portfolio
Theme URI: https://example.com
Author: Babak
Author URI: https://example.com
Description: قالب پرتفولیوی سینمایی و تک‌صفحه‌ای برای تولیدکننده محتوای ویدئویی و طراح وب. تمام بخش‌ها (هیرو، سابقه کاری، نمونه‌کارها، مهارت‌ها، تماس) از پیشخوان وردپرس قابل ویرایش هستند.
Version: 1.0
Text Domain: babak-portfolio
*/

:root{
  --bg:#15141a;
  --bg-panel:#1d1b23;
  --bg-panel-2:#221f29;
  --fg:#f3efe7;
  --fg-dim:#a9a4ae;
  --gold:#c9a063;
  --teal:#4fa89e;
  --line:#35323d;
  --mono: 'JetBrains Mono', monospace;
  --display: 'Vazirmatn', sans-serif;
  --body: 'Vazirmatn', sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--body);
  line-height:1.7;
  overflow-x:hidden;
}
::selection{background:var(--gold); color:#15141a;}

.grain{
  position:fixed; inset:0; pointer-events:none; z-index:50;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.timecode{
  position:fixed; top:28px; left:28px; z-index:40;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  color:var(--gold); direction:ltr; display:flex; align-items:center; gap:8px;
}
.timecode .dot{width:7px; height:7px; border-radius:50%; background:#e35c4f; animation:pulse 1.4s infinite;}
@keyframes pulse{0%,100%{opacity:1} 50%{opacity:.25}}

nav.babak-nav{
  position:fixed; top:0; inset-inline:0; z-index:40;
  display:flex; justify-content:center; padding:24px;
  pointer-events:none;
}
nav.babak-nav .links{
  pointer-events:auto;
  display:flex; gap:28px;
  background:rgba(21,20,26,.6); backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:999px;
  padding:10px 24px;
  font-size:13px; color:var(--fg-dim);
}
nav.babak-nav a{color:inherit; text-decoration:none; transition:color .25s;}
nav.babak-nav a:hover{color:var(--gold);}

section{padding:140px 8vw; position:relative;}
.eyebrow{
  font-family:var(--mono); font-size:12px; color:var(--gold);
  letter-spacing:.15em; direction:ltr; display:inline-block; margin-bottom:18px;
}

/* HERO با عکس واقعی و افکت سینمایی */
.hero{
  min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  padding:0 8vw; position:relative; overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0; z-index:-2;
  background-size:cover; background-position:center;
  animation:kenburns 22s ease-in-out infinite alternate;
  filter:grayscale(.15) contrast(1.05);
}
@keyframes kenburns{
  0%{ transform:scale(1) translateY(0); }
  100%{ transform:scale(1.12) translateY(-1.5%); }
}
.hero-overlay{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(21,20,26,.55) 0%, rgba(21,20,26,.75) 55%, var(--bg) 100%),
    radial-gradient(70% 55% at 75% 25%, rgba(201,160,99,.16), transparent 60%),
    radial-gradient(55% 45% at 10% 90%, rgba(79,168,158,.14), transparent 60%);
}
.hero .role-small{
  font-family:var(--mono); font-size:13px; color:var(--teal); letter-spacing:.1em;
  margin-bottom:22px;
}
.hero h1{
  font-family:var(--display); font-weight:900;
  font-size:clamp(46px, 9vw, 116px);
  line-height:1.02; letter-spacing:-.01em;
  text-shadow:0 6px 40px rgba(0,0,0,.5);
}
.hero h1 span{color:var(--gold); display:block; font-size:.42em; margin-top:14px;}
.hero p.tag{
  max-width:560px; margin-top:28px; color:var(--fg-dim); font-size:18px;
}
.scroll-cue{
  margin-top:70px; font-family:var(--mono); font-size:11px; color:var(--fg-dim);
  display:flex; align-items:center; gap:10px;
}
.scroll-cue .line{width:44px; height:1px; background:var(--fg-dim); animation:grow 2s infinite;}
@keyframes grow{0%{transform:scaleX(.2); opacity:.3} 50%{transform:scaleX(1); opacity:1} 100%{transform:scaleX(.2); opacity:.3}}

.sec-head{display:flex; align-items:baseline; gap:16px; margin-bottom:64px; flex-wrap:wrap;}
.sec-head h2{font-family:var(--display); font-weight:900; font-size:clamp(30px,4vw,48px);}
.sec-head .code{font-family:var(--mono); color:var(--gold); font-size:13px; direction:ltr;}

.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

.timeline{border-inline-start:1px solid var(--line); margin-inline-start:6px;}
.t-item{position:relative; padding:0 0 56px 0; padding-inline-start:38px;}
.t-item::before{
  content:''; position:absolute; inset-inline-start:-6.5px; top:4px;
  width:12px; height:12px; border-radius:2px; background:var(--bg);
  border:2px solid var(--gold);
}
.t-item .code{font-family:var(--mono); font-size:12px; color:var(--teal); direction:ltr; margin-bottom:8px; display:block;}
.t-item h3{font-family:var(--display); font-weight:700; font-size:22px; margin-bottom:6px;}
.t-item p{color:var(--fg-dim); max-width:620px; font-size:15px;}

.work-row{
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
  padding:56px 0; border-top:1px solid var(--line);
}
.work-row.last{border-bottom:1px solid var(--line);}
.work-thumb{
  aspect-ratio:16/10; border-radius:6px; position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--bg-panel-2), var(--bg-panel));
  border:1px solid var(--line); background-size:cover; background-position:center;
}
.work-thumb::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(201,160,99,.25), transparent 55%, rgba(79,168,158,.22));
  opacity:.7; transition:opacity .4s;
}
.work-thumb .play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .35s, transform .35s; transform:scale(.85);
}
.work-row:hover .play{opacity:1; transform:scale(1);}
.work-thumb .play span{
  width:58px; height:58px; border-radius:50%; border:1px solid var(--fg);
  display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--fg);
  backdrop-filter:blur(4px);
}
.work-info .code{font-family:var(--mono); font-size:12px; color:var(--gold); direction:ltr;}
.work-info h3{font-family:var(--display); font-weight:700; font-size:26px; margin:12px 0 10px;}
.work-info p{color:var(--fg-dim); font-size:15px; max-width:440px;}
.work-info .tags{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap;}
.work-info .tags span{
  font-family:var(--mono); font-size:11px; color:var(--fg-dim);
  border:1px solid var(--line); border-radius:999px; padding:4px 12px;
}

.skill-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line);}
.skill-card{background:var(--bg); padding:28px 24px;}
.skill-card .code{font-family:var(--mono); font-size:11px; color:var(--teal); direction:ltr;}
.skill-card h4{font-family:var(--display); font-weight:700; font-size:18px; margin:10px 0 8px;}
.skill-card p{font-size:13px; color:var(--fg-dim);}

.contact{text-align:center;}
.contact h2{
  font-family:var(--display); font-weight:900;
  font-size:clamp(34px,7vw,78px); line-height:1.08;
}
.contact h2 .accent{color:var(--gold);}
.contact-links{
  display:flex; justify-content:center; gap:20px; margin-top:44px; flex-wrap:wrap;
}
.contact-links a{
  font-family:var(--mono); font-size:13px; color:var(--fg);
  border:1px solid var(--line); border-radius:999px; padding:12px 26px;
  text-decoration:none; transition:.3s; direction:ltr;
}
.contact-links a:hover{border-color:var(--gold); color:var(--gold);}

footer.babak-footer{
  padding:36px 8vw; display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid var(--line); font-family:var(--mono); font-size:11px; color:var(--fg-dim);
  flex-wrap:wrap; gap:12px; direction:ltr;
}

@media (max-width:760px){
  section{padding:96px 6vw;}
  .work-row{grid-template-columns:1fr;}
  .timecode{font-size:10px; top:16px; left:16px;}
  nav.babak-nav{padding:14px;}
  nav.babak-nav .links{gap:16px; padding:8px 16px; font-size:12px;}
  .hero-bg{animation-duration:26s;}
}
@media (prefers-reduced-motion: reduce){
  .hero-bg{animation:none;}
  .reveal{transition:none;}
}