/* ============================================================
   Д.Е.Н.И.С. 4000 — ретро-плакат
   Палитра снята пипеткой с исходного постера.
   ============================================================ */

:root{
  --sky-1:#5d87a2;  --sky-2:#3d6480;  --sky-3:#24445e;
  --ridge-far:#7e5a63; --ridge-near:#573a46;
  --ground-1:#d6bb73; --ground-2:#bd9c55;
  --paper:#e4d3ab;  --ink:#2b1c10;
  --gold:#f3b923;   --gold-hi:#ffd75e;
  --orange:#e8620f; --cream:#f6ead0;
  --face:#c9a04a;   --face-dark:#6d4a24;

  --grain-op:.30;  --half-op:.30;  --robot-filter:none;
  --star-op:.85;   --glow:0;
  --lift:0px;
  --mx:0; --my:0;                       /* нормализованное положение курсора −1…1 */
}

/* «выключено» — плакат уходит в ночь */
.poster[data-power="off"]{
  --sky-1:#2c4a63; --sky-2:#1b3348; --sky-3:#0e1d2d;
  --ridge-far:#42323f; --ridge-near:#291e26;
  --ground-1:#8a7444; --ground-2:#6b5733;
  --robot-filter:brightness(.62) saturate(.7) contrast(1.05);
  --star-op:1; --glow:1; --grain-op:.38;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--sky-3);
  color:var(--ink);
  font-family:'Oswald','Arial Narrow',system-ui,sans-serif;
  overflow-x:hidden;
}
img{max-width:100%;display:block}

/* ─────────────── сцена ─────────────── */
.poster{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  overflow:hidden;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  transition:background-color .6s ease;
}
.layer{position:absolute;inset:-4% -4% -4% -4%;pointer-events:none;z-index:0}

.sky{
  background:
    radial-gradient(120% 85% at 50% 96%, rgba(230,196,128,.35) 0%, rgba(230,196,128,0) 55%),
    radial-gradient(110% 90% at 50% 30%, var(--sky-1) 0%, var(--sky-2) 48%, var(--sky-3) 100%);
  transition:background .6s ease;
}

/* звёзды рисует JS */
.stars{opacity:var(--star-op);transition:opacity .6s ease}
.stars span{
  position:absolute;display:block;background:var(--gold-hi);
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  animation:twinkle var(--dur,4s) ease-in-out var(--del,0s) infinite;
}
@keyframes twinkle{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.12)}}

.bolts{}
.bolt{position:absolute;width:clamp(26px,3.4vw,46px);height:auto;aspect-ratio:80/200;overflow:visible;
      animation:flick 6s steps(1) infinite}
.bolt--1{left:85%;top:9%;transform:rotate(6deg)}
.bolt--2{left:93.5%;top:22%;transform:rotate(-9deg);width:clamp(20px,2.6vw,34px)}
.bolt--3{left:9%;top:29%;transform:rotate(-4deg);width:clamp(22px,2.9vw,38px)}
.bolt path{fill:var(--gold);stroke:rgba(43,28,16,.55);stroke-width:3;stroke-linejoin:round}
.bolt{animation:flick 6s steps(1) infinite;transform-origin:center}
.bolt--2{animation-delay:2.1s}
.bolt--3{animation-delay:4.3s}
@keyframes flick{0%,88%{opacity:.92}90%{opacity:.35}92%{opacity:1}94%{opacity:.5}96%,100%{opacity:.92}}

.ridge{top:auto;bottom:24%;height:34%;width:108%;left:-4%}
.ridge--far path{fill:var(--ridge-far)}
.ridge--near{height:26%}
.ridge--near path{fill:var(--ridge-near)}
.ridge path{transition:fill .6s ease}

.ground{
  top:auto;bottom:-4%;height:30%;
  background:linear-gradient(to bottom,var(--ground-1) 0%,var(--ground-2) 100%);
  box-shadow:0 -2px 0 rgba(43,28,16,.25);
  transition:background .6s ease;
}

