Stranger Things title animation

<svg viewBox="0 0 1200 800">
  <defs id="defs105">
    <mask id="spotReveal">
      <ellipse
        id="ellipse2"
        cx="600"
        cy="380"
        fill="white"
        stroke="#d6d6d6"
        stroke-width="120"
        rx="600"
        ry="300"
      />
    </mask>
    <linearGradient id="linear1" xlink:href="#linearGradient1605">
      <stop id="stop1003" offset="0" stop-color="#e3280d" />
      <stop id="stop1106" offset=".19" stop-color="#d00b0b" />
      <stop id="stop1300" offset=".318" stop-color="#9d0707" />
      <stop id="stop1558" offset=".318" stop-color="#a11111" />
      <stop id="stop1624" offset=".445" stop-color="#ce1212" />
      <stop id="stop1818" offset=".529" stop-color="#df0b40" />
      <stop id="stop1884" offset=".636" stop-color="#ff4141" />
      <stop id="stop2142" offset=".777" stop-color="#ce4e34" />
      <stop id="stop2208" offset=".888" stop-color="#c75544" />
      <stop id="stop2274" offset=".95" stop-color="#e8572a" />
      <stop id="stop1005" offset="1" stop-color="#9f0000" />
    </linearGradient>
    <linearGradient id="linear2" x2="1" gradientUnits="objectBoundingBox">
      <stop id="stop9806" offset="0" stop-color="#e3280d" />
      <stop id="stop9808" offset="1" stop-color="#9f0000" />
    </linearGradient>
    <linearGradient id="linear3">
      <stop id="stop20" offset="0" stop-color="#f03417" />
      <stop id="stop22" offset=".25" stop-color="#ec4848" />
      <stop id="stop24" offset=".621" stop-color="#b40e0e" />
      <stop id="stop26" offset="1" stop-color="#7e1616" />
    </linearGradient>
    <linearGradient id="linear4" x2="1" gradientUnits="objectBoundingBox">
      <stop id="stop17" offset="0" stop-color="#bd220a" />
      <stop id="stop1852" offset=".46" stop-color="#ff673b" />
      <stop id="stop1982" offset=".64" stop-color="#b0412d" />
      <stop id="stop19" offset="1" stop-color="#af0000" />
    </linearGradient>
    <linearGradient
      id="linear10"
      x1="785.89"
      x2="719.036"
      y1="467.842"
      y2="484.328"
      gradientUnits="userSpaceOnUse"
      gradientTransform="scale(1.00056 .99944)"
    >
      <stop id="stop52" offset="0" stop-color="#f76430" />
      <stop id="stop54" offset=".147" stop-color="#f93838" />
      <stop id="stop16335" offset=".394" stop-color="#d31313" />
      <stop id="stop56" offset=".904" stop-color="#e91e1e" />
      <stop id="stop58" offset="1" stop-color="#9f0000" />
    </linearGradient>
    <linearGradient
      id="linear11"
      x1="193.438"
      x2="328.359"
      y1="238.877"
      y2="238.877"
      xlink:href="#linearGradient3689"
      gradientTransform="scale(.84123 1.18873)"
      gradientUnits="userSpaceOnUse"
    >
      <stop id="stop61" offset="0" stop-color="#c5230b" />
      <stop id="stop65" offset=".16" stop-color="#800505" />
      <stop id="stop75" offset=".28" stop-color="#ab402a" />
      <stop id="stop77" offset=".486" stop-color="#e12506" />
      <stop id="stop2647" offset=".77" stop-color="#fd2800" />
      <stop id="stop81" offset="1" stop-color="#ff8050" />
    </linearGradient>
    <radialGradient
      id="radial6"
      cx="584.662"
      cy="132.79"
      r="76.168"
      gradientTransform="matrix(.2093 .9011 -1.39805 .32472 788.926 -398.7)"
      gradientUnits="userSpaceOnUse"
      spreadMethod="reflect"
      fx="584.662"
      fy="132.79"
    >
      <stop id="stop30" stop-color="#ff795e" offset="0" />
      <stop id="stop32" stop-color="#dd0000" offset=".434" />
      <stop id="stop34" stop-color="#8f0909" offset="1" />
    </radialGradient>
    <radialGradient
      id="radial7"
      cx="1024.078"
      cy="679.563"
      r="76.168"
      gradientTransform="matrix(1.04794 -.13125 .06762 .53503 -706.428 150.76)"
      gradientUnits="userSpaceOnUse"
      spreadMethod="reflect"
      fx="1024.078"
      fy="679.563"
      fr="0"
    >
      <stop id="stop1369" stop-color="#ff542e" offset="0" />
      <stop id="stop7493" stop-color="#940606" offset=".468" />
      <stop id="stop1371" stop-color="#ed490f" offset="1" />
    </radialGradient>
    <radialGradient
      id="radial8"
      cx="1119.217"
      cy="266.345"
      r="76.168"
      gradientTransform="matrix(.4586 -.1056 .25028 1.08687 395.6 196.343)"
      gradientUnits="userSpaceOnUse"
      spreadMethod="reflect"
      fx="1119.217"
      fy="266.345"
    >
      <stop id="stop53" stop-color="#f97c52" offset="0" />
      <stop id="stop55" stop-color="#c01212" offset=".496" />
      <stop
        id="stop2573"
        stop-color="#d40d0d"
        stop-opacity=".992"
        offset=".818"
      />
      <stop id="stop57" stop-color="#ea0000" offset="1" />
    </radialGradient>
    <radialGradient
      id="radial10"
      cx="1255.604"
      cy="694.112"
      r="76.168"
      gradientUnits="userSpaceOnUse"
      gradientTransform="matrix(-.00303 -1.1965 .87627 -.00222 -111.133 2013.45)"
      spreadMethod="reflect"
      fx="1246417.1"
      fy="171296.59"
    >
      <stop id="stop19297" offset="0" stop-color="#fe744f" />
      <stop id="stop19299" offset=".562" stop-color="#c70000" />
      <stop id="stop19301" offset=".814" stop-color="#c70c0c" />
      <stop id="stop19303" offset="1" stop-color="#ef0000" />
    </radialGradient>
    <radialGradient
      id="radial12"
      cx="599.01"
      cy="233.7"
      r="76.168"
      gradientUnits="userSpaceOnUse"
      gradientTransform="matrix(.17493 .98458 -.42958 .07632 583.62 -389.03)"
      spreadMethod="reflect"
    >
      <stop id="stop88" offset="0" stop-color="#f76929" />
      <stop id="stop90" offset=".652" stop-color="#c10606" />
      <stop id="stop92" offset=".904" stop-color="#992929" />
      <stop id="stop94" offset="1" stop-color="#9f0000" />
    </radialGradient>
    <radialGradient
      id="radial13"
      cx="599.01"
      cy="233.7"
      r="76.168"
      gradientUnits="userSpaceOnUse"
      gradientTransform="matrix(.17493 .98458 -.42958 .07632 583.62 -389.03)"
      spreadMethod="reflect"
    >
      <stop id="stop108" offset="0" stop-color="#f76929" />
      <stop id="stop110" offset=".652" stop-color="#c10606" />
      <stop id="stop112" offset=".904" stop-color="#992929" />
      <stop id="stop114" offset="1" stop-color="#9f0000" />
    </radialGradient>
    <radialGradient
      id="radial14"
      cx="1056.209"
      cy="436.324"
      r="76.168"
      gradientUnits="userSpaceOnUse"
      gradientTransform="matrix(1.20867 .29027 -.26166 1.08955 -303.787 -282.918)"
      fx="1246217.8"
      fy="171038.8"
      spreadMethod="reflect"
    >
      <stop id="stop117" offset="0" stop-color="#e64008" />
      <stop id="stop119" offset=".182" stop-color="#e64008" />
      <stop id="stop121" offset=".436" stop-color="#ad0808" />
      <stop id="stop123" offset="1" stop-color="#ed0707" />
    </radialGradient>
    <radialGradient
      id="radial15"
      cx="1167.47"
      cy="467.231"
      r="76.168"
      gradientTransform="matrix(.53286 .20877 -.5097 1.29858 223.74 -487.17)"
      gradientUnits="userSpaceOnUse"
      spreadMethod="reflect"
      xlink:href="#radialGradient3093"
      fx="1167.47"
      fy="467.231"
    >
      <stop id="stop138" stop-color="#a41313" stop-opacity=".965" offset="0" />
      <stop id="stop140" stop-color="#e64008" offset=".317" />
      <stop id="stop142" stop-color="#780e0e" offset="1" />
    </radialGradient>
    <radialGradient
      id="radial16"
      cx="653.407"
      cy="323.265"
      r="76.168"
      gradientUnits="userSpaceOnUse"
      gradientTransform="matrix(.45394 1.35856 -.41382 .13827 396.215 -653.42)"
      spreadMethod="reflect"
      fx="653.407"
      fy="323.265"
    >
      <stop id="stop130" offset="0" stop-color="#ed490f" />
      <stop id="stop132" offset=".542" stop-color="#ed490f" />
      <stop id="stop134" offset=".72" stop-color="#992929" />
      <stop id="stop136" offset="1" stop-color="#9f0000" />
    </radialGradient>
    <filter
      id="shadow"
      width="1.02"
      height="1.068"
      x="-.01"
      y="-.033"
      color-interpolation-filters="sRGB"
    >
      <feFlood
        id="feFlood349"
        flood-opacity=".671"
        flood-color="rgb(255,51,51)"
        result="flood"
      />
      <feComposite
        id="feComposite351"
        in="flood"
        in2="SourceGraphic"
        operator="in"
        result="composite1"
      />
      <feGaussianBlur
        id="feGaussianBlur353"
        in="composite1"
        stdDeviation="3"
        result="blur"
      />
      <feOffset id="feOffset355" result="offset" />
      <feComposite
        id="feComposite357"
        in="SourceGraphic"
        in2="offset"
        result="composite2"
      />
    </filter>
  </defs>
  <rect id="bg" width="1200" height="800" x=".067" y="-.066" />
  <g id="title">
    <rect
      id="top-box"
      width="898.19"
      height="12.222"
      x="153.11"
      y="259.4"
      fill="none"
      stroke="url(#linear1)"
      stroke-width="3"
      class="box"
      stroke-linecap="round"
      stroke-linejoin="round"
    />
    <rect
      id="bottom-left-box"
      width="169"
      height="12.114"
      x="152.15"
      y="460.32"
      fill="none"
      stroke="url(#linear1)"
      stroke-width="3"
      class="box"
      stroke-linecap="round"
      stroke-linejoin="round"
    />
    <rect
      id="bottom-right-box"
      width="149.8"
      height="12.317"
      x="923.83"
      y="457.42"
      fill="none"
      stroke="url(#linear1)"
      stroke-width="3"
      class="box"
      stroke-linecap="round"
      stroke-linejoin="round"
    />
    <path
      id="word1-s"
      fill="none"
      stroke="url(#linear11)"
      stroke-width="3"
      d="M168.6 389.73l-3.558 50.234c2.807-2.22 1.657-4.497 9.423-6.643 13.99-.61 21.083 5.95 36.038 6.14 0 0 12.947.49 22.858-1.57 7.75-1.6 14.9-4.66 17.78-5.88 11.87-8.65 20.89-17.65 22.51-35.66 1.19-12.65 1.05-17.52-4.25-27.82-4.71-9.12-10.41-16.443-23.24-20.21-17.3-5.346-51.99-12.242-43.4-32.99 7.4-19.135 35.83-16.225 49.09 2.977l3.87 6.49 5.93-33.04-4.562 1.287c-8.216-1.794-2.46-.98-17.384-3.652-32.46-9.71-69.31 1.015-73.21 35.705-1.92 17.924 1.197 33.528 18.544 42.58l29.063 11.788 15.45 6.587c18.583 12.843 1.6 33.375-7.38 36.44-12.136 1.585-23.64 2.14-31.72-4.52-10.454-8.628-14.276-15.036-17.57-28.26z"
    />
    <path
      id="word1-t"
      stroke="url(#linear3)"
      stroke-width="3"
      d="M288.34 406.53h50.96v-4.48c-8.8-.48-10.237-5.764-9.92-18.56v-80.68h2.08c14.56 0 24 9.64 28.8 25l4.48-.8-5.712-28.35-1.693-6.797c-26.363-.112-52.492-.053-79.715-.053-2.502 0-4.204-.004-7.57-.066l-.437 2.362-6.553 32.904 4.48.8c4.8-15.36 14.24-25 28.8-25h2.08v80.68c0 12.32-.96 17.92-10.08 18.56z"
    />
    <path
      id="word1-r1"
      stroke="url(#radial7)"
      stroke-width="3"
      d="M366.755 404.63h46.324v-4.464c-7.366-1.275-7.686-5.898-7.686-16.42v-28.218l6.08-1.912c15.52 15.782 22.08 34.117 22.08 40.015 0 3.19-1.44 4.786-5.44 6.538v4.463h49.766v-4.465c-6.56-.956-8.64-6.535-12.32-15.622-7.04-17.22-14.4-31.406-24.162-42.087 14.402-8.61 21.604-19.928 21.604-31.088 0-11.795-7.68-17.055-23.203-17.055h-73.047v4.464c7.36 1.275 7.68 5.898 7.68 16.42v68.55c0 10.523-.32 15.147-7.68 16.42zm38.643-61.215v-29.813c0-6.06.32-8.77 11.04-8.77 9.44 0 13.92 3.51 13.92 11.64 0 11-8.8 23.433-24.96 26.943z"
    />
    <path
      id="word1-a"
      stroke="url(#radial16)"
      stroke-width="3"
      d="M506.84 308.71l-24.64 71.44c-4 11.04-6.72 18.08-16.48 20v4.48h36.16v-4.48c-5.44 0-8.32-2.56-8.32-7.52 0-2.56.8-6.24 2.4-10.88l6.24-17.6c22.88 1.44 37.12 14.08 37.12 27.04 0 5.28-2.4 8-8.16 8.96v4.48h54.56v-4.48c-6.88-.32-9.12-5.76-12.64-16l-24.32-75.44c-.48-1.6-.96-3.2-.96-5.12 0-1.76 1.44-3.68 4.32-4.8v-4.48h-48.64v4.48c3.04 1.28 4.32 2.88 4.32 5.28 0 1.44-.32 3.04-.96 4.64zm-.32 43.76l11.2-34.32 11.68 42c-6.56-4.32-13.92-6.72-22.88-7.68z"
    />
    <path
      id="word1-g"
      fill="none"
      stroke="url(#radial6)"
      stroke-width="3"
      d="M762.66 362.15v15.52c0 10.72-.8 16.48-11.68 16.48-16.16 0-30.72-19.36-30.72-48.16 0-22.56 11.68-40.16 30.24-40.16 12.8 0 22.24 6.88 30.56 20.96h3.84l-4.96-35.2c-4.16 2.4-7.52 3.84-10.72 3.84-5.92 0-14.88-3.2-28.16-3.2-23.964 0-42.424 11.87-49.823 30.81-2.227 14.867-.86 29.565-1.34 44.36.22 1.398.528 2.8.958 4.086 6.746 20.175 17.09 32.45 50.53 32.898 25.9.61 40.803.356 63.042.27v-4.4c-8.32-1.6-9.127-5.464-9.127-15.704v-22.4c0-10.24.64-15.04 8.96-16.64v-4.32H753.7v4.32c8.32 1.6 8.96 6.4 8.96 16.64z"
    />
    <path
      id="word1-e"
      stroke="url(#linear4)"
      stroke-width="3"
      d="M814.78 404.63h83.92c2.88 0 5.6 0 8.48 1.76l13.6-43.52-4.16-1.28c-10.56 21.92-23.68 32.32-41.28 32.32-11.52 0-13.276-3.858-13.92-15.2v-35.2h8.16c13.28 0 18.72 5.44 22.72 18.72l3.2-1.28-6.88-40.8h-3.2c-1.28 10.72-4.96 12.32-15.04 12.32h-8.96v-11.04c0-9.12 1.28-16.24 11.04-16.24 17.28 0 29.44 8 35.84 23.68l4.16-.96-8.96-36.8c-1.76 2.24-4.8 3.2-9.12 3.2h-79.6v4.48c7.36 1.28 7.68 9.52 7.68 20.08v64.8c0 10.56-.32 15.2-7.68 16.48z"
    />
    <path
      id="word1-r2"
      stroke="url(#radial8)"
      stroke-width="3"
      d="M923.54 430.67h61.805v-5.73c-9.414-1.637-9.824-7.573-9.824-21.08v-36.223l7.78-2.456c19.85 20.27 28.24 43.8 28.24 51.37 0 4.1-1.84 6.14-6.95 8.39v5.73h63.65v-5.73c-8.39-1.22-11.05-8.39-15.76-20.05-9-22.1-18.42-40.31-30.9-54.03 18.42-11.05 27.63-20.46 27.63-34.79 0-15.14-9.82-21.9-29.67-21.9h-95.98v5.73c9.413 1.64 9.822 7.58 9.822 21.08v82.89c0 13.51-.41 19.45-9.822 21.08zm51.982-78.587V318.93c0-7.778.41-11.257 14.12-11.257 12.076 0 17.805 4.502 17.805 14.94 0 14.12-11.255 24.968-31.925 29.47z"
    />
    <path
      id="word2-t"
      fill="#000000"
      stroke="url(#linear3)"
      stroke-width="3"
      d="M357.06 551.61h50.96v-4.48c-8.8-.48-10.237-5.764-9.92-18.56v-80.68h2.08c14.56 0 24 9.64 28.8 25l4.48-.8-5.712-28.35-1.693-6.797c-26.363-.112-52.492-.053-79.715-.053-2.502 0-4.204-.004-7.57-.066l-.437 2.362-6.553 32.904 4.48.8c4.8-15.36 14.24-25 28.8-25h2.08v80.68c0 12.32-.96 17.92-10.08 18.56z"
    />
    <path
      id="word2-h"
      stroke="url(#radial10)"
      stroke-width="3"
      d="M477.1 482.15h27.04v48.84c0 10.56-.32 15.2-7.68 16.48v4.48h48.32v-4.48c-7.36-1.28-7.68-5.92-7.68-16.48v-68.2c0-10.56.32-15.2 7.68-16.48v-4.48h-48.32v4.48c7.36 1.28 7.68 5.92 7.68 16.48v8.32H477.1v-8.32c0-10.56.32-15.2 7.68-16.48v-4.48h-48.32v4.48c7.36 1.28 7.68 5.92 7.68 16.48v68.2c0 10.56-.32 15.2-7.68 16.48v4.48h48.32v-4.48c-7.36-1.28-7.68-5.92-7.68-16.48z"
    />
    <path
      id="word2-i"
      stroke="url(#radial12)"
      stroke-width="3"
      d="M553.5 551.95h46.32v-4.48c-7.36-1.28-7.68-5.92-7.68-16.48v-68.2c0-10.56.32-15.2 7.68-16.48v-4.48H553.5v4.48c7.36 1.28 7.68 5.92 7.68 16.48v68.2c0 10.56-.32 15.2-7.68 16.48z"
    />
    <path
      id="word2-n"
      stroke="url(#radial13)"
      stroke-width="3"
      d="M615.7 462.48v68.5c0 10.56-.32 15.2-7.68 16.48v4.48h31.36v-4.48c-9.28-.64-10.08-6.56-10.08-18.56v-67.38l58.56 69.3v3.68c0 8.96-1.12 12.64-9.92 12.96v4.48h31.36v-4.48c-7.36-1.28-7.68-5.92-7.68-16.48v-68.5c0-10.56.32-15.2 7.68-16.48v-4.48h-29.12V446c7.36 1.28 7.68 5.92 7.68 16.48v16.32l-20.64-22.88c-1.92-2.08-2.88-4.48-2.88-5.6 0-1.6 1.12-3.2 3.68-4.32v-4.48h-60V446c7.36 1.28 7.68 5.92 7.68 16.48z"
    />
    <path
      id="word2-g"
      stroke="url(#linear10)"
      stroke-width="3"
      d="M782.51 509.38v15.52c0 10.72-.8 16.48-11.68 16.48-16.16 0-30.72-19.36-30.72-48.16 0-22.56 11.68-40.16 30.24-40.16 12.8 0 22.24 6.88 30.56 20.96h3.84l-4.96-35.2c-4.16 2.4-7.52 3.84-10.72 3.84-5.92 0-14.88-3.2-28.16-3.2-23.964 0-42.424 11.87-49.823 30.81-2.227 14.867-.86 29.565-1.34 44.36.22 1.398.528 2.8.958 4.086 6.746 20.175 17.09 32.45 50.53 32.898 25.9.61 40.803.356 63.042.27v-4.4c-8.32-1.6-9.127-5.464-9.127-15.704v-22.4c0-10.24.64-15.04 8.96-16.64v-4.32h-50.56v4.32c8.32 1.6 8.96 6.4 8.96 16.64z"
    />
    <path
      id="word2-s"
      stroke="url(#radial14)"
      stroke-width="3"
      d="M892.84 479.29l-13.44-4.16c-8.96-2.88-14.08-5.28-14.08-12 0-6.24 5.76-11.2 14.88-11.2 11.52 0 22.56 7.84 30.08 22.56l4.48-.64-3.36-33.92c-2.88 1.6-5.28 2.56-7.52 2.56-8.8 0-19.52-3.2-32.16-3.2-25.92 0-40.64 13.76-40.64 33.28 0 15.52 8.8 26.64 26.56 32.4l12.8 4.16c12.8 4.16 20.8 5.76 20.8 16.16 0 8.8-7.36 14.24-21.28 14.24-19.84 0-32.96-11.68-36.32-32.8l-4.32.16 2.72 45.12c3.2-2.24 5.76-3.36 8.96-3.36 6.24 0 17.12 3.84 33.28 3.84 31.68 0 51.36-16.16 51.36-38.88 0-19.04-11.52-27.6-32.8-34.32z"
    />
    <path
      id="word1-n"
      stroke="url(#radial15)"
      stroke-width="3"
      d="M595.98 315.248v68.44c0 9.986-.205 14.528-6.47 16.07-.354.086-.726.164-1.12.232l-.023 1.227-.067 3.41h31.36v-4.673c-9.28-.64-10.08-6.355-10.08-18.345v-67.32l58.56 69.24v3.67c0 8.953-1.12 12.63-9.92 12.95v4.476h31.36v-4.476c-7.36-1.28-7.68-5.914-7.68-16.464v-68.44c0-10.55.32-15.186 7.68-16.465v-4.474h-29.12v4.474c7.36 1.28 7.68 5.914 7.68 16.464v16.305l-20.64-22.86c-1.92-2.08-2.88-4.478-2.88-5.597 0-1.596 1.12-3.195 3.68-4.314v-4.476h-60v4.475c7.36 1.28 7.68 5.914 7.68 16.464z"
    />
    <rect
      id="black-magic-box1"
      width="16.729"
      height="1.9"
      x="578.532"
      y="401.238"
      fill="#000000"
      stroke-width="1.027"
      ry="1.334"
    />
    <rect
      id="black-magic-box2"
      width="13.629"
      height="5.9"
      x="463.535"
      y="397.223"
      stroke-width="1.01"
    />
  </g>
