/* ============================================================
   CINEMATIC HERO
============================================================ */

.hero{

  position:relative;

  min-height:
    100svh;

  display:grid;

  place-items:center;

  isolation:isolate;

  padding:
    calc(
      env(
        safe-area-inset-top
      ) + 26px
    )
    var(--pad)
    96px;

  overflow:hidden;

}


/* ============================================================
   SKY
============================================================ */

.sky{

  position:absolute;

  inset:-2px;

  z-index:-1;

  overflow:hidden;

}


.sky__gradient{

  position:absolute;

  inset:0;

  background:

    linear-gradient(
      180deg,

      var(--sky-1)
      0%,

      var(--sky-2)
      34%,

      var(--sky-3)
      65%,

      var(--sky-4)
      86%,

      var(--sky-5)
      100%
    );

  animation:
    skyShift
    26s
    ease-in-out
    infinite
    alternate;

}


@keyframes skyShift{

  0%{
    filter:
      saturate(.95)
      brightness(1);
  }


  100%{
    filter:
      saturate(1.08)
      brightness(1.04);
  }

}


/* ============================================================
   SUN
============================================================ */

.sky__sun{

  position:absolute;

  left:50%;

  bottom:-16vmin;

  width:52vmin;
  height:52vmin;

  translate:
    -50%
    0;

  border-radius:50%;

  background:

    radial-gradient(
      circle,

      #fff9e9 0%,

      #ffe0ac 30%,

      rgba(
        255,
        190,
        130,
        .42
      ) 55%,

      transparent 72%
    );

  filter:
    blur(2px);

  animation:

    sunRise
    3.4s
    var(--slow)
    .5s
    both,

    sunPulse
    7s
    ease-in-out
    4s
    infinite;

}


@keyframes sunRise{

  from{

    transform:
      translateY(
        28vmin
      )
      scale(.7);

    opacity:0;

  }


  to{

    transform:
      translateY(0)
      scale(1);

    opacity:1;

  }

}


@keyframes sunPulse{

  50%{

    opacity:1;

    filter:
      blur(4px);

  }

}


/* ============================================================
   STARS
============================================================ */

.sky__stars{

  position:absolute;

  inset:
    0
    0
    42%
    0;

  opacity:.24;

}


.star{

  position:absolute;

  border-radius:50%;

  background:#fff;

  animation:
    twinkle
    ease-in-out
    infinite
    alternate;

}


@keyframes twinkle{

  from{

    opacity:.08;

    transform:
      scale(.6);

  }


  to{

    opacity:.7;

    transform:
      scale(1.15);

  }

}


/* ============================================================
   SHOOTING STAR
============================================================ */

.shoot{

  position:absolute;

  width:2px;
  height:2px;

  border-radius:50%;

  background:#fff;

  box-shadow:
    0 0 8px 2px
    rgba(
      255,
      255,
      255,
      .7
    );

}


.shoot::after{

  content:"";

  position:absolute;

  right:0;

  top:50%;

  width:130px;
  height:1px;

  translate:
    0 -50%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(
        255,
        255,
        255,
        .8
      )
    );

}


@keyframes shoot{

  0%{

    opacity:0;

    transform:
      translate3d(
        0,
        0,
        0
      )
      rotate(18deg);

  }


  8%{
    opacity:1;
  }


  100%{

    opacity:0;

    transform:
      translate3d(
        -58vw,
        32vh,
        0
      )
      rotate(18deg);

  }

}


/* ============================================================
   ORGANIC CLOUDS
============================================================ */

.sky__clouds{

  position:absolute;

  inset:0;

  overflow:hidden;

}


/*
  IMPORTANT:

  No rectangle.
  Cloud is made entirely from radial gradients.
*/

.cloud{

  position:absolute;

  display:block;

  width:
    min(
      82vw,
      620px
    );

  height:170px;

  border-radius:50%;

  background:

    radial-gradient(
      ellipse
      105px
      74px
      at 14% 70%,

      rgba(
        255,
        255,
        255,
        .9
      )
      0 34%,

      transparent 73%
    ),

    radial-gradient(
      ellipse
      145px
      98px
      at 37% 47%,

      rgba(
        255,
        255,
        255,
        .96
      )
      0 37%,

      transparent 74%
    ),

    radial-gradient(
      ellipse
      120px
      86px
      at 61% 57%,

      rgba(
        255,
        255,
        255,
        .88
      )
      0 39%,

      transparent 75%
    ),

    radial-gradient(
      ellipse
      105px
      72px
      at 84% 71%,

      rgba(
        255,
        255,
        255,
        .8
      )
      0 38%,

      transparent 76%
    );

  filter:
    blur(14px);

  opacity:.62;

  animation:
    cloudFloat
    48s
    ease-in-out
    infinite;

}