/* ─────────── печатные текстуры ─────────── */
.halftone{
  background-image:radial-gradient(circle at 50% 50%,rgba(30,18,8,.55) .9px,transparent 1.1px);
  background-size:4px 4px;
  mix-blend-mode:multiply;opacity:var(--half-op);
}
.grain{
  background-image:url('grain.png');
  background-image:image-set(url('grain.webp') type('image/webp'), url('grain.png') type('image/png'));
  background-size:512px 220px;
  mix-blend-mode:multiply;opacity:var(--grain-op);
  transition:opacity .6s ease;
}
.vignette{
  background:radial-gradient(120% 100% at 50% 45%,transparent 45%,rgba(35,20,8,.5) 100%);
  mix-blend-mode:multiply;
}

/* ─────────── тумблер питания ─────────── */
.power{
  position:absolute;z-index:8;
  top:clamp(22px,3.4vh,38px);right:clamp(22px,3.4vw,42px);
  display:flex;align-items:center;gap:.5rem;
  padding:.4rem .7rem;
  background:var(--cream);color:var(--ink);
  border:3px solid var(--ink);border-radius:3px;
  font:600 clamp(10px,1.05vw,12px)/1 'Oswald',sans-serif;
  letter-spacing:.13em;text-transform:uppercase;
  white-space:nowrap;cursor:pointer;
  box-shadow:3px 3px 0 rgba(43,28,16,.5);
  transform:rotate(1.4deg);
  transition:transform .15s ease,box-shadow .15s ease;
}
.power:hover{transform:rotate(1.4deg) translateY(-2px);box-shadow:3px 5px 0 rgba(43,28,16,.55)}
.power:active{transform:rotate(1.4deg) translate(2px,2px);box-shadow:1px 1px 0 rgba(43,28,16,.5)}
.power__slot{width:34px;height:16px;border:2px solid var(--ink);border-radius:2px;background:#b9a884;position:relative;flex:none}
.power__knob{position:absolute;top:1px;bottom:1px;left:1px;width:14px;background:var(--ink);transition:transform .18s cubic-bezier(.3,1.6,.5,1)}
.poster[data-power="on"] .power__knob{transform:translateX(15px)}
.power__state{min-width:5.6em;text-align:left;color:var(--orange)}

/* ─────────────── контент ─────────────── */
.content{
  position:relative;z-index:5;
  flex:1;
  width:min(1320px,100%);
  margin:0 auto;
  padding:clamp(72px,10vh,110px) clamp(46px,6vw,84px) clamp(20px,3vh,34px);
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  grid-template-areas:"top robot" "bottom robot";
  grid-template-rows:auto 1fr;
  align-content:center;
  column-gap:clamp(12px,3vw,44px);
}
.copy,.robot-wrap{min-width:0;max-width:100%}
.copy--top{grid-area:top;align-self:start}
.copy--bottom{grid-area:bottom;align-self:start;padding-top:clamp(14px,2.4vh,26px)}
.robot-wrap{grid-area:robot;align-self:center;justify-self:center;position:relative}

/* ─────────── типографика плаката ─────────── */
.kicker{
  margin:0 0 clamp(28px,4.7vh,48px);
  font:500 clamp(11px,1.25vw,15px)/1.2 'Oswald',sans-serif;
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--cream);
  text-shadow:2px 2px 0 rgba(28,16,8,.6);
}
.title{
  position:relative;margin:.14em 0 0;
  font-family:'Rubik Mono One','Impact',sans-serif;
  font-size:clamp(26px,4.55vw,56px);
  line-height:1.0;
  letter-spacing:-.02em;word-spacing:-.42em;text-wrap:balance;
  color:var(--gold);
  text-transform:uppercase;
  transform:rotate(-2.7deg);
  transform-origin:left center;
  filter:drop-shadow(5px 6px 0 rgba(28,16,8,.45));
}
.title::before{
  content:attr(data-text);
  position:absolute;left:0;top:0;width:100%;
  -webkit-text-stroke:clamp(7px,1.15vw,13px) #33200f;
  color:#33200f;
  z-index:-1;
}
.subtitle{
  position:relative;
  margin:clamp(6px,1.2vh,14px) 0 0;
  font-family:'Russo One','Arial Black',sans-serif;
  font-size:clamp(15px,2.25vw,27px);
  line-height:1;
  letter-spacing:.005em;
  color:var(--orange);
  text-transform:uppercase;
  transform:rotate(-2deg) skewX(-7deg);
  transform-origin:left center;
  filter:drop-shadow(3px 4px 0 rgba(28,16,8,.4));
}
.subtitle::before{
  content:attr(data-text);
  position:absolute;left:0;top:0;width:100%;
  -webkit-text-stroke:clamp(5px,.75vw,9px) #3a2110;
  color:#3a2110;z-index:-1;
}
.tagline{
  margin:clamp(12px,2vh,20px) 0 0;
  font:700 italic clamp(13px,1.6vw,20px)/1.15 'Oswald',sans-serif;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold-hi);
  text-shadow:2px 2px 0 rgba(28,16,8,.65);
  max-width:28ch;
}

