/* ============================================================
   VIDEO
============================================================ */

.player{

  position:relative;

  margin-inline:auto;

  width:100%;

}


.player__glow{

  position:absolute;

  inset:
    -14%
    -6%;

  background:
    radial-gradient(
      closest-side,
      rgba(
        232,
        195,
        122,
        .16
      ),
      transparent 72%
    );

  filter:
    blur(26px);

  pointer-events:none;

}


.player__stage{

  position:relative;

  margin-inline:auto;

  width:
    min(
      100%,
      980px
    );

  aspect-ratio:
    16 / 9;

  border-radius:
    var(--radius);

  overflow:hidden;

  background:#05070d;

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

  box-shadow:

    0 50px 90px -50px
    #000,

    inset
    0 0 0 1px
    rgba(
      255,
      255,
      255,
      .04
    );

  transition:
    aspect-ratio
    .8s
    var(--slow);

}


.player__stage.is-portrait{

  aspect-ratio:
    9 / 16;

  width:
    min(
      100%,
      420px
    );

}


.player__stage.is-square{

  aspect-ratio:1;

  width:
    min(
      100%,
      620px
    );

}


.player__stage video{

  width:100%;
  height:100%;

  object-fit:cover;

  background:#05070d;

}


.player__stage.is-portrait
video{

  object-fit:contain;

}


.player__big{

  position:absolute;

  inset:0;

  display:grid;

  place-items:center;

  background:
    linear-gradient(
      180deg,
      rgba(
        6,
        10,
        20,
        .25
      ),
      rgba(
        6,
        10,
        20,
        .55
      )
    );

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

}


.player__big.is-hidden{

  opacity:0;

  visibility:hidden;

}


.player__big svg{

  position:relative;

  z-index:3;

  width:26px;
  height:26px;

  fill:#1a1206;

  stroke:none;

}


.player__big::after{

  content:"";

  position:absolute;

  z-index:1;

  width:
    clamp(
      64px,
      15vw,
      84px
    );

  aspect-ratio:1;

  border-radius:50%;

  background:
    linear-gradient(
      160deg,
      var(--gold-3),
      var(--gold) 55%,
      var(--gold-2)
    );

  box-shadow:
    0 18px 40px -14px
    rgba(
      0,
      0,
      0,
      .8
    );

}


.player__pulse{

  position:absolute;

  z-index:2;

  width:
    clamp(
      64px,
      15vw,
      84px
    );

  aspect-ratio:1;

  border-radius:50%;

  border:
    1px solid
    rgba(
      255,
      240,
      214,
      .7
    );

  animation:
    pulseOut
    2.4s
    ease-out
    infinite;

}


@keyframes pulseOut{

  0%{

    transform:scale(1);

    opacity:.85;

  }


  100%{

    transform:scale(2);

    opacity:0;

  }

}


/* ============================================================
   VIDEO ERROR
============================================================ */

.player__miss{

  position:absolute;

  inset:0;

  display:grid;

  place-items:center;

  align-content:center;

  gap:14px;

  text-align:center;

  padding:24px;

  background:
    linear-gradient(
      160deg,
      #0a1020,
      #05080f
    );

  color:
    var(--ink-dim);

  font-size:13px;

}


.player__miss[hidden]{
  display:none;
}


.player__miss svg{

  width:46px;
  height:46px;

  stroke:
    rgba(
      232,
      195,
      122,
      .55
    );

  stroke-width:1.2;

}


.player__miss code{

  color:
    var(--gold);

}


/* ============================================================
   VIDEO CONTROLS
============================================================ */

.player__ui{

  position:absolute;

  inset:
    auto
    0
    0
    0;

  display:flex;

  align-items:center;

  gap:10px;

  padding:
    14px
    clamp(
      12px,
      3vw,
      18px
    );

  background:
    linear-gradient(
      0deg,
      rgba(
        4,
        7,
        14,
        .92
      ),
      transparent
    );

  opacity:0;

  translate:
    0
    100%;

  transition:
    opacity .45s,
    translate .45s
    var(--ease);

}


.player__stage.is-playing
.player__ui,
.player__stage:hover
.player__ui{

  opacity:1;

  translate:
    0
    0;

}


.pbtn{

  width:34px;
  height:34px;

  flex:0 0 auto;

  display:grid;

  place-items:center;

  border-radius:50%;

  color:#fff;

}


.pbtn:hover{

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

  transform:
    scale(1.08);

}


.pbtn svg{

  width:19px;
  height:19px;

}


.pbtn .i-play,
.pbtn .i-pause{

  fill:
    currentColor;

  stroke:none;

}


.i-pause,
.i-mute{
  display:none;
}


.player__stage.is-playing
.i-play{
  display:none;
}


.player__stage.is-playing
.i-pause{
  display:block;
}


.player__stage.is-muted
.i-vol{
  display:none;
}


.player__stage.is-muted
.i-mute{
  display:block;
}


.pbar{

  flex:1;

  height:3px;

  border-radius:3px;

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

  cursor:pointer;

}


