:root{

  --ink:#f4ece0;
  --ink-soft:rgba(244,236,224,.72);
  --ink-dim:rgba(244,236,224,.5);

  --night:#070d1c;
  --night-2:#0b1730;
  --plum:#150e22;

  --gold:#e8c37a;
  --gold-2:#c8983f;
  --gold-3:#fff3d6;

  --rose:#e79a9a;

  --deep:#3b1f3f;

  --sky-1:#a8cde3;
  --sky-2:#c8dce8;
  --sky-3:#ead8ca;
  --sky-4:#e9bd8d;
  --sky-5:#f4d1a5;


  --serif:
    "Cormorant Garamond",
    Georgia,
    serif;

  --title:
    "Marcellus",
    "Cormorant Garamond",
    serif;

  --hand:
    "Great Vibes",
    cursive;

  --sans:
    "Jost",
    "Helvetica Neue",
    Arial,
    sans-serif;

  --deva:
    "Noto Serif Devanagari",
    serif;


  --pad:
    clamp(18px,4vw,42px);


  --radius:
    20px;


  --ease:
    cubic-bezier(.2,.7,.2,1);


  --slow:
    cubic-bezier(.16,1,.3,1);

}


*{
  box-sizing:border-box;
}


html{
  scroll-behavior:smooth;
}


body{

  margin:0;

  background:
    var(--night);

  color:
    var(--ink);

  font-family:
    var(--sans);

  overflow-x:hidden;

  -webkit-font-smoothing:
    antialiased;

}


body.locked{
  overflow:hidden;
}


img,
video,
canvas{
  display:block;
  max-width:100%;
}


button,
input{
  font:inherit;
}


button{
  border:0;
  background:none;
  color:inherit;
}


a{
  color:inherit;
  text-decoration:none;
}


svg{
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
}


main{
  position:relative;
  z-index:2;
}


.wrap{

  width:
    min(
      1100px,
      calc(
        100% -
        2 * var(--pad)
      )
    );

  margin-inline:auto;

}


.section{

  position:relative;

  padding:
    clamp(
      82px,
      11vw,
      150px
    )
    0;

  overflow:hidden;

}


.section::before{

  content:"";

  position:absolute;

  right:-25%;
  bottom:-35%;

  width:60vw;
  height:60vw;

  border-radius:50%;

  border:
    1px solid
    rgba(
      232,
      195,
      122,
      .055
    );

  box-shadow:

    inset
    0 0 0 34px
    rgba(
      232,
      195,
      122,
      .025
    ),

    inset
    0 0 0 70px
    rgba(
      232,
      195,
      122,
      .018
    );

  pointer-events:none;

  animation:
    spin 120s
    linear infinite;

}


@keyframes spin{

  to{
    transform:
      rotate(360deg);
  }

}


.eyebrow{

  margin:
    0 0 14px;

  text-align:center;

  font-size:
    clamp(
      9px,
      2.2vw,
      11px
    );

  font-weight:300;

  letter-spacing:
    .36em;

  text-transform:
    uppercase;

  color:
    var(--gold);

}


.heading{

  margin:0;

  text-align:center;

  font-family:
    var(--title);

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

  font-weight:400;

  line-height:1.02;

}


.script{

  margin:0;

  text-align:center;

  font-family:
    var(--hand);

  font-size:
    clamp(
      52px,
      11vw,
      86px
    );

  font-weight:400;

  color:
    var(--gold-3);

}


.lede{

  max-width:62ch;

  margin:
    20px auto 0;

  text-align:center;

  font-family:
    var(--serif);

  font-size:
    clamp(
      17px,
      3.8vw,
      21px
    );

  line-height:1.6;

  color:
    var(--ink-soft);

}


.lede--tight{
  max-width:56ch;
}


.ornament {
    width: min(280px, 72vw);
    margin: 0 auto 24px;
    color: var(--gold);
}


.ornament svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.ornament svg path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1;
    stroke-linecap: round;
}

.ornament svg path:nth-of-type(2) {
    transform-origin: 140px 15px;
    animation: ornamentDiamond 4s ease-in-out infinite;
}

@keyframes ornamentDiamond {
    0%, 100% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(45deg) scale(.9);
    }
}

.ornament svg circle {
    fill: currentColor;
    stroke: none;
}

.reveal{

  opacity:0;

  transform:
    translateY(34px);

  transition:

    opacity
    .95s
    var(--slow),

    transform
    .95s
    var(--slow);

}


.reveal.is-in{

  opacity:1;

  transform:none;

}


