#entry {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  z-index: 1000;
  transition: opacity 1s ease;
}

#entry-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: -1;
  filter: brightness(0.85) contrast(0.75) saturate(0.9);
}

.envelope-container {
  /* Tells browser only for tapping, no panning or zooming here. */
  touch-action: manipulation;
  /* On iOS Safari, tapping elements creates an ugly gray/blue flash. 
     This removes it. */
  -webkit-tap-highlight-color: transparent;

  position: relative;
  width: clamp(220px, 60vw, 420px);
  margin-top: 0;
  cursor: pointer;
  filter: drop-shadow(0 0.5rem 1.1rem rgba(0, 0, 0, 0.25))
    drop-shadow(0 0 0.5rem rgba(255, 210, 180, 0));
  animation: gentle-pulse 6s ease-in-out infinite;
  transition: filter 1s ease, box-shadow 1.5s ease;
  box-shadow: 0 0 0.5rem 0 rgba(255, 210, 180, 0);
}

.envelope-container:hover {
  box-shadow: 0 0 2rem 0.5rem rgba(255, 210, 180, 0.4);
  animation: gentle-pulse 6s ease-in-out infinite;
}

@keyframes gentle-pulse {
  0%,
  100% {
    filter: drop-shadow(0 0.5rem 1.1rem rgba(0, 0, 0, 0.25))
      drop-shadow(0 0 0.5rem rgba(255, 210, 180, 0));
    transform: scale(1) translateY(0px) rotateZ(-1.2deg);
  }
  50% {
    filter: drop-shadow(0 0.5rem 1.1rem rgba(0, 0, 0, 0.25))
      drop-shadow(0 0 1.5rem rgba(255, 210, 180, 0.3));
    transform: scale(1.02) translateY(-8px) rotateZ(1.2deg);
  }
}

.envelope-container.incorrect-password {
  box-shadow: 0 0 2.5rem 0.75rem rgba(255, 51, 0, 0.4);
}

.envelope-base {
  width: 100%;
}

.flap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  transform-origin: top center;
  filter: drop-shadow(0 0.25rem 0.5rem rgba(0, 0, 0, 0.2));
  transition: transform 1.25s ease;
}

.closed .flap {
  transform: rotateX(0);
}

.opening .flap {
  transform: rotateX(-45deg);
}

.open .flap {
  transform: rotateX(-150deg);
}

.tap {
  margin-top: 2rem;
  color: #fff;
  font-family: "Parisienne", cursive;
  font-size: clamp(1.5rem, 3.5vw, 2.125rem);
  opacity: 0.6;
  animation: text-pulse 6s ease-in-out infinite;
}

@keyframes text-pulse {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.7;
  }
}

/* Dialog */

/* Style the dialog box */
#password-dialog {
  border: none;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  inset: 0 auto auto 0;
  left: 50%;
  width: min(400px, calc(80vw - 32px));
  max-width: 400px;
  margin: 0 auto; /* Centers horizontally */
  overflow: hidden;
  padding: 1rem;
  position: fixed;
  top: 0;
  transform: translate(-50%, -100%);
  transition: transform 0.3s ease-out;
  width: 100%;
}

#password-dialog::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(30, 22, 20, 0.06);
  border-radius: 14px;
  pointer-events: none;
}

#password-dialog[open] {
  transform: translate(-50%, 0);
  opacity: 1;
  display: block; /* important: not flex */
}

#password-dialog form,
.dialog-shell,
.dialog-content {
  width: 100%;
}

/* Flexbox for the input and button */
.dialog-content {
  display: flex;
  gap: 10px;
    align-items: stretch; 
}

#password-input {
  flex: 1;
  min-width: 0;

  height: 52px;
  padding: 0 14px;

  font-family: "Crimson Pro", serif;
  font-size: 19px;
  color: rgba(30, 22, 20, 0.92);

  background: rgba(255, 255, 255, 0.70);
  border: 1px solid rgba(30, 22, 20, 0.14);
  border-radius: 14px;

  outline: none;
}

#password-input:focus {
  border-color: rgba(165, 103, 83, 0.55);
  box-shadow: 0 0 0 3px rgba(165, 103, 83, 0.16);
}

#password-submit {
  height: 52px;
  padding: 0 18px;

  background: #a56753;
  border: 1px solid rgba(30, 22, 20, 0.14);
  border-radius: 14px;

  color: rgba(255, 255, 255, 0.95);
  font-family: "Crimson Pro", serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.01em;

  box-shadow:
    0 10px 18px rgba(0, 0, 0, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.18) inset;
}

#password-submit:active {
  transform: translateY(1px);
}