/* ─────────── список и ссылки ─────────── */
.specs{
  list-style:none;margin:0 0 clamp(14px,2.4vh,22px);padding:0;
  display:grid;gap:.4rem;
  font:400 clamp(12px,1.28vw,15.5px)/1.35 'Oswald',sans-serif;
  letter-spacing:.05em;text-transform:uppercase;
  color:var(--cream);
  max-width:44ch;
}
.specs li{position:relative;padding-left:1.55em;text-shadow:1px 1px 0 rgba(28,16,8,.55)}
.specs li::before{
  content:"";position:absolute;left:0;top:.35em;
  width:.72em;height:.72em;
  background:var(--gold);
  border:2px solid rgba(28,16,8,.75);
  clip-path:polygon(50% 0,100% 38%,81% 100%,19% 100%,0 38%);
}

.links{display:flex;flex-wrap:wrap;gap:.5rem .55rem}
.chip{
  -webkit-appearance:none;appearance:none;
  display:inline-block;
  padding:.42em .95em .34em;
  background:var(--cream);color:var(--ink);
  border:3px solid var(--ink);border-radius:2px;
  font:600 clamp(12px,1.25vw,15px)/1.25 'Oswald',sans-serif;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  cursor:pointer;
  box-shadow:3px 3px 0 rgba(43,28,16,.55);
  transition:transform .14s ease,box-shadow .14s ease,background-color .14s ease;
}
.chip:nth-child(2){transform:rotate(-1.6deg)}
.chip:nth-child(3){transform:rotate(1.2deg)}
.chip:hover,.chip:focus-visible{background:var(--gold-hi);transform:translateY(-3px) rotate(0deg);box-shadow:4px 7px 0 rgba(43,28,16,.55)}
.chip:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(43,28,16,.55)}

.stamp{
  margin:clamp(14px,2.4vh,22px) 0 0;
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;
  font:600 clamp(11px,1.1vw,14px)/1 'Oswald',sans-serif;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);
}
.stamp__box{
  padding:.34em .6em .26em;
  border:2.5px solid var(--ink);
  background:rgba(246,234,208,.92);
  transform:rotate(-1deg);
}
.stamp__made{
  padding:.34em .6em .26em;
  background:rgba(43,28,16,.62);color:var(--cream);
  letter-spacing:.1em;
  transform:rotate(.8deg);
  text-shadow:1px 1px 0 rgba(0,0,0,.45);
}

/* ─────────────── робот ─────────────── */
.robot-wrap{width:clamp(210px,28.5vw,378px);margin-top:clamp(0px,2.4vh,28px)}
.robot{
  position:relative;width:100%;
  aspect-ratio:625/748;
  cursor:pointer;
  animation:float 6.5s ease-in-out infinite;
  transform-origin:50% 92%;
  outline:none;
}
.robot:focus-visible{filter:drop-shadow(0 0 0 3px var(--gold-hi))}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-11px) rotate(-.7deg)}}
.robot picture{display:block;width:100%}
.robot__img{
  width:100%;height:auto;
  filter:var(--robot-filter) drop-shadow(6px 10px 12px rgba(30,16,6,.45));
  -webkit-user-drag:none;user-select:none;
}
.robot:active .robot picture{display:block;width:100%}
.robot__img{transform:scale(.985)}
.robot picture{display:block;width:100%}
.robot__img{transition:filter .6s ease,transform .12s ease}
.robot__shadow{
  position:absolute;left:50%;bottom:-2.5%;
  width:78%;height:6.5%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(40,22,8,.62) 0%,rgba(40,22,8,.28) 45%,rgba(40,22,8,0) 72%);
  animation:shadowPulse 6.5s ease-in-out infinite;
}
@keyframes shadowPulse{0%,100%{opacity:.85;transform:translateX(-50%) scale(1)}50%{opacity:.6;transform:translateX(-50%) scale(.9)}}