.cloud::before{

  content:"";

  position:absolute;

  inset:-55px;

  background:

    radial-gradient(
      ellipse at center,

      rgba(
        255,
        255,
        255,
        .28
      ),

      transparent 68%
    );

  filter:
    blur(28px);

}


.cloud::after{

  content:"";

  position:absolute;

  left:3%;
  right:3%;
  bottom:0;

  height:50%;

  background:

    radial-gradient(
      ellipse at center,

      rgba(
        205,
        220,
        230,
        .22
      ),

      transparent 72%
    );

  filter:
    blur(25px);

}


.cloud--1{

  top:8%;

  left:-180px;

  width:
    min(
      88vw,
      680px
    );

  height:190px;

  opacity:.58;

}


.cloud--2{

  top:23%;

  right:-230px;

  width:
    min(
      92vw,
      720px
    );

  height:200px;

  opacity:.5;

  animation-duration:
    56s;

  animation-delay:
    -12s;

}


.cloud--3{

  top:42%;

  left:-220px;

  width:
    min(
      78vw,
      600px
    );

  height:160px;

  opacity:.34;

  animation-duration:
    62s;

  animation-delay:
    -20s;

}


.cloud--4{

  top:61%;

  right:-260px;

  width:
    min(
      94vw,
      760px
    );

  height:180px;

  opacity:.28;

  animation-duration:
    70s;

  animation-delay:
    -32s;

}


.cloud--5{

  bottom:9%;

  left:-240px;

  width:
    min(
      86vw,
      650px
    );

  height:170px;

  opacity:.25;

  animation-duration:
    76s;

  animation-delay:
    -8s;

}


.cloud--6{

  top:76%;

  right:8%;

  width:
    min(
      70vw,
      520px
    );

  height:130px;

  opacity:.18;

  animation-duration:
    82s;

  animation-delay:
    -42s;

}


@keyframes cloudFloat{

  0%,
  100%{

    transform:
      translate3d(
        -20px,
        0,
        0
      )
      scale(1);

  }


  50%{

    transform:
      translate3d(
        75px,
        -10px,
        0
      )
      scale(1.035);

  }

}


/* ============================================================
   BIRDS
============================================================ */

.sky__birds{

  position:absolute;

  inset:0;

}


.bird{

  position:absolute;

  width:16px;
  height:9px;

  animation:
    flyAcross
    linear
    infinite;

}


.bird::before,
.bird::after{

  content:"";

  position:absolute;

  top:0;

  width:9px;
  height:9px;

  border-top:
    1.6px solid
    rgba(
      20,
      26,
      44,
      .55
    );

  border-radius:
    50%
    50%
    0
    0;

  animation:
    flap
    .5s
    ease-in-out
    infinite
    alternate;

}


.bird::before{

  left:0;

  transform-origin:
    right center;

}


.bird::after{

  right:0;

  transform-origin:
    left center;

}


@keyframes flap{

  from{

    transform:
      rotate(-14deg)
      scaleY(.55);

  }


  to{

    transform:
      rotate(16deg)
      scaleY(1.1);

  }

}


@keyframes flyAcross{

  0%{

    transform:
      translate3d(
        -12vw,
        0,
        0
      )
      scale(.7);

    opacity:0;

  }


  12%{
    opacity:.8;
  }


  50%{

    transform:
      translate3d(
        52vw,
        -7vh,
        0
      )
      scale(1);

  }


  88%{
    opacity:.8;
  }


  100%{

    transform:
      translate3d(
        114vw,
        3vh,
        0
      )
      scale(.75);

    opacity:0;

  }

}


.bird--1{

  top:30%;

  animation-duration:
    30s;

  animation-delay:
    2s;

}


.bird--2{

  top:36%;

  animation-duration:
    36s;

  animation-delay:
    7s;

  scale:.82;

}


.bird--3{

  top:24%;

  animation-duration:
    44s;

  animation-delay:
    14s;

  scale:.66;

}


/* ============================================================
   HAZE
============================================================ */

.sky__haze{

  position:absolute;

  inset:
    auto 0 0;

  height:42%;

  background:

    linear-gradient(
      180deg,

      transparent,

      rgba(
        255,
        240,
        224,
        .1
      )
      35%,

      rgba(
        230,
        188,
        145,
        .24
      )
      70%,

      rgba(
        206,
        151,
        99,
        .18
      )
    );

}


