/* ==========================================
   CHAPTER I
   THE SEAL
========================================== */

.seal{

    transition:
        opacity .45s ease,
        transform .6s cubic-bezier(.16, 1, .3, 1);

}

.envelope.open .seal{

    opacity:0;

    transform:
        translate(-50%, -50%)
        scale(.94);

    transition-delay:.0s;

}
/* ==========================================
   CHAPTER II
   THE FLAP
========================================== */

.flap{

    transform-origin:top center;

}

.envelope.open .flap{

    transform:rotateX(180deg);

    opacity:0;

    transition:
        transform 1.45s cubic-bezier(.16, 1, .3, 1),
        opacity .3s ease .85s;

    transition-delay:.35s;

}

/* ==========================================
   CHAPTER III
   THE LETTER
========================================== */

.letter-wrapper{

    transition:
        height 2.4s cubic-bezier(.16, 1, .3, 1);

}

.envelope.open .letter-wrapper{

    height:110%;

    transition-delay:.45s;

}

.letter{

    filter:blur(7px);

    opacity:.05;

    transition:
        top 2.4s cubic-bezier(.16, 1, .3, 1),
        left 2.4s cubic-bezier(.16, 1, .3, 1),
        width 2.4s cubic-bezier(.16, 1, .3, 1),
        height 2.4s cubic-bezier(.16, 1, .3, 1),
        transform 2.4s cubic-bezier(.16, 1, .3, 1),
        border-radius 2.4s cubic-bezier(.16, 1, .3, 1),
        filter 2.4s ease,
        opacity 2.4s ease;

}

.envelope.open .letter{

    left:50%;

    top:50%;

    width:100vw;

    height:100vh;

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

    border-radius:0;

    filter:blur(0);

    opacity:1;

    transition-delay:.45s;

}

/* ==========================================
   CHAPTER IV
   ENVELOPE EXIT
========================================== */

.envelope.open .envelope-body{

    opacity:0;

    transition:
        opacity .7s ease;

    transition-delay:.8s;

}

.envelope.open .seal{

    opacity:0;

    transition-delay:.45s;

}

.envelope.open .seal{

    opacity:0;

    transition-delay:.5s;

}


/* ==========================================
   CHAPTER V
   THE FIRST NIGHT — HERO
========================================== */

.hero-names,
.hero-date,
.hero-concept{

    opacity:0;

    transform:translateY(2px);

}


/* ==========================================
   HERO ELEMENTS
========================================== */

.hero-names{

    transition:
        opacity 2.8s ease,
        transform 3s cubic-bezier(.16, 1, .3, 1);

}

.hero-date{

    transition:
        opacity 1.6s ease,
        transform 1.8s cubic-bezier(.16, 1, .3, 1);

}

.hero-concept{

    transition:
        opacity 1.5s ease,
        transform 1.7s cubic-bezier(.16, 1, .3, 1);

}


/* ==========================================
   HERO REVEAL
========================================== */

.envelope.open .hero-names{

    opacity:1;

    transform:translateY(0);

    transition-delay:1.7s;

}

.envelope.open .hero-date{

    opacity:1;

    transform:translateY(0);

    transition-delay:2.5s;

}

.envelope.open .hero-concept{

    opacity:1;

    transform:translateY(0);
    transition-delay:3s;

}

/* ==========================================
   REVEAL — BASE
========================================== */

.reveal {

    opacity: 0;

    transform: translateY(12px);

    transition:
        opacity 900ms cubic-bezier(.22, .61, .36, 1),
        transform 900ms cubic-bezier(.22, .61, .36, 1);

}


.chapter.is-visible .reveal {

    opacity: 1;

    transform: translateY(0);

}


/* ==========================================
   REVEAL — DELAYS
========================================== */

.chapter.is-visible .reveal-1 {
    transition-delay: 100ms;
}

.chapter.is-visible .reveal-2 {
    transition-delay: 260ms;
}

.chapter.is-visible .reveal-3 {
    transition-delay: 420ms;
}

.chapter.is-visible .reveal-4 {
    transition-delay: 650ms;
}


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

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

    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

}


/* ==========================================
   THE NIGHT — REVEAL
========================================== */

.chapter-night .reveal {

    opacity: 0;

    transform: translateY(8px);

    filter: none;

    transition:
        opacity 900ms cubic-bezier(.22, .61, .36, 1),
        transform 900ms cubic-bezier(.22, .61, .36, 1);

}


.chapter-night.is-visible .reveal {

    opacity: 1;

    transform: translateY(0);

}