</svg>

<label id="shadow-toggle">Shadows:<input type="checkbox" /></label>

<button title="Mute sound">
	<svg class="mute-on" viewBox="0 0 24 24" aria-label="Mute on">
		<path
			d="M12,4L9.91,6.09L12,8.18M4.27,3L3,4.27L7.73,9H3V15H7L12,20V13.27L16.25,17.53C15.58,18.04 14.83,18.46 14,18.7V20.77C15.38,20.45 16.63,19.82 17.68,18.96L19.73,21L21,19.73L12,10.73M19,12C19,12.94 18.8,13.82 18.46,14.64L19.97,16.15C20.62,14.91 21,13.5 21,12C21,7.72 18,4.14 14,3.23V5.29C16.89,6.15 19,8.83 19,12M16.5,12C16.5,10.23 15.5,8.71 14,7.97V10.18L16.45,12.63C16.5,12.43 16.5,12.21 16.5,12Z"
		></path>
	</svg>

	<svg class="mute-off hide" viewBox="0 0 24 24" aria-label="Mute off">
		<path
			d="M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z"
		></path>
	</svg>
</button>

body {
  height: 100dvh;
  max-width: 1920px;
  margin: 0;

  background-color: black;

  display: grid;
  place-items: center;

  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}

svg {
  display: block;
  width: 100%;
}

