/* ============================================================
   LYUTIK — lytik.ru
   Палитра и приёмы взяты из набросков: кислотный зелёный +
   фиолетовый по серой «бумаге», рукотворная кривая типографика,
   глаз-талисман, зерно/ксерокс.
   ============================================================ */

:root{
  --acid:      #9ecb5f;
  --acid-hi:   #b8e277;
  --violet:    #7c2f8e;
  --violet-dp: #4a1a57;
  --paper:     #c9cacb;   /* серый картон её эскизов */
  --paper-hi:  #dfe0e0;
  --ink:       #0f0f10;
  --ink-soft:  #1a1a1c;

  --font-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --font-body:    "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "Consolas", monospace;

  --pad: clamp(20px, 5vw, 80px);
  --maxw: 1440px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; }

img{ max-width:100%; display:block; }

::selection{ background:var(--violet); color:var(--acid-hi); }

/* ---------- зерно / ксерокс ---------- */
.grain{
  position:fixed; inset:0; z-index:9000; pointer-events:none;
  opacity:.36; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ---------- курсор-точка ---------- */
.cursor{
  position:fixed; top:0; left:0; z-index:9500; pointer-events:none;
  width:34px; height:34px; margin:-17px 0 0 -17px;
  border:2px solid var(--violet); border-radius:50%;
  display:none; opacity:0; mix-blend-mode:exclusion;
  transition:width .18s, height .18s, margin .18s, background .18s, opacity .2s;
}
.cursor.is-live{ opacity:1; }
.cursor__pupil{
  position:absolute; inset:0; margin:auto;
  width:6px; height:6px; border-radius:50%; background:var(--acid);
}
.cursor.is-hot{ width:56px; height:56px; margin:-28px 0 0 -28px; background:rgba(158,203,95,.25); }
@media (pointer:fine){ .cursor{ display:block; } }

/* ============================================================
   ТИПОГРАФИКА
   ============================================================ */
.label{
  font-family:var(--font-mono);
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--violet); margin:0 0 1.2em;
}
.h2{
  font-family:var(--font-display);
  font-weight:900; line-height:.95; letter-spacing:-.02em;
  font-size:clamp(2rem,5.4vw,4.4rem);
  margin:0 0 .6em; text-transform:lowercase;
}
.h2 em{
  font-style:normal; color:var(--acid);
  -webkit-text-stroke:2px var(--violet);
  paint-order:stroke fill;
}
.dot{ color:var(--violet); margin:0 .5em; }

/* ---------- кнопки ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-mono); font-size:.82rem;
  letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
  padding:.95em 1.7em; border:2px solid var(--ink); border-radius:999px;
  background:transparent; color:var(--ink);
  transition:transform .18s cubic-bezier(.2,.9,.3,1.4), background .18s, color .18s, box-shadow .18s;
}
.btn:hover{
  transform:translate(-2px,-3px) rotate(-1deg);
  box-shadow:5px 6px 0 var(--violet);
}
.btn--fill{ background:var(--acid); border-color:var(--violet); }
.btn--fill:hover{ background:var(--violet); color:var(--acid-hi); box-shadow:5px 6px 0 var(--ink); }

/* ============================================================
   ГЛАЗ
   ============================================================ */
.eye__lens{ fill:var(--acid); stroke:var(--violet); stroke-width:5; stroke-linejoin:round; }
.eye__iris{ fill:none; stroke:var(--violet); stroke-width:5; }
.eye__pupil{ fill:var(--violet); }
.eye__glint{ fill:var(--acid-hi); }
.eye__rays path{ stroke:var(--violet); stroke-width:6; stroke-linecap:round; fill:none; }

.eye--big{ width:min(280px,52vw); height:auto; overflow:visible; }
.eye--mini{ width:44px; height:auto; }