/* ==========================================
   THE NIGHT — STAGGER
========================================== */

.chapter-night.is-visible .reveal-1 {
    transition-delay: 120ms;
}

.chapter-night.is-visible .reveal-2 {
    transition-delay: 260ms;
}

.chapter-night.is-visible .reveal-3 {
    transition-delay: 420ms;
}

.chapter-night.is-visible .reveal-4 {
    transition-delay: 620ms;
}


/* ==========================================
   THE PLACE — REVEAL
========================================== */

.chapter-place .reveal {

    opacity: 0;

    transform: translateY(8px);

    filter: none;

    transition:
        opacity 900ms cubic-bezier(.22, .61, .36, 1),
        transform 900ms cubic-bezier(.22, .61, .36, 1);

}


.chapter-place.is-visible .reveal {

    opacity: 1;

    transform: translateY(0);

}


/* ==========================================
   THE PLACE — STAGGER
========================================== */

.chapter-place.is-visible .reveal-1 {
    transition-delay: 100ms;
}

.chapter-place.is-visible .reveal-2 {
    transition-delay: 260ms;
}

.chapter-place.is-visible .reveal-3 {
    transition-delay: 480ms;
}

.chapter-place.is-visible .reveal-4 {
    transition-delay: 650ms;
}



/* ==========================================
   THE EVENT — REVEAL
========================================== */

.chapter-event .reveal {

    opacity: 0;

    transform: translateY(8px);

    filter: none;

    transition:
        opacity 900ms cubic-bezier(.22, .61, .36, 1),
        transform 900ms cubic-bezier(.22, .61, .36, 1);

}


.chapter-event.is-visible .reveal {

    opacity: 1;

    transform: translateY(0);

}


/* ==========================================
   THE EVENT — STAGGER
========================================== */

.chapter-event.is-visible .reveal-1 {
    transition-delay: 100ms;
}

.chapter-event.is-visible .reveal-2 {
    transition-delay: 320ms;
}

.chapter-event.is-visible .reveal-3 {
    transition-delay: 540ms;
}


/* ==========================================
   THE NIGHT SCHEDULE
========================================== */

.chapter-schedule .schedule-item,
.chapter-schedule .schedule-divider {

    opacity: 0;

    transform: translateY(12px);

    transition:
        opacity 750ms cubic-bezier(.22, .61, .36, 1),
        transform 750ms cubic-bezier(.22, .61, .36, 1);

}


/* ==========================================
   ITEMS
========================================== */

.chapter-schedule.is-visible .schedule-reveal-1 {

    opacity: 1;

    transform: translateY(0);

    transition-delay: 180ms;

}


.chapter-schedule.is-visible .schedule-reveal-2 {

    opacity: 1;

    transform: translateY(0);

    transition-delay: 300ms;

}


.chapter-schedule.is-visible .schedule-reveal-3 {

    opacity: 1;

    transform: translateY(0);

    transition-delay: 420ms;

}


.chapter-schedule.is-visible .schedule-reveal-4 {

    opacity: 1;

    transform: translateY(0);

    transition-delay: 540ms;

}


.chapter-schedule.is-visible .schedule-reveal-5 {

    opacity: 1;

    transform: translateY(0);

    transition-delay: 660ms;

}


/* ==========================================
   FINAL DIVIDER
========================================== */

.chapter-schedule.is-visible .schedule-reveal-divider {

    opacity: 1;

    transform: translateY(0);

    transition-delay: 820ms;

}


/* ==========================================
   DRESS CODE — REVEAL
========================================== */

.chapter-dress-code .reveal {

    opacity: 0;

    transform: translateY(8px);

    filter: none;

    transition:
        opacity 850ms cubic-bezier(.22, .61, .36, 1),
        transform 850ms cubic-bezier(.22, .61, .36, 1);

}


.chapter-dress-code.is-visible .reveal {

    opacity: 1;

    transform: translateY(0);

}


/* ==========================================
   DRESS CODE — STAGGER
========================================== */

.chapter-dress-code.is-visible .reveal-1 {
    transition-delay: 100ms;
}

.chapter-dress-code.is-visible .reveal-2 {
    transition-delay: 260ms;
}

.chapter-dress-code.is-visible .reveal-3 {
    transition-delay: 420ms;
}

.chapter-dress-code.is-visible .reveal-4 {
    transition-delay: 560ms;
}

.chapter-dress-code.is-visible .reveal-5 {
    transition-delay: 1040ms;
}


/* ==========================================
   DRESS CODE — LOOK PREVIEWS
========================================== */

