<script setup lang="ts">
import './cinematicStarLoader.css'

withDefaults(defineProps<{
  eyebrow?: string
  title: string
  text?: string
  outroText?: string
}>(), {
  eyebrow: 'VTuber Star Award',
  text: '',
  outroText: 'Sterne am Himmel gefunden und Erfolgreich verknüpft.',
})
</script>

<template>
  <div class="loader">
    <div class="loader__nebula loader__nebula--violet"></div>
    <div class="loader__nebula loader__nebula--rose"></div>
    <div class="loader__nebula loader__nebula--gold"></div>
    <div class="loader__vignette"></div>
    <div class="loader__starfield loader__starfield--far"></div>
    <div class="loader__starfield loader__starfield--mid"></div>
    <div class="loader__starfield loader__starfield--near"></div>
    <div class="loader__constellation" aria-hidden="true">
      <span class="constellation-star constellation-star--1">✦</span>
      <span class="constellation-star constellation-star--2">✧</span>
      <span class="constellation-star constellation-star--3">★</span>
      <span class="constellation-star constellation-star--4">✦</span>
      <span class="constellation-star constellation-star--5">✧</span>
      <span class="constellation-star constellation-star--6">★</span>
    </div>
    <div class="loader__scene">
      <div class="loader__tableau" aria-hidden="true">
        <div class="loader__aurora loader__aurora--violet"></div>
        <div class="loader__aurora loader__aurora--peach"></div>
        <div class="loader__hanger loader__hanger--left">
          <span class="loader__thread"></span>
          <span class="loader__charm loader__charm--star">✦</span>
        </div>
        <div class="loader__hanger loader__hanger--center">
          <span class="loader__thread"></span>
          <span class="loader__charm loader__charm--moon">☾</span>
        </div>
        <div class="loader__hanger loader__hanger--right">
          <span class="loader__thread"></span>
          <span class="loader__charm loader__charm--spark">✧</span>
        </div>
        <div class="loader__mist loader__mist--left"></div>
        <div class="loader__mist loader__mist--center"></div>
        <div class="loader__mist loader__mist--right"></div>
        <div class="loader__dissolve" aria-hidden="true">
          <svg class="loader__dissolve-lines" viewBox="0 0 340 230" role="presentation" focusable="false">
            <line class="loader__dissolve-line loader__dissolve-line--one" x1="55" y1="63" x2="160" y2="40" pathLength="1" />
            <line class="loader__dissolve-line loader__dissolve-line--two" x1="160" y1="40" x2="290" y2="80" pathLength="1" />
            <line class="loader__dissolve-line loader__dissolve-line--three" x1="55" y1="63" x2="87" y2="155" pathLength="1" />
            <line class="loader__dissolve-line loader__dissolve-line--four" x1="87" y1="155" x2="195" y2="137" pathLength="1" />
            <line class="loader__dissolve-line loader__dissolve-line--five" x1="195" y1="137" x2="297" y2="193" pathLength="1" />
            <line class="loader__dissolve-line loader__dissolve-line--six" x1="195" y1="137" x2="223" y2="213" pathLength="1" />
            <line class="loader__dissolve-line loader__dissolve-line--seven" x1="87" y1="155" x2="41" y2="205" pathLength="1" />
          </svg>
          <span class="loader__dissolve-dot loader__dissolve-dot--one"></span>
          <span class="loader__dissolve-dot loader__dissolve-dot--two"></span>
          <span class="loader__dissolve-dot loader__dissolve-dot--three"></span>
          <span class="loader__dissolve-dot loader__dissolve-dot--four"></span>
          <span class="loader__dissolve-dot loader__dissolve-dot--five"></span>
          <span class="loader__dissolve-dot loader__dissolve-dot--six"></span>
          <span class="loader__dissolve-dot loader__dissolve-dot--seven"></span>
          <span class="loader__dissolve-dot loader__dissolve-dot--eight"></span>
        </div>
      </div>
      <div class="loader__copy">
        <div class="loader__eyebrow">{{ eyebrow }}</div>
        <h1 class="loader__title">{{ title }}</h1>
        <p v-if="text" class="loader__text">{{ text }}</p>
        <p class="loader__outro-text">{{ outroText }}</p>
      </div>
    </div>
  </div>
</template>