.reveal[data-anim="fade-right"]{
  transform:
    translateX(-45px);
}


.reveal[data-anim="fade-left"]{
  transform:
    translateX(45px);
}


.reveal[data-anim="zoom"]{
  transform:
    scale(.88);
}


.reveal[data-anim="flip"]{

  transform:
    perspective(900px)
    rotateX(12deg)
    translateY(25px);

}


.reveal.is-in[data-anim]{
  transform:none;
}


.progress{

  position:fixed;

  left:0;
  top:0;

  width:100%;
  height:2px;

  z-index:90;

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

}


.progress span{

  display:block;

  width:0;
  height:100%;

  background:
    linear-gradient(
      90deg,
      var(--gold-2),
      var(--gold-3)
    );

  box-shadow:
    0 0 10px
    rgba(
      232,
      195,
      122,
      .8
    );

}


/* ============================================================
   PETALS
============================================================ */

.petals{

  position:fixed;

  inset:0;

  z-index:70;

  pointer-events:none;

  overflow:hidden;

}


.petal{

  position:absolute;

  top:-8vh;

  width:10px;
  height:15px;

  border-radius:
    70%
    25%
    70%
    25%;

  background:
    linear-gradient(
      135deg,
      rgba(
        255,
        244,
        220,
        .9
      ),
      rgba(
        231,
        154,
        154,
        .72
      )
    );

  filter:
    drop-shadow(
      0 3px 5px
      rgba(
        0,
        0,
        0,
        .12
      )
    );

  opacity:0;

  animation:
    petalFall
    linear
    infinite;

}


.petal.flower{

  width:11px;
  height:11px;

  border-radius:50%;

  background:

    radial-gradient(
      circle at 50% 50%,
      #f8df9e 0 17%,
      transparent 18%
    ),

    radial-gradient(
      circle at 50% 15%,
      rgba(
        255,
        225,
        235,
        .85
      ) 0 28%,
      transparent 30%
    ),

    radial-gradient(
      circle at 85% 50%,
      rgba(
        255,
        225,
        235,
        .85
      ) 0 28%,
      transparent 30%
    ),

    radial-gradient(
      circle at 50% 85%,
      rgba(
        255,
        225,
        235,
        .85
      ) 0 28%,
      transparent 30%
    ),

    radial-gradient(
      circle at 15% 50%,
      rgba(
        255,
        225,
        235,
        .85
      ) 0 28%,
      transparent 30%
    );

}


@keyframes petalFall{

  0%{

    opacity:0;

    transform:
      translate3d(
        0,
        -5vh,
        0
      )
      rotate(0deg);

  }


  10%{
    opacity:.75;
  }


  50%{
    opacity:.62;
  }


  100%{

    opacity:0;

    transform:
      translate3d(
        var(--drift),
        115vh,
        0
      )
      rotate(
        var(--rot)
      );

  }

}


/* ============================================================
   MUSIC BUTTON
============================================================ */

.music{

  position:fixed;

  right:18px;
  bottom:18px;

  z-index:80;

  width:50px;
  height:50px;

  border-radius:50%;

  display:grid;
  place-items:center;

  color:
    var(--gold-3);

  background:
    rgba(
      7,
      13,
      28,
      .72
    );

  border:
    1px solid
    rgba(
      232,
      195,
      122,
      .38
    );

  backdrop-filter:
    blur(14px);

  box-shadow:
    0 16px 35px
    rgba(
      0,
      0,
      0,
      .25
    );

}


.music__note{

  width:21px;
  height:21px;

}


.music__note path{

  fill:none;

  stroke:
    currentColor;

  stroke-width:1.7;

}


.music__note circle{

  fill:
    currentColor;

  stroke:none;

}


.music__eq{

  display:none;

  gap:3px;

  height:19px;

  align-items:center;

}


.music__eq i{

  display:block;

  width:2px;

  border-radius:2px;

  background:
    currentColor;

  animation:
    eq 1s
    ease-in-out
    infinite;

}


.music__eq i:nth-child(1){
  height:7px;
}


.music__eq i:nth-child(2){
  height:15px;
  animation-delay:-.25s;
}


.music__eq i:nth-child(3){
  height:11px;
  animation-delay:-.5s;
}


.music__eq i:nth-child(4){
  height:17px;
  animation-delay:-.75s;
}


.music.is-on .music__note{
  display:none;
}


.music.is-on .music__eq{
  display:flex;
}


@keyframes eq{

  50%{
    transform:
      scaleY(.45);
  }

}