.pbar span{

  display:block;

  height:100%;

  width:0;

  border-radius:3px;

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

}


.ptime{

  font-size:11px;

  color:
    rgba(
      255,
      255,
      255,
      .82
    );

  font-variant-numeric:
    tabular-nums;

}


.player__caption{

  margin-top:
    clamp(
      14px,
      3vw,
      22px
    );

  text-align:center;

  font-family:
    var(--hand);

  font-size:
    clamp(
      24px,
      6vw,
      38px
    );

  color:
    var(--gold-3);

}


/* ============================================================
   PDF
============================================================ */

.pdf{

  width:
    min(
      100%,
      760px
    );

  margin-inline:auto;

}


.pdf__frame{

  position:relative;

  border-radius:
    var(--radius);

  padding:
    clamp(
      9px,
      2vw,
      16px
    );

  background:
    linear-gradient(
      150deg,
      rgba(
        232,
        195,
        122,
        .4
      ),
      rgba(
        232,
        195,
        122,
        .08
      ) 40%,
      rgba(
        231,
        154,
        154,
        .24
      )
    );

  box-shadow:
    0 60px 100px -60px
    #000;

}


.pdf__stage{

  position:relative;

  border-radius:
    calc(
      var(--radius) - 8px
    );

  overflow:hidden;

  background:#fdf9f1;

  min-height:
    clamp(
      300px,
      66vh,
      700px
    );

  display:grid;

  place-items:center;

  touch-action:pan-y;

  cursor:grab;

  user-select:none;

}


.pdf__stage:active{
  cursor:grabbing;
}


.pdf__sheet{

  width:100%;
  height:100%;

  display:grid;

  place-items:center;

  transform-origin:
    center center;

  will-change:
    transform,
    opacity;

}


.pdf__sheet canvas{

  display:block;

  max-width:100%;

  height:auto;

  box-shadow:
    0 10px 40px -18px
    rgba(
      0,
      0,
      0,
      .4
    );

}


/* ============================================================
   PAGE TURN
============================================================ */

.pdf__sheet.turn-next{

  animation:
    turnNext
    .62s
    var(--ease)
    both;

}


.pdf__sheet.turn-prev{

  animation:
    turnPrev
    .62s
    var(--ease)
    both;

}


@keyframes turnNext{

  from{

    transform:
      perspective(1400px)
      rotateY(0)
      translateX(0);

    opacity:1;

  }


  to{

    transform:
      perspective(1400px)
      rotateY(-42deg)
      translateX(-46%)
      scale(.86);

    opacity:0;

  }

}


@keyframes turnPrev{

  from{

    transform:
      perspective(1400px)
      rotateY(0)
      translateX(0);

    opacity:1;

  }


  to{

    transform:
      perspective(1400px)
      rotateY(42deg)
      translateX(46%)
      scale(.86);

    opacity:0;

  }

}


/* ============================================================
   PDF ARROWS
============================================================ */

.pdf__arrow{

  position:absolute;

  top:50%;

  translate:
    0 -50%;

  width:46px;
  height:46px;

  border-radius:50%;

  display:grid;

  place-items:center;

  color:#2b1c06;

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

  box-shadow:
    0 14px 30px -12px
    rgba(
      0,
      0,
      0,
      .75
    );

  transition:
    transform .45s
    var(--ease),
    opacity .4s;

  z-index:3;

}


.pdf__arrow--prev{
  left:3px;
}


.pdf__arrow--next{
  right:3px;
}


.pdf__arrow:hover{

  transform:
    translateY(-50%)
    scale(1.12);

}


.pdf__arrow[disabled]{

  opacity:.28;

  pointer-events:none;

}


.pdf__arrow svg{
  width:22px;
}


/* ============================================================
   PDF COUPLE
============================================================ */

.cue{

  position:relative;

  margin:
    clamp(
      16px,
      3vw,
      24px
    )
    auto
    0;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:
    clamp(
      10px,
      3vw,
      20px
    );

  padding:8px 10px;

  border-radius:999px;

}


.cue::before{

  content:"";

  position:absolute;

  inset:0;

  border-radius:999px;

  background:
    radial-gradient(
      closest-side,
      rgba(
        232,
        195,
        122,
        .16
      ),
      transparent 76%
    );

  animation:
    cueHalo
    3s
    ease-in-out
    infinite;

}


@keyframes cueHalo{

  0%,
  100%{

    opacity:.5;

    transform:
      scale(.94);

  }


  50%{

    opacity:1;

    transform:
      scale(1.06);

  }

}


.cue__couple{

  position:relative;

  width:
    clamp(
      56px,
      14vw,
      74px
    );

  color:
    var(--gold);

  filter:
    drop-shadow(
      0 6px 14px
      rgba(
        0,
        0,
        0,
        .6
      )
    );

  animation:
    coupleWalk
    3.2s
    ease-in-out
    infinite;

}


.cue__couple svg{

  width:100%;
  height:auto;

  fill:
    currentColor;

}