/* моргание + взгляд, который следит за курсором (--ex/--ey ставит JS) */
@keyframes blink{
  0%,92%,100%{ transform:translate(var(--ex,0px),var(--ey,0px)) scaleY(1); }
  95%{ transform:translate(var(--ex,0px),var(--ey,0px)) scaleY(.06); }
}
.eye--big use{
  transform-origin:100px 50px;
  transform:translate(var(--ex,0px),var(--ey,0px));
  animation:blink 7.5s infinite;
}

/* ============================================================
   ШАПКА
   ============================================================ */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:8000;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.7rem var(--pad);
  backdrop-filter:blur(6px);
  border-bottom:2px solid transparent;
  transition:background .25s, border-color .25s;
}
.topbar.is-stuck{ background:rgba(201,202,203,.82); border-bottom-color:var(--ink); }
.topbar__logo{
  display:flex; align-items:center; gap:.55rem; text-decoration:none;
  font-family:var(--font-display); font-weight:900;
  letter-spacing:.06em; font-size:1rem;
}
.topbar__logo .eye--mini{ width:34px; }
.topbar__nav{ display:flex; gap:clamp(.8rem,2vw,2rem); }
.topbar__nav a{
  font-family:var(--font-mono); font-size:.74rem;
  letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
  padding-bottom:2px; border-bottom:2px solid transparent;
}
.topbar__nav a:hover{ border-bottom-color:var(--violet); }
.topbar__nav .is-accent{ color:var(--violet); font-weight:700; }
@media (max-width:640px){ .topbar__nav a:not(.is-accent){ display:none; } }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:7rem var(--pad) 7rem; position:relative;
  background:
    radial-gradient(52% 40% at 50% 40%, rgba(158,203,95,.5), transparent 72%),
    var(--paper);
}
.hero__mark{ margin-bottom:clamp(.6rem,2vw,1.4rem); }

.hero__kicker{
  font-family:var(--font-mono); font-size:clamp(.66rem,1.3vw,.8rem);
  letter-spacing:.22em; text-transform:uppercase; margin:0 0 1.1em;
}

/* ---- кривоватый рукотворный логотип ---- */
.wordmark{
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(2.8rem,14vw,10.5rem); line-height:.9;
  margin:0 0 .34em; display:flex; justify-content:center;
  letter-spacing:-.03em;
  color:var(--acid);
  -webkit-text-stroke:clamp(2px,.55vw,6px) var(--violet);
  paint-order:stroke fill;
  filter:drop-shadow(6px 7px 0 rgba(15,15,16,.22));
}
.wordmark span{ display:inline-block; transform-origin:50% 80%; }
.wordmark span:nth-child(1){ transform:rotate(-4deg) translateY(4px)   scale(1.02); }
.wordmark span:nth-child(2){ transform:rotate(3deg)  translateY(-6px)  scale(1.06); }
.wordmark span:nth-child(3){ transform:rotate(-2deg) translateY(2px)   scale(.98); }
.wordmark span:nth-child(4){ transform:rotate(5deg)  translateY(-3px)  scale(1.04); }
.wordmark span:nth-child(5){ transform:rotate(-6deg) translateY(5px)   scale(.96); }
.wordmark span:nth-child(6){ transform:rotate(2deg)  translateY(-4px)  scale(1.05); }
.wordmark span:hover{ color:var(--violet); -webkit-text-stroke-color:var(--ink); }

.hero__lead{
  max-width:44ch; margin:0 auto 2.2rem;
  font-size:clamp(1rem,1.5vw,1.2rem);
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; }

.scrollhint{
  position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  font-family:var(--font-mono); font-size:.62rem;
  letter-spacing:.3em; text-transform:uppercase; color:var(--violet);
}
.scrollhint i{ width:2px; height:36px; background:var(--violet); animation:drop 1.8s infinite; }
@keyframes drop{ 0%{ transform:scaleY(.2); opacity:.3 } 50%{ transform:scaleY(1); opacity:1 } 100%{ transform:scaleY(.2); opacity:.3 } }

/* ============================================================
   ТИКЕР
   ============================================================ */