button {
  --size: clamp(1.5rem, calc(1.5rem + 1vw), 2rem);

  position: fixed;
  top: 0.65rem;
  right: 0.5rem;

  width: var(--size);
  height: var(--size);

  background-color: white;

  border: none;
  border-radius: 50%;
}

button svg {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
}

button path {
  fill: black;
}

.hide {
  display: none;
}

#shadow-toggle {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;

  padding: 0.25rem;

  display: flex;
  align-items: center;

  font-size: 1.25rem;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;

  background-color: white;
  border-radius: 0.5rem;

  cursor: pointer;
}

#shadow-toggle input {
  --size: 1.25rem;

  width: var(--size);
  height: var(--size);

  cursor: pointer;

  box-shadow: 0 0 2px hsl(0deg 0% 0% / 30%), 0 1px 2px hsl(0deg 0% 0% / 20%);
}

gsap.registerPlugin(EasePack);

function part1() {
  let scaleTimeline = gsap.timeline();

  scaleTimeline.set("#title", { transformOrigin: "48% 70%", scale: 4.9 });

  scaleTimeline.to("#title", {
    duration: 20,
    scale: 0.8,
    ease: EasePack.ExpoScaleEase.config(4.9, 0.8),
  });

  return scaleTimeline;
}

function part2() {
  let lettersTimeline = gsap.timeline();

  let batch1Distance = 30;
  let batch3Distance = 50;
  let batch6and8Distance = 180;
  let batch9and10Distance = 150;

  // first word: STRANGER
  lettersTimeline.set("#word1-s", { x: `-${batch9and10Distance}` });
  lettersTimeline.set("#word1-t", { y: `-${batch6and8Distance}` });
  lettersTimeline.set("#word1-r1", { x: -60 });
  lettersTimeline.set("#word1-a", { x: `-${batch1Distance}` });
  lettersTimeline.set("#word1-n", { x: `${batch1Distance}` });
  lettersTimeline.set("#word1-g", { x: `${batch3Distance}` });
  lettersTimeline.set("#word1-e", { y: -180 });
  lettersTimeline.set("#word1-r2", { x: `${batch9and10Distance}` });

  // second word: THINGS
  // 'T' is static
  lettersTimeline.set("#word2-h", { y: `${batch6and8Distance}` });
  lettersTimeline.set("#word2-i", { x: -130 });
  lettersTimeline.set("#word2-n", { y: 140 });
  lettersTimeline.set("#word2-g", { x: `${batch3Distance}` });
  lettersTimeline.set("#word2-s", { y: 180 });

  lettersTimeline
    .addLabel("batch1", 0)
    .addLabel("batch2", 0.2)
    .addLabel("batch3", 1)
    .addLabel("batch4", 4)
    .addLabel("batch5", 5)
    .addLabel("batch6", 8.75)
    .addLabel("batch7", 9)
    .addLabel("batch8", 9.5)
    .addLabel("batch9", 11)
    .addLabel("batch10", 12.75)

    .to("#word1-a, #word1-n", { x: 0, duration: 6 }, "batch1")
    .to("#word2-i", { x: 0, duration: 9 }, "batch2")
    .to("#word1-g, #word2-g", { x: 0, duration: 11 }, "batch3")
    .to("#word1-r1", { x: 0, duration: 6 }, "batch4")
    .to("#word2-n", { y: 0, duration: 5 }, "batch5")
    .to("#word1-t", { y: 0, duration: 6 }, "batch6")
    .to("#word2-h", { y: 0, duration: 4.5 }, "batch7")
    .to("#word1-e, #word2-s", { y: 0, duration: 7 }, "batch8")
    .to("#word1-r2", { x: 0, duration: 6 }, "batch9")
    .to("#word1-s", { x: 0, duration: 4.25 }, "batch10");

  return lettersTimeline;
}

