/* ===== SAVCHENKO DP — продакшн-сайт ===== */
:root{
  --bg:#0A0A0A;
  --accent:#E05C1A;
  --text:#ffffff;
  --muted:rgba(255,255,255,.5);
  --faint:rgba(255,255,255,.28);
  --line:rgba(255,255,255,.12);
  --maxw:1600px;
  --gut:clamp(20px,4vw,64px);
  --edge:clamp(12px,2vw,60px);
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --sans:'Inter',system-ui,sans-serif;
}
@font-face{
  font-family:'Neue Haas Grotesk Display Pro';
  src:url('fonts/Neue%20Haas%20Grotesk%20Display%20Pro%2075%20Bold.otf') format('opentype');
  font-weight:700;font-style:normal;font-display:swap;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--sans);font-weight:400;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.loading{overflow:hidden;height:100vh}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}
::selection{background:var(--accent);color:#000}

/* ===== Preloader ===== */
.preloader{
  position:fixed;inset:0;background:#000;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(24px,6vw,90px);
  font-family:var(--mono);color:var(--accent);
  font-size:clamp(13px,1.9vw,20px);line-height:1.8;
  transition:opacity .7s ease,visibility .7s;
  cursor:pointer;
}
.preloader.done{opacity:0;visibility:hidden;pointer-events:none}
.preblock{white-space:pre;letter-spacing:.02em}
.cursor{display:inline-block;width:.55em;height:1.05em;background:var(--accent);
  vertical-align:-.12em;margin-left:2px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.preloader .hint{position:absolute;bottom:18px;right:24px;font-size:11px;
  color:var(--faint);letter-spacing:.1em;text-transform:uppercase}

/* ===== Nav ===== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:600;
  display:flex;align-items:center;justify-content:space-between;
  padding:30px var(--edge);
  font-family:var(--mono);font-size:30px;letter-spacing:.14em;
  text-transform:uppercase;
}
.nav a{color:var(--accent);opacity:1;transition:.25s;font-weight:500}
.nav a:hover{opacity:.55}
.nav a.active{opacity:1}
.nav a.active::before{content:"["}
.nav a.active::after{content:"]"}

/* ===== Layout ===== */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
section{position:relative}

/* ===== Hero (surname) ===== */
.hero{
  display:flex;align-items:flex-start;justify-content:center;
  padding:120px var(--edge) 8px;
}
.surname-link{display:block;width:100%;color:inherit;text-decoration:none}
.surname-word{display:flex;width:100%;justify-content:center}
.surname-link .sl{
  font-family:'Neue Haas Grotesk Display Pro',var(--sans);font-weight:700;
  font-size:17.5vw;line-height:1;
  color:var(--accent);
  -webkit-text-stroke:1.5px var(--accent);
  transition:color .45s ease;
  transition-delay:calc(var(--i) * .08s);
}
.surname-link:hover .sl{
  color:var(--bg);
  transition:color .45s ease;
  transition-delay:calc(var(--i) * .08s);
}
.surname-link:not(:hover) .sl{
  color:var(--accent);
  transition:color .45s ease;
  transition-delay:calc(var(--i) * .08s);
}
.hero .tag{
  position:absolute;left:var(--gut);bottom:34px;
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);
}
.hero .role{
  position:absolute;right:var(--gut);bottom:34px;
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);text-align:right;
}

/* ===== Showreel ===== */
.reel{padding:0 var(--gut) 80px}
.reel-frame{
  position:relative;width:100%;aspect-ratio:4/3;background:#000;
  overflow:hidden;border:1px solid var(--line);border-radius:32px;
}
.reel-bg{position:absolute;inset:0;
  background:linear-gradient(120deg,#1b1208,#070504 50%,#261509);
  background-size:200% 200%;animation:reelmove 14s ease-in-out infinite alternate}
@keyframes reelmove{from{background-position:0 0}to{background-position:100% 100%}}
.reel-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.reel-poster{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 30% 20%,rgba(224,92,26,.18),transparent 55%),
    radial-gradient(120% 90% at 80% 90%,rgba(224,92,26,.10),transparent 55%),
    linear-gradient(120deg,#161107,#070705 60%,#1a0e06);
  transition:transform .8s ease;
}
.reel-frame:hover .reel-poster{transform:scale(1.03)}
.reel-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  gap:14px;color:#fff;font-family:var(--mono);font-size:13px;letter-spacing:.2em;
  text-transform:uppercase;
}
.reel-play .tri{
  width:0;height:0;border-style:solid;border-width:14px 0 14px 24px;
  border-color:transparent transparent transparent var(--accent);
  filter:drop-shadow(0 0 18px rgba(224,92,26,.6));
}

/* ===== Brand cloud ===== */
.brands{padding:30px var(--gut) 110px;text-align:center}
.brands .row{
  font-size:clamp(18px,3.4vw,40px);font-weight:600;letter-spacing:-.01em;
  color:var(--text);
}
.brands .row span.dot{color:var(--accent);margin:0 .35em;font-weight:400}
.brands .award{
  margin-top:26px;font-family:var(--mono);font-style:italic;
  font-size:13px;letter-spacing:.06em;color:var(--muted);
}

/* ===== Project grid ===== */
.work{padding:20px var(--gut) 110px}
.work-head{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:46px;font-family:var(--mono);font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4.5vw,69px) clamp(20px,3vw,46px)}
.card{display:block;position:relative}
.card .poster{
  position:relative;width:100%;aspect-ratio:4/2.7;overflow:hidden;
  border:1px solid var(--line);background:#0d0d0d;border-radius:32px;
}
.card .poster img.thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.card .poster::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.55));
}
.card .ph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:clamp(40px,7vw,90px);font-weight:700;
  color:rgba(255,255,255,.06);letter-spacing:.02em;transition:.5s;
}
.card .poster .ply{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:.4s;
}
.card .poster .ply .tri{width:0;height:0;border-style:solid;border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent var(--accent)}
.card:hover .poster .ply{opacity:1}
.card:hover .ph{color:rgba(255,255,255,.1)}
.card .meta{margin-top:18px;text-align:center;text-transform:uppercase;
  font-family:var(--mono);color:var(--accent);letter-spacing:.14em;
  font-size:clamp(18px,2vw,30px);font-weight:500;line-height:1.3}