/* ============================================================
   HERO CONTENT
============================================================ */

.hero__content{
  padding-top: 70px;

  position:relative;

  text-align:center;

  display:grid;

  justify-items:center;

  gap:
    clamp(
      10px,
      2.4vw,
      18px
    );

}


.hero__content::before{

  content:"";

  position:absolute;

  inset:
    -18%
    -25%;

  z-index:-1;

  background:

    radial-gradient(
      58% 46% at 50% 48%,

      rgba(
        255,
        246,
        226,
        .18
      ),

      rgba(
        255,
        246,
        226,
        .06
      )
      55%,

      transparent
      78%
    );

  pointer-events:none;

}


/* ============================================================
   GANESH
============================================================ */

.ganesh{

  position:absolute;

  top:
    calc(
      env(
        safe-area-inset-top
      )
      +
      clamp(
        22px,
        6vh,
        64px
      )
    );

  left:50%;

  translate:
    -50%
    0;

  z-index:3;

  margin:0;

  white-space:nowrap;

  font-family:
    var(--deva);

  font-size:
    clamp(
      20px,
      5.4vw,
      33px
    );

  font-weight:600;

  color:#745127;

  letter-spacing:.04em;

  text-shadow:

    0 1px 0
    rgba(
      255,
      255,
      255,
      .75
    ),

    0 5px 22px
    rgba(
      80,
      55,
      28,
      .18
    );

  animation:

    ganeshIn
    1.5s
    var(--slow)
    .25s
    both,

    ganeshGlow
    4.5s
    ease-in-out
    2s
    infinite;

}


.ganesh::before,
.ganesh::after{

  content:"";

  position:absolute;

  top:50%;

  width:
    clamp(
      28px,
      8vw,
      70px
    );

  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(
        135,
        91,
        34,
        .65
      )
    );

}


.ganesh::before{

  right:
    calc(
      100% + 15px
    );

}


.ganesh::after{

  left:
    calc(
      100% + 15px
    );

  background:
    linear-gradient(
      90deg,
      rgba(
        135,
        91,
        34,
        .65
      ),
      transparent
    );

}


@keyframes ganeshIn{

  from{

    opacity:0;

    transform:
      translateY(
        -18px
      );

  }


  to{

    opacity:1;

    transform:none;

  }

}


@keyframes ganeshGlow{

  50%{

    text-shadow:

      0 1px 0
      rgba(
        255,
        255,
        255,
        .8
      ),

      0 5px 28px
      rgba(
        80,
        55,
        28,
        .28
      );

  }

}


/* ============================================================
   NAMES
============================================================ */

.hero__names {
    display: grid;
    justify-items: center;
    gap: 0;
}


.name{

  font-family:
    var(--hand);

  font-weight:400;

  font-size:
    clamp(
      58px,
      19vw,
      150px
    );

  line-height: .68;

  color:#15263a;

  letter-spacing:.01em;

  text-shadow:

    0 2px 0
    rgba(
      255,
      255,
      255,
      .58
    ),

    0 10px 38px
    rgba(
      25,
      40,
      55,
      .18
    );

}


.name .ch{

  display:inline-block;

  white-space:pre;

  opacity:0;

  transform:
    translate3d(
      0,
      64px,
      0
    )
    rotate(9deg)
    scale(.7);

  animation:
    chIn
    1.35s
    var(--slow)
    forwards;

}


@keyframes chIn{

  to{

    opacity:1;

    transform:none;

  }

}


.name--groom{

  animation:
    floaty
    7s
    ease-in-out
    2.6s
    infinite;

}


.name--bride{
  line-height: 0.62;
    margin-bottom: 20px;

  animation:
    floaty
    7s
    ease-in-out
    3.4s
    infinite
    reverse;

}


@keyframes floaty{

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

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

}


/* ============================================================
   AMPERSAND
============================================================ */

.amp {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 18px;
    width: min(78vw, 520px);

    margin: -10px 0;

    opacity: 0;

    animation:
        ampIn
        1.4s
        var(--slow)
        1.55s
        forwards;
}


@keyframes ampIn{

  from{

    opacity:0;

    transform:
      scale(.6);

  }


  to{

    opacity:1;

    transform:none;

  }

}


.amp__line{

  flex:1;

  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(
        122,
        84,
        35,
        .65
      )
    );

}


.amp__line--r{

  background:
    linear-gradient(
      270deg,
      transparent,
      rgba(
        122,
        84,
        35,
        .65
      )
    );

}


