{"id":55,"date":"2025-11-08T08:43:41","date_gmt":"2025-11-08T08:43:41","guid":{"rendered":"https:\/\/katanabot.ru\/?page_id=55"},"modified":"2025-11-08T10:37:54","modified_gmt":"2025-11-08T10:37:54","slug":"404-2","status":"publish","type":"page","link":"https:\/\/katanabot.ru\/","title":{"rendered":"404"},"content":{"rendered":"<p>[et_pb_section fb_built=&#187;1&#8243; fullwidth=&#187;on&#187; theme_builder_area=&#187;post_content&#187; _builder_version=&#187;4.27.4&#8243; _module_preset=&#187;default&#187;][et_pb_fullwidth_code _builder_version=&#187;4.27.4&#8243; _module_preset=&#187;default&#187; theme_builder_area=&#187;post_content&#187; hover_enabled=&#187;0&#8243; sticky_enabled=&#187;0&#8243;]<!-- ONE-BLOCK: WebGL \u044f\u0440\u043a\u0438\u0435 \"\u043c\u0438\u0440\u0430\u0436\u0438\" + \u0441\u0442\u0435\u043a\u043b\u044f\u043d\u043d\u0430\u044f \u043f\u043b\u0430\u0448\u043a\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 iframe (Divi Ready) --><!-- [et_pb_line_break_holder] --><\/p>\n<div style=\"position:relative;min-height:100vh;width:100%;overflow:hidden;\"><!-- [et_pb_line_break_holder] -->  <iframe<!-- [et_pb_line_break_holder] -->    title=&#187;Mirage Glass&#187;<!-- [et_pb_line_break_holder] -->    style=&#187;display:block;border:0;margin:0;padding:0;width:100%;height:100vh;&#187;<!-- [et_pb_line_break_holder] -->    loading=&#187;eager&#187;<!-- [et_pb_line_break_holder] -->    referrerpolicy=&#187;no-referrer&#187;<!-- [et_pb_line_break_holder] -->    srcdoc=&#8217;<!-- [et_pb_line_break_holder] --><!DOCTYPE html><html lang=\"ru\"><head><!-- [et_pb_line_break_holder] --><meta charset=\"utf-8\"\/><!-- [et_pb_line_break_holder] --><meta name=\"viewport\" content=\"width=device-width,initial-scale=1\"\/><!-- [et_pb_line_break_holder] --><\/p>\n<style><!-- [et_pb_line_break_holder] -->  html,body{margin:0;height:100%;background:#000;overflow:hidden;}<!-- [et_pb_line_break_holder] -->  .wrap{position:relative;min-height:100vh;width:100%;display:grid;place-items:center;background:#000;}<!-- [et_pb_line_break_holder] -->  .glass{<!-- [et_pb_line_break_holder] -->    position:absolute;z-index:5;text-align:center;pointer-events:none;<!-- [et_pb_line_break_holder] -->    max-width:min(820px,94vw);width:100%;<!-- [et_pb_line_break_holder] -->    color:#0b0c1a;background:linear-gradient(180deg,rgba(255,255,255,.58),rgba(255,255,255,.40));<!-- [et_pb_line_break_holder] -->    border:1px solid rgba(255,255,255,.72);border-radius:24px;padding:clamp(24px,4.5vw,44px);<!-- [et_pb_line_break_holder] -->    backdrop-filter:blur(18px) saturate(1.25);-webkit-backdrop-filter:blur(18px) saturate(1.25);<!-- [et_pb_line_break_holder] -->    box-shadow:0 18px 60px rgba(0,0,0,.65),inset 0 0 90px rgba(255,255,255,.22);<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  .glass h1{margin:0 0 .25em;font-weight:800;line-height:1.05;letter-spacing:-.02em;font-size:clamp(30px,5vw,56px);color:#0a0b13;text-shadow:0 1px 0 rgba(255,255,255,.36);}<!-- [et_pb_line_break_holder] -->  .glass .lead{margin:0 0 .75em;font-size:clamp(16px,2.2vw,20px);color:#141626;opacity:.92;}<!-- [et_pb_line_break_holder] -->  .glass p{margin:0 0 1.1em;color:#161826;opacity:.96;}<!-- [et_pb_line_break_holder] -->  @media (max-width:480px){.glass{padding:26px;border-radius:20px}}<!-- [et_pb_line_break_holder] -->  \/* CSS fallback (\u0435\u0441\u043b\u0438 JS\/WebGL \u0437\u0430\u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043d) *\/<!-- [et_pb_line_break_holder] -->  .fb{position:absolute;inset:-20% -20%;z-index:0;filter:saturate(1.35) contrast(1.15);}<!-- [et_pb_line_break_holder] -->  .blob{position:absolute;width:65vmax;height:65vmax;border-radius:50%;filter:blur(85px);opacity:.9;mix-blend-mode:screen;animation:mv 32s ease-in-out infinite;}<!-- [et_pb_line_break_holder] -->  .b1{background:radial-gradient(circle at 30% 30%,#ff2f6e,#ff7aa1 55%,transparent 70%);left:-12vmax;top:-8vmax;animation-duration:36s}<!-- [et_pb_line_break_holder] -->  .b2{background:radial-gradient(circle at 70% 40%,#3b6cff,#79a2ff 55%,transparent 70%);right:-10vmax;top:10vmax;animation-direction:reverse;animation-duration:40s}<!-- [et_pb_line_break_holder] -->  .b3{background:radial-gradient(circle at 50% 70%,#00c9a8,#27e6a5 55%,transparent 70%);left:8vmax;bottom:-14vmax;animation-duration:44s}<!-- [et_pb_line_break_holder] -->  @keyframes mv{0%{transform:translate3d(0,0,0) scale(1)}25%{transform:translate3d(10vmax,-6vmax,0) scale(1.08) rotate(5deg)}50%{transform:translate3d(-8vmax,8vmax,0) scale(.94) rotate(-8deg)}75%{transform:translate3d(6vmax,4vmax,0) scale(1.06) rotate(3deg)}100%{transform:translate3d(0,0,0) scale(1)}}<!-- [et_pb_line_break_holder] --><\/style>\n<p><!-- [et_pb_line_break_holder] --><\/head><body><!-- [et_pb_line_break_holder] -->  <\/p>\n<div class=\"wrap\" id=\"root\"><!-- [et_pb_line_break_holder] -->    <!-- Fallback \u0441\u043b\u043e\u0438 (\u0441\u043a\u0440\u044b\u0432\u0430\u044e\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 WebGL \u0441\u0442\u0430\u0440\u0442\u0443\u0435\u0442) --><!-- [et_pb_line_break_holder] -->    <\/p>\n<div class=\"fb\" id=\"fb\">\n<div class=\"blob b1\"><\/div>\n<div class=\"blob b2\"><\/div>\n<div class=\"blob b3\"><\/div>\n<\/div>\n<p><!-- [et_pb_line_break_holder] -->    <!-- \u041f\u043b\u0430\u0448\u043a\u0430 --><!-- [et_pb_line_break_holder] -->    <\/p>\n<div class=\"glass\"><!-- [et_pb_line_break_holder] -->      <\/p>\n<h1>\u0421\u0430\u0439\u0442 \u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435<\/h1>\n<p><!-- [et_pb_line_break_holder] -->      <pee class=\"lead\">\u041c\u044b \u043f\u043e\u0447\u0442\u0438 \u0433\u043e\u0442\u043e\u0432\u044b\u2026 \u043c\u0438\u0440\u0430\u0436\u0438 \u0443\u0436\u0435 \u0442\u0430\u043d\u0446\u0443\u044e\u0442 \u2728<\/pee><!-- [et_pb_line_break_holder] -->      <pee>\u0417\u0430\u0433\u043b\u044f\u043d\u0438 \u043f\u043e\u0437\u0436\u0435 \u2014 \u0431\u0443\u0434\u0435\u0442 \u043a\u0440\u0430\u0441\u0438\u0432\u043e \u0438 \u0431\u044b\u0441\u0442\u0440\u043e \ud83d\ude05<\/pee><!-- [et_pb_line_break_holder] -->    <\/div>\n<p><!-- [et_pb_line_break_holder] -->  <\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  <!-- Three.js \u0438\u0437 CDN --><!-- [et_pb_line_break_holder] -->  <script src=\"https:\/\/unpkg.com\/three@0.160.0\/build\/three.min.js\"><\/script><!-- [et_pb_line_break_holder] -->  <script><!-- [et_pb_line_break_holder] -->  (function(){<!-- [et_pb_line_break_holder] -->    const root = document.getElementById(\"root\");<!-- [et_pb_line_break_holder] -->    const fb   = document.getElementById(\"fb\");<!-- [et_pb_line_break_holder] -->    try{<!-- [et_pb_line_break_holder] -->      const dpr = Math.min(2, window.devicePixelRatio||1);<!-- [et_pb_line_break_holder] -->      const r   = new THREE.WebGLRenderer({antialias:true,alpha:false,powerPreference:\"high-performance\"});<!-- [et_pb_line_break_holder] -->      r.setPixelRatio(dpr); r.setSize(root.clientWidth, root.clientHeight, false);<!-- [et_pb_line_break_holder] -->      r.setClearColor(0x000000,1); r.outputColorSpace = THREE.SRGBColorSpace;<!-- [et_pb_line_break_holder] -->      r.toneMapping = THREE.ACESFilmicToneMapping; r.toneMappingExposure = 1.6; r.autoClear = true;<!-- [et_pb_line_break_holder] -->      root.prepend(r.domElement);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->      \/\/ === \u0421\u0446\u0435\u043d\u0430 1: \u042f\u0420\u041a\u0418\u0415 \"\u041c\u0418\u0420\u0410\u0416\u0418\" (\u043f\u043e\u043b\u043d\u043e\u044d\u043a\u0440\u0430\u043d\u043d\u044b\u0439 \u0448\u0435\u0439\u0434\u0435\u0440) ===<!-- [et_pb_line_break_holder] -->      const s1 = new THREE.Scene();<!-- [et_pb_line_break_holder] -->      const camO = new THREE.OrthographicCamera(-1,1,1,-1,0,1);<!-- [et_pb_line_break_holder] -->      const vtx = \"precision highp float;attribute vec3 position;void main(){gl_Position=vec4(position,1.0);}\";<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->      const frag = `<!-- [et_pb_line_break_holder] -->        precision highp float;<!-- [et_pb_line_break_holder] -->        uniform vec2  uRes;<!-- [et_pb_line_break_holder] -->        uniform float uTime;<!-- [et_pb_line_break_holder] -->        uniform vec2  uDrive;<!-- [et_pb_line_break_holder] -->        uniform float uBoost;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        float h(vec2 p){ return fract(sin(dot(p, vec2(127.1,311.7)))*43758.5453); }<!-- [et_pb_line_break_holder] -->        float n(vec2 p){ vec2 i=floor(p), f=fract(p);<!-- [et_pb_line_break_holder] -->          float a=h(i), b=h(i+vec2(1,0)), c=h(i+vec2(0,1)), d=h(i+vec2(1,1));<!-- [et_pb_line_break_holder] -->          vec2 u=f*f*(3.-2.*f); return mix(a,b,u.x)+(c-a)*u.y*(1.-u.x)+(d-b)*u.x*u.y; }<!-- [et_pb_line_break_holder] -->        float fbm(vec2 p){ float v=0., a=.5; for(int i=0;i<5;i++){ v+=a*n(p); p*=2.; a*=.5; } return v; }<!-- [et_pb_line_break_holder] -->        float cloud(vec2 uv, vec2 c, float r){ vec2 d=uv-c; float l=length(d); float k=smoothstep(r, r*0.2, l); return 1.0-k; }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        void main(){<!-- [et_pb_line_break_holder] -->          vec2 res=uRes;<!-- [et_pb_line_break_holder] -->          vec2 uv=(gl_FragCoord.xy-0.5*res)\/res.y;<!-- [et_pb_line_break_holder] -->          float t=uTime;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->          \/\/ \u043f\u0430\u0440\u0430\u043b\u043b\u0430\u043a\u0441 (\u0440\u0430\u0437\u043d\u0430\u044f \"\u0433\u043b\u0443\u0431\u0438\u043d\u0430\")<!-- [et_pb_line_break_holder] -->          vec2 P0=uv+uDrive*0.04, P1=uv+uDrive*0.07, P2=uv+uDrive*0.10;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->          \/\/ \u0442\u0440\u0430\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0446\u0435\u043d\u0442\u0440\u043e\u0432<!-- [et_pb_line_break_holder] -->          vec2 c1=0.55*vec2(sin(t*0.95),cos(t*1.10))+vec2(-0.35,0.10);<!-- [et_pb_line_break_holder] -->          vec2 c2=0.62*vec2(cos(t*0.78),sin(t*0.66))+vec2( 0.40,0.00);<!-- [et_pb_line_break_holder] -->          vec2 c3=0.70*vec2(sin(t*0.52),cos(t*0.42))+vec2(-0.05,-0.38);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->          float a1=cloud(P0,c1,0.62), a2=cloud(P1,c2,0.60), a3=cloud(P2,c3,0.64);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->          \/\/ \"\u0434\u044b\u0445\u0430\u043d\u0438\u0435\"<!-- [et_pb_line_break_holder] -->          float m=fbm(uv*2.8+vec2(t*0.12,-t*0.09));<!-- [et_pb_line_break_holder] -->          a1*=1.05+0.35*m; a2*=1.05+0.35*m; a3*=1.05+0.35*m;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->          \/\/ \u043f\u0430\u043b\u0438\u0442\u0440\u0430<!-- [et_pb_line_break_holder] -->          vec3 p1=vec3(1.00,0.28,0.58), p2=vec3(0.36,0.64,1.00), p3=vec3(0.20,0.98,0.76);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->          \/\/ \u0438\u043d\u0442\u0435\u043d\u0441\u0438\u0432\u043d\u043e\u0435 \u0441\u043c\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u0435<!-- [et_pb_line_break_holder] -->          vec3 col=vec3(0.0);<!-- [et_pb_line_break_holder] -->          col += p1*a1*1.85;<!-- [et_pb_line_break_holder] -->          col += p2*a2*1.85;<!-- [et_pb_line_break_holder] -->          col += p3*a3*1.85;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->          \/\/ \u043c\u043e\u0449\u043d\u044b\u0439 glow\/bloom<!-- [et_pb_line_break_holder] -->          col += col*col*1.0 + pow(col, vec3(3.0))*0.55;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->          \/\/ \u0441\u043b\u0430\u0431\u0430\u044f \u0432\u0438\u043d\u044c\u0435\u0442\u043a\u0430 (\u0447\u0451\u0440\u043d\u044b\u0439 \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u043f\u043e \u043a\u0440\u0430\u044f\u043c)<!-- [et_pb_line_break_holder] -->          float r=length(uv);<!-- [et_pb_line_break_holder] -->          float vign=0.94 + 0.06 * smoothstep(1.6,0.7,r);<!-- [et_pb_line_break_holder] -->          col *= vign;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->          \/\/ \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 \u0431\u0443\u0441\u0442<!-- [et_pb_line_break_holder] -->          col *= uBoost;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->          \/\/ \u043b\u0451\u0433\u043a\u0430\u044f \u0433\u0430\u043c\u043c\u0430 \u0434\u043b\u044f \u043d\u0430\u0441\u044b\u0449\u0435\u043d\u043d\u043e\u0441\u0442\u0438<!-- [et_pb_line_break_holder] -->          col = pow(col, vec3(0.9));<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->          gl_FragColor=vec4(col,1.0);<!-- [et_pb_line_break_holder] -->        }`;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->      const mat = new THREE.RawShaderMaterial({<!-- [et_pb_line_break_holder] -->        uniforms:{<!-- [et_pb_line_break_holder] -->          uRes:  {value:new THREE.Vector2(1,1)},<!-- [et_pb_line_break_holder] -->          uTime: {value:0},<!-- [et_pb_line_break_holder] -->          uDrive:{value:new THREE.Vector2(0,0)},<!-- [et_pb_line_break_holder] -->          uBoost:{value:1.6}<!-- [et_pb_line_break_holder] -->        },<!-- [et_pb_line_break_holder] -->        vertexShader:vtx, fragmentShader:frag, depthTest:false, depthWrite:false<!-- [et_pb_line_break_holder] -->      });<!-- [et_pb_line_break_holder] -->      const quad = new THREE.Mesh(new THREE.PlaneGeometry(2,2), mat);<!-- [et_pb_line_break_holder] -->      s1.add(quad);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->      \/\/ === \u0421\u0446\u0435\u043d\u0430 2: \u0420\u0435\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u043e\u0435 \u0441\u0442\u0435\u043a\u043b\u043e ===<!-- [et_pb_line_break_holder] -->      const s2 = new THREE.Scene();<!-- [et_pb_line_break_holder] -->      const cam = new THREE.PerspectiveCamera(35, root.clientWidth\/root.clientHeight, 0.1, 100); cam.position.set(0,0,4);<!-- [et_pb_line_break_holder] -->      const key=new THREE.DirectionalLight(0xffffff,1.5); key.position.set(-2,3,2);<!-- [et_pb_line_break_holder] -->      const fill=new THREE.DirectionalLight(0xffffff,0.8); fill.position.set(2,-1,3);<!-- [et_pb_line_break_holder] -->      const rim=new THREE.PointLight(0xffffff,0.7,10); rim.position.set(0,0,-2);<!-- [et_pb_line_break_holder] -->      s2.add(key,fill,rim);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->      const pmrem=new THREE.PMREMGenerator(r);<!-- [et_pb_line_break_holder] -->      const envRT=new THREE.WebGLRenderTarget(512,512);<!-- [et_pb_line_break_holder] -->      const eScene=new THREE.Scene(), eCam=new THREE.OrthographicCamera(-1,1,1,-1,0,1);<!-- [et_pb_line_break_holder] -->      const eQuad=new THREE.Mesh(new THREE.PlaneGeometry(2,2), new THREE.MeshBasicMaterial({color:0x05060a}));<!-- [et_pb_line_break_holder] -->      eScene.add(eQuad); r.setRenderTarget(envRT); r.render(eScene,eCam); r.setRenderTarget(null);<!-- [et_pb_line_break_holder] -->      const envTex=pmrem.fromEquirectangular(envRT.texture).texture;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->      function roundedPlane(w=2.6,h=1.55,rn=0.26,seg=16){<!-- [et_pb_line_break_holder] -->        const s=new THREE.Shape(); const hw=w\/2,hh=h\/2,rr=Math.min(rn,hw,hh);<!-- [et_pb_line_break_holder] -->        s.moveTo(-hw+rr,-hh); s.lineTo(hw-rr,-hh); s.quadraticCurveTo(hw,-hh,hw,-hh+rr);<!-- [et_pb_line_break_holder] -->        s.lineTo(hw,hh-rr); s.quadraticCurveTo(hw,hh,hw-rr,hh); s.lineTo(-hw+rr,hh);<!-- [et_pb_line_break_holder] -->        s.quadraticCurveTo(-hw,hh,-hw,hh-rr); s.lineTo(-hw,-hh+rr); s.quadraticCurveTo(-hw,-hh,-hw+rr,-hh);<!-- [et_pb_line_break_holder] -->        return new THREE.ShapeGeometry(s,seg);<!-- [et_pb_line_break_holder] -->      }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->      const glassMat=new THREE.MeshPhysicalMaterial({<!-- [et_pb_line_break_holder] -->        color:0xffffff, envMap:envTex, roughness:0.06, metalness:0.0,<!-- [et_pb_line_break_holder] -->        transmission:1.0, thickness:0.5, ior:1.52,<!-- [et_pb_line_break_holder] -->        clearcoat:1.0, clearcoatRoughness:0.06, reflectivity:0.1,<!-- [et_pb_line_break_holder] -->        attenuationColor:new THREE.Color(0xffffff), attenuationDistance:3.0<!-- [et_pb_line_break_holder] -->      });<!-- [et_pb_line_break_holder] -->      const glass=new THREE.Mesh(roundedPlane(), glassMat);<!-- [et_pb_line_break_holder] -->      glass.rotation.x=THREE.MathUtils.degToRad(-4);<!-- [et_pb_line_break_holder] -->      glass.rotation.y=THREE.MathUtils.degToRad(6);<!-- [et_pb_line_break_holder] -->      s2.add(glass);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->      \/\/ === \u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432: \u043c\u044b\u0448\u044c\/\u043d\u0430\u043a\u043b\u043e\u043d ===<!-- [et_pb_line_break_holder] -->      const target=new THREE.Vector2(0,0), drive=new THREE.Vector2(0,0);<!-- [et_pb_line_break_holder] -->      function onMove(e){<!-- [et_pb_line_break_holder] -->        const rect=root.getBoundingClientRect();<!-- [et_pb_line_break_holder] -->        const x=(e.clientX-rect.left)\/rect.width, y=(e.clientY-rect.top)\/rect.height;<!-- [et_pb_line_break_holder] -->        target.set(x*2-1, -(y*2-1));<!-- [et_pb_line_break_holder] -->      }<!-- [et_pb_line_break_holder] -->      window.addEventListener(\"pointermove\", onMove, {passive:true});<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->      let tilt=false;<!-- [et_pb_line_break_holder] -->      function askTilt(){<!-- [et_pb_line_break_holder] -->        if(typeof DeviceOrientationEvent!==\"undefined\" && typeof DeviceOrientationEvent.requestPermission===\"function\"){<!-- [et_pb_line_break_holder] -->          DeviceOrientationEvent.requestPermission().then(s=>{ if(s===\"granted\") startTilt(); }).catch(()=>{});<!-- [et_pb_line_break_holder] -->        } else { startTilt(); }<!-- [et_pb_line_break_holder] -->      }<!-- [et_pb_line_break_holder] -->      function startTilt(){<!-- [et_pb_line_break_holder] -->        if(tilt) return; tilt=true;<!-- [et_pb_line_break_holder] -->        window.addEventListener(\"deviceorientation\", (e)=>{<!-- [et_pb_line_break_holder] -->          const gx=(e.gamma||0)\/28, gy=(e.beta||0)\/28;<!-- [et_pb_line_break_holder] -->          target.set(Math.max(-1,Math.min(1,gx)), -Math.max(-1,Math.min(1,gy)));<!-- [et_pb_line_break_holder] -->        }, {passive:true});<!-- [et_pb_line_break_holder] -->      }<!-- [et_pb_line_break_holder] -->      window.addEventListener(\"touchstart\", askTilt, {passive:true});<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->      \/\/ === Resize ===<!-- [et_pb_line_break_holder] -->      function resize(){<!-- [et_pb_line_break_holder] -->        const w=root.clientWidth,h=root.clientHeight;<!-- [et_pb_line_break_holder] -->        r.setSize(w,h,false);<!-- [et_pb_line_break_holder] -->        mat.uniforms.uRes.value.set(w,h);<!-- [et_pb_line_break_holder] -->        cam.aspect=w\/h; cam.updateProjectionMatrix();<!-- [et_pb_line_break_holder] -->      }<!-- [et_pb_line_break_holder] -->      new ResizeObserver(resize).observe(root); resize();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->      \/\/ === Render loop ===<!-- [et_pb_line_break_holder] -->      let last=performance.now();<!-- [et_pb_line_break_holder] -->      function loop(now){<!-- [et_pb_line_break_holder] -->        const dt=(now-last)\/1000; last=now;<!-- [et_pb_line_break_holder] -->        mat.uniforms.uTime.value += dt;<!-- [et_pb_line_break_holder] -->        drive.lerp(target, 0.12);<!-- [et_pb_line_break_holder] -->        mat.uniforms.uDrive.value.copy(drive);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        r.render(s1, camO);           \/\/ \u044f\u0440\u043a\u0438\u0439 \u0444\u043e\u043d<!-- [et_pb_line_break_holder] -->        r.clearDepth();<!-- [et_pb_line_break_holder] -->        glass.rotation.y = THREE.MathUtils.degToRad(6) + Math.sin(now*0.00025)*0.03;<!-- [et_pb_line_break_holder] -->        glass.rotation.x = THREE.MathUtils.degToRad(-4) + Math.cos(now*0.00020)*0.02;<!-- [et_pb_line_break_holder] -->        r.render(s2, cam);            \/\/ \u0441\u0442\u0435\u043a\u043b\u043e<!-- [et_pb_line_break_holder] -->        requestAnimationFrame(loop);<!-- [et_pb_line_break_holder] -->      }<!-- [et_pb_line_break_holder] -->      requestAnimationFrame(loop);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->      \/\/ WebGL \u0437\u0430\u043f\u0443\u0449\u0435\u043d \u2014 \u0443\u0431\u0438\u0440\u0430\u0435\u043c CSS-\u0444\u043e\u043b\u0431\u044d\u043a<!-- [et_pb_line_break_holder] -->      fb && (fb.style.display=\"none\");<!-- [et_pb_line_break_holder] -->    }catch(e){<!-- [et_pb_line_break_holder] -->      \/\/ \u0435\u0441\u043b\u0438 \u0447\u0442\u043e \u2014 \u043e\u0441\u0442\u0430\u0451\u043c\u0441\u044f \u043d\u0430 CSS-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 (\u0443\u0436\u0435 \u0432\u0438\u0434\u043d\u043e)<!-- [et_pb_line_break_holder] -->      console.warn(\"Mirage iframe fallback:\", e);<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->  })();<!-- [et_pb_line_break_holder] -->  <\/script><!-- [et_pb_line_break_holder] --><\/body><\/html>&#8216;><!-- [et_pb_line_break_holder] -->  <\/iframe><!-- [et_pb_line_break_holder] --><\/div>\n<p><!-- [et_pb_line_break_holder] -->[\/et_pb_fullwidth_code][\/et_pb_section][et_pb_section fb_built=&#187;1&#8243; theme_builder_area=&#187;post_content&#187; _builder_version=&#187;4.27.4&#8243; _module_preset=&#187;default&#187;][et_pb_row _builder_version=&#187;4.27.4&#8243; _module_preset=&#187;default&#187; theme_builder_area=&#187;post_content&#187;][et_pb_column _builder_version=&#187;4.27.4&#8243; _module_preset=&#187;default&#187; type=&#187;4_4&#8243; theme_builder_area=&#187;post_content&#187;][et_pb_code _builder_version=&#187;4.27.4&#8243; _module_preset=&#187;default&#187; theme_builder_area=&#187;post_content&#187; hover_enabled=&#187;0&#8243; sticky_enabled=&#187;0&#8243;]<!-- ONE-BLOCK: WebGL \u044f\u0440\u043a\u0438\u0435 \"\u043c\u0438\u0440\u0430\u0436\u0438\" + \u0441\u0442\u0435\u043a\u043b\u044f\u043d\u043d\u0430\u044f \u043f\u043b\u0430\u0448\u043a\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 iframe (Divi Ready) --><!-- [et_pb_line_break_holder] --><\/p>\n<div style=\"position:relative;min-height:100vh;width:100%;overflow:hidden;\"><!-- [et_pb_line_break_holder] -->  <iframe<!-- [et_pb_line_break_holder] -->    title=&#187;Mirage Glass&#187;<!-- [et_pb_line_break_holder] -->    style=&#187;display:block;border:0;margin:0;padding:0;width:100%;height:100vh;&#187;<!-- [et_pb_line_break_holder] -->    loading=&#187;eager&#187;<!-- [et_pb_line_break_holder] -->    referrerpolicy=&#187;no-referrer&#187;<!-- [et_pb_line_break_holder] -->    srcdoc=&#8217;<!-- [et_pb_line_break_holder] --><!DOCTYPE html><html lang=\"ru\"><head><!-- [et_pb_line_break_holder] --><meta charset=\"utf-8\"\/><!-- [et_pb_line_break_holder] --><meta name=\"viewport\" content=\"width=device-width,initial-scale=1\"\/><!-- [et_pb_line_break_holder] --><\/p>\n<style><!-- [et_pb_line_break_holder] -->  html,body{margin:0;height:100%;background:#000;overflow:hidden;}<!-- [et_pb_line_break_holder] -->  .wrap{position:relative;min-height:100vh;width:100%;display:grid;place-items:center;background:#000;}<!-- [et_pb_line_break_holder] -->  .glass{<!-- [et_pb_line_break_holder] -->    position:absolute;z-index:5;text-align:center;pointer-events:none;<!-- [et_pb_line_break_holder] -->    max-width:min(820px,94vw);width:100%;<!-- [et_pb_line_break_holder] -->    color:#0b0c1a;background:linear-gradient(180deg,rgba(255,255,255,.58),rgba(255,255,255,.40));<!-- [et_pb_line_break_holder] -->    border:1px solid rgba(255,255,255,.72);border-radius:24px;padding:clamp(24px,4.5vw,44px);<!-- [et_pb_line_break_holder] -->    backdrop-filter:blur(18px) saturate(1.25);-webkit-backdrop-filter:blur(18px) saturate(1.25);<!-- [et_pb_line_break_holder] -->    box-shadow:0 18px 60px rgba(0,0,0,.65),inset 0 0 90px rgba(255,255,255,.22);<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  .glass h1{margin:0 0 .25em;font-weight:800;line-height:1.05;letter-spacing:-.02em;font-size:clamp(30px,5vw,56px);color:#0a0b13;text-shadow:0 1px 0 rgba(255,255,255,.36);}<!-- [et_pb_line_break_holder] -->  .glass .lead{margin:0 0 .75em;font-size:clamp(16px,2.2vw,20px);color:#141626;opacity:.92;}<!-- [et_pb_line_break_holder] -->  .glass p{margin:0 0 1.1em;color:#161826;opacity:.96;}<!-- [et_pb_line_break_holder] -->  @media (max-width:480px){.glass{padding:26px;border-radius:20px}}<!-- [et_pb_line_break_holder] -->  \/* CSS fallback (\u0435\u0441\u043b\u0438 JS\/WebGL \u0437\u0430\u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043d) *\/<!-- [et_pb_line_break_holder] -->  .fb{position:absolute;inset:-20% -20%;z-index:0;filter:saturate(1.35) contrast(1.15);}<!-- [et_pb_line_break_holder] -->  .blob{position:absolute;width:65vmax;height:65vmax;border-radius:50%;filter:blur(85px);opacity:.9;mix-blend-mode:screen;animation:mv 32s ease-in-out infinite;}<!-- [et_pb_line_break_holder] -->  .b1{background:radial-gradient(circle at 30% 30%,#ff2f6e,#ff7aa1 55%,transparent 70%);left:-12vmax;top:-8vmax;animation-duration:36s}<!-- [et_pb_line_break_holder] -->  .b2{background:radial-gradient(circle at 70% 40%,#3b6cff,#79a2ff 55%,transparent 70%);right:-10vmax;top:10vmax;animation-direction:reverse;animation-duration:40s}<!-- [et_pb_line_break_holder] -->  .b3{background:radial-gradient(circle at 50% 70%,#00c9a8,#27e6a5 55%,transparent 70%);left:8vmax;bottom:-14vmax;animation-duration:44s}<!-- [et_pb_line_break_holder] -->  @keyframes mv{0%{transform:translate3d(0,0,0) scale(1)}25%{transform:translate3d(10vmax,-6vmax,0) scale(1.08) rotate(5deg)}50%{transform:translate3d(-8vmax,8vmax,0) scale(.94) rotate(-8deg)}75%{transform:translate3d(6vmax,4vmax,0) scale(1.06) rotate(3deg)}100%{transform:translate3d(0,0,0) scale(1)}}<!-- [et_pb_line_break_holder] --><\/style>\n<p><!-- [et_pb_line_break_holder] --><\/head><body><!-- [et_pb_line_break_holder] -->  <\/p>\n<div class=\"wrap\" id=\"root\"><!-- [et_pb_line_break_holder] -->    <!-- Fallback \u0441\u043b\u043e\u0438 (\u0441\u043a\u0440\u044b\u0432\u0430\u044e\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 WebGL \u0441\u0442\u0430\u0440\u0442\u0443\u0435\u0442) --><!-- [et_pb_line_break_holder] -->    <\/p>\n<div class=\"fb\" id=\"fb\">\n<div class=\"blob b1\"><\/div>\n<div class=\"blob b2\"><\/div>\n<div class=\"blob b3\"><\/div>\n<\/div>\n<p><!-- [et_pb_line_break_holder] -->    <!-- \u041f\u043b\u0430\u0448\u043a\u0430 --><!-- [et_pb_line_break_holder] -->    <\/p>\n<div class=\"glass\"><!-- [et_pb_line_break_holder] -->      <\/p>\n<h1>\u0421\u0430\u0439\u0442 \u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435<\/h1>\n<p><!-- [et_pb_line_break_holder] -->      <pee class=\"lead\">\u041c\u044b \u043f\u043e\u0447\u0442\u0438 \u0433\u043e\u0442\u043e\u0432\u044b\u2026 \u043c\u0438\u0440\u0430\u0436\u0438 \u0443\u0436\u0435 \u0442\u0430\u043d\u0446\u0443\u044e\u0442 \u2728<\/pee><!-- [et_pb_line_break_holder] -->      <pee>\u0417\u0430\u0433\u043b\u044f\u043d\u0438 \u043f\u043e\u0437\u0436\u0435 \u2014 \u0431\u0443\u0434\u0435\u0442 \u043a\u0440\u0430\u0441\u0438\u0432\u043e \u0438 \u0431\u044b\u0441\u0442\u0440\u043e \ud83d\ude05<\/pee><!-- [et_pb_line_break_holder] -->    <\/div>\n<p><!-- [et_pb_line_break_holder] -->  <\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  <!-- Three.js \u0438\u0437 CDN --><!-- [et_pb_line_break_holder] -->  <script src=\"https:\/\/unpkg.com\/three@0.160.0\/build\/three.min.js\"><\/script><!-- [et_pb_line_break_holder] -->  <script><!-- [et_pb_line_break_holder] -->  (function(){<!-- [et_pb_line_break_holder] -->    const root = document.getElementById(\"root\");<!-- [et_pb_line_break_holder] -->    const fb   = document.getElementById(\"fb\");<!-- [et_pb_line_break_holder] -->    try{<!-- [et_pb_line_break_holder] -->      const dpr = Math.min(2, window.devicePixelRatio||1);<!-- [et_pb_line_break_holder] -->      const r   = new THREE.WebGLRenderer({antialias:true,alpha:false,powerPreference:\"high-performance\"});<!-- [et_pb_line_break_holder] -->      r.setPixelRatio(dpr); r.setSize(root.clientWidth, root.clientHeight, false);<!-- [et_pb_line_break_holder] -->      r.setClearColor(0x000000,1); r.outputColorSpace = THREE.SRGBColorSpace;<!-- [et_pb_line_break_holder] -->      r.toneMapping = THREE.ACESFilmicToneMapping; r.toneMappingExposure = 1.6; r.autoClear = true;<!-- [et_pb_line_break_holder] -->      root.prepend(r.domElement);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->      \/\/ === \u0421\u0446\u0435\u043d\u0430 1: \u042f\u0420\u041a\u0418\u0415 \"\u041c\u0418\u0420\u0410\u0416\u0418\" (\u043f\u043e\u043b\u043d\u043e\u044d\u043a\u0440\u0430\u043d\u043d\u044b\u0439 \u0448\u0435\u0439\u0434\u0435\u0440) ===<!-- [et_pb_line_break_holder] -->      const s1 = new THREE.Scene();<!-- [et_pb_line_break_holder] -->      const camO = new THREE.OrthographicCamera(-1,1,1,-1,0,1);<!-- [et_pb_line_break_holder] -->      const vtx = \"precision highp float;attribute vec3 position;void main(){gl_Position=vec4(position,1.0);}\";<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->      const frag = `<!-- [et_pb_line_break_holder] -->        precision highp float;<!-- [et_pb_line_break_holder] -->        uniform vec2  uRes;<!-- [et_pb_line_break_holder] -->        uniform float uTime;<!-- [et_pb_line_break_holder] -->        uniform vec2  uDrive;<!-- [et_pb_line_break_holder] -->        uniform float uBoost;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        float h(vec2 p){ return fract(sin(dot(p, vec2(127.1,311.7)))*43758.5453); }<!-- [et_pb_line_break_holder] -->        float n(vec2 p){ vec2 i=floor(p), f=fract(p);<!-- [et_pb_line_break_holder] -->          float a=h(i), b=h(i+vec2(1,0)), c=h(i+vec2(0,1)), d=h(i+vec2(1,1));<!-- [et_pb_line_break_holder] -->          vec2 u=f*f*(3.-2.*f); return mix(a,b,u.x)+(c-a)*u.y*(1.-u.x)+(d-b)*u.x*u.y; }<!-- [et_pb_line_break_holder] -->        float fbm(vec2 p){ float v=0., a=.5; for(int i=0;i<5;i++){ v+=a*n(p); p*=2.; a*=.5; } return v; }<!-- [et_pb_line_break_holder] -->        float cloud(vec2 uv, vec2 c, float r){ vec2 d=uv-c; float l=length(d); float k=smoothstep(r, r*0.2, l); return 1.0-k; }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        void main(){<!-- [et_pb_line_break_holder] -->          vec2 res=uRes;<!-- [et_pb_line_break_holder] -->          vec2 uv=(gl_FragCoord.xy-0.5*res)\/res.y;<!-- [et_pb_line_break_holder] -->          float t=uTime;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->          \/\/ \u043f\u0430\u0440\u0430\u043b\u043b\u0430\u043a\u0441 (\u0440\u0430\u0437\u043d\u0430\u044f \"\u0433\u043b\u0443\u0431\u0438\u043d\u0430\")<!-- [et_pb_line_break_holder] -->          vec2 P0=uv+uDrive*0.04, P1=uv+uDrive*0.07, P2=uv+uDrive*0.10;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->          \/\/ \u0442\u0440\u0430\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0446\u0435\u043d\u0442\u0440\u043e\u0432<!-- [et_pb_line_break_holder] -->          vec2 c1=0.55*vec2(sin(t*0.95),cos(t*1.10))+vec2(-0.35,0.10);<!-- [et_pb_line_break_holder] -->          vec2 c2=0.62*vec2(cos(t*0.78),sin(t*0.66))+vec2( 0.40,0.00);<!-- [et_pb_line_break_holder] -->          vec2 c3=0.70*vec2(sin(t*0.52),cos(t*0.42))+vec2(-0.05,-0.38);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->          float a1=cloud(P0,c1,0.62), a2=cloud(P1,c2,0.60), a3=cloud(P2,c3,0.64);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->          \/\/ \"\u0434\u044b\u0445\u0430\u043d\u0438\u0435\"<!-- [et_pb_line_break_holder] -->          float m=fbm(uv*2.8+vec2(t*0.12,-t*0.09));<!-- [et_pb_line_break_holder] -->          a1*=1.05+0.35*m; a2*=1.05+0.35*m; a3*=1.05+0.35*m;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->          \/\/ \u043f\u0430\u043b\u0438\u0442\u0440\u0430<!-- [et_pb_line_break_holder] -->          vec3 p1=vec3(1.00,0.28,0.58), p2=vec3(0.36,0.64,1.00), p3=vec3(0.20,0.98,0.76);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->          \/\/ \u0438\u043d\u0442\u0435\u043d\u0441\u0438\u0432\u043d\u043e\u0435 \u0441\u043c\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u0435<!-- [et_pb_line_break_holder] -->          vec3 col=vec3(0.0);<!-- [et_pb_line_break_holder] -->          col += p1*a1*1.85;<!-- [et_pb_line_break_holder] -->          col += p2*a2*1.85;<!-- [et_pb_line_break_holder] -->          col += p3*a3*1.85;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->          \/\/ \u043c\u043e\u0449\u043d\u044b\u0439 glow\/bloom<!-- [et_pb_line_break_holder] -->          col += col*col*1.0 + pow(col, vec3(3.0))*0.55;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->          \/\/ \u0441\u043b\u0430\u0431\u0430\u044f \u0432\u0438\u043d\u044c\u0435\u0442\u043a\u0430 (\u0447\u0451\u0440\u043d\u044b\u0439 \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u043f\u043e \u043a\u0440\u0430\u044f\u043c)<!-- [et_pb_line_break_holder] -->          float r=length(uv);<!-- [et_pb_line_break_holder] -->          float vign=0.94 + 0.06 * smoothstep(1.6,0.7,r);<!-- [et_pb_line_break_holder] -->          col *= vign;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->          \/\/ \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 \u0431\u0443\u0441\u0442<!-- [et_pb_line_break_holder] -->          col *= uBoost;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->          \/\/ \u043b\u0451\u0433\u043a\u0430\u044f \u0433\u0430\u043c\u043c\u0430 \u0434\u043b\u044f \u043d\u0430\u0441\u044b\u0449\u0435\u043d\u043d\u043e\u0441\u0442\u0438<!-- [et_pb_line_break_holder] -->          col = pow(col, vec3(0.9));<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->          gl_FragColor=vec4(col,1.0);<!-- [et_pb_line_break_holder] -->        }`;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->      const mat = new THREE.RawShaderMaterial({<!-- [et_pb_line_break_holder] -->        uniforms:{<!-- [et_pb_line_break_holder] -->          uRes:  {value:new THREE.Vector2(1,1)},<!-- [et_pb_line_break_holder] -->          uTime: {value:0},<!-- [et_pb_line_break_holder] -->          uDrive:{value:new THREE.Vector2(0,0)},<!-- [et_pb_line_break_holder] -->          uBoost:{value:1.6}<!-- [et_pb_line_break_holder] -->        },<!-- [et_pb_line_break_holder] -->        vertexShader:vtx, fragmentShader:frag, depthTest:false, depthWrite:false<!-- [et_pb_line_break_holder] -->      });<!-- [et_pb_line_break_holder] -->      const quad = new THREE.Mesh(new THREE.PlaneGeometry(2,2), mat);<!-- [et_pb_line_break_holder] -->      s1.add(quad);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->      \/\/ === \u0421\u0446\u0435\u043d\u0430 2: \u0420\u0435\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u043e\u0435 \u0441\u0442\u0435\u043a\u043b\u043e ===<!-- [et_pb_line_break_holder] -->      const s2 = new THREE.Scene();<!-- [et_pb_line_break_holder] -->      const cam = new THREE.PerspectiveCamera(35, root.clientWidth\/root.clientHeight, 0.1, 100); cam.position.set(0,0,4);<!-- [et_pb_line_break_holder] -->      const key=new THREE.DirectionalLight(0xffffff,1.5); key.position.set(-2,3,2);<!-- [et_pb_line_break_holder] -->      const fill=new THREE.DirectionalLight(0xffffff,0.8); fill.position.set(2,-1,3);<!-- [et_pb_line_break_holder] -->      const rim=new THREE.PointLight(0xffffff,0.7,10); rim.position.set(0,0,-2);<!-- [et_pb_line_break_holder] -->      s2.add(key,fill,rim);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->      const pmrem=new THREE.PMREMGenerator(r);<!-- [et_pb_line_break_holder] -->      const envRT=new THREE.WebGLRenderTarget(512,512);<!-- [et_pb_line_break_holder] -->      const eScene=new THREE.Scene(), eCam=new THREE.OrthographicCamera(-1,1,1,-1,0,1);<!-- [et_pb_line_break_holder] -->      const eQuad=new THREE.Mesh(new THREE.PlaneGeometry(2,2), new THREE.MeshBasicMaterial({color:0x05060a}));<!-- [et_pb_line_break_holder] -->      eScene.add(eQuad); r.setRenderTarget(envRT); r.render(eScene,eCam); r.setRenderTarget(null);<!-- [et_pb_line_break_holder] -->      const envTex=pmrem.fromEquirectangular(envRT.texture).texture;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->      function roundedPlane(w=2.6,h=1.55,rn=0.26,seg=16){<!-- [et_pb_line_break_holder] -->        const s=new THREE.Shape(); const hw=w\/2,hh=h\/2,rr=Math.min(rn,hw,hh);<!-- [et_pb_line_break_holder] -->        s.moveTo(-hw+rr,-hh); s.lineTo(hw-rr,-hh); s.quadraticCurveTo(hw,-hh,hw,-hh+rr);<!-- [et_pb_line_break_holder] -->        s.lineTo(hw,hh-rr); s.quadraticCurveTo(hw,hh,hw-rr,hh); s.lineTo(-hw+rr,hh);<!-- [et_pb_line_break_holder] -->        s.quadraticCurveTo(-hw,hh,-hw,hh-rr); s.lineTo(-hw,-hh+rr); s.quadraticCurveTo(-hw,-hh,-hw+rr,-hh);<!-- [et_pb_line_break_holder] -->        return new THREE.ShapeGeometry(s,seg);<!-- [et_pb_line_break_holder] -->      }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->      const glassMat=new THREE.MeshPhysicalMaterial({<!-- [et_pb_line_break_holder] -->        color:0xffffff, envMap:envTex, roughness:0.06, metalness:0.0,<!-- [et_pb_line_break_holder] -->        transmission:1.0, thickness:0.5, ior:1.52,<!-- [et_pb_line_break_holder] -->        clearcoat:1.0, clearcoatRoughness:0.06, reflectivity:0.1,<!-- [et_pb_line_break_holder] -->        attenuationColor:new THREE.Color(0xffffff), attenuationDistance:3.0<!-- [et_pb_line_break_holder] -->      });<!-- [et_pb_line_break_holder] -->      const glass=new THREE.Mesh(roundedPlane(), glassMat);<!-- [et_pb_line_break_holder] -->      glass.rotation.x=THREE.MathUtils.degToRad(-4);<!-- [et_pb_line_break_holder] -->      glass.rotation.y=THREE.MathUtils.degToRad(6);<!-- [et_pb_line_break_holder] -->      s2.add(glass);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->      \/\/ === \u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432: \u043c\u044b\u0448\u044c\/\u043d\u0430\u043a\u043b\u043e\u043d ===<!-- [et_pb_line_break_holder] -->      const target=new THREE.Vector2(0,0), drive=new THREE.Vector2(0,0);<!-- [et_pb_line_break_holder] -->      function onMove(e){<!-- [et_pb_line_break_holder] -->        const rect=root.getBoundingClientRect();<!-- [et_pb_line_break_holder] -->        const x=(e.clientX-rect.left)\/rect.width, y=(e.clientY-rect.top)\/rect.height;<!-- [et_pb_line_break_holder] -->        target.set(x*2-1, -(y*2-1));<!-- [et_pb_line_break_holder] -->      }<!-- [et_pb_line_break_holder] -->      window.addEventListener(\"pointermove\", onMove, {passive:true});<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->      let tilt=false;<!-- [et_pb_line_break_holder] -->      function askTilt(){<!-- [et_pb_line_break_holder] -->        if(typeof DeviceOrientationEvent!==\"undefined\" && typeof DeviceOrientationEvent.requestPermission===\"function\"){<!-- [et_pb_line_break_holder] -->          DeviceOrientationEvent.requestPermission().then(s=>{ if(s===\"granted\") startTilt(); }).catch(()=>{});<!-- [et_pb_line_break_holder] -->        } else { startTilt(); }<!-- [et_pb_line_break_holder] -->      }<!-- [et_pb_line_break_holder] -->      function startTilt(){<!-- [et_pb_line_break_holder] -->        if(tilt) return; tilt=true;<!-- [et_pb_line_break_holder] -->        window.addEventListener(\"deviceorientation\", (e)=>{<!-- [et_pb_line_break_holder] -->          const gx=(e.gamma||0)\/28, gy=(e.beta||0)\/28;<!-- [et_pb_line_break_holder] -->          target.set(Math.max(-1,Math.min(1,gx)), -Math.max(-1,Math.min(1,gy)));<!-- [et_pb_line_break_holder] -->        }, {passive:true});<!-- [et_pb_line_break_holder] -->      }<!-- [et_pb_line_break_holder] -->      window.addEventListener(\"touchstart\", askTilt, {passive:true});<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->      \/\/ === Resize ===<!-- [et_pb_line_break_holder] -->      function resize(){<!-- [et_pb_line_break_holder] -->        const w=root.clientWidth,h=root.clientHeight;<!-- [et_pb_line_break_holder] -->        r.setSize(w,h,false);<!-- [et_pb_line_break_holder] -->        mat.uniforms.uRes.value.set(w,h);<!-- [et_pb_line_break_holder] -->        cam.aspect=w\/h; cam.updateProjectionMatrix();<!-- [et_pb_line_break_holder] -->      }<!-- [et_pb_line_break_holder] -->      new ResizeObserver(resize).observe(root); resize();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->      \/\/ === Render loop ===<!-- [et_pb_line_break_holder] -->      let last=performance.now();<!-- [et_pb_line_break_holder] -->      function loop(now){<!-- [et_pb_line_break_holder] -->        const dt=(now-last)\/1000; last=now;<!-- [et_pb_line_break_holder] -->        mat.uniforms.uTime.value += dt;<!-- [et_pb_line_break_holder] -->        drive.lerp(target, 0.12);<!-- [et_pb_line_break_holder] -->        mat.uniforms.uDrive.value.copy(drive);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        r.render(s1, camO);           \/\/ \u044f\u0440\u043a\u0438\u0439 \u0444\u043e\u043d<!-- [et_pb_line_break_holder] -->        r.clearDepth();<!-- [et_pb_line_break_holder] -->        glass.rotation.y = THREE.MathUtils.degToRad(6) + Math.sin(now*0.00025)*0.03;<!-- [et_pb_line_break_holder] -->        glass.rotation.x = THREE.MathUtils.degToRad(-4) + Math.cos(now*0.00020)*0.02;<!-- [et_pb_line_break_holder] -->        r.render(s2, cam);            \/\/ \u0441\u0442\u0435\u043a\u043b\u043e<!-- [et_pb_line_break_holder] -->        requestAnimationFrame(loop);<!-- [et_pb_line_break_holder] -->      }<!-- [et_pb_line_break_holder] -->      requestAnimationFrame(loop);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->      \/\/ WebGL \u0437\u0430\u043f\u0443\u0449\u0435\u043d \u2014 \u0443\u0431\u0438\u0440\u0430\u0435\u043c CSS-\u0444\u043e\u043b\u0431\u044d\u043a<!-- [et_pb_line_break_holder] -->      fb && (fb.style.display=\"none\");<!-- [et_pb_line_break_holder] -->    }catch(e){<!-- [et_pb_line_break_holder] -->      \/\/ \u0435\u0441\u043b\u0438 \u0447\u0442\u043e \u2014 \u043e\u0441\u0442\u0430\u0451\u043c\u0441\u044f \u043d\u0430 CSS-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 (\u0443\u0436\u0435 \u0432\u0438\u0434\u043d\u043e)<!-- [et_pb_line_break_holder] -->      console.warn(\"Mirage iframe fallback:\", e);<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->  })();<!-- [et_pb_line_break_holder] -->  <\/script><!-- [et_pb_line_break_holder] --><\/body><\/html>&#8216;><!-- [et_pb_line_break_holder] -->  <\/iframe><!-- [et_pb_line_break_holder] --><\/div>\n<p><!-- [et_pb_line_break_holder] -->[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>title=&#187;Mirage Glass&#187; style=&#187;display:block;border:0;margin:0;padding:0;width:100%;height:100vh;&#187; loading=&#187;eager&#187; referrerpolicy=&#187;no-referrer&#187; srcdoc=&#8217;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-55","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/katanabot.ru\/index.php\/wp-json\/wp\/v2\/pages\/55","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/katanabot.ru\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/katanabot.ru\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/katanabot.ru\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/katanabot.ru\/index.php\/wp-json\/wp\/v2\/comments?post=55"}],"version-history":[{"count":14,"href":"https:\/\/katanabot.ru\/index.php\/wp-json\/wp\/v2\/pages\/55\/revisions"}],"predecessor-version":[{"id":71,"href":"https:\/\/katanabot.ru\/index.php\/wp-json\/wp\/v2\/pages\/55\/revisions\/71"}],"wp:attachment":[{"href":"https:\/\/katanabot.ru\/index.php\/wp-json\/wp\/v2\/media?parent=55"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}