<template>
  <Transition name="splash-fade">
    <div v-if="showSplash" class="splash-screen">
      <div class="splash-content">
        <svg 
          width="400" 
          height="400" 
          viewBox="0 0 1374 1401" 
          fill="none" 
          xmlns="http://www.w3.org/2000/svg"
          class="splash-logo"
        >
          <!-- Top Left Block -->
          <path 
            class="logo-stroke logo-block-1"
            d="M321.5 2.5V417.5H1.5V2.5H321.5Z" 
            stroke="url(#paint1_linear_548_65)" 
            stroke-width="3"
            fill="transparent"
          />
          <path 
            class="logo-fill logo-fill-1"
            d="M321.5 2.5V417.5H1.5V2.5H321.5Z" 
            fill="url(#paint0_linear_548_65)"
          />

          <!-- Top Right Block -->
          <path 
            class="logo-stroke logo-block-2"
            d="M1372.5 1.5V416.5H1052.5V1.5H1372.5Z" 
            stroke="url(#paint3_linear_548_65)" 
            stroke-width="3"
            fill="transparent"
          />
          <path 
            class="logo-fill logo-fill-2"
            d="M1372.5 1.5V416.5H1052.5V1.5H1372.5Z" 
            fill="url(#paint2_linear_548_65)"
          />

          <!-- Bottom Left Block -->
          <path 
            class="logo-stroke logo-block-3"
            d="M321.5 984.5V1399.5H1.5V984.5H321.5Z" 
            stroke="url(#paint5_linear_548_65)" 
            stroke-width="3"
            fill="transparent"
          />
          <path 
            class="logo-fill logo-fill-3"
            d="M321.5 984.5V1399.5H1.5V984.5H321.5Z" 
            fill="url(#paint4_linear_548_65)"
          />

          <!-- Center Bottom Block (Dark) -->
          <path 
            class="logo-stroke logo-block-4"
            d="M909.5 984.5V1399.5H464.5V984.5H909.5Z" 
            stroke="url(#paint6_linear_548_65)" 
            stroke-width="3"
            fill="transparent"
          />
          <path 
            class="logo-fill logo-fill-4"
            d="M909.5 984.5V1399.5H464.5V984.5H909.5Z" 
            fill="#1D1D1D"
          />

          <!-- Bottom Right Block -->
          <path 
            class="logo-stroke logo-block-5"
            d="M1372.5 983.5V1398.5H1052.5V983.5H1372.5Z" 
            stroke="url(#paint8_linear_548_65)" 
            stroke-width="3"
            fill="transparent"
          />
          <path 
            class="logo-fill logo-fill-5"
            d="M1372.5 983.5V1398.5H1052.5V983.5H1372.5Z" 
            fill="url(#paint7_linear_548_65)"
          />

          <!-- Center Diagonals -->
          <path 
            class="logo-stroke logo-diagonal logo-diagonal-1"
            d="M467.042 558.5L630.433 841.5H469.695L306.305 558.5H467.042Z" 
            stroke="url(#paint10_linear_548_65)" 
            stroke-width="3"
            fill="transparent"
          />
          <path 
            class="logo-fill logo-fill-6"
            d="M467.042 558.5L630.433 841.5H469.695L306.305 558.5H467.042Z" 
            fill="url(#paint9_linear_548_65)"
          />

          <path 
            class="logo-stroke logo-diagonal logo-diagonal-2"
            d="M832.507 558.5L995.897 841.5H835.092L671.701 558.5H832.507Z" 
            stroke="url(#paint12_linear_548_65)" 
            stroke-width="3"
            fill="transparent"
          />
          <path 
            class="logo-fill logo-fill-7"
            d="M832.507 558.5L995.897 841.5H835.092L671.701 558.5H832.507Z" 
            fill="url(#paint11_linear_548_65)"
          />

          <path 
            class="logo-stroke logo-diagonal logo-diagonal-3"
            d="M1372.5 558.5V841.5H1200.56L1037.17 558.5H1372.5Z" 
            stroke="url(#paint14_linear_548_65)" 
            stroke-width="3"
            fill="transparent"
          />
          <path 
            class="logo-fill logo-fill-8"
            d="M1372.5 558.5V841.5H1200.56L1037.17 558.5H1372.5Z" 
            fill="url(#paint13_linear_548_65)"
          />

          <path 
            class="logo-stroke logo-diagonal logo-diagonal-4"
            d="M101.646 558.5L265.036 841.5H1.5V558.5H101.646Z" 
            stroke="url(#paint16_linear_548_65)" 
            stroke-width="3"
            fill="transparent"
          />
          <path 
            class="logo-fill logo-fill-9"
            d="M101.646 558.5L265.036 841.5H1.5V558.5H101.646Z" 
            fill="url(#paint15_linear_548_65)"
          />

          <!-- Center Circle -->
          <circle 
            class="logo-stroke logo-circle"
            cx="687.5" 
            cy="210.5" 
            r="209" 
            stroke="url(#paint17_linear_548_65)" 
            stroke-width="3"
            fill="transparent"
          />
          <circle 
            class="logo-fill logo-fill-10"
            cx="687.5" 
            cy="210.5" 
            r="209" 
            fill="#1D1D1D"
          />

          <defs>
            <linearGradient id="paint0_linear_548_65" x1="124.804" y1="-297.569" x2="1351.77" y2="-186.399" gradientUnits="userSpaceOnUse">
              <stop stop-color="#F0003D"/>
              <stop offset="0.369792" stop-color="#FA4727"/>
              <stop offset="0.776042" stop-color="#6B90F4"/>
            </linearGradient>
            <linearGradient id="paint1_linear_548_65" x1="0" y1="1" x2="323" y2="419" gradientUnits="userSpaceOnUse">
              <stop stop-color="white"/>
              <stop offset="1" stop-color="#F52532"/>
            </linearGradient>
            <linearGradient id="paint2_linear_548_65" x1="1175.8" y1="-298.569" x2="2402.77" y2="-187.399" gradientUnits="userSpaceOnUse">
              <stop stop-color="#F0003D"/>
              <stop offset="0.369792" stop-color="#FA4727"/>
              <stop offset="0.776042" stop-color="#6B90F4"/>
            </linearGradient>
            <linearGradient id="paint3_linear_548_65" x1="1051" y1="0" x2="1374" y2="418" gradientUnits="userSpaceOnUse">
              <stop stop-color="white"/>
              <stop offset="1" stop-color="#F52532"/>
            </linearGradient>
            <linearGradient id="paint4_linear_548_65" x1="124.804" y1="684.431" x2="1351.77" y2="795.601" gradientUnits="userSpaceOnUse">
              <stop stop-color="#F0003D"/>
              <stop offset="0.369792" stop-color="#FA4727"/>
              <stop offset="0.776042" stop-color="#6B90F4"/>
            </linearGradient>
            <linearGradient id="paint5_linear_548_65" x1="323" y1="1067.2" x2="6.09023e-06" y2="1316.8" gradientUnits="userSpaceOnUse">
              <stop stop-color="white"/>
              <stop offset="1" stop-color="#F52532"/>
            </linearGradient>
            <linearGradient id="paint6_linear_548_65" x1="687" y1="1401" x2="687" y2="983" gradientUnits="userSpaceOnUse">
              <stop/>
              <stop offset="1" stop-color="#666666"/>
            </linearGradient>
            <linearGradient id="paint7_linear_548_65" x1="1175.8" y1="683.431" x2="2402.77" y2="794.601" gradientUnits="userSpaceOnUse">
              <stop stop-color="#F0003D"/>
              <stop offset="0.369792" stop-color="#FA4727"/>
              <stop offset="0.776042" stop-color="#6B90F4"/>
            </linearGradient>
            <linearGradient id="paint8_linear_548_65" x1="1374" y1="1066.2" x2="1051" y2="1315.8" gradientUnits="userSpaceOnUse">
              <stop stop-color="white"/>
              <stop offset="1" stop-color="#F52532"/>
            </linearGradient>
            <linearGradient id="paint9_linear_548_65" x1="-202.64" y1="492.439" x2="1176.93" y2="666.265" gradientUnits="userSpaceOnUse">
              <stop stop-color="#F0003D"/>
              <stop offset="0.369792" stop-color="#FA4727"/>
              <stop offset="0.776042" stop-color="#6B90F4"/>
            </linearGradient>
            <linearGradient id="paint10_linear_548_65" x1="303.707" y1="557" x2="562.607" y2="896.973" gradientUnits="userSpaceOnUse">
              <stop stop-color="#FAFAFA"/>
              <stop offset="1" stop-color="#A5729F"/>
            </linearGradient>
            <linearGradient id="paint11_linear_548_65" x1="162.651" y1="492.439" x2="1542.49" y2="666.336" gradientUnits="userSpaceOnUse">
              <stop stop-color="#F0003D"/>
              <stop offset="0.369792" stop-color="#FA4727"/>
              <stop offset="0.776042" stop-color="#6B90F4"/>
            </linearGradient>
            <linearGradient id="paint12_linear_548_65" x1="669.104" y1="557" x2="927.989" y2="897.025" gradientUnits="userSpaceOnUse">
              <stop stop-color="#FAFAFA"/>
              <stop offset="1" stop-color="#A5729F"/>
            </linearGradient>
            <linearGradient id="paint13_linear_548_65" x1="512.679" y1="492.439" x2="1933.21" y2="676.92" gradientUnits="userSpaceOnUse">
              <stop stop-color="#F0003D"/>
              <stop offset="0.369792" stop-color="#FA4727"/>
              <stop offset="0.776042" stop-color="#6B90F4"/>
            </linearGradient>
            <linearGradient id="paint14_linear_548_65" x1="1034.57" y1="557" x2="1291.29" y2="904.456" gradientUnits="userSpaceOnUse">
              <stop stop-color="#FAFAFA"/>
              <stop offset="1" stop-color="#A5729F"/>
            </linearGradient>
            <linearGradient id="paint15_linear_548_65" x1="-411.498" y1="492.439" x2="715.627" y2="607.854" gradientUnits="userSpaceOnUse">
              <stop stop-color="#F0003D"/>
              <stop offset="0.369792" stop-color="#FA4727"/>
              <stop offset="0.776042" stop-color="#6B90F4"/>
            </linearGradient>
            <linearGradient id="paint16_linear_548_65" x1="0" y1="557" x2="268" y2="843" gradientUnits="userSpaceOnUse">
              <stop stop-color="#FAFAFA"/>
              <stop offset="1" stop-color="#A5729F"/>
            </linearGradient>
            <linearGradient id="paint17_linear_548_65" x1="687.5" y1="0" x2="687.5" y2="421" gradientUnits="userSpaceOnUse">
              <stop/>
              <stop offset="1" stop-color="#666666"/>
            </linearGradient>
          </defs>
        </svg>
      </div>
    </div>
  </Transition>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const showSplash = ref(true)

