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

const emit = defineEmits<{ complete: [] }>()

const isAnimating = ref(false)
const logoGone = ref(false)
const showTagline = ref(false)
const showPsyop = ref(false)
const isFading = ref(false)

const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches

onMounted(() => {
  if (prefersReducedMotion) {
    logoGone.value = true
    showTagline.value = true
    showPsyop.value = true
    setTimeout(() => emit('complete'), 800)
    return
  }

  // Phase 1: Logo draws in
  requestAnimationFrame(() => {
    isAnimating.value = true
  })

  // Phase 2: Logo fades out
  setTimeout(() => {
    logoGone.value = true
  }, 1900)

  // Phase 3: Tagline words blur in
  setTimeout(() => {
    showTagline.value = true
  }, 2300)

  // Phase 4: PSYOP slams in
  setTimeout(() => {
    showPsyop.value = true
  }, 3100)

  // Phase 5: Fade everything out
  setTimeout(() => {
    isFading.value = true
  }, 4800)

  setTimeout(() => {
    emit('complete')
  }, 5400)
})
</script>

<template>
  <div class="splash-overlay" :class="{ 'splash-fade-out': isFading }">
    <!-- Phase 1: Logo draws in centered -->
    <svg
      v-if="!logoGone"
      width="309"
      height="121"
      viewBox="0 0 309 121"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      class="splash-logo"
    >
      <path class="logo-path" :class="{ animating: isAnimating }" style="--i: 0" d="M162.632 33.2121C163.232 32.2421 163.772 31.5121 163.912 30.5021L135.492 31.8321L122.392 32.4621L119.402 37.3121L112.622 47.5121L104.132 60.8621L98.9019 69.7521C98.6619 70.1621 98.8519 71.0821 98.9619 71.7221C99.2819 73.6221 96.2519 75.7121 94.4619 74.8021C93.9719 74.5521 93.1219 73.6421 92.6319 73.2221L93.0919 70.5921L95.4019 68.9721C101.212 58.7821 107.562 49.1821 113.992 39.3721C115.932 36.4121 116.642 35.8421 118.382 32.6921L107.602 33.1421C106.832 33.1721 105.662 34.4921 105.092 35.0021L93.2019 45.5121L88.3219 49.9921C83.1919 54.7021 79.0419 60.0821 74.3019 65.2421L69.0919 70.9121C68.6119 71.4321 67.3019 72.0121 66.6919 71.8521C66.0819 71.6921 65.1519 70.8321 64.5619 70.1221C64.1519 69.6221 64.9619 68.1621 65.5919 67.8621C67.6819 66.8721 69.1019 65.5921 70.6019 63.9421L77.3919 56.4521C84.8719 48.2021 93.0619 41.1021 101.802 33.5421L79.5719 34.3221L60.4419 35.1421L35.2419 36.4021C25.4019 36.8921 15.8619 37.5221 6.10188 39.2721C6.37188 39.9121 6.09188 41.1021 5.30188 41.3021C3.98188 41.6521 2.46188 41.7021 1.05188 41.3021C0.231881 41.0621 -0.268119 38.9721 0.151881 38.1721C2.80188 36.7521 14.1019 34.9321 16.9519 34.7521L51.0919 32.5921L61.3219 32.0921L75.6519 31.5021L105.632 30.2321L123.502 14.8521L127.712 11.2321L134.672 5.46214C137.862 2.82214 139.972 -1.68786 142.382 0.652144C142.912 1.17214 143.712 2.67214 143.162 3.25214C141.882 4.61214 140.752 5.73214 139.812 7.12214L135.402 13.6521L127.162 25.7721C126.322 27.0021 125.532 27.8621 125.042 29.2821L135.952 28.7421L157.692 27.8221L165.922 27.5521L170.822 19.0121L175.202 10.9721C175.672 10.1121 177.182 9.56214 177.952 9.70214C178.982 9.89214 180.102 11.4321 179.522 12.5221C179.082 13.3521 177.792 14.3221 177.342 15.0721L175.182 18.6321L170.062 27.3421L178.322 27.0621L230.682 25.7121L237.122 25.6121C238.832 25.5821 240.382 25.6121 242.032 25.5421L254.252 24.9721L268.542 23.8721C275.472 23.3421 280.512 23.1521 287.102 21.2221C288.122 20.9221 289.982 20.8921 290.732 21.3321C291.072 21.5221 291.502 22.5021 291.542 22.8621C291.592 23.3021 290.692 23.9621 290.222 24.0321L278.152 25.7921C269.252 27.0921 260.532 27.6521 251.462 27.9121L210.192 29.0921L180.442 29.9021L168.252 30.3221L153.402 54.2721C151.782 56.8821 150.262 59.0721 148.792 62.0521C151.352 60.3221 155.772 56.1821 158.492 54.4321L170.452 46.7321C171.992 45.7421 172.572 43.6721 175.132 44.9121C175.692 45.1821 176.842 45.6821 176.862 46.2821C176.962 49.4921 174.502 48.2021 168.652 51.8621C156.952 59.1821 154.642 61.9021 144.532 70.4221C143.702 71.1221 141.992 70.6021 141.372 69.9021C139.832 68.1321 142.502 66.4321 143.582 64.4721C145.602 60.8321 147.612 57.5021 149.792 53.9721L162.622 33.2121H162.632ZM111.132 29.9221L120.442 29.7121C124.772 23.9321 128.792 17.9721 132.782 11.4321C129.922 13.5521 127.422 15.7721 124.712 18.0821L118.862 23.0621L116.482 25.1321L111.132 29.9221Z" fill="currentColor" />
      <path class="logo-path" :class="{ animating: isAnimating }" style="--i: 1" d="M163.772 110.492C155.402 104.552 146.472 99.9124 137.042 95.7124L118.342 87.3824C117.392 86.9624 116.192 86.7024 115.042 86.3124L114.252 83.5724C115.732 82.1024 117.632 83.0524 122.442 82.7624L139.072 81.7524L161.582 80.9524L180.202 80.8524L207.362 80.4624L213.392 75.8924L218.322 71.9624L222.272 68.7724L221.162 67.3924C223.622 61.3724 225.872 55.2924 227.402 48.8524C228.292 45.0824 226.602 44.3824 227.932 43.1124C228.802 42.2824 229.932 42.1124 230.912 42.5124C231.632 42.8124 232.522 44.2224 232.262 45.1124L230.052 52.9224L226.872 62.7824C228.402 62.2824 229.282 61.1424 230.372 60.0024L232.752 57.5224C236.662 53.4324 251.712 39.6824 253.082 39.7424C254.112 39.7824 255.882 41.2324 255.882 42.2424C255.882 43.1924 254.512 44.0924 253.962 44.6024L227.682 68.7924L220.252 75.1724C218.262 76.8824 215.552 78.8524 213.822 80.7224C216.292 80.9124 219.352 80.7224 221.702 80.6224C228.882 80.3024 235.822 80.5424 243.012 80.5924L253.442 80.6624L258.962 80.8524L278.862 81.9924L292.332 83.1824C296.032 83.5124 299.632 84.0424 303.282 83.8024C304.272 83.7324 308.252 83.3024 308.152 85.9424C308.112 86.9524 307.082 88.0524 305.952 87.9424L284.122 85.7724L258.232 84.1324L230.192 83.7324L212.692 83.7024C211.472 83.7024 210.292 84.3924 209.322 85.2124C200.122 92.9624 191.302 100.852 182.932 109.472C180.382 112.092 177.872 114.402 175.572 117.172C174.492 118.482 173.822 120.672 171.402 119.932C171.402 119.932 165.642 111.832 163.762 110.492H163.772ZM165.982 108.462L171.362 112.892C171.762 113.222 172.492 113.752 172.892 113.652C173.292 113.552 174.062 113.122 174.412 112.782L204.192 83.6224L195.722 83.9124L182.092 84.0624L170.632 84.1724L147.362 84.9124L124.272 86.3624C124.812 87.1424 125.632 87.5524 126.522 87.9424L138.402 93.1724L145.712 96.5724C149.592 98.3724 163.172 106.152 165.972 108.462H165.982Z" fill="currentColor" />
      <path class="logo-path" :class="{ animating: isAnimating }" style="--i: 2" d="M264.651 59.0018C262.841 60.6418 258.061 64.5218 255.831 63.8618C255.061 63.6318 253.901 62.6418 253.811 61.8118L257.191 56.2218C252.531 60.2818 248.581 64.6118 244.801 69.3518C244.131 70.2018 244.081 71.3618 242.811 71.5118C241.661 71.6518 240.811 70.9318 240.231 69.8718C239.501 68.5218 240.811 68.0418 241.641 67.1318C247.621 60.5618 254.021 54.7518 260.401 48.6018L266.911 42.3318C268.051 41.2318 269.391 42.3618 269.871 43.2718C270.761 44.9318 269.451 45.0818 268.621 46.1618C265.601 50.0518 262.641 53.9718 260.201 58.3318C266.371 53.0918 272.601 49.2318 278.481 44.3418L281.961 41.4418C282.391 41.0818 283.761 41.3618 284.251 41.5718C284.741 41.7818 285.271 43.1818 284.821 43.8118C282.051 47.6618 278.801 52.5018 275.761 57.0218L268.631 67.6118C268.191 68.2618 267.861 69.5318 267.451 70.4018C267.141 71.0618 265.421 71.3418 264.731 71.1018C264.041 70.8618 262.801 69.8118 262.931 69.0118C263.101 67.9018 265.221 65.5918 266.021 64.7718C269.381 61.3018 273.481 54.5818 276.161 50.0618C274.711 50.7018 273.891 51.3718 272.801 52.2418C270.021 54.4718 267.311 56.6218 264.671 59.0218L264.651 59.0018Z" fill="currentColor" />
      <path class="logo-path" :class="{ animating: isAnimating }" style="--i: 3" d="M209.662 67.2223C209.172 68.3723 208.772 69.6523 208.032 69.9323C207.012 70.3123 205.152 69.8823 204.842 69.0623C204.152 67.2423 205.622 66.3423 206.382 65.1223C208.662 61.4523 210.792 57.9623 212.652 54.0223L204.742 60.7123C200.482 64.3123 197.082 68.6323 193.462 72.9023C192.822 73.6523 191.642 74.1523 190.952 73.9323C190.032 73.6323 188.702 72.4323 189.222 71.6023C190.542 69.4823 191.642 67.6823 192.762 65.6123L198.762 54.5823L205.352 41.6423C205.702 40.9623 207.722 40.8323 208.402 41.1823C209.122 41.5523 209.982 42.8323 210.222 43.7423C208.302 44.5423 207.522 45.5123 206.672 47.0823L203.622 52.7123L198.892 61.2723C200.202 60.3423 201.302 59.3723 202.602 58.2723L210.842 51.2523L216.502 46.2123C217.412 45.4023 217.462 43.8323 219.022 43.9523C220.002 44.0223 221.962 45.1123 221.152 46.5223L214.312 58.4923C212.682 61.3523 211.012 64.0723 209.662 67.2623V67.2223Z" fill="currentColor" />
      <path class="logo-path" :class="{ animating: isAnimating }" style="--i: 4" d="M120.041 66.0921C117.531 68.3021 111.991 74.6621 108.871 72.9321C108.351 72.6421 107.691 71.3221 108.041 70.8321L112.331 64.8221C115.871 59.8621 119.131 54.8321 121.681 49.2721C122.051 48.4721 122.331 47.5821 122.841 47.1021C123.431 46.5521 124.801 46.4221 125.351 47.0021C125.901 47.5821 126.431 48.3021 126.561 48.7921C126.691 49.2821 125.741 50.1221 125.471 50.5621C123.221 54.2521 121.191 57.9321 118.611 61.4021C117.751 62.5621 117.001 63.6221 116.431 64.9021L125.361 57.0921L132.551 51.6021L138.361 46.9521C139.331 46.1821 141.691 48.4621 141.121 49.4321C139.251 51.9821 137.581 54.3121 136.021 56.9421L133.511 61.1721L129.901 67.8321C129.421 68.7121 127.711 69.2521 127.151 68.5421L125.041 65.8421C127.761 63.5021 129.731 60.8521 131.371 57.7821L132.571 55.5521L126.361 60.5221L120.041 66.0821V66.0921Z" fill="currentColor" />
      <path class="logo-path" :class="{ animating: isAnimating }" style="--i: 5" d="M189.921 51.7524C184.441 56.3024 180.001 61.3624 175.351 66.5424L172.661 69.5424C172.151 70.1124 171.031 70.6424 170.181 70.5524C169.551 70.4924 168.661 69.9524 168.321 69.5124C167.981 69.0724 168.111 67.9324 168.491 67.3624L175.621 56.7024L179.141 51.9724C181.891 48.2824 184.051 44.5524 186.211 40.3724C187.151 39.7624 188.831 40.6424 189.881 41.3024C190.281 41.5524 194.551 41.6324 196.871 43.1824L197.911 45.7624C197.311 47.0624 195.961 47.2324 194.921 47.7924C193.161 48.7324 191.621 50.3524 189.911 51.7724L189.921 51.7524ZM182.321 54.0124L190.771 46.3624C190.281 45.3424 188.511 45.4324 187.761 45.8424C187.201 46.1424 186.671 47.0824 186.161 47.8124L181.181 54.8824C181.911 55.3924 181.951 54.3624 182.321 54.0224V54.0124Z" fill="currentColor" />
    </svg>

    <!-- Phase 2: Tagline replaces logo in center -->
    <div v-if="logoGone" class="tagline-container">
      <div class="tagline-line" :class="{ visible: showTagline }">
        <span class="word" style="--w: 0">Everything</span>
        <span class="word" style="--w: 1">you</span>
        <span class="word" style="--w: 2">love</span>
        <span class="word" style="--w: 3">is a</span>
      </div>
      <div
        class="psyop-word"
        :class="{ visible: showPsyop }"
      >PSYOP</div>
    </div>
  </div>
