/* =========================================================
   A21 — INTRO SCREEN
   BACKGAMMON PUCARÁ
========================================================= */

.intro-screen {
  position: relative;

  width: 100vw;
  height: 100dvh;
  min-height: 100dvh;

  overflow: hidden;

  display: grid;
  place-items: center;

  box-sizing: border-box;

  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(199, 145, 36, 0.22),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #160c05,
      #020201 72%
    );
}


/* =========================================================
   A21.1 — GLOW CENTRAL
========================================================= */

.intro-glow {
  position: absolute;

  left: 50%;
  top: 50%;

  width:
    min(
      76vw,
      560px
    );

  aspect-ratio:
    1 / 1;

  transform:
    translate(-50%, -50%);

  border:
    1px solid
    rgba(239, 199, 94, 0.18);

  border-radius:
    50%;

  box-shadow:
    0 0 100px
    rgba(208, 148, 37, 0.12),

    inset 0 0 80px
    rgba(208, 148, 37, 0.08);

  pointer-events: none;
}


/* =========================================================
   A21.2 — MARCA CENTRAL
========================================================= */

.intro-brand {
  position: relative;

  z-index: 2;

  display: grid;

  justify-items: center;

  align-content: center;

  text-align: center;

  animation:
    intro-arrive
    900ms
    ease-out
    both;
}


/* =========================================================
   A21.3 — ICONO CENTRAL BACKGAMMON
========================================================= */

.intro-piece {
  width:
    clamp(
      110px,
      14vw,
      170px
    );

  aspect-ratio:
    1 / 1;

  display: grid;

  place-items: center;

  border: 0;

  border-radius: 24%;

  background: transparent;

  box-shadow: none;

  overflow: visible;
}


.intro-piece img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  user-select: none;

  -webkit-user-select: none;

  -webkit-user-drag: none;

  pointer-events: none;

  filter:
    drop-shadow(
      0
      16px
      24px
      rgba(0, 0, 0, 0.78)
    )
    drop-shadow(
      0
      0
      18px
      rgba(219, 169, 57, 0.20)
    );
}

/* =========================================================
   A21.4 — JUEGOS DE MESA
========================================================= */

.intro-brand p {
  margin:
    22px
    0
    4px;

  color:
    #c79b3e;

  font-size:
    10px;

  letter-spacing:
    0.38em;
}


/* =========================================================
   A21.5 — PUCARÁ
========================================================= */

.intro-brand h1 {
  margin: 0;

  color:
    #f5d57d;

  font-size:
    clamp(
      42px,
      8vw,
      78px
    );

  letter-spacing:
    0.11em;

  text-shadow:
    0 5px 20px
    #000;
}


/* =========================================================
   A21.6 — BACKGAMMON
========================================================= */

.intro-brand > span {
  color:
    #a57c30;

  font-size:
    13px;

  letter-spacing:
    0.30em;

  margin-top:
    6px;
}


/* =========================================================
   A21.7 — CLÁSICO
========================================================= */

.intro-brand small {
  margin-top:
    8px;

  color:
    #d9b65d;

  font-size:
    9px;

  letter-spacing:
    0.42em;
}


/* =========================================================
   A21.8 — ANIMACIÓN
========================================================= */

@keyframes intro-arrive {

  from {
    opacity: 0;

    transform:
      translateY(18px)
      scale(0.96);
  }

  to {
    opacity: 1;

    transform:
      none;
  }

}


/* =========================================================
   A21.9 — LANDSCAPE / ANDROID
========================================================= */

@media
(max-height: 650px)
and
(orientation: landscape) {

  .intro-glow {
    width:
      min(
        50vw,
        360px
      );

    box-shadow:
      0 0 60px
      rgba(208, 148, 37, 0.10),

      inset 0 0 45px
      rgba(208, 148, 37, 0.06);
  }


  .intro-brand {
    transform:
      scale(0.82);

    transform-origin:
      center;
  }


   .intro-piece {
    width:
      clamp(
        82px,
        14vh,
        112px
      );

    box-shadow: none;
  }


  .intro-brand p {
    margin:
      12px
      0
      3px;

    font-size:
      8px;

    letter-spacing:
      0.30em;
  }


  .intro-brand h1 {
    font-size:
      clamp(
        30px,
        5vw,
        48px
      );

    letter-spacing:
      0.09em;
  }


  .intro-brand > span {
    font-size:
      9px;

    letter-spacing:
      0.24em;
  }


  .intro-brand small {
    margin-top:
      5px;

    font-size:
      7px;

    letter-spacing:
      0.30em;
  }

}