.chapter-dress-code .dress-preview {

    opacity: 0;

    transform: translateY(10px) scale(.97);

    transition:
        opacity 850ms cubic-bezier(.22, .61, .36, 1),
        transform 1000ms cubic-bezier(.22, .61, .36, 1);

}


.chapter-dress-code.is-visible .dress-preview-reveal-1 {

    opacity: 1;

    transform: translateY(0) scale(1);

    transition-delay: 700ms;

}


.chapter-dress-code.is-visible .dress-preview-reveal-2 {

    opacity: 1;

    transform: translateY(0) scale(1);

    transition-delay: 820ms;

}


.chapter-dress-code.is-visible .dress-preview-reveal-3 {

    opacity: 1;

    transform: translateY(0) scale(1);

    transition-delay: 940ms;

}


/* ==========================================
   RSVP — REVEAL
========================================== */

.chapter-rsvp .reveal {

    opacity: 0;

    transform: translateY(8px);

    filter: none;

    transition:
        opacity 850ms cubic-bezier(.22, .61, .36, 1),
        transform 850ms cubic-bezier(.22, .61, .36, 1);

}


.chapter-rsvp.is-visible .reveal {

    opacity: 1;

    transform: translateY(0);

}


/* ==========================================
   RSVP — STAGGER
========================================== */

.chapter-rsvp.is-visible .reveal-1 {
    transition-delay: 100ms;
}

.chapter-rsvp.is-visible .reveal-2 {
    transition-delay: 260ms;
}

.chapter-rsvp.is-visible .reveal-3 {
    transition-delay: 420ms;
}

.chapter-rsvp.is-visible .reveal-4 {
    transition-delay: 620ms;
}

.chapter-rsvp.is-visible .reveal-5 {
    transition-delay: 820ms;
}


/* ==========================================
   THE GIFTS — REVEAL
========================================== */

.chapter-gifts .reveal {

    opacity: 0;

    transform: translateY(8px);

    filter: none;

    transition:
        opacity 850ms cubic-bezier(.22, .61, .36, 1),
        transform 850ms cubic-bezier(.22, .61, .36, 1);

}


.chapter-gifts.is-visible .reveal {

    opacity: 1;

    transform: translateY(0);

}


/* ==========================================
   THE GIFTS — OPTIONS
========================================== */

.chapter-gifts .gifts-reveal-list,
.chapter-gifts .gifts-reveal-or,
.chapter-gifts .gifts-reveal-pix,
.chapter-gifts .gifts-reveal-divider {

    opacity: 0;

    transform: translateY(10px);

    transition:
        opacity 850ms cubic-bezier(.22, .61, .36, 1),
        transform 850ms cubic-bezier(.22, .61, .36, 1);

}


.chapter-gifts.is-visible .gifts-reveal-list {

    opacity: 1;

    transform: translateY(0);

    transition-delay: 360ms;

}


.chapter-gifts.is-visible .gifts-reveal-or {

    opacity: 1;

    transform: translateY(0);

    transition-delay: 600ms;

}


.chapter-gifts.is-visible .gifts-reveal-pix {

    opacity: 1;

    transform: translateY(0);

    transition-delay: 760ms;

}


.chapter-gifts.is-visible .gifts-reveal-divider {

    opacity: 1;

    transform: translateY(0);

    transition-delay: 980ms;

}


/* ==========================================
   THE SIGNATURE — FINAL REVEAL
========================================== */

.chapter-signature .signature-reveal-seal,
.chapter-signature .signature-reveal-names,
.chapter-signature .signature-reveal-date,
.chapter-signature .signature-reveal-divider {

    opacity: 0;

    transform: translateY(8px);

    transition:
        opacity 1200ms cubic-bezier(.22, .61, .36, 1),
        transform 1200ms cubic-bezier(.22, .61, .36, 1);

}


/* ==========================================
   SEAL
========================================== */

.chapter-signature.is-visible .signature-reveal-seal {

    opacity: 1;

    transform: translateY(0);

    transition-delay: 180ms;

}


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

.chapter-signature.is-visible .signature-reveal-names {

    opacity: 1;

    transform: translateY(0);

    transition-delay: 720ms;

}


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

.chapter-signature.is-visible .signature-reveal-date {

    opacity: 1;

    transform: translateY(0);

    transition-delay: 980ms;

}


/* ==========================================
   FINAL DIVIDER
========================================== */

.chapter-signature.is-visible .signature-reveal-divider {

    opacity: 1;

    transform: translateY(0);

    transition-delay: 1250ms;

}