</template>

<style scoped>
.splash-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  transition: opacity 600ms cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.splash-fade-out {
  opacity: 0;
  pointer-events: none;
}

/* --- Logo phase --- */
.splash-logo {
  width: min(80vw, 680px);
  height: auto;
}

.logo-path {
  fill: currentColor;
  color: var(--text-primary);
  clip-path: inset(0 100% 0 0);
  opacity: 0;
}

.logo-path.animating {
  animation:
    revealPath 700ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i) * 200ms) forwards,
    fadeInPath 200ms ease calc(var(--i) * 200ms) forwards;
}

@keyframes revealPath {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

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

/* --- Tagline phase --- */
.tagline-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 3vw;
  animation: containerFadeIn 800ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

.tagline-line {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0 0.25em;
  white-space: nowrap;
}

.word {
  font-family: 'Bebas Neue', 'Impact', 'Arial Black', sans-serif;
  font-size: clamp(1.6rem, 4vw, 4.2rem);
  font-weight: 400;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
  opacity: 0;
  transform: translateY(30px);
  filter: blur(20px);
}

.tagline-line.visible .word {
  animation: cinematicReveal 1.2s cubic-bezier(0.4, 0, 0.2, 1) calc(var(--w) * 150ms) forwards;
}

@keyframes cinematicReveal {
  0% {
    opacity: 0;
    transform: translateY(30px);
    filter: blur(20px);
  }
  60% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* --- PSYOP --- */
.psyop-word {
  font-family: 'Playfair Display', 'Georgia', serif;
  font-style: italic;
  font-weight: 900;
  color: var(--accent);
  font-size: clamp(5rem, 18vw, 14rem);
  letter-spacing: 0.06em;
  line-height: 0.85;
  text-transform: uppercase;
  margin-top: -0.02em;
  opacity: 0;
  transform: translateY(60px) scale(1.15);
  filter: blur(20px);
}

.psyop-word.visible {
  animation: psyopCinematic 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes psyopCinematic {
  0% {
    opacity: 0;
    transform: translateY(60px) scale(1.15);
    filter: blur(20px);
  }
  30% {
    opacity: 1;
    filter: blur(2px);
  }
  50% {
    transform: translateY(-6px) scale(1.01);
    filter: blur(0);
  }
  70% {
    transform: translateY(3px) scale(0.995);
  }
  85% {
    transform: translateY(-1px) scale(1.002);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* Tablet: 2 lines */
@media (max-width: 900px) {
  .tagline-line {
    flex-wrap: wrap;
    white-space: normal;
    gap: 0 0.25em;
  }

  .word {
    font-size: clamp(1.8rem, 6vw, 3rem);
  }

  .psyop-word {
    font-size: clamp(4rem, 20vw, 8rem);
  }
}

/* Mobile: each word stacks */
@media (max-width: 500px) {
  .tagline-line {
    flex-direction: column;
    align-items: center;
  }

  .word {
    font-size: clamp(2rem, 11vw, 3rem);
  }

  .psyop-word {
    font-size: clamp(3.5rem, 22vw, 5.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-path { clip-path: none; opacity: 1; }
  .word { opacity: 1; transform: none; filter: none; animation: none !important; }
  .psyop-word { opacity: 1; transform: none; filter: none; animation: none !important; }
  .tagline-container { animation: none; }
  .splash-overlay { transition: none; }
}
</style>