.ticker{
  overflow:hidden; background:var(--violet); color:var(--acid-hi);
  border-top:3px solid var(--ink); border-bottom:3px solid var(--ink);
  padding:.7rem 0;
}
.ticker__track{ display:flex; width:max-content; animation:slide 34s linear infinite; }
.ticker__row{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(.9rem,2.2vw,1.7rem); letter-spacing:.06em; white-space:nowrap;
}
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ============================================================
   КТО
   ============================================================ */
.about{ padding:clamp(4rem,10vw,9rem) var(--pad); background:var(--paper-hi); }
.about__grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,6vw,6rem);
  align-items:start;
}
.about__text p{ max-width:52ch; }

.facts{ list-style:none; margin:2.4rem 0 0; padding:0; }
.facts li{
  display:flex; flex-wrap:wrap; gap:.2rem 1.2rem; align-items:baseline;
  padding:.9rem 0; border-top:2px solid var(--ink);
}
.facts li:last-child{ border-bottom:2px solid var(--ink); }
.facts b{ font-family:var(--font-display); font-weight:700; font-size:1rem; min-width:9ch; }
.facts span{ font-family:var(--font-mono); font-size:.76rem; color:var(--violet-dp); }

.portrait{ margin:0; position:relative; }
.portrait__frame{
  border:3px solid var(--ink); background:var(--paper);
  box-shadow:12px 14px 0 var(--violet);
  aspect-ratio:3/4; overflow:hidden;
}
.portrait__frame--wide{
  aspect-ratio:16/10; margin-top:2.2rem;
  box-shadow:-10px 12px 0 var(--acid);
  transform:rotate(-1.2deg);
}
.portrait__frame img{ width:100%; height:100%; object-fit:cover; }
.portrait__ph{
  width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem;
  background:
    repeating-linear-gradient(45deg, rgba(124,47,142,.10) 0 12px, transparent 12px 24px),
    var(--paper);
}
.portrait__ph svg{ width:52%; }
.portrait__ph span{
  font-family:var(--font-mono); font-size:.72rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--violet);
}
.portrait figcaption{
  margin-top:1rem; font-family:var(--font-mono);
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
}
/* ---------- печать: кот-солнце ---------- */
.seal{
  position:absolute; top:-38px; right:-30px;
  width:clamp(96px,14vw,152px); height:auto;
  transform:rotate(-13deg); animation:wobble 7s ease-in-out infinite;
  filter:drop-shadow(4px 5px 0 rgba(15,15,16,.25));
}
@keyframes wobble{ 50%{ transform:rotate(-5deg) scale(1.05); } }

.seal__bg{ fill:var(--paper-hi); stroke:var(--ink); stroke-width:6; }
.seal__ring{ fill:none; stroke:var(--ink); stroke-width:3; }
.seal__sun{ fill:var(--acid); stroke:var(--violet); stroke-width:3; stroke-linejoin:round; }
.seal__pins{ fill:var(--violet); }
.seal__cat{ fill:var(--violet); }
.seal__ear{ fill:var(--acid); }
.seal__whisk path{ stroke:var(--violet); stroke-width:3; stroke-linecap:round; fill:none; }
.seal__type{
  font-family:var(--font-display); font-weight:900; font-size:20px;
  letter-spacing:.16em; fill:var(--ink); text-anchor:middle;
}

/* ============================================================
   ОБРАЗ — полоса-девиз
   ============================================================ */
.creed{
  background:var(--acid);
  border-top:3px solid var(--ink); border-bottom:3px solid var(--ink);
  padding:clamp(2rem,5vw,3.4rem) var(--pad);
}
.creed__line{
  max-width:var(--maxw); margin:0 auto; text-align:center;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.05rem,3.2vw,2.4rem); line-height:1.25;
  color:var(--violet-dp); text-transform:lowercase;
}
.creed__sep{ color:var(--violet); margin:0 .6em; font-size:.7em; vertical-align:.15em; }