.card .meta .c,.card .meta .t{color:inherit}
.card .meta .y{color:var(--faint);font-family:var(--mono);font-size:.75em;margin-left:6px}
/* poster gradient variants */
.g1 .poster{background:linear-gradient(135deg,#241308,#0a0604 60%,#2a1606)}
.g2 .poster{background:linear-gradient(135deg,#0e1620,#060a0e 60%,#10202c)}
.g3 .poster{background:linear-gradient(135deg,#1c1410,#080604 60%,#221814)}
.g4 .poster{background:linear-gradient(135deg,#101a14,#060a07 60%,#15281c)}
.g5 .poster{background:linear-gradient(135deg,#241612,#0a0604 60%,#2e1a10)}
.g6 .poster{background:linear-gradient(135deg,#141420,#07070a 60%,#1c1c2e)}

/* ===== Footer ===== */
.foot{
  border-top:1px solid var(--line);
  padding:40px var(--gut);display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);
}
.foot .foot-surname{
  font-family:var(--sans);font-weight:900;font-size:clamp(26px,5vw,58px);
  letter-spacing:-.02em;color:var(--accent);text-transform:none;line-height:1;
}
.foot .foot-surname:hover{opacity:.8}
.foot .copy{color:var(--faint)}

/* ===== About ===== */
.about-top{padding:120px var(--gut) 80px}
.about-photo{
  width:100%;aspect-ratio:21/9;margin-bottom:clamp(40px,6vw,80px);
  background:linear-gradient(135deg,#161009,#070504 55%,#221307);
  border:1px solid var(--line);overflow:hidden;border-radius:32px;
}
.about-photo img{width:100%;height:100%;object-fit:cover;display:block}
.about-grid{
  display:grid;grid-template-columns:1.25fr .75fr;grid-template-rows:auto auto;
  align-items:start;gap:clamp(24px,3vw,40px) clamp(30px,6vw,90px);
}
.about-grid h4{font-family:var(--mono);font-size:clamp(18px,2vw,30px);
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  margin-bottom:24px;font-weight:500}
.about-grid .contacts h4:first-of-type{opacity:.5}
.about-grid p{color:var(--accent);font-family:var(--mono);font-weight:400;
  font-size:clamp(16px,1.7vw,22px);line-height:1.5}
.about-grid p+p{margin-top:18px}
.bio-a{grid-column:1;grid-row:1}
.bio-b{grid-column:1;grid-row:2}
.about-grid .clients{grid-column:2;grid-row:1;margin:0}
.about-grid .contacts{grid-column:2;grid-row:2;margin:0}
.about-grid .clist{display:flex;flex-direction:column;gap:14px;margin:0}
.about-grid .clist a{font-family:var(--mono);font-size:clamp(18px,2vw,30px);
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:500;
  border:0;transition:opacity .25s;width:max-content}
.about-grid .clist a:hover{opacity:.6}

/* ===== Project page ===== */
/* ===== Project page: постер + play ===== */
.pj{padding:0}
.pj-stage{position:relative;width:100%;height:100vh;background:#000}
.pj-frame{position:absolute;inset:calc(var(--edge) + 70px) var(--edge) var(--edge);border-radius:32px;overflow:hidden;background:#000}
.pj-shot{position:absolute;inset:0;background-color:#000;background-position:center;background-size:cover;
  background-image:linear-gradient(135deg,#1a1208,#070504 55%,#241307)}
.pj-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:163px;height:163px;border-radius:50%;border:0;background:var(--accent);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:transform .3s ease;
}
.pj-play .pj-tri{display:none}
.pj-play:hover{transform:translate(-50%,-50%) scale(1.12)}
@keyframes pjpulse{0%,100%{box-shadow:0 0 0 0 rgba(224,92,26,.45)}50%{box-shadow:0 0 0 24px rgba(224,92,26,0)}}
.pj-video{position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none;transition:opacity .4s ease;background:#000}
.pj-stage.playing .pj-video{opacity:1;pointer-events:auto}
.pj-stage.playing .pj-play{opacity:0;pointer-events:none}
.pj-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* fade-in */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}

/* ===== Responsive ===== */
@media(max-width:860px){
  .grid{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr;grid-template-rows:none;gap:50px}
  .bio-a,.bio-b,.about-grid .clients,.about-grid .contacts{grid-column:auto;grid-row:auto}
  .shots{grid-template-columns:1fr}
  .nav .brand{font-size:11px}
  .nav .links{gap:20px}
  .foot{flex-direction:column;gap:14px;text-align:center}
}
@media(max-width:520px){
  .hero{padding-top:110px}
  .hero .tag,.hero .role{position:static;text-align:center;margin-top:24px;display:block}
  .hero{flex-direction:column;justify-content:center}
}
/* ===== Мобильная версия: только первый постер на всю ширину ===== */
@media (max-width: 768px) {
  /* Применяем стили только к первому .pj-shot внутри .pj-stage */
  .pj-stage .pj-shot:first-of-type {
    background-size: contain !important;
    background-color: #000;
  }
  
  /* Скрываем все остальные .pj-shot, которые не нужны на мобильных */
  .pj-stage .pj-shot:not(:first-of-type) {
    display: none !important;
  }
}