function part3() {
  let boxesTimeline = gsap.timeline();
  boxesTimeline
    .to("#top-box", { scaleX: 1, duration: 1, ease: "power2.out" })
    .to(
      "#bottom-left-box, #bottom-right-box",
      { scaleX: 1, duration: 0.75 },
      "-=.5"
    );

  return boxesTimeline;
}

function part4() {
  let visibilityTimeline = gsap.timeline();

  visibilityTimeline.set("#spotReveal ellipse", {
    transformOrigin: "50% 50%",
  });

  visibilityTimeline.to("#spotReveal ellipse", {
    scale: 0.6,
    opacity: 0,
    duration: 2,
    onStart: () => {
      document.querySelector("#title").setAttribute("mask", "url(#spotReveal)");
    },
  });

  return visibilityTimeline;
}

function polish() {
  let magicBoxesTimeline = gsap.timeline();

  magicBoxesTimeline
    .to("#black-magic-box1", {
      opacity: 1,
      ease: "power2.in",
      duration: 0.8,
    })
    .to(
      "#black-magic-box2",
      {
        opacity: 1,
        duration: 0.8,
        ease: "power2.in",
      },
      "<+=2.2"
    );

  return magicBoxesTimeline;
}

const masterTimeline = gsap.timeline({
  onStart: async () => {
    await playSong();
  },
  onRepeat: async () => {
    await playSong();
  },
});