/* детали, посаженные по координатам оригинала */
.part{position:absolute;transform:translate(-50%,-50%);pointer-events:none}

.eye{border-radius:50%;overflow:hidden}
.eye--l{left:42.6%;top:40.1%;width:13.1%;height:11.4%}
.eye--r{left:56.6%;top:40.9%;width:14.6%;height:13.4%}
.glint{
  position:absolute;left:30%;top:24%;
  width:24%;height:20%;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,rgba(255,255,255,.92),rgba(255,255,255,.14) 70%,transparent 72%);
  transition:transform .16s ease-out,opacity .5s ease;
  opacity:.7;
}
.lid{
  position:absolute;inset:-6% -6% auto;height:112%;
  background:linear-gradient(to bottom,var(--face-dark) 0%,var(--face) 78%,var(--face) 100%);
  border-bottom:2px solid rgba(50,28,10,.5);
  transform:translateY(-102%);
  will-change:transform;
}
.robot.is-blinking .lid{animation:blink .19s ease-in-out}
@keyframes blink{0%{transform:translateY(-102%)}45%,55%{transform:translateY(0)}100%{transform:translateY(-102%)}}

.mouth{
  left:46.7%;top:49.9%;width:13.6%;height:5.6%;
  border-radius:40%;
  background:radial-gradient(ellipse at center,rgba(255,214,120,.8),rgba(255,180,60,0) 70%);
  opacity:0;
}
.robot.is-talking .mouth{animation:mouthBuzz .28s steps(2) infinite}
@keyframes mouthBuzz{0%{opacity:.15}50%{opacity:.85}100%{opacity:.25}}

/* зелёный дисплей на груди — «терминал» */
.screen{
  left:32.3%;top:78.5%;width:6.7%;height:7.1%;
  background:linear-gradient(rgba(120,255,170,.5),rgba(60,220,140,.15));
  mix-blend-mode:screen;
  opacity:.35;
  animation:scan 3.4s ease-in-out infinite;
}
@keyframes scan{0%,100%{opacity:.18}42%{opacity:.62}46%{opacity:.28}52%{opacity:.7}}

