/* WEBMADE — ефекти: завантаження, курсор, робот, редактор коду, телевізори, появи */
.pre{position:fixed;inset:0;z-index:200;pointer-events:none}
.pre-a,.pre-b{position:absolute;left:0;right:0;height:50.5%;background:#121212;transition:transform 1.05s var(--ease2)}
.pre-a{top:0}.pre-b{bottom:0}
.pre-n{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--disp);font-weight:900;font-size:clamp(120px,22vw,320px);line-height:.8;color:var(--paper);font-variant-numeric:tabular-nums;transition:opacity .35s}
.pre-n::after{content:"%";font-size:.3em;color:var(--red);margin-left:.04em}
.pre-t{position:absolute;left:50%;bottom:40px;transform:translateX(-50%);font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:#8f8a80;white-space:nowrap;transition:opacity .35s}
.loaded .pre-a{transform:translateY(-101%)}.loaded .pre-b{transform:translateY(101%)}
.loaded .pre-n,.loaded .pre-t{opacity:0}

.grain{position:fixed;inset:-50%;z-index:150;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain .9s steps(5) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-4%,3%)}50%{transform:translate(3%,-5%)}75%{transform:translate(-2%,4%)}100%{transform:translate(4%,-2%)}}
.progress{position:fixed;left:0;top:0;z-index:170;width:100%;height:3px;background:var(--red);transform-origin:left;transform:scaleX(0)}
@keyframes blink{50%{opacity:0}}