/* ============================================================
   ЧТО ДЕЛАЮ
   ============================================================ */
.work{
  padding:clamp(4rem,10vw,9rem) var(--pad);
  background:var(--ink); color:var(--paper-hi);
}
.work .label{ color:var(--acid); }
.cards{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.4rem;
}
.card{
  border:2px solid var(--paper-hi); padding:2rem 1.6rem 2.2rem;
  display:flex; flex-direction:column; gap:.6rem; position:relative;
  transition:background .2s, color .2s, transform .2s, border-color .2s;
}
.card__num{
  font-family:var(--font-mono); font-size:.72rem;
  letter-spacing:.2em; color:var(--acid);
}
.card h3{
  font-family:var(--font-display); font-weight:700;
  font-size:1.18rem; line-height:1.15; margin:.2em 0 .3em;
}
.card p{ margin:0; font-size:.94rem; opacity:.82; }
.card:hover{
  background:var(--acid); color:var(--ink);
  border-color:var(--violet); transform:translateY(-6px) rotate(-.7deg);
}
.card:hover .card__num{ color:var(--violet); }
.card:hover p{ opacity:1; }

/* ============================================================
   РАБОТЫ
   ============================================================ */
.folio{
  padding:clamp(4rem,10vw,9rem) var(--pad);
  background:var(--paper);
  display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,6vw,5rem);
  align-items:center; max-width:var(--maxw); margin:0 auto;
}
.folio__note{ max-width:40ch; margin-bottom:2rem; }
.tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.tile{
  aspect-ratio:3/4; border:2px dashed var(--violet);
  display:grid; place-content:center;
  background:repeating-linear-gradient(-45deg, rgba(158,203,95,.30) 0 10px, transparent 10px 20px);
  font-family:var(--font-mono); font-size:.66rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--violet);
  transition:transform .2s, background .2s;
}
.tile:nth-child(2n){ transform:rotate(1.2deg); }
.tile:nth-child(3n){ transform:rotate(-1.6deg); }
.tile:hover{ background:var(--acid); transform:rotate(0) scale(1.04); }

/* ============================================================
   КОНТАКТ
   ============================================================ */
.contact{
  padding:clamp(4rem,10vw,9rem) var(--pad);
  background:var(--violet); color:var(--acid-hi); text-align:center;
}
.contact .label{ color:var(--acid-hi); }
.bigmail{
  display:block; text-decoration:none;
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(1.5rem,7vw,5rem); line-height:1.05;
  letter-spacing:-.02em; word-break:break-word;
  transition:color .2s, transform .2s;
}
.bigmail:hover{ color:var(--acid); transform:rotate(-1deg) scale(1.02); }
.bigmail--sub{ font-size:clamp(1.1rem,4vw,2.6rem); margin-top:.4em; opacity:.85; }

.contact__note{
  margin:2.8rem 0 0; font-family:var(--font-mono);
  font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; opacity:.75;
}

/* ============================================================
   ПОДВАЛ
   ============================================================ */
.foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem;
  padding:1.6rem var(--pad); background:var(--ink); color:var(--paper-hi);
  font-family:var(--font-mono); font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase;
}
.foot .eye--mini{ width:38px; }
.foot__c{ margin-left:auto; opacity:.6; }

/* ============================================================
   ПОЯВЛЕНИЕ ПРИ СКРОЛЛЕ
   ============================================================ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.3,1); }
.reveal.is-in{ opacity:1; transform:none; }

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width:960px){
  .about__grid{ grid-template-columns:1fr; }
  .portrait{ max-width:420px; }
  .folio{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .tiles{ grid-template-columns:repeat(2,1fr); }
  .seal{ width:92px; top:-26px; right:-10px; }
  .portrait__frame{ box-shadow:8px 9px 0 var(--violet); }
}

/* ============================================================
   БЕРЕЖНЫЙ РЕЖИМ
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}