add animations for c3voc assets

dist/digital/c3voc/README.md

@@ -0,0 +1,27 @@
+# c3VOC animations
+
+We use the HTML5 Animation Video Renderer (https://github.com/dtinth/html5-animation-video-renderer) to render frame-accurate animations built with HTML, CSS, and JavaScript.
+
+To render an animation clone the html5-animation-video-renderer repository and run one of the following commands:  
+(We assume that you are in the parent directory of the cloned repository and that the design repository is in `/home/eh22/design`. Adjust your code accordingly.) 
+
+Example Intro:  
+```shell
+node ./html5-animation-video-renderer/render.js --video=example_intro.mp4 --url="file:///home/eh22/design/dist/digital/c3voc/intro.html?render&title=Bahn APIs - Wer hat mehr chaos, wir oder die?&speaker=marudor"
+```
+
+Outro:
+```shell
+node ./html5-animation-video-renderer/render.js --video=example_outro.mp4 --url="file:///home/eh22/design/dist/digital/c3voc/outro.html?render"
+```
+
+Pause:
+```shell
+node ./html5-animation-video-renderer/render.js --video=example_outro.mp4 --url="file:///home/eh22/design/dist/digital/c3voc/pause.html?render"
+```
+
+To watch the animation in your browser just open the file without the `?render` at the end.  
+Please note, that some styles are only rendered correctly in Chromium :c  
+
+Example URL for the pause animation:
+`file:///home/eh22/design/dist/digital/c3voc/pause.html`

dist/digital/c3voc/assets/fairydust.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="1920"
+   height="1080"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <path
+     d="M 60.482594,8.8028279e-5 C 60.482594,-3.3353067 59.433234,-6.6702988 57.336328,-9.4663104 L 54.315139,-13.494162 A 38.20193,38.201953 0 0 0 32.405474,-27.782381 l -2.042726,-0.474327 a 44.57261,44.572638 0 0 0 -17.793997,-0.486211 l -20.755569,3.642751 a 5.0353151,5.0353182 0 0 0 -4.088877,5.829892 5.0353151,5.0353182 0 0 0 5.8298872,4.088678 L 14.309761,-18.82455 a 34.50198,34.502001 0 0 1 13.772593,0.376642 l 2.043937,0.475334 a 28.123242,28.12326 0 0 1 16.133554,10.5207937 l 3.021187,4.0278518 c 1.535168,2.0469577 1.535168,4.8010754 0,6.8480329 l -5.438543,7.2512616 a 16.737388,16.737398 0 0 1 -9.762468,6.298176 l -6.930005,1.540405 A 34.864522,34.864545 0 0 1 13.352447,18.781422 L 1.5114002,16.62832 1.7909609,16.68794 a 22.554183,22.554198 0 0 0 -16.7085849,2.480196 5.0353151,5.0353182 0 0 0 -0.242501,0.151463 64.73401,64.734052 0 0 1 -20.207324,8.938696 l -0.601821,0.150053 a 16.81191,16.811921 0 0 1 -11.565917,-1.25601 l -2.219769,-1.10354 c -1.00666,-0.500513 -1.00666,-1.243322 0,-1.743833 l 2.219769,-1.103538 0.0031,-0.0012 a 108.76281,108.76287 0 0 1 14.023754,-5.804715 l 0.0046,-0.0016 c 6.599486,-2.202045 11.082326,-8.4216704 11.082326,-15.3792718 v -3.9861594 c 0.05942,-6.9024144 -4.336011,-13.1107608 -10.865607,-15.3498658 l -0.04009,-0.0135 a 110.17269,110.17276 0 0 1 -14.207847,-5.866952 l -2.21997,-1.102936 c -1.006661,-0.500509 -1.006661,-1.243319 0,-1.743832 l 2.21997,-1.103538 a 16.81191,16.811921 0 0 1 11.565917,-1.25601 l 12.325446,3.082219 a 5.0353151,5.0353182 0 0 0 6.106023,-3.66531 5.0353151,5.0353182 0 0 0 -3.663092,-6.106432 l -12.325846,-3.080606 a 26.892611,26.892628 0 0 0 -18.492698,2.008689 l -2.218157,1.103339 c -7.882886,3.91949 -7.882886,15.859439 0,19.778931 l 2.218157,1.103137 a 120.24333,120.2434 0 0 0 15.507159,6.4023067 l -0.0417,-0.013292 c 2.465692,0.8455308 4.083035,3.1309608 4.060477,5.7374431 v 4.0723738 c 0,2.663079 -1.673536,4.9845624 -4.200057,5.8268704 l -0.0031,0.00141 a 118.83344,118.83351 0 0 0 -15.325888,6.342487 l -2.215135,1.101929 c -7.882684,3.919492 -7.882684,15.85944 0,19.779134 l 2.218359,1.102936 a 26.892611,26.892628 0 0 0 18.492496,2.009092 l 0.602224,-0.150245 c 8.234149,-2.058639 16.054196,-5.508638 23.1316333,-10.191486 a 12.471468,12.471476 0 0 1 9.22248185,-1.359535 5.0353151,5.0353182 0 0 0 0.27976213,0.05942 L 11.550357,28.689734 a 44.935152,44.93518 0 0 0 17.785136,-0.34502 l 6.928392,-1.540606 A 26.820103,26.820118 0 0 0 51.899396,16.717748 L 57.336328,9.4664865 C 59.433234,6.6706763 60.482594,3.3354828 60.482594,8.8028279e-5 M 35.104606,-0.00232892 A 5.0353151,5.0353182 0 0 0 30.06929,-5.0376472 5.0353151,5.0353182 0 0 0 25.033975,-0.00232892 c 0,2.84072512 -2.194791,5.03531832 -5.035314,5.03531832 -2.840523,0 -5.035316,-2.1945932 -5.035316,-5.03531832 0,-2.84072518 2.194793,-5.03531828 5.035316,-5.03531828 a 5.0353151,5.0353182 0 0 0 5.035314,-5.0353188 5.0353151,5.0353182 0 0 0 -5.035314,-5.035318 c -8.283094,0 -15.105946,6.8228565 -15.105946,15.10595508 0,8.28309872 6.822852,15.10595492 15.105946,15.10595492 8.283093,0 15.105945,-6.8226548 15.105945,-15.10595492 m -72.63281,0 A 5.0353151,5.0353182 0 0 0 -42.56352,-5.0376472 h -12.883758 a 5.0353151,5.0353182 0 0 0 -5.035316,5.03531828 5.0353151,5.0353182 0 0 0 5.035316,5.03531832 h 12.883758 a 5.0353151,5.0353182 0 0 0 5.035316,-5.03531832"
+     style="stroke-width:3.77954"
+     id="path1" />
+</svg>

dist/digital/c3voc/assets/font/argonglow/OFL

@@ -0,0 +1,96 @@
+Copyright (c) 2025, The Argon Glow Project Authors (https://codeberg.org/kritzl/argon-glow),
+Copyright (c) 2025, kritzl (kritzl@kritzl.dev),
+Copyright (c) 2025, traumweh (traumweh@lyx.sh),
+with Reserved Font Name "Argon Glow".
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting - in part or in whole - any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

dist/digital/c3voc/assets/font/athiti/OFL

@@ -0,0 +1,93 @@
+Copyright (c) 2015, Cadson Demak (info@cadsondemak.com)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

dist/digital/c3voc/assets/font/departuremono/LICENSE

@@ -0,0 +1,93 @@
+Copyright 2022–2024 Helena Zhang (helenazhang.com).
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

dist/digital/c3voc/assets/outro-fairydust-line.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="1920"
+   height="1080"
+   viewBox="0 0 1920 1080"
+   version="1.1"
+   id="svg1"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs1" /><g
+     id="layer1"><path
+       style="fill:none;stroke:#9252ff;stroke-width:3.34759;stroke-linecap:round;stroke-dasharray:3.34759, 10.0428;paint-order:fill markers stroke"
+       d="m 103.11519,633.05623 c 0,0 112.18883,-56.27362 168.96763,-86.98231 56.7788,-30.7087 219.16291,-52.50859 257.0753,40.72448 37.91239,93.23307 116.06077,60.70506 174.65157,117.15163 58.5908,56.44657 69.55692,145.93752 205.04814,131.19585 135.49127,-14.74167 178.73417,40.48366 238.26187,-38.64968 59.5277,-79.13334 -22.6247,-130.7803 -51.3031,-180.78665 -58.0397,-101.20355 -18.0923,-223.92077 3.8548,-252.49067 25.5553,-33.26694 51.1158,-92.32054 179.1587,-84.2433 128.0429,8.07724 56.8775,331.76295 -39.1013,249.42812 -95.9787,-82.33483 -80.9345,-388.65872 76.5143,-325.09611 157.4488,63.5626 270.1556,171.56585 398.5799,95.70605 128.4243,-75.85981 -20.3472,-197.39689 -20.3472,-197.39689"
+       id="path1" /></g></svg>

dist/digital/c3voc/assets/outro-fairydust-line_1.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="1920"
+   height="1080"
+   viewBox="0 0 1920 1080"
+   version="1.1"
+   id="svg1"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs1" /><g
+     id="layer1"><path
+       style="fill:none;stroke:#9252ff;stroke-width:3.34759;stroke-linecap:round;stroke-dasharray:3.34759, 10.0428;paint-order:fill markers stroke"
+       d="M 951.32621,1015.0321 C 935.33106,774.49741 848.8405,-9.168887 495.45437,81.242165 142.06824,171.65322 218.81826,628.09743 406.09324,741.39864 593.36822,854.69985 1068.0848,878.5479 1206.29,664.39274 1344.4952,450.23758 1333.2466,355.70854 1565.5317,318.69148 1797.8168,281.67442 1762.9503,212.49404 1917.295,7.995225"
+       id="path1" /></g></svg>

dist/digital/c3voc/assets/outro-fairydust-line_2.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="1920"
+   height="1080"
+   viewBox="0 0 1920 1080"
+   version="1.1"
+   id="svg1"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs1" /><g
+     id="layer1"
+     transform="translate(-51.262698,46.13483)"><path
+       style="fill:none;stroke:#9252ff;stroke-width:3.34759;stroke-linecap:round;stroke-dasharray:3.34759, 10.0428;paint-order:fill markers stroke"
+       d="m 1677.8292,292.27393 c 55.084,488.37161 -338.5601,290.3106 -496.5146,-39.12473 C 1023.3601,-76.286132 622.72673,52.592934 281.99729,223.54688 -58.73214,394.50083 841.95815,964.71196 700.68754,404.63365 618.872,80.269613 305.26947,350.52312 260.73941,552.8828 c -44.53006,202.35968 66.92569,320.221 115.39494,349.54486 82.44744,49.88063 337.9628,57.74931 482.40081,-35.86799 C 1002.9732,772.94236 464.70894,365.43868 875.42403,225.89874 1286.1391,86.358812 976.56924,742.93404 1256.8456,728.05538 1537.122,713.17671 1548.5761,-0.05325501 1786.4785,567.72474 2024.3809,1135.5027 838.37233,759.97802 919.28954,551.00007 1000.2068,342.02212 1622.7453,-196.09768 1677.8292,292.27393 Z"
+       id="path1" /></g></svg>

dist/digital/c3voc/pause.html

@@ -0,0 +1,469 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport"
+        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="stylesheet" type="text/css" href="style.css"/>
+  <title>Pause</title>
+</head>
+<body>
+  <svg
+      id="logo_eventname_glow_off"
+      width="3454.9861"
+      height="1248.83203"
+      viewBox="-169.960991 -181.961546 3454.9861 1248.83203"
+      version="1.1"
+      xml:space="preserve"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:svg="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="motionBlur">
+			<feGaussianBlur in="SourceGraphic" stdDeviation="4,0"/>
+		</filter>
+    <filter x="-25%" y="-150%" width="150%" height="400%" color-interpolation-filters="sRGB" id="offTextBlur216Primary">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="6.75"/>
+      <feOffset dx="0" dy="0" result="offsetblur"/>
+      <feFlood flood-color="#3f012d" flood-opacity="1"/>
+      <feComposite in2="offsetblur" operator="in"/>
+      <feMerge result="drop_shadow_0">
+        <feMergeNode/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+
+    <filter x="-25%" y="-150%" width="150%" height="400%" color-interpolation-filters="sRGB"
+            id="offTextInset216Primary">
+      <feFlood flood-color="#c6257d" result="flood-white"/>
+      <feFlood flood-color="#3f012d" result="flood-glow-color"/>
+
+      <feComposite in="flood-glow-color" in2="SourceAlpha" operator="in" result="flooded"/>
+      <feComponentTransfer in="SourceAlpha" result="reduced_alpha">
+        <feFuncA type="table" tableValues="0 0.5"/>
+      </feComponentTransfer>
+      <feGaussianBlur in="reduced_alpha" stdDeviation="6.75" result="inset_drop_shadow"/>
+      <feComposite in="flood-white" in2="inset_drop_shadow" operator="in" result="inset_drop_shadow_white"/>
+      <feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in" result="inset_shadow"/>
+      <feMerge result="final">
+        <feMergeNode in="flooded"/>
+        <feMergeNode in="inset_shadow"/>
+      </feMerge>
+    </filter>
+
+    <filter x="-25%" y="-150%" width="150%" height="400%" color-interpolation-filters="sRGB" id="offTextBlur520Primary">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="16.25"/>
+      <feOffset dx="0" dy="0" result="offsetblur"/>
+      <feFlood flood-color="#3f012d" flood-opacity="1"/>
+      <feComposite in2="offsetblur" operator="in"/>
+      <feMerge result="drop_shadow_0">
+        <feMergeNode/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+
+    <filter x="-25%" y="-150%" width="150%" height="400%" color-interpolation-filters="sRGB"
+            id="offTextInset520Primary">
+      <feFlood flood-color="#c6257d" result="flood-white"/>
+      <feFlood flood-color="#3f012d" result="flood-glow-color"/>
+
+      <feComposite in="flood-glow-color" in2="SourceAlpha" operator="in" result="flooded"/>
+      <feComponentTransfer in="SourceAlpha" result="reduced_alpha">
+        <feFuncA type="table" tableValues="0 0.5"/>
+      </feComponentTransfer>
+      <feGaussianBlur in="reduced_alpha" stdDeviation="16.25" result="inset_drop_shadow"/>
+      <feComposite in="flood-white" in2="inset_drop_shadow" operator="in" result="inset_drop_shadow_white"/>
+      <feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in" result="inset_shadow"/>
+      <feMerge result="final">
+        <feMergeNode in="flooded"/>
+        <feMergeNode in="inset_shadow"/>
+      </feMerge>
+    </filter>
+
+    <filter x="-25%" y="-150%" width="150%" height="400%" color-interpolation-filters="sRGB"
+            id="offTextBlur216Secondary">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="6.75"/>
+      <feOffset dx="0" dy="0" result="offsetblur"/>
+      <feFlood flood-color="#012c3f" flood-opacity="1"/>
+      <feComposite in2="offsetblur" operator="in"/>
+      <feMerge result="drop_shadow_0">
+        <feMergeNode/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+
+    <filter x="-25%" y="-150%" width="150%" height="400%" color-interpolation-filters="sRGB"
+            id="offTextInset216Secondary">
+      <feFlood flood-color="#2493c2" result="flood-white"/>
+      <feFlood flood-color="#012c3f" result="flood-glow-color"/>
+
+      <feComposite in="flood-glow-color" in2="SourceAlpha" operator="in" result="flooded"/>
+      <feComponentTransfer in="SourceAlpha" result="reduced_alpha">
+        <feFuncA type="table" tableValues="0 0.5"/>
+      </feComponentTransfer>
+      <feGaussianBlur in="reduced_alpha" stdDeviation="6.75" result="inset_drop_shadow"/>
+      <feComposite in="flood-white" in2="inset_drop_shadow" operator="in" result="inset_drop_shadow_white"/>
+      <feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in" result="inset_shadow"/>
+      <feMerge result="final">
+        <feMergeNode in="flooded"/>
+        <feMergeNode in="inset_shadow"/>
+      </feMerge>
+    </filter>
+
+    <filter x="-25%" y="-150%" width="150%" height="400%" color-interpolation-filters="sRGB"
+            id="offTextBlur520Secondary">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="16.25"/>
+      <feOffset dx="0" dy="0" result="offsetblur"/>
+      <feFlood flood-color="#012c3f" flood-opacity="1"/>
+      <feComposite in2="offsetblur" operator="in"/>
+      <feMerge result="drop_shadow_0">
+        <feMergeNode/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+
+    <filter x="-25%" y="-150%" width="150%" height="400%" color-interpolation-filters="sRGB"
+            id="offTextInset520Secondary">
+      <feFlood flood-color="#2493c2" result="flood-white"/>
+      <feFlood flood-color="#012c3f" result="flood-glow-color"/>
+
+      <feComposite in="flood-glow-color" in2="SourceAlpha" operator="in" result="flooded"/>
+      <feComponentTransfer in="SourceAlpha" result="reduced_alpha">
+        <feFuncA type="table" tableValues="0 0.5"/>
+      </feComponentTransfer>
+      <feGaussianBlur in="reduced_alpha" stdDeviation="16.25" result="inset_drop_shadow"/>
+      <feComposite in="flood-white" in2="inset_drop_shadow" operator="in" result="inset_drop_shadow_white"/>
+      <feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in" result="inset_shadow"/>
+      <feMerge result="final">
+        <feMergeNode in="flooded"/>
+        <feMergeNode in="inset_shadow"/>
+      </feMerge>
+    </filter>
+
+    <filter x="-150%" y="-150%" width="400%" height="400%" color-interpolation-filters="sRGB" id="textBlur216Primary">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="6.75"/>
+      <feOffset dx="0" dy="0" result="offsetblur"/>
+      <feFlood flood-color="#ffffff" flood-opacity="1"/>
+      <feComposite in2="offsetblur" operator="in"/>
+      <feMerge result="drop_shadow_0">
+        <feMergeNode/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+
+      <feGaussianBlur in="drop_shadow_0" stdDeviation="13.5"/>
+      <feOffset dx="0" dy="0" result="offsetblur"/>
+      <feFlood flood-color="#c6257d" flood-opacity="1"/>
+      <feComposite in2="offsetblur" operator="in"/>
+      <feMerge result="drop_shadow_1">
+        <feMergeNode/>
+        <feMergeNode in="drop_shadow_0"/>
+      </feMerge>
+
+      <feGaussianBlur in="drop_shadow_1" stdDeviation="27"/>
+      <feOffset dx="0" dy="0" result="offsetblur"/>
+      <feFlood flood-color="#c6257d" flood-opacity="1"/>
+      <feComposite in2="offsetblur" operator="in"/>
+      <feMerge result="drop_shadow_2">
+        <feMergeNode/>
+        <feMergeNode in="drop_shadow_1"/>
+      </feMerge>
+    </filter>
+
+    <filter x="-150%" y="-150%" width="400%" height="400%" color-interpolation-filters="sRGB" id="textInset216Primary">
+      <feFlood flood-color="#ffffff" result="flood-white"/>
+      <feFlood flood-color="#c6257d" result="flood-glow-color"/>
+
+      <feComposite in="flood-glow-color" in2="SourceAlpha" operator="in" result="flooded"/>
+      <feGaussianBlur in="SourceAlpha" stdDeviation="3.375" result="inset_drop_shadow"/>
+      <feComposite in="flood-white" in2="inset_drop_shadow" operator="in" result="inset_drop_shadow_white"/>
+      <feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in" result="inset_shadow"/>
+      <feMerge result="final">
+        <feMergeNode in="flooded"/>
+        <feMergeNode in="inset_shadow"/>
+      </feMerge>
+    </filter>
+
+    <filter x="-150%" y="-150%" width="400%" height="400%" color-interpolation-filters="sRGB" id="textBlur520Primary">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="16.25"/>
+      <feOffset dx="0" dy="0" result="offsetblur"/>
+      <feFlood flood-color="#ffffff" flood-opacity="1"/>
+      <feComposite in2="offsetblur" operator="in"/>
+      <feMerge result="drop_shadow_0">
+        <feMergeNode/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+
+      <feGaussianBlur in="drop_shadow_0" stdDeviation="32.5"/>
+      <feOffset dx="0" dy="0" result="offsetblur"/>
+      <feFlood flood-color="#c6257d" flood-opacity="1"/>
+      <feComposite in2="offsetblur" operator="in"/>
+      <feMerge result="drop_shadow_1">
+        <feMergeNode/>
+        <feMergeNode in="drop_shadow_0"/>
+      </feMerge>
+
+      <feGaussianBlur in="drop_shadow_1" stdDeviation="65"/>
+      <feOffset dx="0" dy="0" result="offsetblur"/>
+      <feFlood flood-color="#c6257d" flood-opacity="1"/>
+      <feComposite in2="offsetblur" operator="in"/>
+      <feMerge result="drop_shadow_2">
+        <feMergeNode/>
+        <feMergeNode in="drop_shadow_1"/>
+      </feMerge>
+    </filter>
+
+    <filter x="-150%" y="-150%" width="400%" height="400%" color-interpolation-filters="sRGB" id="textInset520Primary">
+      <feFlood flood-color="#ffffff" result="flood-white"/>
+      <feFlood flood-color="#c6257d" result="flood-glow-color"/>
+
+      <feComposite in="flood-glow-color" in2="SourceAlpha" operator="in" result="flooded"/>
+      <feGaussianBlur in="SourceAlpha" stdDeviation="8.125" result="inset_drop_shadow"/>
+      <feComposite in="flood-white" in2="inset_drop_shadow" operator="in" result="inset_drop_shadow_white"/>
+      <feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in" result="inset_shadow"/>
+      <feMerge result="final">
+        <feMergeNode in="flooded"/>
+        <feMergeNode in="inset_shadow"/>
+      </feMerge>
+    </filter>
+
+    <filter x="-150%" y="-150%" width="400%" height="400%" color-interpolation-filters="sRGB" id="textBlur216Secondary">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="6.75"/>
+      <feOffset dx="0" dy="0" result="offsetblur"/>
+      <feFlood flood-color="#ffffff" flood-opacity="1"/>
+      <feComposite in2="offsetblur" operator="in"/>
+      <feMerge result="drop_shadow_0">
+        <feMergeNode/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+
+      <feGaussianBlur in="drop_shadow_0" stdDeviation="13.5"/>
+      <feOffset dx="0" dy="0" result="offsetblur"/>
+      <feFlood flood-color="#4badd8" flood-opacity="1"/>
+      <feComposite in2="offsetblur" operator="in"/>
+      <feMerge result="drop_shadow_1">
+        <feMergeNode/>
+        <feMergeNode in="drop_shadow_0"/>
+      </feMerge>
+
+      <feGaussianBlur in="drop_shadow_1" stdDeviation="27"/>
+      <feOffset dx="0" dy="0" result="offsetblur"/>
+      <feFlood flood-color="#4badd8" flood-opacity="1"/>
+      <feComposite in2="offsetblur" operator="in"/>
+      <feMerge result="drop_shadow_2">
+        <feMergeNode/>
+        <feMergeNode in="drop_shadow_1"/>
+      </feMerge>
+    </filter>
+
+    <filter x="-150%" y="-150%" width="400%" height="400%" color-interpolation-filters="sRGB"
+            id="textInset216Secondary">
+      <feFlood flood-color="#ffffff" result="flood-white"/>
+      <feFlood flood-color="#4badd8" result="flood-glow-color"/>
+
+      <feComposite in="flood-glow-color" in2="SourceAlpha" operator="in" result="flooded"/>
+      <feGaussianBlur in="SourceAlpha" stdDeviation="3.375" result="inset_drop_shadow"/>
+      <feComposite in="flood-white" in2="inset_drop_shadow" operator="in" result="inset_drop_shadow_white"/>
+      <feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in" result="inset_shadow"/>
+      <feMerge result="final">
+        <feMergeNode in="flooded"/>
+        <feMergeNode in="inset_shadow"/>
+      </feMerge>
+    </filter>
+
+    <filter x="-150%" y="-150%" width="400%" height="400%" color-interpolation-filters="sRGB" id="textBlur520Secondary">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="16.25"/>
+      <feOffset dx="0" dy="0" result="offsetblur"/>
+      <feFlood flood-color="#ffffff" flood-opacity="1"/>
+      <feComposite in2="offsetblur" operator="in"/>
+      <feMerge result="drop_shadow_0">
+        <feMergeNode/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+
+      <feGaussianBlur in="drop_shadow_0" stdDeviation="32.5"/>
+      <feOffset dx="0" dy="0" result="offsetblur"/>
+      <feFlood flood-color="#4badd8" flood-opacity="1"/>
+      <feComposite in2="offsetblur" operator="in"/>
+      <feMerge result="drop_shadow_1">
+        <feMergeNode/>
+        <feMergeNode in="drop_shadow_0"/>
+      </feMerge>
+
+      <feGaussianBlur in="drop_shadow_1" stdDeviation="65"/>
+      <feOffset dx="0" dy="0" result="offsetblur"/>
+      <feFlood flood-color="#4badd8" flood-opacity="1"/>
+      <feComposite in2="offsetblur" operator="in"/>
+      <feMerge result="drop_shadow_2">
+        <feMergeNode/>
+        <feMergeNode in="drop_shadow_1"/>
+      </feMerge>
+    </filter>
+
+    <filter x="-150%" y="-150%" width="400%" height="400%" color-interpolation-filters="sRGB"
+            id="textInset520Secondary">
+      <feFlood flood-color="#ffffff" result="flood-white"/>
+      <feFlood flood-color="#4badd8" result="flood-glow-color"/>
+
+      <feComposite in="flood-glow-color" in2="SourceAlpha" operator="in" result="flooded"/>
+      <feGaussianBlur in="SourceAlpha" stdDeviation="8.125" result="inset_drop_shadow"/>
+      <feComposite in="flood-white" in2="inset_drop_shadow" operator="in" result="inset_drop_shadow_white"/>
+      <feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in" result="inset_shadow"/>
+      <feMerge result="final">
+        <feMergeNode in="flooded"/>
+        <feMergeNode in="inset_shadow"/>
+      </feMerge>
+    </filter>
+  </defs>
+</svg>
+  <svg
+      viewBox="0 0 1920 1080"
+      id="svgPath"
+      xml:space="preserve"
+      xmlns="http://www.w3.org/2000/svg">
+    <g>
+      <path id="path"
+            style="stroke: #0a6c96; stroke-width: 1;"
+            d="m 1677.8292,292.27393 c 55.084,488.37161 -338.5601,290.3106 -496.5146,-39.12473 C 1023.3601,-76.286132 622.72673,52.592934 281.99729,223.54688 -58.73214,394.50083 841.95815,964.71196 700.68754,404.63365 618.872,80.269613 305.26947,350.52312 260.73941,552.8828 c -44.53006,202.35968 66.92569,320.221 115.39494,349.54486 82.44744,49.88063 337.9628,57.74931 482.40081,-35.86799 C 1002.9732,772.94236 464.70894,365.43868 875.42403,225.89874 1286.1391,86.358812 976.56924,742.93404 1256.8456,728.05538 1537.122,713.17671 1548.5761,-0.05325501 1786.4785,567.72474 2024.3809,1135.5027 838.37233,759.97802 919.28954,551.00007 1000.2068,342.02212 1622.7453,-196.09768 1677.8292,292.27393 Z"/></g></svg>
+
+  <div id="scene">
+    <svg
+        id="bgAnimation"
+        width="1920"
+        height="1080"
+        style="position: absolute; left: 0; top: 0; overflow: visible"
+        xmlns="http://www.w3.org/2000/svg">
+      <path id="fairydust"
+            d="M 60.482594,8.8028279e-5 C 60.482594,-3.3353067 59.433234,-6.6702988 57.336328,-9.4663104 L 54.315139,-13.494162 A 38.20193,38.201953 0 0 0 32.405474,-27.782381 l -2.042726,-0.474327 a 44.57261,44.572638 0 0 0 -17.793997,-0.486211 l -20.755569,3.642751 a 5.0353151,5.0353182 0 0 0 -4.088877,5.829892 5.0353151,5.0353182 0 0 0 5.8298872,4.088678 L 14.309761,-18.82455 a 34.50198,34.502001 0 0 1 13.772593,0.376642 l 2.043937,0.475334 a 28.123242,28.12326 0 0 1 16.133554,10.5207937 l 3.021187,4.0278518 c 1.535168,2.0469577 1.535168,4.8010754 0,6.8480329 l -5.438543,7.2512616 a 16.737388,16.737398 0 0 1 -9.762468,6.298176 l -6.930005,1.540405 A 34.864522,34.864545 0 0 1 13.352447,18.781422 L 1.5114002,16.62832 1.7909609,16.68794 a 22.554183,22.554198 0 0 0 -16.7085849,2.480196 5.0353151,5.0353182 0 0 0 -0.242501,0.151463 64.73401,64.734052 0 0 1 -20.207324,8.938696 l -0.601821,0.150053 a 16.81191,16.811921 0 0 1 -11.565917,-1.25601 l -2.219769,-1.10354 c -1.00666,-0.500513 -1.00666,-1.243322 0,-1.743833 l 2.219769,-1.103538 0.0031,-0.0012 a 108.76281,108.76287 0 0 1 14.023754,-5.804715 l 0.0046,-0.0016 c 6.599486,-2.202045 11.082326,-8.4216704 11.082326,-15.3792718 v -3.9861594 c 0.05942,-6.9024144 -4.336011,-13.1107608 -10.865607,-15.3498658 l -0.04009,-0.0135 a 110.17269,110.17276 0 0 1 -14.207847,-5.866952 l -2.21997,-1.102936 c -1.006661,-0.500509 -1.006661,-1.243319 0,-1.743832 l 2.21997,-1.103538 a 16.81191,16.811921 0 0 1 11.565917,-1.25601 l 12.325446,3.082219 a 5.0353151,5.0353182 0 0 0 6.106023,-3.66531 5.0353151,5.0353182 0 0 0 -3.663092,-6.106432 l -12.325846,-3.080606 a 26.892611,26.892628 0 0 0 -18.492698,2.008689 l -2.218157,1.103339 c -7.882886,3.91949 -7.882886,15.859439 0,19.778931 l 2.218157,1.103137 a 120.24333,120.2434 0 0 0 15.507159,6.4023067 l -0.0417,-0.013292 c 2.465692,0.8455308 4.083035,3.1309608 4.060477,5.7374431 v 4.0723738 c 0,2.663079 -1.673536,4.9845624 -4.200057,5.8268704 l -0.0031,0.00141 a 118.83344,118.83351 0 0 0 -15.325888,6.342487 l -2.215135,1.101929 c -7.882684,3.919492 -7.882684,15.85944 0,19.779134 l 2.218359,1.102936 a 26.892611,26.892628 0 0 0 18.492496,2.009092 l 0.602224,-0.150245 c 8.234149,-2.058639 16.054196,-5.508638 23.1316333,-10.191486 a 12.471468,12.471476 0 0 1 9.22248185,-1.359535 5.0353151,5.0353182 0 0 0 0.27976213,0.05942 L 11.550357,28.689734 a 44.935152,44.93518 0 0 0 17.785136,-0.34502 l 6.928392,-1.540606 A 26.820103,26.820118 0 0 0 51.899396,16.717748 L 57.336328,9.4664865 C 59.433234,6.6706763 60.482594,3.3354828 60.482594,8.8028279e-5 M 35.104606,-0.00232892 A 5.0353151,5.0353182 0 0 0 30.06929,-5.0376472 5.0353151,5.0353182 0 0 0 25.033975,-0.00232892 c 0,2.84072512 -2.194791,5.03531832 -5.035314,5.03531832 -2.840523,0 -5.035316,-2.1945932 -5.035316,-5.03531832 0,-2.84072518 2.194793,-5.03531828 5.035316,-5.03531828 a 5.0353151,5.0353182 0 0 0 5.035314,-5.0353188 5.0353151,5.0353182 0 0 0 -5.035314,-5.035318 c -8.283094,0 -15.105946,6.8228565 -15.105946,15.10595508 0,8.28309872 6.822852,15.10595492 15.105946,15.10595492 8.283093,0 15.105945,-6.8226548 15.105945,-15.10595492 m -72.63281,0 A 5.0353151,5.0353182 0 0 0 -42.56352,-5.0376472 h -12.883758 a 5.0353151,5.0353182 0 0 0 -5.035316,5.03531828 5.0353151,5.0353182 0 0 0 5.035316,5.03531832 h 12.883758 a 5.0353151,5.0353182 0 0 0 5.035316,-5.03531832"
+            filter="url(#motionBlur)"
+            fill="#4B3176"/>
+      <g id="trail"></g>
+    </svg>
+    <svg id="breakText" viewBox="0 0 5160 1000" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <text id="breakTextText" x="2580" y="500">Break</text>
+      </defs>
+      <g id="blur216Primary" filter="url(#textBlur216Primary)" style="mix-blend-mode: screen;">
+        <use href="#breakTextText"/>
+      </g>
+      <g id="inset216Primary" filter="url(#textInset216Primary)">
+        <use href="#breakTextText"/>
+      </g>
+    </svg>
+
+  </div>
+  <!--  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/gsap.min.js"></script>-->
+  <!--  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/MotionPathPlugin.min.js"></script>-->
+  <script src="assets/script/gsap.min.js"></script>
+  <script src="assets/script/MotionPathPlugin.min.js"></script>
+  <script>
+      gsap.registerPlugin(MotionPathPlugin)
+
+      const randomMap = {
+          '1': '0.4',
+          '1.4': '0.7',
+          '3': '0.4',
+          '4': '0.9',
+          '8.4': '0.7',
+          '14': '0.8',
+          '14.5': '0.1',
+          '15': '0.6',
+          '17': '0.2',
+          '17.5': '0.6',
+          '23': '0.7',
+          '29': '0.2',
+      }
+
+      const n = 40;
+      const trail = document.querySelector('#trail')
+      for (let i = 0; i < n; i++) {
+          trail.insertAdjacentHTML('beforeend', `<g class="trail" filter="url(#motionBlur)"><circle r="${10 - ((i) / n * 5)}" fill="#b2a0cb" style="opacity: 0;" fill-opacity="${(1 - (i + 1) / n) * 0.3}"/></g>`)
+      }
+
+      const timeline = new TimelineMax()
+
+      timeline
+          .addLabel('start', '0')
+      timeline
+          .to("#fairydust", {
+              motionPath: {
+                  path: "#path",
+                  autoRotate: true,
+                  start: n * 0.0005,
+                  end: 1 + n * 0.0005,
+              },
+              ease: "none",
+              transformOrigin: "50% 50%",
+              duration: 30,
+          }, 'start')
+
+      for (let i = 0; i < n; i++) {
+          timeline.to(
+              `.trail:nth-child(${i + 1})`,
+              {
+                  motionPath: {
+                      path: "#path",
+                      start: n * 0.0005 - (0.0005 * i),
+                      end: 1 + n * 0.0005 - (0.0005 * i),
+                      autoRotate: true,
+                  },
+                  ease: "none",
+                  transformOrigin: "50% 50%",
+                  duration: 30,
+                  onStart: () => {
+                      document.querySelector(`.trail:nth-child(${i + 1}) > circle`).setAttribute('transform', 'translate(-55,0)')
+                      document.querySelector(`.trail:nth-child(${i + 1}) > circle`).style.opacity = '1';
+                  },
+              },
+              `start`
+          );
+      }
+
+      for (const t in randomMap) {
+          const v = randomMap[t]
+          timeline.to('#breakTextText',
+              {
+                  keyframes: [
+                      {opacity: 1},
+                      {opacity: parseFloat(v)},
+                      {opacity: 1}
+                  ],
+                  duration: 0.2,
+                  ease: 'bounce.in',
+              },
+              `start+=${t}`);
+      }
+
+      // When rendering, stop the animation because we need a freeze frame.
+      const params = new URL(location).searchParams
+      if (params.get('render') != null) {
+          timeline.pause()
+      }
+      if (params.get('transparent') != null) {
+          document.documentElement.classList.add('is-transparent')
+      }
+
+      const fps = 25
+
+      // setTimeout(() => {
+      //     for (let i = 0; i < n; i++) {
+      //         document.querySelector(`#trail > :nth-child(${i + 1}) > circle`).setAttribute('transform', 'translate(-80,0)')
+      //     }
+      // }, 1000)
+
+
+      // This function tells renderer about basic information about the video.
+      function getInfo() {
+          return {
+              fps,
+              numberOfFrames: timeline.duration() * fps,
+          }
+      }
+
+      // This function will be called before rendering each frame of the video.
+      async function seekToFrame(frame) {
+          timeline.seek((frame + 1) / fps, false)
+          return new Promise(resolve => requestAnimationFrame(resolve))
+      }
+  </script>
+</body>
+</html>

dist/digital/c3voc/style.css

@@ -0,0 +1,294 @@
+:root {
+  --color-neutral-50: #f2f0f5;
+  --color-neutral-100: #d1c6e0;
+  --color-neutral-200: #b2a0cb;
+  --color-neutral-300: #957eb5;
+  --color-neutral-400: #7a60a0;
+  --color-neutral-500: #61468b;
+  --color-neutral-600: #4b3176;
+  --color-neutral-700: #371f60;
+  --color-neutral-800: #26114b;
+  --color-neutral-900: #180736;
+  --color-neutral-950: #0c011f;
+  --color-argon-50: #e1abc9;
+  --color-argon-100: #da87b5;
+  --color-argon-200: #d464a1;
+  --color-argon-300: #cd448f;
+  --color-argon-400: #c6257d;
+  --color-argon-500: #b0166f;
+  --color-argon-600: #9a0a61;
+  --color-argon-700: #830755;
+  --color-argon-800: #6d0449;
+  --color-argon-900: #56023c;
+  --color-argon-950: #3f012d;
+  --color-krypton-50: #b2d9ea;
+  --color-krypton-100: #8cc9e4;
+  --color-krypton-200: #69bade;
+  --color-krypton-300: #4badd8;
+  --color-krypton-400: #2493c2;
+  --color-krypton-500: #167fac;
+  --color-krypton-600: #0a6c96;
+  --color-krypton-700: #075c81;
+  --color-krypton-800: #044c6b;
+  --color-krypton-900: #023c55;
+  --color-krypton-950: #012c3f;
+  --color-green-50: #c0f49a;
+  --color-green-100: #a7e57a;
+  --color-green-200: #8fd75d;
+  --color-green-300: #7ac843;
+  --color-green-400: #66b92d;
+  --color-green-500: #54aa18;
+  --color-green-600: #47990f;
+  --color-green-700: #397e0a;
+  --color-green-800: #2b6206;
+  --color-green-900: #1f4703;
+  --color-green-950: #122b01;
+  --color-red-50: #e6afaf;
+  --color-red-100: #dd9090;
+  --color-red-200: #d57272;
+  --color-red-300: #cc5757;
+  --color-red-400: #c33d3d;
+  --color-red-500: #bb2626;
+  --color-red-600: #b21010;
+  --color-red-700: #950808;
+  --color-red-800: #780404;
+  --color-red-900: #5c0202;
+  --color-red-950: #3f0101;
+  --color-yellow-50: #fefce8;
+  --color-yellow-100: #fef9c2;
+  --color-yellow-200: #fff085;
+  --color-yellow-300: #ffdf20;
+  --color-yellow-400: #fdc700;
+  --color-yellow-500: #efb100;
+  --color-yellow-600: #d08700;
+  --color-yellow-700: #a65f00;
+  --color-yellow-800: #894b00;
+  --color-yellow-900: #733e0a;
+  --color-yellow-950: #432004;
+  --color-white: #ffffff;
+  --color-dark-foreground: var(--color-neutral-50);
+  --color-dark-background: var(--color-neutral-950);
+  --color-dark-shade-1: var(--color-neutral-900);
+  --color-dark-shade-2: var(--color-neutral-800);
+  --color-dark-shade-3: var(--color-neutral-700);
+  --color-dark-shade-4: var(--color-neutral-600);
+  --color-dark-text-1: var(--color-neutral-200);
+  --color-dark-text-2: var(--color-neutral-300);
+  --color-dark-text-3: var(--color-neutral-400);
+  --color-dark-text-4: var(--color-neutral-500);
+  --color-dark-primary: var(--color-argon-400);
+  --color-dark-secondary: var(--color-krypton-300);
+  --color-dark-error: var(--color-red-500);
+  --color-dark-success: var(--color-green-500);
+  --color-dark-warning: var(--color-yellow-500);
+  --color-dark-accent-1: #60a5f9;
+  --color-dark-accent-2: #d381f7;
+  --color-dark-accent-3: #ff7975;
+  --color-light-foreground: var(--color-neutral-950);
+  --color-light-background: var(--color-neutral-50);
+  --color-light-shade-1: var(--color-neutral-100);
+  --color-light-shade-2: var(--color-neutral-200);
+  --color-light-shade-3: var(--color-neutral-300);
+  --color-light-shade-4: var(--color-neutral-400);
+  --color-light-text-1: var(--color-neutral-800);
+  --color-light-text-2: var(--color-neutral-700);
+  --color-light-text-3: var(--color-neutral-600);
+  --color-light-text-4: var(--color-neutral-500);
+  --color-light-primary: var(--color-argon-600);
+  --color-light-secondary: var(--color-krypton-500);
+  --color-light-error: var(--color-red-600);
+  --color-light-success: var(--color-green-600);
+  --color-light-warning: var(--color-yellow-600);
+  --color-light-accent-1: #303ec0;
+  --color-light-accent-2: #6c366c;
+  --color-light-accent-3: #932f0a;
+  --color-cmyk-primary: var(--color-dark-primary);
+  --color-cmyk-secondary: var(--color-dark-secondary);
+}
+
+@font-face {
+  font-family: "Athiti";
+  font-weight: 700;
+  src: url("assets/font/athiti/Athiti-Bold.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Athiti";
+  font-weight: 600;
+  src: url("assets/font/athiti/Athiti-SemiBold.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Athiti";
+  font-weight: 500;
+  src: url("assets/font/athiti/Athiti-Medium.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Athiti";
+  font-weight: 400;
+  src: url("assets/font/athiti/Athiti-Regular.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Athiti";
+  font-weight: 300;
+  src: url("assets/font/athiti/Athiti-Light.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Athiti";
+  font-weight: 200;
+  src: url("assets/font/athiti/Athiti-ExtraLight.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Departure Mono";
+  src: url("assets/font/departuremono/DepartureMono-Regular.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Argon Glow";
+  font-weight: 100;
+  src: url("assets/font/argonglow/ArgonGlow-Thin.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Argon Glow";
+  font-weight: 200;
+  src: url("assets/font/argonglow/ArgonGlow-ExtraLight.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Argon Glow";
+  font-weight: 300;
+  src: url("assets/font/argonglow/ArgonGlow-Light.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Argon Glow";
+  font-weight: 400;
+  src: url("assets/font/argonglow/ArgonGlow-Regular.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Argon Glow";
+  font-weight: 500;
+  src: url("assets/font/argonglow/ArgonGlow-Medium.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Argon Glow";
+  font-weight: 600;
+  src: url("assets/font/argonglow/ArgonGlow-SemiBold.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Argon Glow";
+  font-weight: 700;
+  src: url("assets/font/argonglow/ArgonGlow-Bold.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Argon Glow";
+  src: url("assets/font/argonglow/ArgonGlow-VariableVF.woff2") format("woff2");
+  font-weight: 100 900;
+}
+:root.is-transparent {
+  background: transparent;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  background-color: #000000;
+  display: block;
+}
+
+#scene {
+  background: var(--color-dark-background);
+  color: white;
+  width: 1920px;
+  height: 1080px;
+  overflow: hidden;
+  contain: strict;
+  position: relative;
+}
+
+:root.is-transparent #scene {
+  background: transparent;
+}
+
+#title {
+  position: absolute;
+  left: 100px;
+  top: 600px;
+  width: 1720px;
+  overflow: visible;
+}
+#title text {
+  font-family: "Argon Glow", ui-sans, sans-serif;
+  font-weight: 400;
+  font-size: 216px;
+}
+
+#breakText {
+  position: absolute;
+  left: 100px;
+  top: 0;
+  width: 1720px;
+  height: 1080px;
+  overflow: visible;
+  transform: scale(2.5);
+}
+#breakText text {
+  font-family: "Argon Glow", ui-sans, sans-serif;
+  font-weight: 400;
+  font-size: 216px;
+  text-anchor: middle;
+}
+
+#speaker {
+  position: absolute;
+  right: 150px;
+  bottom: 150px;
+  overflow: visible;
+}
+#speaker text {
+  font-family: "Argon Glow", ui-sans, sans-serif;
+  font-weight: 400;
+  font-size: 216px;
+  text-anchor: end;
+  fill: #ffffff;
+}
+
+#title tspan, #speaker tspan {
+  fill: #ffffff;
+}
+
+#logo_eventname_glow_off {
+  position: absolute;
+  top: 100px;
+  left: 100px;
+  width: 1720px;
+  height: 400px;
+  overflow: visible;
+}
+
+#logo_eventname_glow {
+  position: absolute;
+  top: 100px;
+  left: 100px;
+  width: 1720px;
+  height: 400px;
+  overflow: visible;
+}
+
+#bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1920px;
+}
+
+#outro {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1920px;
+  z-index: 10;
+}
+
+#svgPath {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+/*# sourceMappingURL=style.css.map */

dist/digital/c3voc/style.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;;;AAKF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAIF;EACE;;;AAKF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;;AAKF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EACA;EACA","file":"style.css"}

dist/digital/c3voc/style.scss

@@ -0,0 +1,323 @@
+
+:root {
+  --color-neutral-50: #f2f0f5;
+  --color-neutral-100: #d1c6e0;
+  --color-neutral-200: #b2a0cb;
+  --color-neutral-300: #957eb5;
+  --color-neutral-400: #7a60a0;
+  --color-neutral-500: #61468b;
+  --color-neutral-600: #4b3176;
+  --color-neutral-700: #371f60;
+  --color-neutral-800: #26114b;
+  --color-neutral-900: #180736;
+  --color-neutral-950: #0c011f;
+  --color-argon-50: #e1abc9;
+  --color-argon-100: #da87b5;
+  --color-argon-200: #d464a1;
+  --color-argon-300: #cd448f;
+  --color-argon-400: #c6257d;
+  --color-argon-500: #b0166f;
+  --color-argon-600: #9a0a61;
+  --color-argon-700: #830755;
+  --color-argon-800: #6d0449;
+  --color-argon-900: #56023c;
+  --color-argon-950: #3f012d;
+  --color-krypton-50: #b2d9ea;
+  --color-krypton-100: #8cc9e4;
+  --color-krypton-200: #69bade;
+  --color-krypton-300: #4badd8;
+  --color-krypton-400: #2493c2;
+  --color-krypton-500: #167fac;
+  --color-krypton-600: #0a6c96;
+  --color-krypton-700: #075c81;
+  --color-krypton-800: #044c6b;
+  --color-krypton-900: #023c55;
+  --color-krypton-950: #012c3f;
+  --color-green-50: #c0f49a;
+  --color-green-100: #a7e57a;
+  --color-green-200: #8fd75d;
+  --color-green-300: #7ac843;
+  --color-green-400: #66b92d;
+  --color-green-500: #54aa18;
+  --color-green-600: #47990f;
+  --color-green-700: #397e0a;
+  --color-green-800: #2b6206;
+  --color-green-900: #1f4703;
+  --color-green-950: #122b01;
+  --color-red-50: #e6afaf;
+  --color-red-100: #dd9090;
+  --color-red-200: #d57272;
+  --color-red-300: #cc5757;
+  --color-red-400: #c33d3d;
+  --color-red-500: #bb2626;
+  --color-red-600: #b21010;
+  --color-red-700: #950808;
+  --color-red-800: #780404;
+  --color-red-900: #5c0202;
+  --color-red-950: #3f0101;
+  --color-yellow-50: #fefce8;
+  --color-yellow-100: #fef9c2;
+  --color-yellow-200: #fff085;
+  --color-yellow-300: #ffdf20;
+  --color-yellow-400: #fdc700;
+  --color-yellow-500: #efb100;
+  --color-yellow-600: #d08700;
+  --color-yellow-700: #a65f00;
+  --color-yellow-800: #894b00;
+  --color-yellow-900: #733e0a;
+  --color-yellow-950: #432004;
+
+  --color-white: #ffffff;
+
+  --color-dark-foreground: var(--color-neutral-50);
+  --color-dark-background: var(--color-neutral-950);
+  --color-dark-shade-1: var(--color-neutral-900);
+  --color-dark-shade-2: var(--color-neutral-800);
+  --color-dark-shade-3: var(--color-neutral-700);
+  --color-dark-shade-4: var(--color-neutral-600);
+  --color-dark-text-1: var(--color-neutral-200);
+  --color-dark-text-2: var(--color-neutral-300);
+  --color-dark-text-3: var(--color-neutral-400);
+  --color-dark-text-4: var(--color-neutral-500);
+  --color-dark-primary: var(--color-argon-400);
+  --color-dark-secondary: var(--color-krypton-300);
+  --color-dark-error: var(--color-red-500);
+  --color-dark-success: var(--color-green-500);
+  --color-dark-warning: var(--color-yellow-500);
+  --color-dark-accent-1: #60a5f9;
+  --color-dark-accent-2: #d381f7;
+  --color-dark-accent-3: #ff7975;
+
+  --color-light-foreground: var(--color-neutral-950);
+  --color-light-background: var(--color-neutral-50);
+  --color-light-shade-1: var(--color-neutral-100);
+  --color-light-shade-2: var(--color-neutral-200);
+  --color-light-shade-3: var(--color-neutral-300);
+  --color-light-shade-4: var(--color-neutral-400);
+  --color-light-text-1: var(--color-neutral-800);
+  --color-light-text-2: var(--color-neutral-700);
+  --color-light-text-3: var(--color-neutral-600);
+  --color-light-text-4: var(--color-neutral-500);
+  --color-light-primary: var(--color-argon-600);
+  --color-light-secondary: var(--color-krypton-500);
+  --color-light-error: var(--color-red-600);
+  --color-light-success: var(--color-green-600);
+  --color-light-warning: var(--color-yellow-600);
+  --color-light-accent-1: #303ec0;
+  --color-light-accent-2: #6c366c;
+  --color-light-accent-3: #932f0a;
+
+  --color-cmyk-primary: var(--color-dark-primary);
+  --color-cmyk-secondary: var(--color-dark-secondary);
+
+}
+// fonts
+
+@font-face {
+  font-family: 'Athiti';
+  font-weight: 700;
+  src: url('assets/font/athiti/Athiti-Bold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Athiti';
+  font-weight: 600;
+  src: url('assets/font/athiti/Athiti-SemiBold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Athiti';
+  font-weight: 500;
+  src: url('assets/font/athiti/Athiti-Medium.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Athiti';
+  font-weight: 400;
+  src: url('assets/font/athiti/Athiti-Regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Athiti';
+  font-weight: 300;
+  src: url('assets/font/athiti/Athiti-Light.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Athiti';
+  font-weight: 200;
+  src: url('assets/font/athiti/Athiti-ExtraLight.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Departure Mono';
+  src: url('assets/font/departuremono/DepartureMono-Regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Argon Glow';
+  font-weight: 100;
+  src: url('assets/font/argonglow/ArgonGlow-Thin.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Argon Glow';
+  font-weight: 200;
+  src: url('assets/font/argonglow/ArgonGlow-ExtraLight.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Argon Glow';
+  font-weight: 300;
+  src: url('assets/font/argonglow/ArgonGlow-Light.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Argon Glow';
+  font-weight: 400;
+  src: url('assets/font/argonglow/ArgonGlow-Regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Argon Glow';
+  font-weight: 500;
+  src: url('assets/font/argonglow/ArgonGlow-Medium.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Argon Glow';
+  font-weight: 600;
+  src: url('assets/font/argonglow/ArgonGlow-SemiBold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Argon Glow';
+  font-weight: 700;
+  src: url('assets/font/argonglow/ArgonGlow-Bold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Argon Glow';
+  src: url('assets/font/argonglow/ArgonGlow-VariableVF.woff2') format('woff2');
+  font-weight: 100 900;
+}
+
+
+:root.is-transparent {
+  background: transparent;
+}
+
+$scale: 1;
+
+body {
+  margin: 0;
+  padding: 0;
+  background-color: #000000;
+  display: block;
+}
+
+#scene {
+  background: var(--color-dark-background);
+  color: white;
+  width: calc(1920px * $scale);
+  height: calc(1080px * $scale);
+  overflow: hidden;
+  contain: strict;
+  position: relative;
+}
+
+:root.is-transparent #scene {
+  background: transparent;
+}
+
+#title {
+  position: absolute;
+  left: calc(100px * $scale);
+  top: calc(600px * $scale);
+  width: calc(1720px * $scale);
+  overflow: visible;
+
+  text {
+    font-family: 'Argon Glow', ui-sans, sans-serif;
+    font-weight: 400;
+    font-size: 216px;
+  }
+}
+
+#breakText {
+  position: absolute;
+  left: calc(100px * $scale);
+  top: 0;
+  width: calc(1720px * $scale);
+  height:  calc(1080px * $scale);
+  overflow: visible;
+  transform: scale(2.5);
+
+  text {
+    font-family: 'Argon Glow', ui-sans, sans-serif;
+    font-weight: 400;
+    font-size: 216px;
+    text-anchor: middle;
+  }
+}
+
+#speaker {
+  position: absolute;
+  right: 150px;
+  bottom: 150px;
+  overflow: visible;
+
+  text {
+    font-family: 'Argon Glow', ui-sans, sans-serif;
+    font-weight: 400;
+    font-size: 216px;
+    text-anchor: end;
+    fill: #ffffff;
+  }
+}
+
+#title,#speaker {
+  tspan {
+    fill: #ffffff;
+  }
+}
+
+#logo_eventname_glow_off {
+  position: absolute;
+  top: calc(100px * $scale);
+  left: calc(100px * $scale);
+  width: calc(1720px * $scale);
+  height: calc(400px * $scale);
+  overflow: visible;
+}
+
+#logo_eventname_glow {
+  position: absolute;
+  top: calc(100px * $scale);
+  left: calc(100px * $scale);
+  width: calc(1720px * $scale);
+  height: calc(400px * $scale);
+  overflow: visible;
+}
+
+#bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: calc(1920px * $scale);
+}
+
+#outro {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: calc(1920px * $scale);
+  z-index: 10;
+}
+
+#svgPath {
+  //display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+}