.cur{position:fixed;left:0;top:0;z-index:180;pointer-events:none}
.cur i{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--red);transition:width .4s var(--ease),height .4s var(--ease),margin .4s var(--ease)}
.cur span{position:absolute;transform:translate(-50%,-50%) scale(.5);font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.12em;color:#fff;opacity:0;white-space:nowrap;transition:opacity .2s,transform .4s var(--ease)}
.cur.lab i{width:84px;height:84px;margin:-42px 0 0 -42px}
.cur.lab span{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media (hover:none),(pointer:coarse){.cur{display:none}}

.toast{position:fixed;left:50%;bottom:26px;z-index:190;transform:translate(-50%,160px);opacity:0;background:#111;color:#f1ede4;font-family:var(--mono);font-size:12px;letter-spacing:.04em;line-height:1.5;padding:14px 18px;border-left:4px solid var(--red);width:max-content;max-width:calc(100vw - 32px);transition:transform .5s var(--ease),opacity .3s}
.toast.show{transform:translate(-50%,0);opacity:1}

/* поява елементів */
[data-r=up]{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0s)}
[data-r=up].in{opacity:1;transform:none}
[data-r=line]{transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease2) .2s}
[data-r=line].in{transform:none}
.mask{display:inline-block;overflow:hidden;vertical-align:top;padding:.14em 0 .03em;margin-top:-.14em}
.mask>span{display:inline-block;transform:translateY(106%);transition:transform 1.15s var(--ease);transition-delay:var(--d,0s)}
.mask.in>span{transform:none}
.script{clip-path:inset(0 100% 0 0);padding:0 .14em .08em 0;transition:clip-path 1.6s cubic-bezier(.65,.05,.36,1) .3s}
.script.in{clip-path:inset(0 0 0 0)}
[data-r=stamp]{opacity:0;transform:scale(2.6) rotate(-24deg)}
[data-r=stamp].in{opacity:1;transform:rotate(-8deg);transition:transform .55s cubic-bezier(.3,1.6,.5,1) .2s,opacity .2s .2s}

/* велетенське слово */
.mega .ch{display:inline-block;overflow:hidden;vertical-align:top;padding-top:.06em;margin-top:-.06em;will-change:transform;transform-origin:50% 100%}
.mega .ch>span{display:inline-block;transform:translateY(112%);transition:transform 1.25s var(--ease);transition-delay:calc(var(--i)*70ms + .05s)}
.go .mega .ch>span{transform:none}

/* наліпка і значки */
.note{position:relative;width:176px!important;padding:26px 22px 20px;background:linear-gradient(160deg,#ebe1cb,#d6c9ae);box-shadow:0 16px 26px rgba(0,0,0,.2);font-family:var(--hand);font-weight:600;font-size:32px;line-height:.92;text-transform:uppercase;transform-origin:50% 0;animation:sway 5.5s ease-in-out infinite;cursor:default}
.note s{text-decoration-color:var(--red);text-decoration-thickness:3px}
@keyframes sway{0%,100%{transform:rotate(9deg)}50%{transform:rotate(5deg) translateY(3px)}}
.tape{position:absolute;left:50%;top:-12px;width:80px;height:24px;margin-left:-40px;background:rgba(236,228,206,.85);box-shadow:0 1px 3px rgba(0,0,0,.15);transform:rotate(-4deg);z-index:2}
.spin{transform-box:fill-box;transform-origin:center;animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.badge:hover .spin{animation-duration:4s}

/* червоний робот з камерою */
.bot-stage{cursor:pointer;-webkit-tap-highlight-color:transparent}
.bot-body{transform-box:view-box;transform-origin:290px 600px;animation:breath 5s ease-in-out infinite}
@keyframes breath{50%{transform:translateY(3px)}}
.bot-head{transform-box:view-box;transform-origin:292px 312px;will-change:transform}
.bot-cable{transform-box:view-box;transform-origin:182px 246px;animation:cable 6s ease-in-out infinite}
@keyframes cable{50%{transform:rotate(2.4deg)}}
.bot-rec{animation:blink 1.1s steps(2) infinite}
.bot-focus{animation:focus 3.6s ease-in-out infinite}
@keyframes focus{50%{stroke-dashoffset:11}}
.bot-iris{transform-box:fill-box;transform-origin:center;animation:iris 5s ease-in-out infinite}
@keyframes iris{0%,100%{transform:scale(1)}45%{transform:scale(.55)}55%{transform:scale(1.15)}}
.bot-glint{transform-box:fill-box;animation:glint 4s ease-in-out infinite}
@keyframes glint{50%{opacity:.3;transform:translateY(10px)}}
.bot-hood{transform-box:view-box;transition:transform .45s var(--ease)}
.bot-flash{opacity:0;pointer-events:none}
.bot-stage.snap .bot-hood{transform:translateX(12px)}
.bot-stage.snap .bot-flash{animation:flash .65s ease-out}
@keyframes flash{0%{opacity:.95}100%{opacity:0}}
.chip{position:absolute;z-index:5;padding:8px 12px;font-family:var(--mono);font-size:13px;font-weight:600;line-height:1;color:#111;background:#f4f1ea;border:2px solid #111;box-shadow:4px 4px 0 #111;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;white-space:nowrap;animation:bob 5s ease-in-out infinite;transition:box-shadow .2s}
.chip.drag{cursor:grabbing;box-shadow:9px 9px 0 #111;z-index:6;animation-play-state:paused}
@keyframes bob{50%{transform:translateY(-8px)}}
.chip-a{left:-3%;top:30%;rotate:-10deg;background:var(--red);color:#fff}
.chip-b{right:0;top:64%;rotate:8deg;background:#7dff6b;animation-delay:-1.5s}
.chip-c{left:4%;bottom:16%;rotate:6deg;animation-delay:-3s}
.chip-d{right:6%;top:10%;rotate:-6deg;background:var(--yel);animation-delay:-2s}
@media (max-width:520px){.chip{font-size:11px;padding:6px 9px}}

/* редактор коду */
.ide{width:100%;max-width:520px;overflow:hidden;border-radius:12px;background:#141414;color:#e9e4da;font-family:var(--mono);box-shadow:0 30px 60px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.6);rotate:-1.5deg}
.ide-bar{display:flex;align-items:center;gap:7px;padding:10px 12px;background:#1d1d1d;border-bottom:1px solid #2a2a2a}
.ide-bar>i{width:11px;height:11px;border-radius:50%;background:#3a3a3a}
.ide-bar>i:first-child{background:var(--red)}
.ide-tab{font-size:11px;padding:5px 10px;border-radius:6px;color:#8d877d}
.ide-tab:first-of-type{margin-left:8px}
.ide-tab.on{background:#141414;color:#f1ede4}
.ide-live{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.14em;color:#ff6152}
.ide-live b{width:7px;height:7px;border-radius:50%;background:#ff3b30;animation:blink 1.1s steps(2) infinite}
.ide-body{padding:14px 0;min-height:250px;font-size:13px;line-height:1.75;counter-reset:ln}
.ide-code .l{display:block;padding-right:14px;white-space:pre;overflow:hidden}
.ide-code .l::before{counter-increment:ln;content:counter(ln);display:inline-block;width:42px;padding-right:14px;text-align:right;color:#55524c}
.ide-code .k{color:#ff6152}.ide-code .s{color:#ffd166}.ide-code .c{color:#7d7a72}.ide-code .f{color:#8fd3ff}
.caret{display:inline-block;width:.55em;height:1.15em;background:#e9e4da;vertical-align:-.22em;animation:blink 1s steps(2) infinite}
.ide-term{min-height:112px;padding:10px 16px 12px;border-top:1px solid #2a2a2a;background:#0e0e0e;font-size:11.5px;line-height:1.7;color:#bdb7ac;white-space:pre-wrap}
.ide-term .ok{color:#7dff6b}.ide-term .red{color:#ff6152}.ide-term .y{color:#ffd166}
@media (max-width:520px){.ide-body{font-size:11px;min-height:210px}.ide-code .l::before{width:30px;padding-right:10px}.ide-term{font-size:10px}}

/* телевізори */
.tv-stack{display:flex;flex-direction:column;align-items:center;gap:4px}
.tv{position:relative;width:100%;cursor:pointer;filter:drop-shadow(0 14px 18px rgba(0,0,0,.35));transition:transform .45s var(--ease);-webkit-tap-highlight-color:transparent}
.tv:hover{transform:translateY(-4px) rotate(-.6deg)}
.tv-stack:first-child .tv:first-child{width:86%}
.tv-stack:last-child .tv:first-child{width:92%}
.tv-body{position:relative;display:grid;grid-template-columns:1fr 23%;gap:4%;padding:5.5% 4.5% 5.5% 5.5%;border-radius:12px;background:var(--tvb);box-shadow:inset 0 2px 1px rgba(255,255,255,.3),inset 0 -8px 16px rgba(0,0,0,.4)}
.tv-screen{position:relative;aspect-ratio:4/3;border-radius:13% / 17%;overflow:hidden;background:#040404;box-shadow:0 0 0 5px var(--bezel),0 0 0 7px rgba(0,0,0,.45),inset 0 0 30px rgba(0,0,0,.9);isolation:isolate;container-type:inline-size}
.tv-panel{display:flex;flex-direction:column;align-items:center;gap:9%;padding:9% 0;border-radius:6px;background:var(--panel);box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
.knob{position:relative;width:64%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#c4c4c4,#3a3a3a 55%,#151515);box-shadow:0 3px 5px rgba(0,0,0,.55),inset 0 1px 1px rgba(255,255,255,.45);transform:rotate(var(--rot,0deg));transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.knob::after{content:"";position:absolute;left:47%;top:8%;width:6%;height:38%;border-radius:2px;background:#eee}
.knob+.knob{width:46%}
.grill{flex:1;width:78%;min-height:16px;border-radius:4px;background:repeating-linear-gradient(0deg,rgba(0,0,0,.55) 0 2px,transparent 2px 5px)}
.tv-feet{display:flex;justify-content:space-between;width:76%;height:8px;margin:0 auto}
.tv-feet::before,.tv-feet::after{content:"";width:15%;background:#151515;border-radius:0 0 4px 4px}
.antenna{position:absolute;left:30%;top:-48px;width:40%;height:50px;pointer-events:none}
.antenna::before,.antenna::after{content:"";position:absolute;bottom:0;left:50%;width:2px;height:58px;background:#222;transform-origin:bottom}
.antenna::before{animation:antL 4s ease-in-out infinite}.antenna::after{animation:antR 4.6s ease-in-out infinite}
@keyframes antL{0%,100%{transform:rotate(-30deg)}50%{transform:rotate(-22deg)}}
@keyframes antR{0%,100%{transform:rotate(26deg)}50%{transform:rotate(34deg)}}
.tv--wood{--tvb:repeating-linear-gradient(95deg,rgba(255,255,255,.04) 0 2px,transparent 2px 9px),linear-gradient(160deg,#5a3d2c,#24160f);--bezel:#d3ccbf;--panel:linear-gradient(#3a271c,#20150e)}
.tv--cream{--tvb:linear-gradient(160deg,#f4efe4,#cfc6b2);--bezel:#202020;--panel:linear-gradient(#e2dccf,#c8bfab)}
.tv--steel{--tvb:linear-gradient(160deg,#ababa8,#5b5b59);--bezel:#1b1b1b;--panel:linear-gradient(#8c8c89,#585856)}
.tv--black{--tvb:linear-gradient(160deg,#323232,#0e0e0e);--bezel:#8d8d8a;--panel:linear-gradient(#262626,#0f0f0f)}
.tv--red{--tvb:linear-gradient(160deg,#ff5040,#a3130c);--bezel:#141414;--panel:linear-gradient(#c71c12,#860c07)}
.tv--white{--tvb:linear-gradient(160deg,#fbfbf9,#d6d6d2);--bezel:#262626;--panel:linear-gradient(#ececea,#cfcfcb)}
.tv-ch{position:absolute;inset:0;z-index:0}
.tv-ch.on{animation:poweron .38s ease-out}
@keyframes poweron{0%{transform:scale(1,.02);filter:brightness(4)}55%{transform:scale(1,1.06);filter:brightness(1.6)}100%{transform:none;filter:none}}
.tv-noise{position:absolute;inset:-25%;z-index:1;background-image:var(--tv-noise);background-size:150px;opacity:var(--n,.12);mix-blend-mode:screen;pointer-events:none;animation:tvn .32s steps(4) infinite;transition:opacity .12s}
@keyframes tvn{0%{transform:translate(0,0)}25%{transform:translate(-8%,5%)}50%{transform:translate(6%,-7%)}75%{transform:translate(-4%,8%)}100%{transform:translate(3%,-3%)}}
.tv.static .tv-noise{opacity:1;mix-blend-mode:normal}
.tv-scan{position:absolute;inset:0;z-index:2;background:repeating-linear-gradient(0deg,rgba(0,0,0,.3) 0 1px,transparent 1px 3px);pointer-events:none;overflow:hidden}
.tv-scan::after{content:"";position:absolute;left:0;right:0;height:30%;background:linear-gradient(transparent,rgba(255,255,255,.07),transparent);animation:rollbar 5s linear infinite}
@keyframes rollbar{from{top:-30%}to{top:100%}}
.tv-glass{position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(110% 80% at 25% 8%,rgba(255,255,255,.2),transparent 45%),radial-gradient(130% 130% at 50% 50%,transparent 56%,rgba(0,0,0,.75))}
.tv-osd{position:absolute;left:9%;top:8%;z-index:4;font-family:var(--mono);font-size:max(8px,4.2cqw);font-weight:500;color:#7dff6b;text-shadow:0 0 6px rgba(125,255,107,.85);letter-spacing:.1em;opacity:0;transition:opacity .2s}
.tv.osd .tv-osd{opacity:1}
.tv-say{position:absolute;inset:0;z-index:1;display:none;place-items:center;background:#0b0b0b;color:#f1ede4;font-family:var(--disp);font-weight:900;font-size:62cqw;line-height:1;text-shadow:4px 0 0 rgba(217,38,28,.9),-3px 0 0 rgba(0,200,255,.6)}
.tv.say .tv-say{display:grid;animation:say .5s steps(3) both}
@keyframes say{0%{transform:scale(1.4);opacity:0}40%{transform:scale(.96);opacity:1}100%{transform:none}}

/* канали */
.c-term,.c-log{position:absolute;inset:0;overflow:hidden;background:#080808;color:#d9d4ca;font-family:var(--mono);font-size:max(7px,4.6cqw);line-height:1.55;padding:9% 9%;white-space:pre}
.c-term .p{color:#7dff6b}.c-term .ok{color:#7dff6b}.c-term .r{color:#ff6152}
.c-term .bar{color:#ffd166}
.c-matrix,.c-pong{position:absolute;inset:0;width:100%;height:100%;display:block;background:#000}
.c-dvd{position:absolute;inset:0;background:#050505;overflow:hidden}
.c-dvd b{position:absolute;left:0;top:0;padding:3% 6%;border:2px solid currentColor;border-radius:999px;font-family:var(--mono);font-weight:600;font-size:max(9px,9cqw);line-height:1;white-space:nowrap;will-change:transform}
.c-dvd small{position:absolute;right:8%;bottom:8%;font-family:var(--mono);font-size:max(6px,3.6cqw);color:#6d6a63;letter-spacing:.1em}
.c-404{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:2%;background:#0d0d0d;color:#f1ede4;text-align:center}
.c-404 b{font-family:var(--disp);font-weight:900;font-size:34cqw;line-height:.85;letter-spacing:-.02em;text-shadow:5px 0 0 rgba(217,38,28,.9),-4px 0 0 rgba(0,200,255,.6);animation:g404 2.6s steps(1) infinite}
.c-404 span{font-family:var(--mono);font-size:max(6.5px,4.4cqw);letter-spacing:.12em}
.c-404 i{font-style:normal;font-family:var(--hand);font-size:max(9px,7.5cqw);color:#ffd166}
@keyframes g404{0%,86%,100%{transform:none}88%{transform:translateX(-4%) skewX(12deg)}91%{transform:translateX(4%)}94%{transform:skewX(-8deg)}}
.c-log>div{animation:scrollup 9s linear infinite}
.c-log .t{color:#6d6a63}.c-log .g{color:#7dff6b}.c-log .y{color:#ffd166}.c-log .r{color:#ff6152}
@keyframes scrollup{to{transform:translateY(-50%)}}

@media (prefers-reduced-motion:reduce){
  .grain,.note,.spin,.chip,.bot-body,.bot-cable,.bot-rec,.bot-focus,.bot-iris,.bot-glint,.tv-noise,.tv-scan::after,.antenna::before,.antenna::after,.c-log>div,.c-404 b{animation:none!important}
  [data-r]{opacity:1!important;transform:none!important;clip-path:none!important}
  .mask>span,.mega .ch>span{transform:none!important}
  .script{clip-path:none!important}
}