.cue__couple
.cue__hands{

  fill:none;

  stroke:
    var(--gold);

  stroke-width:2.2;

}


.cue__couple
.cue__heart{

  fill:
    var(--rose);

  transform-origin:
    34px 7px;

  animation:
    beat
    1.7s
    ease-in-out
    infinite;

}


.cue__couple
.cue__g{

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

  transform-origin:
    21px 46px;

}


.cue__couple
.cue__b{

  animation:
    cueSway
    2.2s
    ease-in-out
    infinite
    reverse;

  transform-origin:
    47px 46px;

}


@keyframes cueSway{

  0%,
  100%{
    transform:
      rotate(-2.2deg);
  }

  50%{
    transform:
      rotate(2.2deg);
  }

}


@keyframes coupleWalk{

  0%,
  100%{

    transform:
      translateX(-14%)
      scale(.97);

  }


  50%{

    transform:
      translateX(14%)
      scale(1.03);

  }

}


.cue__chev{

  width:
    clamp(
      20px,
      5vw,
      26px
    );

  color:
    var(--gold);

  opacity:.35;

}


.cue__chev svg{
  width:100%;
}


.cue__chev--l{

  animation:
    chevL
    2.6s
    ease-in-out
    infinite;

}


.cue__chev--r{

  animation:
    chevR
    2.6s
    ease-in-out
    infinite;

}


@keyframes chevL{

  0%,
  100%{

    opacity:.25;

    transform:
      translateX(4px);

  }


  50%{

    opacity:1;

    transform:
      translateX(-4px);

  }

}


@keyframes chevR{

  0%,
  100%{

    opacity:.25;

    transform:
      translateX(-4px);

  }


  50%{

    opacity:1;

    transform:
      translateX(4px);

  }

}


.cue__hint{

  text-align:center;

  margin-top:6px;

  font-size:
    clamp(
      10px,
      2.6vw,
      12px
    );

  letter-spacing:.26em;

  text-transform:
    uppercase;

  color:
    var(--gold);

  animation:
    hintFade
    3.4s
    ease-in-out
    infinite;

}


@keyframes hintFade{

  0%,
  100%{
    opacity:.4;
  }

  50%{
    opacity:1;
  }

}


.pdf__bar{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:14px;

  flex-wrap:wrap;

  margin-top:
    clamp(
      14px,
      3vw,
      20px
    );

  padding-top:14px;

  border-top:
    1px solid
    rgba(
      232,
      195,
      122,
      .16
    );

}


.pdf__pages{

  font-size:
    clamp(
      10px,
      2.5vw,
      12px
    );

  letter-spacing:.24em;

  text-transform:
    uppercase;

  color:
    var(--ink-dim);

}


.pdf__dots{

  display:flex;

  gap:7px;

  flex-wrap:wrap;

  justify-content:center;

  flex:1;

}


.pdf__dots i{

  width:7px;
  height:7px;

  border-radius:50%;

  background:
    rgba(
      232,
      195,
      122,
      .28
    );

  cursor:pointer;

  transition:.4s;

}


.pdf__dots i.is-on{

  width:20px;

  border-radius:99px;

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

}


.pdf__dl{

  display:inline-flex;

  align-items:center;

  gap:8px;

  padding:
    9px
    16px;

  border-radius:999px;

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

  font-size:
    clamp(
      10px,
      2.5vw,
      12px
    );

  letter-spacing:.2em;

  text-transform:
    uppercase;

  color:
    var(--gold-3);

}


.pdf__dl svg{
  width:15px;
}


.pdf__state{

  position:absolute;

  inset:0;

  display:grid;

  place-items:center;

  align-content:center;

  gap:14px;

  text-align:center;

  padding:24px;

  background:
    linear-gradient(
      160deg,
      #0a1020,
      #05080f
    );

  color:
    var(--ink-dim);

  font-size:13px;

}


.pdf__state[hidden]{
  display:none;
}


.pdf__state svg{

  width:46px;
  height:46px;

  stroke:
    rgba(
      232,
      195,
      122,
      .55
    );

  stroke-width:1.2;

}


.pdf__state code{

  color:
    var(--gold);

}


.spinner{

  width:28px;
  height:28px;

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

  border-top-color:
    var(--gold);

  border-radius:50%;

  animation:
    spin
    .9s
    linear
    infinite;

}


.pdf__stage.hint-swipe::after{

  content:"";

  position:absolute;

  left:50%;
  top:50%;

  width:64px;
  height:64px;

  translate:
    -50%
    -50%;

  border-radius:50%;

  border:
    1.5px solid
    rgba(
      232,
      195,
      122,
      .75
    );

  animation:
    swipeGhost
    2.1s
    var(--ease)
    2;

  pointer-events:none;

}


@keyframes swipeGhost{

  0%{

    opacity:0;

    transform:
      translateX(38px)
      scale(.7);

  }


  22%{
    opacity:.9;
  }


  78%{
    opacity:.9;
  }


  100%{

    opacity:0;

    transform:
      translateX(-38px)
      scale(.7);

  }

}