/* INTRO PAGE */

body.intro-page {
  overflow: hidden;
  width: 100vw;
  height: 100vh;

  background:
    linear-gradient(rgba(247, 244, 225, 0.72), rgba(247, 244, 225, 0.72)),
    url("../img/paper-texture.png");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  color: #202846;
}

.intro-page__main {
  --paper-top-height: clamp(42px, 6.8vw, 96px);
  --paper-bottom-height: clamp(42px, 6.8vw, 96px);
  --paper-side-width: clamp(30px, 4.8vw, 76px);

  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
}

/* RIPPED PAPER FRAME */

.intro-paper-frame {
  z-index: 20;
}

/* SCENE */

.intro-page__scene {
  position: relative;
  z-index: 4;

  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  padding:
    clamp(82px, 9vh, 126px)
    clamp(80px, 10vw, 180px)
    clamp(86px, 11vh, 134px);
}

.intro-page__video-card {
  position: relative;
  /* Make it responsive even in a 125% resolution */
  width: min(1120px, 67vw);
  aspect-ratio: 16 / 9;

  padding: clamp(10px, 0.9vw, 14px);

  background: rgba(255, 255, 255, 0.96);

  box-shadow:
    0 20px 50px rgba(40, 32, 18, 0.16),
    0 2px 8px rgba(40, 32, 18, 0.1);

  transform: rotate(0deg);
}

.intro-page__video-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;

  pointer-events: none;

  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.64),
    inset 0 0 0 14px rgba(255, 255, 255, 0.88);
}

.intro-page__player {
  position: relative;
  z-index: 2;

  display: block;
  width: 100%;
  height: 100%;

  border: 0;
  background: #000;
}

.intro-page__scotch {
  position: absolute;
  top: clamp(-54px, -3.2vw, -34px);
  left: clamp(-72px, -4.6vw, -42px);
  z-index: 20;

  width: clamp(170px, 17vw, 285px);
  height: auto;

  pointer-events: none;
  user-select: none;

  opacity: 1;

  transform: rotate(-29deg);
  transform-origin: center;
  filter: drop-shadow(0 2px 2px rgba(48, 35, 18, 0.755));
}

/* SKIP BUTTON */

.intro-page__skip {
  position: absolute;
  right: clamp(-70px, -4.4vw, -42px);
  bottom: clamp(-34px, -2.8vw, -22px);
  z-index: 12;

  min-width: clamp(250px, 18vw, 330px);
  min-height: clamp(56px, 4.4vw, 72px);

  color: #171717;
  text-decoration: none;
  font-size: clamp(15px, 1.25vw, 20px);

  animation: textReveal 1s var(--ease-premium) forwards;
  animation-delay: 0.45s;
  opacity: 0;
  transform: translateY(20px);
}

.intro-page__skip span {
  position: relative;
  z-index: 2;
}

/* RESPONSIVE */

@media (max-width: 1100px) {
  .intro-page__scene {
    padding-inline: clamp(56px, 8vw, 90px);
  }

  .intro-page__video-card {
    width: min(980px, 78vw);
  }

  .intro-page__skip {
    right: clamp(60px, 8vw, 104px);
  }
}

@media (max-width: 900px) {
  .intro-page__scene {
    align-items: center;
    padding:
      92px
      48px
      116px;
  }

  .intro-page__video-card {
    width: min(760px, 86vw);
  }

  .intro-page__scotch {
    top: -38px;
    left: -44px;
    width: 180px;
    transform: rotate(-28deg);
  }

  .intro-page__skip {
    right: clamp(-44px, -4vw, -28px);
    bottom: -26px;

    min-width: min(330px, 76vw);

    transform: translateY(20px);
  }

  .intro-page__skip.paper-button:hover {
    transform: translateY(-4px) rotate(-0.8deg);
}
}

@media (max-width: 560px) {
  .intro-page__main {
    --paper-top-height: 52px;
    --paper-bottom-height: 52px;
    --paper-side-width: 28px;
  }

  .intro-page__scene {
    padding:
      84px
      30px
      112px;
  }

  .intro-page__video-card {
    width: 88vw;
    padding: 8px;
  }

  .intro-page__video-card::after {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.64),
      inset 0 0 0 8px rgba(255, 255, 255, 0.88);
  }

  .intro-page__scotch {
    top: -30px;
    left: -32px;
    width: 132px;
  }

  .intro-page__skip {
    right: 50%;
    bottom: -58px;

    min-width: min(300px, 78vw);
    font-size: 15px;

    transform: translate(50%, 20px);
  }

  .intro-page__skip.paper-button:hover {
    transform: translate(50%, -4px) rotate(-0.8deg);
  }
}