.amp__char{

  font-family:
    var(--serif);

  font-style:italic;

  font-size:
    clamp(
      26px,
      7vw,
      48px
    );

  color:
    #b07b32;

  text-shadow:
    0 2px 15px
    rgba(
      255,
      255,
      255,
      .5
    );

  animation:
    ampBeat
    3.4s
    ease-in-out
    2.8s
    infinite;

}


@keyframes ampBeat{

  0%,
  100%{
    transform:
      scale(1)
      rotate(0);
  }

  40%{
    transform:
      scale(1.16)
      rotate(-4deg);
  }

  70%{
    transform:
      scale(.98)
      rotate(2deg);
  }

}


/* ============================================================
   HERO DATE
============================================================ */

.hero__hero-date{

  margin-top:12px;

  font-family:
    var(--title);

  font-size:
    clamp(
      14px,
      3.2vw,
      19px
    );

  letter-spacing:.25em;

  text-transform:
    uppercase;

  color:#26384a;

  text-shadow:
    0 1px 0
    rgba(
      255,
      255,
      255,
      .6
    );

  opacity:0;

  animation:
    heroDateIn
    1.2s
    var(--slow)
    2.15s
    forwards;

}


@keyframes heroDateIn{

  from{

    opacity:0;

    transform:
      translateY(
        12px
      );

  }


  to{

    opacity:1;

    transform:none;

  }

}


/* ============================================================
   HERO COUNTDOWN
============================================================ */

.hero__hero-countdown{

  display:grid;

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

  width:
    min(
      720px,
      92vw
    );

  gap:8px;

  margin-top:4px;

  opacity:0;

  animation:
    heroDateIn
    1.2s
    var(--slow)
    2.35s
    forwards;

}


.hero__hero-countdown > div{

  padding:
    9px
    6px
    8px;

  border:
    1px solid
    rgba(
      38,
      56,
      74,
      .18
    );

  border-radius:12px;

  background:
    rgba(
      255,
      255,
      255,
      .18
    );

  backdrop-filter:
    blur(10px);

  box-shadow:
    inset
    0 1px
    rgba(
      255,
      255,
      255,
      .42
    );

}


.hero__hero-countdown b{

  display:block;

  font-family:
    var(--serif);

  font-size:
    clamp(
      21px,
      4vw,
      31px
    );

  font-weight:500;

  color:#17283b;

}


.hero__hero-countdown span{

  display:block;

  margin-top:3px;

  font-size:7px;

  letter-spacing:.14em;

  color:#4d5c68;

}


.hero__hero-countdown b.tick{

  animation:
    tick
    .35s
    ease;

}


/* ============================================================
   SCROLL CUE
============================================================ */

.scrollcue{

  position:absolute;

  left:50%;

  bottom: 24px;

  transform: translateX(-50%);

  display:grid;

  justify-items:center;

  gap:9px;

  z-index:4;

  opacity:0;

  animation:
    whisperIn
    1.4s
    var(--slow)
    3s
    forwards;

  transition:
    opacity .5s,
    transform .5s;

}


.scrollcue.is-hidden{

  opacity:0;

  pointer-events:none;

}


@keyframes whisperIn{

  from{

    opacity:0;

    letter-spacing:.9em;

    filter:
      blur(6px);

  }


  to{

    opacity:1;

    letter-spacing:.46em;

    filter:
      blur(0);

  }

}


.scrollcue__track{

  position:relative;

  width:1px;

  height:
    clamp(
      34px,
      7vh,
      58px
    );

  background:
    linear-gradient(
      180deg,
      rgba(
        33,
        50,
        67,
        .75
      ),
      transparent
    );

  overflow:hidden;

}


.scrollcue__track::after{

  content:"";

  position:absolute;

  left:0;

  top:-40%;

  width:100%;

  height:40%;

  background:
    #a97834;

  animation:
    trickle
    2.1s
    ease-in-out
    infinite;

}


@keyframes trickle{

  0%{

    top:-40%;

    opacity:0;

  }


  30%{
    opacity:1;
  }


  100%{

    top:100%;

    opacity:0;

  }

}


.scrollcue__dot{

  width:7px;

  height:7px;

  border-radius:50%;

  background:
    #a97834;

  box-shadow:
    0 0 14px
    rgba(
      255,
      232,
      190,
      .8
    );

  animation:
    floaty
    2.2s
    ease-in-out
    infinite;

}


.scrollcue__text{

  font-size:9.5px;

  font-weight:300;

  letter-spacing:.4em;

  text-transform:
    uppercase;

  color:
    rgba(
      25,
      43,
      60,
      .68
    );

}