.led{border-radius:1px;opacity:.25;mix-blend-mode:screen;animation:ledBlink 1.9s steps(1) infinite}
.led--1{left:66.1%;top:28.9%;width:2.6%;height:2.9%;background:#31d6c8;box-shadow:0 0 8px #31d6c8}
.led--2{left:69.5%;top:29.1%;width:2.7%;height:2.8%;background:#ffe14d;box-shadow:0 0 8px #ffe14d;animation-delay:.63s}
.led--3{left:73.4%;top:29.1%;width:2.7%;height:2.9%;background:#ff9a2e;box-shadow:0 0 8px #ff9a2e;animation-delay:1.26s}
.led--r{left:68.3%;top:80.5%;width:4.6%;height:3.3%;background:#ff4a2e;box-shadow:0 0 10px #ff4a2e;animation-delay:.31s}
@keyframes ledBlink{0%,32%{opacity:.6}33%,100%{opacity:.12}}

/* выключено — гаснут лампочки и блики */
.poster[data-power="off"] .led,
.poster[data-power="off"] .screen{animation:none;opacity:.1}
.poster[data-power="off"] .glint{opacity:0}
.poster[data-power="off"] .robot{animation-play-state:paused}

/* ─────────── реплика робота ─────────── */
.bubble{
  position:absolute;
  left:50%;bottom:calc(100% - 4%);
  transform:translate(-46%,10px) rotate(-1.5deg) scale(.94);
  width:max-content;max-width:min(260px,62vw);
  padding:.62em .85em .55em;
  background:var(--cream);color:var(--ink);
  border:3px solid var(--ink);border-radius:4px;
  font:500 clamp(12px,1.2vw,14.5px)/1.3 'Oswald',sans-serif;
  letter-spacing:.04em;text-transform:uppercase;
  box-shadow:4px 5px 0 rgba(43,28,16,.5);
  opacity:0;visibility:hidden;
  transition:opacity .22s ease,transform .22s cubic-bezier(.3,1.5,.5,1),visibility .22s;
  z-index:3;
}
.bubble::after{
  content:"";position:absolute;left:34%;top:100%;
  border:11px solid transparent;border-top-color:var(--ink);
}
.bubble::before{
  content:"";position:absolute;left:calc(34% + 3px);top:calc(100% - 4px);
  border:8px solid transparent;border-top-color:var(--cream);z-index:1;
}
.bubble.is-on{opacity:1;visibility:visible;transform:translate(-46%,0) rotate(-1.5deg) scale(1)}
.bubble__text::after{content:"▌";animation:caret .7s steps(1) infinite;margin-left:1px}
.bubble.is-done .bubble__text::after{content:""}
@keyframes caret{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ─────────── низ плаката ─────────── */
.disclaimer{
  position:relative;z-index:5;
  width:min(1320px,100%);margin:0 auto;
  padding:0 clamp(46px,6vw,84px) clamp(46px,6vh,64px);
  font:500 clamp(9px,.92vw,11.5px)/1.5 'Oswald',sans-serif;
  letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink);opacity:.82;
}
.disclaimer p{margin:0;max-width:64ch}

/* ─────────── тост «скопировано» ─────────── */
.toast{
  position:fixed;left:50%;bottom:26px;z-index:20;
  transform:translate(-50%,14px);
  padding:.5em .95em .42em;
  background:var(--ink);color:var(--gold-hi);
  border:2px solid var(--gold);
  font:600 12px/1 'Oswald',sans-serif;letter-spacing:.18em;text-transform:uppercase;
  opacity:0;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ═══════════ адаптив ═══════════ */
@media (max-width:900px){
  .content{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"top" "robot" "bottom";
    grid-template-rows:auto auto auto;
    justify-items:center;text-align:center;
    row-gap:clamp(8px,1.6vh,14px);
    padding:clamp(48px,6.5vh,72px) clamp(38px,7vw,56px) clamp(12px,1.6vh,22px);
  }
  .title,.subtitle{transform-origin:center}
  .title{font-size:clamp(22px,6.6vw,46px)}
  .subtitle{font-size:clamp(14px,3.8vw,26px)}
  .tagline{max-width:none}
  .specs{max-width:38ch;text-align:left;justify-items:start}
  .links{justify-content:center}
  .stamp{justify-content:center}
  .robot-wrap{width:clamp(175px,40vw,250px);margin-top:clamp(20px,3vh,36px)}
  .disclaimer{text-align:center;margin-inline:auto;
    padding:0 clamp(38px,7vw,56px) clamp(30px,4.2vh,46px)}
  .disclaimer p{max-width:none}
  .power{top:16px;right:16px;padding:.35rem .55rem}
}

@media (max-width:520px){
  .content{padding:54px 20px 14px}
  .disclaimer{padding:0 20px 38px;letter-spacing:.08em}
  .kicker{letter-spacing:.2em}
  .power__label{display:none}
  .specs{font-size:13px}
  .bubble{max-width:74vw}
}

/* телефон в альбомной ориентации — снова две колонки, иначе бесконечная прокрутка */
@media (max-width:900px) and (max-height:560px) and (orientation:landscape){
  .content{
    grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
    grid-template-areas:"top robot" "bottom robot";
    grid-template-rows:auto 1fr;
    justify-items:start;text-align:left;
    padding:34px clamp(30px,4.5vw,48px) 8px;
    row-gap:4px;
  }
  .title,.subtitle{transform-origin:left center}
  .title{font-size:clamp(20px,4.4vw,34px)}
  .subtitle{font-size:clamp(13px,2.5vw,20px)}
  .tagline{font-size:12px;margin-top:6px}
  .specs{font-size:11px;gap:.2rem;margin-bottom:.5rem}
  .chip{font-size:11px;padding:.35em .7em .28em}
  .stamp{font-size:10px;margin-top:.5rem;justify-content:flex-start}
  .links{justify-content:flex-start}
  .robot-wrap{width:min(30vw,36vh);margin-top:0;justify-self:center}
  .disclaimer{text-align:left;margin:0 auto;padding:0 clamp(30px,4.5vw,48px) 16px}
  .power{top:10px;right:10px}
}

@media (max-height:560px) and (min-width:901px){
  .content{padding-top:56px}
  .robot-wrap{width:clamp(160px,22vw,260px)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.05ms!important}
  .robot{animation:none}
}