<!doctype html><html lang="ru"><head><meta charset="UTF-8"><meta name="viewport" content="width=1920,height=1080"><title>ФЕНИКС — заставка</title><script src="assets/gsap.min.js"></script><style>
 @font-face{font-family:Montserrat;src:url('assets/Montserrat-Regular.ttf');font-weight:400}@font-face{font-family:Montserrat;src:url('assets/Montserrat-SemiBold.ttf');font-weight:600}
 *{box-sizing:border-box}body{margin:0;font-family:Montserrat,sans-serif;color:#583020;background:#fbfcf9}#root{width:100%;height:100%;position:relative;overflow:hidden}
 .clip{position:absolute;inset:0}.back{position:absolute;inset:0;background:radial-gradient(ellipse at 82% 34%,#ffeddc,transparent 60%),#fbfcf9}
 .top{position:absolute;left:120px;top:85px;font-size:25px;letter-spacing:3px;color:#b44726}.name{position:absolute;left:120px;top:173px;font-size:54px;font-weight:600;letter-spacing:-2px}
 .rule{position:absolute;left:120px;top:275px;width:420px;height:3px;background:#b44726;transform-origin:left center}
 .headline{position:absolute;left:120px;top:351px;width:1250px;font-size:102px;line-height:1.14;font-weight:600;letter-spacing:-5px}.headline p{margin:0}.line2{color:#b44726}
 .domain{position:absolute;left:123px;top:685px;font-size:33px;letter-spacing:.3px}.caption{position:absolute;left:124px;top:775px;max-width:1040px;font-size:25px;line-height:1.5;color:#4f5e64}
 .art{position:absolute;width:590px;height:570px;right:52px;top:310px}.art text{font:23px Montserrat;fill:#583020}.art .edge{fill:none;stroke:#b44726;stroke-width:2}.art .glyph{fill:none;stroke:#b44726;stroke-width:2.7}
 footer{position:absolute;left:120px;right:120px;bottom:65px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #b9c8c6;padding-top:28px;font-size:22px;color:#42595a}
 .signature{font-weight:600}.domain,.top,.name,.headline,.caption{z-index:2}
 </style></head><body><div id="root" data-composition-id="main" data-width="1920" data-height="1080" data-duration="8" data-fps="30"><section id="brand-card" class="clip" data-start="0" data-duration="8" data-track-index="0"><div class="back"></div><div class="top">03 / ЗНАНИЯ И ЭНЕРГИЯ</div><div class="name">ФЕНИКС</div><div class="rule"></div><div class="headline"><p class="line1">Город, который</p><p class="line2">возвращает жизнь.</p></div><div class="domain">fenix-city.com</div><div class="caption">Самостоятельная система. Общая культура созидания.</div><svg class="art" viewBox="0 0 590 570" aria-label="Геометрический образ связей"><defs><radialGradient id="glass"><stop stop-color="white"/><stop offset="1" stop-color="#ffeddc"/></radialGradient></defs><circle class="disc" cx="295" cy="285" r="133" fill="url(#glass)"/><path class="edge e0" d="M295 152V123"/><path class="edge e1" d="M197 375L106 421"/><path class="edge e2" d="M393 375L484 421"/><g class="glyph"><path d="M295 378 Q200 313 185 210 Q246 222 295 305 Q344 222 405 210 Q390 313 295 378 Z"/><path d="M295 300 Q264 233 295 171 Q326 233 295 300 Z"/></g><g class="node n0"><circle cx="295" cy="108" r="14" fill="#b44726"/><text x="295" y="170" text-anchor="middle">Природа</text></g><g class="node n1"><circle cx="95" cy="428" r="14" fill="#b44726"/><text x="95" y="490" text-anchor="middle">Человек</text></g><g class="node n2"><circle cx="495" cy="428" r="14" fill="#b44726"/><text x="495" y="490" text-anchor="middle">Энергия</text></g></svg><footer><span class="signature">СФЕРА — Мир без границ</span><span>Вход в экосистему: speczashchita.com</span></footer></section></div><script>
 const tl=gsap.timeline({paused:true});
 tl.fromTo('.top',{opacity:0,y:12},{opacity:1,y:0,duration:.45,ease:'power2.out'},.05);
 tl.fromTo('.name',{opacity:0,scale:.96},{opacity:1,scale:1,duration:.85,ease:'power3.out'},.25);
 tl.fromTo('.rule',{scaleX:0},{scaleX:1,duration:.65,ease:'power2.inOut'},.9);
 tl.fromTo('.line1',{opacity:0,y:42},{opacity:1,y:0,duration:.85,ease:'power3.out'},1.3);
 tl.fromTo('.line2',{opacity:0,y:42},{opacity:1,y:0,duration:.85,ease:'power3.out'},1.9);
 tl.fromTo('.disc',{opacity:0,scale:.9,svgOrigin:'295 285'},{opacity:1,scale:1,duration:.9,ease:'power2.out'},1.2);
 tl.fromTo('.glyph',{opacity:0},{opacity:1,duration:.75},1.65);
 document.querySelectorAll('.edge').forEach((el,i)=>{const len=el.getTotalLength();tl.fromTo(el,{strokeDasharray:len,strokeDashoffset:len},{strokeDashoffset:0,duration:.6,ease:'power2.out'},2.4+i*.25)});
 tl.fromTo('.node',{opacity:0},{opacity:1,duration:.55,stagger:.25},2.9);
 tl.fromTo('.domain',{opacity:0,y:18},{opacity:1,y:0,duration:.7,ease:'power2.out'},3.65);
 tl.fromTo('.caption',{opacity:0},{opacity:1,duration:.6},4.25);
 tl.fromTo('footer',{opacity:0},{opacity:1,duration:.65},4.9);
 window.__timelines['main']=tl;
 </script></body></html>