/* ========================================= */
/* POSTER */
/* ========================================= */

.poster-container{

  position:relative;

  width:min(55vw,420px);

  margin:120px auto 80px auto;

  z-index:20;

  animation:
    posterFloat 6s ease-in-out infinite,
    posterPulse 5s infinite alternate;
}

.poster{

  width:100%;

  display:block;

  border-radius:20px;
}

/* floating */

@keyframes posterFloat{

  0%,100%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-18px);
  }
}

/* glow pulse */

@keyframes posterPulse{

  from{

    box-shadow:
      0 0 25px rgba(0,255,255,.4),
      0 0 80px rgba(255,0,255,.2);
  }

  to{

    box-shadow:
      0 0 45px rgba(0,255,255,.8),
      0 0 160px rgba(255,0,255,.5);
  }
}

/* ========================================= */
/* STAR WARS CRAWL */
/* ========================================= */

.crawl-container{

  position:fixed;

  inset:0;

  overflow:hidden;

  perspective:400px;

  z-index:5;

  pointer-events:none;
}

.crawl{

  position:absolute;

  width:100%;

  bottom:-120%;

  display:flex;

  justify-content:center;

  transform-origin:50% 100%;

  animation:
    crawlMove 135s linear forwards;
}

/* text */

.crawl p{

  width:min(900px,85vw);

  text-align:center;

  font-size:clamp(1.1rem,2vw,2rem);

  line-height:2.4;

  font-weight:700;

  letter-spacing:4px;

  color:#ffe28a;

  text-transform:uppercase;

  text-shadow:
    0 0 12px rgba(255,220,120,.45);

  transform:
    rotateX(25deg);
}

/* crawl animation */

@keyframes crawlMove{

  0%{

    transform:
      rotateX(25deg)
      translateY(0);

    opacity:1;
  }

  100%{

    transform:
      rotateX(25deg)
      translateY(-650vh);

    opacity:0;
  }
}

/* ========================================= */
/* TITLE */
/* ========================================= */

.title,
.subtitle{

  position:relative;

  z-index:30;

  text-align:center;
}

.title{

  margin-top:40px;
}

/* ========================================= */
/* EXPLOSION */
/* ========================================= */

.explosion{

  position:fixed;

  inset:0;

  opacity:0;

  z-index:99999;

  pointer-events:none;

  background:
    radial-gradient(
      circle,
      white 0%,
      cyan 10%,
      magenta 20%,
      black 70%
    );
}

.explosion.active{

  animation:
    explodeUniverse 5s forwards;
}

@keyframes explodeUniverse{

  0%{
    opacity:0;
    transform:scale(.2);
  }

  20%{
    opacity:1;
    transform:scale(2);
  }

  100%{
    opacity:1;
    transform:scale(8);
    background:black;
  }
}
/* ========================================= */
/* STAR WARS MIRRORED CRAWL (FIXED) */
/* ========================================= */

.crawl-container{

  position:fixed;

  inset:0;

  overflow:hidden;

  z-index:5;

  pointer-events:none;
}

.crawl-track{

  position:absolute;

  left:0;
  right:0;
  bottom:-120%;

  display:flex;

  justify-content:space-between;

  align-items:flex-start;

  padding:0 2vw;

  animation:crawlUp 135s linear forwards;
}

.crawl-left,
.crawl-right{

  width:28vw;
}

.crawl-text{

  display:block;

  font-size:clamp(0.9rem,1.1vw,1.3rem);

  line-height:2.3;

  font-weight:600;

  letter-spacing:2px;

  color:#ffe28a;

  text-transform:uppercase;

  text-shadow:0 0 12px rgba(255,220,120,.35);

  transform:rotateX(20deg);
}

@keyframes crawlUp{

  0%{
    transform:translateY(0);
    opacity:1;
  }

  100%{
    transform:translateY(-700vh);
    opacity:0;
  }
}