/* ============================================================
   OPENING SCREEN
============================================================ */

.curtain{

  position:fixed;

  inset:0;

  z-index:9999;

  display:grid;

  place-items:center;

  background:

    radial-gradient(
      circle at 50% 45%,

      #151d2c 0%,

      #080c15 48%,

      #000 100%
    );

  opacity:1;

  visibility:visible;

  transition:

    opacity
    1.35s
    var(--slow),

    visibility
    1.35s;

}


.curtain.is-opening{

  opacity:0;

  visibility:hidden;

  pointer-events:none;

}


/* ============================================================
   TAP TO ENTER
============================================================ */

.enter-btn{

  position:relative;

  padding:
    20px
    30px;

  cursor:pointer;

  color:
    #e9c77f;

  font-family:
    var(--sans);

  font-size:11px;

  font-weight:400;

  letter-spacing:.48em;

  text-indent:.48em;

  transition:

    color .4s ease,

    transform .4s ease;

}


.enter-btn::after{

  content:"";

  position:absolute;

  left:50%;

  bottom:8px;

  width:0;

  height:1px;

  background:
    #e9c77f;

  transform:
    translateX(-50%);

  transition:
    width .5s ease;

}


.enter-btn:hover{

  color:
    #fff5d9;

  transform:
    translateY(-2px);

}


.enter-btn:hover::after{

  width:72%;

}


.enter-btn:active{

  transform:
    scale(.96);

}


/* ============================================================
   TABLET
============================================================ */

@media(max-width:760px){

  .hero__hero-countdown{

    grid-template-columns:
      repeat(
        2,
        1fr
      );

    width:
      min(
        440px,
        92vw
      );

  }


  .hero__hero-countdown
  > div:last-child{

    grid-column:
      1 / -1;

    width:
      calc(
        50% - 4px
      );

    justify-self:center;

  }


  .couple{

    grid-template-columns:
      1fr;

    gap:35px;

  }


  .couple__heart{

    margin:0 auto;

    order:2;

  }


  .person:nth-of-type(2){

    order:3;

  }


  .person__frame{

    width:
      min(
        100%,
        380px
      );

  }


  .timeline::before{

    left:18px;

  }


  .timeline::after{

    left:18px;

  }


  .tl,
  .tl:nth-child(even),
  .tl:nth-child(odd){

    width:100%;

    margin-left:0;

    padding-left:55px;

    padding-right:0;

    text-align:left;

  }


  .tl__dot,
  .tl:nth-child(odd)
  .tl__dot,
  .tl:nth-child(even)
  .tl__dot{

    left:11px;

    right:auto;

  }


  .tl__card{

    display:block;

  }


  .grid{

    grid-template-columns:
      repeat(
        2,
        1fr
      );

  }


  .actions{

    grid-template-columns:
      1fr;

  }


  .venue__map iframe{

    height:300px;

  }

}


/* ============================================================
   MOBILE
============================================================ */

@media(max-width:520px){

  :root{

    --pad:18px;

  }


  .hero{

    padding-bottom:82px;

  }


  .ganesh{

    font-size:20px;

  }


  .name{

    font-size:
      clamp(
        58px,
        20vw,
        98px
      );

  }


  .hero__hero-date{

    font-size:12px;

    letter-spacing:.18em;

  }


  .countdown{

    grid-template-columns:
      repeat(
        2,
        1fr
      );

  }


  .countdown
  .cd:last-child{

    grid-column:
      1 / -1;

    width:50%;

    justify-self:center;

  }


  .datecard__main{

    gap:10px;

  }


  .datecard__num{

    font-size:62px;

  }


  .datecard__mid{

    font-size:14px;

  }


  .pdf__arrow{

    width:38px;
    height:38px;

  }


  .pdf__arrow--prev{

    left:3px;

  }


  .pdf__arrow--next{

    right:3px;

  }


  .lb{

    grid-template-columns:1fr;

  }


  .lb__nav{

    position:absolute;

    top:50%;

  }


  .lb__nav--p{

    left:10px;

  }


  .lb__nav--n{

    right:10px;

  }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media(
  prefers-reduced-motion:reduce
){

  *,
  *::before,
  *::after{

    animation-duration:
      .01ms
      !important;

    animation-iteration-count:
      1
      !important;

    scroll-behavior:
      auto
      !important;

    transition-duration:
      .01ms
      !important;

  }

}

/**********************************************************************/
/* =========================================================
   MOBILE — BOTH COUNTDOWNS IN ONE HORIZONTAL ROW
========================================================= */

@media (max-width: 700px) {

    /* Hero countdown */
    .hero__hero-countdown {
        width: 100%;
        max-width: 100%;

        display: grid;
        grid-template-columns:
            repeat(5, minmax(0, 1fr));

        gap: 4px;
    }

    .hero__hero-countdown > div,
    .hero__hero-countdown > div:last-child {
        grid-column: auto;
        width: auto;
        min-width: 0;

        padding: 8px 2px;

        border-radius: 9px;
    }

    .hero__hero-countdown b {
        font-size: 18px;
    }

    .hero__hero-countdown span {
        font-size: 5.5px;
        letter-spacing: .05em;
        white-space: nowrap;
    }


    /* Main/date-card countdown */
    .countdown {
        width: 100%;
        max-width: 100%;

        display: grid;
        grid-template-columns:
            repeat(5, minmax(0, 1fr));

        gap: 5px;
    }

    .countdown .cd,
    .countdown .cd:last-child {
        grid-column: auto;
        width: auto;
        min-width: 0;

        padding: 10px 3px;

        border-radius: 10px;
    }

    .countdown .cd b {
        font-size: 21px;
    }

    .countdown .cd span {
        font-size: 6px;
        letter-spacing: .07em;
        white-space: nowrap;
    }
}

@media (max-width: 480px) {

    .hero__hero-countdown {
        gap: 3px;
    }

    .hero__hero-countdown > div {
        padding: 7px 1px;
        border-radius: 8px;
    }

    .hero__hero-countdown b {
        font-size: 16px;
    }

    .hero__hero-countdown span {
        font-size: 5px;
    }


    .countdown {
        gap: 3px;
    }

    .countdown .cd {
        padding: 8px 1px;
        border-radius: 8px;
    }

    .countdown .cd b {
        font-size: 18px;
    }

    .countdown .cd span {
        font-size: 5px;
    }

}