onMounted(() => {
  // Hide splash after animation completes (5s total animation)
  setTimeout(() => {
    showSplash.value = false
  }, 5000)
})
</script>

<style scoped>
.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
}

.splash-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.splash-logo {
  width: 400px;
  height: 400px;
}

/* Stroke Drawing Animation - Staggered timing */
.logo-stroke {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  fill: transparent;
}

/* Top blocks draw first */
.logo-block-1 {
  animation: drawStroke 1.5s ease-out 0s forwards, undrawStroke 1.5s ease-in 3.4s forwards;
}

.logo-block-2 {
  animation: drawStroke 1.5s ease-out 0.2s forwards, undrawStroke 1.5s ease-in 3.2s forwards;
}

/* Center circle draws after top blocks */
.logo-circle {
  animation: drawStroke 2s ease-out 0.4s forwards, undrawStroke 2s ease-in 2.5s forwards;
}

/* Diagonals draw in sequence */
.logo-diagonal-1 {
  animation: drawStroke 1.5s ease-out 0.6s forwards, undrawStroke 1.5s ease-in 2.8s forwards;
}

.logo-diagonal-2 {
  animation: drawStroke 1.5s ease-out 0.8s forwards, undrawStroke 1.5s ease-in 2.6s forwards;
}

.logo-diagonal-3 {
  animation: drawStroke 1.5s ease-out 1.0s forwards, undrawStroke 1.5s ease-in 2.4s forwards;
}

