/* 🎬 PAGE 1: WELCOME & TITLE ANIMATION */
.text__welcome {
  max-height: 90%;
  max-width: 90%;
  width: 90%;
  height: 90%;

  display: flex;
  align-items: center;
  justify-content: center;
}

.text__welcome video {
  max-width: 100%;
  max-height: 100%;
}

/* ✉️ SAVE THE DATE / ENVELOPE */
.background__block.save_the_date {
  font-size: min(10dvh, 12vw);
}

.text__container__save__the_date {
  position: absolute;
  width: auto;
  height: 400px;
  left: 8%;
  top: 19%;
}

.text__container__save__the_date h1 {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.text__policeA {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 1em;
}

.text__policeB {
  font-family: "Aston Script", cursive;
  font-size: 0.6em;
}

.text__date {
  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  word-spacing: 0.2em;
  font-size: 0.5em;

  position: absolute;
  top: 25%;
  right: 15%;
}

.date_img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
}

/* Envelope Container */
.envelop__container {
  /* --envelop-width is defined locally here */
  --envelop-width: min(100dvw, 65dvh);

  width: var(--envelop-width);
  font-size: calc(var(--envelop-width) / 60);

  position: absolute;
  bottom: max(calc(75dvh - 100vw), 12em);
  height: auto;
  opacity: 0;
  
}

.envelop__image__main {
  position: relative;
  width: 100%;
  display: block;
  z-index: 1;
}

.envelop__container__dummy {
  position: relative;
  width: auto;
  height: auto;

  transform: scale(1.08);
  filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.5));
}

/* Envelope Decorators (Corner, Side) */
.envelop__image__corner1 {
  position: absolute;
  bottom: -7.5%;
  right: 7%;
  width: 35%;
  height: auto;
  z-index: 2;

  filter: drop-shadow(-1px -1px 5px rgba(0, 0, 0, 0.5));
}

.envelop__image__side1 {
  position: absolute;
  bottom: 18%;
  left: 6%;
  width: auto;
  height: 18%;
  transform: rotate(-90deg);
  z-index: 0;
}

.envelop__opened {
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0;
}

.envelop__inside__container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;

  -webkit-mask-image: url('../Ressources/Envelop/Envelop_Opened_Mask.webp');
  mask-image: url('../Ressources/Envelop/Envelop_Opened_Mask.webp');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Guest Card */
.envelop__guest__container {
  position: absolute;
  bottom: 0;
  left: 17%;
  width: 40%;
  height: 65%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2.2em;
  box-sizing: border-box;

  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
  border-radius: 4px;

  background-color: whitesmoke;
  background-blend-mode: multiply;

  background-image: url('../Ressources/Envelop/white-paper-texture.webp');
  background-repeat: repeat;
  background-size: 100vw;

  transform: rotate(0deg) translate(0, 100%);
  opacity: 0;
}

.guest__text {
  display: block;
  text-align: left;
  width: 100%;
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.6em;
  margin-bottom: 1em;
  line-height: 1.2;
}

#guest__dear,
#guest__name {
  font-size: 2.6em;
  font-weight: bold;
  font-family: "Aston Script", cursive;
  line-height: 1;
}

/* Countdown Card */
.envelop__countdown__container {
  position: absolute;
  bottom: 25%;
  left: 24%;
  width: 45%;
  height: 16%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;

  transform: rotate(0deg) translate(0, 100%);
  opacity: 0;
}

.countdown__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Aston Script', cursive;
  text-align: center;
  position: absolute;

  width: 70%;
  height: 100%;
  right: 0;
}

.countdown-label {
  font-size: 2.2em;
  font-family: 'Aston Script', cursive;
}

.countdown__container__numbers {
  display: flex;
  margin: 1em;
  justify-content: center;
  align-items: flex-start;
  gap: 1.5em;
}

.countdown__container__numbers .number {
  position: relative;
  font-family:'Courier New', Courier, monospace;
  font-size: 1.2em;
  line-height: 1;
  text-align: center;
  min-width: 2ch;
}

.countdown__container__numbers .number::after {
  position: absolute;
  bottom: -1.2em;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Aston Script', cursive;
  font-size: 0.7em;
  line-height: 1;
}

.countdown-d::after { content: "j"; }
.countdown-h::after { content: "h"; }
.countdown-m::after { content: "m"; }
.countdown-s::after { content: "s"; }

/* Ticket Styling */
.ticket-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.5));

  --ticket-left-size : 30%;
  --ticket-dot-size : 1.2em;
}

