* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #141515;
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  position: relative;
  overflow: hidden;

  /* MOBILE SHIFT DISTANCE (Just one final destination now) */
  --slide-shift: -35px;

  .logo {
    position: absolute;
    opacity: 0;
    width: 100vw;
    height: auto;
    margin-left: 3%;
    animation: fadeLogo 14s infinite;
  }

  p {
    position: absolute;
    opacity: 0;
    font-family: "Sixtyfour", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
      "BLED" 0,
      "SCAN" 0;
    color: #ffffff;
    font-size: clamp(1.5rem, 5vw + 1rem, 4rem);
    /* Added 'linear' to ensure the movement speed never fluctuates */
    animation: textSlideSync 14s linear infinite;
  }

  p::after {
    content: "";
    position: absolute;
    animation: typeDotsSync 14s infinite;
  }
}

/* DESKTOP SHIFT DISTANCES */
@media (min-width: 768px) {
  .container {
    /* Final destination for bigger screens */
    --slide-shift: -65px;
  }

  .container .logo {
    width: 50vw;
  }
}

/* 1. ANIMATION LOGO */
@keyframes fadeLogo {
  0% {
    opacity: 0;
  }
  14.28% {
    opacity: 1;
  }
  35.71% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* 2. ANIMATION TEXT */
@keyframes textSlideSync {
  0% {
    opacity: 0;
    transform: translateX(0);
  }
  50% {
    opacity: 0;
    transform: translateX(0); /* Movement starts exactly here */
  }
  64.28% {
    opacity: 1;
    /* transform removed - the browser will seamlessly interpolate the movement! */
  }
  85.71% {
    opacity: 1;
    /* transform removed */
  }
  100% {
    opacity: 0;
    transform: translateX(var(--slide-shift)); /* Movement ends exactly here */
  }
}

/* 3. ANIMATION DOTS */
@keyframes typeDotsSync {
  0%,
  64% {
    content: "";
  }
  69% {
    content: ".";
  }
  74% {
    content: "..";
  }
  79%,
  100% {
    content: "...";
  }
}

/* --- STATIC DISTORTION EFFECT --- */

.glitch {
  position: relative;
  display: inline-block;
}

/* We create two "ghost" layers of the text right on top of the original */
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
}

/* Ghost Layer 1: Shifts left with a cyan tint */
.glitch::before {
  left: -3px;
  text-shadow: 2px 0 rgba(0, 255, 255, 0.7);
  animation: static-slice-1 3s infinite linear alternate-reverse;
}

/* Ghost Layer 2: Shifts right with a red tint */
.glitch::after {
  left: 3px;
  text-shadow: -2px 0 rgba(255, 0, 50, 0.7);
  animation: static-slice-2 4s infinite linear alternate-reverse;
}

/* The 'clip-path: inset' cuts horizontal slices out of the text.
  When set to '100% 0 0 0', the slice is completely hidden.
  This creates the intermittent "flicker" of the static.
*/
@keyframes static-slice-1 {
  0%,
  5% {
    clip-path: inset(10% 0 60% 0);
    transform: translate(-3px, 1px);
  }
  6%,
  10% {
    clip-path: inset(80% 0 5% 0);
    transform: translate(3px, -1px);
  }
  11%,
  100% {
    clip-path: inset(100% 0 0 0);
    transform: translate(0);
  } /* Hidden */
}

@keyframes static-slice-2 {
  0%,
  15% {
    clip-path: inset(100% 0 0 0);
    transform: translate(0);
  } /* Hidden */
  16%,
  20% {
    clip-path: inset(30% 0 20% 0);
    transform: translate(3px, 2px);
  }
  21%,
  25% {
    clip-path: inset(60% 0 10% 0);
    transform: translate(-3px, -2px);
  }
  26%,
  100% {
    clip-path: inset(100% 0 0 0);
    transform: translate(0);
  } /* Hidden */
}

/* --- IMAGE GLITCH WRAPPER --- */
.glitch-img-wrapper {
  position: absolute;
  opacity: 0;
  width: 80vw; /* Mobile width */
  margin-left: 5%;
  animation: fadeLogo 14s infinite; /* Keeps your original fade loop */
}

/* Ensure all images inside the wrapper scale perfectly */
.logo-main {
  width: 100%;
  height: auto;
  display: block;
}

/* Position the ghost layers directly on top of the main image */
.layer-1,
.layer-2 {
  position: absolute;
  top: 0;
  left: 0;
}

/* Ghost Layer 1: Cyan shadow + Slice Animation 1 */
.layer-1 {
  /* drop-shadow is magical here: it perfectly traces your PNG's transparent shape! */
  filter: drop-shadow(-3px 0 0 rgba(0, 255, 255, 0.7));
  animation: static-slice-1 3s infinite linear alternate-reverse;
}

/* Ghost Layer 2: Red shadow + Slice Animation 2 */
.layer-2 {
  filter: drop-shadow(3px 0 0 rgba(255, 0, 50, 0.7));
  animation: static-slice-2 4s infinite linear alternate-reverse;
}