// since we want this to be set at the very start
masterTimeline
  .set("#top-box", { scaleX: 0, transformOrigin: "50% 50%" })
  .set("#bottom-left-box", { scaleX: 0, transformOrigin: "100% 50%" })
  .set("#bottom-right-box", { scaleX: 0, transformOrigin: "0% 50%" })
  .set("#black-magic-box1, #black-magic-box2", {
    opacity: 0,
  });

masterTimeline
  .add(part1(), 0)
  .add(part2(), 0)
  .add(polish(), 5.3) // at 5.3 second mark
  .add(part3(), 15)
  .add(part4(), 19);

const title = document.querySelector("svg");

title.addEventListener("click", () => {
  masterTimeline.restart();
});

// audio toggle
let muteButton = document.querySelector("button");
let muteOnIcon = muteButton.querySelector(".mute-on");
let muteOffIcon = muteButton.querySelector(".mute-off");
let muted = true;

let track = new Audio("audio/title.mp3");

muteButton.addEventListener("click", toggleMute);

async function toggleMute() {
  // initiate playing the song if it was blocked
  if (track.currentTime === 0) {
    await playSong();
  }

  muteOnIcon.classList.toggle("hide");
  muteOffIcon.classList.toggle("hide");

  track.muted = !track.muted;
  muted = !muted;
}

async function playSong() {
  track.volume = 0.3;
  track.currentTime = 0;
  track.muted = muted;

  try {
    await track.play();
  } catch (error) {
    console.error(error);
  }
}

// shadow toggle

const shadowToggle = document.querySelector("#shadow-toggle input");

shadowToggle.addEventListener("click", toggleIcons);

function toggleIcons() {
  const titleGroup = document.querySelector("#title");
  const value = titleGroup.getAttribute("filter");

  if (value === null || value === "") {
    titleGroup.setAttribute("filter", "url(#shadow)");
  } else {
    titleGroup.setAttribute("filter", "");
  }
}