/* =========================================================
   Rostislav Shkylov — portfolio
   Кольори теми задані змінними нижче: змініть тут — зміниться весь сайт.
   ========================================================= */
:root{
  --accent:#2F7BFF;      /* неоново-синій (темна тема) */
  --accent2:#7FE7FF;     /* блакитний для рукописних написів */
  --bg:#0B0C14; --bg2:#141629; --navbg:rgba(11,12,20,.88);
  --line:#23263F; --fg:#F2EFE8; --muted:#A3A5B5; --body:#C9C8D6; --body2:#DAD9E4;
  --onAccent:#06070D; --onLine:rgba(6,7,13,.28); --glow:rgba(47,123,255,.55);
  --side:120px; --pad:48px;
  --f-display:'Onest',system-ui,sans-serif;
  --f-hand:'Caveat',cursive;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;
  color-scheme:dark;
}
[data-theme="light"]{
  --accent:#1746E0; --accent2:#0E7CA8;
  --bg:#F1F0EC; --bg2:#E4E3DD; --navbg:rgba(241,240,236,.9);
  --line:#CDCBC3; --fg:#101118; --muted:#5C5D68; --body:#3A3B46; --body2:#262732;
  --onAccent:#FFFFFF; --onLine:rgba(255,255,255,.35); --glow:rgba(23,70,224,.35);
  color-scheme:light;
}
/* «Кінозал»: блоки, що завжди темні */
.cinema{--accent:#2F7BFF;--accent2:#7FE7FF;--onAccent:#06070D;--glow:rgba(47,123,255,.55);--fg:#F2EFE8;--body:#E2E0E8;--muted:#A3A5B5;--line:#23263F;background:#0B0C14;color:#F2EFE8}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-display);-webkit-font-smoothing:antialiased;transition:background-color .45s ease,color .45s ease;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--accent);color:var(--onAccent);padding:10px 14px}
.skip:focus{left:8px}

/* ---------- type helpers ---------- */
.mono{font-family:var(--f-mono);letter-spacing:.16em;text-transform:uppercase}
.label{font-family:var(--f-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.hand{font-family:var(--f-hand);font-weight:700;color:var(--accent);line-height:1}
.h-giant{margin:0;font-weight:900;font-size:clamp(56px,8vw,128px);line-height:.86;letter-spacing:-.05em;text-transform:uppercase}
.outline{color:transparent;-webkit-text-stroke:2px var(--fg)}
.accent{color:var(--accent)}

/* ---------- layout: side column with vertical label ---------- */
.side{display:grid;grid-template-columns:var(--side) minmax(0,1fr)}
.rail{border-right:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.rail span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--f-mono);font-size:12px;letter-spacing:.24em;color:var(--muted);text-transform:uppercase;white-space:nowrap}
.rail--top{align-items:flex-start;padding-top:56px}
.sec{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.sec-head{padding:112px var(--pad) 56px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}
.ghost{position:absolute;font-weight:900;line-height:.8;letter-spacing:-.06em;color:var(--bg2);white-space:nowrap;pointer-events:none;user-select:none;animation:drift 18s ease-in-out infinite}

/* ---------- buttons ---------- */
.btn,.btn-o{display:inline-flex;align-items:center;gap:10px;padding:18px 26px;font-family:var(--f-mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.btn{background:var(--accent);color:var(--onAccent);transition:transform .25s,filter .25s,box-shadow .25s}
.btn:hover{color:var(--onAccent);filter:brightness(1.15);transform:translateY(-2px);box-shadow:0 0 28px var(--glow)}
.btn-o{border:1.5px solid var(--fg);color:var(--fg);transition:background .25s,color .25s}
.btn-o:hover{background:var(--fg);color:var(--bg)}
.pill{border-radius:999px}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--navbg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-in{padding:0 32px;min-height:72px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.brand{display:flex;align-items:center;gap:14px}
.brand-mark{width:44px;height:44px;background:var(--accent);color:var(--onAccent);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:16px}
.brand-name{font-weight:700;font-size:15px;line-height:1.05}
.menu{display:flex;flex-wrap:wrap;gap:6px 32px;font-family:var(--f-mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.tools{display:flex;align-items:center;gap:16px;font-family:var(--f-mono);font-size:13px;letter-spacing:.16em}
.lang .on{color:var(--accent)}
.tgl{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;background:transparent;border:1.5px solid var(--line);color:var(--fg);cursor:pointer;transition:border-color .25s,color .25s}
.tgl:hover{border-color:var(--accent);color:var(--accent)}
.tgl .moon{display:none}
[data-theme="light"] .tgl .sun{display:none}
[data-theme="light"] .tgl .moon{display:block}
.burger{display:none}

/* ---------- hero ---------- */
.hero-wrap{display:flex;flex-wrap:wrap;position:relative}
.hero-txt{flex:1 1 560px;min-width:0;padding:112px var(--pad) 80px;display:flex;flex-direction:column;justify-content:center;gap:22px}
.hero-hi{font-size:clamp(40px,4.4vw,72px)}
.hero h1{margin:0;font-weight:900;font-size:clamp(48px,7vw,128px);line-height:.86;letter-spacing:-.05em;text-transform:uppercase}
.lead{margin:6px 0 0;max-width:600px;font-size:20px;line-height:1.55;color:var(--body)}
.cta{display:flex;flex-wrap:wrap;gap:12px;padding-top:8px}
.hero-pic{flex:1 1 420px;min-width:0;position:relative;padding:72px var(--pad) 72px 0}
.hero-pic img{width:100%;height:100%;min-height:520px;object-fit:cover;object-position:28% 30%}
.badge{position:absolute;left:-60px;bottom:40px;width:150px;height:150px;animation:spin 14s linear infinite}

/* ---------- marquee ---------- */
.marquee{background:var(--accent);color:var(--onAccent);overflow:hidden;border-bottom:1px solid var(--line)}
.marquee-track{display:flex;width:max-content;animation:marquee 32s linear infinite;padding:22px 0;font-weight:900;font-size:34px;text-transform:uppercase;white-space:nowrap}
.marquee-track span{padding-right:48px}

/* ---------- facts ---------- */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.fact{padding:48px 40px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.fact:last-child{border-right:0}
.fact b{font-weight:900;font-size:88px;line-height:.9;letter-spacing:-.04em}

/* ---------- project tiles ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.grid3 > *{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.grid3 > *:nth-child(3n){border-right:0}
.tile{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;min-height:560px;color:#F2EFE8;background:#16171C}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.75);transition:filter .6s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.tile:hover img,.tile:focus-visible img{filter:grayscale(0) brightness(1);transform:scale(1.04)}
.tile:hover{color:#F2EFE8}
.tile-body{position:relative;padding:32px;display:flex;flex-direction:column;gap:10px;background:linear-gradient(0deg,rgba(11,12,20,.94) 55%,rgba(11,12,20,0))}
.tile-meta{font-family:var(--f-mono);font-size:12px;letter-spacing:.2em;color:#5C9BFF}
.tile-title{font-weight:900;font-size:38px;line-height:.95;letter-spacing:-.03em;text-transform:uppercase}
.tile-desc{font-size:15px;line-height:1.5;color:#C9C8D6}
.tile-go{font-family:var(--f-mono);font-size:13px;letter-spacing:.16em;transition:transform .4s}
.tile:hover .tile-go{transform:translateX(8px)}
.tile-tag{position:absolute;top:24px;right:24px;padding:6px 10px;background:#2F7BFF;color:#06070D;font-family:var(--f-mono);font-size:11px;letter-spacing:.16em}
.tile figcaption{position:relative;margin:24px;align-self:flex-start;padding:8px 12px;background:var(--accent);color:var(--onAccent);font-family:var(--f-mono);font-size:12px;letter-spacing:.16em}

/* ---------- showreel ---------- */
.reel{position:relative;display:block;overflow:hidden;min-height:620px;color:#F2EFE8}
.reel:hover{color:#F2EFE8}
.reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.5);transition:transform 1.2s}
.reel:hover img{transform:scale(1.05)}
.reel-in{position:relative;min-height:620px;padding:56px var(--pad);display:flex;flex-direction:column;justify-content:space-between;gap:32px}
.reel-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}
.reel-mid{display:flex;flex-wrap:wrap;align-items:center;gap:40px}
.play{width:132px;height:132px;flex:0 0 auto;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;animation:pulse 2s ease-in-out infinite;transition:transform .35s}
.reel:hover .play{transform:scale(1.12)}

/* ---------- AI ---------- */
.ai{position:relative;overflow:hidden}
.ai > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1);opacity:.3}
.ai-in{position:relative;padding:112px var(--pad);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:26px;min-height:720px}
.ai h2{margin:0;font-family:var(--f-hand);font-weight:700;font-size:clamp(72px,10vw,170px);line-height:.95}
.ai p{margin:0;max-width:620px;font-size:19px;line-height:1.6;color:var(--body)}

/* ---------- rows (services, experience) ---------- */
.rows{margin:0;padding:0;list-style:none}
.rows li{display:flex;flex-wrap:wrap;align-items:baseline;gap:16px 40px;padding:40px var(--pad);border-bottom:1px solid var(--line);transition:background .3s,padding-left .3s}
.rows li:last-child{border-bottom:0}
.rows li:hover{background:var(--bg2);padding-left:calc(var(--pad) + 16px)}
.rows .n{flex:0 0 48px;font-family:var(--f-mono);font-size:12px;letter-spacing:.2em;color:var(--accent)}
.rows .t{flex:1 1 380px;font-weight:800;font-size:34px;letter-spacing:-.02em;text-transform:uppercase}
.rows .d{flex:1 1 320px;font-size:16px;line-height:1.55;color:var(--body)}
.rows.exp li{align-items:center;padding:28px var(--pad)}
.rows.exp .n{flex:0 0 160px;font-size:13px;letter-spacing:.12em}
.rows.exp .t{font-size:26px;flex:1 1 320px}
.rows.exp .d{flex:1 1 240px}

/* ---------- about ---------- */
.about{display:flex;flex-wrap:wrap}
.about-txt{flex:1 1 520px;min-width:0;padding:112px var(--pad) 72px;display:flex;flex-direction:column;gap:24px;border-right:1px solid var(--line)}
.about-txt p{margin:0;font-size:18px;line-height:1.7;color:var(--body2)}
.about-pic{flex:1 1 380px;min-height:560px}
.hobbies{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.hobby{padding:48px 40px 56px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:16px}
.hobby:last-child{border-right:0}
.hobby .hand{font-size:46px;color:var(--accent2)}
.hobby p{margin:0;font-size:16px;line-height:1.6;color:var(--body)}

/* ---------- footer ---------- */
.foot{background:var(--accent);color:var(--onAccent)}
.foot a{color:var(--onAccent)}
.foot a:hover{opacity:.7;color:var(--onAccent)}
.foot .rail{border-color:var(--onLine)}
.foot .rail span{color:var(--onAccent)}
.foot-main{padding:112px var(--pad) 72px;display:flex;flex-direction:column;gap:36px;border-bottom:1px solid var(--onLine)}
.foot-main .hand{color:var(--onAccent);font-size:clamp(36px,3.8vw,58px)}
.foot-main h2{margin:0;font-weight:900;font-size:clamp(56px,9vw,150px);line-height:.86;letter-spacing:-.05em;text-transform:uppercase}
.foot-btns{display:flex;flex-wrap:wrap;gap:12px}
.fb{padding:20px 26px;font-family:var(--f-mono);font-size:14px;letter-spacing:.12em;border:1.5px solid var(--onAccent)}
.fb--solid{background:#0B0C14;color:#F2EFE8 !important;border-color:#0B0C14}
.foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.foot-col{padding:44px 40px;border-right:1px solid var(--onLine);display:flex;flex-direction:column;gap:14px;font-family:var(--f-mono);font-size:13px;letter-spacing:.16em}
.foot-col:last-child{border-right:0}
.foot-col .cap{font-size:12px;opacity:.7}
.foot-col b{font-family:var(--f-display);font-weight:900;font-size:72px;line-height:.9;letter-spacing:-.04em}
.credit{padding:24px 40px;border-top:1px solid var(--onLine);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;font-family:var(--f-mono);font-size:12px;letter-spacing:.14em}
.credit span{display:flex;align-items:center;gap:10px}

/* ---------- case page ---------- */
.case-hero{display:flex;flex-wrap:wrap}
.case-hero .txt{flex:1 1 520px;min-width:0;padding:96px var(--pad) 72px;display:flex;flex-direction:column;gap:24px;border-right:1px solid var(--line)}
.case-hero .pic{flex:1 1 420px;min-width:0;background:#11121A;display:flex;align-items:center;justify-content:center}
.case-hero .pic img{width:100%;height:100%;object-fit:cover}
.meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.meta div{padding:32px 40px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.meta div:last-child{border-right:0}
.meta b{font-size:20px;font-weight:700}
.chapter{padding:96px var(--pad) 48px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:48px;align-items:end}
.chapter h2{margin:0;font-weight:900;font-size:clamp(40px,5vw,80px);line-height:.9;letter-spacing:-.04em;text-transform:uppercase}
.chapter p{margin:0;font-size:18px;line-height:1.7;color:var(--body)}
.shots{display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line)}
.shots.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.shots.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.shots figure{margin:0;background:#0B0C14;overflow:hidden}
.shots img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.shots figure:hover img{transform:scale(1.03)}
.shots.full img{max-height:none}
.next{display:block;padding:96px var(--pad);border-top:1px solid var(--line)}
.next .h-giant{transition:color .3s}
.next:hover .h-giant{color:var(--accent)}

/* ---------- motion ---------- */
@keyframes rise{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes drift{0%,100%{transform:translateX(0)}50%{transform:translateX(-4%)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 var(--glow)}50%{box-shadow:0 0 0 14px rgba(0,0,0,0)}}
@keyframes wobble{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(-1deg) translateY(-3px)}}
@keyframes neon{0%,100%{text-shadow:0 0 18px var(--glow)}50%{text-shadow:0 0 36px var(--glow)}}
.rise{animation:rise 1s cubic-bezier(.2,.7,.2,1) both}
.d1{animation-delay:.12s}.d2{animation-delay:.24s}.d3{animation-delay:.36s}.d4{animation-delay:.5s}
.wob{display:inline-block;animation:wobble 4s ease-in-out infinite;transform-origin:left center}
.neon{animation:neon 3s ease-in-out infinite}
.js .reveal{opacity:0;transform:translateY(48px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fact:nth-child(2){border-right:0}
  .fact:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid3 > *:nth-child(3n){border-right:1px solid var(--line)}
  .grid3 > *:nth-child(2n){border-right:0}
  .meta{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  :root{--side:36px;--pad:20px}
  .menu{display:none;width:100%;flex-direction:column;gap:18px;padding:12px 0 20px}
  .menu.open{display:flex}
  .burger{display:flex}
  .nav-in{padding:0 16px}
  .hero-txt{padding-top:56px}
  .hero-pic{padding:0 var(--pad) 48px}
  .hero-pic img{min-height:380px}
  .badge{left:auto;right:12px;bottom:60px;width:110px;height:110px}
  .marquee-track{font-size:24px}
  .facts,.grid3,.hobbies,.foot-cols,.meta,.shots.two,.shots.three{grid-template-columns:minmax(0,1fr)}
  .fact,.hobby,.foot-col,.meta div{border-right:0;border-bottom:1px solid var(--line)}
  .grid3 > *{border-right:0 !important}
  .fact b{font-size:64px}
  .tile{min-height:440px}
  .about-txt,.case-hero .txt{border-right:0}
  .about-pic{min-height:420px}
  .rows .t{font-size:24px}
  .chapter{grid-template-columns:minmax(0,1fr);padding-top:64px}
  .sec-head{padding-top:72px}
  .play{width:96px;height:96px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .js .reveal{opacity:1;transform:none}
}

/* ---------- fixes: long words on narrow screens ---------- */
.foot{overflow:hidden}
.fb,.btn,.btn-o{max-width:100%;overflow-wrap:anywhere}
.credit span{flex-wrap:wrap;min-width:0;overflow-wrap:anywhere}
.side > *{min-width:0}
.lang a{color:var(--muted)}.lang a:hover{color:var(--accent)}