.logo-diagonal-4 {
  animation: drawStroke 1.5s ease-out 1.2s forwards, undrawStroke 1.5s ease-in 2.2s forwards;
}

/* Bottom blocks draw last */
.logo-block-3 {
  animation: drawStroke 1.5s ease-out 1.4s forwards, undrawStroke 1.5s ease-in 2.0s forwards;
}

.logo-block-4 {
  animation: drawStroke 1.5s ease-out 1.6s forwards, undrawStroke 1.5s ease-in 1.8s forwards;
}

.logo-block-5 {
  animation: drawStroke 1.5s ease-out 1.8s forwards, undrawStroke 1.5s ease-in 1.6s forwards;
}

@keyframes drawStroke {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes undrawStroke {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 2000;
  }
}

/* Fill Appearance Animation - starts after strokes mostly drawn */
.logo-fill {
  opacity: 0;
  animation: fillAppear 0.8s ease-out 1.2s forwards, fillDisappear 0.8s ease-in 3s forwards;
}

/* Stagger fill animations slightly for draw */
.logo-fill-1 { animation-delay: 1.2s, 3.9s; }
.logo-fill-2 { animation-delay: 1.3s, 3.8s; }
.logo-fill-3 { animation-delay: 1.4s, 3.7s; }
.logo-fill-4 { animation-delay: 1.5s, 3.6s; }
.logo-fill-5 { animation-delay: 1.6s, 3.5s; }
.logo-fill-6 { animation-delay: 1.7s, 3.4s; }
.logo-fill-7 { animation-delay: 1.8s, 3.3s; }
.logo-fill-8 { animation-delay: 1.9s, 3.2s; }
.logo-fill-9 { animation-delay: 2.0s, 3.1s; }
.logo-fill-10 { animation-delay: 2.1s, 3.0s; }

@keyframes fillAppear {
  to {
    opacity: 1;
  }
}

@keyframes fillDisappear {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Splash Fade Out Transition */
.splash-fade-leave-active {
  transition: opacity 1.5s ease;
}

.splash-fade-leave-to {
  opacity: 0;
}
</style>