.ticket {
  width: 100%;
  height: 100%;
  background: #e8e4da;
  border-radius: 1.2em;
  position: relative;
  overflow: visible;

  
  /* Paper texture */
  background-image: 
      radial-gradient(circle at 15% 25%, rgba(0,0,0,0.04) 1px, transparent 1px),
      radial-gradient(circle at 75% 60%, rgba(0,0,0,0.03) 1px, transparent 1px),
      radial-gradient(circle at 45% 80%, rgba(0,0,0,0.025) 1px, transparent 1px),
      radial-gradient(circle at 85% 30%, rgba(0,0,0,0.035) 1px, transparent 1px),
      radial-gradient(circle at 25% 70%, rgba(0,0,0,0.03) 1px, transparent 1px),
      radial-gradient(circle at 60% 40%, rgba(0,0,0,0.028) 1px, transparent 1px);
  background-size: 40px 40px, 50px 50px, 35px 35px, 45px 45px, 38px 38px, 42px 42px;
  
  /* Mask to cut out the circles */
  -webkit-mask: 
      radial-gradient(circle var(--ticket-dot-size) at var(--ticket-left-size) 0%, transparent 99%, black 100%),
      radial-gradient(circle var(--ticket-dot-size) at  var(--ticket-left-size) 100%, transparent 99%, black 100%),
      linear-gradient(black, black);
  -webkit-mask-composite: source-out, source-out, source-over;
  -webkit-mask-size: 100% 100%;
  
  mask: 
      radial-gradient(circle var(--ticket-dot-size) at  var(--ticket-left-size) 0%, transparent 99%, black 100%),
      radial-gradient(circle var(--ticket-dot-size) at  var(--ticket-left-size) 100%, transparent 99%, black 100%),
      linear-gradient(black, black);
  mask-composite: exclude, exclude, add;
  mask-size: 100% 100%;
}

/* Perforated line */
.perforation {
  position: absolute;
  left:  var(--ticket-left-size);
  top: calc(var(--ticket-dot-size) * 1.5);
  bottom: calc(var(--ticket-dot-size) * 1.5);
  width: 2px;
  transform: translateX(-50%);
  background-image: repeating-linear-gradient(
      to bottom,
      #1a1a1a 0px,
      #1a1a1a 2px,
      transparent 2px,
      transparent 10px
  );
  opacity: 0.5;
}

.ticket__logo {
  position: absolute;
  top: 10%;
  left: calc(var(--ticket-left-size) * 0.5);
  width: calc(var(--ticket-left-size) * 0.5);
  transform: translate(-50%, 0);
}


/* Photo Card */
.envelop__photo__container {
  position: absolute;
  top: 30%;
  right: 10.5%;
  width: 40%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2em;
  box-sizing: border-box;

  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
  border-radius: 2px;

  background-color: white;
  background-blend-mode: multiply;

  background-image: url('../Ressources/Envelop/white-paper-texture.webp');
  background-repeat: repeat;
  background-size: 100px;

  transform: rotate(0deg) translate(0, 100%);
  opacity: 0;
}

.envelop__photo__border {
  width: auto;
  height: auto;
  padding: 0.22em;
  background-color: rgb(24, 24, 24);
}

.envelop__photo__container img {
  width: 100%;
  height: auto;
}

/* ENVELOPE ANIMATION KEYFRAMES & TRIGGERS */
.in-view.envelop__container {
  animation: envelop_appear 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s forwards;
}

.in-view .envelop__decorator {
  animation: envelop-decorators_appear 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s forwards;
}

.in-view .envelop__opened {
  animation: envelop-open 0.4s ease-in-out 1.1s forwards;
}

.in-view.known-guest .envelop__guest__container {
  animation: envelop-open-guest 1s cubic-bezier(.18,.89,.32,1.28) 1s forwards;
}

.in-view .envelop__countdown__container {
  animation: envelop-open-countdown 0.9s cubic-bezier(.18,.89,.32,1.28) 1.2s forwards;
}

.in-view .envelop__photo__container {
  animation: envelop-open-photo 0.8s cubic-bezier(.18,.89,.32,1.28) 1.2s forwards;
}

@keyframes envelop_appear {
  0% { opacity: 0; transform: translate(0, 10%); }
  100% { opacity: 1; transform: translate(0, 0); }
}

@keyframes envelop-open {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes envelop-decorators_appear {
  0% { opacity: 0; transform: scale(0); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes envelop-open-guest {
  0% { opacity: 1; transform: rotate(0deg) translate(0, 100%) scale(0.9, 0); }
  100% { opacity: 1; transform: rotate(-14deg) translate(0, 0%) scale(1); }
}

@keyframes envelop-open-photo {
  0% { opacity: 1; transform: rotate(0deg) translate(0, 100%) scale(0.9, 0); }
  100% { opacity: 1; transform: rotate(12deg) translate(0, 0%) scale(1); }
}

@keyframes envelop-open-countdown {
  0% { opacity: 1; transform: rotate(0deg) translate(0, 100%) scale(0, 0); }
  100% { opacity: 1; transform: rotate(-4deg) translate(0, 0%) scale(1); }
}

#page_1 > .bandParent {
  top: 0px;
}